@loomhq/lens 12.9.0 → 12.11.0

package/dist/esm/index.js

@@ -53,17 +53,18 @@ var borderAlpha = 0.14;
 var backdropAlpha = 0.46;
 var backdropDarkAlpha = 0.9;
 var backdropTwilightAlpha = 0.8;
-var focusRingAlpha = 0.8;
 var buttonBorderAlpha = 0.25;
 var tabBackgroundAlpha = 0.06;
 var highlightAlpha = 0.15;
+var highlightHoverAlpha = 0.3;
+var highlightActiveAlpha = 0.45;
 var hslaBaseColors = {
   red: { h: 4, s: 64, l: 48, a: 1 },
-  blurpleLight: { h: 240, s: 83.3, l: 95.3, a: 1 },
-  blurpleMedium: { h: 242, s: 81, l: 87.6, a: 1 },
-  blurple: { h: 242, s: 88.4, l: 66.3, a: 1 },
-  blurpleDark: { h: 242, s: 87.6, l: 62, a: 1 },
-  blurpleStrong: { h: 242, s: 55, l: 36, a: 1 },
+  blurpleLight: { h: 214.3, s: 91.3, l: 95.5, a: 1 },
+  blurpleMedium: { h: 216.5, s: 92, l: 90.2, a: 1 },
+  blurple: { h: 215.4, s: 80, l: 47.65, a: 1 },
+  blurpleDark: { h: 215.9, s: 79.9, l: 41, a: 1 },
+  blurpleStrong: { h: 216.3, s: 69.2, l: 22.9, a: 1 },
   offWhite: { h: 0, s: 0, l: 97.25, a: 1 },
   blueLight: { h: 216.5, s: 92, l: 90.2, a: 1 },
   blue: { h: 215.4, s: 80, l: 47.65, a: 1 },
@@ -94,13 +95,14 @@ var themeSharedColors = {
   record: hslaBaseColors.orange,
   recordHover: darken(hslaBaseColors.orange, hoverIncrease),
   recordActive: darken(hslaBaseColors.orange, activeIncrease),
-  focusRing: alphaFunction(hslaBaseColors.blurple, focusRingAlpha),
   backdropDark: alphaFunction(hslaGreys.grey8, backdropDarkAlpha),
   backdropTwilight: alphaFunction(
     hslaBaseColors.blurpleStrong,
     backdropTwilightAlpha
   ),
   highlight: alphaFunction(hslaBaseColors.blurple, highlightAlpha),
+  highlightHover: alphaFunction(hslaBaseColors.blurple, highlightHoverAlpha),
+  highlightActive: alphaFunction(hslaBaseColors.blurple, highlightActiveAlpha),
   warning: {
     h: 45.5,
     s: 96,
@@ -174,6 +176,13 @@ var themeColors = {
       a: 1,
       ads: "--ds-background-neutral-bold"
     },
+    focusRing: {
+      h: 216.1,
+      s: 81.4,
+      l: 60,
+      a: 1,
+      ads: "--ds-border-focused"
+    },
     overlay: { h: 0, s: 0, l: 100, a: 1, ads: "--ds-surface-overlay" },
     overlayHover: hslaGreys.grey2,
     overlayActive: hslaGreys.grey3,
@@ -290,9 +299,9 @@ var themeColors = {
     }
   }),
   dark: __spreadProps(__spreadValues({
-    primary: { h: 242, s: 87, l: 73, a: 1 },
-    primaryHover: hslaBaseColors.blurpleDark,
-    primaryActive: hslaBaseColors.blurpleStrong,
+    primary: { h: 216.3, s: 83.2, l: 67.3, a: 1 },
+    primaryHover: { h: 216.1, s: 85.1, l: 76.3, a: 1 },
+    primaryActive: { h: 216.5, s: 92, l: 90.2, a: 1 },
     body: { h: 225, s: 4.3, l: 81.6, a: 1, ads: "--ds-text" },
     bodyDimmed: { h: 217.5, s: 4, l: 60.4, a: 1, ads: "--ds-text-subtlest" },
     bodyInverse: { h: 240, s: 3, l: 12.5, a: 1, ads: "--ds-text-inverse" },
@@ -354,6 +363,13 @@ var themeColors = {
       a: 1,
       ads: "--ds-background-neutral-bold"
     },
+    focusRing: {
+      h: 216.1,
+      s: 85.1,
+      l: 76.3,
+      a: 1,
+      ads: "--ds-background-accent-blue-subtle-hovered"
+    },
     overlay: { h: 225, s: 4, l: 17.6, a: 1, ads: "--ds-surface-overlay" },
     overlayHover: {
       h: 225,
@@ -516,7 +532,7 @@ var getColorValue = (color) => {
   }
 };
 
-// src/hooks/use-media.js
+// src/hooks/use-media.ts
 import _debounce from "lodash/debounce";
 import React from "react";
 function useMedia(queries, values, defaultValue) {
@@ -681,7 +697,7 @@ var Media = ({ children, queries, values, defaultValue }) => {
   return children(value);
 };
 
-// src/utilities/styles.js
+// src/utilities/styles.ts
 var getTextSize = (size) => size && `
   font-size: var(--lns-fontSize-${size});
   line-height: var(--lns-lineHeight-${size});
@@ -846,15 +862,15 @@ var breakpoints = {
   large: "75em"
 };
 var gradients = {
-  "ai-primary": "radial-gradient(134.96% 884.49% at 119.29% 112.58%, #DC43BE 0%, #565ADD 70%)",
-  "ai-secondary": "radial-gradient(100% 138.41% at 100% 100%, #EFF0FF 0%, #FFFFFF 100%)"
+  "ai-primary": "conic-gradient(from 270deg, #0469FF 90deg, #BF63F3 180deg, #FFA900 270deg, #0065FF 360deg)",
+  "ai-secondary": "radial-gradient(138.41% 100% at 100% 100%, #E9F2FE 0%, #FFF 100%)"
 };
 
 // src/components/text/text.tsx
 import styled from "@emotion/styled";
 import React2 from "react";
 
-// src/console-messages.js
+// src/console-messages.ts
 var textIsDimmedDeprecated = `Lens: Text prop 'isDimmed' is deprecated, use color="bodyDimmed" instead.`;
 var customStylesWarning = `Lens: don't apply custom styles to components, learn more: https://lens.loom.dev/guides/development-best-practices/the-risk-of-modifying-components-with-custom-styles.`;
 var distributeDeprecatedWarning = `Lens: Distribute component is deprecated. Use Arrange or Split.`;
@@ -990,7 +1006,7 @@ var Text = (_a) => {
 var alignments = ["left", "right", "center"];
 var text_default = Text;
 
-// src/css-utilities/rules.js
+// src/css-utilities/rules.ts
 var sides = ["top", "bottom", "left", "right"];
 var spacesWithZero = __spreadValues({ 0: "0" }, spaces);
 var spacesWithAutoAndZero = __spreadValues({ 0: "0", auto: "auto" }, spaces);
@@ -1455,7 +1471,7 @@ var accessibilityRules = [
   }
 ];
 
-// src/css-utilities/generate-utilities.js
+// src/css-utilities/generate-utilities.ts
 var separator = "\\:";
 var allRules = [
   ...colorRules,
@@ -1856,7 +1872,7 @@ var avatar_default = Avatar;
 // src/components/base-styles/base-styles.tsx
 import { Global, css } from "@emotion/react";
 import React4 from "react";
-var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body", documentElement = "html") => {
+var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
   return `
     ${rootElement} {
       font-size: 100%;
@@ -1887,38 +1903,6 @@ var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body", docume
     ${getAllCssVarsString(rootElement)}
 
     ${cssUtilities()}
-
-    ${documentElement}[data-brand-color="blue"] {
-      --lns-color-blurpleLight: #E9F2FE;
-      --lns-color-blurpleMedium: #CFE1FD;
-      --lns-color-blurple: #1868DB;
-      --lns-color-blurpleDark: #1558BC;
-      --lns-color-blurpleStrong: #123263;
-
-      --lns-color-backdropTwilight: hsla(216, 69%, 23%, 0.8);
-      --lns-color-highlight: hsla(215, 80%, 48%, 0.15);
-
-      --lns-gradient-ai-primary: conic-gradient(from 270deg, #0469FF 90deg, #BF63F3 180deg, #FFA900 270deg, #0065FF 360deg);
-      --lns-gradient-ai-secondary: radial-gradient(138.41% 100% at 100% 100%, #E9F2FE 0%, #FFF 100%);
-    }
-
-    ${documentElement}[data-color-mode="light"][data-brand-color="blue"],
-    ${documentElement}[data-brand-color="blue"] [data-lens-theme="light"],
-    ${documentElement}[data-brand-color="blue"] .brand-theme-light {
-      --lns-themeLight-color-primary: #1868DB;
-      --lns-themeLight-color-primaryHover: #1558BC;
-      --lns-themeLight-color-primaryActive: #123263;
-      --lns-themeLight-color-focusRing: #4688EC;
-    }
-
-    ${documentElement}[data-color-mode="dark"][data-brand-color="blue"],
-    ${documentElement}[data-brand-color="blue"] [data-lens-theme="dark"],
-    ${documentElement}[data-brand-color="blue"] .brand-theme-dark {
-      --lns-themeDark-color-primary: #669DF1;
-      --lns-themeDark-color-primaryHover: #8FB8F6;
-      --lns-themeDark-color-primaryActive: #CFE1FD;
-      --lns-themeDark-color-focusRing: #8FB8F6;
-    }
   `;
 };
 var BaseStyles = () => /* @__PURE__ */ React4.createElement(Global, { styles: css(buildGlobalStylesheet()) });
@@ -2117,7 +2101,7 @@ var variantStyles = {
     color: getColorValue("primary"),
     background: getColorValue("highlight"),
     borderColor: null,
-    hover: getColorValue("blurpleMedium"),
+    hover: getColorValue("highlightHover"),
     active: null
   },
   record: {
@@ -2210,7 +2194,7 @@ var ButtonWrapper = styled5.button`
   }
 
   &:focus-visible {
-    ${getOffsetFocusRing()};
+    ${(props) => props["aria-expanded"] ? "outline: none;" : getOffsetFocusRing()};
   }
 
   &::-moz-focus-inner {
@@ -3467,11 +3451,15 @@ var text_button_default = TextButton;
 // src/components/select/select.tsx
 import styled19 from "@emotion/styled";
 import Downshift from "downshift";
-import React25, { useEffect as useEffect2, useState, useMemo } from "react";
+import React26, {
+  useEffect as useEffect2,
+  useState,
+  useMemo
+} from "react";
 import { useLayer } from "react-laag";
 import ResizeObserver from "resize-observer-polyfill";
 
-// src/utilities/downshift.js
+// src/utilities/downshift.ts
 var getDownshiftEnvironment = (container) => {
   var _a, _b;
   const rootNode = (_b = (_a = container == null ? void 0 : container()) == null ? void 0 : _a.getRootNode) == null ? void 0 : _b.call(_a);
@@ -3494,6 +3482,7 @@ var getDownshiftEnvironment = (container) => {
 };
 
 // src/utilities/text.ts
+import "react";
 var getTextFromNode = (node) => {
   if (typeof node === "string") {
     return node;
@@ -3517,9 +3506,9 @@ var isIterable = (node) => {
 };
 
 // src/components/icon/available-icons/chevron-down.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 function SvgChevronDown() {
-  return /* @__PURE__ */ React20.createElement("span", { "aria-hidden": true, "data-testid": "ads-refreshed-icon" }, /* @__PURE__ */ React20.createElement("svg", { viewBox: "-2 -2 16 16" }, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement("span", { "aria-hidden": true, "data-testid": "ads-refreshed-icon" }, /* @__PURE__ */ React21.createElement("svg", { viewBox: "-2 -2 16 16" }, /* @__PURE__ */ React21.createElement(
     "path",
     {
       fill: "currentColor",
@@ -3532,13 +3521,13 @@ function SvgChevronDown() {
 
 // src/components/menu/menu.tsx
 import styled17 from "@emotion/styled";
-import React22 from "react";
+import React23 from "react";
 
 // src/components/icon/available-icons/check.tsx
 import CheckMarkIcon from "@atlaskit/icon/core/check-mark";
-import * as React21 from "react";
+import * as React22 from "react";
 function SvgCheck() {
-  return /* @__PURE__ */ React21.createElement(CheckMarkIcon, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React22.createElement(CheckMarkIcon, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/menu/menu.tsx
@@ -3581,13 +3570,15 @@ var MenuItemWrapper = styled17.li`
   cursor: ${(props) => props.isDisabled ? "default" : "pointer"};
   &:focus-visible {
     outline: 1px solid transparent;
-  }
-  &:focus-visible {
-    ${getFocusRing(void 0, "inset")};
+    ${getOffsetFocusRing()};
   }
   ${(props) => props.isHighlighted && !props.isDisabled && `
     background-color: ${getColorValue("backgroundHover")};
   `};
+  ${(props) => props.keyboardMove && props.isHighlighted && !props.isDisabled && `
+    outline: 1px solid transparent;
+    ${getOffsetFocusRing()};
+  `};
   ${(props) => props.hasDivider && `
     position: relative;
     margin-top: ${u(3)};
@@ -3617,7 +3608,8 @@ var MenuItem = (_a) => {
     icon,
     hasDivider,
     children,
-    menuItemRole
+    menuItemRole,
+    keyboardMove
   } = _b, props = __objRest(_b, [
     "isDisabled",
     "isHighlighted",
@@ -3625,7 +3617,8 @@ var MenuItem = (_a) => {
     "icon",
     "hasDivider",
     "children",
-    "menuItemRole"
+    "menuItemRole",
+    "keyboardMove"
   ]);
   const checkColumn = isSelected ? "auto" : "";
   const iconColumn = icon ? "auto" : "";
@@ -3634,19 +3627,20 @@ var MenuItem = (_a) => {
   const updatedProps = menuItemRole ? __spreadProps(__spreadValues({}, props), {
     role: menuItemRole
   }) : props;
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(
     MenuItemWrapper,
     __spreadValues({
       isHighlighted,
       isDisabled,
+      keyboardMove,
       columns,
       hasDivider,
       tabIndex: isDisabled ? -1 : 0,
       "data-highlighted": isHighlighted || void 0
-    }, props),
-    icon && (typeof icon === "string" ? /* @__PURE__ */ React22.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React22.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React22.createElement(Image2, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React22.createElement(icon_default, { icon, color })),
-    /* @__PURE__ */ React22.createElement(text_default, { color, hasEllipsis: true }, children),
-    isSelected && /* @__PURE__ */ React22.createElement(icon_default, { icon: /* @__PURE__ */ React22.createElement(SvgCheck, null), color })
+    }, updatedProps),
+    icon && (typeof icon === "string" ? /* @__PURE__ */ React23.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React23.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React23.createElement(Image2, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React23.createElement(icon_default, { icon, color })),
+    /* @__PURE__ */ React23.createElement(text_default, { color, hasEllipsis: true }, children),
+    isSelected && /* @__PURE__ */ React23.createElement(icon_default, { icon: /* @__PURE__ */ React23.createElement(SvgCheck, null), color })
   );
 };
 var Menu = (_a) => {
@@ -3674,7 +3668,7 @@ var Menu = (_a) => {
   const updatedDownshiftMenuProps = role ? __spreadProps(__spreadValues({}, downshiftMenuProps()), {
     role
   }) : __spreadValues({}, downshiftMenuProps());
-  return /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(
     MenuContainer,
     __spreadValues(__spreadValues({
       minWidth,
@@ -3682,22 +3676,22 @@ var Menu = (_a) => {
       maxHeight,
       zIndex,
       position
-    }, downshiftMenuProps()), props),
+    }, updatedDownshiftMenuProps), props),
     search && search,
-    /* @__PURE__ */ React22.createElement(MenuWrapper, { search }, children)
+    /* @__PURE__ */ React23.createElement(MenuWrapper, { search }, children)
   );
 };
 var menu_default = Menu;
 
 // src/components/search-bar/search-bar.tsx
 import styled18 from "@emotion/styled";
-import React24 from "react";
+import React25 from "react";
 
 // src/components/icon/available-icons/search.tsx
 import SearchIcon from "@atlaskit/icon/core/search";
-import * as React23 from "react";
+import * as React24 from "react";
 function SvgSearch() {
-  return /* @__PURE__ */ React23.createElement(SearchIcon, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React24.createElement(SearchIcon, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/search-bar/search-bar.tsx
@@ -3714,11 +3708,11 @@ var SearchBar = ({
   onChange,
   getInputProps
 }) => {
-  return /* @__PURE__ */ React24.createElement(SearchBarContainer, null, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(SearchBarContainer, null, /* @__PURE__ */ React25.createElement(
     text_input_default,
     __spreadValues({
       "aria-label": ariaLabel,
-      icon: /* @__PURE__ */ React24.createElement(SvgSearch, null)
+      icon: /* @__PURE__ */ React25.createElement(SvgSearch, null)
     }, getInputProps({
       placeholder,
       value,
@@ -3874,7 +3868,7 @@ var SelectHeader = ({
   const iconColumn = hasIcon ? "auto" : "";
   const columns = `${iconColumn} 1fr auto`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     SelectHeaderWrapper,
     __spreadProps(__spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
       selectedItem,
@@ -3888,20 +3882,20 @@ var SelectHeader = ({
       columns,
       hasError
     }),
-    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ React25.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React25.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React25.createElement(Image3, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React25.createElement(
+    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ React26.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React26.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React26.createElement(Image3, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React26.createElement(
       icon_default,
       {
         icon: getIcon({ options, selectedItem, selectedOptionValue }),
         color
       }
     )),
-    /* @__PURE__ */ React25.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
+    /* @__PURE__ */ React26.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
       options,
       selectedItem,
       selectedOptionValue,
       selectPlaceholder
     })),
-    /* @__PURE__ */ React25.createElement(icon_default, { icon: /* @__PURE__ */ React25.createElement(SvgChevronDown, null), color })
+    /* @__PURE__ */ React26.createElement(icon_default, { icon: /* @__PURE__ */ React26.createElement(SvgChevronDown, null), color })
   );
 };
 var CustomHeader = ({
@@ -3962,7 +3956,7 @@ var didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) => {
 };
 var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps) => {
   const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     MenuItem,
     __spreadProps(__spreadValues({
       key: index,
@@ -4001,7 +3995,7 @@ var SelectMenu = (_a) => {
     "search"
   ]);
   if (!isGrouped(options)) {
-    return /* @__PURE__ */ React25.createElement(menu_default, __spreadValues({ search }, menuProps), options.map(
+    return /* @__PURE__ */ React26.createElement(menu_default, __spreadValues({ search }, menuProps), options.map(
       (item, index) => renderOption(
         item,
         index,
@@ -4013,9 +4007,9 @@ var SelectMenu = (_a) => {
     ));
   }
   let downshiftIndex = 0;
-  return /* @__PURE__ */ React25.createElement(menu_default, __spreadValues({ search }, menuProps), options.map((group) => {
+  return /* @__PURE__ */ React26.createElement(menu_default, __spreadValues({ search }, menuProps), options.map((group) => {
     const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ React25.createElement("li", { key: groupId }, /* @__PURE__ */ React25.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React25.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React25.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+    return /* @__PURE__ */ React26.createElement("li", { key: groupId }, /* @__PURE__ */ React26.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React26.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React26.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
       return renderOption(
         item,
         downshiftIndex++,
@@ -4159,7 +4153,7 @@ var Select = (_a) => {
     }
     return options;
   }, [options, searchValue, search]);
-  return /* @__PURE__ */ React25.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ React25.createElement(Downshift, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+  return /* @__PURE__ */ React26.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ React26.createElement(Downshift, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
     getItemProps,
     getInputProps,
     getMenuProps,
@@ -4171,7 +4165,7 @@ var Select = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* @__PURE__ */ React25.createElement("div", { role: "presentation" }, /* @__PURE__ */ React25.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ React25.createElement(
+      /* @__PURE__ */ React26.createElement("div", { role: "presentation" }, /* @__PURE__ */ React26.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ React26.createElement(
         CustomHeader,
         {
           getToggleButtonProps,
@@ -4187,7 +4181,7 @@ var Select = (_a) => {
           errorMessage,
           isOpen
         }
-      ) : /* @__PURE__ */ React25.createElement(
+      ) : /* @__PURE__ */ React26.createElement(
         SelectHeader,
         {
           getToggleButtonProps,
@@ -4203,7 +4197,7 @@ var Select = (_a) => {
           isOpen
         }
       )), downshiftIsOpen && isOpen && renderLayer(
-        /* @__PURE__ */ React25.createElement(
+        /* @__PURE__ */ React26.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -4211,7 +4205,7 @@ var Select = (_a) => {
               width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
             })
           }),
-          /* @__PURE__ */ React25.createElement(
+          /* @__PURE__ */ React26.createElement(
             SelectMenu,
             {
               options,
@@ -4224,7 +4218,7 @@ var Select = (_a) => {
               maxWidth: menuMaxWidth,
               maxHeight: menuMaxHeight,
               minWidth: menuMinWidth,
-              search: search && /* @__PURE__ */ React25.createElement(
+              search: search && /* @__PURE__ */ React26.createElement(
                 search_bar_default,
                 {
                   ariaLabel: search.searchPlaceholder,
@@ -4237,7 +4231,7 @@ var Select = (_a) => {
             }
           )
         )
-      ), hasError && !downshiftIsOpen && /* @__PURE__ */ React25.createElement(ErrorMessage, null, errorMessage))
+      ), hasError && !downshiftIsOpen && /* @__PURE__ */ React26.createElement(ErrorMessage, null, errorMessage))
     );
   }));
 };
@@ -4245,7 +4239,7 @@ var select_default = Select;
 
 // src/components/backdrop/backdrop.tsx
 import styled20 from "@emotion/styled";
-import React26 from "react";
+import React27 from "react";
 import { useTransition } from "transition-hook";
 
 // src/hooks/use-prevent-scroll.ts
@@ -4339,7 +4333,7 @@ var Backdrop = (_a) => {
   ]);
   const { stage, shouldMount } = useTransition(isOpen, duration);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, shouldMount && /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, shouldMount && /* @__PURE__ */ React27.createElement(
     BackdropWrapper,
     __spreadValues({
       backgroundColor,
@@ -4349,7 +4343,7 @@ var Backdrop = (_a) => {
         opacity: stage === "enter" ? 1 : 0
       }
     }, props),
-    /* @__PURE__ */ React26.createElement(ChildrenWrapper, null, children)
+    /* @__PURE__ */ React27.createElement(ChildrenWrapper, null, children)
   ));
 };
 var backdrop_default = Backdrop;
@@ -4357,13 +4351,13 @@ var backdrop_default = Backdrop;
 // src/components/modal/modal.tsx
 import styled21 from "@emotion/styled";
 import FocusTrap from "focus-trap-react";
-import React28, { useEffect as useEffect3 } from "react";
+import React29, { useEffect as useEffect3 } from "react";
 
 // src/components/icon/available-icons/close.tsx
 import CloseIcon from "@atlaskit/icon/core/close";
-import * as React27 from "react";
+import * as React28 from "react";
 function SvgClose() {
-  return /* @__PURE__ */ React27.createElement(CloseIcon, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React28.createElement(CloseIcon, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/modal/modal.tsx
@@ -4496,7 +4490,7 @@ var ModalCard = (_a) => {
     };
   }, [isOpen, onCloseClick]);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     FocusTrap,
     {
       active: isOpen,
@@ -4505,7 +4499,7 @@ var ModalCard = (_a) => {
         allowOutsideClick: true
       }, initialFocus !== void 0 ? { initialFocus } : {})
     },
-    /* @__PURE__ */ React28.createElement(
+    /* @__PURE__ */ React29.createElement(
       ModalCardWrapper,
       __spreadValues({
         open: isOpen,
@@ -4518,15 +4512,15 @@ var ModalCard = (_a) => {
         "aria-modal": ariaModal,
         "aria-labelledby": ariaLabelledBy
       }, props),
-      !removeClose && onCloseClick && /* @__PURE__ */ React28.createElement(CloseIconSection, null, /* @__PURE__ */ React28.createElement(
+      !removeClose && onCloseClick && /* @__PURE__ */ React29.createElement(CloseIconSection, null, /* @__PURE__ */ React29.createElement(
         icon_button_default,
         {
           altText: "Close",
-          icon: /* @__PURE__ */ React28.createElement(SvgClose, null),
+          icon: /* @__PURE__ */ React29.createElement(SvgClose, null),
           onClick: onCloseClick
         }
       )),
-      /* @__PURE__ */ React28.createElement(
+      /* @__PURE__ */ React29.createElement(
         ModalCardChildrenSection,
         __spreadProps(__spreadValues({}, removeClose ? { tabIndex: 0 } : { tabIndex: -1 }), {
           maxHeight
@@ -4536,7 +4530,7 @@ var ModalCard = (_a) => {
     )
   );
 };
-var Modal = React28.forwardRef(
+var Modal = React29.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4592,14 +4586,14 @@ var Modal = React28.forwardRef(
       }
       onCloseClick(e);
     };
-    return /* @__PURE__ */ React28.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ React28.createElement(
+    return /* @__PURE__ */ React29.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ React29.createElement(
       container_default,
       {
         height: "100%",
         onClick: closeClickHandler,
         onKeyDown
       },
-      /* @__PURE__ */ React28.createElement(
+      /* @__PURE__ */ React29.createElement(
         ModalCard,
         {
           ref,
@@ -4614,19 +4608,19 @@ var Modal = React28.forwardRef(
           ariaLabelledBy: (_a2 = ariaLabelledBy != null ? ariaLabelledBy : titleId) != null ? _a2 : void 0,
           initialFocus
         },
-        /* @__PURE__ */ React28.createElement(
+        /* @__PURE__ */ React29.createElement(
           ContentWrapper,
           {
             rows: `${title ? "auto " : ""} ${children ? "1fr " : ""} ${hasButtons ? "auto" : ""}`
           },
-          title && /* @__PURE__ */ React28.createElement(
+          title && /* @__PURE__ */ React29.createElement(
             TitleSection,
             {
               bottom: children ? "var(--lns-space-medium)" : "var(--lns-space-xlarge)"
             },
-            /* @__PURE__ */ React28.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
+            /* @__PURE__ */ React29.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
           ),
-          /* @__PURE__ */ React28.createElement(
+          /* @__PURE__ */ React29.createElement(
             ChildrenSection2,
             {
               noPadding,
@@ -4636,14 +4630,14 @@ var Modal = React28.forwardRef(
             },
             children && children
           ),
-          hasButtons && /* @__PURE__ */ React28.createElement(
+          hasButtons && /* @__PURE__ */ React29.createElement(
             ButtonsSection,
             {
               top: children ? "var(--lns-space-xlarge)" : 0,
               hasDividers
             },
             alternativeButton,
-            /* @__PURE__ */ React28.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ React28.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
+            /* @__PURE__ */ React29.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ React29.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
           )
         )
       )
@@ -4655,7 +4649,7 @@ var modal_default = Modal;
 // src/components/link/link.tsx
 import { css as css3 } from "@emotion/react";
 import styled22 from "@emotion/styled";
-import React29 from "react";
+import React30 from "react";
 var variants2 = {
   neutral: {
     color: getColorValue("inherit"),
@@ -4726,7 +4720,7 @@ var Link = (_a) => {
     "htmlTag",
     "isDisabled"
   ]);
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     LinkWrapper,
     __spreadValues({
       href,
@@ -4742,7 +4736,7 @@ var link_default = Link;
 
 // src/components/textarea/textarea.tsx
 import styled23 from "@emotion/styled";
-import React30 from "react";
+import React31 from "react";
 var sizesStyles3 = {
   small: {
     padding: `${u(1.5)} ${u(1.75)}`,
@@ -4792,7 +4786,7 @@ var TextareaWrapper = styled23.textarea`
     color: ${getColorValue("bodyDimmed")};
   }
 `;
-var Textarea = React30.forwardRef(
+var Textarea = React31.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onChange,
@@ -4813,7 +4807,7 @@ var Textarea = React30.forwardRef(
       "resize",
       "error"
     ]);
-    return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(
+    return /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(
       TextareaWrapper,
       __spreadValues({
         disabled: isDisabled,
@@ -4826,7 +4820,7 @@ var Textarea = React30.forwardRef(
         resize,
         error
       }, props)
-    ), error ? /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(spacer_default, { bottom: "xmsall" }), /* @__PURE__ */ React30.createElement(text_default, { color: "danger", fontWeight: "regular", size: "body-md" }, error)) : null);
+    ), error ? /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(spacer_default, { bottom: "xmsall" }), /* @__PURE__ */ React31.createElement(text_default, { color: "danger", fontWeight: "regular", size: "body-md" }, error)) : null);
   }
 );
 var textarea_default = Textarea;
@@ -4834,7 +4828,7 @@ var textarea_default = Textarea;
 // src/components/typeahead/typeahead.tsx
 import styled24 from "@emotion/styled";
 import Downshift2 from "downshift";
-import React31, {
+import React32, {
   useEffect as useEffect4,
   useState as useState2,
   useMemo as useMemo2,
@@ -5061,7 +5055,7 @@ var TypeaheadHeader = ({
     onChange: (e) => handleInputValueChange(e.target.value)
   }));
   const showPlaceholder = !inputValue && !selectedOptionValue;
-  return /* @__PURE__ */ React31.createElement(TypeaheadHeaderWrapper, { onClick: handleClickAndFocus, disabled: isDisabled }, hasIcon && /* @__PURE__ */ React31.createElement(IconSection3, null, typeof icon === "string" ? /* @__PURE__ */ React31.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React31.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React31.createElement(TypeaheadImage, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React31.createElement(icon_default, { icon, color })), /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(TypeaheadHeaderWrapper, { onClick: handleClickAndFocus, disabled: isDisabled }, hasIcon && /* @__PURE__ */ React32.createElement(IconSection3, null, typeof icon === "string" ? /* @__PURE__ */ React32.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React32.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React32.createElement(TypeaheadImage, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React32.createElement(icon_default, { icon, color })), /* @__PURE__ */ React32.createElement(
     TypeaheadInputField,
     __spreadProps(__spreadValues({
       ref: inputRef
@@ -5071,12 +5065,12 @@ var TypeaheadHeader = ({
       hasError,
       isDisabled
     })
-  ), !inputValue && /* @__PURE__ */ React31.createElement(TextOverlay, { hasIcon }, /* @__PURE__ */ React31.createElement(text_default, { hasEllipsis: true, color: showPlaceholder ? "bodyDimmed" : "inherit" }, getTitle2({
+  ), !inputValue && /* @__PURE__ */ React32.createElement(TextOverlay, { hasIcon }, /* @__PURE__ */ React32.createElement(text_default, { hasEllipsis: true, color: showPlaceholder ? "bodyDimmed" : "inherit" }, getTitle2({
     options,
     selectedItem,
     selectedOptionValue,
     placeholder
-  }))), /* @__PURE__ */ React31.createElement(AddOnSection, null, hasLoader ? /* @__PURE__ */ React31.createElement(loader_default, { size: "small" }) : /* @__PURE__ */ React31.createElement(icon_default, { icon: /* @__PURE__ */ React31.createElement(SvgChevronDown, null), color })));
+  }))), /* @__PURE__ */ React32.createElement(AddOnSection, null, hasLoader ? /* @__PURE__ */ React32.createElement(loader_default, { size: "small" }) : /* @__PURE__ */ React32.createElement(icon_default, { icon: /* @__PURE__ */ React32.createElement(SvgChevronDown, null), color })));
 };
 var getSelectedOption2 = (value, options) => {
   var _a;
@@ -5098,7 +5092,7 @@ var didSelectedOptionValueChange2 = (selectedOptionValue, prevSelectedItem) => {
 };
 var renderOption2 = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps) => {
   const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(
     MenuItem,
     __spreadProps(__spreadValues({
       key: index,
@@ -5142,16 +5136,16 @@ var TypeaheadMenu = (_a) => {
     "emptyResultsMessage",
     "hasAvailableOptions"
   ]);
-  const defaultLoadingMessage = loadingMessage || /* @__PURE__ */ React31.createElement(loader_default, null);
+  const defaultLoadingMessage = loadingMessage || /* @__PURE__ */ React32.createElement(loader_default, null);
   const defaultEmptyResultsMessage = emptyResultsMessage || "No results";
   if (isLoading) {
-    return /* @__PURE__ */ React31.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ React31.createElement(container_default, { padding: "large" }, /* @__PURE__ */ React31.createElement(align_default, { alignment: "center" }, defaultLoadingMessage)));
+    return /* @__PURE__ */ React32.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ React32.createElement(container_default, { padding: "large" }, /* @__PURE__ */ React32.createElement(align_default, { alignment: "center" }, defaultLoadingMessage)));
   }
   if (!hasAvailableOptions) {
-    return /* @__PURE__ */ React31.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ React31.createElement(container_default, { padding: "large" }, /* @__PURE__ */ React31.createElement(align_default, { alignment: "center" }, defaultEmptyResultsMessage)));
+    return /* @__PURE__ */ React32.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ React32.createElement(container_default, { padding: "large" }, /* @__PURE__ */ React32.createElement(align_default, { alignment: "center" }, defaultEmptyResultsMessage)));
   }
   if (!isGrouped2(options)) {
-    return /* @__PURE__ */ React31.createElement(menu_default, __spreadValues({}, menuProps), options.map(
+    return /* @__PURE__ */ React32.createElement(menu_default, __spreadValues({}, menuProps), options.map(
       (item, index) => renderOption2(
         item,
         index,
@@ -5163,9 +5157,18 @@ var TypeaheadMenu = (_a) => {
     ));
   }
   let downshiftIndex = 0;
-  return /* @__PURE__ */ React31.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
+  return /* @__PURE__ */ React32.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
     const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ React31.createElement("li", { key: groupId }, /* @__PURE__ */ React31.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React31.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ React31.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+    return /* @__PURE__ */ React32.createElement("li", { key: groupId }, /* @__PURE__ */ React32.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ React32.createElement(
+      text_default,
+      {
+        id: groupId,
+        size: "body-sm",
+        fontWeight: "bold",
+        htmlTag: group.headingTag || "h2"
+      },
+      group.group
+    )), /* @__PURE__ */ React32.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
       return renderOption2(
         item,
         downshiftIndex++,
@@ -5300,7 +5303,7 @@ var Typeahead = forwardRef3(
       }
       return changes;
     };
-    return /* @__PURE__ */ React31.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ React31.createElement(Downshift2, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+    return /* @__PURE__ */ React32.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ React32.createElement(Downshift2, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
       getItemProps,
       getInputProps,
       getMenuProps,
@@ -5310,7 +5313,7 @@ var Typeahead = forwardRef3(
     }) => {
       return (
         // Don't set the role to combobox to ensure a consistent experience for screen readers
-        /* @__PURE__ */ React31.createElement("div", { role: "presentation" }, /* @__PURE__ */ React31.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ React31.createElement(
+        /* @__PURE__ */ React32.createElement("div", { role: "presentation" }, /* @__PURE__ */ React32.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ React32.createElement(
           TypeaheadHeader,
           {
             inputRef,
@@ -5332,7 +5335,7 @@ var Typeahead = forwardRef3(
             id
           }
         )), downshiftIsOpen && isOpen && renderLayer(
-          /* @__PURE__ */ React31.createElement(
+          /* @__PURE__ */ React32.createElement(
             "div",
             __spreadProps(__spreadValues({}, layerProps), {
               style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -5340,7 +5343,7 @@ var Typeahead = forwardRef3(
                 width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
               })
             }),
-            /* @__PURE__ */ React31.createElement(
+            /* @__PURE__ */ React32.createElement(
               TypeaheadMenu,
               {
                 options,
@@ -5360,7 +5363,7 @@ var Typeahead = forwardRef3(
               }
             )
           )
-        ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ React31.createElement(ErrorMessage2, null, errorMessage) : null)
+        ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ React32.createElement(ErrorMessage2, null, errorMessage) : null)
       );
     }));
   }
@@ -5371,7 +5374,7 @@ var typeahead_default = Typeahead;
 // src/components/dropdown/dropdown.tsx
 import styled25 from "@emotion/styled";
 import Downshift3 from "downshift";
-import React32, { useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } from "react";
+import React33, { useEffect as useEffect5, useMemo as useMemo3, useState as useState3 } from "react";
 import { useLayer as useLayer3 } from "react-laag";
 import ResizeObserver3 from "resize-observer-polyfill";
 var getAccessibilityProps = ({
@@ -5431,11 +5434,28 @@ var Dropdown = (_a) => {
   ]);
   const environment = getDownshiftEnvironment(container);
   const [downshiftIsOpen, setDownshiftIsOpen] = useState3(false);
+  const [keyboardMove, setKeyboardMove] = useState3(false);
   const [searchValue, setSearchValue] = useState3("");
   const onSearchChange = (e) => {
     const value = e.target.value;
     setSearchValue(value);
   };
+  const onKeyDown = (e) => {
+    switch (e.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+      case "ArrowLeft":
+      case "ArrowRight":
+      case "Enter":
+      case " ":
+      case "Tab":
+      case "Escape":
+        setKeyboardMove(true);
+        break;
+      default:
+        break;
+    }
+  };
   const isOpen = isOpenFromProps || downshiftIsOpen;
   const { layerProps, triggerProps, renderLayer } = useLayer3({
     isOpen,
@@ -5468,7 +5488,7 @@ var Dropdown = (_a) => {
     }
     return options;
   }, [options, searchValue, search]);
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(
     Downshift3,
     {
       stateReducer,
@@ -5484,7 +5504,7 @@ var Dropdown = (_a) => {
       getToggleButtonProps,
       highlightedIndex,
       isOpen: isOpen2
-    }) => /* @__PURE__ */ React32.createElement(
+    }) => /* @__PURE__ */ React33.createElement(
       "div",
       __spreadValues(__spreadValues({}, props), triggerCallback ? {
         // the Downshift component appears to set the following props,
@@ -5494,27 +5514,31 @@ var Dropdown = (_a) => {
         "aria-expanded": null,
         "aria-labelledby": null
       } : {}),
-      /* @__PURE__ */ React32.createElement("div", __spreadValues({}, triggerProps), triggerCallback ? triggerCallback(__spreadValues(__spreadValues({}, getToggleButtonProps()), getAccessibilityProps({
+      /* @__PURE__ */ React33.createElement("div", __spreadValues({}, triggerProps), triggerCallback ? triggerCallback(__spreadValues(__spreadValues({}, getToggleButtonProps({ onKeyDown })), getAccessibilityProps({
         ariaMenuName,
         getInputProps,
         isOpen: isOpen2
-      }))) : /* @__PURE__ */ React32.createElement(TriggerSection, __spreadValues({}, getToggleButtonProps({ tabIndex: 0 })), trigger)),
+      }))) : /* @__PURE__ */ React33.createElement(
+        TriggerSection,
+        __spreadValues({}, getToggleButtonProps({ onKeyDown, tabIndex: 0 })),
+        trigger
+      )),
       isOpen2 && renderLayer(
-        /* @__PURE__ */ React32.createElement(
+        /* @__PURE__ */ React33.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex: menuZIndex })
           }),
-          /* @__PURE__ */ React32.createElement(
+          /* @__PURE__ */ React33.createElement(
             menu_default,
             {
               position: menuPosition,
               minWidth: menuMinWidth,
               maxWidth: menuMaxWidth,
               maxHeight: menuMaxHeight,
-              downshiftMenuProps: getMenuProps,
+              downshiftMenuProps: () => getMenuProps({ onKeyDown }),
               role,
-              search: search && /* @__PURE__ */ React32.createElement(
+              search: search && /* @__PURE__ */ React33.createElement(
                 search_bar_default,
                 {
                   ariaLabel: search.searchPlaceholder,
@@ -5526,11 +5550,12 @@ var Dropdown = (_a) => {
               )
             },
             options.map((item, index) => {
-              return /* @__PURE__ */ React32.createElement(
+              return /* @__PURE__ */ React33.createElement(
                 MenuItem,
                 __spreadValues({
                   key: index,
                   isHighlighted: highlightedIndex === index,
+                  keyboardMove: keyboardMove && highlightedIndex === index,
                   isDisabled: item.disabled,
                   isSelected: item.selected,
                   icon: item.icon,
@@ -5542,7 +5567,12 @@ var Dropdown = (_a) => {
                   key: index,
                   index,
                   item,
-                  disabled: item.disabled
+                  disabled: item.disabled,
+                  onMouseMove: () => {
+                    if (keyboardMove) {
+                      setKeyboardMove(false);
+                    }
+                  }
                 })),
                 item.title
               );
@@ -5557,11 +5587,11 @@ var dropdown_default = Dropdown;
 
 // src/components/form-field/form-field.tsx
 import styled28 from "@emotion/styled";
-import React35, { isValidElement } from "react";
+import React36, { isValidElement } from "react";
 
 // src/components/radio/radio.tsx
 import styled26 from "@emotion/styled";
-import React33, { forwardRef as forwardRef4 } from "react";
+import React34, { forwardRef as forwardRef4 } from "react";
 var RadioLabel = styled26.label`
   display: block;
   position: relative;
@@ -5642,7 +5672,7 @@ var Radio = forwardRef4(
       "onChange",
       "onBlur"
     ]);
-    return /* @__PURE__ */ React33.createElement(RadioLabel, { htmlFor: props.id }, /* @__PURE__ */ React33.createElement(
+    return /* @__PURE__ */ React34.createElement(RadioLabel, { htmlFor: props.id }, /* @__PURE__ */ React34.createElement(
       RadioInput,
       __spreadValues({
         type: "radio",
@@ -5653,14 +5683,14 @@ var Radio = forwardRef4(
         onBlur,
         ref
       }, props)
-    ), /* @__PURE__ */ React33.createElement(RadioBox, { className: "RadioBox" }));
+    ), /* @__PURE__ */ React34.createElement(RadioBox, { className: "RadioBox" }));
   }
 );
 var radio_default = Radio;
 
 // src/components/switch/switch.tsx
 import styled27 from "@emotion/styled";
-import React34 from "react";
+import React35 from "react";
 var sizes2 = {
   medium: {
     switchHeight: 16,
@@ -5784,7 +5814,7 @@ var Switch = (_a) => {
       "ariaLabelledby and ariaLabel serve the same purpose and therefore cannot be used at the same time. Choose the one that best suites your needs."
     );
   }
-  return /* @__PURE__ */ React34.createElement(SwitchLabel, { htmlFor: props.id }, /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(SwitchLabel, { htmlFor: props.id }, /* @__PURE__ */ React35.createElement(
     SwitchInput,
     __spreadProps(__spreadValues({}, props), {
       checked: isActive,
@@ -5797,7 +5827,7 @@ var Switch = (_a) => {
       "aria-describedby": ariaDescribedby,
       "aria-checked": isActive
     })
-  ), /* @__PURE__ */ React34.createElement(
+  ), /* @__PURE__ */ React35.createElement(
     SwitchBox,
     {
       className: "SwitchBox",
@@ -5874,12 +5904,12 @@ var FormField = (_a) => {
     "labelFor",
     "direction"
   ]);
-  const isLabelClickable = React35.Children.toArray(children).some(
+  const isLabelClickable = React36.Children.toArray(children).some(
     (child) => isValidElement(child) && // The child might be a div, span, etc (type string) so we
     // have to typeguard before we check if our child is of interactive
     typeof child.type !== "string" && isInteractiveComponent(child.type)
   );
-  const labelElement = label && /* @__PURE__ */ React35.createElement(
+  const labelElement = label && /* @__PURE__ */ React36.createElement(
     Label,
     {
       direction,
@@ -5888,18 +5918,18 @@ var FormField = (_a) => {
     },
     label
   );
-  return /* @__PURE__ */ React35.createElement(FormFieldWrapper, __spreadValues({ direction }, props), direction === "row" && /* @__PURE__ */ React35.createElement(React35.Fragment, null, children, labelElement), direction === "column" && /* @__PURE__ */ React35.createElement(React35.Fragment, null, labelElement, children), direction === "row-reverse" && /* @__PURE__ */ React35.createElement(React35.Fragment, null, labelElement, children), errorMessage && /* @__PURE__ */ React35.createElement(ErrorMessage3, null, errorMessage));
+  return /* @__PURE__ */ React36.createElement(FormFieldWrapper, __spreadValues({ direction }, props), direction === "row" && /* @__PURE__ */ React36.createElement(React36.Fragment, null, children, labelElement), direction === "column" && /* @__PURE__ */ React36.createElement(React36.Fragment, null, labelElement, children), direction === "row-reverse" && /* @__PURE__ */ React36.createElement(React36.Fragment, null, labelElement, children), errorMessage && /* @__PURE__ */ React36.createElement(ErrorMessage3, null, errorMessage));
 };
 var form_field_default = FormField;
 
 // src/components/notification-bar/notification-bar.tsx
 import styled29 from "@emotion/styled";
-import React39, { useEffect as useEffect7 } from "react";
+import React40, { useEffect as useEffect7 } from "react";
 
-// src/hooks/use-on-click-outside.js
-import React36 from "react";
+// src/hooks/use-on-click-outside.ts
+import React37 from "react";
 function useOnClickOutside(ref, handler) {
-  React36.useEffect(() => {
+  React37.useEffect(() => {
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -5971,14 +6001,14 @@ var use_push_page_down_default = usePushPageDown;
 
 // src/components/icon/available-icons/info.tsx
 import InformationCircleIcon from "@atlaskit/icon/core/information-circle";
-import * as React37 from "react";
+import * as React38 from "react";
 function SvgInfo() {
-  return /* @__PURE__ */ React37.createElement(InformationCircleIcon, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React38.createElement(InformationCircleIcon, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/icon/available-icons/warning-alert.tsx
-import React38 from "react";
-var SvgWarningAlert = (props) => /* @__PURE__ */ React38.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ React38.createElement(
+import React39 from "react";
+var SvgWarningAlert = (props) => /* @__PURE__ */ React39.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ React39.createElement(
   "path",
   {
     fill: "currentColor",
@@ -5992,24 +6022,24 @@ var SvgWarningAlert = (props) => /* @__PURE__ */ React38.createElement("svg", __
 var severityStyles = {
   info: {
     bgColor: "var(--lns-color-blurple)",
-    icon: /* @__PURE__ */ React39.createElement(SvgInfo, null),
+    icon: /* @__PURE__ */ React40.createElement(SvgInfo, null),
     color: "var(--lns-color-white)",
     fontFamily: "inherit"
   },
   warning: {
     bgColor: "var(--lns-color-warning)",
-    icon: /* @__PURE__ */ React39.createElement(SvgWarningAlert, null),
+    icon: /* @__PURE__ */ React40.createElement(SvgWarningAlert, null),
     color: "var(--lns-color-grey8)",
     fontFamily: "inherit"
   },
   error: {
     bgColor: "var(--lns-color-danger)",
-    icon: /* @__PURE__ */ React39.createElement(SvgAlertTriangle, null),
+    icon: /* @__PURE__ */ React40.createElement(SvgAlertTriangle, null),
     color: "var(--lns-color-white)",
     fontFamily: "inherit"
   },
   internal: {
-    icon: /* @__PURE__ */ React39.createElement("span", { role: "img" }, "\u{1F514}"),
+    icon: /* @__PURE__ */ React40.createElement("span", { role: "img" }, "\u{1F514}"),
     color: "var(--lns-color-tealLight)",
     bgColor: "var(--lns-color-grey8)",
     fontFamily: "var(--lns-fontFamily-code)"
@@ -6069,7 +6099,7 @@ var NotificationBar = ({
   }, [isOpen, onCloseClick]);
   use_push_page_down_default(isOpen);
   const isInternalAlert = severity === "internal";
-  return isOpen ? /* @__PURE__ */ React39.createElement(NotificationBarWrapper, { isOpen, severity, id }, /* @__PURE__ */ React39.createElement(
+  return isOpen ? /* @__PURE__ */ React40.createElement(NotificationBarWrapper, { isOpen, severity, id }, /* @__PURE__ */ React40.createElement(
     arrange_default,
     {
       alignItems: { default: "start", small: "center" },
@@ -6077,21 +6107,21 @@ var NotificationBar = ({
       autoFlow: isInternalAlert ? "column" : void 0,
       columns: !isInternalAlert ? ["1fr auto"] : void 0
     },
-    /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React40.createElement(
       container_default,
       {
         paddingY: { default: "xsmall", xsmall: 0 },
         paddingLeft: !isInternalAlert ? { default: 0, medium: u(3.5) } : void 0,
         width: "100%"
       },
-      /* @__PURE__ */ React39.createElement(
+      /* @__PURE__ */ React40.createElement(
         arrange_default,
         {
           autoFlow: "column",
           gap: isInternalAlert ? "medium" : "small",
           justifyContent: "center"
         },
-        ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ React39.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ React39.createElement(
+        ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ React40.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ React40.createElement(
           icon_default,
           {
             icon: severityStyles[severity].icon,
@@ -6102,13 +6132,13 @@ var NotificationBar = ({
         children
       )
     )
-  ), onCloseClick && /* @__PURE__ */ React39.createElement(
+  ), onCloseClick && /* @__PURE__ */ React40.createElement(
     icon_button_default,
     {
       iconColor: (_c = severityStyles[severity].color) != null ? _c : "var(--lns-color-white)",
       tabIndex: 0,
       altText: "Close",
-      icon: /* @__PURE__ */ React39.createElement(SvgClose, null),
+      icon: /* @__PURE__ */ React40.createElement(SvgClose, null),
       onClick: onCloseClick
     }
   )) : null;
@@ -6118,7 +6148,7 @@ var notification_bar_default = NotificationBar;
 // src/components/toast/toast.tsx
 import { keyframes as keyframes2 } from "@emotion/react";
 import styled30 from "@emotion/styled";
-import React40, { useEffect as useEffect8 } from "react";
+import React41, { useEffect as useEffect8 } from "react";
 var WEBAPP = "web-app";
 var CHROME_EXTENSION = "chrome-extension";
 var toastDurations = { short: 3e3, long: 8e3 };
@@ -6202,7 +6232,7 @@ var Toast = ({
     }, toastDuration);
     return () => clearTimeout(timer);
   }, [isOpen]);
-  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, isOpen && /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(React41.Fragment, null, isOpen && /* @__PURE__ */ React41.createElement(
     ToastWrapper,
     {
       role: "presentation",
@@ -6212,12 +6242,12 @@ var Toast = ({
       toastDuration,
       platform
     },
-    /* @__PURE__ */ React40.createElement(ChildrenSection3, { "aria-live": "polite" }, children),
-    onCloseClick && /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React41.createElement(ChildrenSection3, { "aria-live": "polite" }, children),
+    onCloseClick && /* @__PURE__ */ React41.createElement(
       icon_button_default,
       {
         altText: "Close",
-        icon: /* @__PURE__ */ React40.createElement(SvgClose, null),
+        icon: /* @__PURE__ */ React41.createElement(SvgClose, null),
         onClick: onCloseClick,
         iconColor: "bodyInverse"
       }
@@ -6228,7 +6258,7 @@ var toast_default = Toast;
 
 // src/components/tooltip/tooltip.tsx
 import styled31 from "@emotion/styled";
-import React41, { useState as useState5, useRef as useRef3, useEffect as useEffect9 } from "react";
+import React42, { useState as useState5, useRef as useRef3, useEffect as useEffect9 } from "react";
 import { useHover, useLayer as useLayer4, mergeRefs } from "react-laag";
 import ResizeObserver4 from "resize-observer-polyfill";
 var placements = {
@@ -6271,7 +6301,7 @@ var ShortcutWrapper = styled31.div`
 `;
 var ShortcutBox = ({
   children
-}) => /* @__PURE__ */ React41.createElement(ShortcutWrapper, null, children);
+}) => /* @__PURE__ */ React42.createElement(ShortcutWrapper, null, children);
 var TooltipBox = (_a) => {
   var _b = _a, {
     children,
@@ -6291,7 +6321,7 @@ var TooltipBox = (_a) => {
   return (
     // These are being added to hide the tooltip when users hover over
     /* eslint-disable-next-line styled-components-a11y/no-static-element-interactions */
-    /* @__PURE__ */ React41.createElement(
+    /* @__PURE__ */ React42.createElement(
       TooltipBoxWrapper,
       __spreadValues(__spreadValues({
         maxWidth,
@@ -6423,7 +6453,7 @@ var Tooltip = (_a) => {
     container,
     auto: true
   });
-  return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(
     TooltipChildren,
     __spreadProps(__spreadValues(__spreadValues({}, triggerProps), hoverProps), {
       onClick: (e) => {
@@ -6439,8 +6469,8 @@ var Tooltip = (_a) => {
       ref: mergeRefs(triggerProps.ref, focusRef)
     }),
     children
-  ), ariaLive && /* @__PURE__ */ React41.createElement("span", { className: "srOnly", "aria-live": "polite" }, isOpen && content), isOpen && renderLayer(
-    /* @__PURE__ */ React41.createElement("div", __spreadProps(__spreadValues({}, layerProps), { style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex }) }), /* @__PURE__ */ React41.createElement(
+  ), ariaLive && /* @__PURE__ */ React42.createElement("span", { className: "srOnly", "aria-live": "polite" }, isOpen && content), isOpen && renderLayer(
+    /* @__PURE__ */ React42.createElement("div", __spreadProps(__spreadValues({}, layerProps), { style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex }) }), /* @__PURE__ */ React42.createElement(
       TooltipBox,
       __spreadValues({
         maxWidth,
@@ -6449,7 +6479,7 @@ var Tooltip = (_a) => {
         role: "tooltip",
         id: tooltipId
       }, rest),
-      /* @__PURE__ */ React41.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ React41.createElement(text_default, { size: "small", fontWeight: "bold" }, content), shortcut && /* @__PURE__ */ React41.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ React41.createElement(ShortcutBox, { key: index }, char))))
+      /* @__PURE__ */ React42.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ React42.createElement(text_default, { size: "small", fontWeight: "bold" }, content), shortcut && /* @__PURE__ */ React42.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ React42.createElement(ShortcutBox, { key: index }, char))))
     ))
   ));
 };
@@ -6459,7 +6489,7 @@ var tooltip_default = Tooltip;
 // src/components/skeleton/skeleton.tsx
 import { css as css4 } from "@emotion/react";
 import styled32 from "@emotion/styled";
-import React42 from "react";
+import React43 from "react";
 var SkeletonAnimation = css4`
   @media (prefers-reduced-motion: no-preference) {
     animation: shimmer 2s infinite linear;
@@ -6518,7 +6548,7 @@ var SkeletonText = ({
   lines = 1,
   animated = false
 }) => {
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, [...Array(lines)].map((_, i) => /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(React43.Fragment, null, [...Array(lines)].map((_, i) => /* @__PURE__ */ React43.createElement(
     SkeletonTextWrapper,
     {
       key: i,
@@ -6535,7 +6565,7 @@ var SkeletonContainer = ({
   radius = "full",
   width = "40px"
 }) => {
-  return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(React43.Fragment, null, /* @__PURE__ */ React43.createElement(
     SkeletonContainerWrapper,
     {
       animated,
@@ -6548,9 +6578,9 @@ var SkeletonContainer = ({
 
 // src/components/logo/logo.tsx
 import styled33 from "@emotion/styled";
-import React43 from "react";
+import React44 from "react";
 var LoomAiGradientDef = (customId) => {
-  return /* @__PURE__ */ React43.createElement("defs", null, /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement("defs", null, /* @__PURE__ */ React44.createElement(
     "radialGradient",
     {
       id: `ai-logo-${customId}-gradient-1`,
@@ -6560,12 +6590,12 @@ var LoomAiGradientDef = (customId) => {
       fx: "0%",
       fy: "0%"
     },
-    /* @__PURE__ */ React43.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
-    /* @__PURE__ */ React43.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
-    /* @__PURE__ */ React43.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
-    /* @__PURE__ */ React43.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
-    /* @__PURE__ */ React43.createElement("stop", { offset: "72%", stopColor: "#6663F6" })
-  ), /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
+    /* @__PURE__ */ React44.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
+    /* @__PURE__ */ React44.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
+    /* @__PURE__ */ React44.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
+    /* @__PURE__ */ React44.createElement("stop", { offset: "72%", stopColor: "#6663F6" })
+  ), /* @__PURE__ */ React44.createElement(
     "radialGradient",
     {
       id: `ai-logo-${customId}-gradient-2`,
@@ -6573,10 +6603,10 @@ var LoomAiGradientDef = (customId) => {
       fx: "40%",
       fy: "72%"
     },
-    /* @__PURE__ */ React43.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
-    /* @__PURE__ */ React43.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
-    /* @__PURE__ */ React43.createElement("stop", { offset: "48%", stopColor: "#6663F6" })
-  ), /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
+    /* @__PURE__ */ React44.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
+    /* @__PURE__ */ React44.createElement("stop", { offset: "48%", stopColor: "#6663F6" })
+  ), /* @__PURE__ */ React44.createElement(
     "radialGradient",
     {
       id: `ai-logo-${customId}-gradient-3`,
@@ -6584,9 +6614,9 @@ var LoomAiGradientDef = (customId) => {
       fx: "0%",
       fy: "100%"
     },
-    /* @__PURE__ */ React43.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
-    /* @__PURE__ */ React43.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
-    /* @__PURE__ */ React43.createElement("stop", { offset: "45%", stopColor: "#6E68F400" })
+    /* @__PURE__ */ React44.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
+    /* @__PURE__ */ React44.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
+    /* @__PURE__ */ React44.createElement("stop", { offset: "45%", stopColor: "#6E68F400" })
   ));
 };
 var symbolLogoPath = "M30 15.4433C30 16.6091 29.0933 16.8581 27.9562 16.9301C22.5158 17.2323 16.7962 22.686 16.4795 28.112C16.422 29.2634 16.173 30.1702 15.0072 30.1702C13.8414 30.1702 13.578 29.2634 13.5205 28.0976C13.2038 22.686 7.48416 17.2323 2.05814 16.9301C0.906735 16.8581 0 16.6091 0 15.4433C0 14.2775 0.906735 14.043 2.05814 13.971C7.48416 13.6687 13.2038 7.65433 13.5205 2.22831C13.578 1.0769 13.827 0.170166 15.0072 0.170166C16.1874 0.170166 16.422 1.0769 16.4795 2.22831C16.7962 7.65433 22.5158 13.6687 27.9419 13.971C29.0933 14.043 30 14.2919 30 15.4433Z";
@@ -6594,22 +6624,22 @@ var SymbolLogoSvg = (_a) => {
   var _b = _a, { brand, symbolColor, customId } = _b, props = __objRest(_b, ["brand", "symbolColor", "customId"]);
   switch (brand) {
     case "ai":
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom AI", viewBox: "0 0 30 31", fill: "none" }, props), /* @__PURE__ */ React43.createElement("title", null, "Loom AI"), !symbolColor ? /* @__PURE__ */ React43.createElement(React43.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom AI", viewBox: "0 0 30 31", fill: "none" }, props), /* @__PURE__ */ React44.createElement("title", null, "Loom AI"), !symbolColor ? /* @__PURE__ */ React44.createElement(React44.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ React44.createElement(
         "path",
         {
           key: i,
           d: symbolLogoPath,
           fill: `url(#ai-logo-${customId}-gradient-${i + 1}`
         }
-      ))) : /* @__PURE__ */ React43.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }));
+      ))) : /* @__PURE__ */ React44.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }));
     case "apptile":
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 40 40", fill: "none" }, props), /* @__PURE__ */ React43.createElement("title", null, "Loom"), /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 40 40", fill: "none" }, props), /* @__PURE__ */ React44.createElement("title", null, "Loom"), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("blurple")
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M32.3962 18.6213H25.1467L31.4251 14.9965L30.0463 12.6077L23.768 16.2325L27.392 9.95464L25.0032 8.57506L21.3792 14.8529V7.604H18.6215V14.8536L14.9961 8.57506L12.6081 9.95395L16.2327 16.2318L9.95437 12.6077L8.57552 14.9958L14.8539 18.6206H7.60449V21.3784H14.8532L8.57552 25.0032L9.95437 27.392L16.2321 23.7679L12.6074 30.0457L14.9961 31.4246L18.6208 25.1461V32.3957H21.3785V25.1468L25.0025 31.4246L27.3912 30.0457L23.7665 23.7672L30.0449 27.392L31.4238 25.0032L25.1461 21.3791H32.3947V18.6213H32.3962ZM20.0003 23.7505C17.921 23.7505 16.2355 22.0651 16.2355 19.9856C16.2355 17.9062 17.921 16.2207 20.0003 16.2207C22.0797 16.2207 23.7651 17.9062 23.7651 19.9856C23.7651 22.0651 22.0797 23.7505 20.0003 23.7505Z",
@@ -6617,13 +6647,13 @@ var SymbolLogoSvg = (_a) => {
         }
       ));
     case "product":
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 40 40", fill: "none" }, props), /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 40 40", fill: "none" }, props), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M0 9.25C0 4.14137 4.14137 0 9.25 0H30.75C35.8586 0 40 4.14137 40 9.25V30.75C40 35.8586 35.8586 40 30.75 40H9.25C4.14137 40 0 35.8586 0 30.75V9.25Z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("primary")
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M32.3962 18.6756H25.1467L31.4251 15.0508L30.0463 12.662L23.768 16.2868L27.392 10.009L25.0032 8.62938L21.3792 14.9072V7.65833H18.6215V14.9079L14.9961 8.62938L12.6081 10.0083L16.2327 16.2861L9.95437 12.662L8.57552 15.0501L14.8539 18.6749H7.60449V21.4327H14.8532L8.57552 25.0575L9.95437 27.4463L16.2321 23.8222L12.6074 30.1L14.9961 31.4789L18.6208 25.2004V32.45H21.3785V25.2011L25.0025 31.4789L27.3912 30.1L23.7665 23.8215L30.0449 27.4463L31.4238 25.0575L25.1461 21.4334H32.3947V18.6756H32.3962ZM20.0003 23.8048C17.921 23.8048 16.2355 22.1194 16.2355 20.0399C16.2355 17.9605 17.921 16.275 20.0003 16.275C22.0797 16.275 23.7651 17.9605 23.7651 20.0399C23.7651 22.1194 22.0797 23.8048 20.0003 23.8048Z",
@@ -6631,7 +6661,7 @@ var SymbolLogoSvg = (_a) => {
         }
       ));
     default:
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 31 30", fill: "none" }, props), /* @__PURE__ */ React43.createElement("title", null, "Loom"), /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 31 30", fill: "none" }, props), /* @__PURE__ */ React44.createElement("title", null, "Loom"), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M30.01 13.43h-9.142l7.917-4.57-1.57-2.72-7.918 4.57 4.57-7.915-2.72-1.57-4.571 7.913V0h-3.142v9.139L8.863 1.225l-2.721 1.57 4.57 7.913L2.796 6.14 1.225 8.86l7.917 4.57H0v3.141h9.141l-7.916 4.57 1.57 2.72 7.918-4.57-4.571 7.915 2.72 1.57 4.572-7.914V30h3.142v-9.334l4.655 8.06 2.551-1.472-4.656-8.062 8.087 4.668 1.571-2.72-7.916-4.57h9.141v-3.14h.001zm-15.005 5.84a4.271 4.271 0 11-.001-8.542 4.271 4.271 0 01.001 8.542z",
@@ -6644,23 +6674,23 @@ var WordmarkLogoSvg = (_a) => {
   var _b = _a, { brand, wordmarkColor } = _b, props = __objRest(_b, ["brand", "wordmarkColor"]);
   switch (brand) {
     case "ai":
-      return /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement(
         "svg",
         __spreadValues({
           "aria-label": "Loom AI",
           viewBox: "0 0 94 23",
           fill: wordmarkColor
         }, props),
-        /* @__PURE__ */ React43.createElement("title", null, "Loom AI"),
-        /* @__PURE__ */ React43.createElement("path", { d: "M4.12637 22.4624H0V0H4.12637V22.4624Z" }),
-        /* @__PURE__ */ React43.createElement("path", { d: "M13.3999 19.1737C15.4166 19.1737 17.2781 17.7155 17.2781 14.8301C17.2781 11.9448 15.4166 10.4866 13.3999 10.4866C11.3833 10.4866 9.52175 11.9448 9.52175 14.8301C9.52175 17.6845 11.3833 19.1737 13.3999 19.1737ZM13.3999 6.7325C17.9606 6.7325 21.4045 10.1143 21.4045 14.8301C21.4045 19.515 17.9606 22.9277 13.3999 22.9277C8.83919 22.9277 5.39538 19.515 5.39538 14.8301C5.39538 10.1143 8.83919 6.7325 13.3999 6.7325Z" }),
-        /* @__PURE__ */ React43.createElement("path", { d: "M29.7548 19.1737C31.7714 19.1737 33.6329 17.7155 33.6329 14.8301C33.6329 11.9448 31.7714 10.4866 29.7548 10.4866C27.7381 10.4866 25.8766 11.9448 25.8766 14.8301C25.8766 17.6845 27.7381 19.1737 29.7548 19.1737ZM29.7548 6.7325C34.3155 6.7325 37.7593 10.1143 37.7593 14.8301C37.7593 19.515 34.3155 22.9277 29.7548 22.9277C25.194 22.9277 21.7502 19.515 21.7502 14.8301C21.7502 10.1143 25.194 6.7325 29.7548 6.7325Z" }),
-        /* @__PURE__ */ React43.createElement("path", { d: "M43.1622 22.4624H39.0358V7.19788H42.976V9.05941C43.8137 7.57019 45.7683 6.76353 47.4437 6.76353C49.5224 6.76353 51.1978 7.66326 51.9734 9.30761C53.1834 7.44609 54.7967 6.76353 56.8134 6.76353C59.6367 6.76353 62.3359 8.46992 62.3359 12.5653V22.4624H58.3336V13.403C58.3336 11.7586 57.5269 10.5176 55.6344 10.5176C53.8659 10.5176 52.8111 11.8827 52.8111 13.5271V22.4624H48.7157V13.403C48.7157 11.7586 47.878 10.5176 46.0165 10.5176C44.2171 10.5176 43.1622 11.8517 43.1622 13.5271V22.4624Z" }),
-        /* @__PURE__ */ React43.createElement("path", { d: "M84.1324 22.4624L82.3019 17.4363H73.3666L71.5361 22.4624H67.0064L75.4453 0.46538H80.4093L88.7862 22.4624H84.1324ZM77.8342 5.21226L74.7937 13.5271H80.8747L77.8342 5.21226Z" }),
-        /* @__PURE__ */ React43.createElement("path", { d: "M94 22.4624H89.6565V0.46538H94V22.4624Z" })
+        /* @__PURE__ */ React44.createElement("title", null, "Loom AI"),
+        /* @__PURE__ */ React44.createElement("path", { d: "M4.12637 22.4624H0V0H4.12637V22.4624Z" }),
+        /* @__PURE__ */ React44.createElement("path", { d: "M13.3999 19.1737C15.4166 19.1737 17.2781 17.7155 17.2781 14.8301C17.2781 11.9448 15.4166 10.4866 13.3999 10.4866C11.3833 10.4866 9.52175 11.9448 9.52175 14.8301C9.52175 17.6845 11.3833 19.1737 13.3999 19.1737ZM13.3999 6.7325C17.9606 6.7325 21.4045 10.1143 21.4045 14.8301C21.4045 19.515 17.9606 22.9277 13.3999 22.9277C8.83919 22.9277 5.39538 19.515 5.39538 14.8301C5.39538 10.1143 8.83919 6.7325 13.3999 6.7325Z" }),
+        /* @__PURE__ */ React44.createElement("path", { d: "M29.7548 19.1737C31.7714 19.1737 33.6329 17.7155 33.6329 14.8301C33.6329 11.9448 31.7714 10.4866 29.7548 10.4866C27.7381 10.4866 25.8766 11.9448 25.8766 14.8301C25.8766 17.6845 27.7381 19.1737 29.7548 19.1737ZM29.7548 6.7325C34.3155 6.7325 37.7593 10.1143 37.7593 14.8301C37.7593 19.515 34.3155 22.9277 29.7548 22.9277C25.194 22.9277 21.7502 19.515 21.7502 14.8301C21.7502 10.1143 25.194 6.7325 29.7548 6.7325Z" }),
+        /* @__PURE__ */ React44.createElement("path", { d: "M43.1622 22.4624H39.0358V7.19788H42.976V9.05941C43.8137 7.57019 45.7683 6.76353 47.4437 6.76353C49.5224 6.76353 51.1978 7.66326 51.9734 9.30761C53.1834 7.44609 54.7967 6.76353 56.8134 6.76353C59.6367 6.76353 62.3359 8.46992 62.3359 12.5653V22.4624H58.3336V13.403C58.3336 11.7586 57.5269 10.5176 55.6344 10.5176C53.8659 10.5176 52.8111 11.8827 52.8111 13.5271V22.4624H48.7157V13.403C48.7157 11.7586 47.878 10.5176 46.0165 10.5176C44.2171 10.5176 43.1622 11.8517 43.1622 13.5271V22.4624Z" }),
+        /* @__PURE__ */ React44.createElement("path", { d: "M84.1324 22.4624L82.3019 17.4363H73.3666L71.5361 22.4624H67.0064L75.4453 0.46538H80.4093L88.7862 22.4624H84.1324ZM77.8342 5.21226L74.7937 13.5271H80.8747L77.8342 5.21226Z" }),
+        /* @__PURE__ */ React44.createElement("path", { d: "M94 22.4624H89.6565V0.46538H94V22.4624Z" })
       );
     case "product":
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 104 30", fill: "none" }, props), /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 104 30", fill: "none" }, props), /* @__PURE__ */ React44.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -6668,7 +6698,7 @@ var WordmarkLogoSvg = (_a) => {
           d: "M32.4383 7.29662C34.6059 7.29671 36.4904 7.77257 38.0897 8.72422C39.6888 9.67592 40.9247 11.0053 41.797 12.7102C42.6692 14.402 43.1045 16.3852 43.1045 18.6585C43.1044 20.9186 42.6693 22.9018 41.797 24.6068C40.9247 26.2985 39.6888 27.6207 38.0897 28.5724C36.4904 29.524 34.6059 29.9999 32.4383 30C30.2704 30 28.379 29.5241 26.7664 28.5724C25.1672 27.6208 23.9315 26.2985 23.0591 24.6068C22.1868 22.9018 21.7517 20.9186 21.7516 18.6585C21.7516 16.3851 22.1869 14.402 23.0591 12.7102C23.9315 11.0051 25.1671 9.67594 26.7664 8.72422C28.379 7.77249 30.2704 7.29662 32.4383 7.29662ZM32.4383 11.7584C31.3279 11.7584 30.3954 12.0564 29.642 12.6513C28.902 13.2461 28.3393 14.0587 27.956 15.0895C27.5861 16.1204 27.4009 17.3105 27.4009 18.6585C27.4009 19.9801 27.586 21.163 27.956 22.2071C28.3393 23.238 28.9019 24.0506 29.642 24.6454C30.3954 25.2402 31.3279 25.5382 32.4383 25.5382C33.5351 25.5381 34.4608 25.2401 35.2141 24.6454C35.9673 24.0506 36.53 23.2307 36.9001 22.1867C37.2831 21.1428 37.4733 19.9666 37.4734 18.6585C37.4734 17.324 37.2831 16.1406 36.9001 15.1099C36.5301 14.0661 35.9671 13.246 35.2141 12.6513C34.4608 12.0565 33.5351 11.7585 32.4383 11.7584Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -6676,13 +6706,13 @@ var WordmarkLogoSvg = (_a) => {
           d: "M56.9839 7.29662C59.1517 7.29662 61.036 7.77249 62.6354 8.72422C64.2348 9.67596 65.4702 11.005 66.3426 12.7102C67.215 14.4021 67.6524 16.385 67.6524 18.6585C67.6523 20.9186 67.215 22.9018 66.3426 24.6068C65.4702 26.2985 64.2346 27.6208 62.6354 28.5724C61.036 29.524 59.1516 30 56.9839 30C54.8166 29.9999 52.9267 29.5238 51.3143 28.5724C49.7151 27.6208 48.4795 26.2984 47.6071 24.6068C46.7347 22.9018 46.2974 20.9186 46.2973 18.6585C46.2973 16.3849 46.7346 14.4021 47.6071 12.7102C48.4795 11.005 49.7149 9.67596 51.3143 8.72422C52.9267 7.77274 54.8165 7.29671 56.9839 7.29662ZM56.9839 11.7584C55.8739 11.7585 54.9432 12.0566 54.1899 12.6513C53.4497 13.2461 52.8873 14.0585 52.504 15.0895C52.1339 16.1205 51.9488 17.3104 51.9488 18.6585C51.9488 19.9801 52.1339 21.163 52.504 22.2071C52.8873 23.2381 53.4497 24.0506 54.1899 24.6454C54.9431 25.2399 55.874 25.5381 56.9839 25.5382C58.081 25.5382 59.0064 25.2402 59.7598 24.6454C60.5133 24.0505 61.0756 23.231 61.4457 22.1867C61.8289 21.1427 62.0212 19.9667 62.0213 18.6585C62.0213 17.3239 61.8288 16.1407 61.4457 15.1099C61.0756 14.0657 60.5132 13.2461 59.7598 12.6513C59.0063 12.0564 58.081 11.7584 56.9839 11.7584Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M5.69001 24.7655H18.7174V29.5445H0V0H5.69001V24.7655Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M96.2633 7.2581C97.5984 7.2581 98.7952 7.54891 99.8527 8.13052C100.923 8.71205 101.762 9.56357 102.37 10.6866C102.991 11.8101 103.302 13.1852 103.302 14.8108V29.5445H97.7498V15.7625C97.7497 14.4545 97.3936 13.49 96.6803 12.8688C95.9667 12.2345 95.1007 11.9173 94.0834 11.9171C93.2908 11.9171 92.6027 12.0882 92.0213 12.4315C91.453 12.7751 91.0084 13.2511 90.6911 13.8591C90.3871 14.4671 90.2357 15.176 90.2357 15.9823V29.5445H84.8629V15.5654C84.8629 14.4552 84.5262 13.5682 83.8523 12.9073C83.1781 12.2464 82.3106 11.9171 81.2531 11.9171C80.5396 11.9172 79.8853 12.088 79.2907 12.4315C78.6959 12.7619 78.22 13.2521 77.8631 13.8998C77.5196 14.5343 77.3487 15.3205 77.3487 16.2588V29.5445H71.797V7.61387H77.0111L77.1652 11.7584C77.4644 10.9601 77.8429 10.2729 78.3005 9.69635C78.9746 8.86369 79.7606 8.24832 80.6594 7.8518C81.558 7.45546 82.496 7.25818 83.4738 7.2581C85.0733 7.2581 86.383 7.75323 87.4009 8.74462C88.2044 9.52754 88.8088 10.6088 89.225 11.985C89.5312 11.1783 89.9349 10.4756 90.4351 9.87537C91.1621 9.00295 92.0273 8.34693 93.032 7.91072C94.0364 7.47471 95.1136 7.2581 96.2633 7.2581Z",
@@ -6690,15 +6720,15 @@ var WordmarkLogoSvg = (_a) => {
         }
       ));
     default:
-      return /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement(
         "svg",
         __spreadValues({
           "aria-label": "Loom",
           viewBox: "0 0 62 23",
           fill: wordmarkColor
         }, props),
-        /* @__PURE__ */ React43.createElement("title", null, "Loom"),
-        /* @__PURE__ */ React43.createElement("path", { d: "M.109 21.973V.027h4.028v21.946H.109zM38.742 7.059h3.846v1.82c.818-1.456 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.997v-8.852c0-1.607-.817-2.82-2.635-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V7.059zM13.24 22.405c-4.537 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM29.667 22.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z" })
+        /* @__PURE__ */ React44.createElement("title", null, "Loom"),
+        /* @__PURE__ */ React44.createElement("path", { d: "M.109 21.973V.027h4.028v21.946H.109zM38.742 7.059h3.846v1.82c.818-1.456 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.997v-8.852c0-1.607-.817-2.82-2.635-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V7.059zM13.24 22.405c-4.537 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM29.667 22.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z" })
       );
   }
 };
@@ -6717,42 +6747,42 @@ var CombinedLogoSvg = (_a) => {
   ]);
   switch (brand) {
     case "ai":
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom AI", viewBox: "0 0 100 30", fill: "none" }, props), /* @__PURE__ */ React43.createElement("title", null, "Loom AI"), !symbolColor ? /* @__PURE__ */ React43.createElement(React43.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom AI", viewBox: "0 0 100 30", fill: "none" }, props), /* @__PURE__ */ React44.createElement("title", null, "Loom AI"), !symbolColor ? /* @__PURE__ */ React44.createElement(React44.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ React44.createElement(
         "path",
         {
           key: i,
           d: combinedLogoPath,
           fill: `url(#ai-logo-${customId}-gradient-${i + 1}`
         }
-      ))) : /* @__PURE__ */ React43.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) }), /* @__PURE__ */ React43.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ React43.createElement("path", { d: "M4.1997 29.5909H0.570312V9.83386H4.1997V29.5909Z" }), /* @__PURE__ */ React43.createElement("path", { d: "M12.3563 26.6983C14.1301 26.6983 15.7674 25.4157 15.7674 22.8778C15.7674 20.34 14.1301 19.0574 12.3563 19.0574C10.5826 19.0574 8.94526 20.34 8.94526 22.8778C8.94526 25.3884 10.5826 26.6983 12.3563 26.6983ZM12.3563 15.7555C16.3678 15.7555 19.3968 18.73 19.3968 22.8778C19.3968 26.9984 16.3678 30.0002 12.3563 30.0002C8.34491 30.0002 5.31587 26.9984 5.31587 22.8778C5.31587 18.73 8.34491 15.7555 12.3563 15.7555Z" }), /* @__PURE__ */ React43.createElement("path", { d: "M26.7414 26.6983C28.5152 26.6983 30.1525 25.4157 30.1525 22.8778C30.1525 20.34 28.5152 19.0574 26.7414 19.0574C24.9676 19.0574 23.3303 20.34 23.3303 22.8778C23.3303 25.3884 24.9676 26.6983 26.7414 26.6983ZM26.7414 15.7555C30.7528 15.7555 33.7819 18.73 33.7819 22.8778C33.7819 26.9984 30.7528 30.0002 26.7414 30.0002C22.73 30.0002 19.7009 26.9984 19.7009 22.8778C19.7009 18.73 22.73 15.7555 26.7414 15.7555Z" }), /* @__PURE__ */ React43.createElement("path", { d: "M38.534 29.5909H34.9047V16.1648H38.3703V17.8022C39.1071 16.4923 40.8263 15.7828 42.2999 15.7828C44.1282 15.7828 45.6018 16.5742 46.284 18.0205C47.3483 16.3831 48.7673 15.7828 50.5411 15.7828C53.0243 15.7828 55.3984 17.2837 55.3984 20.8858V29.5909H51.8782V21.6226C51.8782 20.1763 51.1687 19.0847 49.5041 19.0847C47.9486 19.0847 47.0208 20.2854 47.0208 21.7317V29.5909H43.4187V21.6226C43.4187 20.1763 42.6819 19.0847 41.0446 19.0847C39.4619 19.0847 38.534 20.2581 38.534 21.7317V29.5909Z" }), /* @__PURE__ */ React43.createElement("path", { d: "M74.5698 29.5909L72.9598 25.1701H65.1006L63.4906 29.5909H59.5064L66.929 10.2432H71.2951L78.6631 29.5909H74.5698ZM69.0302 14.4184L66.3559 21.7317H71.7045L69.0302 14.4184Z" }), /* @__PURE__ */ React43.createElement("path", { d: "M83.249 29.5909H79.4285V10.2432H83.249V29.5909Z" })));
+      ))) : /* @__PURE__ */ React44.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) }), /* @__PURE__ */ React44.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ React44.createElement("path", { d: "M4.1997 29.5909H0.570312V9.83386H4.1997V29.5909Z" }), /* @__PURE__ */ React44.createElement("path", { d: "M12.3563 26.6983C14.1301 26.6983 15.7674 25.4157 15.7674 22.8778C15.7674 20.34 14.1301 19.0574 12.3563 19.0574C10.5826 19.0574 8.94526 20.34 8.94526 22.8778C8.94526 25.3884 10.5826 26.6983 12.3563 26.6983ZM12.3563 15.7555C16.3678 15.7555 19.3968 18.73 19.3968 22.8778C19.3968 26.9984 16.3678 30.0002 12.3563 30.0002C8.34491 30.0002 5.31587 26.9984 5.31587 22.8778C5.31587 18.73 8.34491 15.7555 12.3563 15.7555Z" }), /* @__PURE__ */ React44.createElement("path", { d: "M26.7414 26.6983C28.5152 26.6983 30.1525 25.4157 30.1525 22.8778C30.1525 20.34 28.5152 19.0574 26.7414 19.0574C24.9676 19.0574 23.3303 20.34 23.3303 22.8778C23.3303 25.3884 24.9676 26.6983 26.7414 26.6983ZM26.7414 15.7555C30.7528 15.7555 33.7819 18.73 33.7819 22.8778C33.7819 26.9984 30.7528 30.0002 26.7414 30.0002C22.73 30.0002 19.7009 26.9984 19.7009 22.8778C19.7009 18.73 22.73 15.7555 26.7414 15.7555Z" }), /* @__PURE__ */ React44.createElement("path", { d: "M38.534 29.5909H34.9047V16.1648H38.3703V17.8022C39.1071 16.4923 40.8263 15.7828 42.2999 15.7828C44.1282 15.7828 45.6018 16.5742 46.284 18.0205C47.3483 16.3831 48.7673 15.7828 50.5411 15.7828C53.0243 15.7828 55.3984 17.2837 55.3984 20.8858V29.5909H51.8782V21.6226C51.8782 20.1763 51.1687 19.0847 49.5041 19.0847C47.9486 19.0847 47.0208 20.2854 47.0208 21.7317V29.5909H43.4187V21.6226C43.4187 20.1763 42.6819 19.0847 41.0446 19.0847C39.4619 19.0847 38.534 20.2581 38.534 21.7317V29.5909Z" }), /* @__PURE__ */ React44.createElement("path", { d: "M74.5698 29.5909L72.9598 25.1701H65.1006L63.4906 29.5909H59.5064L66.929 10.2432H71.2951L78.6631 29.5909H74.5698ZM69.0302 14.4184L66.3559 21.7317H71.7045L69.0302 14.4184Z" }), /* @__PURE__ */ React44.createElement("path", { d: "M83.249 29.5909H79.4285V10.2432H83.249V29.5909Z" })));
     case "apptile":
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 103 40", fill: "none" }, props), /* @__PURE__ */ React43.createElement("title", null, "Loom"), /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 103 40", fill: "none" }, props), /* @__PURE__ */ React44.createElement("title", null, "Loom"), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("blurple")
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M32.3962 18.6213H25.1467L31.4251 14.9965L30.0463 12.6077L23.768 16.2325L27.392 9.95464L25.0032 8.57506L21.3792 14.8529V7.604H18.6215V14.8536L14.9961 8.57506L12.6081 9.95395L16.2327 16.2318L9.95437 12.6077L8.57552 14.9958L14.8539 18.6206H7.60449V21.3784H14.8532L8.57552 25.0032L9.95437 27.392L16.2321 23.7679L12.6074 30.0457L14.9961 31.4246L18.6208 25.1461V32.3957H21.3785V25.1468L25.0025 31.4246L27.3912 30.0457L23.7665 23.7672L30.0449 27.392L31.4238 25.0032L25.1461 21.3791H32.3947V18.6213H32.3962ZM20.0003 23.7505C17.921 23.7505 16.2355 22.0651 16.2355 19.9856C16.2355 17.9062 17.921 16.2207 20.0003 16.2207C22.0797 16.2207 23.7651 17.9062 23.7651 19.9856C23.7651 22.0651 22.0797 23.7505 20.0003 23.7505Z",
           fill: "white"
         }
-      ), /* @__PURE__ */ React43.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ React43.createElement("path", { d: "M47.6001 29.5076V10H51.1816V29.5076H47.6001Z" }), /* @__PURE__ */ React43.createElement("path", { d: "M81.9516 16.2509H85.3718V17.8682C86.0987 16.575 87.7961 15.8739 89.2499 15.8739C91.0549 15.8739 92.5086 16.6556 93.1818 18.0832C94.2314 16.4659 95.633 15.8739 97.3834 15.8739C99.8338 15.8739 102.177 17.356 102.177 20.9122V29.5076H98.7027V21.6402C98.7027 20.2119 98.0019 19.1345 96.3591 19.1345C94.8238 19.1345 93.9079 20.3202 93.9079 21.7485V29.5084H90.3541V21.6402C90.3541 20.2119 89.6272 19.1345 88.0104 19.1345C86.4483 19.1345 85.5323 20.2933 85.5323 21.7485V29.5084H81.9516V16.2509Z" }), /* @__PURE__ */ React43.createElement("path", { d: "M59.2755 29.8916C55.2407 29.8916 52.3189 26.899 52.3189 22.8795C52.3189 18.9241 55.2312 15.8603 59.2755 15.8603C63.3394 15.8603 66.232 18.9526 66.232 22.8795C66.232 26.8697 63.3086 29.8916 59.2755 29.8916ZM59.2755 19.1051C57.1944 19.1051 55.5018 20.7983 55.5018 22.8803C55.5018 24.9624 57.1944 26.6555 59.2755 26.6555C61.3565 26.6555 63.0484 24.9624 63.0484 22.8803C63.0484 20.7983 61.3565 19.1051 59.2755 19.1051Z" }), /* @__PURE__ */ React43.createElement("path", { d: "M73.8823 29.8916C69.8476 29.8916 66.9258 26.899 66.9258 22.8795C66.9258 18.9241 69.8381 15.8603 73.8823 15.8603C77.9463 15.8603 80.8389 18.9526 80.8389 22.8795C80.8389 26.8697 77.9139 29.8916 73.8823 29.8916ZM73.8823 19.0601C71.7776 19.0601 70.0652 20.7738 70.0652 22.8788C70.0652 24.9837 71.7776 26.6974 73.8823 26.6974C75.9871 26.6974 77.6995 24.9837 77.6995 22.8788C77.6988 20.7738 75.9863 19.0601 73.8823 19.0601Z" })));
+      ), /* @__PURE__ */ React44.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ React44.createElement("path", { d: "M47.6001 29.5076V10H51.1816V29.5076H47.6001Z" }), /* @__PURE__ */ React44.createElement("path", { d: "M81.9516 16.2509H85.3718V17.8682C86.0987 16.575 87.7961 15.8739 89.2499 15.8739C91.0549 15.8739 92.5086 16.6556 93.1818 18.0832C94.2314 16.4659 95.633 15.8739 97.3834 15.8739C99.8338 15.8739 102.177 17.356 102.177 20.9122V29.5076H98.7027V21.6402C98.7027 20.2119 98.0019 19.1345 96.3591 19.1345C94.8238 19.1345 93.9079 20.3202 93.9079 21.7485V29.5084H90.3541V21.6402C90.3541 20.2119 89.6272 19.1345 88.0104 19.1345C86.4483 19.1345 85.5323 20.2933 85.5323 21.7485V29.5084H81.9516V16.2509Z" }), /* @__PURE__ */ React44.createElement("path", { d: "M59.2755 29.8916C55.2407 29.8916 52.3189 26.899 52.3189 22.8795C52.3189 18.9241 55.2312 15.8603 59.2755 15.8603C63.3394 15.8603 66.232 18.9526 66.232 22.8795C66.232 26.8697 63.3086 29.8916 59.2755 29.8916ZM59.2755 19.1051C57.1944 19.1051 55.5018 20.7983 55.5018 22.8803C55.5018 24.9624 57.1944 26.6555 59.2755 26.6555C61.3565 26.6555 63.0484 24.9624 63.0484 22.8803C63.0484 20.7983 61.3565 19.1051 59.2755 19.1051Z" }), /* @__PURE__ */ React44.createElement("path", { d: "M73.8823 29.8916C69.8476 29.8916 66.9258 26.899 66.9258 22.8795C66.9258 18.9241 69.8381 15.8603 73.8823 15.8603C77.9463 15.8603 80.8389 18.9526 80.8389 22.8795C80.8389 26.8697 77.9139 29.8916 73.8823 29.8916ZM73.8823 19.0601C71.7776 19.0601 70.0652 20.7738 70.0652 22.8788C70.0652 24.9837 71.7776 26.6974 73.8823 26.6974C75.9871 26.6974 77.6995 24.9837 77.6995 22.8788C77.6988 20.7738 75.9863 19.0601 73.8823 19.0601Z" })));
     case "product":
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ viewBox: "0 0 112 40", fill: "none", "aria-label": "Loom" }, props), /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ viewBox: "0 0 112 40", fill: "none", "aria-label": "Loom" }, props), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M0 9.25C0 4.14137 4.14137 0 9.25 0H30.75C35.8586 0 40 4.14137 40 9.25V30.75C40 35.8586 35.8586 40 30.75 40H9.25C4.14137 40 0 35.8586 0 30.75V9.25Z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("primary")
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M32.3962 18.6756H25.1467L31.4251 15.0508L30.0463 12.662L23.768 16.2868L27.392 10.009L25.0032 8.62938L21.3792 14.9072V7.65833H18.6215V14.9079L14.9961 8.62938L12.6081 10.0083L16.2327 16.2861L9.95437 12.662L8.57552 15.0501L14.8539 18.6749H7.60449V21.4327H14.8532L8.57552 25.0575L9.95437 27.4463L16.2321 23.8222L12.6074 30.1L14.9961 31.4789L18.6208 25.2004V32.45H21.3785V25.2011L25.0025 31.4789L27.3912 30.1L23.7665 23.8215L30.0449 27.4463L31.4238 25.0575L25.1461 21.4334H32.3947L32.3962 18.6756ZM20.0003 23.8048C17.921 23.8048 16.2355 22.1194 16.2355 20.0399C16.2355 17.9605 17.921 16.275 20.0003 16.275C22.0797 16.275 23.7651 17.9605 23.7651 20.0399C23.7651 22.1194 22.0797 23.8048 20.0003 23.8048Z",
           fill: "white"
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -6760,7 +6790,7 @@ var CombinedLogoSvg = (_a) => {
           d: "M70.3743 15.1855C71.6352 15.1855 72.7252 15.459 73.6442 16.0059C74.5709 16.5527 75.2848 17.3237 75.7861 18.3187C76.2874 19.3061 76.5381 20.4568 76.5381 21.7708C76.5381 23.0773 76.2874 24.2242 75.7861 25.2116C75.2848 26.199 74.5709 26.9661 73.6442 27.513C72.7252 28.0599 71.6352 28.3333 70.3743 28.3333C69.1135 28.3333 68.0197 28.0599 67.0931 27.513C66.174 26.9661 65.4639 26.199 64.9626 25.2116C64.4613 24.2242 64.2106 23.0773 64.2106 21.7708C64.2106 20.4568 64.4613 19.3061 64.9626 18.3187C65.4639 17.3237 66.174 16.5527 67.0931 16.0059C68.0197 15.459 69.1135 15.1855 70.3743 15.1855ZM70.3743 17.7376C69.7287 17.7376 69.1895 17.9161 68.7565 18.2731C68.3312 18.6225 68.0084 19.101 67.7881 19.7087C67.5754 20.3087 67.4691 20.9923 67.4691 21.7594C67.4691 22.519 67.5754 23.2026 67.7881 23.8102C68.0084 24.4179 68.3312 24.9002 68.7565 25.2572C69.1895 25.6066 69.7287 25.7812 70.3743 25.7812C71.02 25.7812 71.5592 25.6066 71.9922 25.2572C72.4251 24.9002 72.7479 24.4179 72.9606 23.8102C73.1733 23.2026 73.2796 22.519 73.2796 21.7594C73.2796 20.9999 73.1733 20.3163 72.9606 19.7087C72.7479 19.101 72.4251 18.6225 71.9922 18.2731C71.5592 17.9161 71.02 17.7376 70.3743 17.7376Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           fillRule: "evenodd",
@@ -6768,13 +6798,13 @@ var CombinedLogoSvg = (_a) => {
           d: "M84.6387 15.1855C85.8995 15.1855 86.9895 15.459 87.9085 16.0059C88.8352 16.5527 89.5491 17.3237 90.0505 18.3187C90.5518 19.3061 90.8024 20.4568 90.8024 21.7708C90.8024 23.0773 90.5518 24.2242 90.0505 25.2116C89.5491 26.199 88.8352 26.9661 87.9085 27.513C86.9895 28.0599 85.8995 28.3333 84.6387 28.3333C83.3778 28.3333 82.2841 28.0599 81.3574 27.513C80.4384 26.9661 79.7282 26.199 79.2269 25.2116C78.7256 24.2242 78.4749 23.0773 78.4749 21.7708C78.4749 20.4568 78.7256 19.3061 79.2269 18.3187C79.7282 17.3237 80.4384 16.5527 81.3574 16.0059C82.2841 15.459 83.3778 15.1855 84.6387 15.1855ZM84.6387 17.7376C83.9931 17.7376 83.4538 17.9161 83.0208 18.2731C82.5955 18.6225 82.2727 19.101 82.0524 19.7087C81.8397 20.3087 81.7334 20.9923 81.7334 21.7594C81.7334 22.519 81.8397 23.2026 82.0524 23.8102C82.2727 24.4179 82.5955 24.9002 83.0208 25.2572C83.4538 25.6066 83.9931 25.7812 84.6387 25.7812C85.2843 25.7812 85.8236 25.6066 86.2565 25.2572C86.6895 24.9002 87.0123 24.4179 87.2249 23.8102C87.4376 23.2026 87.5439 22.519 87.5439 21.7594C87.5439 20.9999 87.4376 20.3163 87.2249 19.7087C87.0123 19.101 86.6895 18.6225 86.2565 18.2731C85.8236 17.9161 85.2843 17.7376 84.6387 17.7376Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M54.9365 25.3483H62.3421V28.0827H51.6667V11.1068H54.9365V25.3483Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M107.368 15.1514C108.135 15.1514 108.823 15.3185 109.43 15.6527C110.046 15.9869 110.528 16.4768 110.877 17.1224C111.234 17.768 111.413 18.5579 111.413 19.4922V28.0827H108.211V20.0505C108.211 19.2985 108.006 18.744 107.596 18.387C107.186 18.0301 106.688 17.8516 106.104 17.8516C105.655 17.8516 105.264 17.9503 104.93 18.1478C104.603 18.3377 104.349 18.6073 104.167 18.9567C103.992 19.3061 103.905 19.7125 103.905 20.1758V28.0827H100.794V19.9365C100.794 19.2985 100.601 18.7934 100.213 18.4212C99.8334 18.0414 99.3397 17.8516 98.7321 17.8516C98.3143 17.8516 97.9346 17.9465 97.5928 18.1364C97.251 18.3263 96.9813 18.6073 96.7839 18.9795C96.5864 19.3441 96.4876 19.796 96.4876 20.3353V28.0827H93.2747V15.3451H96.2712L96.3786 17.806C96.5512 17.3255 96.7692 16.9151 97.0345 16.5755C97.4219 16.0894 97.8738 15.7324 98.3903 15.5046C98.9068 15.2691 99.4461 15.1514 100.008 15.1514C100.927 15.1514 101.668 15.44 102.23 16.0173C102.677 16.4764 103.023 17.1235 103.273 17.9574C103.451 17.4646 103.688 17.038 103.984 16.6781C104.417 16.1616 104.922 15.778 105.5 15.5273C106.085 15.2767 106.707 15.1514 107.368 15.1514Z",
@@ -6782,43 +6812,43 @@ var CombinedLogoSvg = (_a) => {
         }
       ));
     case "marketing":
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 170 48", fill: "none" }, props), /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 170 48", fill: "none" }, props), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M154.37 25.212V38H150.414V24.108C150.414 19.968 148.758 18.128 144.986 18.128C141.306 18.128 138.776 20.566 138.776 25.212V38H134.82V15H138.776V18.772C140.248 16.058 142.962 14.54 146.044 14.54C149.954 14.54 152.622 16.518 153.772 20.152C155.06 16.61 158.142 14.54 161.96 14.54C167.112 14.54 169.964 18.036 169.964 24.522V38H166.008V25.212C166.008 20.474 164.352 18.128 160.58 18.128C156.9 18.128 154.37 20.566 154.37 25.212Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M119.367 38.46C112.467 38.46 108.419 33.354 108.419 26.454C108.419 19.554 112.467 14.54 119.367 14.54C126.221 14.54 130.223 19.554 130.223 26.454C130.223 33.354 126.221 38.46 119.367 38.46ZM119.367 18.22C114.445 18.22 112.283 22.084 112.283 26.454C112.283 30.824 114.445 34.78 119.367 34.78C124.243 34.78 126.359 30.824 126.359 26.454C126.359 22.084 124.243 18.22 119.367 18.22Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M94.3452 38.46C87.4452 38.46 83.3972 33.354 83.3972 26.454C83.3972 19.554 87.4452 14.54 94.3452 14.54C101.199 14.54 105.201 19.554 105.201 26.454C105.201 33.354 101.199 38.46 94.3452 38.46ZM94.3452 18.22C89.4232 18.22 87.2612 22.084 87.2612 26.454C87.2612 30.824 89.4232 34.78 94.3452 34.78C99.2212 34.78 101.337 30.824 101.337 26.454C101.337 22.084 99.2212 18.22 94.3452 18.22Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M64.094 7.77783H68.234V34.0438H81.942V37.9998H64.094V7.77783Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M0 12C0 5.37258 5.37258 0 12 0H36C42.6274 0 48 5.37258 48 12V36C48 42.6274 42.6274 48 36 48H12C5.37258 48 0 42.6274 0 36V12Z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("primary")
         }
-      ), /* @__PURE__ */ React43.createElement("g", { clipPath: "url(#clip0_45829_3572)" }, /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement("g", { clipPath: "url(#clip0_45829_3572)" }, /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M38.0625 22.9644H29.9846L36.9804 18.9253L35.4441 16.2635L28.4482 20.3026L32.4864 13.3073L29.8246 11.77L25.7864 18.7653V10.688H22.7136V18.7661L18.6738 11.77L16.0129 13.3065L20.0518 20.3018L13.0559 16.2635L11.5195 18.9246L18.5154 22.9636H10.4375V26.0366H18.5146L11.5195 30.0757L13.0559 32.7375L20.0511 28.6991L16.0121 35.6945L18.6738 37.2309L22.7128 30.2349V38.313H25.7857V30.2356L29.8239 37.2309L32.4855 35.6945L28.4466 28.6984L35.4425 32.7375L36.979 30.0757L29.9838 26.0373H38.0609V22.9644H38.0625ZM24.25 28.6798C21.933 28.6798 20.0549 26.8018 20.0549 24.4847C20.0549 22.1676 21.933 20.2895 24.25 20.2895C26.567 20.2895 28.445 22.1676 28.445 24.4847C28.445 26.8018 26.567 28.6798 24.25 28.6798Z",
           fill: "white"
         }
-      )), /* @__PURE__ */ React43.createElement("defs", null, /* @__PURE__ */ React43.createElement("clipPath", { id: "clip0_45829_3572" }, /* @__PURE__ */ React43.createElement(
+      )), /* @__PURE__ */ React44.createElement("defs", null, /* @__PURE__ */ React44.createElement("clipPath", { id: "clip0_45829_3572" }, /* @__PURE__ */ React44.createElement(
         "rect",
         {
           width: "39",
@@ -6828,97 +6858,97 @@ var CombinedLogoSvg = (_a) => {
         }
       ))));
     case "attributed":
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 232 75", fill: "none" }, props), /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 232 75", fill: "none" }, props), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M181.37 52.212V65H177.414V51.108C177.414 46.968 175.758 45.128 171.986 45.128C168.306 45.128 165.776 47.566 165.776 52.212V65H161.82V42H165.776V45.772C167.248 43.058 169.962 41.54 173.044 41.54C176.954 41.54 179.622 43.518 180.772 47.152C182.06 43.61 185.142 41.54 188.96 41.54C194.112 41.54 196.964 45.036 196.964 51.522V65H193.008V52.212C193.008 47.474 191.352 45.128 187.58 45.128C183.9 45.128 181.37 47.566 181.37 52.212Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M146.367 65.46C139.467 65.46 135.419 60.354 135.419 53.454C135.419 46.554 139.467 41.54 146.367 41.54C153.221 41.54 157.223 46.554 157.223 53.454C157.223 60.354 153.221 65.46 146.367 65.46ZM146.367 45.22C141.445 45.22 139.283 49.084 139.283 53.454C139.283 57.824 141.445 61.78 146.367 61.78C151.243 61.78 153.359 57.824 153.359 53.454C153.359 49.084 151.243 45.22 146.367 45.22Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M121.345 65.46C114.445 65.46 110.397 60.354 110.397 53.454C110.397 46.554 114.445 41.54 121.345 41.54C128.199 41.54 132.201 46.554 132.201 53.454C132.201 60.354 128.199 65.46 121.345 65.46ZM121.345 45.22C116.423 45.22 114.261 49.084 114.261 53.454C114.261 57.824 116.423 61.78 121.345 61.78C126.221 61.78 128.337 57.824 128.337 53.454C128.337 49.084 126.221 45.22 121.345 45.22Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M91.094 34.7778H95.234V61.0438H108.942V64.9998H91.094V34.7778Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M155.186 11.9857C155.186 14.5147 156.33 16.5017 160.967 17.4049C163.676 18.007 164.278 18.4285 164.278 19.3316C164.278 20.2348 163.676 20.7767 161.749 20.7767C159.521 20.7767 156.872 19.994 155.126 18.9704V23.0648C156.511 23.7271 158.317 24.5099 161.749 24.5099C166.566 24.5099 168.433 22.3423 168.433 19.2112M168.433 19.2714C168.433 16.2608 166.867 14.8759 162.351 13.9125C159.883 13.3706 159.281 12.8287 159.281 12.046C159.281 11.0826 160.184 10.6611 161.81 10.6611C163.797 10.6611 165.723 11.2632 167.59 12.1062V8.19237C166.265 7.53004 164.278 7.04834 161.93 7.04834C157.474 7.04834 155.186 8.97513 155.186 12.1062",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M216.844 7.16846V24.329H220.517V11.2629L222.022 14.695L227.2 24.329H231.776V7.16846H228.164V18.2475L226.779 14.9961L222.624 7.16846H216.844Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M193.602 7.16846H189.628V24.329H193.602V7.16846Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M185.052 19.2109C185.052 16.2003 183.486 14.8154 178.97 13.852C176.501 13.3101 175.899 12.7682 175.899 11.9854C175.899 11.022 176.802 10.6005 178.428 10.6005C180.415 10.6005 182.342 11.2027 184.209 12.0456V8.13183C182.884 7.46949 180.897 6.98779 178.549 6.98779C174.093 6.98779 171.805 8.91459 171.805 12.0456C171.805 14.5745 172.949 16.5615 177.585 17.4647C180.295 18.0669 180.897 18.4883 180.897 19.3915C180.897 20.2947 180.295 20.8366 178.368 20.8366C176.14 20.8366 173.491 20.0539 171.745 19.0302V23.1247C173.13 23.787 174.936 24.5698 178.368 24.5698C183.125 24.5698 185.052 22.4021 185.052 19.2109Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M124.237 7.16846V24.329H132.426L133.69 20.5958H128.211V7.16846H124.237Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M108.04 7.16846V10.8414H112.436V24.329H116.47V10.8414H121.227V7.16846H108.04Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M102.199 7.16846H96.961L91 24.329H95.5761L96.4191 21.4388C97.4427 21.7398 98.5265 21.9205 99.6104 21.9205C100.694 21.9205 101.778 21.7398 102.802 21.4388L103.645 24.329H108.221C108.16 24.329 102.199 7.16846 102.199 7.16846ZM99.5501 18.3077C98.7674 18.3077 98.0448 18.1873 97.3825 18.0067L99.5501 10.5403L101.718 18.0067C101.055 18.1873 100.333 18.3077 99.5501 18.3077Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M146.576 7.16846H141.337L135.316 24.329H139.892L140.735 21.4388C141.759 21.7398 142.843 21.9205 143.927 21.9205C145.01 21.9205 146.094 21.7398 147.118 21.4388L147.961 24.329H152.537L146.576 7.16846ZM143.927 18.3077C143.144 18.3077 142.421 18.1873 141.759 18.0067L143.927 10.5403L146.094 18.0067C145.432 18.1873 144.709 18.3077 143.927 18.3077Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M207.992 7.16846H202.754L196.793 24.329H201.369L202.212 21.4388C203.236 21.7398 204.319 21.9205 205.403 21.9205C206.487 21.9205 207.571 21.7398 208.595 21.4388L209.438 24.329H214.014L207.992 7.16846ZM205.403 18.3077C204.621 18.3077 203.898 18.1873 203.236 18.0067L205.403 10.5403L207.571 18.0067C206.909 18.1873 206.126 18.3077 205.403 18.3077Z",
           fill: wordmarkColor
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M0 18.75C0 8.39466 8.39466 0 18.75 0H56.25C66.6053 0 75 8.39466 75 18.75V56.25C75 66.6053 66.6053 75 56.25 75H18.75C8.39466 75 0 66.6053 0 56.25V18.75Z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("primary")
         }
-      ), /* @__PURE__ */ React43.createElement("g", { clipPath: "url(#clip0_45829_3571)" }, /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement("g", { clipPath: "url(#clip0_45829_3571)" }, /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M59.4729 35.8821H46.8511L57.7822 29.571L55.3817 25.412L44.4506 31.723L50.7602 20.7928L46.6012 18.3909L40.2915 29.3211V16.7002H35.4902V29.3223L29.1781 18.3909L25.0204 20.7916L31.3312 31.7218L20.4001 25.412L17.9995 29.5698L28.9306 35.8809H16.3088V40.6824H28.9294L17.9995 46.9934L20.4001 51.1525L31.33 44.8426L25.0192 55.7728L29.1781 58.1735L35.489 47.2422V59.8643H40.2904V47.2434L46.6 58.1735L50.7589 55.7728L44.4481 44.8415L55.3792 51.1525L57.7799 46.9934L46.85 40.6835H59.4704V35.8821H59.4729ZM37.8909 44.8124C34.2705 44.8124 31.3361 41.878 31.3361 38.2575C31.3361 34.637 34.2705 31.7025 37.8909 31.7025C41.5112 31.7025 44.4456 34.637 44.4456 38.2575C44.4456 41.878 41.5112 44.8124 37.8909 44.8124Z",
           fill: "white"
         }
-      )), /* @__PURE__ */ React43.createElement("defs", null, /* @__PURE__ */ React43.createElement("clipPath", { id: "clip0_45829_3571" }, /* @__PURE__ */ React43.createElement(
+      )), /* @__PURE__ */ React44.createElement("defs", null, /* @__PURE__ */ React44.createElement("clipPath", { id: "clip0_45829_3571" }, /* @__PURE__ */ React44.createElement(
         "rect",
         {
           width: "60.9375",
@@ -6928,13 +6958,13 @@ var CombinedLogoSvg = (_a) => {
         }
       ))));
     default:
-      return /* @__PURE__ */ React43.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 100 30", fill: "none" }, props), /* @__PURE__ */ React43.createElement("title", null, "Loom"), /* @__PURE__ */ React43.createElement(
+      return /* @__PURE__ */ React44.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 100 30", fill: "none" }, props), /* @__PURE__ */ React44.createElement("title", null, "Loom"), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M30.01 13.43h-9.142l7.917-4.57-1.57-2.72-7.918 4.57 4.57-7.915-2.72-1.57-4.571 7.913V0h-3.142v9.139L8.863 1.225l-2.721 1.57 4.57 7.913L2.796 6.14 1.225 8.86l7.917 4.57H0v3.141h9.141l-7.916 4.57 1.57 2.72 7.918-4.57-4.571 7.915 2.72 1.57 4.572-7.914V30h3.142v-9.334l4.655 8.06 2.551-1.472-4.656-8.062 8.087 4.668 1.571-2.72-7.916-4.57h9.141v-3.14h.001zm-15.005 5.84a4.271 4.271 0 11-.001-8.542 4.271 4.271 0 01.001 8.542z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("primary")
         }
-      ), /* @__PURE__ */ React43.createElement(
+      ), /* @__PURE__ */ React44.createElement(
         "path",
         {
           d: "M38.109 25.973V4.027h4.028v21.946h-4.028zM76.742 11.059h3.846v1.82c.818-1.455 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.996v-8.852c0-1.607-.818-2.82-2.636-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V11.059zM51.24 26.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM67.667 26.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z",
@@ -6970,7 +7000,7 @@ var Logo = (_a) => {
     "brand",
     "customId"
   ]);
-  return /* @__PURE__ */ React43.createElement(LogoWrapper, __spreadValues({ variant, maxWidth }, props), variant === "combined" && /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(LogoWrapper, __spreadValues({ variant, maxWidth }, props), variant === "combined" && /* @__PURE__ */ React44.createElement(
     CombinedLogoSvg,
     {
       brand,
@@ -6979,7 +7009,7 @@ var Logo = (_a) => {
       customId,
       className: "lns-logoSvg"
     }
-  ), variant === "symbol" && /* @__PURE__ */ React43.createElement(
+  ), variant === "symbol" && /* @__PURE__ */ React44.createElement(
     SymbolLogoSvg,
     {
       brand,
@@ -6987,7 +7017,7 @@ var Logo = (_a) => {
       customId,
       className: "lns-logoSvg"
     }
-  ), variant === "wordmark" && /* @__PURE__ */ React43.createElement(
+  ), variant === "wordmark" && /* @__PURE__ */ React44.createElement(
     WordmarkLogoSvg,
     {
       brand,
@@ -7000,7 +7030,7 @@ var logo_default = Logo;
 
 // src/components/logo-loader/logo-loader.tsx
 import styled34 from "@emotion/styled";
-import React44 from "react";
+import React45 from "react";
 
 // src/constants/routes.ts
 var LENS_CDN = "https://cdn.loom.com/assets/lens";
@@ -7030,14 +7060,14 @@ var LogoLoader = ({
   brand = "loom",
   size = "medium"
 }) => {
-  return /* @__PURE__ */ React44.createElement(LogoLoaderWrapper, { animation, brand, size });
+  return /* @__PURE__ */ React45.createElement(LogoLoaderWrapper, { animation, brand, size });
 };
 var logo_loader_default = LogoLoader;
 
 // src/components/list/list.tsx
 import { css as css5 } from "@emotion/react";
 import styled35 from "@emotion/styled";
-import React45 from "react";
+import React46 from "react";
 var ssrComment = `/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */`;
 var variantStyles2 = {
   border: css5`
@@ -7163,19 +7193,16 @@ var ListRow = (_a) => {
       }
     }
   } : {};
-  return (
-    // eslint-disable-next-line styled-components-a11y/no-static-element-interactions
-    /* @__PURE__ */ React45.createElement(
-      ListRowWrapper,
-      __spreadValues(__spreadValues({
-        role: role || (htmlTag === "li" ? "listitem" : void 0),
-        className: `ListRowWrapper${classNameFromProp}`,
-        as: htmlTag,
-        backgroundColor,
-        href
-      }, interactiveProps), props),
-      children
-    )
+  return /* @__PURE__ */ React46.createElement(
+    ListRowWrapper,
+    __spreadValues(__spreadValues({
+      role: role || (htmlTag === "li" ? "listitem" : void 0),
+      className: `ListRowWrapper${classNameFromProp}`,
+      as: htmlTag,
+      backgroundColor,
+      href
+    }, interactiveProps), props),
+    children
   );
 };
 var formatColumns = (columns) => columns.map((columnValue) => getSizeValue(columnValue)).join(" ");
@@ -7195,16 +7222,16 @@ var List = (_a) => {
   ]);
   let processedChildren = children;
   if (htmlTag === "ul") {
-    processedChildren = React45.Children.map(children, (child) => {
-      if (React45.isValidElement(child) && child.type === ListRow) {
-        return React45.cloneElement(child, {
+    processedChildren = React46.Children.map(children, (child) => {
+      if (React46.isValidElement(child) && child.type === ListRow) {
+        return React46.cloneElement(child, {
           htmlTag: "li"
         });
       }
       return child;
     });
   }
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.createElement(
     ListWrapper,
     __spreadValues({
       as: htmlTag,
@@ -7220,8 +7247,8 @@ var list_default = List;
 
 // src/components/tabs/tabs.tsx
 import styled36 from "@emotion/styled";
-import React46, { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useId } from "react";
-var TabsContext = React46.createContext({});
+import React47, { useCallback as useCallback4, useMemo as useMemo4, useRef as useRef4, useId } from "react";
+var TabsContext = React47.createContext({});
 var negativeScrollOffset = (scrollOffset) => `calc(-1 * ${getSizeValue(scrollOffset)})`;
 var Wrapper = styled36.div`
   ${(props) => props.scrollOffset && `margin: 0 ${negativeScrollOffset(props.scrollOffset)};
@@ -7250,6 +7277,10 @@ var TabsNav = styled36.div`
     }
   }
 
+  button {
+    ${(props) => props.hasFullTabs && `width: 100%;`};
+  }
+
   ::after {
     content: '';
     flex-shrink: 0;
@@ -7272,10 +7303,14 @@ var TabsNavPilled = styled36.div`
     display: none;
   }
 
-  * {
+  > * {
     flex: 1 0;
   }
 
+  button {
+    width: 100%;
+  }
+
   ::after {
     content: '';
     flex-shrink: 0;
@@ -7387,9 +7422,9 @@ var Tab = (_a) => {
     "icon",
     "isDisabled"
   ]);
-  const { isPilledDesign } = React46.useContext(TabsContext);
+  const { isPilledDesign } = React47.useContext(TabsContext);
   if (isPilledDesign) {
-    return /* @__PURE__ */ React46.createElement(
+    return /* @__PURE__ */ React47.createElement(
       TabWrapperPilled,
       __spreadValues({
         as: htmlTag,
@@ -7399,11 +7434,11 @@ var Tab = (_a) => {
         "aria-selected": isActive,
         disabled: isDisabled
       }, props),
-      icon && /* @__PURE__ */ React46.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ React46.createElement(icon_default, { icon, color: "currentColor" })),
+      icon && /* @__PURE__ */ React47.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ React47.createElement(icon_default, { icon, color: "currentColor" })),
       children
     );
   }
-  return /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React47.createElement(
     TabWrapper,
     __spreadValues({
       as: htmlTag,
@@ -7413,7 +7448,7 @@ var Tab = (_a) => {
       "aria-selected": isActive,
       disabled: isDisabled
     }, props),
-    icon && /* @__PURE__ */ React46.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ React46.createElement(icon_default, { icon, color: "currentColor" })),
+    icon && /* @__PURE__ */ React47.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ React47.createElement(icon_default, { icon, color: "currentColor" })),
     children
   );
 };
@@ -7431,7 +7466,7 @@ var TabsDeprecated = (_a) => {
     "isPilledDesign",
     "hasBottomBorder"
   ]);
-  const tabsContent = isPilledDesign ? /* @__PURE__ */ React46.createElement(
+  const tabsContent = isPilledDesign ? /* @__PURE__ */ React47.createElement(
     TabsNavPilled,
     __spreadValues({
       hasFullTabs,
@@ -7439,7 +7474,7 @@ var TabsDeprecated = (_a) => {
       role: "tablist"
     }, props),
     children
-  ) : /* @__PURE__ */ React46.createElement(
+  ) : /* @__PURE__ */ React47.createElement(
     TabsNav,
     __spreadValues({
       hasFullTabs,
@@ -7450,9 +7485,9 @@ var TabsDeprecated = (_a) => {
     children
   );
   if (scrollOffset) {
-    return /* @__PURE__ */ React46.createElement(Wrapper, { scrollOffset }, tabsContent);
+    return /* @__PURE__ */ React47.createElement(Wrapper, { scrollOffset }, tabsContent);
   }
-  return /* @__PURE__ */ React46.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
+  return /* @__PURE__ */ React47.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
 };
 var ConditionalTooltip = ({
   tooltipProps,
@@ -7460,11 +7495,11 @@ var ConditionalTooltip = ({
   tooltipId
 }) => {
   if (tooltipProps) {
-    return /* @__PURE__ */ React46.createElement(tooltip_default, __spreadProps(__spreadValues({}, tooltipProps), { tooltipId, tabIndex: -1 }), children);
+    return /* @__PURE__ */ React47.createElement(tooltip_default, __spreadProps(__spreadValues({}, tooltipProps), { tooltipId, tabIndex: -1 }), children);
   }
   return children;
 };
-var TabNew = React46.forwardRef(
+var TabNew = React47.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       tabContent,
@@ -7485,7 +7520,7 @@ var TabNew = React46.forwardRef(
       "onKeyDown",
       "onClick"
     ]);
-    const { isPilledDesign } = React46.useContext(TabsContext);
+    const { isPilledDesign } = React47.useContext(TabsContext);
     const tooltipId = useId();
     const componentProps = __spreadValues({
       as: htmlTag,
@@ -7500,7 +7535,7 @@ var TabNew = React46.forwardRef(
       onClick,
       ref
     }, props);
-    return /* @__PURE__ */ React46.createElement(ConditionalTooltip, { tooltipProps, tooltipId }, isPilledDesign ? /* @__PURE__ */ React46.createElement(TabWrapperPilled, __spreadValues({}, componentProps), icon ? /* @__PURE__ */ React46.createElement(container_default, { htmlTag: "span", paddingRight: tabContent && "small" }, /* @__PURE__ */ React46.createElement(icon_default, { icon, color: "currentColor" })) : null, tabContent) : /* @__PURE__ */ React46.createElement(TabWrapper, __spreadValues({}, componentProps), icon ? /* @__PURE__ */ React46.createElement(container_default, { htmlTag: "span", paddingRight: tabContent && "small" }, /* @__PURE__ */ React46.createElement(icon_default, { icon, color: "currentColor" })) : null, tabContent));
+    return /* @__PURE__ */ React47.createElement(ConditionalTooltip, { tooltipProps, tooltipId }, isPilledDesign ? /* @__PURE__ */ React47.createElement(TabWrapperPilled, __spreadValues({}, componentProps), icon ? /* @__PURE__ */ React47.createElement(container_default, { htmlTag: "span", paddingRight: tabContent && "small" }, /* @__PURE__ */ React47.createElement(icon_default, { icon, color: "currentColor" })) : null, tabContent) : /* @__PURE__ */ React47.createElement(TabWrapper, __spreadValues({}, componentProps), icon ? /* @__PURE__ */ React47.createElement(container_default, { htmlTag: "span", paddingRight: tabContent && "small" }, /* @__PURE__ */ React47.createElement(icon_default, { icon, color: "currentColor" })) : null, tabContent));
   }
 );
 TabNew.displayName = "TabNew";
@@ -7554,7 +7589,7 @@ var TabsNew = (_a) => {
     []
   );
   const tabsToRender = useMemo4(
-    () => tabs.map((tabProps, index) => /* @__PURE__ */ React46.createElement(
+    () => tabs.map((tabProps, index) => /* @__PURE__ */ React47.createElement(
       TabNew,
       __spreadValues({
         key: index,
@@ -7565,7 +7600,7 @@ var TabsNew = (_a) => {
     [tabs, handleKeyDown, setTabRef]
   );
   const tabsContent = useMemo4(
-    () => isPilledDesign ? /* @__PURE__ */ React46.createElement(
+    () => isPilledDesign ? /* @__PURE__ */ React47.createElement(
       TabsNavPilled,
       __spreadValues({
         hasFullTabs,
@@ -7573,7 +7608,7 @@ var TabsNew = (_a) => {
         role: "tablist"
       }, props),
       tabsToRender
-    ) : /* @__PURE__ */ React46.createElement(
+    ) : /* @__PURE__ */ React47.createElement(
       TabsNav,
       __spreadValues({
         hasFullTabs,
@@ -7592,9 +7627,9 @@ var TabsNew = (_a) => {
       props
     ]
   );
-  const wrappedContent = /* @__PURE__ */ React46.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
+  const wrappedContent = /* @__PURE__ */ React47.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
   if (scrollOffset) {
-    return /* @__PURE__ */ React46.createElement(Wrapper, { scrollOffset }, wrappedContent);
+    return /* @__PURE__ */ React47.createElement(Wrapper, { scrollOffset }, wrappedContent);
   }
   return wrappedContent;
 };
@@ -7610,15 +7645,15 @@ var Tabs = (_a) => {
     return null;
   }
   if (children) {
-    return /* @__PURE__ */ React46.createElement(TabsDeprecated, __spreadValues({}, props), children);
+    return /* @__PURE__ */ React47.createElement(TabsDeprecated, __spreadValues({}, props), children);
   }
-  return /* @__PURE__ */ React46.createElement(TabsNew, __spreadValues({ tabs }, props));
+  return /* @__PURE__ */ React47.createElement(TabsNew, __spreadValues({ tabs }, props));
 };
 var tabs_default = Tabs;
 
 // src/components/pill/pill.tsx
 import styled37 from "@emotion/styled";
-import React47 from "react";
+import React48 from "react";
 var PillWrapper = styled37.div`
   display: inline-grid;
   grid-auto-flow: column;
@@ -7647,16 +7682,16 @@ var Pill = (_a) => {
     "icon",
     "iconPosition"
   ]);
-  const iconComponent = /* @__PURE__ */ React47.createElement(
+  const iconComponent = /* @__PURE__ */ React48.createElement(
     container_default,
     {
       htmlTag: "span",
       paddingLeft: iconPosition === "right" && "xsmall",
       paddingRight: iconPosition === "left" && "xsmall"
     },
-    /* @__PURE__ */ React47.createElement(icon_default, { icon, color: "currentColor", size: 2 })
+    /* @__PURE__ */ React48.createElement(icon_default, { icon, color: "currentColor", size: 2 })
   );
-  return /* @__PURE__ */ React47.createElement(PillWrapper, __spreadValues({ color, backgroundColor }, props), icon && iconPosition === "left" && iconComponent, children, icon && iconPosition === "right" && iconComponent);
+  return /* @__PURE__ */ React48.createElement(PillWrapper, __spreadValues({ color, backgroundColor }, props), icon && iconPosition === "left" && iconComponent, children, icon && iconPosition === "right" && iconComponent);
 };
 var pill_default = Pill;
 
@@ -7670,7 +7705,7 @@ import {
   shift,
   useFloating
 } from "@floating-ui/react-dom";
-import React48, { useEffect as useEffect10 } from "react";
+import React49, { useEffect as useEffect10 } from "react";
 import ReactDOM from "react-dom";
 import { useTransition as useTransition2 } from "transition-hook";
 var placements2 = {
@@ -7772,8 +7807,8 @@ var Popover = (_a) => {
       opacity: stage === "enter" ? 1 : 0
     }
   };
-  return /* @__PURE__ */ React48.createElement(Wrapper2, __spreadProps(__spreadValues({ ref: reference }, props), { childrenZIndex }), children, shouldMount && /* @__PURE__ */ React48.createElement(React48.Fragment, null, !rootNode && /* @__PURE__ */ React48.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && ReactDOM.createPortal(
-    /* @__PURE__ */ React48.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
+  return /* @__PURE__ */ React49.createElement(Wrapper2, __spreadProps(__spreadValues({ ref: reference }, props), { childrenZIndex }), children, shouldMount && /* @__PURE__ */ React49.createElement(React49.Fragment, null, !rootNode && /* @__PURE__ */ React49.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && ReactDOM.createPortal(
+    /* @__PURE__ */ React49.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
     rootNode
   )));
 };
@@ -7781,7 +7816,7 @@ var popover_default = Popover;
 
 // src/components/illustration/illustration.tsx
 import styled39 from "@emotion/styled";
-import React49 from "react";
+import React50 from "react";
 var IllustrationWrapper = styled39.span`
   display: block;
   color: ${(props) => props.color ? getColorValue(props.color) : getColorValue("grey8")};
@@ -7806,7 +7841,7 @@ var Illustration = (_a) => {
     "color",
     "size"
   ]);
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(
     IllustrationWrapper,
     __spreadValues({
       "aria-hidden": "true",
@@ -7822,7 +7857,7 @@ var illustration_default = Illustration;
 // src/components/split/split.tsx
 import { css as css6 } from "@emotion/react";
 import styled40 from "@emotion/styled";
-import React50, { Children, cloneElement } from "react";
+import React51, { Children, cloneElement } from "react";
 var getSizeStyles = (props) => css6`
   ${getSize("width", props.width)};
   ${getSize("height", props.height)};
@@ -7883,7 +7918,7 @@ var SplitSection = (_a) => {
   if (className || style) {
     console.warn(customStylesWarning);
   }
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement(
     SplitSectionWrapper,
     __spreadValues({
       as: htmlTag,
@@ -7941,7 +7976,7 @@ var Split = (_a) => {
   if (className || style) {
     console.warn(customStylesWarning);
   }
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement(
     SplitWrapper,
     __spreadValues({
       as: htmlTag,
@@ -7971,7 +8006,7 @@ var split_default = Split;
 
 // src/components/color-picker/color-picker.tsx
 import styled41 from "@emotion/styled";
-import React51, { useState as useState6 } from "react";
+import React52, { useState as useState6 } from "react";
 import { HexColorPicker, HexColorInput } from "react-colorful";
 var ColorfulWrapper = styled41.div`
   padding: var(--lns-space-medium);
@@ -8084,7 +8119,7 @@ var Swatch = styled41.div`
 `;
 var SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
   const selectedSwatch = swatches.includes(currentColor) && currentColor;
-  return /* @__PURE__ */ React51.createElement(SwatchesContainer, null, swatches.map((swatch) => /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(SwatchesContainer, null, swatches.map((swatch) => /* @__PURE__ */ React52.createElement(
     Swatch,
     {
       key: swatch,
@@ -8103,7 +8138,7 @@ var SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
   )));
 };
 var ColorSelector = ({ color, setColor }) => {
-  return /* @__PURE__ */ React51.createElement(ColorfulWrapper, null, /* @__PURE__ */ React51.createElement(HexColorPicker, { color, onChange: setColor }), /* @__PURE__ */ React51.createElement(InputContainer, null, /* @__PURE__ */ React51.createElement(HexColorInput, { prefixed: true, color, onChange: setColor }), /* @__PURE__ */ React51.createElement(ColorBox, { color })));
+  return /* @__PURE__ */ React52.createElement(ColorfulWrapper, null, /* @__PURE__ */ React52.createElement(HexColorPicker, { color, onChange: setColor }), /* @__PURE__ */ React52.createElement(InputContainer, null, /* @__PURE__ */ React52.createElement(HexColorInput, { prefixed: true, color, onChange: setColor }), /* @__PURE__ */ React52.createElement(ColorBox, { color })));
 };
 var ColorPicker = (_a) => {
   var _b = _a, {
@@ -8127,21 +8162,21 @@ var ColorPicker = (_a) => {
   const onSwatchClick = (swatch) => {
     handleOnChange(swatch);
   };
-  return /* @__PURE__ */ React51.createElement(ColorPickerContainer, __spreadValues({}, props), swatches && /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(ColorPickerContainer, __spreadValues({}, props), swatches && /* @__PURE__ */ React52.createElement(
     SwatchSelector,
     {
       swatches,
       currentColor: tempColor,
       onSwatchClick
     }
-  ), /* @__PURE__ */ React51.createElement(ColorSelector, { color: tempColor, setColor: handleOnChange }), confirmButton && /* @__PURE__ */ React51.createElement(ButtonWrapper2, null, confirmButton));
+  ), /* @__PURE__ */ React52.createElement(ColorSelector, { color: tempColor, setColor: handleOnChange }), confirmButton && /* @__PURE__ */ React52.createElement(ButtonWrapper2, null, confirmButton));
 };
 var color_picker_default = ColorPicker;
 
 // src/components/ellipses-loader/ellipses-loader.tsx
 import { keyframes as keyframes3 } from "@emotion/react";
 import styled42 from "@emotion/styled";
-import React52 from "react";
+import React53 from "react";
 var speed2 = 2;
 var sizes3 = {
   small: {
@@ -8203,7 +8238,7 @@ var EllipsesLoader = (_a) => {
     "color",
     "size"
   ]);
-  return /* @__PURE__ */ React52.createElement(EllipsesLoaderWrapper, __spreadValues({ size }, props), /* @__PURE__ */ React52.createElement(Dot2, { color, size, delay: 0 }), /* @__PURE__ */ React52.createElement(Dot2, { color, size, delay: 0.2 }), /* @__PURE__ */ React52.createElement(Dot2, { color, size, delay: 0.4 }));
+  return /* @__PURE__ */ React53.createElement(EllipsesLoaderWrapper, __spreadValues({ size }, props), /* @__PURE__ */ React53.createElement(Dot2, { color, size, delay: 0 }), /* @__PURE__ */ React53.createElement(Dot2, { color, size, delay: 0.2 }), /* @__PURE__ */ React53.createElement(Dot2, { color, size, delay: 0.4 }));
 };
 var availableSizes3 = Object.keys(sizes3);
 var ellipses_loader_default = EllipsesLoader;
@@ -8211,7 +8246,7 @@ var ellipses_loader_default = EllipsesLoader;
 // src/components/waveform-loader/waveform-loader.tsx
 import { keyframes as keyframes4 } from "@emotion/react";
 import styled43 from "@emotion/styled";
-import React53 from "react";
+import React54 from "react";
 var sizes4 = {
   medium: {
     totalSize: u(3),
@@ -8295,24 +8330,24 @@ var WaveformLoader = (_a) => {
     "speed",
     "color"
   ]);
-  const barsList = Array.from({ length: BARS_COUNT }, (_, index) => /* @__PURE__ */ React53.createElement(Bar, { key: index, index, size, speed: speed3, color }));
-  return /* @__PURE__ */ React53.createElement(WaveformLoaderWrapper, __spreadValues({ size, color }, props), barsList);
+  const barsList = Array.from({ length: BARS_COUNT }, (_, index) => /* @__PURE__ */ React54.createElement(Bar, { key: index, index, size, speed: speed3, color }));
+  return /* @__PURE__ */ React54.createElement(WaveformLoaderWrapper, __spreadValues({ size, color }, props), barsList);
 };
 var availableSizes4 = Object.keys(sizes4);
 var availableSpeeds = Object.keys(speeds);
 var waveform_loader_default = WaveformLoader;
 
-// src/illustrations/accounts-and-billing.js
-import * as React54 from "react";
+// src/illustrations/accounts-and-billing.tsx
+import * as React55 from "react";
 function IllustrationAccountsBilling(props) {
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 102 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React55.createElement(
       "path",
       {
         d: "M96.072 5.826H5.928v90.145h90.144V5.826z",
@@ -8321,7 +8356,7 @@ function IllustrationAccountsBilling(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React55.createElement(
       "path",
       {
         d: "M69.38 59.21c14.74 0 26.691-11.95 26.691-26.692S84.121 5.826 69.38 5.826c-14.741 0-26.692 11.95-26.692 26.692S54.638 59.21 69.38 59.21zM1 95.973h100M1 77.28h100M1 59.213h100M5.928 1v58.213M24.605 1v58.213M42.674 1v58.213",
@@ -8334,38 +8369,38 @@ function IllustrationAccountsBilling(props) {
 }
 var accounts_and_billing_default = IllustrationAccountsBilling;
 
-// src/illustrations/invite.js
-import * as React55 from "react";
+// src/illustrations/invite.tsx
+import * as React56 from "react";
 function IllustrationInvite(props) {
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(
       "path",
       {
         d: "M50.028 25.007A24.999 24.999 0 0034.586 1.905a25.022 25.022 0 00-27.26 5.42 25.002 25.002 0 0017.688 42.687V25.007h25.014z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(
       "path",
       {
         d: "M74.986 50.012a25.02 25.02 0 0023.11-15.436 24.993 24.993 0 00-5.422-27.25 25.017 25.017 0 00-42.702 17.681h25.014v25.005z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(
       "path",
       {
         d: "M49.972 74.99a25 25 0 0015.442 23.102 25.025 25.025 0 0027.26-5.42 25.002 25.002 0 00-17.688-42.687V74.99H49.972z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(
       "path",
       {
         d: "M25.014 100.003a25.003 25.003 0 0023.103-15.44 25.017 25.017 0 00-5.42-27.259A25.005 25.005 0 00.006 74.991h25.007v25.012z",
@@ -8376,24 +8411,24 @@ function IllustrationInvite(props) {
 }
 var invite_default = IllustrationInvite;
 
-// src/illustrations/archived.js
-import * as React56 from "react";
+// src/illustrations/archived.tsx
+import * as React57 from "react";
 function IllustrationArchived(props) {
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React57.createElement(
       "path",
       {
         d: "M0 .002v100h100v-100H0zm90 90H10v-80h80v80z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React57.createElement(
       "path",
       {
         d: "M87 13.002H53.68c8.41 1.53 15 8.2 16.46 16.63H87v-16.63zM46.32 13.002H13v16.63h16.86c1.45-8.43 8.05-15.1 16.46-16.63zM13 32.632v15.87h18.19c3.12-7.32 10.35-12.47 18.81-12.47 8.46 0 15.69 5.15 18.81 12.47H87v-15.87H13zM13 67.372h20.4c3.71-5.15 9.76-8.52 16.59-8.52 6.84 0 12.88 3.36 16.59 8.52H87v-15.87H13v15.87zM13 87.002h23.47c3.61-3.18 8.34-5.12 13.53-5.12 5.19 0 9.92 1.93 13.53 5.12H87v-16.63H13v16.63z",
@@ -8404,17 +8439,17 @@ function IllustrationArchived(props) {
 }
 var archived_default = IllustrationArchived;
 
-// src/illustrations/lead-with-transparency.js
-import * as React57 from "react";
+// src/illustrations/lead-with-transparency.tsx
+import * as React58 from "react";
 function IllustrationLeadwithTransparency(props) {
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React58.createElement(
       "path",
       {
         d: "M55 100.888a54.867 54.867 0 0031.361-9.8H23.64a54.867 54.867 0 0031.361 9.8zM20.482 88.728h69.025a54.887 54.887 0 008.8-8.911H11.682a56.245 56.245 0 008.8 8.911zM9.262 76.492h91.476a54.95 54.95 0 004.411-7.957H4.851a54.95 54.95 0 004.41 7.957zM3.124 64.255h103.752a54.896 54.896 0 001.969-7.002H1.166a53.117 53.117 0 001.958 7.002zM0 46.015c0 2.03.121 4.039.33 6.003h109.34c.22-1.975.33-3.973.33-6.003v-.033H0v.033zM.363 39.782h109.274a54.71 54.71 0 00-.814-5.07H1.177a55.308 55.308 0 00-.814 5.07zM3.2 27.556H106.8a58.547 58.547 0 00-1.672-4.115H4.873A51.945 51.945 0 003.2 27.556zM9.405 15.32h91.19a59.831 59.831 0 00-2.321-3.161H11.726a59.814 59.814 0 00-2.321 3.16zM23.716.888a57.211 57.211 0 00-2.959 2.195h68.475A52.837 52.837 0 0086.273.888H23.716z",
@@ -8425,17 +8460,17 @@ function IllustrationLeadwithTransparency(props) {
 }
 var lead_with_transparency_default = IllustrationLeadwithTransparency;
 
-// src/illustrations/ask-for-more.js
-import * as React58 from "react";
+// src/illustrations/ask-for-more.tsx
+import * as React59 from "react";
 function IllustrationAskforMore(props) {
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement(
       "path",
       {
         d: "M100 38.086V0H61.914v9.93h21.132L54.963 38.013V16.88h-9.93v21.132L16.951 9.93h21.135V0H0v38.086h9.93V16.951l28.083 28.082H16.88v9.93h21.132L9.93 83.046V61.914H0V100h38.086v-9.93H16.951l28.082-28.086v21.135h9.93V61.984L83.046 90.07H61.914V100H100V61.914h-9.93v21.132L61.987 54.963H83.12v-9.93H61.987L90.07 16.951v21.135H100z",
@@ -8446,17 +8481,17 @@ function IllustrationAskforMore(props) {
 }
 var ask_for_more_default = IllustrationAskforMore;
 
-// src/illustrations/learning-and-development.js
-import * as React59 from "react";
+// src/illustrations/learning-and-development.tsx
+import * as React60 from "react";
 function IllustrationLearningDevelopment(props) {
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 142 142",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React60.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8465,7 +8500,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React60.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8474,7 +8509,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React60.createElement(
       "circle",
       {
         cx: 70.71,
@@ -8488,17 +8523,17 @@ function IllustrationLearningDevelopment(props) {
 }
 var learning_and_development_default = IllustrationLearningDevelopment;
 
-// src/illustrations/business-plan.js
-import * as React60 from "react";
+// src/illustrations/business-plan.tsx
+import * as React61 from "react";
 function IllustrationBusinessPlan(props) {
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8511,24 +8546,24 @@ function IllustrationBusinessPlan(props) {
 }
 var business_plan_default = IllustrationBusinessPlan;
 
-// src/illustrations/loom-plans.js
-import * as React61 from "react";
+// src/illustrations/loom-plans.tsx
+import * as React62 from "react";
 function IllustrationLoomPlans(props) {
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.createElement(
       "path",
       {
         d: "M0 12.288L12.287 0v87.71h37.706L37.706 100H0v-87.71zM49.994 63.743l12.287-12.276v36.245h37.72L87.714 100h-37.72V63.743zM49.994 33.336l12.287-12.288v18.129h37.72L87.714 51.465h-37.72V33.336z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.createElement(
       "path",
       {
         d: "M49.993 12.288L62.28 0v9.064H100L87.713 21.353h-37.72v-9.065z",
@@ -8539,17 +8574,17 @@ function IllustrationLoomPlans(props) {
 }
 var loom_plans_default = IllustrationLoomPlans;
 
-// src/illustrations/collaborate-with-teammates.js
-import * as React62 from "react";
+// src/illustrations/collaborate-with-teammates.tsx
+import * as React63 from "react";
 function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8562,17 +8597,17 @@ function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
 }
 var collaborate_with_teammates_default = IllustrationCollaboratewithTeammatesSharedLibrary;
 
-// src/illustrations/option-grants.js
-import * as React63 from "react";
+// src/illustrations/option-grants.tsx
+import * as React64 from "react";
 function IllustrationOptionGrants(props) {
-  return /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React64.createElement(
       "path",
       {
         fill: "currentColor",
@@ -8583,17 +8618,17 @@ function IllustrationOptionGrants(props) {
 }
 var option_grants_default = IllustrationOptionGrants;
 
-// src/illustrations/community.js
-import * as React64 from "react";
+// src/illustrations/community.tsx
+import * as React65 from "react";
 function IllustrationCommunity(props) {
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React65.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8606,17 +8641,17 @@ function IllustrationCommunity(props) {
 }
 var community_default = IllustrationCommunity;
 
-// src/illustrations/community-alt.js
-import * as React65 from "react";
+// src/illustrations/community-alt.tsx
+import * as React66 from "react";
 function IllustrationCommunityAlt(props) {
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React66.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8629,17 +8664,17 @@ function IllustrationCommunityAlt(props) {
 }
 var community_alt_default = IllustrationCommunityAlt;
 
-// src/illustrations/parental-leave.js
-import * as React66 from "react";
+// src/illustrations/parental-leave.tsx
+import * as React67 from "react";
 function IllustrationParentalLeave(props) {
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React67.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React67.createElement(
       "path",
       {
         d: "M49.027 25.443a24.514 24.514 0 10-24.513 24.513V25.443h24.513zM75.486 49.956a24.513 24.513 0 10-24.513-24.513h24.513v24.513zM50.973 76.415a24.514 24.514 0 1024.513-24.513v24.513H50.973zM24.514 51.902a24.513 24.513 0 1024.513 24.513H24.514V51.902z",
@@ -8650,17 +8685,17 @@ function IllustrationParentalLeave(props) {
 }
 var parental_leave_default = IllustrationParentalLeave;
 
-// src/illustrations/content-limit.js
-import * as React67 from "react";
+// src/illustrations/content-limit.tsx
+import * as React68 from "react";
 function IllustrationContentLimit(props) {
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8673,17 +8708,17 @@ function IllustrationContentLimit(props) {
 }
 var content_limit_default = IllustrationContentLimit;
 
-// src/illustrations/pto.js
-import * as React68 from "react";
+// src/illustrations/pto.tsx
+import * as React69 from "react";
 function IllustrationPto(props) {
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 111",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8696,17 +8731,17 @@ function IllustrationPto(props) {
 }
 var pto_default = IllustrationPto;
 
-// src/illustrations/custom-branding.js
-import * as React69 from "react";
+// src/illustrations/custom-branding.tsx
+import * as React70 from "react";
 function IllustrationCustomBranding(props) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       "path",
       {
         d: "M64.657 63.942L19.983 19.267l-.708.707 44.708 44.708L9.227 33.067l-.5.866L63.4 65.5h-.063L2.407 49.176l-.26.966L59.475 65.5H0v3h55.604L1.889 82.89l.776 2.898 53.719-14.391L8.227 99.2l1.5 2.598 48.184-27.82-39.343 39.343.709.708-.002.001.708.708v-.002l.707.706 39.298-39.299-27.787 48.128 2.598 1.5 27.83-48.202-14.404 53.764 2.898.776L65.5 78.447V134h3V78.395l14.39 53.715.98-.262v.002l.966-.258v-.003l.953-.255-14.392-53.719L99.2 125.772l2.598-1.5-27.803-48.154 39.326 39.325.711-.711.007.007.707-.708-.007-.007.703-.702-39.325-39.326 48.154 27.803 1.5-2.598-48.157-27.804 53.719 14.391.776-2.897L78.395 68.5H134v-3H74.525l57.326-15.358-.259-.966L70.661 65.5h-.064l54.674-31.567-.5-.866-54.697 31.58 44.673-44.673-.707-.707-44.728 44.728 31.621-54.768-.866-.5-31.576 54.69 16.345-61.01-.966-.26L67.5 63.252V0h-1v63.15L50.157 2.148l-.966.258 16.368 61.098L33.933 8.727l-.866.5 31.59 54.715z",
@@ -8717,54 +8752,54 @@ function IllustrationCustomBranding(props) {
 }
 var custom_branding_default = IllustrationCustomBranding;
 
-// src/illustrations/record.js
-import * as React70 from "react";
+// src/illustrations/record.tsx
+import * as React71 from "react";
 function IllustrationRecord(props) {
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React70.createElement("g", { clipPath: "url(#Record_svg__clip0)", fill: "currentColor" }, /* @__PURE__ */ React70.createElement("path", { d: "M79.819 62.343c6.818-16.462-.999-35.334-17.46-42.153-16.463-6.82-35.336.998-42.155 17.46-6.819 16.462.998 35.335 17.46 42.154 16.463 6.819 35.335-.999 42.154-17.46zM53.659 0h-7.303v8.763h7.303V0zM40.498.773l-6.87 1.84 2.268 8.465 6.87-1.84L40.498.772zM28.003 4.978l-5.996 3.46 4.38 7.59 5.996-3.46-4.38-7.59zM17.048 12.274l-4.761 4.76 6.196 6.197 4.761-4.76-6.196-6.197zM8.34 22.174L5.07 27.84l7.588 4.381 3.271-5.666-7.588-4.381zM2.522 33.984L.878 40.121l8.464 2.268 1.644-6.137-8.464-2.268zM8.763 46.926H0v6.163h8.763v-6.163zM9.362 57.697L.898 59.965l1.595 5.953 8.464-2.268-1.595-5.953zM12.806 68.033l-7.589 4.382 2.987 5.173 7.589-4.382-2.987-5.173zM18.811 77.097l-6.196 6.197 4.09 4.09 6.196-6.197-4.09-4.09zM26.969 84.311L22.587 91.9l4.844 2.797 4.382-7.59-4.844-2.796zM36.721 89.14l-2.27 8.464 5.22 1.4 2.27-8.464-5.22-1.4zM52.607 91.237h-5.214V100h5.214v-8.763zM63.083 89.192l-4.839 1.296 2.268 8.464 4.839-1.296-2.268-8.464zM72.698 84.501l-4.173 2.41 4.381 7.59 4.174-2.41-4.382-7.59zM80.772 77.506L77.5 80.78l6.196 6.196 3.274-3.274-6.197-6.196zM86.813 68.694l-2.22 3.845 7.59 4.382 2.22-3.845-7.59-4.382zM90.385 58.633l-1.1 4.105 8.464 2.268 1.1-4.105-8.464-2.268zM100 47.962h-8.763v4.06H100v-4.06zM97.796 35.184l-8.464 2.267 1.002 3.739 8.464-2.268-1.002-3.738zM92.37 23.41l-7.589 4.381 1.84 3.188 7.59-4.382-1.84-3.187zM84.1 13.424l-6.197 6.195 2.467 2.469 6.198-6.195-2.467-2.469zM73.564 5.885l-4.383 7.588 2.858 1.65 4.383-7.587-2.858-1.651zM61.446 1.297l-2.27 8.465 3.005.805 2.27-8.464-3.005-.806z" })),
-    /* @__PURE__ */ React70.createElement("defs", null, /* @__PURE__ */ React70.createElement("clipPath", { id: "Record_svg__clip0" }, /* @__PURE__ */ React70.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
+    /* @__PURE__ */ React71.createElement("g", { clipPath: "url(#Record_svg__clip0)", fill: "currentColor" }, /* @__PURE__ */ React71.createElement("path", { d: "M79.819 62.343c6.818-16.462-.999-35.334-17.46-42.153-16.463-6.82-35.336.998-42.155 17.46-6.819 16.462.998 35.335 17.46 42.154 16.463 6.819 35.335-.999 42.154-17.46zM53.659 0h-7.303v8.763h7.303V0zM40.498.773l-6.87 1.84 2.268 8.465 6.87-1.84L40.498.772zM28.003 4.978l-5.996 3.46 4.38 7.59 5.996-3.46-4.38-7.59zM17.048 12.274l-4.761 4.76 6.196 6.197 4.761-4.76-6.196-6.197zM8.34 22.174L5.07 27.84l7.588 4.381 3.271-5.666-7.588-4.381zM2.522 33.984L.878 40.121l8.464 2.268 1.644-6.137-8.464-2.268zM8.763 46.926H0v6.163h8.763v-6.163zM9.362 57.697L.898 59.965l1.595 5.953 8.464-2.268-1.595-5.953zM12.806 68.033l-7.589 4.382 2.987 5.173 7.589-4.382-2.987-5.173zM18.811 77.097l-6.196 6.197 4.09 4.09 6.196-6.197-4.09-4.09zM26.969 84.311L22.587 91.9l4.844 2.797 4.382-7.59-4.844-2.796zM36.721 89.14l-2.27 8.464 5.22 1.4 2.27-8.464-5.22-1.4zM52.607 91.237h-5.214V100h5.214v-8.763zM63.083 89.192l-4.839 1.296 2.268 8.464 4.839-1.296-2.268-8.464zM72.698 84.501l-4.173 2.41 4.381 7.59 4.174-2.41-4.382-7.59zM80.772 77.506L77.5 80.78l6.196 6.196 3.274-3.274-6.197-6.196zM86.813 68.694l-2.22 3.845 7.59 4.382 2.22-3.845-7.59-4.382zM90.385 58.633l-1.1 4.105 8.464 2.268 1.1-4.105-8.464-2.268zM100 47.962h-8.763v4.06H100v-4.06zM97.796 35.184l-8.464 2.267 1.002 3.739 8.464-2.268-1.002-3.738zM92.37 23.41l-7.589 4.381 1.84 3.188 7.59-4.382-1.84-3.187zM84.1 13.424l-6.197 6.195 2.467 2.469 6.198-6.195-2.467-2.469zM73.564 5.885l-4.383 7.588 2.858 1.65 4.383-7.587-2.858-1.651zM61.446 1.297l-2.27 8.465 3.005.805 2.27-8.464-3.005-.806z" })),
+    /* @__PURE__ */ React71.createElement("defs", null, /* @__PURE__ */ React71.createElement("clipPath", { id: "Record_svg__clip0" }, /* @__PURE__ */ React71.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
   );
 }
 var record_default = IllustrationRecord;
 
-// src/illustrations/desktop-app-and-chrome-extension.js
-import * as React71 from "react";
+// src/illustrations/desktop-app-and-chrome-extension.tsx
+import * as React72 from "react";
 function IllustrationDesktopAppandChromeExtension(props) {
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React72.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React72.createElement(
       "path",
       {
         d: "M64.676 50.418L55.95.916l-1.164.207 8.727 49.502c.195-.042.384-.083.58-.119.194-.035.39-.059.584-.088zM44.664 3.828l-1.158.42L60.694 51.48c.378-.153.768-.29 1.158-.42L44.664 3.829zM34.058 8.656l-1.11.644 25.128 43.528c.36-.225.733-.443 1.111-.644L34.058 8.656zM24.444 15.243l-1.022.856L55.73 54.606c.33-.302.668-.586 1.022-.857L24.444 15.243zM16.117 23.403l-.892 1.058L53.73 56.769c.283-.366.579-.715.892-1.058L16.117 23.403zM9.336 32.88l-.715 1.241 43.534 25.135c.225-.425.461-.839.715-1.247L9.336 32.88zM4.295 43.387l-.508 1.394 47.24 17.194c.147-.473.318-.94.507-1.394L4.295 43.387zM1.153 54.606l-.266 1.519 49.502 8.727c.065-.509.153-1.017.266-1.513L1.153 54.606zM0 66.205v1.59h50.27a15.808 15.808 0 010-1.59H0zM50.375 69.076L.867 77.803l.296 1.66 49.508-8.726c-.066-.272-.119-.55-.166-.828a13.631 13.631 0 01-.13-.833zM3.746 89.102l.597 1.636 47.245-17.194a16.817 16.817 0 01-.591-1.636L3.747 89.102zM8.525 99.725l.893 1.548 43.534-25.135a16.699 16.699 0 01-.892-1.548L8.525 99.725zM15.086 109.361l1.182 1.413 38.518-32.32c-.42-.45-.816-.916-1.182-1.406L15.086 109.36zM23.207 117.715l1.448 1.217 32.32-38.518c-.503-.378-.993-.78-1.454-1.211l-32.314 38.512zM32.662 124.54l1.678.969 25.141-43.54c-.579-.29-1.14-.62-1.678-.975l-25.14 43.546zM43.152 129.623l1.873.679 17.2-47.25c-.638-.19-1.264-.42-1.873-.68l-17.2 47.251zM54.36 132.807l2.008.355 8.733-49.52a16.216 16.216 0 01-2.009-.354l-8.733 49.519zM65.951 134h2.092V83.718c-.703.047-1.4.042-2.092 0V134zM68.846 83.646l8.733 49.525 2.109-.372-8.733-49.525c-.343.082-.697.16-1.052.224-.348.06-.703.107-1.057.148zM88.883 130.337l2.063-.751-17.2-47.25c-.662.29-1.353.543-2.062.75l17.2 47.251zM99.528 125.585l1.944-1.123L76.325 80.91a16.63 16.63 0 01-1.944 1.123l25.147 43.552zM109.189 119.063l1.761-1.477-32.326-38.523c-.55.531-1.14 1.022-1.76 1.477l32.325 38.523zM117.575 110.967l1.506-1.796-38.53-32.332a16.83 16.83 0 01-1.506 1.797l38.53 32.331zM124.423 101.539l1.2-2.074-43.558-25.147a16.44 16.44 0 01-1.2 2.074l43.558 25.147zM129.54 91.069l.839-2.299-47.257-17.2c-.224.792-.508 1.56-.839 2.299l47.257 17.2zM132.764 79.867l.431-2.458-49.531-8.733c-.083.839-.23 1.66-.432 2.458l49.532 8.733zM133.999 68.272v-2.546h-50.3c.065.857.065 1.707.006 2.546H134zM83.666 65.383l49.543-8.732-.449-2.559-49.543 8.733a15.696 15.696 0 01.45 2.558zM130.415 45.33l-.904-2.493-47.269 17.205c.36.798.662 1.631.904 2.494l47.269-17.206zM125.7 34.671l-1.353-2.34-43.564 25.153a16.98 16.98 0 011.353 2.34L125.7 34.671zM119.213 24.988l-1.767-2.11-38.542 32.338c.644.65 1.235 1.353 1.773 2.103l38.536-32.331zM111.141 16.573l-2.145-1.802-32.338 38.542a17.328 17.328 0 012.145 1.802l32.338-38.542zM101.732 9.69l-2.47-1.424-25.159 43.576c.863.407 1.69.88 2.47 1.424L101.732 9.69zM74.07 51.817L91.28 4.537l-2.73-.993-17.188 47.227-.011.053c.939.255 1.849.585 2.718.993z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React72.createElement(
       "path",
       {
         d: "M71.346 50.825l.017-.047 8.728-49.496-2.908-.514-8.662 49.1v.455a16.15 16.15 0 012.825.502z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React72.createElement(
       "path",
       {
         d: "M71.354 50.825l.011-.053-.017.047c0 .006.006.006.006.006zM68.522 49.868V0h-3.043v50.323a16.573 16.573 0 012.966-.012l.077-.443z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React72.createElement(
       "path",
       {
         d: "M68.52 50.317v-.449l-.077.444c.024 0 .053.005.077.005z",
@@ -8775,17 +8810,17 @@ function IllustrationDesktopAppandChromeExtension(props) {
 }
 var desktop_app_and_chrome_extension_default = IllustrationDesktopAppandChromeExtension;
 
-// src/illustrations/remote-first.js
-import * as React72 from "react";
+// src/illustrations/remote-first.tsx
+import * as React73 from "react";
 function IllustrationRemoteFirst(props) {
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.createElement(
       "path",
       {
         d: "M55 105c27.615 0 50-22.386 50-50S82.615 5 55 5C27.386 5 5 27.386 5 55s22.386 50 50 50z",
@@ -8794,7 +8829,7 @@ function IllustrationRemoteFirst(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.createElement(
       "path",
       {
         d: "M60.849 5.33c13.693 12.157 22.34 29.89 22.34 49.653 0 19.744-8.63 37.495-22.322 49.652M49.131 5.33c-13.693 12.157-22.34 29.89-22.34 49.653 0 19.744 8.629 37.495 22.322 49.652",
@@ -8803,7 +8838,7 @@ function IllustrationRemoteFirst(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.createElement(
       "path",
       {
         d: "M97.467 26.024C86.589 36.9 71.58 43.61 54.999 43.61c-16.07 0-30.658-6.307-41.444-16.6M97.467 83.958C86.589 73.08 71.58 66.37 54.999 66.37c-16.07 0-30.658 6.307-41.444 16.6M104.981 55H5M55 104.982V5",
@@ -8816,24 +8851,24 @@ function IllustrationRemoteFirst(props) {
 }
 var remote_first_default = IllustrationRemoteFirst;
 
-// src/illustrations/device-compatibility.js
-import * as React73 from "react";
+// src/illustrations/device-compatibility.tsx
+import * as React74 from "react";
 function IllustrationDeviceCompatibility(props) {
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React74.createElement(
       "path",
       {
         d: "M55 0C24.626 0 0 24.626 0 55s24.626 55 55 55 55-24.626 55-55S85.374 0 55 0zm0 109.525L.49 55 55 .49l54.525 54.525L55 109.525z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React74.createElement(
       "path",
       {
         d: "M27.923 27.923v54.139H82.06V27.923H27.923zm27.076 52.074c-13.798 0-24.982-11.184-24.982-24.982S41.201 30.032 55 30.032c13.799 0 24.983 11.185 24.983 24.983 0 13.783-11.184 24.982-24.983 24.982z",
@@ -8844,18 +8879,18 @@ function IllustrationDeviceCompatibility(props) {
 }
 var device_compatibility_default = IllustrationDeviceCompatibility;
 
-// src/illustrations/roadmap.js
-import * as React74 from "react";
+// src/illustrations/roadmap.tsx
+import * as React75 from "react";
 function IllustrationRoadmap(props) {
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React75.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React74.createElement("path", { d: "M100 100H0V0h100v100zM10 90h80V10H10v80z", fill: "currentColor" }),
-    /* @__PURE__ */ React74.createElement(
+    /* @__PURE__ */ React75.createElement("path", { d: "M100 100H0V0h100v100zM10 90h80V10H10v80z", fill: "currentColor" }),
+    /* @__PURE__ */ React75.createElement(
       "path",
       {
         d: "M50.008 39.806L80 54v-9.806L50.008 30 20 44.194V54l30.008-14.194zM80 20H20v10h60V20z",
@@ -8866,17 +8901,17 @@ function IllustrationRoadmap(props) {
 }
 var roadmap_default = IllustrationRoadmap;
 
-// src/illustrations/downgrade.js
-import * as React75 from "react";
+// src/illustrations/downgrade.tsx
+import * as React76 from "react";
 function IllustrationDowngrade(props) {
-  return /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React76.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8889,17 +8924,17 @@ function IllustrationDowngrade(props) {
 }
 var downgrade_default = IllustrationDowngrade;
 
-// src/illustrations/screenshot.js
-import * as React76 from "react";
+// src/illustrations/screenshot.tsx
+import * as React77 from "react";
 function IllustrationScreenshot(props) {
-  return /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React77.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8912,17 +8947,17 @@ function IllustrationScreenshot(props) {
 }
 var screenshot_default = IllustrationScreenshot;
 
-// src/illustrations/embrace-the-weird.js
-import * as React77 from "react";
+// src/illustrations/embrace-the-weird.tsx
+import * as React78 from "react";
 function IllustrationEmbracetheWeird(props) {
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8935,41 +8970,41 @@ function IllustrationEmbracetheWeird(props) {
 }
 var embrace_the_weird_default = IllustrationEmbracetheWeird;
 
-// src/illustrations/share-with-your-team.js
-import * as React78 from "react";
+// src/illustrations/share-with-your-team.tsx
+import * as React79 from "react";
 function IllustrationSharewithYourTeamTeamLibrary(props) {
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React79.createElement(
       "g",
       {
         clipPath: "url(#Share_with_Your_Team_(Team_Library)_svg__clip0)",
         fill: "currentColor"
       },
-      /* @__PURE__ */ React78.createElement("path", { d: "M33.33 24.946V8.384L24.946 0v24.946H0l8.384 8.384H33.33v-8.384zM58.286 33.33h8.385V8.384L58.286 0v24.946H33.331l8.394 8.384h16.561z" }),
-      /* @__PURE__ */ React78.createElement("path", { d: "M100 8.384L91.614 0v24.946H66.67l8.385 8.384H100V8.384zM33.33 58.286V41.724l-8.384-8.394v24.956H0l8.384 8.384H33.33v-8.384zM33.33 58.286l8.395 8.384H66.67V41.724l-8.385-8.394v24.956H33.331zM66.67 58.286l8.384 8.384H100V41.724l-8.385-8.394v24.956H66.67zM24.946 66.67v24.946H0L8.384 100H33.33V75.054l-8.384-8.384zM58.286 66.67v24.946H33.331L41.725 100H66.67V75.054l-8.385-8.384zM66.67 91.616L75.053 100h24.945V75.054l-8.384-8.384v24.946H66.67z" })
+      /* @__PURE__ */ React79.createElement("path", { d: "M33.33 24.946V8.384L24.946 0v24.946H0l8.384 8.384H33.33v-8.384zM58.286 33.33h8.385V8.384L58.286 0v24.946H33.331l8.394 8.384h16.561z" }),
+      /* @__PURE__ */ React79.createElement("path", { d: "M100 8.384L91.614 0v24.946H66.67l8.385 8.384H100V8.384zM33.33 58.286V41.724l-8.384-8.394v24.956H0l8.384 8.384H33.33v-8.384zM33.33 58.286l8.395 8.384H66.67V41.724l-8.385-8.394v24.956H33.331zM66.67 58.286l8.384 8.384H100V41.724l-8.385-8.394v24.956H66.67zM24.946 66.67v24.946H0L8.384 100H33.33V75.054l-8.384-8.384zM58.286 66.67v24.946H33.331L41.725 100H66.67V75.054l-8.385-8.384zM66.67 91.616L75.053 100h24.945V75.054l-8.384-8.384v24.946H66.67z" })
     ),
-    /* @__PURE__ */ React78.createElement("defs", null, /* @__PURE__ */ React78.createElement("clipPath", { id: "Share_with_Your_Team_(Team_Library)_svg__clip0" }, /* @__PURE__ */ React78.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
+    /* @__PURE__ */ React79.createElement("defs", null, /* @__PURE__ */ React79.createElement("clipPath", { id: "Share_with_Your_Team_(Team_Library)_svg__clip0" }, /* @__PURE__ */ React79.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
   );
 }
 var share_with_your_team_default = IllustrationSharewithYourTeamTeamLibrary;
 
-// src/illustrations/enterprise-plan.js
-import * as React79 from "react";
+// src/illustrations/enterprise-plan.tsx
+import * as React80 from "react";
 function IllustrationEnterprisePlan(props) {
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React80.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React79.createElement(
+    /* @__PURE__ */ React80.createElement(
       "path",
       {
         fill: "currentColor",
@@ -8980,31 +9015,31 @@ function IllustrationEnterprisePlan(props) {
 }
 var enterprise_plan_default = IllustrationEnterprisePlan;
 
-// src/illustrations/share.js
-import * as React80 from "react";
+// src/illustrations/share.tsx
+import * as React81 from "react";
 function IllustrationShare(props) {
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React81.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.createElement(
       "path",
       {
         d: "M34.27 50.002v15.73H50c-8.69 0-15.73-7.04-15.73-15.73zM65.73 50.002v-15.73H50c8.69 0 15.73 7.04 15.73 15.73zM50 34.272H34.27v15.73c0-8.69 7.04-15.73 15.73-15.73z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.createElement(
       "path",
       {
         d: "M50 65.732h15.73v-15.73c0 8.69-7.04 15.73-15.73 15.73z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.createElement(
       "path",
       {
         d: "M0 .002v100h100v-100H0zm81.46 10c3.48 1.79 6.2 4.84 7.57 8.54h-7.57v-8.54zm-15.73 0c6.1 0 11.38 3.47 13.99 8.54H65.73v-8.54zm-15.73 0c6.1 0 11.38 3.47 13.99 8.54H36.01c2.61-5.07 7.89-8.54 13.99-8.54zm-15.73 0v8.54H20.28c2.61-5.07 7.89-8.54 13.99-8.54zm-15.73 80c-3.48-1.79-6.2-4.84-7.57-8.54h7.57v8.54zm0-10.28c-5.07-2.61-8.54-7.89-8.54-13.99h8.54v13.99zm0-15.73c-5.07-2.61-8.54-7.89-8.54-13.99 0-6.1 3.47-11.38 8.54-13.99v27.98zm0-29.72H10c0-6.1 3.47-11.38 8.54-13.99v13.99zm0-15.73h-7.57c1.37-3.7 4.09-6.75 7.57-8.54v8.54zm62.92 71.46v-8.54h7.57c-1.37 3.7-4.09 6.75-7.57 8.54zm0-10.28v-13.99H90c0 6.1-3.47 11.38-8.54 13.99zm0-29.72v-13.99c5.07 2.61 8.54 7.89 8.54 13.99 0 6.1-3.47 11.38-8.54 13.99v-13.99c0 8.69-7.04 15.73-15.73 15.73h15.73c0 8.69-7.04 15.73-15.73 15.73h13.99c-2.61 5.07-7.89 8.54-13.99 8.54v-8.54-15.73c0 8.69-7.04 15.73-15.73 15.73h13.99c-2.61 5.07-7.89 8.54-13.99 8.54-6.1 0-11.38-3.47-13.99-8.54H50c-8.69 0-15.73-7.04-15.73-15.73v24.27c-6.1 0-11.38-3.47-13.99-8.54h13.99c-8.69 0-15.73-7.04-15.73-15.73h15.73c-8.69 0-15.73-7.04-15.73-15.73 0-8.69 7.04-15.73 15.73-15.73H18.54c0-8.69 7.04-15.73 15.73-15.73v15.73c0-8.69 7.04-15.73 15.73-15.73 8.69 0 15.73 7.04 15.73 15.73v-15.73c8.69 0 15.73 7.04 15.73 15.73v-13.99c5.07 2.61 8.54 7.89 8.54 13.99H65.73c8.69 0 15.73 7.04 15.73 15.73z",
@@ -9015,40 +9050,40 @@ function IllustrationShare(props) {
 }
 var share_default = IllustrationShare;
 
-// src/illustrations/faq-and-security.js
-import * as React81 from "react";
+// src/illustrations/faq-and-security.tsx
+import * as React82 from "react";
 function IllustrationFaQandSecurity(props) {
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(
       "path",
       {
         d: "M50 70c11.046 0 20-8.954 20-20s-8.954-20-20-20-20 8.954-20 20 8.954 20 20 20z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React81.createElement("path", { d: "M31 50V0H0v100h99.999V69H31V50z", fill: "currentColor" }),
-    /* @__PURE__ */ React81.createElement("path", { d: "M100 66V0H34v31h35v35h31z", fill: "currentColor" })
+    /* @__PURE__ */ React82.createElement("path", { d: "M31 50V0H0v100h99.999V69H31V50z", fill: "currentColor" }),
+    /* @__PURE__ */ React82.createElement("path", { d: "M100 66V0H34v31h35v35h31z", fill: "currentColor" })
   );
 }
 var faq_and_security_default = IllustrationFaQandSecurity;
 
-// src/illustrations/starred.js
-import * as React82 from "react";
+// src/illustrations/starred.tsx
+import * as React83 from "react";
 function IllustrationStarred(props) {
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.createElement(
       "path",
       {
         d: "M38.963 0C17.45 0 0 18.136 0 40.495v8.507h9.444C30.967 49.002 48 30.41 48 8.05V.002L38.963 0zM100.002 38.965c0-21.513-18.136-38.963-40.495-38.963H51v9.444c0 21.523 18.592 38.556 40.951 38.556H100l.002-9.037zM61.039 100.004c21.513 0 38.963-18.136 38.963-40.495v-8.507h-9.444c-21.523 0-38.556 18.592-38.556 40.951v8.049l9.037.002zM0 61.039c0 21.513 18.136 38.963 40.495 38.963h8.507v-9.444c0-21.523-18.592-38.556-40.952-38.556H.002L0 61.039z",
@@ -9059,17 +9094,17 @@ function IllustrationStarred(props) {
 }
 var starred_default = IllustrationStarred;
 
-// src/illustrations/five-minute-limit.js
-import * as React83 from "react";
+// src/illustrations/five-minute-limit.tsx
+import * as React84 from "react";
 function Illustration5MinuteLimit(props) {
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React84.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9082,17 +9117,17 @@ function Illustration5MinuteLimit(props) {
 }
 var five_minute_limit_default = Illustration5MinuteLimit;
 
-// src/illustrations/starter-plus-plan.js
-import * as React84 from "react";
+// src/illustrations/starter-plus-plan.tsx
+import * as React85 from "react";
 function IllustrationStarterPlusPlan(props) {
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React85.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9105,17 +9140,17 @@ function IllustrationStarterPlusPlan(props) {
 }
 var starter_plus_plan_default = IllustrationStarterPlusPlan;
 
-// src/illustrations/getting-started.js
-import * as React85 from "react";
+// src/illustrations/getting-started.tsx
+import * as React86 from "react";
 function IllustrationGettingStarted(props) {
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 106 106",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       "path",
       {
         d: "M53 101c26.51 0 48-21.49 48-48S79.51 5 53 5 5 26.49 5 53s21.49 48 48 48z",
@@ -9124,7 +9159,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       "path",
       {
         d: "M53 100.986c26.51 0 48-14.563 48-32.527 0-17.965-21.49-32.528-48-32.528S5 50.494 5 68.46c0 17.964 21.49 32.527 48 32.527z",
@@ -9133,7 +9168,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       "path",
       {
         d: "M53 100.998c26.51 0 48-8.682 48-19.39 0-10.71-21.49-19.391-48-19.391S5 70.898 5 81.607c0 10.71 21.49 19.391 48 19.391z",
@@ -9142,7 +9177,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       "path",
       {
         d: "M53 100.984c26.51 0 48-3.908 48-8.728S79.51 83.53 53 83.53 5 87.436 5 92.256s21.49 8.728 48 8.728z",
@@ -9155,24 +9190,24 @@ function IllustrationGettingStarted(props) {
 }
 var getting_started_default = IllustrationGettingStarted;
 
-// src/illustrations/strong-upload-speed.js
-import * as React86 from "react";
+// src/illustrations/strong-upload-speed.tsx
+import * as React87 from "react";
 function IllustrationStrongUploadSpeed(props) {
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React87.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 111 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React87.createElement(
       "path",
       {
         d: "M.223 57.064l-.208-.356a55.069 55.069 0 002.244 13.991l44.404-40.904-46.44 27.27zM3.27 73.804C10.953 94.924 31.208 110 55 110c23.926 0 44.285-15.269 51.865-36.582l-51.582-47.53L3.27 73.804zm88.867-9.358v24.36L64.838 63.584v39.003a1.49 1.49 0 01-1.486 1.486H47.287a1.49 1.49 0 01-1.486-1.486V63.585l-27.388 25.22V64.446l36.914-33.983 36.81 33.983zM107.861 70.299a54.916 54.916 0 002.125-13.442L63.873 29.78 107.861 70.3zM63.115 25.873l46.886 27.537c-.148-5.228-1.01-10.293-2.526-15.06l-44.36-12.477zM2.482 38.543C.966 43.356.119 48.465 0 53.753l47.436-27.864L2.482 38.543z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React87.createElement(
       "path",
       {
         d: "M106.241 34.934C98.216 14.482 78.302 0 55.001 0 31.625 0 11.68 14.57 3.7 35.112l51.582-14.511 50.958 14.333z",
@@ -9183,17 +9218,17 @@ function IllustrationStrongUploadSpeed(props) {
 }
 var strong_upload_speed_default = IllustrationStrongUploadSpeed;
 
-// src/illustrations/growth-through-empathy.js
-import * as React87 from "react";
+// src/illustrations/growth-through-empathy.tsx
+import * as React88 from "react";
 function IllustrationGrowththroughEmpathy(props) {
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 104 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.createElement(
       "path",
       {
         d: "M98.75 100.001c0-25.889-20.986-46.876-46.874-46.876C25.987 53.125 5 74.112 5 100.001",
@@ -9202,7 +9237,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.createElement(
       "path",
       {
         d: "M16.704 100.001c0-19.416 15.74-35.171 35.172-35.171 19.43 0 35.171 15.74 35.171 35.171",
@@ -9211,7 +9246,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.createElement(
       "path",
       {
         d: "M28.213 100.001c0-13.07 10.593-23.648 23.648-23.648 13.054 0 23.662 10.579 23.662 23.648",
@@ -9220,7 +9255,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.createElement(
       "path",
       {
         d: "M39.736 100c0-6.692 5.432-12.124 12.124-12.124 6.693 0 12.124 5.432 12.124 12.124M5 0c0 25.889 20.987 46.875 46.875 46.875C77.764 46.875 98.751 25.89 98.751 0",
@@ -9229,7 +9264,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.createElement(
       "path",
       {
         d: "M87.047 0c0 19.416-15.74 35.171-35.172 35.171-19.43 0-35.171-15.74-35.171-35.171",
@@ -9238,7 +9273,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.createElement(
       "path",
       {
         d: "M75.538 0c0 13.07-10.593 23.648-23.648 23.648-13.054 0-23.662-10.579-23.662-23.648",
@@ -9247,7 +9282,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.createElement(
       "path",
       {
         d: "M64.015 0c0 6.693-5.432 12.124-12.124 12.124S39.767 6.693 39.767.002",
@@ -9260,17 +9295,17 @@ function IllustrationGrowththroughEmpathy(props) {
 }
 var growth_through_empathy_default = IllustrationGrowththroughEmpathy;
 
-// src/illustrations/troubleshooting.js
-import * as React88 from "react";
+// src/illustrations/troubleshooting.tsx
+import * as React89 from "react";
 function IllustrationTroubleshooting(props) {
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React89.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement(
       "path",
       {
         d: "M5 55h99.984c0 27.61-22.375 50-50 50S5 82.61 5 55z",
@@ -9280,7 +9315,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement(
       "path",
       {
         d: "M55 105c27.614 0 50-22.386 50-50S82.614 5 55 5 5 27.386 5 55s22.386 50 50 50z",
@@ -9289,7 +9324,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement(
       "path",
       {
         d: "M23.534 55C23.534 37.62 37.62 23.534 55 23.534c17.382 0 31.466 14.085 31.466 31.466",
@@ -9298,7 +9333,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement(
       "path",
       {
         d: "M42.053 55c0-7.138 5.794-12.932 12.932-12.932 7.138 0 12.932 5.794 12.932 12.932",
@@ -9311,17 +9346,17 @@ function IllustrationTroubleshooting(props) {
 }
 var troubleshooting_default = IllustrationTroubleshooting;
 
-// src/illustrations/health-plans.js
-import * as React89 from "react";
+// src/illustrations/health-plans.tsx
+import * as React90 from "react";
 function IllustrationHealthPlans(props) {
-  return /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React90.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React90.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9334,17 +9369,17 @@ function IllustrationHealthPlans(props) {
 }
 var health_plans_default = IllustrationHealthPlans;
 
-// src/illustrations/upgrade.js
-import * as React90 from "react";
+// src/illustrations/upgrade.tsx
+import * as React91 from "react";
 function IllustrationUpgrade(props) {
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React91.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React90.createElement(
+    /* @__PURE__ */ React91.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9357,17 +9392,17 @@ function IllustrationUpgrade(props) {
 }
 var upgrade_default = IllustrationUpgrade;
 
-// src/illustrations/how-to-use-loom.js
-import * as React91 from "react";
+// src/illustrations/how-to-use-loom.tsx
+import * as React92 from "react";
 function IllustrationHowtoUseLoom(props) {
-  return /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React92.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "path",
       {
         d: "M61.125 97.536H48.768v12.373h12.357V97.536zM81.608 88.743l-10.701 6.179 6.186 10.714 10.701-6.178-6.186-10.715zM94.92 70.897l-6.178 10.7 10.715 6.187 6.178-10.701-10.714-6.186zM89.445 61.127V48.77H78.014l9.91-5.724-6.178-10.71-9.895 5.724 5.724-9.895-10.71-6.179-5.724 9.895V20.45H48.769V31.88l-5.724-9.895-10.71 6.179 5.723 9.91-9.91-5.723-6.179 10.71 9.91 5.724H20.45v12.356h11.43l-9.91 5.724 6.179 10.71 9.91-5.723-5.723 9.91 10.71 6.178 5.724-9.91v11.431h12.356V78.032l5.724 9.91 10.71-6.178-5.724-9.895 9.895 5.724 6.179-10.71-9.91-5.724h11.447v-.031zM54.947 71.413c-9.095 0-16.465-7.37-16.465-16.465 0-9.095 7.37-16.465 16.465-16.465 9.095 0 16.465 7.37 16.465 16.465 0 9.095-7.37 16.465-16.465 16.465zM109.91 48.77H97.538v12.356h12.372V48.77zM99.46 22.114l-10.714 6.187L94.925 39l10.714-6.186-6.178-10.7zM77.082 4.276L70.896 14.99l10.701 6.179 6.186-10.715-10.7-6.178zM61.125 0H48.768v12.373h12.357V0zM32.825 4.281L22.124 10.46l6.186 10.714 10.701-6.178-6.186-10.715zM10.449 22.127L4.27 32.828l10.714 6.186 6.178-10.7-10.714-6.187zM12.373 48.77H0v12.356h12.373V48.77zM14.99 70.881L4.274 77.067l6.178 10.701 10.715-6.186-6.179-10.7zM28.311 88.746L22.125 99.46l10.701 6.179 6.186-10.715-10.7-6.178z",
@@ -9378,17 +9413,17 @@ function IllustrationHowtoUseLoom(props) {
 }
 var how_to_use_loom_default = IllustrationHowtoUseLoom;
 
-// src/illustrations/upload-drag-and-drop.js
-import * as React92 from "react";
+// src/illustrations/upload-drag-and-drop.tsx
+import * as React93 from "react";
 function IllustrationUploadDragAndDrop(props) {
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React93.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "path",
       {
         d: "M100 38.086V0H61.914v9.93h21.132L54.963 38.013V16.88h-9.93v21.132L16.951 9.93h21.135V0H0v38.086h9.93V16.951l28.083 28.082H16.88v9.93h21.132L9.93 83.046V61.914H0V100h38.086v-9.93H16.951l28.082-28.086v21.135h9.93V61.984L83.046 90.07H61.914V100H100V61.914h-9.93v21.132L61.987 54.963H83.12v-9.93H61.987L90.07 16.951v21.135H100z",
@@ -9399,17 +9434,17 @@ function IllustrationUploadDragAndDrop(props) {
 }
 var upload_drag_and_drop_default = IllustrationUploadDragAndDrop;
 
-// src/illustrations/use-cases.js
-import * as React93 from "react";
+// src/illustrations/use-cases.tsx
+import * as React94 from "react";
 function IllustrationUseCases(props) {
-  return /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React94.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React94.createElement(
       "path",
       {
         d: "M0 0v100h100V0H0zm90 90H61.91l20.87-12.52L90 89.52V90zm0-71.25H29.01L90 26.56v8.82l-42.3-5.42L90 42.3v9.12l-27.61-8.05L90 56.78v9.73l-15.29-7.42L90 71.34v11.22L76.02 71.35 61.06 90H49.84l24.82-30.94-8.62-4.19L48.98 90h-9.73l22.71-46.76-9.21-2.68L38.34 90h-9.12l17.53-60.15-10.48-1.35L28.4 90h-8.82l9.12-71.25h-9.94V90H10V10h80v8.75z",
@@ -9420,17 +9455,17 @@ function IllustrationUseCases(props) {
 }
 var use_cases_default = IllustrationUseCases;
 
-// src/illustrations/invite-members.js
-import * as React94 from "react";
+// src/illustrations/invite-members.tsx
+import * as React95 from "react";
 function IllustrationInviteMembers(props) {
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React95.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9443,46 +9478,46 @@ function IllustrationInviteMembers(props) {
 }
 var invite_members_default = IllustrationInviteMembers;
 
-// src/illustrations/wellness.js
-import * as React95 from "react";
+// src/illustrations/wellness.tsx
+import * as React96 from "react";
 function IllustrationWellness(props) {
-  return /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React95.createElement(
+    /* @__PURE__ */ React96.createElement(
       "path",
       {
         d: "M66.667.929a33.333 33.333 0 010 66.666V.93zM0 34.263a33.333 33.333 0 0166.667 0H0zM33.333 100.929a33.338 33.338 0 01-23.57-9.763 33.333 33.333 0 0123.57-56.903v66.666z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React95.createElement(
+    /* @__PURE__ */ React96.createElement(
       "path",
       {
         d: "M99.999 67.596a33.332 33.332 0 01-64.13 12.756 33.332 33.332 0 01-2.537-12.756h66.667zM33.334.93H.001v33.333h33.333z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React95.createElement("path", { fill: "currentColor", d: "M100 67.595H66.667v33.333H100z" })
+    /* @__PURE__ */ React96.createElement("path", { fill: "currentColor", d: "M100 67.595H66.667v33.333H100z" })
   );
 }
 var wellness_default = IllustrationWellness;
 
-// src/illustrations/comments.js
-import * as React96 from "react";
+// src/illustrations/comments.tsx
+import * as React97 from "react";
 function IllustrationComments(props) {
-  return /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React97.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9491,7 +9526,7 @@ function IllustrationComments(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement(
       "path",
       {
         fill: "currentColor",
@@ -9502,17 +9537,17 @@ function IllustrationComments(props) {
 }
 var comments_default = IllustrationComments;
 
-// src/illustrations/folders-empty-state-mobile.js
-import * as React97 from "react";
+// src/illustrations/folders-empty-state-mobile.tsx
+import * as React98 from "react";
 function IllutrationFoldersEmptyStateMobile(props) {
-  return /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React98.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React98.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9521,7 +9556,7 @@ function IllutrationFoldersEmptyStateMobile(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React98.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9534,24 +9569,24 @@ function IllutrationFoldersEmptyStateMobile(props) {
 }
 var folders_empty_state_mobile_default = IllutrationFoldersEmptyStateMobile;
 
-// src/illustrations/help-ios.js
-import * as React98 from "react";
+// src/illustrations/help-ios.tsx
+import * as React99 from "react";
 function IllustrationHelpIos(props) {
-  return /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React99.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React98.createElement(
+    /* @__PURE__ */ React99.createElement(
       "path",
       {
         d: "M22.8 12c5.965 0 10.8 4.835 10.8 10.8 0 .254-.008.505-.026.754C38.542 16.58 46.912 12 56.4 12 71.643 12 84 23.82 84 38.4c0 14.58-12.357 26.4-27.6 26.4-5.744 0-11.078-1.678-15.496-4.55A15.527 15.527 0 0143.2 68.4c0 8.616-6.984 15.6-15.6 15.6C18.985 84 12 77.016 12 68.4s6.985-15.6 15.6-15.6c2.444 0 4.757.562 6.816 1.564C30.892 49.93 28.8 44.399 28.8 38.4c0-2.6.393-5.11 1.125-7.483A10.76 10.76 0 0122.8 33.6c-5.964 0-10.8-4.835-10.8-10.8C12 16.835 16.836 12 22.8 12z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React98.createElement(
+    /* @__PURE__ */ React99.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9564,18 +9599,18 @@ function IllustrationHelpIos(props) {
 }
 var help_ios_default = IllustrationHelpIos;
 
-// src/illustrations/my-videos-empty-state-mobile.js
-import * as React99 from "react";
+// src/illustrations/my-videos-empty-state-mobile.tsx
+import * as React100 from "react";
 function IllustrationMyVideosEmptyStateMobile(props) {
-  return /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React100.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React99.createElement("path", { d: "M96 0H0v96h96V0zM84 12v72H12V12h72z", fill: "currentColor" }),
-    /* @__PURE__ */ React99.createElement(
+    /* @__PURE__ */ React100.createElement("path", { d: "M96 0H0v96h96V0zM84 12v72H12V12h72z", fill: "currentColor" }),
+    /* @__PURE__ */ React100.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9588,17 +9623,17 @@ function IllustrationMyVideosEmptyStateMobile(props) {
 }
 var my_videos_empty_state_mobile_default = IllustrationMyVideosEmptyStateMobile;
 
-// src/illustrations/recents-empty-state-mobile.js
-import * as React100 from "react";
+// src/illustrations/recents-empty-state-mobile.tsx
+import * as React101 from "react";
 function IllustrationRecentsEmptyStateMobile(props) {
-  return /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React101.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React100.createElement(
+    /* @__PURE__ */ React101.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9611,17 +9646,17 @@ function IllustrationRecentsEmptyStateMobile(props) {
 }
 var recents_empty_state_mobile_default = IllustrationRecentsEmptyStateMobile;
 
-// src/illustrations/chrome-notifications-empty-state.js
-import * as React101 from "react";
+// src/illustrations/chrome-notifications-empty-state.tsx
+import * as React102 from "react";
 function IllustrationChromeNotificationsEmptyState(props) {
-  return /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React102.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement(
       "circle",
       {
         cx: 15.84,
@@ -9631,7 +9666,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement(
       "path",
       {
         d: "M59.52 15.84c0 5.963-5.022 11.04-11.52 11.04-6.498 0-11.52-5.077-11.52-11.04C36.48 9.877 41.502 4.8 48 4.8c6.498 0 11.52 5.077 11.52 11.04z",
@@ -9639,8 +9674,8 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React101.createElement("circle", { cx: 80.16, cy: 15.84, r: 15.84, fill: "currentColor" }),
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement("circle", { cx: 80.16, cy: 15.84, r: 15.84, fill: "currentColor" }),
+    /* @__PURE__ */ React102.createElement(
       "path",
       {
         d: "M26.88 48c0 6.498-5.077 11.52-11.04 11.52C9.877 59.52 4.8 54.498 4.8 48c0-6.498 5.077-11.52 11.04-11.52 5.963 0 11.04 5.022 11.04 11.52z",
@@ -9648,7 +9683,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement(
       "circle",
       {
         cx: 48,
@@ -9658,7 +9693,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement(
       "path",
       {
         d: "M91.2 48c0 6.498-5.077 11.52-11.04 11.52-5.963 0-11.04-5.022-11.04-11.52 0-6.498 5.077-11.52 11.04-11.52 5.963 0 11.04 5.022 11.04 11.52z",
@@ -9666,7 +9701,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement(
       "circle",
       {
         cx: 15.84,
@@ -9676,7 +9711,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement(
       "path",
       {
         d: "M59.52 80.16c0 5.963-5.022 11.04-11.52 11.04-6.498 0-11.52-5.077-11.52-11.04 0-5.963 5.022-11.04 11.52-11.04 6.498 0 11.52 5.077 11.52 11.04z",
@@ -9684,7 +9719,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React101.createElement(
+    /* @__PURE__ */ React102.createElement(
       "circle",
       {
         cx: 80.16,