@loomhq/lens 12.10.0 → 12.12.0

package/dist/cjs/index.js

@@ -124,6 +124,7 @@ __export(index_exports, {
   IllustrationUseCases: () => use_cases_default,
   IllustrationWellness: () => wellness_default,
   IllutrationFoldersEmptyStateMobile: () => folders_empty_state_mobile_default,
+  Indicator: () => indicator_default,
   JustifyContentRules: () => JustifyContentRules,
   Layout: () => layout_default,
   Link: () => link_default,
@@ -259,7 +260,7 @@ __export(index_exports, {
   widthRules: () => widthRules
 });
 module.exports = __toCommonJS(index_exports);
-var import_react62 = require("@emotion/react");
+var import_react64 = require("@emotion/react");
 
 // src/colors.ts
 var percent = (number, percentage) => Math.round(number * percentage / 100);
@@ -281,7 +282,6 @@ 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;
@@ -289,11 +289,11 @@ 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 },
@@ -324,7 +324,6 @@ 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,
@@ -406,6 +405,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,
@@ -522,9 +528,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" },
@@ -586,6 +592,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,
@@ -748,7 +761,7 @@ var getColorValue = (color) => {
   }
 };
 
-// src/hooks/use-media.js
+// src/hooks/use-media.ts
 var import_debounce = __toESM(require("lodash/debounce"));
 var import_react = __toESM(require("react"));
 function useMedia(queries, values, defaultValue) {
@@ -913,7 +926,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});
@@ -1078,15 +1091,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
 var import_styled = __toESM(require("@emotion/styled"));
 var import_react2 = __toESM(require("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.`;
@@ -1222,7 +1235,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);
@@ -1687,7 +1700,7 @@ var accessibilityRules = [
   }
 ];
 
-// src/css-utilities/generate-utilities.js
+// src/css-utilities/generate-utilities.ts
 var separator = "\\:";
 var allRules = [
   ...colorRules,
@@ -2088,7 +2101,7 @@ var avatar_default = Avatar;
 // src/components/base-styles/base-styles.tsx
 var import_react4 = require("@emotion/react");
 var import_react5 = __toESM(require("react"));
-var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body", documentElement = "html") => {
+var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
   return `
     ${rootElement} {
       font-size: 100%;
@@ -2119,40 +2132,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-color-highlightHover: hsla(215, 80%, 48%, 0.3);
-      --lns-color-highlightActive: hsla(215, 80%, 48%, 0.45);
-
-      --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__ */ import_react5.default.createElement(import_react4.Global, { styles: (0, import_react4.css)(buildGlobalStylesheet()) });
@@ -2396,6 +2375,21 @@ var statusStyles = (props) => ({
     border: none;
   `
 });
+var widthStyles = (props) => ({
+  auto: import_react9.css`
+    display: inline-flex;
+    min-width: ${sizesStyles[props.size].height};
+  `,
+  full: import_react9.css`
+    display: flex;
+    width: 100%;
+  `,
+  maxContent: import_react9.css`
+    display: inline-flex;
+    width: max-content;
+    min-width: max-content;
+  `
+});
 var iconGap = u(1);
 var ButtonWrapper = import_styled5.default.button`
   appearance: none;
@@ -2412,10 +2406,10 @@ var ButtonWrapper = import_styled5.default.button`
   white-space: nowrap;
   ${getFontWeight("bold")};
   border-radius: ${(props) => sizesStyles[props.size].radius};
+  // TODO: remove hasFullWidth after deprecation period
   ${(props) => props.hasFullWidth ? "display: flex; width: 100%" : "display: inline-flex"};
+  ${(props) => widthStyles(props)[props.width]};
   height: ${(props) => sizesStyles[props.size].height};
-  height: ${(props) => sizesStyles[props.size].height};
-  min-width: ${(props) => sizesStyles[props.size].height};
   ${(props) => getTextSize(sizesStyles[props.size].textSize)};
   ${(props) => props.isFloating && `box-shadow: ${shadows.medium}`};
   ${(props) => props.disabled ? statusStyles(props).disabled : statusStyles(props).enabled};
@@ -2478,6 +2472,7 @@ var Button = (_a) => {
     children,
     variant = "neutral",
     hasFullWidth,
+    width = "auto",
     icon,
     iconPosition = "left",
     iconBefore,
@@ -2495,6 +2490,7 @@ var Button = (_a) => {
     "children",
     "variant",
     "hasFullWidth",
+    "width",
     "icon",
     "iconPosition",
     "iconBefore",
@@ -2557,6 +2553,7 @@ var Button = (_a) => {
       size,
       variant,
       hasFullWidth,
+      width,
       icon,
       iconPosition,
       logoSrc,
@@ -3705,7 +3702,7 @@ var import_react25 = __toESM(require("react"));
 var import_react_laag = require("react-laag");
 var import_resize_observer_polyfill = __toESM(require("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);
@@ -4200,7 +4197,7 @@ var didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) => {
     prevSelectedItem && selectedOptionValue !== prevSelectedItem.value
   );
 };
-var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps) => {
+var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps, keyboardMove, setKeyboardMove) => {
   const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
   return /* @__PURE__ */ import_react25.default.createElement(
     MenuItem,
@@ -4214,11 +4211,17 @@ var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedI
       index,
       item,
       disabled: item.isDisabled,
-      "aria-selected": isSelected
+      "aria-selected": isSelected,
+      onMouseMove: () => {
+        if (keyboardMove) {
+          setKeyboardMove(false);
+        }
+      }
     })), {
       isDisabled: item.isDisabled,
       hasDivider: item.hasDivider,
       isHighlighted: highlightedIndex === index,
+      keyboardMove: keyboardMove && highlightedIndex === index,
       isSelected
     }),
     item.title
@@ -4231,14 +4234,18 @@ var SelectMenu = (_a) => {
     selectedOptionValue,
     highlightedIndex,
     getItemProps,
-    search
+    search,
+    keyboardMove,
+    setKeyboardMove
   } = _b, menuProps = __objRest(_b, [
     "options",
     "selectedItem",
     "selectedOptionValue",
     "highlightedIndex",
     "getItemProps",
-    "search"
+    "search",
+    "keyboardMove",
+    "setKeyboardMove"
   ]);
   if (!isGrouped(options)) {
     return /* @__PURE__ */ import_react25.default.createElement(menu_default, __spreadValues({ search }, menuProps), options.map(
@@ -4248,7 +4255,9 @@ var SelectMenu = (_a) => {
         selectedItem,
         selectedOptionValue,
         highlightedIndex,
-        getItemProps
+        getItemProps,
+        keyboardMove,
+        setKeyboardMove
       )
     ));
   }
@@ -4262,7 +4271,9 @@ var SelectMenu = (_a) => {
         selectedItem,
         selectedOptionValue,
         highlightedIndex,
-        getItemProps
+        getItemProps,
+        keyboardMove,
+        setKeyboardMove
       );
     })));
   }));
@@ -4311,6 +4322,7 @@ var Select = (_a) => {
   ]);
   const environment = getDownshiftEnvironment(container);
   const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react25.useState)(false);
+  const [keyboardMove, setKeyboardMove] = (0, import_react25.useState)(false);
   const [searchValue, setSearchValue] = (0, import_react25.useState)("");
   const onSearchChange = (e) => {
     const value = e.target.value;
@@ -4364,6 +4376,22 @@ var Select = (_a) => {
     }
     return changes;
   };
+  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;
+    }
+  };
   options = (0, import_react25.useMemo)(() => {
     if (search) {
       if (isGrouped(options)) {
@@ -4414,7 +4442,7 @@ var Select = (_a) => {
       /* @__PURE__ */ import_react25.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react25.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react25.default.createElement(
         CustomHeader,
         {
-          getToggleButtonProps,
+          getToggleButtonProps: () => __spreadValues({}, getToggleButtonProps({ onKeyDown })),
           selectedItem: selectedItem2,
           selectedOptionValue,
           selectPlaceholder: placeholder,
@@ -4430,7 +4458,7 @@ var Select = (_a) => {
       ) : /* @__PURE__ */ import_react25.default.createElement(
         SelectHeader,
         {
-          getToggleButtonProps,
+          getToggleButtonProps: () => __spreadValues({}, getToggleButtonProps({ onKeyDown })),
           selectedItem: selectedItem2,
           selectedOptionValue,
           selectPlaceholder: placeholder,
@@ -4460,7 +4488,7 @@ var Select = (_a) => {
               highlightedIndex,
               getItemProps,
               position: menuPosition,
-              downshiftMenuProps: getMenuProps,
+              downshiftMenuProps: () => getMenuProps({ onKeyDown }),
               maxWidth: menuMaxWidth,
               maxHeight: menuMaxHeight,
               minWidth: menuMinWidth,
@@ -4473,7 +4501,9 @@ var Select = (_a) => {
                   onChange: onSearchChange,
                   getInputProps
                 }
-              )
+              ),
+              keyboardMove,
+              setKeyboardMove
             }
           )
         )
@@ -4556,7 +4586,9 @@ var BackdropWrapper = import_styled20.default.div`
   top: 0;
   left: 0;
   right: 0;
-  height: 100vh;
+  height: calc(100vh - calc(100vh - 100%));
+  height: 100dvh;
+  height: -webkit-fill-available;
   background: ${(props) => getColorValue(props.backgroundColor)};
   z-index: ${(props) => props.zIndex};
   overflow: hidden;
@@ -4938,6 +4970,9 @@ var LinkWrapper = import_styled22.default.a`
   box-shadow: 0 0 0 1px transparent;
   text-underline-offset: 0.35em;
   transition: 0.3s box-shadow;
+  ${(props) => props.noWrap && import_react29.css`
+      white-space: nowrap;
+    `}
   &:hover {
     ${(props) => `text-decoration: ${variants2[props.variant].underline === "hover" ? "underline" : "none"}`};
   }
@@ -4958,13 +4993,15 @@ var Link = (_a) => {
     href,
     variant = "primary",
     htmlTag = "a",
-    isDisabled
+    isDisabled,
+    noWrap
   } = _b, props = __objRest(_b, [
     "children",
     "href",
     "variant",
     "htmlTag",
-    "isDisabled"
+    "isDisabled",
+    "noWrap"
   ]);
   return /* @__PURE__ */ import_react30.default.createElement(
     LinkWrapper,
@@ -4972,7 +5009,8 @@ var Link = (_a) => {
       href,
       variant,
       as: htmlTag,
-      disabled: isDisabled
+      disabled: isDisabled,
+      noWrap
     }, props),
     children
   );
@@ -5001,7 +5039,7 @@ var TextareaWrapper = import_styled23.default.textarea`
   background-color: ${getColorValue("formFieldBackground")};
   transition: 0.3s box-shadow;
   padding: ${(props) => sizesStyles3[props.size].padding};
-  ${getRadius("large")};
+  ${getRadius("250")};
   box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
     ${(props) => props.error ? "var(--lns-color-danger)" : "var(--lns-color-formFieldBorder)"};
   ${(props) => getTextSize(sizesStyles3[props.size].textSize)};
@@ -5398,7 +5436,16 @@ var TypeaheadMenu = (_a) => {
   let downshiftIndex = 0;
   return /* @__PURE__ */ import_react32.default.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
     const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
-    return /* @__PURE__ */ import_react32.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react32.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react32.default.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ import_react32.default.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+    return /* @__PURE__ */ import_react32.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react32.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react32.default.createElement(
+      text_default,
+      {
+        id: groupId,
+        size: "body-sm",
+        fontWeight: "bold",
+        htmlTag: group.headingTag || "h2"
+      },
+      group.group
+    )), /* @__PURE__ */ import_react32.default.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
       return renderOption2(
         item,
         downshiftIndex++,
@@ -6156,7 +6203,7 @@ var form_field_default = FormField;
 var import_styled29 = __toESM(require("@emotion/styled"));
 var import_react41 = __toESM(require("react"));
 
-// src/hooks/use-on-click-outside.js
+// src/hooks/use-on-click-outside.ts
 var import_react37 = __toESM(require("react"));
 function useOnClickOutside(ref, handler) {
   import_react37.default.useEffect(() => {
@@ -7507,6 +7554,10 @@ var TabsNav = import_styled36.default.div`
     }
   }
 
+  button {
+    ${(props) => props.hasFullTabs && `width: 100%;`};
+  }
+
   ::after {
     content: '';
     flex-shrink: 0;
@@ -7529,10 +7580,14 @@ var TabsNavPilled = import_styled36.default.div`
     display: none;
   }
 
-  * {
+  > * {
     flex: 1 0;
   }
 
+  button {
+    width: 100%;
+  }
+
   ::after {
     content: '';
     flex-shrink: 0;
@@ -8552,17 +8607,104 @@ var availableSizes4 = Object.keys(sizes4);
 var availableSpeeds = Object.keys(speeds);
 var waveform_loader_default = WaveformLoader;
 
-// src/illustrations/accounts-and-billing.js
-var React55 = __toESM(require("react"));
+// src/components/indicator/indicator.tsx
+var import_react62 = require("@emotion/react");
+var import_styled44 = __toESM(require("@emotion/styled"));
+var import_react63 = __toESM(require("react"));
+var ringAnimation = import_react62.keyframes`
+  0% {
+    transform: scale(1);
+    opacity: 0;
+  }
+  50% {
+    transform: scale(1.6);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+`;
+var indicatorStyles = {
+  dot: {
+    size: "8px",
+    borderWidth: "1px",
+    borderColor: getColorValue("background")
+  },
+  positioning: {
+    top: "-2px",
+    right: "-2px"
+  },
+  animation: {
+    duration: "2s",
+    timing: "ease-out",
+    iteration: "infinite"
+  }
+};
+var colorStyles2 = {
+  blue: getColorValue("blue"),
+  orange: getColorValue("orange")
+};
+var IndicatorContainer = import_styled44.default.span`
+  position: relative;
+  display: inline-block;
+`;
+var IndicatorWrapper = import_styled44.default.span`
+  position: absolute;
+  height: ${indicatorStyles.dot.size};
+  width: ${indicatorStyles.dot.size};
+  top: ${indicatorStyles.positioning.top};
+  right: ${indicatorStyles.positioning.right};
+`;
+var IndicatorDot = import_styled44.default.span`
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: var(--lns-radius-full);
+  background-color: ${(props) => colorStyles2[props.color || "blue"]};
+  border: ${indicatorStyles.dot.borderWidth} solid
+    ${indicatorStyles.dot.borderColor};
+
+  &::after {
+    content: '';
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    border-radius: var(--lns-radius-full);
+    background-color: ${(props) => colorStyles2[props.color || "blue"]};
+    opacity: 0;
+    animation: ${(props) => props.withPulse ? ringAnimation : "none"}
+      ${indicatorStyles.animation.duration} ${indicatorStyles.animation.timing}
+      ${indicatorStyles.animation.iteration};
+    display: ${(props) => props.withPulse ? "block" : "none"};
+  }
+`;
+var Indicator = (_a) => {
+  var _b = _a, {
+    withPulse = true,
+    color = "blue",
+    children
+  } = _b, props = __objRest(_b, [
+    "withPulse",
+    "color",
+    "children"
+  ]);
+  const dotElement = /* @__PURE__ */ import_react63.default.createElement(IndicatorDot, { withPulse, color });
+  return /* @__PURE__ */ import_react63.default.createElement(IndicatorContainer, __spreadValues({}, props), children, /* @__PURE__ */ import_react63.default.createElement(IndicatorWrapper, null, dotElement));
+};
+var indicator_default = Indicator;
+
+// src/illustrations/accounts-and-billing.tsx
+var React56 = __toESM(require("react"));
 function IllustrationAccountsBilling(props) {
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 102 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(
       "path",
       {
         d: "M96.072 5.826H5.928v90.145h90.144V5.826z",
@@ -8571,7 +8713,7 @@ function IllustrationAccountsBilling(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.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",
@@ -8584,38 +8726,38 @@ function IllustrationAccountsBilling(props) {
 }
 var accounts_and_billing_default = IllustrationAccountsBilling;
 
-// src/illustrations/invite.js
-var React56 = __toESM(require("react"));
+// src/illustrations/invite.tsx
+var React57 = __toESM(require("react"));
 function IllustrationInvite(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: "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__ */ React56.createElement(
+    /* @__PURE__ */ React57.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__ */ React56.createElement(
+    /* @__PURE__ */ React57.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__ */ React56.createElement(
+    /* @__PURE__ */ React57.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",
@@ -8626,24 +8768,24 @@ function IllustrationInvite(props) {
 }
 var invite_default = IllustrationInvite;
 
-// src/illustrations/archived.js
-var React57 = __toESM(require("react"));
+// src/illustrations/archived.tsx
+var React58 = __toESM(require("react"));
 function IllustrationArchived(props) {
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React58.createElement(
       "path",
       {
         d: "M0 .002v100h100v-100H0zm90 90H10v-80h80v80z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React58.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",
@@ -8654,17 +8796,17 @@ function IllustrationArchived(props) {
 }
 var archived_default = IllustrationArchived;
 
-// src/illustrations/lead-with-transparency.js
-var React58 = __toESM(require("react"));
+// src/illustrations/lead-with-transparency.tsx
+var React59 = __toESM(require("react"));
 function IllustrationLeadwithTransparency(props) {
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.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",
@@ -8675,17 +8817,17 @@ function IllustrationLeadwithTransparency(props) {
 }
 var lead_with_transparency_default = IllustrationLeadwithTransparency;
 
-// src/illustrations/ask-for-more.js
-var React59 = __toESM(require("react"));
+// src/illustrations/ask-for-more.tsx
+var React60 = __toESM(require("react"));
 function IllustrationAskforMore(props) {
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React60.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",
@@ -8696,17 +8838,17 @@ function IllustrationAskforMore(props) {
 }
 var ask_for_more_default = IllustrationAskforMore;
 
-// src/illustrations/learning-and-development.js
-var React60 = __toESM(require("react"));
+// src/illustrations/learning-and-development.tsx
+var React61 = __toESM(require("react"));
 function IllustrationLearningDevelopment(props) {
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 142 142",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8715,7 +8857,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8724,7 +8866,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       "circle",
       {
         cx: 70.71,
@@ -8738,17 +8880,17 @@ function IllustrationLearningDevelopment(props) {
 }
 var learning_and_development_default = IllustrationLearningDevelopment;
 
-// src/illustrations/business-plan.js
-var React61 = __toESM(require("react"));
+// src/illustrations/business-plan.tsx
+var React62 = __toESM(require("react"));
 function IllustrationBusinessPlan(props) {
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8761,24 +8903,24 @@ function IllustrationBusinessPlan(props) {
 }
 var business_plan_default = IllustrationBusinessPlan;
 
-// src/illustrations/loom-plans.js
-var React62 = __toESM(require("react"));
+// src/illustrations/loom-plans.tsx
+var React63 = __toESM(require("react"));
 function IllustrationLoomPlans(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",
       {
         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__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement(
       "path",
       {
         d: "M49.993 12.288L62.28 0v9.064H100L87.713 21.353h-37.72v-9.065z",
@@ -8789,17 +8931,17 @@ function IllustrationLoomPlans(props) {
 }
 var loom_plans_default = IllustrationLoomPlans;
 
-// src/illustrations/collaborate-with-teammates.js
-var React63 = __toESM(require("react"));
+// src/illustrations/collaborate-with-teammates.tsx
+var React64 = __toESM(require("react"));
 function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
-  return /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React64.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8812,17 +8954,17 @@ function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
 }
 var collaborate_with_teammates_default = IllustrationCollaboratewithTeammatesSharedLibrary;
 
-// src/illustrations/option-grants.js
-var React64 = __toESM(require("react"));
+// src/illustrations/option-grants.tsx
+var React65 = __toESM(require("react"));
 function IllustrationOptionGrants(props) {
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React65.createElement(
       "path",
       {
         fill: "currentColor",
@@ -8833,17 +8975,17 @@ function IllustrationOptionGrants(props) {
 }
 var option_grants_default = IllustrationOptionGrants;
 
-// src/illustrations/community.js
-var React65 = __toESM(require("react"));
+// src/illustrations/community.tsx
+var React66 = __toESM(require("react"));
 function IllustrationCommunity(props) {
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React66.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8856,17 +8998,17 @@ function IllustrationCommunity(props) {
 }
 var community_default = IllustrationCommunity;
 
-// src/illustrations/community-alt.js
-var React66 = __toESM(require("react"));
+// src/illustrations/community-alt.tsx
+var React67 = __toESM(require("react"));
 function IllustrationCommunityAlt(props) {
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React67.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React67.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8879,17 +9021,17 @@ function IllustrationCommunityAlt(props) {
 }
 var community_alt_default = IllustrationCommunityAlt;
 
-// src/illustrations/parental-leave.js
-var React67 = __toESM(require("react"));
+// src/illustrations/parental-leave.tsx
+var React68 = __toESM(require("react"));
 function IllustrationParentalLeave(props) {
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.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",
@@ -8900,17 +9042,17 @@ function IllustrationParentalLeave(props) {
 }
 var parental_leave_default = IllustrationParentalLeave;
 
-// src/illustrations/content-limit.js
-var React68 = __toESM(require("react"));
+// src/illustrations/content-limit.tsx
+var React69 = __toESM(require("react"));
 function IllustrationContentLimit(props) {
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8923,17 +9065,17 @@ function IllustrationContentLimit(props) {
 }
 var content_limit_default = IllustrationContentLimit;
 
-// src/illustrations/pto.js
-var React69 = __toESM(require("react"));
+// src/illustrations/pto.tsx
+var React70 = __toESM(require("react"));
 function IllustrationPto(props) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 111",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8946,17 +9088,17 @@ function IllustrationPto(props) {
 }
 var pto_default = IllustrationPto;
 
-// src/illustrations/custom-branding.js
-var React70 = __toESM(require("react"));
+// src/illustrations/custom-branding.tsx
+var React71 = __toESM(require("react"));
 function IllustrationCustomBranding(props) {
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React71.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",
@@ -8967,54 +9109,54 @@ function IllustrationCustomBranding(props) {
 }
 var custom_branding_default = IllustrationCustomBranding;
 
-// src/illustrations/record.js
-var React71 = __toESM(require("react"));
+// src/illustrations/record.tsx
+var React72 = __toESM(require("react"));
 function IllustrationRecord(props) {
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React72.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__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" })))
+    /* @__PURE__ */ React72.createElement("g", { clipPath: "url(#Record_svg__clip0)", fill: "currentColor" }, /* @__PURE__ */ React72.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__ */ React72.createElement("defs", null, /* @__PURE__ */ React72.createElement("clipPath", { id: "Record_svg__clip0" }, /* @__PURE__ */ React72.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
   );
 }
 var record_default = IllustrationRecord;
 
-// src/illustrations/desktop-app-and-chrome-extension.js
-var React72 = __toESM(require("react"));
+// src/illustrations/desktop-app-and-chrome-extension.tsx
+var React73 = __toESM(require("react"));
 function IllustrationDesktopAppandChromeExtension(props) {
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.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__ */ React72.createElement(
+    /* @__PURE__ */ React73.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__ */ React72.createElement(
+    /* @__PURE__ */ React73.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__ */ React72.createElement(
+    /* @__PURE__ */ React73.createElement(
       "path",
       {
         d: "M68.52 50.317v-.449l-.077.444c.024 0 .053.005.077.005z",
@@ -9025,17 +9167,17 @@ function IllustrationDesktopAppandChromeExtension(props) {
 }
 var desktop_app_and_chrome_extension_default = IllustrationDesktopAppandChromeExtension;
 
-// src/illustrations/remote-first.js
-var React73 = __toESM(require("react"));
+// src/illustrations/remote-first.tsx
+var React74 = __toESM(require("react"));
 function IllustrationRemoteFirst(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 105c27.615 0 50-22.386 50-50S82.615 5 55 5C27.386 5 5 27.386 5 55s22.386 50 50 50z",
@@ -9044,7 +9186,7 @@ function IllustrationRemoteFirst(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React74.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",
@@ -9053,7 +9195,7 @@ function IllustrationRemoteFirst(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React74.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",
@@ -9066,24 +9208,24 @@ function IllustrationRemoteFirst(props) {
 }
 var remote_first_default = IllustrationRemoteFirst;
 
-// src/illustrations/device-compatibility.js
-var React74 = __toESM(require("react"));
+// src/illustrations/device-compatibility.tsx
+var React75 = __toESM(require("react"));
 function IllustrationDeviceCompatibility(props) {
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React75.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React74.createElement(
+    /* @__PURE__ */ React75.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__ */ React74.createElement(
+    /* @__PURE__ */ React75.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",
@@ -9094,18 +9236,18 @@ function IllustrationDeviceCompatibility(props) {
 }
 var device_compatibility_default = IllustrationDeviceCompatibility;
 
-// src/illustrations/roadmap.js
-var React75 = __toESM(require("react"));
+// src/illustrations/roadmap.tsx
+var React76 = __toESM(require("react"));
 function IllustrationRoadmap(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("path", { d: "M100 100H0V0h100v100zM10 90h80V10H10v80z", fill: "currentColor" }),
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement("path", { d: "M100 100H0V0h100v100zM10 90h80V10H10v80z", fill: "currentColor" }),
+    /* @__PURE__ */ React76.createElement(
       "path",
       {
         d: "M50.008 39.806L80 54v-9.806L50.008 30 20 44.194V54l30.008-14.194zM80 20H20v10h60V20z",
@@ -9116,17 +9258,17 @@ function IllustrationRoadmap(props) {
 }
 var roadmap_default = IllustrationRoadmap;
 
-// src/illustrations/downgrade.js
-var React76 = __toESM(require("react"));
+// src/illustrations/downgrade.tsx
+var React77 = __toESM(require("react"));
 function IllustrationDowngrade(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",
@@ -9139,17 +9281,17 @@ function IllustrationDowngrade(props) {
 }
 var downgrade_default = IllustrationDowngrade;
 
-// src/illustrations/screenshot.js
-var React77 = __toESM(require("react"));
+// src/illustrations/screenshot.tsx
+var React78 = __toESM(require("react"));
 function IllustrationScreenshot(props) {
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9162,17 +9304,17 @@ function IllustrationScreenshot(props) {
 }
 var screenshot_default = IllustrationScreenshot;
 
-// src/illustrations/embrace-the-weird.js
-var React78 = __toESM(require("react"));
+// src/illustrations/embrace-the-weird.tsx
+var React79 = __toESM(require("react"));
 function IllustrationEmbracetheWeird(props) {
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React79.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9185,41 +9327,41 @@ function IllustrationEmbracetheWeird(props) {
 }
 var embrace_the_weird_default = IllustrationEmbracetheWeird;
 
-// src/illustrations/share-with-your-team.js
-var React79 = __toESM(require("react"));
+// src/illustrations/share-with-your-team.tsx
+var React80 = __toESM(require("react"));
 function IllustrationSharewithYourTeamTeamLibrary(props) {
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React80.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React79.createElement(
+    /* @__PURE__ */ React80.createElement(
       "g",
       {
         clipPath: "url(#Share_with_Your_Team_(Team_Library)_svg__clip0)",
         fill: "currentColor"
       },
-      /* @__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__ */ React80.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__ */ React80.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("defs", null, /* @__PURE__ */ React79.createElement("clipPath", { id: "Share_with_Your_Team_(Team_Library)_svg__clip0" }, /* @__PURE__ */ React79.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
+    /* @__PURE__ */ React80.createElement("defs", null, /* @__PURE__ */ React80.createElement("clipPath", { id: "Share_with_Your_Team_(Team_Library)_svg__clip0" }, /* @__PURE__ */ React80.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
   );
 }
 var share_with_your_team_default = IllustrationSharewithYourTeamTeamLibrary;
 
-// src/illustrations/enterprise-plan.js
-var React80 = __toESM(require("react"));
+// src/illustrations/enterprise-plan.tsx
+var React81 = __toESM(require("react"));
 function IllustrationEnterprisePlan(props) {
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React81.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.createElement(
       "path",
       {
         fill: "currentColor",
@@ -9230,31 +9372,31 @@ function IllustrationEnterprisePlan(props) {
 }
 var enterprise_plan_default = IllustrationEnterprisePlan;
 
-// src/illustrations/share.js
-var React81 = __toESM(require("react"));
+// src/illustrations/share.tsx
+var React82 = __toESM(require("react"));
 function IllustrationShare(props) {
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.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__ */ React81.createElement(
+    /* @__PURE__ */ React82.createElement(
       "path",
       {
         d: "M50 65.732h15.73v-15.73c0 8.69-7.04 15.73-15.73 15.73z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.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",
@@ -9265,40 +9407,40 @@ function IllustrationShare(props) {
 }
 var share_default = IllustrationShare;
 
-// src/illustrations/faq-and-security.js
-var React82 = __toESM(require("react"));
+// src/illustrations/faq-and-security.tsx
+var React83 = __toESM(require("react"));
 function IllustrationFaQandSecurity(props) {
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.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__ */ React82.createElement("path", { d: "M31 50V0H0v100h99.999V69H31V50z", fill: "currentColor" }),
-    /* @__PURE__ */ React82.createElement("path", { d: "M100 66V0H34v31h35v35h31z", fill: "currentColor" })
+    /* @__PURE__ */ React83.createElement("path", { d: "M31 50V0H0v100h99.999V69H31V50z", fill: "currentColor" }),
+    /* @__PURE__ */ React83.createElement("path", { d: "M100 66V0H34v31h35v35h31z", fill: "currentColor" })
   );
 }
 var faq_and_security_default = IllustrationFaQandSecurity;
 
-// src/illustrations/starred.js
-var React83 = __toESM(require("react"));
+// src/illustrations/starred.tsx
+var React84 = __toESM(require("react"));
 function IllustrationStarred(props) {
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React84.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",
@@ -9309,17 +9451,17 @@ function IllustrationStarred(props) {
 }
 var starred_default = IllustrationStarred;
 
-// src/illustrations/five-minute-limit.js
-var React84 = __toESM(require("react"));
+// src/illustrations/five-minute-limit.tsx
+var React85 = __toESM(require("react"));
 function Illustration5MinuteLimit(props) {
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React85.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9332,17 +9474,17 @@ function Illustration5MinuteLimit(props) {
 }
 var five_minute_limit_default = Illustration5MinuteLimit;
 
-// src/illustrations/starter-plus-plan.js
-var React85 = __toESM(require("react"));
+// src/illustrations/starter-plus-plan.tsx
+var React86 = __toESM(require("react"));
 function IllustrationStarterPlusPlan(props) {
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9355,17 +9497,17 @@ function IllustrationStarterPlusPlan(props) {
 }
 var starter_plus_plan_default = IllustrationStarterPlusPlan;
 
-// src/illustrations/getting-started.js
-var React86 = __toESM(require("react"));
+// src/illustrations/getting-started.tsx
+var React87 = __toESM(require("react"));
 function IllustrationGettingStarted(props) {
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React87.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 106 106",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React87.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",
@@ -9374,7 +9516,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React87.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",
@@ -9383,7 +9525,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React87.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",
@@ -9392,7 +9534,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React87.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",
@@ -9405,24 +9547,24 @@ function IllustrationGettingStarted(props) {
 }
 var getting_started_default = IllustrationGettingStarted;
 
-// src/illustrations/strong-upload-speed.js
-var React87 = __toESM(require("react"));
+// src/illustrations/strong-upload-speed.tsx
+var React88 = __toESM(require("react"));
 function IllustrationStrongUploadSpeed(props) {
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 111 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.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__ */ React87.createElement(
+    /* @__PURE__ */ React88.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",
@@ -9433,17 +9575,17 @@ function IllustrationStrongUploadSpeed(props) {
 }
 var strong_upload_speed_default = IllustrationStrongUploadSpeed;
 
-// src/illustrations/growth-through-empathy.js
-var React88 = __toESM(require("react"));
+// src/illustrations/growth-through-empathy.tsx
+var React89 = __toESM(require("react"));
 function IllustrationGrowththroughEmpathy(props) {
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React89.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 104 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.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",
@@ -9452,7 +9594,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.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",
@@ -9461,7 +9603,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.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",
@@ -9470,7 +9612,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.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",
@@ -9479,7 +9621,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.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",
@@ -9488,7 +9630,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.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",
@@ -9497,7 +9639,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement(
       "path",
       {
         d: "M64.015 0c0 6.693-5.432 12.124-12.124 12.124S39.767 6.693 39.767.002",
@@ -9510,17 +9652,17 @@ function IllustrationGrowththroughEmpathy(props) {
 }
 var growth_through_empathy_default = IllustrationGrowththroughEmpathy;
 
-// src/illustrations/troubleshooting.js
-var React89 = __toESM(require("react"));
+// src/illustrations/troubleshooting.tsx
+var React90 = __toESM(require("react"));
 function IllustrationTroubleshooting(props) {
-  return /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React90.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React90.createElement(
       "path",
       {
         d: "M5 55h99.984c0 27.61-22.375 50-50 50S5 82.61 5 55z",
@@ -9530,7 +9672,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React90.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",
@@ -9539,7 +9681,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React90.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",
@@ -9548,7 +9690,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React90.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",
@@ -9561,17 +9703,17 @@ function IllustrationTroubleshooting(props) {
 }
 var troubleshooting_default = IllustrationTroubleshooting;
 
-// src/illustrations/health-plans.js
-var React90 = __toESM(require("react"));
+// src/illustrations/health-plans.tsx
+var React91 = __toESM(require("react"));
 function IllustrationHealthPlans(props) {
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React91.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React90.createElement(
+    /* @__PURE__ */ React91.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9584,17 +9726,17 @@ function IllustrationHealthPlans(props) {
 }
 var health_plans_default = IllustrationHealthPlans;
 
-// src/illustrations/upgrade.js
-var React91 = __toESM(require("react"));
+// src/illustrations/upgrade.tsx
+var React92 = __toESM(require("react"));
 function IllustrationUpgrade(props) {
-  return /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React92.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9607,17 +9749,17 @@ function IllustrationUpgrade(props) {
 }
 var upgrade_default = IllustrationUpgrade;
 
-// src/illustrations/how-to-use-loom.js
-var React92 = __toESM(require("react"));
+// src/illustrations/how-to-use-loom.tsx
+var React93 = __toESM(require("react"));
 function IllustrationHowtoUseLoom(props) {
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React93.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.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",
@@ -9628,17 +9770,17 @@ function IllustrationHowtoUseLoom(props) {
 }
 var how_to_use_loom_default = IllustrationHowtoUseLoom;
 
-// src/illustrations/upload-drag-and-drop.js
-var React93 = __toESM(require("react"));
+// src/illustrations/upload-drag-and-drop.tsx
+var React94 = __toESM(require("react"));
 function IllustrationUploadDragAndDrop(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: "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",
@@ -9649,17 +9791,17 @@ function IllustrationUploadDragAndDrop(props) {
 }
 var upload_drag_and_drop_default = IllustrationUploadDragAndDrop;
 
-// src/illustrations/use-cases.js
-var React94 = __toESM(require("react"));
+// src/illustrations/use-cases.tsx
+var React95 = __toESM(require("react"));
 function IllustrationUseCases(props) {
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React95.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",
@@ -9670,17 +9812,17 @@ function IllustrationUseCases(props) {
 }
 var use_cases_default = IllustrationUseCases;
 
-// src/illustrations/invite-members.js
-var React95 = __toESM(require("react"));
+// src/illustrations/invite-members.tsx
+var React96 = __toESM(require("react"));
 function IllustrationInviteMembers(props) {
-  return /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React95.createElement(
+    /* @__PURE__ */ React96.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9693,46 +9835,46 @@ function IllustrationInviteMembers(props) {
 }
 var invite_members_default = IllustrationInviteMembers;
 
-// src/illustrations/wellness.js
-var React96 = __toESM(require("react"));
+// src/illustrations/wellness.tsx
+var React97 = __toESM(require("react"));
 function IllustrationWellness(props) {
-  return /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React97.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.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__ */ React96.createElement(
+    /* @__PURE__ */ React97.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__ */ React96.createElement("path", { fill: "currentColor", d: "M100 67.595H66.667v33.333H100z" })
+    /* @__PURE__ */ React97.createElement("path", { fill: "currentColor", d: "M100 67.595H66.667v33.333H100z" })
   );
 }
 var wellness_default = IllustrationWellness;
 
-// src/illustrations/comments.js
-var React97 = __toESM(require("react"));
+// src/illustrations/comments.tsx
+var React98 = __toESM(require("react"));
 function IllustrationComments(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",
@@ -9741,7 +9883,7 @@ function IllustrationComments(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React98.createElement(
       "path",
       {
         fill: "currentColor",
@@ -9752,17 +9894,17 @@ function IllustrationComments(props) {
 }
 var comments_default = IllustrationComments;
 
-// src/illustrations/folders-empty-state-mobile.js
-var React98 = __toESM(require("react"));
+// src/illustrations/folders-empty-state-mobile.tsx
+var React99 = __toESM(require("react"));
 function IllutrationFoldersEmptyStateMobile(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",
       {
         fillRule: "evenodd",
@@ -9771,7 +9913,7 @@ function IllutrationFoldersEmptyStateMobile(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React98.createElement(
+    /* @__PURE__ */ React99.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9784,24 +9926,24 @@ function IllutrationFoldersEmptyStateMobile(props) {
 }
 var folders_empty_state_mobile_default = IllutrationFoldersEmptyStateMobile;
 
-// src/illustrations/help-ios.js
-var React99 = __toESM(require("react"));
+// src/illustrations/help-ios.tsx
+var React100 = __toESM(require("react"));
 function IllustrationHelpIos(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(
+    /* @__PURE__ */ React100.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__ */ React99.createElement(
+    /* @__PURE__ */ React100.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9814,18 +9956,18 @@ function IllustrationHelpIos(props) {
 }
 var help_ios_default = IllustrationHelpIos;
 
-// src/illustrations/my-videos-empty-state-mobile.js
-var React100 = __toESM(require("react"));
+// src/illustrations/my-videos-empty-state-mobile.tsx
+var React101 = __toESM(require("react"));
 function IllustrationMyVideosEmptyStateMobile(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("path", { d: "M96 0H0v96h96V0zM84 12v72H12V12h72z", fill: "currentColor" }),
-    /* @__PURE__ */ React100.createElement(
+    /* @__PURE__ */ React101.createElement("path", { d: "M96 0H0v96h96V0zM84 12v72H12V12h72z", fill: "currentColor" }),
+    /* @__PURE__ */ React101.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -9838,17 +9980,17 @@ function IllustrationMyVideosEmptyStateMobile(props) {
 }
 var my_videos_empty_state_mobile_default = IllustrationMyVideosEmptyStateMobile;
 
-// src/illustrations/recents-empty-state-mobile.js
-var React101 = __toESM(require("react"));
+// src/illustrations/recents-empty-state-mobile.tsx
+var React102 = __toESM(require("react"));
 function IllustrationRecentsEmptyStateMobile(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(
       "path",
       {
         fillRule: "evenodd",
@@ -9861,17 +10003,17 @@ function IllustrationRecentsEmptyStateMobile(props) {
 }
 var recents_empty_state_mobile_default = IllustrationRecentsEmptyStateMobile;
 
-// src/illustrations/chrome-notifications-empty-state.js
-var React102 = __toESM(require("react"));
+// src/illustrations/chrome-notifications-empty-state.tsx
+var React103 = __toESM(require("react"));
 function IllustrationChromeNotificationsEmptyState(props) {
-  return /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.createElement(
       "circle",
       {
         cx: 15.84,
@@ -9881,7 +10023,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.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",
@@ -9889,8 +10031,8 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React102.createElement("circle", { cx: 80.16, cy: 15.84, r: 15.84, fill: "currentColor" }),
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.createElement("circle", { cx: 80.16, cy: 15.84, r: 15.84, fill: "currentColor" }),
+    /* @__PURE__ */ React103.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",
@@ -9898,7 +10040,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.createElement(
       "circle",
       {
         cx: 48,
@@ -9908,7 +10050,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.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",
@@ -9916,7 +10058,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.createElement(
       "circle",
       {
         cx: 15.84,
@@ -9926,7 +10068,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.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",
@@ -9934,7 +10076,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React102.createElement(
+    /* @__PURE__ */ React103.createElement(
       "circle",
       {
         cx: 80.16,