@loomhq/lens 12.4.0 → 12.5.0

package/dist/cjs/index.js

@@ -56,8 +56,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Align: () => align_default,
   Arrange: () => arrange_default,
   Avatar: () => avatar_default,
@@ -69,6 +69,7 @@ __export(src_exports, {
   Container: () => container_default,
   Distribute: () => distribute_default,
   Dropdown: () => dropdown_default,
+  EllipsesLoader: () => ellipses_loader_default,
   ErrorContainer: () => error_container_default,
   FormField: () => form_field_default,
   Icon: () => icon_default,
@@ -157,6 +158,7 @@ __export(src_exports, {
   Tooltip: () => tooltip_default,
   TooltipBox: () => TooltipBox,
   Typeahead: () => typeahead_default,
+  WaveformLoader: () => waveform_loader_default,
   accessibilityRules: () => accessibilityRules,
   alignSelfRules: () => alignSelfRules,
   alphaFunction: () => alphaFunction,
@@ -174,6 +176,8 @@ __export(src_exports, {
   flexDirectionRules: () => flexDirectionRules,
   flexItemRules: () => flexItemRules,
   flexWrapRules: () => flexWrapRules,
+  fontSettingVariables: () => fontSettingVariables,
+  fontSettings: () => fontSettings,
   fontWeightRules: () => fontWeightRules,
   fontWeightVariables: () => fontWeightVariables,
   fontWeights: () => fontWeights,
@@ -186,6 +190,7 @@ __export(src_exports, {
   getColorsCssVarsObject: () => getColorsCssVarsObject,
   getCssVarsFromObject: () => getCssVarsFromObject,
   getFocusRing: () => getFocusRing,
+  getFontSetting: () => getFontSetting,
   getFontWeight: () => getFontWeight,
   getListContainer: () => getListContainer,
   getMediaCss: () => getMediaCss,
@@ -253,8 +258,8 @@ __export(src_exports, {
   usePushPageDown: () => use_push_page_down_default,
   widthRules: () => widthRules
 });
-module.exports = __toCommonJS(src_exports);
-var import_react56 = require("@emotion/react");
+module.exports = __toCommonJS(index_exports);
+var import_react60 = require("@emotion/react");
 
 // src/colors.ts
 var percent = (number, percentage) => Math.round(number * percentage / 100);
@@ -377,6 +382,8 @@ var themeColors = {
       ads: "--ds-background-neutral-bold"
     },
     overlay: { h: 0, s: 0, l: 100, a: 1, ads: "--ds-surface-overlay" },
+    overlayHover: hslaGreys.grey2,
+    overlayActive: hslaGreys.grey3,
     backdrop: { h: 224, s: 72, l: 7, a: backdropAlpha, ads: "--ds-blanket" },
     border: { h: 225.5, s: 57, l: 10, a: borderAlpha, ads: "--ds-border" }
   }, themeSharedColors), {
@@ -533,6 +540,20 @@ var themeColors = {
       ads: "--ds-background-neutral-bold"
     },
     overlay: { h: 225, s: 4, l: 17.6, a: 1, ads: "--ds-surface-overlay" },
+    overlayHover: {
+      h: 225,
+      s: 4,
+      l: 19.61,
+      a: 1,
+      ads: "--ds-surface-overlay-hovered"
+    },
+    overlayActive: {
+      h: 225,
+      s: 4.69,
+      l: 25.1,
+      a: 1,
+      ads: "--ds-surface-overlay-pressed"
+    },
     backdrop: { h: 210, s: 11, l: 7, a: 0.6, ads: "--ds-blanket" },
     border: { h: 236, s: 36.6, l: 92, a: 0.12, ads: "--ds-border" }
   }, themeSharedColors), {
@@ -673,6 +694,9 @@ var getColorValue = (color) => {
     if (color in hslaColors || color in themeColors.light) {
       return `var(--lns-color-${color})`;
     }
+    if (color in gradients) {
+      return `var(--lns-gradient-${color})`;
+    }
     return color;
   }
 };
@@ -848,8 +872,9 @@ var getTextSize = (size) => size && `
   line-height: var(--lns-lineHeight-${size});
   letter-spacing: var(--lns-letterSpacing-${size});
 `;
-var getRadius = (size) => size && `border-radius: var(--lns-radius-${size});`;
 var getFontWeight = (fontWeight) => fontWeight && `font-weight: var(--lns-fontWeight-${fontWeight});`;
+var getFontSetting = (fontSetting) => fontSetting && `var(--lns-fontSetting-${fontSetting});`;
+var getRadius = (size) => size && `border-radius: var(--lns-radius-${size});`;
 var getShadow = (size) => size && `box-shadow: var(--lns-shadow-${size});`;
 var getFocusRing = (color, position) => {
   const focusColor = color ? color : getColorValue("focusRing");
@@ -967,6 +992,10 @@ var fontWeights = {
   medium: 500,
   bold: 653
 };
+var fontSettings = {
+  normal: `'normal'`,
+  tnum: `'tnum'`
+};
 var radii = {
   none: u(0),
   50: u(0.5),
@@ -1045,6 +1074,7 @@ var TextWrapper = import_styled.default.span`
   ${(props) => !props.sizeMinMax && getTextSize(props.size)};
   ${(props) => getFontWeight(props.fontWeight)};
   ${(props) => props.color && `color: ${getColorValue(props.color)}`};
+  ${(props) => props.fontSetting && `font-feature-settings: ${getFontSetting(props.fontSetting)}`};
   ${(props) => props.isDimmed && `opacity: ${dimAmount}`};
   ${(props) => props.alignment && `text-align: ${props.alignment}`};
   ${(props) => props.hasEllipsis && !props.ellipsisLines && `
@@ -1098,7 +1128,8 @@ var Text = (_a) => {
     variant,
     htmlTag = "span",
     alignment,
-    sizeMinMax
+    sizeMinMax,
+    fontSetting = "normal"
   } = _b, props = __objRest(_b, [
     "children",
     "size",
@@ -1112,7 +1143,8 @@ var Text = (_a) => {
     "variant",
     "htmlTag",
     "alignment",
-    "sizeMinMax"
+    "sizeMinMax",
+    "fontSetting"
   ]);
   if (isDimmed) {
     console.warn(textIsDimmedDeprecated);
@@ -1134,7 +1166,8 @@ var Text = (_a) => {
       variant,
       as: htmlTag,
       alignment,
-      sizeMinMax
+      sizeMinMax,
+      fontSetting
     }, props),
     children
   );
@@ -1731,6 +1764,10 @@ var fontWeightVariables = getCssVarsFromObject(
   "fontWeight",
   fontWeights
 );
+var fontSettingVariables = getCssVarsFromObject(
+  "fontSetting",
+  fontSettings
+);
 var textSizeVariables = getCssVarsFromObject(
   void 0,
   getTextSizesObject()
@@ -1777,7 +1814,12 @@ var getSizingVariablesCssVarsObject = () => {
   return Object.assign({}, ...sizingVariables);
 };
 var getVariablesCssVarsObject = () => {
-  return Object.assign({}, fontWeightVariables, ...sizingVariables);
+  return Object.assign(
+    {},
+    fontWeightVariables,
+    ...sizingVariables,
+    fontSettingVariables
+  );
 };
 var getColorsCssVarsObject = () => {
   return __spreadValues(__spreadValues(__spreadValues({}, colorVariables), themeColorVariables), gradientVariables);
@@ -1999,7 +2041,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") => {
+var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body", documentElement = "html") => {
   return `
     ${rootElement} {
       font-size: 100%;
@@ -2030,6 +2072,39 @@ var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
     ${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 180deg at 50% 50%, #0065FF 89.75857436656952deg, #0469FF 145.80000042915344deg, #BF63F3 262.8000068664551deg, #FFA900 307.8000068664551deg);
+
+      --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()) });
@@ -2205,6 +2280,16 @@ var variantStyles = {
     background: "transparent",
     borderColor: getColorValue("buttonBorder"),
     hover: getColorValue("backgroundHover"),
+    active: getColorValue("backgroundActive"),
+    floatingBackground: getColorValue("overlay"),
+    floatingHover: getColorValue("overlayHover"),
+    floatingActive: getColorValue("overlayActive")
+  },
+  neutralSecondary: {
+    color: getColorValue("body"),
+    background: "backgroundSecondary",
+    hover: getColorValue("grey3"),
+    // TODO(tatiana/ben p): Awaiting final confirmation from Cody as to semantic approach when he returns Oct 2025
     active: getColorValue("backgroundActive")
   },
   primary: {
@@ -2251,17 +2336,18 @@ var variantStyles = {
     active: null
   }
 };
-var statusStyles = {
+var statusStyles = (props) => ({
   enabled: import_react9.css`
     cursor: pointer;
   `,
   disabled: import_react9.css`
+    ${props.ariaDisabled && `aria-disabled: true`};
     pointer-events: none;
     background-color: ${getColorValue("disabledBackground")};
     color: ${getColorValue("disabledContent")};
     border: none;
   `
-};
+});
 var iconGap = u(1);
 var ButtonWrapper = import_styled5.default.button`
   appearance: none;
@@ -2280,12 +2366,14 @@ var ButtonWrapper = import_styled5.default.button`
   border-radius: ${(props) => sizesStyles[props.size].radius};
   ${(props) => props.hasFullWidth ? "display: flex; width: 100%" : "display: inline-flex"};
   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.disabled ? statusStyles.disabled : statusStyles.enabled};
+  ${(props) => props.isFloating && `box-shadow: ${shadows.medium}`};
+  ${(props) => props.disabled ? statusStyles(props).disabled : statusStyles(props).enabled};
   ${(props) => !props.disabled && `
     border: ${variantStyles[props.variant].borderColor ? `1px solid ${variantStyles[props.variant].borderColor}` : "none"};
-    background: ${variantStyles[props.variant].background};
+    background: ${props.isFloating && props.variant === "neutral" ? variantStyles[props.variant].floatingBackground : variantStyles[props.variant].background};
     background-position: left;
     background-size: 125%;
     color: ${variantStyles[props.variant].color};
@@ -2295,7 +2383,7 @@ var ButtonWrapper = import_styled5.default.button`
     transition:
       0.3s background,
       0.3s border-color;
-    background: ${(props) => variantStyles[props.variant].hover};
+    background: ${(props) => props.isFloating && props.variant === "neutral" ? variantStyles[props.variant].floatingHover : variantStyles[props.variant].hover};
     background-position: 75% center;
   }
 
@@ -2303,7 +2391,7 @@ var ButtonWrapper = import_styled5.default.button`
     transition:
       0s background,
       0s border-color;
-    background: ${(props) => variantStyles[props.variant].active};
+    background: ${(props) => props.isFloating && props.variant === "neutral" ? variantStyles[props.variant].floatingActive : variantStyles[props.variant].active};
     background-position: right;
   }
 
@@ -2344,9 +2432,12 @@ var Button = (_a) => {
     hasFullWidth,
     icon,
     iconPosition = "left",
+    iconBefore,
+    iconAfter,
     logoSrc,
     hasLoader,
     isDisabled,
+    ariaDisabled,
     htmlTag = "button",
     interactionName,
     onClick,
@@ -2358,30 +2449,51 @@ var Button = (_a) => {
     "hasFullWidth",
     "icon",
     "iconPosition",
+    "iconBefore",
+    "iconAfter",
     "logoSrc",
     "hasLoader",
     "isDisabled",
+    "ariaDisabled",
     "htmlTag",
     "interactionName",
     "onClick",
     "refHandler"
   ]);
-  const buttonIcon = /* @__PURE__ */ import_react10.default.createElement(
+  const legacyIconLeft = icon && iconPosition === "left" ? icon : null;
+  const iconBeforeElement = iconBefore || legacyIconLeft ? /* @__PURE__ */ import_react10.default.createElement(
     IconSection,
     {
       hasLoader,
-      paddingLeft: children && iconPosition === "right" && iconGap,
-      paddingRight: children && iconPosition === "left" && iconGap
+      paddingLeft: "0",
+      paddingRight: children ? iconGap : "0"
     },
     /* @__PURE__ */ import_react10.default.createElement(
       icon_default,
       {
-        icon,
+        icon: iconBefore || legacyIconLeft,
         color: "currentColor",
         size: sizesStyles[size].iconSize
       }
     )
-  );
+  ) : null;
+  const legacyIconRight = icon && iconPosition === "right" ? icon : null;
+  const iconAfterElement = iconAfter || legacyIconRight ? /* @__PURE__ */ import_react10.default.createElement(
+    IconSection,
+    {
+      hasLoader,
+      paddingLeft: children ? iconGap : "0",
+      paddingRight: "unset"
+    },
+    /* @__PURE__ */ import_react10.default.createElement(
+      icon_default,
+      {
+        icon: legacyIconRight || iconAfter,
+        color: "currentColor",
+        size: sizesStyles[size].iconSize
+      }
+    )
+  ) : null;
   const onClickWithPressTracing = (0, import_react10.useCallback)(
     (event) => {
       if (interactionName) {
@@ -2401,6 +2513,7 @@ var Button = (_a) => {
       iconPosition,
       logoSrc,
       disabled: isDisabled,
+      ariaDisabled,
       as: htmlTag,
       hasChildren: children,
       ref: (ref) => refHandler && refHandler(ref)
@@ -2408,7 +2521,7 @@ var Button = (_a) => {
       onClick: interactionName === void 0 ? onClick : onClickWithPressTracing
     }),
     hasLoader && /* @__PURE__ */ import_react10.default.createElement(LoaderSection, null, /* @__PURE__ */ import_react10.default.createElement(loader_default, { color: "currentColor" })),
-    icon && iconPosition === "left" && buttonIcon,
+    iconBeforeElement,
     logoSrc && /* @__PURE__ */ import_react10.default.createElement(
       LogoImage,
       {
@@ -2422,7 +2535,7 @@ var Button = (_a) => {
       }
     ),
     /* @__PURE__ */ import_react10.default.createElement(ChildrenSection, { hasLoader }, children),
-    icon && iconPosition === "right" && buttonIcon
+    iconAfterElement
   );
 };
 var availableSizes2 = Object.keys(sizesStyles);
@@ -3567,10 +3680,17 @@ var getDownshiftEnvironment = (container) => {
 };
 
 // src/components/icon/available-icons/chevron-down.tsx
-var import_chevron_down = __toESM(require("@atlaskit/icon/utility/chevron-down"));
 var React20 = __toESM(require("react"));
 function SvgChevronDown() {
-  return /* @__PURE__ */ React20.createElement(import_chevron_down.default, { label: "", spacing: "compact", testId: "ads-refreshed-icon" });
+  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(
+    "path",
+    {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M2.03 3.97 6 7.94l3.97-3.97 1.06 1.06-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5z",
+      clipRule: "evenodd"
+    }
+  )));
 }
 
 // src/components/menu/menu.tsx
@@ -5078,182 +5198,192 @@ var TypeaheadMenu = (_a) => {
     })));
   }));
 };
-var Typeahead = (_a) => {
-  var _b = _a, {
-    container,
-    onOptionChange,
-    onInputValueChange,
-    menuZIndex = 1100,
-    menuMaxWidth,
-    menuMaxHeight = 34,
-    menuMinWidth,
-    ariaMenuName,
-    selectedOptionValue,
-    onOuterClick,
-    options,
-    placeholder,
-    menuPosition = "left",
-    isDisabled,
-    onOpenChange,
-    isLoading,
-    loadingMessage,
-    emptyResultsMessage,
-    errorMessage
-  } = _b, props = __objRest(_b, [
-    "container",
-    "onOptionChange",
-    "onInputValueChange",
-    "menuZIndex",
-    "menuMaxWidth",
-    "menuMaxHeight",
-    "menuMinWidth",
-    "ariaMenuName",
-    "selectedOptionValue",
-    "onOuterClick",
-    "options",
-    "placeholder",
-    "menuPosition",
-    "isDisabled",
-    "onOpenChange",
-    "isLoading",
-    "loadingMessage",
-    "emptyResultsMessage",
-    "errorMessage"
-  ]);
-  const environment = getDownshiftEnvironment(container);
-  const inputRef = (0, import_react30.useRef)(null);
-  const [inputValue, setInputValue] = (0, import_react30.useState)("");
-  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react30.useState)(false);
-  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react30.useState)(
-    getSelectedOption2(selectedOptionValue, options)
-  );
-  const [selectedItem, setSelectedItem] = (0, import_react30.useState)(
-    prevSelectedItem
-  );
-  const handleInputValueChange = (value) => {
-    setInputValue(value);
-    onInputValueChange && onInputValueChange(value);
-  };
-  const onDownshiftChange = (item) => {
-    const value = item || null;
-    setSelectedItem(value);
-    onOptionChange && onOptionChange(value);
-  };
-  const downshiftProps = {
-    itemToString: (item) => item ? item.value : "",
-    onChange: onDownshiftChange,
-    onOuterClick,
-    environment,
-    selectedItem,
-    isOpen: downshiftIsOpen
-  };
-  if (environment) {
-    downshiftProps.environment = environment;
-  }
-  const { layerProps, triggerProps, renderLayer, triggerBounds } = (0, import_react_laag2.useLayer)({
-    isOpen: downshiftIsOpen,
-    container,
-    ResizeObserver: import_resize_observer_polyfill2.default,
-    placement: menuPositions[menuPosition],
-    auto: true,
-    snap: true
-  });
-  (0, import_react30.useEffect)(() => {
-    if (didSelectedOptionValueChange2(selectedOptionValue, prevSelectedItem)) {
-      const item = getSelectedOption2(selectedOptionValue, options);
-      setPrevSelectedItem(item);
-      setSelectedItem(item);
-      setInputValue("");
-    }
-  }, [selectedOptionValue, options, prevSelectedItem]);
-  (0, import_react30.useEffect)(() => {
-    var _a2;
-    onOpenChange && onOpenChange(downshiftIsOpen);
-    if (!downshiftIsOpen) {
-      (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
-    }
-  }, [downshiftIsOpen, onOpenChange]);
-  const hasAvailableOptions = (0, import_react30.useMemo)(() => {
-    if (!Array.isArray(options)) {
-      return false;
+var Typeahead = (0, import_react30.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      container,
+      onOptionChange,
+      onInputValueChange,
+      menuZIndex = 1100,
+      menuMaxWidth,
+      menuMaxHeight = 34,
+      menuMinWidth,
+      ariaMenuName,
+      selectedOptionValue,
+      onOuterClick,
+      options,
+      placeholder,
+      menuPosition = "left",
+      isDisabled,
+      onOpenChange,
+      isLoading,
+      loadingMessage,
+      emptyResultsMessage,
+      errorMessage
+    } = _b, props = __objRest(_b, [
+      "container",
+      "onOptionChange",
+      "onInputValueChange",
+      "menuZIndex",
+      "menuMaxWidth",
+      "menuMaxHeight",
+      "menuMinWidth",
+      "ariaMenuName",
+      "selectedOptionValue",
+      "onOuterClick",
+      "options",
+      "placeholder",
+      "menuPosition",
+      "isDisabled",
+      "onOpenChange",
+      "isLoading",
+      "loadingMessage",
+      "emptyResultsMessage",
+      "errorMessage"
+    ]);
+    const environment = getDownshiftEnvironment(container);
+    const internalInputRef = (0, import_react30.useRef)(null);
+    const inputRef = (0, import_react30.useCallback)(
+      (node) => {
+        internalInputRef.current = node;
+        if (ref) {
+          typeof ref === "function" ? ref(node) : ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const [inputValue, setInputValue] = (0, import_react30.useState)("");
+    const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react30.useState)(false);
+    const [prevSelectedItem, setPrevSelectedItem] = (0, import_react30.useState)(
+      getSelectedOption2(selectedOptionValue, options)
+    );
+    const [selectedItem, setSelectedItem] = (0, import_react30.useState)(
+      prevSelectedItem
+    );
+    const handleInputValueChange = (value) => {
+      setInputValue(value);
+      onInputValueChange && onInputValueChange(value);
+    };
+    const onDownshiftChange = (item) => {
+      const value = item || null;
+      setSelectedItem(value);
+      onOptionChange && onOptionChange(value);
+    };
+    const downshiftProps = {
+      itemToString: (item) => item ? item.value : "",
+      onChange: onDownshiftChange,
+      onOuterClick,
+      environment,
+      selectedItem,
+      isOpen: downshiftIsOpen
+    };
+    if (environment) {
+      downshiftProps.environment = environment;
     }
-    return isGrouped2(options) ? options.some((group) => group.items.length > 0) : options.length > 0;
-  }, [options]);
-  const stateReducer = (state, changes) => {
-    if (changes.isOpen !== void 0) {
-      if (changes.type === import_downshift3.default.stateChangeTypes.keyDownEscape) {
-        setDownshiftIsOpen(false);
-        return { isOpen: false };
+    const { layerProps, triggerProps, renderLayer, triggerBounds } = (0, import_react_laag2.useLayer)({
+      isOpen: downshiftIsOpen,
+      container,
+      ResizeObserver: import_resize_observer_polyfill2.default,
+      placement: menuPositions[menuPosition],
+      auto: true,
+      snap: true
+    });
+    (0, import_react30.useEffect)(() => {
+      if (didSelectedOptionValueChange2(selectedOptionValue, prevSelectedItem)) {
+        const item = getSelectedOption2(selectedOptionValue, options);
+        setPrevSelectedItem(item);
+        setSelectedItem(item);
+        setInputValue("");
+      }
+    }, [selectedOptionValue, options, prevSelectedItem]);
+    (0, import_react30.useEffect)(() => {
+      var _a2;
+      onOpenChange && onOpenChange(downshiftIsOpen);
+      if (!downshiftIsOpen) {
+        (_a2 = internalInputRef.current) == null ? void 0 : _a2.blur();
+      }
+    }, [downshiftIsOpen, onOpenChange]);
+    const hasAvailableOptions = (0, import_react30.useMemo)(() => {
+      if (!Array.isArray(options)) {
+        return false;
+      }
+      return isGrouped2(options) ? options.some((group) => group.items.length > 0) : options.length > 0;
+    }, [options]);
+    const stateReducer = (state, changes) => {
+      if (changes.isOpen !== void 0) {
+        if (changes.type === import_downshift3.default.stateChangeTypes.keyDownEscape) {
+          setDownshiftIsOpen(false);
+          return { isOpen: false };
+        }
+        setDownshiftIsOpen(changes.isOpen);
       }
-      setDownshiftIsOpen(changes.isOpen);
-    }
-    return changes;
-  };
-  return /* @__PURE__ */ import_react30.default.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react30.default.createElement(import_downshift3.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
-    getItemProps,
-    getInputProps,
-    getMenuProps,
-    isOpen,
-    highlightedIndex,
-    selectedItem: selectedItem2
-  }) => {
-    return (
-      // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* @__PURE__ */ import_react30.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react30.default.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ import_react30.default.createElement(
-        TypeaheadHeader,
-        {
-          inputRef,
-          selectedItem: selectedItem2,
-          selectedOptionValue,
-          placeholder,
-          isDisabled,
-          options,
-          getInputProps,
-          ariaMenuName,
-          inputValue,
-          handleInputValueChange,
-          isOpen: downshiftIsOpen && isOpen,
-          onInputFocus: () => {
-            if (hasAvailableOptions || isLoading) {
+      return changes;
+    };
+    return /* @__PURE__ */ import_react30.default.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react30.default.createElement(import_downshift3.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+      getItemProps,
+      getInputProps,
+      getMenuProps,
+      isOpen,
+      highlightedIndex,
+      selectedItem: selectedItem2
+    }) => {
+      return (
+        // Don't set the role to combobox to ensure a consistent experience for screen readers
+        /* @__PURE__ */ import_react30.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react30.default.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ import_react30.default.createElement(
+          TypeaheadHeader,
+          {
+            inputRef,
+            selectedItem: selectedItem2,
+            selectedOptionValue,
+            placeholder,
+            isDisabled,
+            options,
+            getInputProps,
+            ariaMenuName,
+            inputValue,
+            handleInputValueChange,
+            isOpen: downshiftIsOpen && isOpen,
+            onInputFocus: () => {
               setDownshiftIsOpen(true);
-            }
-          },
-          hasLoader: isLoading,
-          hasError: Boolean(errorMessage)
-        }
-      )), downshiftIsOpen && isOpen && renderLayer(
-        /* @__PURE__ */ import_react30.default.createElement(
-          "div",
-          __spreadProps(__spreadValues({}, layerProps), {
-            style: __spreadProps(__spreadValues({}, layerProps.style), {
-              zIndex: menuZIndex,
-              width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
-            })
-          }),
+            },
+            hasLoader: isLoading,
+            hasError: Boolean(errorMessage)
+          }
+        )), downshiftIsOpen && isOpen && renderLayer(
           /* @__PURE__ */ import_react30.default.createElement(
-            TypeaheadMenu,
-            {
-              options,
-              selectedItem: selectedItem2,
-              selectedOptionValue,
-              hasAvailableOptions,
-              highlightedIndex,
-              getItemProps,
-              isLoading,
-              loadingMessage,
-              emptyResultsMessage,
-              position: menuPosition,
-              downshiftMenuProps: getMenuProps,
-              maxWidth: menuMaxWidth,
-              maxHeight: menuMaxHeight,
-              minWidth: menuMinWidth
-            }
+            "div",
+            __spreadProps(__spreadValues({}, layerProps), {
+              style: __spreadProps(__spreadValues({}, layerProps.style), {
+                zIndex: menuZIndex,
+                width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
+              })
+            }),
+            /* @__PURE__ */ import_react30.default.createElement(
+              TypeaheadMenu,
+              {
+                options,
+                selectedItem: selectedItem2,
+                selectedOptionValue,
+                hasAvailableOptions,
+                highlightedIndex,
+                getItemProps,
+                isLoading,
+                loadingMessage,
+                emptyResultsMessage,
+                position: menuPosition,
+                downshiftMenuProps: getMenuProps,
+                maxWidth: menuMaxWidth,
+                maxHeight: menuMaxHeight,
+                minWidth: menuMinWidth
+              }
+            )
           )
-        )
-      ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ import_react30.default.createElement(ErrorMessage2, null, errorMessage) : null)
-    );
-  }));
-};
+        ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ import_react30.default.createElement(ErrorMessage2, null, errorMessage) : null)
+      );
+    }));
+  }
+);
+Typeahead.displayName = "Typeahead";
 var typeahead_default = Typeahead;
 
 // src/components/dropdown/dropdown.tsx
@@ -5669,6 +5799,14 @@ var directionStyles = {
     label: { marginLeft: "var(--lns-space-small)" },
     errorMessage: { marginLeft: "var(--lns-space-small)" }
   },
+  "row-reverse": {
+    wrapper: {
+      display: "grid",
+      gridTemplateColumns: "1fr auto",
+      alignItems: "center"
+    },
+    label: {}
+  },
   column: {
     wrapper: {},
     label: { marginBottom: "var(--lns-space-xsmall)" }
@@ -5679,7 +5817,10 @@ var FormFieldWrapper = import_styled27.default.div`
 `;
 var Label = import_styled27.default.label`
   display: block;
-  ${(props) => props.direction && directionStyles[props.direction].label};
+  ${(props) => {
+  var _a;
+  return props.direction && ((_a = directionStyles[props.direction]) == null ? void 0 : _a.label);
+}};
   ${(props) => props.isLabelClickable && "cursor: pointer"};
 `;
 var ErrorMessage3 = import_styled27.default.span`
@@ -5726,7 +5867,7 @@ var FormField = (_a) => {
     },
     label
   );
-  return /* @__PURE__ */ import_react34.default.createElement(FormFieldWrapper, __spreadValues({ direction }, props), direction === "row" && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, children, labelElement), direction === "column" && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, labelElement, children), errorMessage && /* @__PURE__ */ import_react34.default.createElement(ErrorMessage3, null, errorMessage));
+  return /* @__PURE__ */ import_react34.default.createElement(FormFieldWrapper, __spreadValues({ direction }, props), direction === "row" && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, children, labelElement), direction === "column" && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, labelElement, children), direction === "row-reverse" && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, labelElement, children), errorMessage && /* @__PURE__ */ import_react34.default.createElement(ErrorMessage3, null, errorMessage));
 };
 var form_field_default = FormField;
 
@@ -6986,19 +7127,25 @@ var Tabs = (_a) => {
     scrollOffset,
     hasFullTabs,
     isPilledDesign,
-    hasBottomBorder = false
+    hasBottomBorder = false,
+    role,
+    ariaOrientation
   } = _b, props = __objRest(_b, [
     "children",
     "scrollOffset",
     "hasFullTabs",
     "isPilledDesign",
-    "hasBottomBorder"
+    "hasBottomBorder",
+    "role",
+    "ariaOrientation"
   ]);
   const tabsContent = isPilledDesign ? /* @__PURE__ */ import_react49.default.createElement(
     TabsNavPilled,
     __spreadValues({
       hasFullTabs,
-      scrollOffset
+      scrollOffset,
+      role,
+      "aria-orientation": ariaOrientation
     }, props),
     /* @__PURE__ */ import_react49.default.createElement("ul", null, children)
   ) : /* @__PURE__ */ import_react49.default.createElement(
@@ -7006,7 +7153,9 @@ var Tabs = (_a) => {
     __spreadValues({
       hasFullTabs,
       scrollOffset,
-      hasBottomBorder
+      hasBottomBorder,
+      role,
+      "aria-orientation": ariaOrientation
     }, props),
     /* @__PURE__ */ import_react49.default.createElement("ul", null, children)
   );
@@ -7532,70 +7681,234 @@ var ColorPicker = (_a) => {
 };
 var color_picker_default = ColorPicker;
 
-// src/illustrations/accounts-and-billing.js
-var React50 = __toESM(require("react"));
-function IllustrationAccountsBilling(props) {
-  return /* @__PURE__ */ React50.createElement(
-    "svg",
-    __spreadValues({
-      viewBox: "0 0 102 101",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props),
-    /* @__PURE__ */ React50.createElement(
-      "path",
-      {
-        d: "M96.072 5.826H5.928v90.145h90.144V5.826z",
-        stroke: "currentColor",
-        strokeWidth: 10,
-        strokeMiterlimit: 10
-      }
-    ),
-    /* @__PURE__ */ React50.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",
-        stroke: "currentColor",
-        strokeWidth: 10,
-        strokeMiterlimit: 10
-      }
-    )
-  );
-}
-var accounts_and_billing_default = IllustrationAccountsBilling;
-
-// src/illustrations/invite.js
-var React51 = __toESM(require("react"));
-function IllustrationInvite(props) {
-  return /* @__PURE__ */ React51.createElement(
-    "svg",
-    __spreadValues({
-      viewBox: "0 0 100 101",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg"
-    }, props),
-    /* @__PURE__ */ React51.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__ */ React51.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__ */ React51.createElement(
-      "path",
-      {
+// src/components/ellipses-loader/ellipses-loader.tsx
+var import_react56 = require("@emotion/react");
+var import_styled41 = __toESM(require("@emotion/styled"));
+var import_react57 = __toESM(require("react"));
+var speed2 = 2;
+var sizes3 = {
+  small: {
+    totalSize: u(2.25),
+    height: u(0.5625),
+    dotSize: u(0.375),
+    gap: u(0.25)
+  },
+  medium: {
+    totalSize: u(3),
+    height: u(0.75),
+    dotSize: u(0.5),
+    gap: u(0.375)
+  },
+  large: {
+    totalSize: u(6),
+    height: u(1.5),
+    dotSize: u(1),
+    gap: u(0.75)
+  }
+};
+var getTotalSize2 = (props) => sizes3[props.size].totalSize;
+var getHeight = (props) => sizes3[props.size].height;
+var getDotSize2 = (props) => sizes3[props.size].dotSize;
+var getGap = (props) => sizes3[props.size].gap;
+var getBounceDistance = (props) => sizes3[props.size].dotSize;
+var createDotBounce = (bounceDistance) => import_react56.keyframes`
+  0%, 40%, 100% {
+    transform: translateY(50%);
+  }
+  20% {
+    transform: translateY(calc(50% - ${bounceDistance}));
+  }
+`;
+var EllipsesLoaderWrapper = import_styled41.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${(props) => getHeight(props)};
+  width: ${(props) => getTotalSize2(props)};
+  gap: ${(props) => getGap(props)};
+`;
+var Dot2 = import_styled41.default.span`
+  width: ${(props) => getDotSize2(props)};
+  height: ${(props) => getDotSize2(props)};
+  border-radius: 50%;
+  background-color: ${(props) => getColorValue(props.color)};
+  transform: translateY(50%);
+  animation: ${(props) => createDotBounce(getBounceDistance(props))} ${speed2}s
+    ease-in-out infinite;
+  animation-fill-mode: both;
+  animation-delay: ${(props) => props.delay}s;
+`;
+var EllipsesLoader = (_a) => {
+  var _b = _a, {
+    color = "body",
+    size = "medium"
+  } = _b, props = __objRest(_b, [
+    "color",
+    "size"
+  ]);
+  return /* @__PURE__ */ import_react57.default.createElement(EllipsesLoaderWrapper, __spreadValues({ size }, props), /* @__PURE__ */ import_react57.default.createElement(Dot2, { color, size, delay: 0 }), /* @__PURE__ */ import_react57.default.createElement(Dot2, { color, size, delay: 0.2 }), /* @__PURE__ */ import_react57.default.createElement(Dot2, { color, size, delay: 0.4 }));
+};
+var availableSizes3 = Object.keys(sizes3);
+var ellipses_loader_default = EllipsesLoader;
+
+// src/components/waveform-loader/waveform-loader.tsx
+var import_react58 = require("@emotion/react");
+var import_styled42 = __toESM(require("@emotion/styled"));
+var import_react59 = __toESM(require("react"));
+var sizes4 = {
+  medium: {
+    totalSize: u(3),
+    // 24px
+    barHeight: u(2.25)
+    // 18px
+  }
+};
+var speeds = {
+  fast: 1.2,
+  slow: 1.7
+};
+var AI_PRIMARY_ANIMATED_LINEAR_GRADIENT = "linear-gradient(270deg, #565ADD 10.58%, #DC43BE 41.83%, #565ADD 69.23%, #565ADD 96.63%)";
+var GRADIENT_ANIMATION_SPEED = 2;
+var BARS_COUNT = 5;
+var BAR_WIDTH = u(0.25);
+var getBarHeight = (props) => sizes4[props.size || "medium"].barHeight;
+var getTotalSize3 = (props) => sizes4[props.size || "medium"].totalSize;
+var getAnimationSpeed = (props) => speeds[props.speed || "fast"];
+var ripple = import_react58.keyframes`
+  0%, 100% {
+    transform: scaleY(0.3);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+`;
+var backgroundAnimation = import_react58.keyframes`
+  0% {
+    background-position: 0% center;
+  }
+  100% {
+    background-position: 100% center;
+  }
+`;
+var fadeIn = import_react58.keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+var WaveformLoaderWrapper = import_styled42.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: ${(props) => getTotalSize3(props)};
+  width: ${(props) => getTotalSize3(props)};
+  position: relative;
+`;
+var Bar = import_styled42.default.span`
+  width: ${BAR_WIDTH};
+  height: ${(props) => getBarHeight(props)};
+  background: ${(props) => props.color === "ai-primary" ? AI_PRIMARY_ANIMATED_LINEAR_GRADIENT : getColorValue(props.color)};
+  background-size: ${(props) => getTotalSize3(props)}
+    ${(props) => getTotalSize3(props)};
+  background-position: ${(props) => {
+  const barCenterRatio = (props.index + 1) / (BARS_COUNT + 1);
+  const offsetRatio = barCenterRatio - 0.5;
+  return `calc(${getTotalSize3(props)} * ${offsetRatio}) center`;
+}};
+  opacity: 0; /* Ensure it starts invisible */
+  transform: scaleY(0.3);
+  transform-origin: center;
+  animation:
+    ${fadeIn} 50ms ease-out forwards,
+    ${ripple} ${(props) => getAnimationSpeed(props)}s ease-in-out infinite,
+    ${backgroundAnimation} ${GRADIENT_ANIMATION_SPEED}s linear infinite;
+
+  animation-delay: ${(props) => -1 + props.index * (getAnimationSpeed(props) / BARS_COUNT)}s;
+  position: relative;
+`;
+var WaveformLoader = (_a) => {
+  var _b = _a, {
+    size = "medium",
+    speed: speed3 = "fast",
+    color = "body"
+  } = _b, props = __objRest(_b, [
+    "size",
+    "speed",
+    "color"
+  ]);
+  const barsList = Array.from({ length: BARS_COUNT }, (_, index) => /* @__PURE__ */ import_react59.default.createElement(Bar, { key: index, index, size, speed: speed3, color }));
+  return /* @__PURE__ */ import_react59.default.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
+var React52 = __toESM(require("react"));
+function IllustrationAccountsBilling(props) {
+  return /* @__PURE__ */ React52.createElement(
+    "svg",
+    __spreadValues({
+      viewBox: "0 0 102 101",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props),
+    /* @__PURE__ */ React52.createElement(
+      "path",
+      {
+        d: "M96.072 5.826H5.928v90.145h90.144V5.826z",
+        stroke: "currentColor",
+        strokeWidth: 10,
+        strokeMiterlimit: 10
+      }
+    ),
+    /* @__PURE__ */ React52.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",
+        stroke: "currentColor",
+        strokeWidth: 10,
+        strokeMiterlimit: 10
+      }
+    )
+  );
+}
+var accounts_and_billing_default = IllustrationAccountsBilling;
+
+// src/illustrations/invite.js
+var React53 = __toESM(require("react"));
+function IllustrationInvite(props) {
+  return /* @__PURE__ */ React53.createElement(
+    "svg",
+    __spreadValues({
+      viewBox: "0 0 100 101",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    }, props),
+    /* @__PURE__ */ React53.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__ */ React53.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__ */ React53.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__ */ React51.createElement(
+    /* @__PURE__ */ React53.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",
@@ -7607,23 +7920,23 @@ function IllustrationInvite(props) {
 var invite_default = IllustrationInvite;
 
 // src/illustrations/archived.js
-var React52 = __toESM(require("react"));
+var React54 = __toESM(require("react"));
 function IllustrationArchived(props) {
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React54.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React52.createElement(
+    /* @__PURE__ */ React54.createElement(
       "path",
       {
         d: "M0 .002v100h100v-100H0zm90 90H10v-80h80v80z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React52.createElement(
+    /* @__PURE__ */ React54.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",
@@ -7635,16 +7948,16 @@ function IllustrationArchived(props) {
 var archived_default = IllustrationArchived;
 
 // src/illustrations/lead-with-transparency.js
-var React53 = __toESM(require("react"));
+var React55 = __toESM(require("react"));
 function IllustrationLeadwithTransparency(props) {
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React55.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React55.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",
@@ -7656,16 +7969,16 @@ function IllustrationLeadwithTransparency(props) {
 var lead_with_transparency_default = IllustrationLeadwithTransparency;
 
 // src/illustrations/ask-for-more.js
-var React54 = __toESM(require("react"));
+var React56 = __toESM(require("react"));
 function IllustrationAskforMore(props) {
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React56.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React56.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",
@@ -7677,16 +7990,16 @@ function IllustrationAskforMore(props) {
 var ask_for_more_default = IllustrationAskforMore;
 
 // src/illustrations/learning-and-development.js
-var React55 = __toESM(require("react"));
+var React57 = __toESM(require("react"));
 function IllustrationLearningDevelopment(props) {
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React57.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 142 142",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React57.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7695,7 +8008,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React57.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7704,7 +8017,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React57.createElement(
       "circle",
       {
         cx: 70.71,
@@ -7719,16 +8032,16 @@ function IllustrationLearningDevelopment(props) {
 var learning_and_development_default = IllustrationLearningDevelopment;
 
 // src/illustrations/business-plan.js
-var React56 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 function IllustrationBusinessPlan(props) {
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React58.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React58.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7742,23 +8055,23 @@ function IllustrationBusinessPlan(props) {
 var business_plan_default = IllustrationBusinessPlan;
 
 // src/illustrations/loom-plans.js
-var React57 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 function IllustrationLoomPlans(props) {
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React59.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React59.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__ */ React57.createElement(
+    /* @__PURE__ */ React59.createElement(
       "path",
       {
         d: "M49.993 12.288L62.28 0v9.064H100L87.713 21.353h-37.72v-9.065z",
@@ -7770,16 +8083,16 @@ function IllustrationLoomPlans(props) {
 var loom_plans_default = IllustrationLoomPlans;
 
 // src/illustrations/collaborate-with-teammates.js
-var React58 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React60.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7793,16 +8106,16 @@ function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
 var collaborate_with_teammates_default = IllustrationCollaboratewithTeammatesSharedLibrary;
 
 // src/illustrations/option-grants.js
-var React59 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 function IllustrationOptionGrants(props) {
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React61.createElement(
       "path",
       {
         fill: "currentColor",
@@ -7814,16 +8127,16 @@ function IllustrationOptionGrants(props) {
 var option_grants_default = IllustrationOptionGrants;
 
 // src/illustrations/community.js
-var React60 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 function IllustrationCommunity(props) {
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React62.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7837,16 +8150,16 @@ function IllustrationCommunity(props) {
 var community_default = IllustrationCommunity;
 
 // src/illustrations/community-alt.js
-var React61 = __toESM(require("react"));
+var React63 = __toESM(require("react"));
 function IllustrationCommunityAlt(props) {
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React63.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React63.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7860,16 +8173,16 @@ function IllustrationCommunityAlt(props) {
 var community_alt_default = IllustrationCommunityAlt;
 
 // src/illustrations/parental-leave.js
-var React62 = __toESM(require("react"));
+var React64 = __toESM(require("react"));
 function IllustrationParentalLeave(props) {
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React64.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React64.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",
@@ -7881,16 +8194,16 @@ function IllustrationParentalLeave(props) {
 var parental_leave_default = IllustrationParentalLeave;
 
 // src/illustrations/content-limit.js
-var React63 = __toESM(require("react"));
+var React65 = __toESM(require("react"));
 function IllustrationContentLimit(props) {
-  return /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React65.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React65.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7904,16 +8217,16 @@ function IllustrationContentLimit(props) {
 var content_limit_default = IllustrationContentLimit;
 
 // src/illustrations/pto.js
-var React64 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 function IllustrationPto(props) {
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React66.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 111",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React66.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7927,16 +8240,16 @@ function IllustrationPto(props) {
 var pto_default = IllustrationPto;
 
 // src/illustrations/custom-branding.js
-var React65 = __toESM(require("react"));
+var React67 = __toESM(require("react"));
 function IllustrationCustomBranding(props) {
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React67.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React65.createElement(
+    /* @__PURE__ */ React67.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",
@@ -7948,53 +8261,53 @@ function IllustrationCustomBranding(props) {
 var custom_branding_default = IllustrationCustomBranding;
 
 // src/illustrations/record.js
-var React66 = __toESM(require("react"));
+var React68 = __toESM(require("react"));
 function IllustrationRecord(props) {
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React68.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React66.createElement("g", { clipPath: "url(#Record_svg__clip0)", fill: "currentColor" }, /* @__PURE__ */ React66.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__ */ React66.createElement("defs", null, /* @__PURE__ */ React66.createElement("clipPath", { id: "Record_svg__clip0" }, /* @__PURE__ */ React66.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
+    /* @__PURE__ */ React68.createElement("g", { clipPath: "url(#Record_svg__clip0)", fill: "currentColor" }, /* @__PURE__ */ React68.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__ */ React68.createElement("defs", null, /* @__PURE__ */ React68.createElement("clipPath", { id: "Record_svg__clip0" }, /* @__PURE__ */ React68.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
   );
 }
 var record_default = IllustrationRecord;
 
 // src/illustrations/desktop-app-and-chrome-extension.js
-var React67 = __toESM(require("react"));
+var React69 = __toESM(require("react"));
 function IllustrationDesktopAppandChromeExtension(props) {
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React69.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__ */ React67.createElement(
+    /* @__PURE__ */ React69.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__ */ React67.createElement(
+    /* @__PURE__ */ React69.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__ */ React67.createElement(
+    /* @__PURE__ */ React69.createElement(
       "path",
       {
         d: "M68.52 50.317v-.449l-.077.444c.024 0 .053.005.077.005z",
@@ -8006,16 +8319,16 @@ function IllustrationDesktopAppandChromeExtension(props) {
 var desktop_app_and_chrome_extension_default = IllustrationDesktopAppandChromeExtension;
 
 // src/illustrations/remote-first.js
-var React68 = __toESM(require("react"));
+var React70 = __toESM(require("react"));
 function IllustrationRemoteFirst(props) {
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React70.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",
@@ -8024,7 +8337,7 @@ function IllustrationRemoteFirst(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React70.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",
@@ -8033,7 +8346,7 @@ function IllustrationRemoteFirst(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React70.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",
@@ -8047,23 +8360,23 @@ function IllustrationRemoteFirst(props) {
 var remote_first_default = IllustrationRemoteFirst;
 
 // src/illustrations/device-compatibility.js
-var React69 = __toESM(require("react"));
+var React71 = __toESM(require("react"));
 function IllustrationDeviceCompatibility(props) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React71.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React71.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__ */ React69.createElement(
+    /* @__PURE__ */ React71.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",
@@ -8075,17 +8388,17 @@ function IllustrationDeviceCompatibility(props) {
 var device_compatibility_default = IllustrationDeviceCompatibility;
 
 // src/illustrations/roadmap.js
-var React70 = __toESM(require("react"));
+var React72 = __toESM(require("react"));
 function IllustrationRoadmap(props) {
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React72.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React70.createElement("path", { d: "M100 100H0V0h100v100zM10 90h80V10H10v80z", fill: "currentColor" }),
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React72.createElement("path", { d: "M100 100H0V0h100v100zM10 90h80V10H10v80z", fill: "currentColor" }),
+    /* @__PURE__ */ React72.createElement(
       "path",
       {
         d: "M50.008 39.806L80 54v-9.806L50.008 30 20 44.194V54l30.008-14.194zM80 20H20v10h60V20z",
@@ -8097,16 +8410,16 @@ function IllustrationRoadmap(props) {
 var roadmap_default = IllustrationRoadmap;
 
 // src/illustrations/downgrade.js
-var React71 = __toESM(require("react"));
+var React73 = __toESM(require("react"));
 function IllustrationDowngrade(props) {
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React73.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React73.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8120,16 +8433,16 @@ function IllustrationDowngrade(props) {
 var downgrade_default = IllustrationDowngrade;
 
 // src/illustrations/screenshot.js
-var React72 = __toESM(require("react"));
+var React74 = __toESM(require("react"));
 function IllustrationScreenshot(props) {
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React74.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React74.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8143,16 +8456,16 @@ function IllustrationScreenshot(props) {
 var screenshot_default = IllustrationScreenshot;
 
 // src/illustrations/embrace-the-weird.js
-var React73 = __toESM(require("react"));
+var React75 = __toESM(require("react"));
 function IllustrationEmbracetheWeird(props) {
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React75.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React75.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8166,40 +8479,40 @@ function IllustrationEmbracetheWeird(props) {
 var embrace_the_weird_default = IllustrationEmbracetheWeird;
 
 // src/illustrations/share-with-your-team.js
-var React74 = __toESM(require("react"));
+var React76 = __toESM(require("react"));
 function IllustrationSharewithYourTeamTeamLibrary(props) {
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React76.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React74.createElement(
+    /* @__PURE__ */ React76.createElement(
       "g",
       {
         clipPath: "url(#Share_with_Your_Team_(Team_Library)_svg__clip0)",
         fill: "currentColor"
       },
-      /* @__PURE__ */ React74.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__ */ React74.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__ */ React76.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__ */ React76.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__ */ React74.createElement("defs", null, /* @__PURE__ */ React74.createElement("clipPath", { id: "Share_with_Your_Team_(Team_Library)_svg__clip0" }, /* @__PURE__ */ React74.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
+    /* @__PURE__ */ React76.createElement("defs", null, /* @__PURE__ */ React76.createElement("clipPath", { id: "Share_with_Your_Team_(Team_Library)_svg__clip0" }, /* @__PURE__ */ React76.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
   );
 }
 var share_with_your_team_default = IllustrationSharewithYourTeamTeamLibrary;
 
 // src/illustrations/enterprise-plan.js
-var React75 = __toESM(require("react"));
+var React77 = __toESM(require("react"));
 function IllustrationEnterprisePlan(props) {
-  return /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React77.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React77.createElement(
       "path",
       {
         fill: "currentColor",
@@ -8211,30 +8524,30 @@ function IllustrationEnterprisePlan(props) {
 var enterprise_plan_default = IllustrationEnterprisePlan;
 
 // src/illustrations/share.js
-var React76 = __toESM(require("react"));
+var React78 = __toESM(require("react"));
 function IllustrationShare(props) {
-  return /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React78.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React78.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__ */ React76.createElement(
+    /* @__PURE__ */ React78.createElement(
       "path",
       {
         d: "M50 65.732h15.73v-15.73c0 8.69-7.04 15.73-15.73 15.73z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React78.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",
@@ -8246,39 +8559,39 @@ function IllustrationShare(props) {
 var share_default = IllustrationShare;
 
 // src/illustrations/faq-and-security.js
-var React77 = __toESM(require("react"));
+var React79 = __toESM(require("react"));
 function IllustrationFaQandSecurity(props) {
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React79.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React79.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__ */ React77.createElement("path", { d: "M31 50V0H0v100h99.999V69H31V50z", fill: "currentColor" }),
-    /* @__PURE__ */ React77.createElement("path", { d: "M100 66V0H34v31h35v35h31z", fill: "currentColor" })
+    /* @__PURE__ */ React79.createElement("path", { d: "M31 50V0H0v100h99.999V69H31V50z", fill: "currentColor" }),
+    /* @__PURE__ */ React79.createElement("path", { d: "M100 66V0H34v31h35v35h31z", fill: "currentColor" })
   );
 }
 var faq_and_security_default = IllustrationFaQandSecurity;
 
 // src/illustrations/starred.js
-var React78 = __toESM(require("react"));
+var React80 = __toESM(require("react"));
 function IllustrationStarred(props) {
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React80.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React80.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",
@@ -8290,16 +8603,16 @@ function IllustrationStarred(props) {
 var starred_default = IllustrationStarred;
 
 // src/illustrations/five-minute-limit.js
-var React79 = __toESM(require("react"));
+var React81 = __toESM(require("react"));
 function Illustration5MinuteLimit(props) {
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React81.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React79.createElement(
+    /* @__PURE__ */ React81.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8313,16 +8626,16 @@ function Illustration5MinuteLimit(props) {
 var five_minute_limit_default = Illustration5MinuteLimit;
 
 // src/illustrations/starter-plus-plan.js
-var React80 = __toESM(require("react"));
+var React82 = __toESM(require("react"));
 function IllustrationStarterPlusPlan(props) {
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React82.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React82.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8336,16 +8649,16 @@ function IllustrationStarterPlusPlan(props) {
 var starter_plus_plan_default = IllustrationStarterPlusPlan;
 
 // src/illustrations/getting-started.js
-var React81 = __toESM(require("react"));
+var React83 = __toESM(require("react"));
 function IllustrationGettingStarted(props) {
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React83.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 106 106",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React83.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",
@@ -8354,7 +8667,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React83.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",
@@ -8363,7 +8676,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React83.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",
@@ -8372,7 +8685,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React83.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",
@@ -8386,23 +8699,23 @@ function IllustrationGettingStarted(props) {
 var getting_started_default = IllustrationGettingStarted;
 
 // src/illustrations/strong-upload-speed.js
-var React82 = __toESM(require("react"));
+var React84 = __toESM(require("react"));
 function IllustrationStrongUploadSpeed(props) {
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 111 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React84.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__ */ React82.createElement(
+    /* @__PURE__ */ React84.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",
@@ -8414,16 +8727,16 @@ function IllustrationStrongUploadSpeed(props) {
 var strong_upload_speed_default = IllustrationStrongUploadSpeed;
 
 // src/illustrations/growth-through-empathy.js
-var React83 = __toESM(require("react"));
+var React85 = __toESM(require("react"));
 function IllustrationGrowththroughEmpathy(props) {
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 104 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React85.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",
@@ -8432,7 +8745,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React85.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",
@@ -8441,7 +8754,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React85.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",
@@ -8450,7 +8763,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React85.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",
@@ -8459,7 +8772,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React85.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",
@@ -8468,7 +8781,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React85.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",
@@ -8477,7 +8790,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React85.createElement(
       "path",
       {
         d: "M64.015 0c0 6.693-5.432 12.124-12.124 12.124S39.767 6.693 39.767.002",
@@ -8491,16 +8804,16 @@ function IllustrationGrowththroughEmpathy(props) {
 var growth_through_empathy_default = IllustrationGrowththroughEmpathy;
 
 // src/illustrations/troubleshooting.js
-var React84 = __toESM(require("react"));
+var React86 = __toESM(require("react"));
 function IllustrationTroubleshooting(props) {
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React86.createElement(
       "path",
       {
         d: "M5 55h99.984c0 27.61-22.375 50-50 50S5 82.61 5 55z",
@@ -8510,7 +8823,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React86.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",
@@ -8519,7 +8832,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React86.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",
@@ -8528,7 +8841,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React86.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",
@@ -8542,16 +8855,16 @@ function IllustrationTroubleshooting(props) {
 var troubleshooting_default = IllustrationTroubleshooting;
 
 // src/illustrations/health-plans.js
-var React85 = __toESM(require("react"));
+var React87 = __toESM(require("react"));
 function IllustrationHealthPlans(props) {
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React87.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React87.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8565,16 +8878,16 @@ function IllustrationHealthPlans(props) {
 var health_plans_default = IllustrationHealthPlans;
 
 // src/illustrations/upgrade.js
-var React86 = __toESM(require("react"));
+var React88 = __toESM(require("react"));
 function IllustrationUpgrade(props) {
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React88.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React88.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8588,16 +8901,16 @@ function IllustrationUpgrade(props) {
 var upgrade_default = IllustrationUpgrade;
 
 // src/illustrations/how-to-use-loom.js
-var React87 = __toESM(require("react"));
+var React89 = __toESM(require("react"));
 function IllustrationHowtoUseLoom(props) {
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React89.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React89.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",
@@ -8609,16 +8922,16 @@ function IllustrationHowtoUseLoom(props) {
 var how_to_use_loom_default = IllustrationHowtoUseLoom;
 
 // src/illustrations/upload-drag-and-drop.js
-var React88 = __toESM(require("react"));
+var React90 = __toESM(require("react"));
 function IllustrationUploadDragAndDrop(props) {
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React90.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React90.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",
@@ -8630,16 +8943,16 @@ function IllustrationUploadDragAndDrop(props) {
 var upload_drag_and_drop_default = IllustrationUploadDragAndDrop;
 
 // src/illustrations/use-cases.js
-var React89 = __toESM(require("react"));
+var React91 = __toESM(require("react"));
 function IllustrationUseCases(props) {
-  return /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React91.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React91.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",
@@ -8651,16 +8964,16 @@ function IllustrationUseCases(props) {
 var use_cases_default = IllustrationUseCases;
 
 // src/illustrations/invite-members.js
-var React90 = __toESM(require("react"));
+var React92 = __toESM(require("react"));
 function IllustrationInviteMembers(props) {
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React92.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React90.createElement(
+    /* @__PURE__ */ React92.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8674,45 +8987,45 @@ function IllustrationInviteMembers(props) {
 var invite_members_default = IllustrationInviteMembers;
 
 // src/illustrations/wellness.js
-var React91 = __toESM(require("react"));
+var React93 = __toESM(require("react"));
 function IllustrationWellness(props) {
-  return /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React93.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React93.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__ */ React91.createElement(
+    /* @__PURE__ */ React93.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__ */ React91.createElement("path", { fill: "currentColor", d: "M100 67.595H66.667v33.333H100z" })
+    /* @__PURE__ */ React93.createElement("path", { fill: "currentColor", d: "M100 67.595H66.667v33.333H100z" })
   );
 }
 var wellness_default = IllustrationWellness;
 
 // src/illustrations/comments.js
-var React92 = __toESM(require("react"));
+var React94 = __toESM(require("react"));
 function IllustrationComments(props) {
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React94.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React94.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8721,7 +9034,7 @@ function IllustrationComments(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React94.createElement(
       "path",
       {
         fill: "currentColor",
@@ -8733,16 +9046,16 @@ function IllustrationComments(props) {
 var comments_default = IllustrationComments;
 
 // src/illustrations/folders-empty-state-mobile.js
-var React93 = __toESM(require("react"));
+var React95 = __toESM(require("react"));
 function IllutrationFoldersEmptyStateMobile(props) {
-  return /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React95.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8751,7 +9064,7 @@ function IllutrationFoldersEmptyStateMobile(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8765,23 +9078,23 @@ function IllutrationFoldersEmptyStateMobile(props) {
 var folders_empty_state_mobile_default = IllutrationFoldersEmptyStateMobile;
 
 // src/illustrations/help-ios.js
-var React94 = __toESM(require("react"));
+var React96 = __toESM(require("react"));
 function IllustrationHelpIos(props) {
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React96.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React96.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__ */ React94.createElement(
+    /* @__PURE__ */ React96.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8795,17 +9108,17 @@ function IllustrationHelpIos(props) {
 var help_ios_default = IllustrationHelpIos;
 
 // src/illustrations/my-videos-empty-state-mobile.js
-var React95 = __toESM(require("react"));
+var React97 = __toESM(require("react"));
 function IllustrationMyVideosEmptyStateMobile(props) {
-  return /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React97.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React95.createElement("path", { d: "M96 0H0v96h96V0zM84 12v72H12V12h72z", fill: "currentColor" }),
-    /* @__PURE__ */ React95.createElement(
+    /* @__PURE__ */ React97.createElement("path", { d: "M96 0H0v96h96V0zM84 12v72H12V12h72z", fill: "currentColor" }),
+    /* @__PURE__ */ React97.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8819,16 +9132,16 @@ function IllustrationMyVideosEmptyStateMobile(props) {
 var my_videos_empty_state_mobile_default = IllustrationMyVideosEmptyStateMobile;
 
 // src/illustrations/recents-empty-state-mobile.js
-var React96 = __toESM(require("react"));
+var React98 = __toESM(require("react"));
 function IllustrationRecentsEmptyStateMobile(props) {
-  return /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React98.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React98.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8842,16 +9155,16 @@ function IllustrationRecentsEmptyStateMobile(props) {
 var recents_empty_state_mobile_default = IllustrationRecentsEmptyStateMobile;
 
 // src/illustrations/chrome-notifications-empty-state.js
-var React97 = __toESM(require("react"));
+var React99 = __toESM(require("react"));
 function IllustrationChromeNotificationsEmptyState(props) {
-  return /* @__PURE__ */ React97.createElement(
+  return /* @__PURE__ */ React99.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.createElement(
       "circle",
       {
         cx: 15.84,
@@ -8861,7 +9174,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.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",
@@ -8869,8 +9182,8 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement("circle", { cx: 80.16, cy: 15.84, r: 15.84, fill: "currentColor" }),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.createElement("circle", { cx: 80.16, cy: 15.84, r: 15.84, fill: "currentColor" }),
+    /* @__PURE__ */ React99.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",
@@ -8878,7 +9191,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.createElement(
       "circle",
       {
         cx: 48,
@@ -8888,7 +9201,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.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",
@@ -8896,7 +9209,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.createElement(
       "circle",
       {
         cx: 15.84,
@@ -8906,7 +9219,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.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",
@@ -8914,7 +9227,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.createElement(
       "circle",
       {
         cx: 80.16,