@loomhq/lens 12.4.1 → 12.6.0

package/dist/esm/index.js

@@ -154,6 +154,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), {
@@ -310,6 +312,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), {
@@ -450,6 +466,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;
   }
 };
@@ -625,8 +644,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");
@@ -744,6 +764,10 @@ var fontWeights = {
   medium: 500,
   bold: 653
 };
+var fontSettings = {
+  normal: `'normal'`,
+  tnum: `'tnum'`
+};
 var radii = {
   none: u(0),
   50: u(0.5),
@@ -822,6 +846,7 @@ var TextWrapper = styled.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 && `
@@ -875,7 +900,8 @@ var Text = (_a) => {
     variant,
     htmlTag = "span",
     alignment,
-    sizeMinMax
+    sizeMinMax,
+    fontSetting = "normal"
   } = _b, props = __objRest(_b, [
     "children",
     "size",
@@ -889,7 +915,8 @@ var Text = (_a) => {
     "variant",
     "htmlTag",
     "alignment",
-    "sizeMinMax"
+    "sizeMinMax",
+    "fontSetting"
   ]);
   if (isDimmed) {
     console.warn(textIsDimmedDeprecated);
@@ -911,7 +938,8 @@ var Text = (_a) => {
       variant,
       as: htmlTag,
       alignment,
-      sizeMinMax
+      sizeMinMax,
+      fontSetting
     }, props),
     children
   );
@@ -1508,6 +1536,10 @@ var fontWeightVariables = getCssVarsFromObject(
   "fontWeight",
   fontWeights
 );
+var fontSettingVariables = getCssVarsFromObject(
+  "fontSetting",
+  fontSettings
+);
 var textSizeVariables = getCssVarsFromObject(
   void 0,
   getTextSizesObject()
@@ -1554,7 +1586,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);
@@ -1776,7 +1813,7 @@ var avatar_default = Avatar;
 // src/components/base-styles/base-styles.tsx
 import { Global, css } from "@emotion/react";
 import React4 from "react";
-var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
+var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body", documentElement = "html") => {
   return `
     ${rootElement} {
       font-size: 100%;
@@ -1807,6 +1844,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__ */ React4.createElement(Global, { styles: css(buildGlobalStylesheet()) });
@@ -1982,6 +2052,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: {
@@ -2028,17 +2108,18 @@ var variantStyles = {
     active: null
   }
 };
-var statusStyles = {
+var statusStyles = (props) => ({
   enabled: css2`
     cursor: pointer;
   `,
   disabled: css2`
+    ${props.ariaDisabled && `aria-disabled: true`};
     pointer-events: none;
     background-color: ${getColorValue("disabledBackground")};
     color: ${getColorValue("disabledContent")};
     border: none;
   `
-};
+});
 var iconGap = u(1);
 var ButtonWrapper = styled5.button`
   appearance: none;
@@ -2057,12 +2138,14 @@ var ButtonWrapper = styled5.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};
@@ -2072,7 +2155,7 @@ var ButtonWrapper = styled5.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;
   }
 
@@ -2080,7 +2163,7 @@ var ButtonWrapper = styled5.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;
   }
 
@@ -2121,9 +2204,12 @@ var Button = (_a) => {
     hasFullWidth,
     icon,
     iconPosition = "left",
+    iconBefore,
+    iconAfter,
     logoSrc,
     hasLoader,
     isDisabled,
+    ariaDisabled,
     htmlTag = "button",
     interactionName,
     onClick,
@@ -2135,30 +2221,51 @@ var Button = (_a) => {
     "hasFullWidth",
     "icon",
     "iconPosition",
+    "iconBefore",
+    "iconAfter",
     "logoSrc",
     "hasLoader",
     "isDisabled",
+    "ariaDisabled",
     "htmlTag",
     "interactionName",
     "onClick",
     "refHandler"
   ]);
-  const buttonIcon = /* @__PURE__ */ React7.createElement(
+  const legacyIconLeft = icon && iconPosition === "left" ? icon : null;
+  const iconBeforeElement = iconBefore || legacyIconLeft ? /* @__PURE__ */ React7.createElement(
     IconSection,
     {
       hasLoader,
-      paddingLeft: children && iconPosition === "right" && iconGap,
-      paddingRight: children && iconPosition === "left" && iconGap
+      paddingLeft: "0",
+      paddingRight: children ? iconGap : "0"
     },
     /* @__PURE__ */ React7.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__ */ React7.createElement(
+    IconSection,
+    {
+      hasLoader,
+      paddingLeft: children ? iconGap : "0",
+      paddingRight: "unset"
+    },
+    /* @__PURE__ */ React7.createElement(
+      icon_default,
+      {
+        icon: legacyIconRight || iconAfter,
+        color: "currentColor",
+        size: sizesStyles[size].iconSize
+      }
+    )
+  ) : null;
   const onClickWithPressTracing = useCallback(
     (event) => {
       if (interactionName) {
@@ -2178,6 +2285,7 @@ var Button = (_a) => {
       iconPosition,
       logoSrc,
       disabled: isDisabled,
+      ariaDisabled,
       as: htmlTag,
       hasChildren: children,
       ref: (ref) => refHandler && refHandler(ref)
@@ -2185,7 +2293,7 @@ var Button = (_a) => {
       onClick: interactionName === void 0 ? onClick : onClickWithPressTracing
     }),
     hasLoader && /* @__PURE__ */ React7.createElement(LoaderSection, null, /* @__PURE__ */ React7.createElement(loader_default, { color: "currentColor" })),
-    icon && iconPosition === "left" && buttonIcon,
+    iconBeforeElement,
     logoSrc && /* @__PURE__ */ React7.createElement(
       LogoImage,
       {
@@ -2199,7 +2307,7 @@ var Button = (_a) => {
       }
     ),
     /* @__PURE__ */ React7.createElement(ChildrenSection, { hasLoader }, children),
-    icon && iconPosition === "right" && buttonIcon
+    iconAfterElement
   );
 };
 var availableSizes2 = Object.keys(sizesStyles);
@@ -3344,10 +3452,17 @@ var getDownshiftEnvironment = (container) => {
 };
 
 // src/components/icon/available-icons/chevron-down.tsx
-import ChevronDownIcon from "@atlaskit/icon/utility/chevron-down";
 import * as React20 from "react";
 function SvgChevronDown() {
-  return /* @__PURE__ */ React20.createElement(ChevronDownIcon, { 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
@@ -4527,7 +4642,9 @@ import React29, {
   useEffect as useEffect4,
   useState as useState2,
   useMemo,
-  useRef as useRef2
+  forwardRef as forwardRef3,
+  useRef as useRef2,
+  useCallback as useCallback2
 } from "react";
 import { useLayer as useLayer2 } from "react-laag";
 import ResizeObserver2 from "resize-observer-polyfill";
@@ -4860,182 +4977,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 = useRef2(null);
-  const [inputValue, setInputValue] = useState2("");
-  const [downshiftIsOpen, setDownshiftIsOpen] = useState2(false);
-  const [prevSelectedItem, setPrevSelectedItem] = useState2(
-    getSelectedOption2(selectedOptionValue, options)
-  );
-  const [selectedItem, setSelectedItem] = useState2(
-    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 } = useLayer2({
-    isOpen: downshiftIsOpen,
-    container,
-    ResizeObserver: ResizeObserver2,
-    placement: menuPositions[menuPosition],
-    auto: true,
-    snap: true
-  });
-  useEffect4(() => {
-    if (didSelectedOptionValueChange2(selectedOptionValue, prevSelectedItem)) {
-      const item = getSelectedOption2(selectedOptionValue, options);
-      setPrevSelectedItem(item);
-      setSelectedItem(item);
-      setInputValue("");
-    }
-  }, [selectedOptionValue, options, prevSelectedItem]);
-  useEffect4(() => {
-    var _a2;
-    onOpenChange && onOpenChange(downshiftIsOpen);
-    if (!downshiftIsOpen) {
-      (_a2 = inputRef.current) == null ? void 0 : _a2.blur();
-    }
-  }, [downshiftIsOpen, onOpenChange]);
-  const hasAvailableOptions = useMemo(() => {
-    if (!Array.isArray(options)) {
-      return false;
+var Typeahead = forwardRef3(
+  (_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 = useRef2(null);
+    const inputRef = useCallback2(
+      (node) => {
+        internalInputRef.current = node;
+        if (ref) {
+          typeof ref === "function" ? ref(node) : ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const [inputValue, setInputValue] = useState2("");
+    const [downshiftIsOpen, setDownshiftIsOpen] = useState2(false);
+    const [prevSelectedItem, setPrevSelectedItem] = useState2(
+      getSelectedOption2(selectedOptionValue, options)
+    );
+    const [selectedItem, setSelectedItem] = useState2(
+      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 === Downshift2.stateChangeTypes.keyDownEscape) {
-        setDownshiftIsOpen(false);
-        return { isOpen: false };
+    const { layerProps, triggerProps, renderLayer, triggerBounds } = useLayer2({
+      isOpen: downshiftIsOpen,
+      container,
+      ResizeObserver: ResizeObserver2,
+      placement: menuPositions[menuPosition],
+      auto: true,
+      snap: true
+    });
+    useEffect4(() => {
+      if (didSelectedOptionValueChange2(selectedOptionValue, prevSelectedItem)) {
+        const item = getSelectedOption2(selectedOptionValue, options);
+        setPrevSelectedItem(item);
+        setSelectedItem(item);
+        setInputValue("");
+      }
+    }, [selectedOptionValue, options, prevSelectedItem]);
+    useEffect4(() => {
+      var _a2;
+      onOpenChange && onOpenChange(downshiftIsOpen);
+      if (!downshiftIsOpen) {
+        (_a2 = internalInputRef.current) == null ? void 0 : _a2.blur();
+      }
+    }, [downshiftIsOpen, onOpenChange]);
+    const hasAvailableOptions = 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 === Downshift2.stateChangeTypes.keyDownEscape) {
+          setDownshiftIsOpen(false);
+          return { isOpen: false };
+        }
+        setDownshiftIsOpen(changes.isOpen);
       }
-      setDownshiftIsOpen(changes.isOpen);
-    }
-    return changes;
-  };
-  return /* @__PURE__ */ React29.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ React29.createElement(Downshift2, __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__ */ React29.createElement("div", { role: "presentation" }, /* @__PURE__ */ React29.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ React29.createElement(
-        TypeaheadHeader,
-        {
-          inputRef,
-          selectedItem: selectedItem2,
-          selectedOptionValue,
-          placeholder,
-          isDisabled,
-          options,
-          getInputProps,
-          ariaMenuName,
-          inputValue,
-          handleInputValueChange,
-          isOpen: downshiftIsOpen && isOpen,
-          onInputFocus: () => {
-            if (hasAvailableOptions || isLoading) {
+      return changes;
+    };
+    return /* @__PURE__ */ React29.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ React29.createElement(Downshift2, __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__ */ React29.createElement("div", { role: "presentation" }, /* @__PURE__ */ React29.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ React29.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__ */ React29.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__ */ React29.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__ */ React29.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__ */ React29.createElement(ErrorMessage2, null, errorMessage) : null)
-    );
-  }));
-};
+        ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ React29.createElement(ErrorMessage2, null, errorMessage) : null)
+      );
+    }));
+  }
+);
+Typeahead.displayName = "Typeahead";
 var typeahead_default = Typeahead;
 
 // src/components/dropdown/dropdown.tsx
@@ -5195,7 +5322,7 @@ import React33, { isValidElement } from "react";
 
 // src/components/radio/radio.tsx
 import styled25 from "@emotion/styled";
-import React31, { forwardRef as forwardRef3 } from "react";
+import React31, { forwardRef as forwardRef4 } from "react";
 var RadioLabel = styled25.label`
   display: block;
   position: relative;
@@ -5261,7 +5388,7 @@ var RadioBox = styled25.span`
     background-color: ${getColorValue("white")};
   }
 `;
-var Radio = forwardRef3(
+var Radio = forwardRef4(
   (_a, ref) => {
     var _b = _a, {
       isDisabled,
@@ -5351,7 +5478,7 @@ var SwitchInput = styled26.input`
   height: ${(props) => sizes2[props.switchSize].switchHeight}px;
 
   &:focus-visible ~ .SwitchBox {
-    ${getFocusRing()};
+    ${getOffsetFocusRing()};
   }
   &:not(:checked) {
     & + .SwitchBox {
@@ -5402,14 +5529,16 @@ var Switch = (_a) => {
     onChange,
     size = "medium",
     ariaLabelledby,
-    ariaLabel
+    ariaLabel,
+    ariaDescribedby
   } = _b, props = __objRest(_b, [
     "isActive",
     "isDisabled",
     "onChange",
     "size",
     "ariaLabelledby",
-    "ariaLabel"
+    "ariaLabel",
+    "ariaDescribedby"
   ]);
   if (ariaLabelledby && ariaLabel) {
     throw new Error(
@@ -5426,6 +5555,7 @@ var Switch = (_a) => {
       switchSize: size,
       "aria-labelledby": ariaLabelledby,
       "aria-label": ariaLabel,
+      "aria-describedby": ariaDescribedby,
       "aria-checked": isActive
     })
   ), /* @__PURE__ */ React32.createElement(
@@ -5547,10 +5677,10 @@ function useOnClickOutside(ref, handler) {
 }
 
 // src/hooks/use-focused-element.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect6, useState as useState4 } from "react";
 function useFocusedElement(ref) {
   const [isFocused, setIsFocused] = useState4(false);
-  const handleFocus = useCallback2(
+  const handleFocus = useCallback3(
     (e) => {
       const currentRef = ref.current;
       if (e.type === "focusin" && e.target === currentRef) {
@@ -5559,7 +5689,7 @@ function useFocusedElement(ref) {
     },
     [ref]
   );
-  const handleBlur = useCallback2(
+  const handleBlur = useCallback3(
     (e) => {
       const currentRef = ref.current;
       if (e.type === "focusout" && e.target === currentRef) {
@@ -6517,20 +6647,22 @@ var ListRow = (_a) => {
     className,
     backgroundColor,
     onClick,
-    href
+    href,
+    role
   } = _b, props = __objRest(_b, [
     "children",
     "htmlTag",
     "className",
     "backgroundColor",
     "onClick",
-    "href"
+    "href",
+    "role"
   ]);
   const classNameFromProp = className ? ` ${className}` : ``;
   return /* @__PURE__ */ React43.createElement(
     ListRowWrapper,
     __spreadValues({
-      role: "row",
+      role,
       className: `ListRowWrapper${classNameFromProp}`,
       as: htmlTag,
       backgroundColor,
@@ -6581,7 +6713,7 @@ var Wrapper = styled35.div`
   ${(props) => props.scrollOffset && `margin: 0 ${negativeScrollOffset(props.scrollOffset)};
   `};
 `;
-var TabsNav = styled35.nav`
+var TabsNav = styled35.div`
   --activeIndicatorHeight: 3px;
 
   display: flex;
@@ -6597,32 +6729,20 @@ var TabsNav = styled35.nav`
     display: none;
   }
 
-  li {
+  > * {
     ${(props) => props.hasFullTabs && `flex: 1 0`};
     &:not(:first-of-type) {
       margin-left: 1rem;
     }
   }
 
-  li > * {
-    width: 100%;
-  }
-
-  ul {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-  }
-
-  ul:after {
+  ::after {
     content: '';
     flex-shrink: 0;
     ${(props) => props.scrollOffset && getSize("width", props.scrollOffset)};
   }
 `;
-var TabsNavPilled = styled35.nav`
+var TabsNavPilled = styled35.div`
   ${getRadius("200")};
   background-color: var(--lns-color-backgroundSecondary);
 
@@ -6638,23 +6758,11 @@ var TabsNavPilled = styled35.nav`
     display: none;
   }
 
-  li {
+  * {
     flex: 1 0;
   }
 
-  li > * {
-    width: 100%;
-  }
-
-  ul {
-    display: flex;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-  }
-
-  ul:after {
+  ::after {
     content: '';
     flex-shrink: 0;
     ${(props) => props.scrollOffset && getSize("width", props.scrollOffset)};
@@ -6760,18 +6868,31 @@ var Tab = (_a) => {
   ]);
   const { isPilledDesign } = React44.useContext(TabsContext);
   if (isPilledDesign) {
-    return /* @__PURE__ */ React44.createElement("li", null, /* @__PURE__ */ React44.createElement(
+    return /* @__PURE__ */ React44.createElement(
       TabWrapperPilled,
       __spreadValues({
         as: htmlTag,
         isActive,
-        icon
+        icon,
+        role: "tab",
+        "aria-selected": isActive
       }, props),
       icon && /* @__PURE__ */ React44.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ React44.createElement(icon_default, { icon, color: "currentColor" })),
       children
-    ));
+    );
   }
-  return /* @__PURE__ */ React44.createElement("li", null, /* @__PURE__ */ React44.createElement(TabWrapper, __spreadValues({ as: htmlTag, isActive, icon }, props), icon && /* @__PURE__ */ React44.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ React44.createElement(icon_default, { icon, color: "currentColor" })), children));
+  return /* @__PURE__ */ React44.createElement(
+    TabWrapper,
+    __spreadValues({
+      as: htmlTag,
+      isActive,
+      icon,
+      role: "tab",
+      "aria-selected": isActive
+    }, props),
+    icon && /* @__PURE__ */ React44.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ React44.createElement(icon_default, { icon, color: "currentColor" })),
+    children
+  );
 };
 var Tabs = (_a) => {
   var _b = _a, {
@@ -6791,17 +6912,19 @@ var Tabs = (_a) => {
     TabsNavPilled,
     __spreadValues({
       hasFullTabs,
-      scrollOffset
+      scrollOffset,
+      role: "tablist"
     }, props),
-    /* @__PURE__ */ React44.createElement("ul", null, children)
+    children
   ) : /* @__PURE__ */ React44.createElement(
     TabsNav,
     __spreadValues({
       hasFullTabs,
       scrollOffset,
-      hasBottomBorder
+      hasBottomBorder,
+      role: "tablist"
     }, props),
-    /* @__PURE__ */ React44.createElement("ul", null, children)
+    children
   );
   if (scrollOffset) {
     return /* @__PURE__ */ React44.createElement(Wrapper, { scrollOffset }, tabsContent);
@@ -7332,70 +7455,234 @@ var ColorPicker = (_a) => {
 };
 var color_picker_default = ColorPicker;
 
-// src/illustrations/accounts-and-billing.js
-import * as React50 from "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/components/ellipses-loader/ellipses-loader.tsx
+import { keyframes as keyframes3 } from "@emotion/react";
+import styled41 from "@emotion/styled";
+import React50 from "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) => keyframes3`
+  0%, 40%, 100% {
+    transform: translateY(50%);
+  }
+  20% {
+    transform: translateY(calc(50% - ${bounceDistance}));
+  }
+`;
+var EllipsesLoaderWrapper = styled41.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: ${(props) => getHeight(props)};
+  width: ${(props) => getTotalSize2(props)};
+  gap: ${(props) => getGap(props)};
+`;
+var Dot2 = styled41.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__ */ React50.createElement(EllipsesLoaderWrapper, __spreadValues({ size }, props), /* @__PURE__ */ React50.createElement(Dot2, { color, size, delay: 0 }), /* @__PURE__ */ React50.createElement(Dot2, { color, size, delay: 0.2 }), /* @__PURE__ */ React50.createElement(Dot2, { color, size, delay: 0.4 }));
+};
+var availableSizes3 = Object.keys(sizes3);
+var ellipses_loader_default = EllipsesLoader;
+
+// src/components/waveform-loader/waveform-loader.tsx
+import { keyframes as keyframes4 } from "@emotion/react";
+import styled42 from "@emotion/styled";
+import React51 from "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 = keyframes4`
+  0%, 100% {
+    transform: scaleY(0.3);
+  }
+  50% {
+    transform: scaleY(1);
+  }
+`;
+var backgroundAnimation = keyframes4`
+  0% {
+    background-position: 0% center;
+  }
+  100% {
+    background-position: 100% center;
+  }
+`;
+var fadeIn = keyframes4`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+var WaveformLoaderWrapper = styled42.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-evenly;
+  height: ${(props) => getTotalSize3(props)};
+  width: ${(props) => getTotalSize3(props)};
+  position: relative;
+`;
+var Bar = styled42.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__ */ React51.createElement(Bar, { key: index, index, size, speed: speed3, color }));
+  return /* @__PURE__ */ React51.createElement(WaveformLoaderWrapper, __spreadValues({ size, color }, props), barsList);
+};
+var availableSizes4 = Object.keys(sizes4);
+var availableSpeeds = Object.keys(speeds);
+var waveform_loader_default = WaveformLoader;
+
+// src/illustrations/accounts-and-billing.js
+import * as React52 from "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
-import * as React51 from "react";
+import * as React53 from "react";
 function IllustrationInvite(props) {
-  return /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React53.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React51.createElement(
+    /* @__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__ */ React51.createElement(
+    /* @__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__ */ React51.createElement(
+    /* @__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",
@@ -7407,23 +7694,23 @@ function IllustrationInvite(props) {
 var invite_default = IllustrationInvite;
 
 // src/illustrations/archived.js
-import * as React52 from "react";
+import * as React54 from "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",
@@ -7435,16 +7722,16 @@ function IllustrationArchived(props) {
 var archived_default = IllustrationArchived;
 
 // src/illustrations/lead-with-transparency.js
-import * as React53 from "react";
+import * as React55 from "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",
@@ -7456,16 +7743,16 @@ function IllustrationLeadwithTransparency(props) {
 var lead_with_transparency_default = IllustrationLeadwithTransparency;
 
 // src/illustrations/ask-for-more.js
-import * as React54 from "react";
+import * as React56 from "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",
@@ -7477,16 +7764,16 @@ function IllustrationAskforMore(props) {
 var ask_for_more_default = IllustrationAskforMore;
 
 // src/illustrations/learning-and-development.js
-import * as React55 from "react";
+import * as React57 from "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",
@@ -7495,7 +7782,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React57.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7504,7 +7791,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React57.createElement(
       "circle",
       {
         cx: 70.71,
@@ -7519,16 +7806,16 @@ function IllustrationLearningDevelopment(props) {
 var learning_and_development_default = IllustrationLearningDevelopment;
 
 // src/illustrations/business-plan.js
-import * as React56 from "react";
+import * as React58 from "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",
@@ -7542,23 +7829,23 @@ function IllustrationBusinessPlan(props) {
 var business_plan_default = IllustrationBusinessPlan;
 
 // src/illustrations/loom-plans.js
-import * as React57 from "react";
+import * as React59 from "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",
@@ -7570,16 +7857,16 @@ function IllustrationLoomPlans(props) {
 var loom_plans_default = IllustrationLoomPlans;
 
 // src/illustrations/collaborate-with-teammates.js
-import * as React58 from "react";
+import * as React60 from "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",
@@ -7593,16 +7880,16 @@ function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
 var collaborate_with_teammates_default = IllustrationCollaboratewithTeammatesSharedLibrary;
 
 // src/illustrations/option-grants.js
-import * as React59 from "react";
+import * as React61 from "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",
@@ -7614,16 +7901,16 @@ function IllustrationOptionGrants(props) {
 var option_grants_default = IllustrationOptionGrants;
 
 // src/illustrations/community.js
-import * as React60 from "react";
+import * as React62 from "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",
@@ -7637,16 +7924,16 @@ function IllustrationCommunity(props) {
 var community_default = IllustrationCommunity;
 
 // src/illustrations/community-alt.js
-import * as React61 from "react";
+import * as React63 from "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",
@@ -7660,16 +7947,16 @@ function IllustrationCommunityAlt(props) {
 var community_alt_default = IllustrationCommunityAlt;
 
 // src/illustrations/parental-leave.js
-import * as React62 from "react";
+import * as React64 from "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",
@@ -7681,16 +7968,16 @@ function IllustrationParentalLeave(props) {
 var parental_leave_default = IllustrationParentalLeave;
 
 // src/illustrations/content-limit.js
-import * as React63 from "react";
+import * as React65 from "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",
@@ -7704,16 +7991,16 @@ function IllustrationContentLimit(props) {
 var content_limit_default = IllustrationContentLimit;
 
 // src/illustrations/pto.js
-import * as React64 from "react";
+import * as React66 from "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",
@@ -7727,16 +8014,16 @@ function IllustrationPto(props) {
 var pto_default = IllustrationPto;
 
 // src/illustrations/custom-branding.js
-import * as React65 from "react";
+import * as React67 from "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",
@@ -7748,53 +8035,53 @@ function IllustrationCustomBranding(props) {
 var custom_branding_default = IllustrationCustomBranding;
 
 // src/illustrations/record.js
-import * as React66 from "react";
+import * as React68 from "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
-import * as React67 from "react";
+import * as React69 from "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",
@@ -7806,16 +8093,16 @@ function IllustrationDesktopAppandChromeExtension(props) {
 var desktop_app_and_chrome_extension_default = IllustrationDesktopAppandChromeExtension;
 
 // src/illustrations/remote-first.js
-import * as React68 from "react";
+import * as React70 from "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",
@@ -7824,7 +8111,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",
@@ -7833,7 +8120,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",
@@ -7847,23 +8134,23 @@ function IllustrationRemoteFirst(props) {
 var remote_first_default = IllustrationRemoteFirst;
 
 // src/illustrations/device-compatibility.js
-import * as React69 from "react";
+import * as React71 from "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",
@@ -7875,17 +8162,17 @@ function IllustrationDeviceCompatibility(props) {
 var device_compatibility_default = IllustrationDeviceCompatibility;
 
 // src/illustrations/roadmap.js
-import * as React70 from "react";
+import * as React72 from "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",
@@ -7897,16 +8184,16 @@ function IllustrationRoadmap(props) {
 var roadmap_default = IllustrationRoadmap;
 
 // src/illustrations/downgrade.js
-import * as React71 from "react";
+import * as React73 from "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",
@@ -7920,16 +8207,16 @@ function IllustrationDowngrade(props) {
 var downgrade_default = IllustrationDowngrade;
 
 // src/illustrations/screenshot.js
-import * as React72 from "react";
+import * as React74 from "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",
@@ -7943,16 +8230,16 @@ function IllustrationScreenshot(props) {
 var screenshot_default = IllustrationScreenshot;
 
 // src/illustrations/embrace-the-weird.js
-import * as React73 from "react";
+import * as React75 from "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",
@@ -7966,40 +8253,40 @@ function IllustrationEmbracetheWeird(props) {
 var embrace_the_weird_default = IllustrationEmbracetheWeird;
 
 // src/illustrations/share-with-your-team.js
-import * as React74 from "react";
+import * as React76 from "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
-import * as React75 from "react";
+import * as React77 from "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",
@@ -8011,30 +8298,30 @@ function IllustrationEnterprisePlan(props) {
 var enterprise_plan_default = IllustrationEnterprisePlan;
 
 // src/illustrations/share.js
-import * as React76 from "react";
+import * as React78 from "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",
@@ -8046,39 +8333,39 @@ function IllustrationShare(props) {
 var share_default = IllustrationShare;
 
 // src/illustrations/faq-and-security.js
-import * as React77 from "react";
+import * as React79 from "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
-import * as React78 from "react";
+import * as React80 from "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",
@@ -8090,16 +8377,16 @@ function IllustrationStarred(props) {
 var starred_default = IllustrationStarred;
 
 // src/illustrations/five-minute-limit.js
-import * as React79 from "react";
+import * as React81 from "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",
@@ -8113,16 +8400,16 @@ function Illustration5MinuteLimit(props) {
 var five_minute_limit_default = Illustration5MinuteLimit;
 
 // src/illustrations/starter-plus-plan.js
-import * as React80 from "react";
+import * as React82 from "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",
@@ -8136,16 +8423,16 @@ function IllustrationStarterPlusPlan(props) {
 var starter_plus_plan_default = IllustrationStarterPlusPlan;
 
 // src/illustrations/getting-started.js
-import * as React81 from "react";
+import * as React83 from "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",
@@ -8154,7 +8441,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",
@@ -8163,7 +8450,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",
@@ -8172,7 +8459,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",
@@ -8186,23 +8473,23 @@ function IllustrationGettingStarted(props) {
 var getting_started_default = IllustrationGettingStarted;
 
 // src/illustrations/strong-upload-speed.js
-import * as React82 from "react";
+import * as React84 from "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",
@@ -8214,16 +8501,16 @@ function IllustrationStrongUploadSpeed(props) {
 var strong_upload_speed_default = IllustrationStrongUploadSpeed;
 
 // src/illustrations/growth-through-empathy.js
-import * as React83 from "react";
+import * as React85 from "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",
@@ -8232,7 +8519,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",
@@ -8241,7 +8528,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",
@@ -8250,7 +8537,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",
@@ -8259,7 +8546,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",
@@ -8268,7 +8555,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",
@@ -8277,7 +8564,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",
@@ -8291,16 +8578,16 @@ function IllustrationGrowththroughEmpathy(props) {
 var growth_through_empathy_default = IllustrationGrowththroughEmpathy;
 
 // src/illustrations/troubleshooting.js
-import * as React84 from "react";
+import * as React86 from "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",
@@ -8310,7 +8597,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",
@@ -8319,7 +8606,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",
@@ -8328,7 +8615,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",
@@ -8342,16 +8629,16 @@ function IllustrationTroubleshooting(props) {
 var troubleshooting_default = IllustrationTroubleshooting;
 
 // src/illustrations/health-plans.js
-import * as React85 from "react";
+import * as React87 from "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",
@@ -8365,16 +8652,16 @@ function IllustrationHealthPlans(props) {
 var health_plans_default = IllustrationHealthPlans;
 
 // src/illustrations/upgrade.js
-import * as React86 from "react";
+import * as React88 from "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",
@@ -8388,16 +8675,16 @@ function IllustrationUpgrade(props) {
 var upgrade_default = IllustrationUpgrade;
 
 // src/illustrations/how-to-use-loom.js
-import * as React87 from "react";
+import * as React89 from "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",
@@ -8409,16 +8696,16 @@ function IllustrationHowtoUseLoom(props) {
 var how_to_use_loom_default = IllustrationHowtoUseLoom;
 
 // src/illustrations/upload-drag-and-drop.js
-import * as React88 from "react";
+import * as React90 from "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",
@@ -8430,16 +8717,16 @@ function IllustrationUploadDragAndDrop(props) {
 var upload_drag_and_drop_default = IllustrationUploadDragAndDrop;
 
 // src/illustrations/use-cases.js
-import * as React89 from "react";
+import * as React91 from "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",
@@ -8451,16 +8738,16 @@ function IllustrationUseCases(props) {
 var use_cases_default = IllustrationUseCases;
 
 // src/illustrations/invite-members.js
-import * as React90 from "react";
+import * as React92 from "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",
@@ -8474,45 +8761,45 @@ function IllustrationInviteMembers(props) {
 var invite_members_default = IllustrationInviteMembers;
 
 // src/illustrations/wellness.js
-import * as React91 from "react";
+import * as React93 from "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
-import * as React92 from "react";
+import * as React94 from "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",
@@ -8521,7 +8808,7 @@ function IllustrationComments(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React94.createElement(
       "path",
       {
         fill: "currentColor",
@@ -8533,16 +8820,16 @@ function IllustrationComments(props) {
 var comments_default = IllustrationComments;
 
 // src/illustrations/folders-empty-state-mobile.js
-import * as React93 from "react";
+import * as React95 from "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",
@@ -8551,7 +8838,7 @@ function IllutrationFoldersEmptyStateMobile(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8565,23 +8852,23 @@ function IllutrationFoldersEmptyStateMobile(props) {
 var folders_empty_state_mobile_default = IllutrationFoldersEmptyStateMobile;
 
 // src/illustrations/help-ios.js
-import * as React94 from "react";
+import * as React96 from "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",
@@ -8595,17 +8882,17 @@ function IllustrationHelpIos(props) {
 var help_ios_default = IllustrationHelpIos;
 
 // src/illustrations/my-videos-empty-state-mobile.js
-import * as React95 from "react";
+import * as React97 from "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",
@@ -8619,16 +8906,16 @@ function IllustrationMyVideosEmptyStateMobile(props) {
 var my_videos_empty_state_mobile_default = IllustrationMyVideosEmptyStateMobile;
 
 // src/illustrations/recents-empty-state-mobile.js
-import * as React96 from "react";
+import * as React98 from "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",
@@ -8642,16 +8929,16 @@ function IllustrationRecentsEmptyStateMobile(props) {
 var recents_empty_state_mobile_default = IllustrationRecentsEmptyStateMobile;
 
 // src/illustrations/chrome-notifications-empty-state.js
-import * as React97 from "react";
+import * as React99 from "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,
@@ -8661,7 +8948,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",
@@ -8669,8 +8956,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",
@@ -8678,7 +8965,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.createElement(
       "circle",
       {
         cx: 48,
@@ -8688,7 +8975,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",
@@ -8696,7 +8983,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.createElement(
       "circle",
       {
         cx: 15.84,
@@ -8706,7 +8993,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",
@@ -8714,7 +9001,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React97.createElement(
+    /* @__PURE__ */ React99.createElement(
       "circle",
       {
         cx: 80.16,
@@ -8739,6 +9026,7 @@ export {
   container_default as Container,
   distribute_default as Distribute,
   dropdown_default as Dropdown,
+  ellipses_loader_default as EllipsesLoader,
   error_container_default as ErrorContainer,
   form_field_default as FormField,
   icon_default as Icon,
@@ -8827,6 +9115,7 @@ export {
   tooltip_default as Tooltip,
   TooltipBox,
   typeahead_default as Typeahead,
+  waveform_loader_default as WaveformLoader,
   accessibilityRules,
   alignSelfRules,
   alphaFunction,
@@ -8844,6 +9133,8 @@ export {
   flexDirectionRules,
   flexItemRules,
   flexWrapRules,
+  fontSettingVariables,
+  fontSettings,
   fontWeightRules,
   fontWeightVariables,
   fontWeights,
@@ -8856,6 +9147,7 @@ export {
   getColorsCssVarsObject,
   getCssVarsFromObject,
   getFocusRing,
+  getFontSetting,
   getFontWeight,
   getListContainer,
   getMediaCss,