Merge branch 'main' into feat-ai-typewriter-animation

kodiakhq[bot] · web-flow · commit d6e8cac42cfa · 2025-01-17T16:20:38.000Z
diff --git a/.changeset/hungry-countries-move.md b/.changeset/hungry-countries-move.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/select": patch
+"@twilio-paste/core": patch
+---
+
+[Select]: Fix wrong background color during disabled state
diff --git a/.changeset/nervous-lies-drive.md b/.changeset/nervous-lies-drive.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/core": minor
+"@twilio-paste/icons": minor
+---
+
+[Icons] added 4 new icons FeedbackIcon, TextIcon, CarouselIcon and CardIcon
diff --git a/.changeset/selfish-bottles-argue.md b/.changeset/selfish-bottles-argue.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/in-page-navigation": minor
+"@twilio-paste/core": minor
+---
+
+[InPageNavigation] modified vertical items to wrap text as opposed to using ellipses
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
@@ -340,7 +340,7 @@ export const SITEMAP = [
   "/tokens/",
 ];
 
-const SITEMAP_CHUNKS: string[][] = [];
+const SITEMAP_CHUNKS = [];
 const CHUNK_SIZE = 25;
 
 for (let i = 0, len = SITEMAP.length; i < len; i += CHUNK_SIZE) {
diff --git a/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx b/packages/paste-core/components/in-page-navigation/src/InPageNavigationItem.tsx
@@ -63,6 +63,7 @@ const VERTICAL_BASE_STYLES: BoxStyleProps = {
   paddingRight: "space50",
   borderBottomRightRadius: "borderRadius30",
   borderTopRightRadius: "borderRadius30",
+  whiteSpace: "break-spaces",
   _focus: {
     boxShadow: "shadowFocusInset",
     outline: "none",
diff --git a/packages/paste-core/components/select/src/Select.tsx b/packages/paste-core/components/select/src/Select.tsx
@@ -110,6 +110,7 @@ export const SelectElement = React.forwardRef<HTMLSelectElement, SelectProps>(
         width="100%"
         _disabled={{
           color: variant === "inverse" ? "colorTextInverseWeakest" : "colorTextWeaker",
+          backgroundColor: "transparent",
           cursor: "not-allowed",
           opacity: 1,
         }}
diff --git a/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap b/packages/paste-icons/__test__/__snapshots__/icons.spec.tsx.snap
@@ -35,6 +35,8 @@ Array [
   "CallIncomingIcon",
   "CallOutgoingIcon",
   "CallTransferIcon",
+  "CardIcon",
+  "CarouselIcon",
   "CartIcon",
   "ChatIcon",
   "CheckboxCheckIcon",
@@ -100,6 +102,7 @@ Array [
   "ExportIcon",
   "FaxCapableIcon",
   "FeedIcon",
+  "FeedbackIcon",
   "FileAudioIcon",
   "FileIcon",
   "FileImageIcon",
@@ -298,6 +301,7 @@ Array [
   "TextFormatClearIcon",
   "TextFormatIcon",
   "TextHighlightIcon",
+  "TextIcon",
   "ThemeIcon",
   "ThumbsDownIcon",
   "ThumbsUpIcon",
diff --git a/packages/paste-icons/build.icon-list.js b/packages/paste-icons/build.icon-list.js
diff --git a/packages/paste-icons/json/icons.json b/packages/paste-icons/json/icons.json
diff --git a/packages/paste-icons/src/CardIcon.tsx b/packages/paste-icons/src/CardIcon.tsx
@@ -0,0 +1,55 @@
+import { useUID } from "@twilio-paste/uid-library";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from "react";
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface CardIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const CardIcon = React.forwardRef<HTMLElement, CardIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `CardIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[CardIcon]: Missing a title for non-decorative icon.");
+    }
+
+    return (
+      <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3 3.505V16.5c0 .163.04.251.072.3a.38.38 0 00.152.128.732.732 0 00.28.072H16.5c.163 0 .251-.04.3-.072a.38.38 0 00.128-.152.731.731 0 00.071-.269l.001-.012V3.5a.524.524 0 00-.072-.3.378.378 0 00-.152-.128.73.73 0 00-.269-.071L16.495 3H3.5a.524.524 0 00-.3.072.38.38 0 00-.128.152.73.73 0 00-.071.269L3 3.505zM16.5 2.5V2h-13c-.337 0-.624.086-.855.24a1.377 1.377 0 00-.467.536A1.728 1.728 0 002 3.472V3.5l.5.001H2v13c0 .337.086.624.24.855.153.229.352.375.536.467a1.729 1.729 0 00.696.178H3.5l.001-.5v.5h13c.337 0 .624-.086.855-.24.229-.153.375-.352.467-.536a1.73 1.73 0 00.178-.696V16.5l-.5-.001h.5v-13c0-.337-.086-.624-.24-.855a1.378 1.378 0 00-.536-.467A1.73 1.73 0 0016.528 2H16.5l-.001.5z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M7 6.528v2.944a.255.255 0 00.122.028h5.82a.255.255 0 00.121-.028V6.528a.255.255 0 00-.122-.028H7.122A.255.255 0 007 6.528zm-.622-.786c.208-.158.472-.242.744-.242h5.82c.271 0 .536.084.743.242a.926.926 0 01.378.734v3.048c0 .32-.17.575-.378.734a1.226 1.226 0 01-.744.242H7.122c-.272 0-.536-.084-.744-.242A.926.926 0 016 9.524V6.476c0-.32.17-.575.378-.734zM5 12.5a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5zm0 2a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+CardIcon.displayName = "CardIcon";
+export { CardIcon };
diff --git a/packages/paste-icons/src/CarouselIcon.tsx b/packages/paste-icons/src/CarouselIcon.tsx
@@ -0,0 +1,53 @@
+import { useUID } from "@twilio-paste/uid-library";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from "react";
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface CarouselIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const CarouselIcon = React.forwardRef<HTMLElement, CarouselIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `CarouselIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[CarouselIcon]: Missing a title for non-decorative icon.");
+    }
+
+    return (
+      <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            d="M7 17a1 1 0 11-2 0 1 1 0 012 0zm4 0a1 1 0 11-2 0 1 1 0 012 0zm4 0a1 1 0 11-2 0 1 1 0 012 0zm2-12.5a.5.5 0 011 0v7a.5.5 0 01-1 0v-7zm-15 0a.5.5 0 011 0v7a.5.5 0 01-1 0v-7z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M13 4H7a1 1 0 00-1 1v6a1 1 0 001 1h6a1 1 0 001-1V5a1 1 0 00-1-1zM7 3a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V5a2 2 0 00-2-2H7z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+CarouselIcon.displayName = "CarouselIcon";
+export { CarouselIcon };
diff --git a/packages/paste-icons/src/FeedbackIcon.tsx b/packages/paste-icons/src/FeedbackIcon.tsx
@@ -0,0 +1,55 @@
+import { useUID } from "@twilio-paste/uid-library";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from "react";
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface FeedbackIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const FeedbackIcon = React.forwardRef<HTMLElement, FeedbackIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `FeedbackIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[FeedbackIcon]: Missing a title for non-decorative icon.");
+    }
+
+    return (
+      <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.433 4A.433.433 0 005 4.433v12.13a.433.433 0 00.433.433h3.732a.5.5 0 010 1H5.433A1.433 1.433 0 014 16.563V4.433A1.433 1.433 0 015.433 3h6.613c.38 0 .744.152 1.013.42l3.653 3.654a1.459 1.459 0 01.417 1.127.5.5 0 11-.998-.07.457.457 0 00-.13-.354l-3.65-3.65A.434.434 0 0012.045 4H5.433z"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M11.965 3a.5.5 0 01.5.5v3.732a.433.433 0 00.433.433h3.732a.5.5 0 010 1h-3.732a1.433 1.433 0 01-1.433-1.433V3.5a.5.5 0 01.5-.5zM9.42 8.614a.5.5 0 01.093.701L8.16 11.084a.987.987 0 01-.694.379l-.017.001a.98.98 0 01-.738-.28l-.009-.009-.697-.722a.5.5 0 11.72-.694l.664.688 1.328-1.74a.5.5 0 01.701-.093zm0 4.199a.5.5 0 01.093.7l-1.352 1.77a.985.985 0 01-.694.379H7.45a.978.978 0 01-.738-.279l-.009-.009-.697-.722a.5.5 0 01.72-.694l.664.687 1.328-1.738a.5.5 0 01.701-.094zm1.112-1.848a.5.5 0 01.5-.5h2.332a.5.5 0 110 1h-2.332a.5.5 0 01-.5-.5zm6.645-.437a.812.812 0 00-.577.24l-.002.003-4.64 4.64-.289 1.448 1.449-.29 4.64-4.641a.813.813 0 000-1.155l-.003-.004a.814.814 0 00-.578-.241zm-.698-.86a1.812 1.812 0 011.985.396 1.814 1.814 0 010 2.574h-.002l-4.744 4.745a.5.5 0 01-.256.137l-2.332.467a.5.5 0 01-.589-.589l.467-2.332a.5.5 0 01.137-.256l4.744-4.744.001-.001c.168-.17.369-.305.59-.397z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+FeedbackIcon.displayName = "FeedbackIcon";
+export { FeedbackIcon };
diff --git a/packages/paste-icons/src/TextIcon.tsx b/packages/paste-icons/src/TextIcon.tsx
@@ -0,0 +1,55 @@
+import { useUID } from "@twilio-paste/uid-library";
+/**
+ * This file was automatically generated with @twilio-labs/svg-to-react
+ */
+import * as React from "react";
+
+import { IconWrapper } from "./helpers/IconWrapper";
+import type { IconWrapperProps } from "./helpers/IconWrapper";
+
+export interface TextIconProps extends IconWrapperProps {
+  title?: string;
+  decorative: boolean;
+}
+
+const TextIcon = React.forwardRef<HTMLElement, TextIconProps>(
+  ({ as, display, element = "ICON", size, color, title, decorative }, ref) => {
+    const titleId = `TextIcon-${useUID()}`;
+
+    if (!decorative && title == null) {
+      throw new Error("[TextIcon]: Missing a title for non-decorative icon.");
+    }
+
+    return (
+      <IconWrapper as={as} display={display} element={element} size={size} color={color} ref={ref}>
+        <svg
+          role="img"
+          aria-hidden={decorative}
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          width="100%"
+          height="100%"
+          viewBox="0 0 20 20"
+          aria-labelledby={titleId}
+        >
+          {title ? <title id={titleId}>{title}</title> : null}
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M6.84 3h6.325c.648 0 1.183 0 1.607.057.447.06.843.192 1.162.51.319.32.45.718.51 1.164.056.423.056.957.056 1.6v.727a.5.5 0 01-1 0v-.683c0-.692 0-1.16-.048-1.511-.045-.336-.124-.487-.226-.59-.102-.102-.253-.18-.588-.226C14.29 4.001 13.822 4 13.13 4H10.5v12.438a.5.5 0 01-1 0V4H6.875c-.692 0-1.16.001-1.51.048-.337.045-.488.124-.59.227-.103.102-.182.253-.227.59-.047.35-.048.818-.048 1.51v.683a.5.5 0 11-1 0V6.34c0-.648 0-1.184.057-1.609.06-.447.192-.845.51-1.164m0 0c.32-.318.717-.45 1.164-.51C5.656 3 6.192 3 6.84 3"
+          />
+          <path
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5.5 16.5A.5.5 0 016 16h8a.5.5 0 010 1H6a.5.5 0 01-.5-.5z"
+          />
+        </svg>
+      </IconWrapper>
+    );
+  },
+);
+
+TextIcon.displayName = "TextIcon";
+export { TextIcon };
diff --git a/packages/paste-icons/svg/Card.svg b/packages/paste-icons/svg/Card.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 3.505V16.5c0 .163.04.251.072.3a.38.38 0 0 0 .152.128.732.732 0 0 0 .28.072H16.5c.163 0 .251-.04.3-.072a.38.38 0 0 0 .128-.152.731.731 0 0 0 .071-.269l.001-.012V3.5a.524.524 0 0 0-.072-.3.378.378 0 0 0-.152-.128.73.73 0 0 0-.269-.071L16.495 3H3.5a.524.524 0 0 0-.3.072.38.38 0 0 0-.128.152.73.73 0 0 0-.071.269L3 3.505ZM16.5 2.5V2h-13c-.337 0-.624.086-.855.24a1.377 1.377 0 0 0-.467.536A1.728 1.728 0 0 0 2 3.472V3.5l.5.001H2v13c0 .337.086.624.24.855.153.229.352.375.536.467a1.729 1.729 0 0 0 .696.178H3.5l.001-.5v.5h13c.337 0 .624-.086.855-.24.229-.153.375-.352.467-.536a1.73 1.73 0 0 0 .178-.696V16.5l-.5-.001h.5v-13c0-.337-.086-.624-.24-.855a1.378 1.378 0 0 0-.536-.467A1.73 1.73 0 0 0 16.528 2H16.5l-.001.5Z" fill="#606B85"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 6.528v2.944a.255.255 0 0 0 .122.028h5.82a.255.255 0 0 0 .121-.028V6.528a.255.255 0 0 0-.122-.028H7.122A.255.255 0 0 0 7 6.528Zm-.622-.786c.208-.158.472-.242.744-.242h5.82c.271 0 .536.084.743.242a.926.926 0 0 1 .378.734v3.048c0 .32-.17.575-.378.734a1.226 1.226 0 0 1-.744.242H7.122c-.272 0-.536-.084-.744-.242A.926.926 0 0 1 6 9.524V6.476c0-.32.17-.575.378-.734ZM5 12.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Zm0 2a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5Z" fill="#606B85"/></svg>
diff --git a/packages/paste-icons/svg/Carousel.svg b/packages/paste-icons/svg/Carousel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M7 17a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-12.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7Zm-15 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0v-7Z" fill="#606B85"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13 4H7a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1ZM7 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H7Z" fill="#606B85"/></svg>
diff --git a/packages/paste-icons/svg/Feedback.svg b/packages/paste-icons/svg/Feedback.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.433 4A.433.433 0 0 0 5 4.433v12.13a.433.433 0 0 0 .433.433h3.732a.5.5 0 0 1 0 1H5.433A1.433 1.433 0 0 1 4 16.563V4.433A1.433 1.433 0 0 1 5.433 3h6.613c.38 0 .744.152 1.013.42l3.653 3.654a1.459 1.459 0 0 1 .417 1.127.5.5 0 1 1-.998-.07.457.457 0 0 0-.13-.354l-3.65-3.65A.434.434 0 0 0 12.045 4H5.433Z" fill="#606B85"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.965 3a.5.5 0 0 1 .5.5v3.732a.433.433 0 0 0 .433.433h3.732a.5.5 0 0 1 0 1h-3.732a1.433 1.433 0 0 1-1.433-1.433V3.5a.5.5 0 0 1 .5-.5ZM9.42 8.614a.5.5 0 0 1 .093.701L8.16 11.084a.987.987 0 0 1-.694.379l-.017.001a.98.98 0 0 1-.738-.28l-.009-.009-.697-.722a.5.5 0 1 1 .72-.694l.664.688 1.328-1.74a.5.5 0 0 1 .701-.093Zm0 4.199a.5.5 0 0 1 .093.7l-1.352 1.77a.985.985 0 0 1-.694.379H7.45a.978.978 0 0 1-.738-.279l-.009-.009-.697-.722a.5.5 0 0 1 .72-.694l.664.687 1.328-1.738a.5.5 0 0 1 .701-.094Zm1.112-1.848a.5.5 0 0 1 .5-.5h2.332a.5.5 0 1 1 0 1h-2.332a.5.5 0 0 1-.5-.5Zm6.645-.437a.812.812 0 0 0-.577.24l-.002.003-4.64 4.64-.289 1.448 1.449-.29 4.64-4.641a.813.813 0 0 0 0-1.155l-.003-.004a.814.814 0 0 0-.578-.241Zm-.698-.86a1.812 1.812 0 0 1 1.985.396 1.814 1.814 0 0 1 0 2.574h-.002l-4.744 4.745a.5.5 0 0 1-.256.137l-2.332.467a.5.5 0 0 1-.589-.589l.467-2.332a.5.5 0 0 1 .137-.256l4.744-4.744.001-.001c.168-.17.369-.305.59-.397Z" fill="#606B85"/></svg>
diff --git a/packages/paste-icons/svg/Text.svg b/packages/paste-icons/svg/Text.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.84 3h6.325c.648 0 1.183 0 1.607.057.447.06.843.192 1.162.51.319.32.45.718.51 1.164.056.423.056.957.056 1.6v.727a.5.5 0 0 1-1 0v-.683c0-.692 0-1.16-.048-1.511-.045-.336-.124-.487-.226-.59-.102-.102-.253-.18-.588-.226C14.29 4.001 13.822 4 13.13 4H10.5v12.438a.5.5 0 0 1-1 0V4H6.875c-.692 0-1.16.001-1.51.048-.337.045-.488.124-.59.227-.103.102-.182.253-.227.59-.047.35-.048.818-.048 1.51v.683a.5.5 0 1 1-1 0V6.34c0-.648 0-1.184.057-1.609.06-.447.192-.845.51-1.164m0 0c.32-.318.717-.45 1.164-.51C5.656 3 6.192 3 6.84 3" fill="#606B85"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 16.5A.5.5 0 0 1 6 16h8a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5Z" fill="#606B85"/></svg>
diff --git a/packages/paste-website/src/components/site-search/SearchForm.tsx b/packages/paste-website/src/components/site-search/SearchForm.tsx
@@ -62,6 +62,7 @@ const SearchForm: React.FC<React.PropsWithChildren<SearchFormProps>> = ({
               onChange={onChange}
               data-cy="paste-docsearch-input"
               ref={inputRef}
+              autoComplete="off"
             />
           </FormControl>
         </FormSection>
diff --git a/packages/paste-website/src/components/tokens-list/TokensListFilter.tsx b/packages/paste-website/src/components/tokens-list/TokensListFilter.tsx
@@ -46,7 +46,7 @@ export const TokensListFilter: React.FC<React.PropsWithChildren<TokensListFilter
     <Box
       marginBottom="space80"
       position="sticky"
-      top={`${SITE_TOPBAR_HEIGHT}px`}
+      top={`${SITE_TOPBAR_HEIGHT - 1}px`}
       zIndex="zIndex10"
       marginX="spaceNegative40"
       css={{
diff --git a/packages/paste-website/src/pages/index.tsx b/packages/paste-website/src/pages/index.tsx
@@ -37,6 +37,7 @@ const HomePage = ({ navigationData }: InferGetStaticPropsType<typeof getStaticPr
         <title>{SiteMetaDefaults.TITLE}</title>
         <link rel="canonical" href="https://paste.twilio.design" />
         <meta key="description" name="description" content={SiteMetaDefaults.DESCRIPTION} />
+        <meta name="google-site-verification" content="RcDkNXli_nLDStuxzN6Xcwi_LWtDjcHKJlC1uhGU4vU" />
       </Head>
       <HomeHero />
       <NewSection />
diff --git a/packages/paste-website/src/pages/sitemap.xml.tsx b/packages/paste-website/src/pages/sitemap.xml.tsx
@@ -1,36 +1,25 @@
-import { globby } from "globby-esm";
 import type { GetServerSideProps } from "next";
 
+import { SITEMAP } from "../../../../cypress/integration/sitemap-vrt/constants"; // Import the SITEMAP used for cypress
+
 const Sitemap = (): React.ReactElement | null => {
   return null;
 };
 
 export const getServerSideProps: GetServerSideProps = async ({ res }) => {
   const BASE_URL = "https://paste.twilio.design";
 
-  const paths = await globby(["**/*.js", "!sitemap.xml.js", "!404.js", "!_*.js"], {
-    cwd: __dirname,
-  });
-  const staticPaths = paths.map((staticPagePath) => {
-    const path = staticPagePath.replace(".js", "");
-    const route = path === "index" ? "" : `${path}/`;
-
-    return `${BASE_URL}/${route}`;
-  });
-
   const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
     <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-      ${staticPaths
-        .map((url) => {
-          return `
+      ${SITEMAP.map((url) => {
+        return `
             <url>
-              <loc>${url}</loc>
+              <loc>${BASE_URL}${url}</loc>
               <changefreq>daily</changefreq>
               <priority>0.7</priority>
             </url>
           `;
-        })
-        .join("")}
+      }).join("")}
     </urlset>
   `;
 
