@loomhq/lens 12.1.0 → 12.2.0

package/dist/cjs/index.js

@@ -156,6 +156,7 @@ __export(src_exports, {
   Toast: () => toast_default,
   Tooltip: () => tooltip_default,
   TooltipBox: () => TooltipBox,
+  Typeahead: () => typeahead_default,
   accessibilityRules: () => accessibilityRules,
   alignSelfRules: () => alignSelfRules,
   alphaFunction: () => alphaFunction,
@@ -253,7 +254,7 @@ __export(src_exports, {
   widthRules: () => widthRules
 });
 module.exports = __toCommonJS(src_exports);
-var import_react55 = require("@emotion/react");
+var import_react56 = require("@emotion/react");
 
 // src/colors.ts
 var percent = (number, percentage) => Math.round(number * percentage / 100);
@@ -2477,8 +2478,231 @@ var Spacer = (_a) => {
 var spacer_default = Spacer;
 
 // src/components/text-input/text-input.tsx
+var import_styled9 = __toESM(require("@emotion/styled"));
+var import_react14 = __toESM(require("react"));
+
+// src/components/align/align.tsx
 var import_styled7 = __toESM(require("@emotion/styled"));
 var import_react12 = __toESM(require("react"));
+var alignmentsPlaceItems = {
+  topLeft: "start",
+  topCenter: "start center",
+  topRight: "start end",
+  centerLeft: "center start",
+  center: "center",
+  centerRight: "center end",
+  bottomLeft: "end start",
+  bottomCenter: "end center",
+  bottomRight: "end"
+};
+var getPlaceItems = (alignment) => {
+  if (Array.isArray(alignment)) {
+    return alignment.map(
+      (alignmentArrayItem) => alignmentsPlaceItems[alignmentArrayItem]
+    );
+  }
+  if (typeof alignment === "object") {
+    const alignmentsPlaceItemsObject = {};
+    Object.entries(alignment).forEach(([key, value]) => {
+      return alignmentsPlaceItemsObject[key] = alignmentsPlaceItems[value];
+    });
+    return alignmentsPlaceItemsObject;
+  }
+  return alignmentsPlaceItems[alignment];
+};
+var AlignWrapper = import_styled7.default.div`
+  width: 100%;
+  height: 100%;
+  display: grid;
+  ${(props) => getResponsiveOneOf("place-items", getPlaceItems(props.alignment))};
+`;
+var Align = (_a) => {
+  var _b = _a, {
+    children,
+    alignment = "center",
+    htmlTag = "div"
+  } = _b, props = __objRest(_b, [
+    "children",
+    "alignment",
+    "htmlTag"
+  ]);
+  return /* @__PURE__ */ import_react12.default.createElement(AlignWrapper, __spreadValues({ alignment, as: htmlTag }, props), children);
+};
+var availableAlignments = Object.keys(alignmentsPlaceItems);
+var align_default = Align;
+
+// src/components/container/container.tsx
+var import_styled8 = __toESM(require("@emotion/styled"));
+var import_react13 = __toESM(require("react"));
+var getBorderSideAndColor = (side, color, width) => {
+  const borderColor = color ? color : "border";
+  const borderWidth = getSizeValue(width);
+  const borderStyle = `${borderWidth} solid ${getColorValue(borderColor)}`;
+  if (side) {
+    if (side === "all") {
+      return `border: ${borderStyle};`;
+    }
+    return `border-${side}: ${borderStyle};`;
+  }
+};
+var ContainerWrapper = import_styled8.default.div`
+  ${(props) => props.position && `position: ${props.position}`};
+  ${(props) => props.overflow && `overflow: ${props.overflow}`};
+  ${(props) => props.backgroundColor && `background-color: ${getColorValue(props.backgroundColor)}`};
+  ${(props) => props.backgroundImage && `background-image: ${props.backgroundImage}`}
+  ${(props) => props.contentColor && `color: ${getColorValue(props.contentColor)}`};
+  ${(props) => getBorderSideAndColor(
+  props.borderSide,
+  props.borderColor,
+  props.borderWidth
+)};
+  ${(props) => getRadius(props.radius)};
+  ${(props) => getShadow(props.shadow)};
+  ${(props) => getSize("width", props.width)};
+  ${(props) => getSize("height", props.height)};
+  ${(props) => getSize("min-width", props.minWidth)};
+  ${(props) => getSize("min-height", props.minHeight)};
+  ${(props) => getSize("max-width", props.maxWidth)};
+  ${(props) => getSize("max-height", props.maxHeight)};
+  ${(props) => getSize("padding", props.padding)};
+  ${(props) => getSize("padding-top", props.paddingTop)};
+  ${(props) => getSize("padding-right", props.paddingRight)};
+  ${(props) => getSize("padding-bottom", props.paddingBottom)};
+  ${(props) => getSize("padding-left", props.paddingLeft)};
+  ${(props) => getSize("margin", props.margin)};
+  ${(props) => getSize("margin-top", props.marginTop)};
+  ${(props) => getSize("margin-right", props.marginRight)};
+  ${(props) => getSize("margin-bottom", props.marginBottom)};
+  ${(props) => getSize("margin-left", props.marginLeft)};
+  ${(props) => getSize("top", props.top)};
+  ${(props) => getSize("right", props.right)};
+  ${(props) => getSize("bottom", props.bottom)};
+  ${(props) => getSize("left", props.left)};
+  ${(props) => props.zIndex && `z-index: ${props.zIndex}`};
+`;
+var Container = (_a) => {
+  var _b = _a, {
+    children,
+    backgroundColor,
+    backgroundImage,
+    contentColor,
+    borderColor,
+    radius,
+    borderSide,
+    borderWidth = "1px",
+    shadow,
+    padding,
+    paddingX,
+    paddingY,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    margin,
+    marginX,
+    marginY,
+    marginLeft,
+    marginRight,
+    marginTop,
+    marginBottom,
+    width,
+    height,
+    minWidth,
+    minHeight,
+    maxWidth,
+    maxHeight,
+    htmlTag = "div",
+    position,
+    overflow,
+    zIndex,
+    top,
+    bottom,
+    left,
+    right,
+    refHandler
+  } = _b, props = __objRest(_b, [
+    "children",
+    "backgroundColor",
+    "backgroundImage",
+    "contentColor",
+    "borderColor",
+    "radius",
+    "borderSide",
+    "borderWidth",
+    "shadow",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "paddingLeft",
+    "paddingRight",
+    "paddingTop",
+    "paddingBottom",
+    "margin",
+    "marginX",
+    "marginY",
+    "marginLeft",
+    "marginRight",
+    "marginTop",
+    "marginBottom",
+    "width",
+    "height",
+    "minWidth",
+    "minHeight",
+    "maxWidth",
+    "maxHeight",
+    "htmlTag",
+    "position",
+    "overflow",
+    "zIndex",
+    "top",
+    "bottom",
+    "left",
+    "right",
+    "refHandler"
+  ]);
+  return /* @__PURE__ */ import_react13.default.createElement(
+    ContainerWrapper,
+    __spreadValues({
+      backgroundColor,
+      backgroundImage,
+      contentColor,
+      borderColor,
+      radius,
+      borderSide,
+      shadow,
+      padding,
+      paddingLeft: paddingX || paddingLeft,
+      paddingRight: paddingX || paddingRight,
+      paddingTop: paddingY || paddingTop,
+      paddingBottom: paddingY || paddingBottom,
+      margin,
+      marginLeft: marginX || marginLeft,
+      marginRight: marginX || marginRight,
+      marginTop: marginY || marginTop,
+      marginBottom: marginY || marginBottom,
+      width,
+      height,
+      minWidth,
+      minHeight,
+      maxWidth,
+      maxHeight,
+      as: htmlTag,
+      position,
+      top,
+      bottom,
+      left,
+      right,
+      overflow,
+      zIndex,
+      borderWidth,
+      ref: (ref) => refHandler && refHandler(ref)
+    }, props),
+    children
+  );
+};
+var container_default = Container;
+
+// src/components/text-input/text-input.tsx
 var sizesStyles2 = {
   small: {
     height: u(4),
@@ -2518,7 +2742,7 @@ var inputRightPadding = (props) => {
   }
   return padding;
 };
-var InputField = import_styled7.default.input`
+var InputField = import_styled9.default.input`
   -webkit-appearance: none;
   font-family: inherit;
   width: 100%;
@@ -2561,11 +2785,11 @@ var InputField = import_styled7.default.input`
     color: ${getColorValue("bodyDimmed")};
   }
 `;
-var InputFieldWrapper = import_styled7.default.div`
+var InputFieldWrapper = import_styled9.default.div`
   position: relative;
   width: 100%;
 `;
-var IconSection2 = import_styled7.default.div`
+var IconSection2 = import_styled9.default.div`
   position: absolute;
   pointer-events: none;
   width: ${(props) => sizesStyles2[props.size].width};
@@ -2575,7 +2799,15 @@ var IconSection2 = import_styled7.default.div`
   align-items: center;
   justify-content: center;
 `;
-var AddOnWrapper = import_styled7.default.div`
+var Image = import_styled9.default.img`
+  height: 100%;
+  width: auto;
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+  opacity: ${({ isDisabled }) => isDisabled ? 0.5 : 1};
+`;
+var AddOnWrapper = import_styled9.default.div`
   position: absolute;
   height: 100%;
   display: flex;
@@ -2586,7 +2818,7 @@ var AddOnWrapper = import_styled7.default.div`
   top: 50%;
   transform: translateY(-50%);
 `;
-var TextInput = (0, import_react12.forwardRef)(
+var TextInput = (0, import_react14.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       placeholder,
@@ -2615,7 +2847,7 @@ var TextInput = (0, import_react12.forwardRef)(
       "size",
       "addOn"
     ]);
-    const inputField = /* @__PURE__ */ import_react12.default.createElement(
+    const inputField = /* @__PURE__ */ import_react14.default.createElement(
       InputField,
       __spreadValues({
         type,
@@ -2633,21 +2865,30 @@ var TextInput = (0, import_react12.forwardRef)(
         addOn
       }, props)
     );
-    return icon || addOn ? /* @__PURE__ */ import_react12.default.createElement(InputFieldWrapper, null, icon && /* @__PURE__ */ import_react12.default.createElement(IconSection2, { size }, /* @__PURE__ */ import_react12.default.createElement(
+    return icon || addOn ? /* @__PURE__ */ import_react14.default.createElement(InputFieldWrapper, null, icon && /* @__PURE__ */ import_react14.default.createElement(IconSection2, { size }, typeof icon === "string" ? /* @__PURE__ */ import_react14.default.createElement(
+      container_default,
+      {
+        radius: "50",
+        width: sizesStyles2[size].iconSize,
+        height: sizesStyles2[size].iconSize,
+        overflow: "hidden"
+      },
+      /* @__PURE__ */ import_react14.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react14.default.createElement(Image, { src: icon, alt: "", isDisabled }))
+    ) : /* @__PURE__ */ import_react14.default.createElement(
       icon_default,
       {
         icon,
         size: sizesStyles2[size].iconSize,
         color: getColorValue(isDisabled ? "disabledContent" : "body")
       }
-    )), inputField, addOn && /* @__PURE__ */ import_react12.default.createElement(AddOnWrapper, { size }, addOn)) : inputField;
+    )), inputField, addOn && /* @__PURE__ */ import_react14.default.createElement(AddOnWrapper, { size }, addOn)) : inputField;
   }
 );
 var text_input_default = TextInput;
 
 // src/components/distribute/distribute.tsx
-var import_styled8 = __toESM(require("@emotion/styled"));
-var import_react13 = __toESM(require("react"));
+var import_styled10 = __toESM(require("@emotion/styled"));
+var import_react15 = __toESM(require("react"));
 var alignments2 = {
   start: "flex-start",
   center: "center",
@@ -2690,7 +2931,7 @@ var getDirectionAndGap = (direction, gap) => {
   );
   return arrayToBreakpoints(gapsRulesets) + arrayToBreakpoints(directionsRulesets);
 };
-var DistributeWrapper = import_styled8.default.div`
+var DistributeWrapper = import_styled10.default.div`
   display: flex;
   flex-wrap: wrap;
   ${(props) => getDirectionAndGap(props.flexDirection, props.gap)};
@@ -2725,7 +2966,7 @@ var Distribute = (_a) => {
     console.warn(distributeDeprecatedWarning);
     alreadyWarned = true;
   }
-  return /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react15.default.createElement(
     DistributeWrapper,
     __spreadValues({
       gap,
@@ -2737,188 +2978,17 @@ var Distribute = (_a) => {
     children
   );
 };
-var availableAlignments = Object.keys(alignments2);
+var availableAlignments2 = Object.keys(alignments2);
 var distribute_default = Distribute;
 
-// src/components/container/container.tsx
-var import_styled9 = __toESM(require("@emotion/styled"));
-var import_react14 = __toESM(require("react"));
-var getBorderSideAndColor = (side, color, width) => {
-  const borderColor = color ? color : "border";
-  const borderWidth = getSizeValue(width);
-  const borderStyle = `${borderWidth} solid ${getColorValue(borderColor)}`;
-  if (side) {
-    if (side === "all") {
-      return `border: ${borderStyle};`;
-    }
-    return `border-${side}: ${borderStyle};`;
-  }
-};
-var ContainerWrapper = import_styled9.default.div`
-  ${(props) => props.position && `position: ${props.position}`};
-  ${(props) => props.overflow && `overflow: ${props.overflow}`};
-  ${(props) => props.backgroundColor && `background-color: ${getColorValue(props.backgroundColor)}`};
-  ${(props) => props.backgroundImage && `background-image: ${props.backgroundImage}`}
-  ${(props) => props.contentColor && `color: ${getColorValue(props.contentColor)}`};
-  ${(props) => getBorderSideAndColor(
-  props.borderSide,
-  props.borderColor,
-  props.borderWidth
-)};
-  ${(props) => getRadius(props.radius)};
-  ${(props) => getShadow(props.shadow)};
-  ${(props) => getSize("width", props.width)};
-  ${(props) => getSize("height", props.height)};
-  ${(props) => getSize("min-width", props.minWidth)};
-  ${(props) => getSize("min-height", props.minHeight)};
-  ${(props) => getSize("max-width", props.maxWidth)};
-  ${(props) => getSize("max-height", props.maxHeight)};
-  ${(props) => getSize("padding", props.padding)};
-  ${(props) => getSize("padding-top", props.paddingTop)};
-  ${(props) => getSize("padding-right", props.paddingRight)};
-  ${(props) => getSize("padding-bottom", props.paddingBottom)};
-  ${(props) => getSize("padding-left", props.paddingLeft)};
-  ${(props) => getSize("margin", props.margin)};
-  ${(props) => getSize("margin-top", props.marginTop)};
-  ${(props) => getSize("margin-right", props.marginRight)};
-  ${(props) => getSize("margin-bottom", props.marginBottom)};
-  ${(props) => getSize("margin-left", props.marginLeft)};
-  ${(props) => getSize("top", props.top)};
-  ${(props) => getSize("right", props.right)};
-  ${(props) => getSize("bottom", props.bottom)};
-  ${(props) => getSize("left", props.left)};
-  ${(props) => props.zIndex && `z-index: ${props.zIndex}`};
-`;
-var Container = (_a) => {
-  var _b = _a, {
-    children,
-    backgroundColor,
-    backgroundImage,
-    contentColor,
-    borderColor,
-    radius,
-    borderSide,
-    borderWidth = "1px",
-    shadow,
-    padding,
-    paddingX,
-    paddingY,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    margin,
-    marginX,
-    marginY,
-    marginLeft,
-    marginRight,
-    marginTop,
-    marginBottom,
-    width,
-    height,
-    minWidth,
-    minHeight,
-    maxWidth,
-    maxHeight,
-    htmlTag = "div",
-    position,
-    overflow,
-    zIndex,
-    top,
-    bottom,
-    left,
-    right,
-    refHandler
-  } = _b, props = __objRest(_b, [
-    "children",
-    "backgroundColor",
-    "backgroundImage",
-    "contentColor",
-    "borderColor",
-    "radius",
-    "borderSide",
-    "borderWidth",
-    "shadow",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "paddingLeft",
-    "paddingRight",
-    "paddingTop",
-    "paddingBottom",
-    "margin",
-    "marginX",
-    "marginY",
-    "marginLeft",
-    "marginRight",
-    "marginTop",
-    "marginBottom",
-    "width",
-    "height",
-    "minWidth",
-    "minHeight",
-    "maxWidth",
-    "maxHeight",
-    "htmlTag",
-    "position",
-    "overflow",
-    "zIndex",
-    "top",
-    "bottom",
-    "left",
-    "right",
-    "refHandler"
-  ]);
-  return /* @__PURE__ */ import_react14.default.createElement(
-    ContainerWrapper,
-    __spreadValues({
-      backgroundColor,
-      backgroundImage,
-      contentColor,
-      borderColor,
-      radius,
-      borderSide,
-      shadow,
-      padding,
-      paddingLeft: paddingX || paddingLeft,
-      paddingRight: paddingX || paddingRight,
-      paddingTop: paddingY || paddingTop,
-      paddingBottom: paddingY || paddingBottom,
-      margin,
-      marginLeft: marginX || marginLeft,
-      marginRight: marginX || marginRight,
-      marginTop: marginY || marginTop,
-      marginBottom: marginY || marginBottom,
-      width,
-      height,
-      minWidth,
-      minHeight,
-      maxWidth,
-      maxHeight,
-      as: htmlTag,
-      position,
-      top,
-      bottom,
-      left,
-      right,
-      overflow,
-      zIndex,
-      borderWidth,
-      ref: (ref) => refHandler && refHandler(ref)
-    }, props),
-    children
-  );
-};
-var container_default = Container;
-
 // src/components/error-container/error-container.tsx
-var import_styled11 = __toESM(require("@emotion/styled"));
-var import_react16 = __toESM(require("react"));
+var import_styled12 = __toESM(require("@emotion/styled"));
+var import_react17 = __toESM(require("react"));
 
 // src/components/arrange/arrange.tsx
-var import_styled10 = __toESM(require("@emotion/styled"));
-var import_react15 = __toESM(require("react"));
-var ArrangeWrapper = import_styled10.default.div`
+var import_styled11 = __toESM(require("@emotion/styled"));
+var import_react16 = __toESM(require("react"));
+var ArrangeWrapper = import_styled11.default.div`
   display: grid;
   ${(props) => getResponsiveOneOf("align-items", props.alignItems)};
   ${(props) => getResponsiveOneOf("justify-content", props.justifyContent)};
@@ -2982,7 +3052,7 @@ var Arrange = (_a) => {
   if (className || style) {
     console.warn(customStylesWarning);
   }
-  return /* @__PURE__ */ import_react15.default.createElement(
+  return /* @__PURE__ */ import_react16.default.createElement(
     ArrangeWrapper,
     __spreadValues({
       alignItems,
@@ -3008,13 +3078,13 @@ var arrange_default = Arrange;
 
 // src/components/icon/available-icons/alert-triangle.tsx
 var import_warning = __toESM(require("@atlaskit/icon/core/warning"));
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 function SvgAlertTriangle() {
-  return /* @__PURE__ */ React13.createElement(import_warning.default, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React14.createElement(import_warning.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/error-container/error-container.tsx
-var ErrorContainerBorder = import_styled11.default.div`
+var ErrorContainerBorder = import_styled12.default.div`
   position: relative;
   ::before {
     content: '';
@@ -3034,21 +3104,21 @@ var ErrorContainer = ({
   errorMessage = "Oops, that didn't work. Try again."
 }) => {
   if (!errorActive) {
-    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, children);
+    return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, children);
   }
-  return /* @__PURE__ */ import_react16.default.createElement(ErrorContainerBorder, null, /* @__PURE__ */ import_react16.default.createElement(arrange_default, { autoFlow: "row", gap: "small" }, children, errorMessage ? /* @__PURE__ */ import_react16.default.createElement(arrange_default, { gap: "xsmall" }, /* @__PURE__ */ import_react16.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react16.default.createElement(SvgAlertTriangle, null), size: 2, color: "danger" }), /* @__PURE__ */ import_react16.default.createElement(text_default, { size: "body-sm", color: "danger" }, errorMessage)) : null));
+  return /* @__PURE__ */ import_react17.default.createElement(ErrorContainerBorder, null, /* @__PURE__ */ import_react17.default.createElement(arrange_default, { autoFlow: "row", gap: "small" }, children, errorMessage ? /* @__PURE__ */ import_react17.default.createElement(arrange_default, { gap: "xsmall" }, /* @__PURE__ */ import_react17.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react17.default.createElement(SvgAlertTriangle, null), size: 2, color: "danger" }), /* @__PURE__ */ import_react17.default.createElement(text_default, { size: "body-sm", color: "danger" }, errorMessage)) : null));
 };
 var error_container_default = ErrorContainer;
 
 // src/components/layout/layout.tsx
-var import_styled12 = __toESM(require("@emotion/styled"));
-var import_react17 = __toESM(require("react"));
+var import_styled13 = __toESM(require("@emotion/styled"));
+var import_react18 = __toESM(require("react"));
 var alignments3 = {
   start: "flex-start",
   center: "center",
   end: "flex-end"
 };
-var LayoutWrapper = import_styled12.default.div`
+var LayoutWrapper = import_styled13.default.div`
   display: flex;
   ${(props) => getAlignmentStyles(props.alignment, alignments3)};
 
@@ -3056,7 +3126,7 @@ var LayoutWrapper = import_styled12.default.div`
     ${(props) => props.gap && getSize("margin-left", props.gap)};
   }
 `;
-var LayoutSectionWrapper = import_styled12.default.div`
+var LayoutSectionWrapper = import_styled13.default.div`
   min-width: 0px;
   flex-shrink: 0;
   ${(props) => getSize("width", props.width)};
@@ -3074,20 +3144,20 @@ var LayoutSection = (_a) => {
     "children"
   ]);
   console.warn(layoutDeprecatedWarning);
-  return /* @__PURE__ */ import_react17.default.createElement(LayoutSectionWrapper, __spreadValues({ width, maxWidth }, props), children);
+  return /* @__PURE__ */ import_react18.default.createElement(LayoutSectionWrapper, __spreadValues({ width, maxWidth }, props), children);
 };
-var Layout = class extends import_react17.Component {
+var Layout = class extends import_react18.Component {
   render() {
     console.warn(layoutDeprecatedWarning);
-    return /* @__PURE__ */ import_react17.default.createElement(LayoutWrapper, __spreadValues({}, this.props), this.props.children);
+    return /* @__PURE__ */ import_react18.default.createElement(LayoutWrapper, __spreadValues({}, this.props), this.props.children);
   }
 };
 Layout.Section = LayoutSection;
 var layout_default = Layout;
 
 // src/components/icon-button/icon-button.tsx
-var import_styled13 = __toESM(require("@emotion/styled"));
-var import_react18 = __toESM(require("react"));
+var import_styled14 = __toESM(require("@emotion/styled"));
+var import_react19 = __toESM(require("react"));
 var sizeStyles = {
   small: {
     size: u(3),
@@ -3105,7 +3175,7 @@ var sizeStyles = {
     radius: "var(--lns-radius-175)"
   }
 };
-var IconButtonBox = import_styled13.default.button`
+var IconButtonBox = import_styled14.default.button`
   background-color: ${(props) => getColorValue(
   props.isActive ? "backgroundActive" : props.backgroundColor
 ) || "transparent"};
@@ -3159,7 +3229,7 @@ var IconButtonBox = import_styled13.default.button`
     border: 0;
   }
 `;
-var IconButton = import_react18.default.forwardRef(
+var IconButton = import_react19.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       altText,
@@ -3180,7 +3250,7 @@ var IconButton = import_react18.default.forwardRef(
       "isDisabled",
       "size"
     ]);
-    return /* @__PURE__ */ import_react18.default.createElement(
+    return /* @__PURE__ */ import_react19.default.createElement(
       IconButtonBox,
       __spreadValues({
         "aria-label": altText,
@@ -3191,7 +3261,7 @@ var IconButton = import_react18.default.forwardRef(
         backgroundColor,
         ref
       }, props),
-      /* @__PURE__ */ import_react18.default.createElement(
+      /* @__PURE__ */ import_react19.default.createElement(
         icon_default,
         {
           icon,
@@ -3206,9 +3276,9 @@ IconButton.displayName = "IconButton";
 var icon_button_default = IconButton;
 
 // src/components/checkbox/checkbox.tsx
-var import_styled14 = __toESM(require("@emotion/styled"));
-var import_react19 = __toESM(require("react"));
-var SvgCheckboxCheck = (props) => /* @__PURE__ */ import_react19.default.createElement("svg", __spreadValues({ width: 12, height: 9, viewBox: "0 0 12 9", fill: "none" }, props), /* @__PURE__ */ import_react19.default.createElement(
+var import_styled15 = __toESM(require("@emotion/styled"));
+var import_react20 = __toESM(require("react"));
+var SvgCheckboxCheck = (props) => /* @__PURE__ */ import_react20.default.createElement("svg", __spreadValues({ width: 12, height: 9, viewBox: "0 0 12 9", fill: "none" }, props), /* @__PURE__ */ import_react20.default.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -3217,7 +3287,7 @@ var SvgCheckboxCheck = (props) => /* @__PURE__ */ import_react19.default.createE
     fill: "currentColor"
   }
 ));
-var SvgCheckboxMinus = (props) => /* @__PURE__ */ import_react19.default.createElement("svg", __spreadValues({ width: 12, height: 2, viewBox: "0 0 12 2", fill: "none" }, props), /* @__PURE__ */ import_react19.default.createElement(
+var SvgCheckboxMinus = (props) => /* @__PURE__ */ import_react20.default.createElement("svg", __spreadValues({ width: 12, height: 2, viewBox: "0 0 12 2", fill: "none" }, props), /* @__PURE__ */ import_react20.default.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -3226,11 +3296,11 @@ var SvgCheckboxMinus = (props) => /* @__PURE__ */ import_react19.default.createE
     fill: "currentColor"
   }
 ));
-var CheckboxWrapper = import_styled14.default.div`
+var CheckboxWrapper = import_styled15.default.div`
   display: block;
   position: relative;
 `;
-var CheckboxInput = import_styled14.default.input`
+var CheckboxInput = import_styled15.default.input`
   height: 100%;
   margin: 0;
   opacity: 0;
@@ -3280,7 +3350,7 @@ var CheckboxInput = import_styled14.default.input`
     display: block;
   }
 `;
-var CheckboxBox = import_styled14.default.span`
+var CheckboxBox = import_styled15.default.span`
   cursor: pointer;
   width: ${u(2.25)};
   height: ${u(2.25)};
@@ -3290,7 +3360,7 @@ var CheckboxBox = import_styled14.default.span`
   justify-content: center;
   user-select: none;
 `;
-var Checkbox = (0, import_react19.forwardRef)(
+var Checkbox = (0, import_react20.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       isDisabled,
@@ -3307,15 +3377,15 @@ var Checkbox = (0, import_react19.forwardRef)(
       "onChange",
       "onBlur"
     ]);
-    const defaultRef = (0, import_react19.useRef)();
+    const defaultRef = (0, import_react20.useRef)();
     const checkboxRef = ref || defaultRef;
     const iconColor = getColorValue(
       isDisabled ? "disabledContent" : "currentColor"
     );
-    (0, import_react19.useEffect)(() => {
+    (0, import_react20.useEffect)(() => {
       checkboxRef.current.indeterminate = isIndeterminate;
     });
-    return /* @__PURE__ */ import_react19.default.createElement(CheckboxWrapper, null, /* @__PURE__ */ import_react19.default.createElement(
+    return /* @__PURE__ */ import_react20.default.createElement(CheckboxWrapper, null, /* @__PURE__ */ import_react20.default.createElement(
       CheckboxInput,
       __spreadValues({
         role: "checkbox",
@@ -3328,14 +3398,14 @@ var Checkbox = (0, import_react19.forwardRef)(
         ref: checkboxRef,
         "aria-checked": isChecked
       }, props)
-    ), /* @__PURE__ */ import_react19.default.createElement(CheckboxBox, { className: "CheckboxBox" }, /* @__PURE__ */ import_react19.default.createElement(SvgCheckboxMinus, { className: "Icon IconMinus", color: iconColor }), /* @__PURE__ */ import_react19.default.createElement(SvgCheckboxCheck, { className: "Icon IconCheck", color: iconColor })));
+    ), /* @__PURE__ */ import_react20.default.createElement(CheckboxBox, { className: "CheckboxBox" }, /* @__PURE__ */ import_react20.default.createElement(SvgCheckboxMinus, { className: "Icon IconMinus", color: iconColor }), /* @__PURE__ */ import_react20.default.createElement(SvgCheckboxCheck, { className: "Icon IconCheck", color: iconColor })));
   }
 );
 var checkbox_default = Checkbox;
 
 // src/components/text-button/text-button.tsx
-var import_styled15 = __toESM(require("@emotion/styled"));
-var import_react20 = __toESM(require("react"));
+var import_styled16 = __toESM(require("@emotion/styled"));
+var import_react21 = __toESM(require("react"));
 var sizeStyles2 = {
   small: {
     textSize: "small",
@@ -3359,7 +3429,7 @@ var sizeStyles2 = {
     radius: "var(--lns-radius-200)"
   }
 };
-var TextButtonWrapper = import_styled15.default.button`
+var TextButtonWrapper = import_styled16.default.button`
   background-color: ${(props) => props.isActive ? getColorValue("backgroundActive") : "transparent"};
   display: inline-flex;
   vertical-align: middle;
@@ -3371,7 +3441,7 @@ var TextButtonWrapper = import_styled15.default.button`
   height: ${(props) => sizeStyles2[props.size].height};
   cursor: pointer;
   transition: 0.6s background-color;
-  color: ${getColorValue("body")};
+  color: ${(props) => getColorValue(props.color || "body")};
   ${getFontWeight("bold")};
   border-radius: ${(props) => sizeStyles2[props.size].radius};
   ${(props) => getTextSize(sizeStyles2[props.size].textSize)};
@@ -3406,7 +3476,7 @@ var TextButtonWrapper = import_styled15.default.button`
     pointer-events: none;
   }
 `;
-var TextButton = import_react20.default.forwardRef(
+var TextButton = import_react21.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       onClick,
@@ -3429,14 +3499,14 @@ var TextButton = import_react20.default.forwardRef(
       "htmlTag",
       "offsetSide"
     ]);
-    const iconComponent = /* @__PURE__ */ import_react20.default.createElement(
+    const iconComponent = /* @__PURE__ */ import_react21.default.createElement(
       container_default,
       {
         paddingLeft: iconPosition === "right" && "small",
         paddingRight: iconPosition === "left" && "small",
         htmlTag: "span"
       },
-      /* @__PURE__ */ import_react20.default.createElement(
+      /* @__PURE__ */ import_react21.default.createElement(
         icon_default,
         {
           icon,
@@ -3445,7 +3515,7 @@ var TextButton = import_react20.default.forwardRef(
         }
       )
     );
-    return /* @__PURE__ */ import_react20.default.createElement(
+    return /* @__PURE__ */ import_react21.default.createElement(
       TextButtonWrapper,
       __spreadValues({
         onClick,
@@ -3468,9 +3538,9 @@ TextButton.displayName = "TextButton";
 var text_button_default = TextButton;
 
 // src/components/select/select.tsx
-var import_styled17 = __toESM(require("@emotion/styled"));
+var import_styled18 = __toESM(require("@emotion/styled"));
 var import_downshift = __toESM(require("downshift"));
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_react_laag = require("react-laag");
 var import_resize_observer_polyfill = __toESM(require("resize-observer-polyfill"));
 
@@ -3498,20 +3568,20 @@ var getDownshiftEnvironment = (container) => {
 
 // src/components/icon/available-icons/chevron-down.tsx
 var import_chevron_down = __toESM(require("@atlaskit/icon/utility/chevron-down"));
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 function SvgChevronDown() {
-  return /* @__PURE__ */ React19.createElement(import_chevron_down.default, { label: "", spacing: "compact", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React20.createElement(import_chevron_down.default, { label: "", spacing: "compact", testId: "ads-refreshed-icon" });
 }
 
 // src/components/menu/menu.tsx
-var import_styled16 = __toESM(require("@emotion/styled"));
-var import_react21 = __toESM(require("react"));
+var import_styled17 = __toESM(require("@emotion/styled"));
+var import_react22 = __toESM(require("react"));
 
 // src/components/icon/available-icons/check.tsx
 var import_check_mark = __toESM(require("@atlaskit/icon/core/check-mark"));
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 function SvgCheck() {
-  return /* @__PURE__ */ React20.createElement(import_check_mark.default, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React21.createElement(import_check_mark.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/menu/menu.tsx
@@ -3523,7 +3593,7 @@ var menuPositions = {
   leftSide: "left-start",
   rightSide: "right-start"
 };
-var MenuWrapper = import_styled16.default.ul`
+var MenuWrapper = import_styled17.default.ul`
   background-color: ${getColorValue("overlay")};
   list-style: none;
   padding: ${u(1.5)};
@@ -3537,7 +3607,7 @@ var MenuWrapper = import_styled16.default.ul`
   ${getShadow("medium")};
   ${getRadius("250")};
 `;
-var MenuItemWrapper = import_styled16.default.li`
+var MenuItemWrapper = import_styled17.default.li`
   display: ${({ hidden }) => hidden ? "none" : "grid"};
   grid-auto-flow: column;
   grid-template-columns: ${(props) => props.columns};
@@ -3563,6 +3633,14 @@ var MenuItemWrapper = import_styled16.default.li`
     }
   `};
 `;
+var Image2 = import_styled17.default.img`
+  height: 100%;
+  width: auto;
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+  opacity: ${({ isDisabled }) => isDisabled ? 0.5 : 1};
+`;
 var MenuItem = (_a) => {
   var _b = _a, {
     isDisabled,
@@ -3583,7 +3661,7 @@ var MenuItem = (_a) => {
   const iconColumn = icon ? "auto" : "";
   const columns = `${iconColumn} 1fr ${checkColumn}`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(
     MenuItemWrapper,
     __spreadValues({
       isHighlighted,
@@ -3591,9 +3669,9 @@ var MenuItem = (_a) => {
       columns,
       hasDivider
     }, props),
-    icon && /* @__PURE__ */ import_react21.default.createElement(icon_default, { icon, color }),
-    /* @__PURE__ */ import_react21.default.createElement(text_default, { color, hasEllipsis: true }, children),
-    isSelected && /* @__PURE__ */ import_react21.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react21.default.createElement(SvgCheck, null), color })
+    icon && (typeof icon === "string" ? /* @__PURE__ */ import_react22.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react22.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react22.default.createElement(Image2, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ import_react22.default.createElement(icon_default, { icon, color })),
+    /* @__PURE__ */ import_react22.default.createElement(text_default, { color, hasEllipsis: true }, children),
+    isSelected && /* @__PURE__ */ import_react22.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react22.default.createElement(SvgCheck, null), color })
   );
 };
 var Menu = (_a) => {
@@ -3614,7 +3692,7 @@ var Menu = (_a) => {
     "children",
     "downshiftMenuProps"
   ]);
-  return /* @__PURE__ */ import_react21.default.createElement(
+  return /* @__PURE__ */ import_react22.default.createElement(
     MenuWrapper,
     __spreadValues(__spreadValues({
       zIndex,
@@ -3629,10 +3707,10 @@ var Menu = (_a) => {
 var menu_default = Menu;
 
 // src/components/select/select.tsx
-var SelectWrapper = import_styled17.default.div`
+var SelectWrapper = import_styled18.default.div`
   position: relative;
 `;
-var SelectHeaderWrapper = import_styled17.default.button`
+var SelectHeaderWrapper = import_styled18.default.button`
   appearance: none;
   font: inherit;
   text-align: left;
@@ -3650,12 +3728,12 @@ var SelectHeaderWrapper = import_styled17.default.button`
   background-color: ${getColorValue("formFieldBackground")};
   transition: 0.3s box-shadow;
   border-radius: var(--lns-formFieldRadius);
-  box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
-    var(--lns-color-formFieldBorder);
+  box-shadow: inset 0 0 0
+    ${(props) => props.hasError ? "var(--lns-formFieldBorderWidthFocus) var(--lns-color-danger)" : "var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)"};
 
   &:hover:not(:disabled) {
     box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidthFocus)
-      var(--lns-color-blurple);
+      ${(props) => props.hasError ? "var(--lns-color-danger)" : "var(--lns-color-blurple)"};
   }
 
   &:focus {
@@ -3663,17 +3741,57 @@ var SelectHeaderWrapper = import_styled17.default.button`
     box-shadow: var(--lns-formFieldBorderShadowFocus);
   }
 
+  &:focus:hover {
+    outline: 1px solid transparent;
+    box-shadow: var(--lns-formFieldBorderShadowFocus);
+  }
+
   &:disabled {
     color: ${getColorValue("disabledContent")};
     background-color: ${getColorValue("disabledBackground")};
     cursor: default;
   }
 `;
+var Image3 = import_styled18.default.img`
+  height: 100%;
+  width: auto;
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+  opacity: ${({ isDisabled }) => isDisabled ? 0.5 : 1};
+`;
+var Group = import_styled18.default.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+var ErrorMessage = import_styled18.default.span`
+  color: var(--lns-color-red);
+  margin-top: var(--lns-space-xsmall);
+  display: block;
+  width: 100%;
+  grid-column-start: 1;
+  grid-column-end: 3;
+`;
+var isGrouped = (options) => Array.isArray(options) && options.length > 0 && "group" in options[0];
 var getSelectedOptionObject = ({ options, selectedOptionValue }) => {
-  const selectedOptionArray = options.filter(
-    (option) => option.value === selectedOptionValue
-  );
-  return selectedOptionArray[0] || { icon: null, title: null };
+  if (!options || !selectedOptionValue) {
+    return { icon: null, title: null };
+  }
+  if (isGrouped(options)) {
+    for (const option of options) {
+      const foundItem = option.items.find(
+        (item) => item.value === selectedOptionValue
+      );
+      if (foundItem) {
+        return foundItem;
+      }
+    }
+  } else {
+    const foundItem = options.find((item) => item.value === selectedOptionValue);
+    return foundItem || { icon: null, title: null };
+  }
+  return { icon: null, title: null };
 };
 var getIcon = ({ options, selectedItem, selectedOptionValue }) => {
   if (selectedItem) {
@@ -3704,11 +3822,12 @@ var getHeaderAccessibilityProps = ({
   ariaMenuName
 }) => {
   const valueLabel = selectedItem ? `selected value is ${selectedItem.title}` : "no value selected";
+  const toggleLabel = getToggleButtonProps == null ? void 0 : getToggleButtonProps()["aria-label"];
   return {
     // Ensures all options within the list of selections can be narrated by a screen reader
     "aria-activedescendant": getInputProps()["aria-activedescendant"],
     // The existing aria-label includes whether or not the menu is open or closed, and we add the valueLabel to make a screen reader narrate what is selected
-    "aria-label": `${ariaMenuName ? `${ariaMenuName}, ` : ""}${getToggleButtonProps()["aria-label"]}, ${valueLabel}`
+    "aria-label": [ariaMenuName, toggleLabel, valueLabel].filter(Boolean).join(", ")
   };
 };
 var SelectHeader = ({
@@ -3720,16 +3839,16 @@ var SelectHeader = ({
   isDisabled,
   options,
   getInputProps,
-  ariaMenuName
+  ariaMenuName,
+  hasError
 }) => {
-  const hasIcon = Boolean(
-    getIcon({ options, selectedItem, selectedOptionValue })
-  );
+  const icon = getIcon({ options, selectedItem, selectedOptionValue });
+  const hasIcon = Boolean(icon);
   const hasPlaceholder = !selectedOptionValue && !selectedItem;
   const iconColumn = hasIcon ? "auto" : "";
   const columns = `${iconColumn} 1fr auto`;
   const color = isDisabled ? "disabledContent" : void 0;
-  return /* @__PURE__ */ import_react22.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(
     SelectHeaderWrapper,
     __spreadProps(__spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
       selectedItem,
@@ -3739,22 +3858,23 @@ var SelectHeader = ({
     })), {
       hasValue: inputValue || selectedOptionValue,
       disabled: isDisabled,
-      columns
+      columns,
+      hasError
     }),
-    hasIcon && /* @__PURE__ */ import_react22.default.createElement(
+    hasIcon && (typeof icon === "string" ? /* @__PURE__ */ import_react23.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react23.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react23.default.createElement(Image3, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ import_react23.default.createElement(
       icon_default,
       {
         icon: getIcon({ options, selectedItem, selectedOptionValue }),
         color
       }
-    ),
-    /* @__PURE__ */ import_react22.default.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
+    )),
+    /* @__PURE__ */ import_react23.default.createElement(text_default, { hasEllipsis: true, color: hasPlaceholder ? "bodyDimmed" : "inherit" }, getTitle({
       options,
       selectedItem,
       selectedOptionValue,
       selectPlaceholder
     })),
-    /* @__PURE__ */ import_react22.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react22.default.createElement(SvgChevronDown, null), color })
+    /* @__PURE__ */ import_react23.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react23.default.createElement(SvgChevronDown, null), color })
   );
 };
 var CustomHeader = ({
@@ -3766,7 +3886,9 @@ var CustomHeader = ({
   selectPlaceholder,
   isDisabled,
   getInputProps,
-  ariaMenuName
+  ariaMenuName,
+  hasError,
+  errorMessage
 }) => {
   const buttonProps = () => {
     return __spreadValues(__spreadValues({}, getToggleButtonProps()), getHeaderAccessibilityProps({
@@ -3776,36 +3898,104 @@ var CustomHeader = ({
       ariaMenuName
     }));
   };
-  const getTriggerTitle = () => {
+  const getSelectedItem = () => {
     if (selectedItem) {
-      return selectedItem.title;
+      return selectedItem;
     }
-    if (!selectedItem && selectedOptionValue) {
-      return getSelectedOptionObject({ options, selectedOptionValue }).title;
+    if (selectedOptionValue) {
+      return getSelectedOptionObject({ options, selectedOptionValue });
     }
   };
-  const getTriggerIcon = () => {
-    if (selectedItem && selectedItem.icon) {
-      return selectedItem.icon;
-    }
-    if (!selectedItem && selectedOptionValue) {
-      return getSelectedOptionObject({ options, selectedOptionValue }).icon;
-    }
-  };
-  const triggerContent = {
-    title: getTriggerTitle(),
+  const triggerContent = __spreadProps(__spreadValues({}, getSelectedItem()), {
     placeholder: selectPlaceholder,
-    icon: getTriggerIcon(),
-    isDisabled
-  };
+    isDisabled,
+    hasError,
+    errorMessage
+  });
   return trigger(triggerContent, buttonProps());
 };
-var getSelectedOption = (value, options) => options.find((o) => o.value === value);
+var getSelectedOption = (value, options) => {
+  if (isGrouped(options)) {
+    for (const option of options) {
+      const foundItem = option.items.find((item) => item.value === value);
+      if (foundItem) {
+        return foundItem;
+      }
+    }
+  } else {
+    return options.find((item) => item.value === value);
+  }
+};
 var didSelectedOptionValueChange = (selectedOptionValue, prevSelectedItem) => {
   return Boolean(
     prevSelectedItem && selectedOptionValue !== prevSelectedItem.value
   );
 };
+var renderOption = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps) => {
+  const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
+  return /* @__PURE__ */ import_react23.default.createElement(
+    MenuItem,
+    __spreadProps(__spreadValues({
+      key: index,
+      getItemProps,
+      icon: item.icon,
+      hidden: item.hidden
+    }, getItemProps({
+      key: `${item.value}-${index}`,
+      index,
+      item,
+      disabled: item.isDisabled,
+      "aria-selected": isSelected
+    })), {
+      isDisabled: item.isDisabled,
+      hasDivider: item.hasDivider,
+      isHighlighted: highlightedIndex === index,
+      isSelected
+    }),
+    item.title
+  );
+};
+var SelectMenu = (_a) => {
+  var _b = _a, {
+    options,
+    selectedItem,
+    selectedOptionValue,
+    highlightedIndex,
+    getItemProps
+  } = _b, menuProps = __objRest(_b, [
+    "options",
+    "selectedItem",
+    "selectedOptionValue",
+    "highlightedIndex",
+    "getItemProps"
+  ]);
+  if (!isGrouped(options)) {
+    return /* @__PURE__ */ import_react23.default.createElement(menu_default, __spreadValues({}, menuProps), options.map(
+      (item, index) => renderOption(
+        item,
+        index,
+        selectedItem,
+        selectedOptionValue,
+        highlightedIndex,
+        getItemProps
+      )
+    ));
+  }
+  let downshiftIndex = 0;
+  return /* @__PURE__ */ import_react23.default.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
+    const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
+    return /* @__PURE__ */ import_react23.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react23.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react23.default.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ import_react23.default.createElement(Group, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+      return renderOption(
+        item,
+        downshiftIndex++,
+        selectedItem,
+        selectedOptionValue,
+        highlightedIndex,
+        getItemProps
+      );
+    })));
+  }));
+};
 var Select = (_a) => {
   var _b = _a, {
     container,
@@ -3822,7 +4012,9 @@ var Select = (_a) => {
     menuPosition = "left",
     isDisabled,
     onOpenChange,
-    trigger
+    trigger,
+    hasError,
+    errorMessage = "Oops, that didn't work."
   } = _b, props = __objRest(_b, [
     "container",
     "onChange",
@@ -3838,14 +4030,16 @@ var Select = (_a) => {
     "menuPosition",
     "isDisabled",
     "onOpenChange",
-    "trigger"
+    "trigger",
+    "hasError",
+    "errorMessage"
   ]);
   const environment = getDownshiftEnvironment(container);
-  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react22.useState)(false);
-  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react22.useState)(
+  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react23.useState)(false);
+  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react23.useState)(
     getSelectedOption(selectedOptionValue, options)
   );
-  const [selectedItem, setSelectedItem] = (0, import_react22.useState)(prevSelectedItem);
+  const [selectedItem, setSelectedItem] = (0, import_react23.useState)(prevSelectedItem);
   const onDownshiftChange = (item) => {
     setSelectedItem(item);
     onChange && onChange(item ? item : "");
@@ -3855,7 +4049,8 @@ var Select = (_a) => {
     onChange: onDownshiftChange,
     onOuterClick,
     environment,
-    selectedItem
+    selectedItem,
+    isOpen: downshiftIsOpen
   };
   if (environment) {
     downshiftProps.environment = environment;
@@ -3868,14 +4063,14 @@ var Select = (_a) => {
     auto: true,
     snap: true
   });
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (didSelectedOptionValueChange(selectedOptionValue, prevSelectedItem)) {
       const selectedItem2 = getSelectedOption(selectedOptionValue, options);
       setPrevSelectedItem(selectedItem2);
       setSelectedItem(selectedItem2);
     }
   }, [selectedOptionValue, options, prevSelectedItem]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     onOpenChange && onOpenChange(downshiftIsOpen);
   }, [downshiftIsOpen, onOpenChange]);
   const stateReducer = (state, changes) => {
@@ -3888,7 +4083,7 @@ var Select = (_a) => {
     }
     return changes;
   };
-  return /* @__PURE__ */ import_react22.default.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react22.default.createElement(import_downshift.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+  return /* @__PURE__ */ import_react23.default.createElement(SelectWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react23.default.createElement(import_downshift.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
     getItemProps,
     getInputProps,
     getMenuProps,
@@ -3900,7 +4095,7 @@ var Select = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* @__PURE__ */ import_react22.default.createElement("div", { role: null }, /* @__PURE__ */ import_react22.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react22.default.createElement(
+      /* @__PURE__ */ import_react23.default.createElement("div", { role: null }, /* @__PURE__ */ import_react23.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react23.default.createElement(
         CustomHeader,
         {
           getToggleButtonProps,
@@ -3911,9 +4106,11 @@ var Select = (_a) => {
           options,
           trigger,
           getInputProps,
-          ariaMenuName
+          ariaMenuName,
+          hasError,
+          errorMessage
         }
-      ) : /* @__PURE__ */ import_react22.default.createElement(
+      ) : /* @__PURE__ */ import_react23.default.createElement(
         SelectHeader,
         {
           getToggleButtonProps,
@@ -3924,10 +4121,11 @@ var Select = (_a) => {
           inputValue,
           isDisabled,
           getInputProps,
-          ariaMenuName
+          ariaMenuName,
+          hasError
         }
       )), downshiftIsOpen && isOpen && renderLayer(
-        /* @__PURE__ */ import_react22.default.createElement(
+        /* @__PURE__ */ import_react23.default.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), {
@@ -3935,58 +4133,38 @@ var Select = (_a) => {
               width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
             })
           }),
-          /* @__PURE__ */ import_react22.default.createElement(
-            menu_default,
+          /* @__PURE__ */ import_react23.default.createElement(
+            SelectMenu,
             {
+              options,
+              selectedItem: selectedItem2,
+              selectedOptionValue,
+              highlightedIndex,
+              getItemProps,
               position: menuPosition,
               downshiftMenuProps: getMenuProps,
               maxWidth: menuMaxWidth,
               maxHeight: menuMaxHeight,
               minWidth: menuMinWidth
-            },
-            options.map((item, index) => {
-              const isSelected = !selectedItem2 && item.value === selectedOptionValue || selectedItem2 && selectedItem2.value === item.value;
-              return /* @__PURE__ */ import_react22.default.createElement(
-                MenuItem,
-                __spreadProps(__spreadValues({
-                  key: index,
-                  getItemProps,
-                  icon: item.icon,
-                  hidden: item.hidden
-                }, getItemProps({
-                  key: `${item.value}-${index}`,
-                  index,
-                  item,
-                  disabled: item.isDisabled,
-                  "aria-selected": isSelected
-                  // Downshift sets aria-selected to true on hover, which makes screen readers narrate that the item is selected when it is really not, so we override aria-selected here
-                })), {
-                  isDisabled: item.isDisabled,
-                  hasDivider: item.hasDivider,
-                  isHighlighted: highlightedIndex === index,
-                  isSelected
-                }),
-                item.title
-              );
-            })
+            }
           )
         )
-      ))
+      ), hasError && !downshiftIsOpen && /* @__PURE__ */ import_react23.default.createElement(ErrorMessage, null, errorMessage))
     );
   }));
 };
 var select_default = Select;
 
 // src/components/backdrop/backdrop.tsx
-var import_styled18 = __toESM(require("@emotion/styled"));
-var import_react24 = __toESM(require("react"));
+var import_styled19 = __toESM(require("@emotion/styled"));
+var import_react25 = __toESM(require("react"));
 var import_transition_hook = require("transition-hook");
 
 // src/hooks/use-prevent-scroll.ts
-var import_react23 = require("react");
+var import_react24 = require("react");
 function usePreventScroll(level, enabled) {
   const safeDocument = document;
-  (0, import_react23.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     const html = safeDocument == null ? void 0 : safeDocument.documentElement;
     const body = safeDocument == null ? void 0 : safeDocument.body;
     if (safeDocument == void 0 || !html || !body) {
@@ -4045,7 +4223,7 @@ var use_prevent_scroll_default = usePreventScroll;
 
 // src/components/backdrop/backdrop.tsx
 var duration = 300;
-var BackdropWrapper = import_styled18.default.div`
+var BackdropWrapper = import_styled19.default.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -4055,7 +4233,7 @@ var BackdropWrapper = import_styled18.default.div`
   z-index: ${(props) => props.zIndex};
   overflow: hidden;
 `;
-var ChildrenWrapper = import_styled18.default.div`
+var ChildrenWrapper = import_styled19.default.div`
   overflow: auto;
   height: 100%;
 `;
@@ -4073,7 +4251,7 @@ var Backdrop = (_a) => {
   ]);
   const { stage, shouldMount } = (0, import_transition_hook.useTransition)(isOpen, duration);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react24.default.createElement(
+  return /* @__PURE__ */ import_react25.default.createElement(import_react25.default.Fragment, null, shouldMount && /* @__PURE__ */ import_react25.default.createElement(
     BackdropWrapper,
     __spreadValues({
       backgroundColor,
@@ -4083,31 +4261,31 @@ var Backdrop = (_a) => {
         opacity: stage === "enter" ? 1 : 0
       }
     }, props),
-    /* @__PURE__ */ import_react24.default.createElement(ChildrenWrapper, null, children)
+    /* @__PURE__ */ import_react25.default.createElement(ChildrenWrapper, null, children)
   ));
 };
 var backdrop_default = Backdrop;
 
 // src/components/modal/modal.tsx
-var import_styled19 = __toESM(require("@emotion/styled"));
+var import_styled20 = __toESM(require("@emotion/styled"));
 var import_focus_trap_react = __toESM(require("focus-trap-react"));
-var import_react25 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 
 // src/components/icon/available-icons/close.tsx
 var import_close = __toESM(require("@atlaskit/icon/core/close"));
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 function SvgClose() {
-  return /* @__PURE__ */ React24.createElement(import_close.default, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React25.createElement(import_close.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/modal/modal.tsx
 var DEFAULT_MODAL_CARD_HEIGHT = "70vh";
-var ContentWrapper = import_styled19.default.div`
+var ContentWrapper = import_styled20.default.div`
   display: grid;
   grid-template-rows: ${(props) => props.rows};
   position: relative;
 `;
-var ModalCardWrapper = import_styled19.default.dialog`
+var ModalCardWrapper = import_styled20.default.dialog`
   top: ${(props) => getPlacement(getSizeValue(props.maxHeight), props.placement).top};
   background-color: ${getColorValue("overlay")};
   color: ${getColorValue("body")};
@@ -4130,27 +4308,27 @@ var ModalCardWrapper = import_styled19.default.dialog`
     background: var(--lns-color-overlay);
   }
 `;
-var CloseIconSection = import_styled19.default.div`
+var CloseIconSection = import_styled20.default.div`
   position: absolute;
   top: ${u(1.5)};
   right: ${u(1.5)};
   z-index: 1;
 `;
-var RightButtonsSection = import_styled19.default.div`
+var RightButtonsSection = import_styled20.default.div`
   margin-left: auto;
 
   * {
     vertical-align: middle;
   }
 `;
-var TitleSection = import_styled19.default.div`
+var TitleSection = import_styled20.default.div`
   padding-left: var(--lns-space-xlarge);
   padding-right: var(--lns-space-xlarge);
   padding-top: var(--lns-space-xlarge);
   padding-bottom: ${(props) => props.bottom};
   flex-shrink: 0;
 `;
-var ButtonsSection = import_styled19.default.div`
+var ButtonsSection = import_styled20.default.div`
   padding-left: var(--lns-space-xlarge);
   padding-right: var(--lns-space-xlarge);
   padding-bottom: var(--lns-space-xlarge);
@@ -4160,7 +4338,7 @@ var ButtonsSection = import_styled19.default.div`
   justify-content: space-between;
   align-items: center;
 `;
-var ChildrenSection2 = import_styled19.default.div`
+var ChildrenSection2 = import_styled20.default.div`
   display: flex;
   flex-direction: column;
   overflow: auto;
@@ -4172,7 +4350,7 @@ var ChildrenSection2 = import_styled19.default.div`
   border-color: ${getColorValue("border")};
   border-width: ${(props) => props.hasDividers ? "1px 0" : "0"};
 `;
-var ModalCardChildrenSection = import_styled19.default.div`
+var ModalCardChildrenSection = import_styled20.default.div`
   overflow: auto;
 
   ${(props) => getMaxHeight(props.maxHeight)};
@@ -4199,7 +4377,8 @@ var ModalCard = (_a) => {
     ariaModal,
     ariaLabelledBy,
     ref,
-    removeClose
+    removeClose,
+    initialFocus
   } = _b, props = __objRest(_b, [
     "children",
     "onCloseClick",
@@ -4211,9 +4390,10 @@ var ModalCard = (_a) => {
     "ariaModal",
     "ariaLabelledBy",
     "ref",
-    "removeClose"
+    "removeClose",
+    "initialFocus"
   ]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const keyListener = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -4228,16 +4408,16 @@ var ModalCard = (_a) => {
     };
   }, [isOpen, onCloseClick]);
   use_prevent_scroll_default("html", isOpen);
-  return /* @__PURE__ */ import_react25.default.createElement(
+  return /* @__PURE__ */ import_react26.default.createElement(
     import_focus_trap_react.default,
     {
       active: isOpen,
-      focusTrapOptions: {
+      focusTrapOptions: __spreadValues({
         clickOutsideDeactivates: false,
         allowOutsideClick: true
-      }
+      }, initialFocus !== void 0 ? { initialFocus } : {})
     },
-    /* @__PURE__ */ import_react25.default.createElement(
+    /* @__PURE__ */ import_react26.default.createElement(
       ModalCardWrapper,
       __spreadValues({
         open: isOpen,
@@ -4251,15 +4431,15 @@ var ModalCard = (_a) => {
         "aria-modal": ariaModal,
         "aria-labelledby": ariaLabelledBy
       }, props),
-      !removeClose && onCloseClick && /* @__PURE__ */ import_react25.default.createElement(CloseIconSection, null, /* @__PURE__ */ import_react25.default.createElement(
+      !removeClose && onCloseClick && /* @__PURE__ */ import_react26.default.createElement(CloseIconSection, null, /* @__PURE__ */ import_react26.default.createElement(
         icon_button_default,
         {
           altText: "Close",
-          icon: /* @__PURE__ */ import_react25.default.createElement(SvgClose, null),
+          icon: /* @__PURE__ */ import_react26.default.createElement(SvgClose, null),
           onClick: onCloseClick
         }
       )),
-      /* @__PURE__ */ import_react25.default.createElement(
+      /* @__PURE__ */ import_react26.default.createElement(
         ModalCardChildrenSection,
         {
           tabIndex: removeClose ? 0 : -1,
@@ -4270,7 +4450,7 @@ var ModalCard = (_a) => {
     )
   );
 };
-var Modal = import_react25.default.forwardRef(
+var Modal = import_react26.default.forwardRef(
   (_a, ref) => {
     var _b = _a, {
       children,
@@ -4291,7 +4471,8 @@ var Modal = import_react25.default.forwardRef(
       zIndex = 1e3,
       ariaLabel,
       ariaModal = true,
-      ariaLabelledBy
+      ariaLabelledBy,
+      initialFocus
     } = _b, props = __objRest(_b, [
       "children",
       "id",
@@ -4311,7 +4492,8 @@ var Modal = import_react25.default.forwardRef(
       "zIndex",
       "ariaLabel",
       "ariaModal",
-      "ariaLabelledBy"
+      "ariaLabelledBy",
+      "initialFocus"
     ]);
     var _a2;
     const titleId = id ? `${id}-modal-title` : "modal-title";
@@ -4324,14 +4506,14 @@ var Modal = import_react25.default.forwardRef(
       }
       onCloseClick(e);
     };
-    return /* @__PURE__ */ import_react25.default.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ import_react25.default.createElement(
+    return /* @__PURE__ */ import_react26.default.createElement(backdrop_default, __spreadValues({ isOpen, zIndex }, props), /* @__PURE__ */ import_react26.default.createElement(
       container_default,
       {
         height: "100%",
         onClick: closeClickHandler,
         onKeyDown
       },
-      /* @__PURE__ */ import_react25.default.createElement(
+      /* @__PURE__ */ import_react26.default.createElement(
         ModalCard,
         {
           ref,
@@ -4343,21 +4525,22 @@ var Modal = import_react25.default.forwardRef(
           onCloseClick,
           ariaLabel,
           ariaModal,
-          ariaLabelledBy: (_a2 = ariaLabelledBy != null ? ariaLabelledBy : titleId) != null ? _a2 : void 0
+          ariaLabelledBy: (_a2 = ariaLabelledBy != null ? ariaLabelledBy : titleId) != null ? _a2 : void 0,
+          initialFocus
         },
-        /* @__PURE__ */ import_react25.default.createElement(
+        /* @__PURE__ */ import_react26.default.createElement(
           ContentWrapper,
           {
             rows: `${title ? "auto " : ""} ${children ? "1fr " : ""} ${hasButtons ? "auto" : ""}`
           },
-          title && /* @__PURE__ */ import_react25.default.createElement(
+          title && /* @__PURE__ */ import_react26.default.createElement(
             TitleSection,
             {
               bottom: children ? "var(--lns-space-medium)" : "var(--lns-space-xlarge)"
             },
-            /* @__PURE__ */ import_react25.default.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
+            /* @__PURE__ */ import_react26.default.createElement(text_default, { htmlTag: "h1", variant: "title", id: titleId }, title)
           ),
-          /* @__PURE__ */ import_react25.default.createElement(
+          /* @__PURE__ */ import_react26.default.createElement(
             ChildrenSection2,
             {
               noPadding,
@@ -4367,14 +4550,14 @@ var Modal = import_react25.default.forwardRef(
             },
             children && children
           ),
-          hasButtons && /* @__PURE__ */ import_react25.default.createElement(
+          hasButtons && /* @__PURE__ */ import_react26.default.createElement(
             ButtonsSection,
             {
               top: children ? "var(--lns-space-xlarge)" : 0,
               hasDividers
             },
             alternativeButton,
-            /* @__PURE__ */ import_react25.default.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ import_react25.default.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
+            /* @__PURE__ */ import_react26.default.createElement(RightButtonsSection, null, secondaryButton && /* @__PURE__ */ import_react26.default.createElement(spacer_default, { right: "small", isInline: true }, secondaryButton), mainButton)
           )
         )
       )
@@ -4383,56 +4566,6 @@ var Modal = import_react25.default.forwardRef(
 );
 var modal_default = Modal;
 
-// src/components/align/align.tsx
-var import_styled20 = __toESM(require("@emotion/styled"));
-var import_react26 = __toESM(require("react"));
-var alignmentsPlaceItems = {
-  topLeft: "start",
-  topCenter: "start center",
-  topRight: "start end",
-  centerLeft: "center start",
-  center: "center",
-  centerRight: "center end",
-  bottomLeft: "end start",
-  bottomCenter: "end center",
-  bottomRight: "end"
-};
-var getPlaceItems = (alignment) => {
-  if (Array.isArray(alignment)) {
-    return alignment.map(
-      (alignmentArrayItem) => alignmentsPlaceItems[alignmentArrayItem]
-    );
-  }
-  if (typeof alignment === "object") {
-    const alignmentsPlaceItemsObject = {};
-    Object.entries(alignment).forEach(([key, value]) => {
-      return alignmentsPlaceItemsObject[key] = alignmentsPlaceItems[value];
-    });
-    return alignmentsPlaceItemsObject;
-  }
-  return alignmentsPlaceItems[alignment];
-};
-var AlignWrapper = import_styled20.default.div`
-  width: 100%;
-  height: 100%;
-  display: grid;
-  ${(props) => getResponsiveOneOf("place-items", getPlaceItems(props.alignment))};
-`;
-var Align = (_a) => {
-  var _b = _a, {
-    children,
-    alignment = "center",
-    htmlTag = "div"
-  } = _b, props = __objRest(_b, [
-    "children",
-    "alignment",
-    "htmlTag"
-  ]);
-  return /* @__PURE__ */ import_react26.default.createElement(AlignWrapper, __spreadValues({ alignment, as: htmlTag }, props), children);
-};
-var availableAlignments2 = Object.keys(alignmentsPlaceItems);
-var align_default = Align;
-
 // src/components/link/link.tsx
 var import_react27 = require("@emotion/react");
 var import_styled21 = __toESM(require("@emotion/styled"));
@@ -4609,15 +4742,384 @@ var Textarea = import_react29.default.forwardRef(
       }, props)
     ), error ? /* @__PURE__ */ import_react29.default.createElement(import_react29.default.Fragment, null, /* @__PURE__ */ import_react29.default.createElement(spacer_default, { bottom: "xmsall" }), /* @__PURE__ */ import_react29.default.createElement(text_default, { color: "danger", fontWeight: "regular", size: "body-md" }, error)) : null);
   }
-);
-var textarea_default = Textarea;
+);
+var textarea_default = Textarea;
+
+// src/components/typeahead/typeahead.tsx
+var import_styled23 = __toESM(require("@emotion/styled"));
+var import_downshift3 = __toESM(require("downshift"));
+var import_react30 = __toESM(require("react"));
+var import_react_laag2 = require("react-laag");
+var import_resize_observer_polyfill2 = __toESM(require("resize-observer-polyfill"));
+var TypeaheadWrapper = import_styled23.default.div`
+  position: relative;
+`;
+var TypeaheadInputWrapper = import_styled23.default.div`
+  display: flex;
+  align-items: center;
+`;
+var Group2 = import_styled23.default.ul`
+  list-style: none;
+  margin: 0;
+  padding: 0;
+`;
+var ErrorMessage2 = import_styled23.default.span`
+  color: var(--lns-color-red);
+  margin-top: var(--lns-space-xsmall);
+  display: block;
+  width: 100%;
+  grid-column-start: 1;
+  grid-column-end: 3;
+`;
+var isGrouped2 = (options) => Array.isArray(options) && options.length > 0 && "group" in options[0];
+var getSelectedOptionObject2 = ({ options, selectedOptionValue }) => {
+  if (!options || !selectedOptionValue) {
+    return { icon: null, title: null };
+  }
+  if (isGrouped2(options)) {
+    for (const option of options) {
+      const foundItem = option.items.find(
+        (item) => item.value === selectedOptionValue
+      );
+      if (foundItem) {
+        return foundItem;
+      }
+    }
+  } else {
+    const foundItem = options.find((item) => item.value === selectedOptionValue);
+    return foundItem || { icon: null, title: null };
+  }
+  return { icon: null, title: null };
+};
+var getIcon2 = ({ options, selectedItem, selectedOptionValue }) => {
+  if (selectedItem) {
+    return selectedItem.icon;
+  }
+  if (selectedOptionValue) {
+    return getSelectedOptionObject2({ options, selectedOptionValue }).icon;
+  }
+};
+var getHeaderAccessibilityProps2 = ({
+  selectedItem,
+  getInputProps,
+  ariaMenuName
+}) => {
+  const valueLabel = selectedItem ? `selected value is ${selectedItem.title}` : "no value selected";
+  return {
+    // Ensures all options within the list of selections can be narrated by a screen reader
+    "aria-activedescendant": getInputProps()["aria-activedescendant"],
+    // The existing aria-label includes whether or not the menu is open or closed, and we add the valueLabel to make a screen reader narrate what is selected
+    "aria-label": [ariaMenuName, valueLabel].filter(Boolean).join(", ")
+  };
+};
+var TypeaheadInput = ({
+  selectedItem,
+  selectedOptionValue,
+  placeholder,
+  isDisabled,
+  options,
+  getInputProps,
+  ariaMenuName,
+  isOpen,
+  onInputFocus,
+  hasError,
+  hasLoader
+}) => {
+  const inputProps = __spreadValues(__spreadValues({
+    role: "combobox",
+    "aria-autocomplete": "list",
+    "aria-haspopup": "listbox",
+    "aria-expanded": isOpen
+  }, getHeaderAccessibilityProps2({
+    selectedItem,
+    getInputProps,
+    ariaMenuName
+  })), getInputProps({
+    disabled: isDisabled,
+    onFocus: onInputFocus,
+    onClick: () => {
+      onInputFocus();
+    }
+  }));
+  const icon = getIcon2({ options, selectedItem, selectedOptionValue });
+  return /* @__PURE__ */ import_react30.default.createElement(
+    text_input_default,
+    __spreadProps(__spreadValues({}, inputProps), {
+      placeholder,
+      size: "medium",
+      icon,
+      addOn: hasLoader ? /* @__PURE__ */ import_react30.default.createElement(loader_default, { size: "small" }) : /* @__PURE__ */ import_react30.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react30.default.createElement(SvgChevronDown, null) }),
+      hasError
+    })
+  );
+};
+var getSelectedOption2 = (value, options) => {
+  if (isGrouped2(options)) {
+    for (const option of options) {
+      const foundItem = option.items.find((item) => item.value === value);
+      if (foundItem) {
+        return foundItem;
+      }
+    }
+  } else {
+    return options.find((item) => item.value === value);
+  }
+};
+var didSelectedOptionValueChange2 = (selectedOptionValue, prevSelectedItem) => {
+  return Boolean(selectedOptionValue !== (prevSelectedItem == null ? void 0 : prevSelectedItem.value));
+};
+var renderOption2 = (item, index, selectedItem, selectedOptionValue, highlightedIndex, getItemProps) => {
+  const isSelected = !selectedItem && item.value === selectedOptionValue || selectedItem && selectedItem.value === item.value;
+  return /* @__PURE__ */ import_react30.default.createElement(
+    MenuItem,
+    __spreadProps(__spreadValues({
+      key: index,
+      getItemProps,
+      icon: item.icon,
+      hidden: item.hidden
+    }, getItemProps({
+      key: `${item.value}-${index}`,
+      index,
+      item,
+      disabled: item.isDisabled,
+      "aria-selected": isSelected
+    })), {
+      isDisabled: item.isDisabled,
+      hasDivider: item.hasDivider,
+      isHighlighted: highlightedIndex === index,
+      isSelected
+    }),
+    item.title
+  );
+};
+var TypeaheadMenu = (_a) => {
+  var _b = _a, {
+    options,
+    selectedItem,
+    selectedOptionValue,
+    highlightedIndex,
+    getItemProps,
+    isLoading,
+    loadingMessage,
+    emptyResultsMessage,
+    hasAvailableOptions
+  } = _b, menuProps = __objRest(_b, [
+    "options",
+    "selectedItem",
+    "selectedOptionValue",
+    "highlightedIndex",
+    "getItemProps",
+    "isLoading",
+    "loadingMessage",
+    "emptyResultsMessage",
+    "hasAvailableOptions"
+  ]);
+  const defaultLoadingMessage = loadingMessage || /* @__PURE__ */ import_react30.default.createElement(loader_default, null);
+  const defaultEmptyResultsMessage = emptyResultsMessage || "No results";
+  if (isLoading) {
+    return /* @__PURE__ */ import_react30.default.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ import_react30.default.createElement(container_default, { padding: "large" }, /* @__PURE__ */ import_react30.default.createElement(align_default, { alignment: "center" }, defaultLoadingMessage)));
+  }
+  if (!hasAvailableOptions) {
+    return /* @__PURE__ */ import_react30.default.createElement(menu_default, __spreadValues({ as: "div" }, menuProps), /* @__PURE__ */ import_react30.default.createElement(container_default, { padding: "large" }, /* @__PURE__ */ import_react30.default.createElement(align_default, { alignment: "center" }, defaultEmptyResultsMessage)));
+  }
+  if (!isGrouped2(options)) {
+    return /* @__PURE__ */ import_react30.default.createElement(menu_default, __spreadValues({}, menuProps), options.map(
+      (item, index) => renderOption2(
+        item,
+        index,
+        selectedItem,
+        selectedOptionValue,
+        highlightedIndex,
+        getItemProps
+      )
+    ));
+  }
+  let downshiftIndex = 0;
+  return /* @__PURE__ */ import_react30.default.createElement(menu_default, __spreadValues({}, menuProps), options.map((group) => {
+    const groupId = `group-${group.group.replace(/\s+/g, "-")}`;
+    return /* @__PURE__ */ import_react30.default.createElement("li", { key: groupId }, /* @__PURE__ */ import_react30.default.createElement(spacer_default, { left: "medium", top: "small", bottom: "xsmall" }, /* @__PURE__ */ import_react30.default.createElement(text_default, { id: groupId, size: "body-sm", fontWeight: "bold" }, group.group)), /* @__PURE__ */ import_react30.default.createElement(Group2, { role: "group", "aria-labelledby": groupId }, group.items.map((item) => {
+      return renderOption2(
+        item,
+        downshiftIndex++,
+        selectedItem,
+        selectedOptionValue,
+        highlightedIndex,
+        getItemProps
+      );
+    })));
+  }));
+};
+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 [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react30.useState)(false);
+  const [prevSelectedItem, setPrevSelectedItem] = (0, import_react30.useState)(
+    getSelectedOption2(selectedOptionValue, options)
+  );
+  const [selectedItem, setSelectedItem] = (0, import_react30.useState)(prevSelectedItem);
+  const onDownshiftChange = (item) => {
+    setSelectedItem(item);
+    onOptionChange && onOptionChange(item ? item : null);
+  };
+  const downshiftProps = {
+    itemToString: (item) => item ? item.value : "",
+    onChange: onDownshiftChange,
+    onOuterClick,
+    environment,
+    selectedItem,
+    isOpen: downshiftIsOpen,
+    onInputValueChange
+  };
+  if (environment) {
+    downshiftProps.environment = environment;
+  }
+  const { layerProps, triggerProps, renderLayer, triggerBounds } = (0, import_react_laag2.useLayer)({
+    isOpen: downshiftIsOpen,
+    container,
+    ResizeObserver: import_resize_observer_polyfill2.default,
+    placement: menuPositions[menuPosition],
+    auto: true,
+    snap: true
+  });
+  (0, import_react30.useEffect)(() => {
+    if (selectedOptionValue === null) {
+      setPrevSelectedItem(null);
+      setSelectedItem(null);
+    } else if (didSelectedOptionValueChange2(selectedOptionValue, prevSelectedItem)) {
+      const selectedItem2 = getSelectedOption2(selectedOptionValue, options);
+      setPrevSelectedItem(selectedItem2);
+      setSelectedItem(selectedItem2);
+    }
+  }, [selectedOptionValue, options, prevSelectedItem]);
+  (0, import_react30.useEffect)(() => {
+    onOpenChange && onOpenChange(downshiftIsOpen);
+  }, [downshiftIsOpen, onOpenChange]);
+  const hasAvailableOptions = (0, import_react30.useMemo)(() => {
+    if (!Array.isArray(options)) {
+      return false;
+    }
+    return isGrouped2(options) ? options.some((group) => group.items.length > 0) : options.length > 0;
+  }, [options]);
+  const stateReducer = (state, changes) => {
+    if (changes.isOpen !== void 0) {
+      if (changes.type === import_downshift3.default.stateChangeTypes.keyDownEscape) {
+        setDownshiftIsOpen(false);
+        return { isOpen: false };
+      }
+      setDownshiftIsOpen(changes.isOpen);
+    }
+    return changes;
+  };
+  return /* @__PURE__ */ import_react30.default.createElement(TypeaheadWrapper, __spreadValues({}, props), /* @__PURE__ */ import_react30.default.createElement(import_downshift3.default, __spreadProps(__spreadValues({}, downshiftProps), { stateReducer }), ({
+    getItemProps,
+    getInputProps,
+    getMenuProps,
+    isOpen,
+    highlightedIndex,
+    selectedItem: selectedItem2
+  }) => {
+    return (
+      // Don't set the role to combobox to ensure a consistent experience for screen readers
+      /* @__PURE__ */ import_react30.default.createElement("div", { role: null }, /* @__PURE__ */ import_react30.default.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ import_react30.default.createElement(
+        TypeaheadInput,
+        {
+          selectedItem: selectedItem2,
+          selectedOptionValue,
+          placeholder,
+          isDisabled,
+          options,
+          getInputProps,
+          ariaMenuName,
+          isOpen: downshiftIsOpen && isOpen,
+          onInputFocus: () => {
+            if (hasAvailableOptions || isLoading) {
+              setDownshiftIsOpen(true);
+            }
+          },
+          hasLoader: isLoading,
+          hasError: Boolean(errorMessage)
+        }
+      )), downshiftIsOpen && isOpen && renderLayer(
+        /* @__PURE__ */ import_react30.default.createElement(
+          "div",
+          __spreadProps(__spreadValues({}, layerProps), {
+            style: __spreadProps(__spreadValues({}, layerProps.style), {
+              zIndex: menuZIndex,
+              width: menuMinWidth ? "auto" : triggerBounds == null ? void 0 : triggerBounds.width
+            })
+          }),
+          /* @__PURE__ */ import_react30.default.createElement(
+            TypeaheadMenu,
+            {
+              options,
+              selectedItem: selectedItem2,
+              selectedOptionValue,
+              hasAvailableOptions,
+              highlightedIndex,
+              getItemProps,
+              isLoading,
+              loadingMessage,
+              emptyResultsMessage,
+              position: menuPosition,
+              downshiftMenuProps: getMenuProps,
+              maxWidth: menuMaxWidth,
+              maxHeight: menuMaxHeight,
+              minWidth: menuMinWidth
+            }
+          )
+        )
+      ), Boolean(errorMessage) && !downshiftIsOpen ? /* @__PURE__ */ import_react30.default.createElement(ErrorMessage2, null, errorMessage) : null)
+    );
+  }));
+};
+var typeahead_default = Typeahead;
 
 // src/components/dropdown/dropdown.tsx
-var import_styled23 = __toESM(require("@emotion/styled"));
-var import_downshift3 = __toESM(require("downshift"));
-var import_react30 = __toESM(require("react"));
-var import_react_laag2 = require("react-laag");
-var import_resize_observer_polyfill2 = __toESM(require("resize-observer-polyfill"));
+var import_styled24 = __toESM(require("@emotion/styled"));
+var import_downshift5 = __toESM(require("downshift"));
+var import_react31 = __toESM(require("react"));
+var import_react_laag3 = require("react-laag");
+var import_resize_observer_polyfill3 = __toESM(require("resize-observer-polyfill"));
 var getAccessibilityProps = ({
   ariaMenuName,
   getInputProps,
@@ -4631,7 +5133,7 @@ var getAccessibilityProps = ({
     "aria-label": ariaMenuName ? ariaMenuName : ""
   };
 };
-var TriggerSection = import_styled23.default.div`
+var TriggerSection = import_styled24.default.div`
   display: inline-block;
   vertical-align: middle;
 `;
@@ -4668,18 +5170,18 @@ var Dropdown = (_a) => {
     "onOpenChange"
   ]);
   const environment = getDownshiftEnvironment(container);
-  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react30.useState)(false);
+  const [downshiftIsOpen, setDownshiftIsOpen] = (0, import_react31.useState)(false);
   const isOpen = isOpenFromProps || downshiftIsOpen;
-  const { layerProps, triggerProps, renderLayer } = (0, import_react_laag2.useLayer)({
+  const { layerProps, triggerProps, renderLayer } = (0, import_react_laag3.useLayer)({
     isOpen,
     container,
     placement: menuPositions[menuPosition],
-    ResizeObserver: import_resize_observer_polyfill2.default,
+    ResizeObserver: import_resize_observer_polyfill3.default,
     auto: true,
     snap: true,
     triggerOffset
   });
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     onOpenChange && onOpenChange(isOpen);
   }, [isOpen, onOpenChange]);
   const stateReducer = (state, changes) => {
@@ -4688,8 +5190,8 @@ var Dropdown = (_a) => {
     }
     return changes;
   };
-  return /* @__PURE__ */ import_react30.default.createElement(
-    import_downshift3.default,
+  return /* @__PURE__ */ import_react31.default.createElement(
+    import_downshift5.default,
     {
       stateReducer,
       itemToString: (item) => item ? item.title : "",
@@ -4704,7 +5206,7 @@ var Dropdown = (_a) => {
       getToggleButtonProps,
       highlightedIndex,
       isOpen: isOpen2
-    }) => /* @__PURE__ */ import_react30.default.createElement(
+    }) => /* @__PURE__ */ import_react31.default.createElement(
       "div",
       __spreadValues(__spreadValues({}, props), triggerCallback ? {
         // the Downshift component appears to set the following props,
@@ -4714,18 +5216,18 @@ var Dropdown = (_a) => {
         "aria-expanded": null,
         "aria-labelledby": null
       } : {}),
-      /* @__PURE__ */ import_react30.default.createElement("div", __spreadValues({}, triggerProps), triggerCallback ? triggerCallback(__spreadValues(__spreadValues({}, getToggleButtonProps()), getAccessibilityProps({
+      /* @__PURE__ */ import_react31.default.createElement("div", __spreadValues({}, triggerProps), triggerCallback ? triggerCallback(__spreadValues(__spreadValues({}, getToggleButtonProps()), getAccessibilityProps({
         ariaMenuName,
         getInputProps,
         isOpen: isOpen2
-      }))) : /* @__PURE__ */ import_react30.default.createElement(TriggerSection, __spreadValues({}, getToggleButtonProps({})), trigger)),
+      }))) : /* @__PURE__ */ import_react31.default.createElement(TriggerSection, __spreadValues({}, getToggleButtonProps({})), trigger)),
       isOpen2 && renderLayer(
-        /* @__PURE__ */ import_react30.default.createElement(
+        /* @__PURE__ */ import_react31.default.createElement(
           "div",
           __spreadProps(__spreadValues({}, layerProps), {
             style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex: menuZIndex })
           }),
-          /* @__PURE__ */ import_react30.default.createElement(
+          /* @__PURE__ */ import_react31.default.createElement(
             menu_default,
             {
               position: menuPosition,
@@ -4735,7 +5237,7 @@ var Dropdown = (_a) => {
               downshiftMenuProps: getMenuProps
             },
             options.map((item, index) => {
-              return /* @__PURE__ */ import_react30.default.createElement(
+              return /* @__PURE__ */ import_react31.default.createElement(
                 MenuItem,
                 __spreadValues({
                   key: index,
@@ -4763,13 +5265,13 @@ var Dropdown = (_a) => {
 var dropdown_default = Dropdown;
 
 // src/components/form-field/form-field.tsx
-var import_styled26 = __toESM(require("@emotion/styled"));
-var import_react33 = __toESM(require("react"));
+var import_styled27 = __toESM(require("@emotion/styled"));
+var import_react34 = __toESM(require("react"));
 
 // src/components/radio/radio.tsx
-var import_styled24 = __toESM(require("@emotion/styled"));
-var import_react31 = __toESM(require("react"));
-var RadioLabel = import_styled24.default.label`
+var import_styled25 = __toESM(require("@emotion/styled"));
+var import_react32 = __toESM(require("react"));
+var RadioLabel = import_styled25.default.label`
   display: block;
   position: relative;
 
@@ -4777,7 +5279,7 @@ var RadioLabel = import_styled24.default.label`
     background-color: transparent;
   }
 `;
-var RadioInput = import_styled24.default.input`
+var RadioInput = import_styled25.default.input`
   position: absolute;
   opacity: 0;
 
@@ -4816,7 +5318,7 @@ var RadioInput = import_styled24.default.input`
     ${getFocusRing()};
   }
 `;
-var RadioBox = import_styled24.default.span`
+var RadioBox = import_styled25.default.span`
   cursor: pointer;
   width: ${u(2.25)};
   height: ${u(2.25)};
@@ -4834,7 +5336,7 @@ var RadioBox = import_styled24.default.span`
     background-color: ${getColorValue("white")};
   }
 `;
-var Radio = (0, import_react31.forwardRef)(
+var Radio = (0, import_react32.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       isDisabled,
@@ -4849,7 +5351,7 @@ var Radio = (0, import_react31.forwardRef)(
       "onChange",
       "onBlur"
     ]);
-    return /* @__PURE__ */ import_react31.default.createElement(RadioLabel, null, /* @__PURE__ */ import_react31.default.createElement(
+    return /* @__PURE__ */ import_react32.default.createElement(RadioLabel, null, /* @__PURE__ */ import_react32.default.createElement(
       RadioInput,
       __spreadValues({
         type: "radio",
@@ -4860,14 +5362,14 @@ var Radio = (0, import_react31.forwardRef)(
         onBlur,
         ref
       }, props)
-    ), /* @__PURE__ */ import_react31.default.createElement(RadioBox, { className: "RadioBox" }));
+    ), /* @__PURE__ */ import_react32.default.createElement(RadioBox, { className: "RadioBox" }));
   }
 );
 var radio_default = Radio;
 
 // src/components/switch/switch.tsx
-var import_styled25 = __toESM(require("@emotion/styled"));
-var import_react32 = __toESM(require("react"));
+var import_styled26 = __toESM(require("@emotion/styled"));
+var import_react33 = __toESM(require("react"));
 var sizes2 = {
   medium: {
     switchHeight: 16,
@@ -4908,11 +5410,11 @@ var getKnobTravel = (props) => {
 var getKnobSize = (props) => {
   return sizes2[props.switchSize].switchHeight - sizes2[props.switchSize].knobOffset * 2;
 };
-var SwitchLabel = import_styled25.default.label`
+var SwitchLabel = import_styled26.default.label`
   display: block;
   position: relative;
 `;
-var SwitchInput = import_styled25.default.input`
+var SwitchInput = import_styled26.default.input`
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -4949,7 +5451,7 @@ var SwitchInput = import_styled25.default.input`
     pointer-events: none;
   }
 `;
-var SwitchBox = import_styled25.default.div`
+var SwitchBox = import_styled26.default.div`
   width: ${(props) => sizes2[props.switchSize].switchWidth}px;
   height: ${(props) => sizes2[props.switchSize].switchHeight}px;
   position: relative;
@@ -4989,7 +5491,7 @@ var Switch = (_a) => {
       "ariaLabelledby and ariaLabel serve the same purpose and therefore cannot be used at the same time. Choose the one that best suites your needs."
     );
   }
-  return /* @__PURE__ */ import_react32.default.createElement(SwitchLabel, null, /* @__PURE__ */ import_react32.default.createElement(
+  return /* @__PURE__ */ import_react33.default.createElement(SwitchLabel, null, /* @__PURE__ */ import_react33.default.createElement(
     SwitchInput,
     __spreadProps(__spreadValues({}, props), {
       checked: isActive,
@@ -5001,7 +5503,7 @@ var Switch = (_a) => {
       "aria-label": ariaLabel,
       "aria-checked": isActive
     })
-  ), /* @__PURE__ */ import_react32.default.createElement(
+  ), /* @__PURE__ */ import_react33.default.createElement(
     SwitchBox,
     {
       className: "SwitchBox",
@@ -5029,15 +5531,15 @@ var directionStyles = {
     label: { marginBottom: "var(--lns-space-xsmall)" }
   }
 };
-var FormFieldWrapper = import_styled26.default.div`
+var FormFieldWrapper = import_styled27.default.div`
   ${(props) => props.direction && directionStyles[props.direction].wrapper};
 `;
-var Label = import_styled26.default.label`
+var Label = import_styled27.default.label`
   display: block;
   ${(props) => props.direction && directionStyles[props.direction].label};
   ${(props) => props.isLabelClickable && "cursor: pointer"};
 `;
-var ErrorMessage = import_styled26.default.span`
+var ErrorMessage3 = import_styled27.default.span`
   color: var(--lns-color-red);
   margin-top: var(--lns-space-xsmall);
   display: block;
@@ -5067,12 +5569,12 @@ var FormField = (_a) => {
     "labelFor",
     "direction"
   ]);
-  const isLabelClickable = import_react33.default.Children.toArray(children).some(
-    (child) => (0, import_react33.isValidElement)(child) && // The child might be a div, span, etc (type string) so we
+  const isLabelClickable = import_react34.default.Children.toArray(children).some(
+    (child) => (0, import_react34.isValidElement)(child) && // The child might be a div, span, etc (type string) so we
     // have to typeguard before we check if our child is of interactive
     typeof child.type !== "string" && isInteractiveComponent(child.type)
   );
-  const labelElement = label && /* @__PURE__ */ import_react33.default.createElement(
+  const labelElement = label && /* @__PURE__ */ import_react34.default.createElement(
     Label,
     {
       direction,
@@ -5081,18 +5583,18 @@ var FormField = (_a) => {
     },
     label
   );
-  return /* @__PURE__ */ import_react33.default.createElement(FormFieldWrapper, __spreadValues({ direction }, props), direction === "row" && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, children, labelElement), direction === "column" && /* @__PURE__ */ import_react33.default.createElement(import_react33.default.Fragment, null, labelElement, children), errorMessage && /* @__PURE__ */ import_react33.default.createElement(ErrorMessage, null, errorMessage));
+  return /* @__PURE__ */ import_react34.default.createElement(FormFieldWrapper, __spreadValues({ direction }, props), direction === "row" && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, children, labelElement), direction === "column" && /* @__PURE__ */ import_react34.default.createElement(import_react34.default.Fragment, null, labelElement, children), errorMessage && /* @__PURE__ */ import_react34.default.createElement(ErrorMessage3, null, errorMessage));
 };
 var form_field_default = FormField;
 
 // src/components/notification-bar/notification-bar.tsx
-var import_styled27 = __toESM(require("@emotion/styled"));
-var import_react38 = __toESM(require("react"));
+var import_styled28 = __toESM(require("@emotion/styled"));
+var import_react39 = __toESM(require("react"));
 
 // src/hooks/use-on-click-outside.js
-var import_react34 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 function useOnClickOutside(ref, handler) {
-  import_react34.default.useEffect(() => {
+  import_react35.default.useEffect(() => {
     const listener = (event) => {
       if (!ref.current || ref.current.contains(event.target)) {
         return;
@@ -5109,10 +5611,10 @@ function useOnClickOutside(ref, handler) {
 }
 
 // src/hooks/use-focused-element.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 function useFocusedElement(ref) {
-  const [isFocused, setIsFocused] = (0, import_react35.useState)(false);
-  const handleFocus = (0, import_react35.useCallback)(
+  const [isFocused, setIsFocused] = (0, import_react36.useState)(false);
+  const handleFocus = (0, import_react36.useCallback)(
     (e) => {
       const currentRef = ref.current;
       if (e.type === "focusin" && e.target === currentRef) {
@@ -5121,7 +5623,7 @@ function useFocusedElement(ref) {
     },
     [ref]
   );
-  const handleBlur = (0, import_react35.useCallback)(
+  const handleBlur = (0, import_react36.useCallback)(
     (e) => {
       const currentRef = ref.current;
       if (e.type === "focusout" && e.target === currentRef) {
@@ -5130,7 +5632,7 @@ function useFocusedElement(ref) {
     },
     [ref]
   );
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     document.addEventListener("focusin", handleFocus);
     document.addEventListener("focusout", handleBlur);
     return () => {
@@ -5142,10 +5644,10 @@ function useFocusedElement(ref) {
 }
 
 // src/hooks/use-push-page-down.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 function usePushPageDown(enabled) {
   const safeDocument = document;
-  (0, import_react36.useLayoutEffect)(() => {
+  (0, import_react37.useLayoutEffect)(() => {
     const html = safeDocument == null ? void 0 : safeDocument.documentElement;
     const body = safeDocument == null ? void 0 : safeDocument.body;
     if (safeDocument == void 0 || !html || !body) {
@@ -5164,14 +5666,14 @@ var use_push_page_down_default = usePushPageDown;
 
 // src/components/icon/available-icons/info.tsx
 var import_information_circle = __toESM(require("@atlaskit/icon/core/information-circle"));
-var React34 = __toESM(require("react"));
+var React35 = __toESM(require("react"));
 function SvgInfo() {
-  return /* @__PURE__ */ React34.createElement(import_information_circle.default, { label: "", testId: "ads-refreshed-icon" });
+  return /* @__PURE__ */ React35.createElement(import_information_circle.default, { label: "", testId: "ads-refreshed-icon" });
 }
 
 // src/components/icon/available-icons/warning-alert.tsx
-var import_react37 = __toESM(require("react"));
-var SvgWarningAlert = (props) => /* @__PURE__ */ import_react37.default.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ import_react37.default.createElement(
+var import_react38 = __toESM(require("react"));
+var SvgWarningAlert = (props) => /* @__PURE__ */ import_react38.default.createElement("svg", __spreadValues({ viewBox: "0 0 24 24", fill: "none" }, props), /* @__PURE__ */ import_react38.default.createElement(
   "path",
   {
     fill: "currentColor",
@@ -5185,31 +5687,31 @@ var SvgWarningAlert = (props) => /* @__PURE__ */ import_react37.default.createEl
 var severityStyles = {
   info: {
     bgColor: "var(--lns-color-blurple)",
-    icon: /* @__PURE__ */ import_react38.default.createElement(SvgInfo, null),
+    icon: /* @__PURE__ */ import_react39.default.createElement(SvgInfo, null),
     color: "var(--lns-color-white)",
     fontFamily: "inherit"
   },
   warning: {
     bgColor: "var(--lns-color-warning)",
-    icon: /* @__PURE__ */ import_react38.default.createElement(SvgWarningAlert, null),
+    icon: /* @__PURE__ */ import_react39.default.createElement(SvgWarningAlert, null),
     color: "var(--lns-color-grey8)",
     fontFamily: "inherit"
   },
   error: {
     bgColor: "var(--lns-color-danger)",
-    icon: /* @__PURE__ */ import_react38.default.createElement(SvgAlertTriangle, null),
+    icon: /* @__PURE__ */ import_react39.default.createElement(SvgAlertTriangle, null),
     color: "var(--lns-color-white)",
     fontFamily: "inherit"
   },
   internal: {
-    icon: /* @__PURE__ */ import_react38.default.createElement("span", { role: "img" }, "\u{1F514}"),
+    icon: /* @__PURE__ */ import_react39.default.createElement("span", { role: "img" }, "\u{1F514}"),
     color: "var(--lns-color-tealLight)",
     bgColor: "var(--lns-color-grey8)",
     fontFamily: "var(--lns-fontFamily-code)"
   }
 };
 var DURATION = 350;
-var NotificationBarWrapper = import_styled27.default.aside`
+var NotificationBarWrapper = import_styled28.default.aside`
   --paddingXOffset: var(--lns-space-large);
   --alignItems: start;
 
@@ -5245,7 +5747,7 @@ var NotificationBar = ({
   id
 }) => {
   var _a, _b, _c;
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -5262,7 +5764,7 @@ var NotificationBar = ({
   }, [isOpen, onCloseClick]);
   use_push_page_down_default(isOpen);
   const isInternalAlert = severity === "internal";
-  return isOpen ? /* @__PURE__ */ import_react38.default.createElement(NotificationBarWrapper, { isOpen, severity, id }, /* @__PURE__ */ import_react38.default.createElement(
+  return isOpen ? /* @__PURE__ */ import_react39.default.createElement(NotificationBarWrapper, { isOpen, severity, id }, /* @__PURE__ */ import_react39.default.createElement(
     arrange_default,
     {
       alignItems: { default: "start", small: "center" },
@@ -5270,21 +5772,21 @@ var NotificationBar = ({
       autoFlow: isInternalAlert ? "column" : void 0,
       columns: !isInternalAlert ? ["1fr auto"] : void 0
     },
-    /* @__PURE__ */ import_react38.default.createElement(
+    /* @__PURE__ */ import_react39.default.createElement(
       container_default,
       {
         paddingY: { default: "xsmall", xsmall: 0 },
         paddingLeft: !isInternalAlert ? { default: 0, medium: u(3.5) } : void 0,
         width: "100%"
       },
-      /* @__PURE__ */ import_react38.default.createElement(
+      /* @__PURE__ */ import_react39.default.createElement(
         arrange_default,
         {
           autoFlow: "column",
           gap: isInternalAlert ? "medium" : "small",
           justifyContent: "center"
         },
-        ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react38.default.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ import_react38.default.createElement(
+        ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ import_react39.default.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ import_react39.default.createElement(
           icon_default,
           {
             icon: severityStyles[severity].icon,
@@ -5295,13 +5797,13 @@ var NotificationBar = ({
         children
       )
     )
-  ), onCloseClick && /* @__PURE__ */ import_react38.default.createElement(
+  ), onCloseClick && /* @__PURE__ */ import_react39.default.createElement(
     icon_button_default,
     {
       iconColor: (_c = severityStyles[severity].color) != null ? _c : "var(--lns-color-white)",
       tabIndex: 0,
       altText: "Close",
-      icon: /* @__PURE__ */ import_react38.default.createElement(SvgClose, null),
+      icon: /* @__PURE__ */ import_react39.default.createElement(SvgClose, null),
       onClick: onCloseClick
     }
   )) : null;
@@ -5309,13 +5811,13 @@ var NotificationBar = ({
 var notification_bar_default = NotificationBar;
 
 // src/components/toast/toast.tsx
-var import_react39 = require("@emotion/react");
-var import_styled28 = __toESM(require("@emotion/styled"));
-var import_react40 = __toESM(require("react"));
+var import_react40 = require("@emotion/react");
+var import_styled29 = __toESM(require("@emotion/styled"));
+var import_react41 = __toESM(require("react"));
 var WEBAPP = "web-app";
 var CHROME_EXTENSION = "chrome-extension";
 var toastDurations = { short: 3e3, long: 8e3 };
-var enter = (toastDuration, platform) => import_react39.keyframes`
+var enter = (toastDuration, platform) => import_react40.keyframes`
   0% {
     opacity: 0;
     transform: translate(-50%, ${u(platform === CHROME_EXTENSION ? -8 : 8)});
@@ -5353,7 +5855,7 @@ var getBottom = (platform) => {
       return u(4);
   }
 };
-var ToastWrapper = import_styled28.default.div`
+var ToastWrapper = import_styled29.default.div`
   animation: ${(props) => enter(props.toastDuration, props.platform)}
     ${(props) => props.toastDuration}ms forwards;
   background-color: ${getColorValue("backgroundInverse")};
@@ -5375,7 +5877,7 @@ var ToastWrapper = import_styled28.default.div`
   width: max-content;
   z-index: ${(props) => props.zIndex};
 `;
-var ChildrenSection3 = import_styled28.default.div`
+var ChildrenSection3 = import_styled29.default.div`
   align-self: center;
 `;
 var Toast = ({
@@ -5387,7 +5889,7 @@ var Toast = ({
   platform = "web-app"
 }) => {
   const toastDuration = toastDurations[duration2];
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const timer = setTimeout(() => {
       if (isOpen) {
         onCloseClick();
@@ -5395,7 +5897,7 @@ var Toast = ({
     }, toastDuration);
     return () => clearTimeout(timer);
   }, [isOpen]);
-  return /* @__PURE__ */ import_react40.default.createElement(import_react40.default.Fragment, null, isOpen && /* @__PURE__ */ import_react40.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, isOpen && /* @__PURE__ */ import_react41.default.createElement(
     ToastWrapper,
     {
       onClick: (e) => e.stopPropagation(),
@@ -5404,12 +5906,12 @@ var Toast = ({
       toastDuration,
       platform
     },
-    /* @__PURE__ */ import_react40.default.createElement(ChildrenSection3, { "aria-live": "polite" }, children),
-    onCloseClick && /* @__PURE__ */ import_react40.default.createElement(
+    /* @__PURE__ */ import_react41.default.createElement(ChildrenSection3, { "aria-live": "polite" }, children),
+    onCloseClick && /* @__PURE__ */ import_react41.default.createElement(
       icon_button_default,
       {
         altText: "Close",
-        icon: /* @__PURE__ */ import_react40.default.createElement(SvgClose, null),
+        icon: /* @__PURE__ */ import_react41.default.createElement(SvgClose, null),
         onClick: onCloseClick,
         iconColor: "bodyInverse"
       }
@@ -5419,10 +5921,10 @@ var Toast = ({
 var toast_default = Toast;
 
 // src/components/tooltip/tooltip.tsx
-var import_styled29 = __toESM(require("@emotion/styled"));
-var import_react41 = __toESM(require("react"));
-var import_react_laag3 = require("react-laag");
-var import_resize_observer_polyfill3 = __toESM(require("resize-observer-polyfill"));
+var import_styled30 = __toESM(require("@emotion/styled"));
+var import_react42 = __toESM(require("react"));
+var import_react_laag4 = require("react-laag");
+var import_resize_observer_polyfill4 = __toESM(require("resize-observer-polyfill"));
 var placements = {
   topLeft: "top-start",
   topCenter: "top-center",
@@ -5440,7 +5942,7 @@ var placements = {
 var tooltipMinHeight = 4;
 var textHeight = textSizes.small.fontSize * textSizes.small.lineHeight;
 var tooltipYPadding = (tooltipMinHeight - textHeight) / 2;
-var TooltipBoxWrapper = import_styled29.default.div`
+var TooltipBoxWrapper = import_styled30.default.div`
   background-color: ${getColorValue("backgroundInverse")};
   color: ${getColorValue("bodyInverse")};
   ${getRadius("150")};
@@ -5452,7 +5954,7 @@ var TooltipBoxWrapper = import_styled29.default.div`
   padding: ${u(tooltipYPadding)} ${u(1.5)};
   z-index: ${(props) => props.zIndex};
 `;
-var ShortcutWrapper = import_styled29.default.div`
+var ShortcutWrapper = import_styled30.default.div`
   background-color: ${getColorValue("grey7")};
   border-radius: 3px;
   color: ${getColorValue("grey3")};
@@ -5463,7 +5965,7 @@ var ShortcutWrapper = import_styled29.default.div`
 `;
 var ShortcutBox = ({
   children
-}) => /* @__PURE__ */ import_react41.default.createElement(ShortcutWrapper, null, children);
+}) => /* @__PURE__ */ import_react42.default.createElement(ShortcutWrapper, null, children);
 var TooltipBox = (_a) => {
   var _b = _a, {
     children,
@@ -5480,7 +5982,7 @@ var TooltipBox = (_a) => {
     "layerProps",
     "zIndex"
   ]);
-  return /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(
     TooltipBoxWrapper,
     __spreadValues(__spreadValues({
       maxWidth,
@@ -5491,7 +5993,7 @@ var TooltipBox = (_a) => {
     children
   );
 };
-var TooltipChildren = import_styled29.default.div`
+var TooltipChildren = import_styled30.default.div`
   display: ${(props) => props.isInline ? "inline-block" : "block"};
   ${(props) => props.verticalAlign && `vertical-align: ${props.verticalAlign}`};
   &:focus-visible {
@@ -5547,15 +6049,16 @@ var Tooltip = (_a) => {
     "delay",
     "tooltipId"
   ]);
-  const [show, hoverProps] = (0, import_react_laag3.useHover)({
+  const [show, hoverProps] = (0, import_react_laag4.useHover)({
     delayEnter: getInitialDelaySpeed(delay),
     delayLeave: 200
   });
-  const [isOverTooltip, setIsOverTooltip] = (0, import_react41.useState)(false);
-  const [isOpen, setIsOpen] = (0, import_react41.useState)(false);
-  const focusRef = (0, import_react41.useRef)();
+  const [isOverTooltip, setIsOverTooltip] = (0, import_react42.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react42.useState)(false);
+  const [enterOrSpaceKeyDown, setEnterOrSpaceKeyDown] = (0, import_react42.useState)(false);
+  const focusRef = (0, import_react42.useRef)();
   const isTooltipDisabled = !content || isDisabled;
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (isTooltipDisabled) {
       setIsOpen(false);
       return;
@@ -5564,7 +6067,7 @@ var Tooltip = (_a) => {
     if (show || keepTooltipOpenOnHover) {
       setIsOpen(true);
     }
-    if (!show && !keepTooltipOpenOnHover) {
+    if (!show && !keepTooltipOpenOnHover && !enterOrSpaceKeyDown) {
       setIsOpen(false);
     }
   }, [
@@ -5574,17 +6077,20 @@ var Tooltip = (_a) => {
     isTooltipDisabled,
     keepOpen,
     setIsOpen,
-    show
+    show,
+    enterOrSpaceKeyDown
   ]);
   const handleFocus = () => {
+    setEnterOrSpaceKeyDown(false);
     if (!isTooltipDisabled) {
       setIsOpen(true);
     }
   };
   const handleBlur = () => {
     setIsOpen(false);
+    setEnterOrSpaceKeyDown(false);
   };
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!isOpen) {
       return;
     }
@@ -5599,27 +6105,32 @@ var Tooltip = (_a) => {
       window.removeEventListener("keydown", keyListener);
     };
   }, [isOpen, setIsOpen]);
-  const { layerProps, triggerProps, renderLayer } = (0, import_react_laag3.useLayer)({
+  const { layerProps, triggerProps, renderLayer } = (0, import_react_laag4.useLayer)({
     isOpen,
     placement: placements[placement],
-    ResizeObserver: import_resize_observer_polyfill3.default,
+    ResizeObserver: import_resize_observer_polyfill4.default,
     triggerOffset,
     container,
     auto: true
   });
-  return /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react42.default.createElement(import_react42.default.Fragment, null, /* @__PURE__ */ import_react42.default.createElement(
     TooltipChildren,
     __spreadProps(__spreadValues(__spreadValues({}, triggerProps), hoverProps), {
+      onClick: (e) => {
+        if (e.detail === 0) {
+          setEnterOrSpaceKeyDown(true);
+        }
+      },
       onFocus: handleFocus,
       onBlur: handleBlur,
       isInline,
       verticalAlign,
       tabIndex: isTooltipDisabled ? -1 : tabIndex,
-      ref: (0, import_react_laag3.mergeRefs)(triggerProps.ref, focusRef)
+      ref: (0, import_react_laag4.mergeRefs)(triggerProps.ref, focusRef)
     }),
     children
-  ), ariaLive && /* @__PURE__ */ import_react41.default.createElement("span", { className: "srOnly", "aria-live": "polite" }, isOpen && content), isOpen && renderLayer(
-    /* @__PURE__ */ import_react41.default.createElement("div", __spreadProps(__spreadValues({}, layerProps), { style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex }) }), /* @__PURE__ */ import_react41.default.createElement(
+  ), ariaLive && /* @__PURE__ */ import_react42.default.createElement("span", { className: "srOnly", "aria-live": "polite" }, isOpen && content), isOpen && renderLayer(
+    /* @__PURE__ */ import_react42.default.createElement("div", __spreadProps(__spreadValues({}, layerProps), { style: __spreadProps(__spreadValues({}, layerProps.style), { zIndex }) }), /* @__PURE__ */ import_react42.default.createElement(
       TooltipBox,
       __spreadValues({
         maxWidth,
@@ -5628,7 +6139,7 @@ var Tooltip = (_a) => {
         role: "tooltip",
         id: tooltipId
       }, rest),
-      /* @__PURE__ */ import_react41.default.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ import_react41.default.createElement(text_default, { size: "small", fontWeight: "bold" }, content), shortcut && /* @__PURE__ */ import_react41.default.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ import_react41.default.createElement(ShortcutBox, { key: index }, char))))
+      /* @__PURE__ */ import_react42.default.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ import_react42.default.createElement(text_default, { size: "small", fontWeight: "bold" }, content), shortcut && /* @__PURE__ */ import_react42.default.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ import_react42.default.createElement(ShortcutBox, { key: index }, char))))
     ))
   ));
 };
@@ -5636,10 +6147,10 @@ var availablePlacements = Object.keys(placements);
 var tooltip_default = Tooltip;
 
 // src/components/skeleton/skeleton.tsx
-var import_react42 = require("@emotion/react");
-var import_styled30 = __toESM(require("@emotion/styled"));
-var import_react43 = __toESM(require("react"));
-var SkeletonAnimation = import_react42.css`
+var import_react43 = require("@emotion/react");
+var import_styled31 = __toESM(require("@emotion/styled"));
+var import_react44 = __toESM(require("react"));
+var SkeletonAnimation = import_react43.css`
   @media (prefers-reduced-motion: no-preference) {
     animation: shimmer 2s infinite linear;
     background: linear-gradient(
@@ -5659,7 +6170,7 @@ var SkeletonAnimation = import_react42.css`
     }
   }
 `;
-var SkeletonTextWrapper = import_styled30.default.div`
+var SkeletonTextWrapper = import_styled31.default.div`
   ${(props) => getTextSize(props.size)};
   color: transparent;
   position: relative;
@@ -5685,7 +6196,7 @@ var SkeletonTextWrapper = import_styled30.default.div`
     }
   `};
 `;
-var SkeletonContainerWrapper = import_styled30.default.div`
+var SkeletonContainerWrapper = import_styled31.default.div`
   background-color: var(--lns-color-disabledBackground);
   ${(props) => getRadius(props.radius)};
   height: ${(props) => props.height};
@@ -5697,7 +6208,7 @@ var SkeletonText = ({
   lines = 1,
   animated = false
 }) => {
-  return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, [...Array(lines)].map((_, i) => /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, [...Array(lines)].map((_, i) => /* @__PURE__ */ import_react44.default.createElement(
     SkeletonTextWrapper,
     {
       key: i,
@@ -5714,7 +6225,7 @@ var SkeletonContainer = ({
   radius = "full",
   width = "40px"
 }) => {
-  return /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, /* @__PURE__ */ import_react43.default.createElement(
+  return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, /* @__PURE__ */ import_react44.default.createElement(
     SkeletonContainerWrapper,
     {
       animated,
@@ -5726,10 +6237,10 @@ var SkeletonContainer = ({
 };
 
 // src/components/logo/logo.tsx
-var import_styled31 = __toESM(require("@emotion/styled"));
-var import_react44 = __toESM(require("react"));
+var import_styled32 = __toESM(require("@emotion/styled"));
+var import_react45 = __toESM(require("react"));
 var LoomAiGradientDef = (customId) => {
-  return /* @__PURE__ */ import_react44.default.createElement("defs", null, /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement("defs", null, /* @__PURE__ */ import_react45.default.createElement(
     "radialGradient",
     {
       id: `ai-logo-${customId}-gradient-1`,
@@ -5739,12 +6250,12 @@ var LoomAiGradientDef = (customId) => {
       fx: "0%",
       fy: "0%"
     },
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "72%", stopColor: "#6663F6" })
-  ), /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "72%", stopColor: "#6663F6" })
+  ), /* @__PURE__ */ import_react45.default.createElement(
     "radialGradient",
     {
       id: `ai-logo-${customId}-gradient-2`,
@@ -5752,10 +6263,10 @@ var LoomAiGradientDef = (customId) => {
       fx: "40%",
       fy: "72%"
     },
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "48%", stopColor: "#6663F6" })
-  ), /* @__PURE__ */ import_react44.default.createElement(
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "48%", stopColor: "#6663F6" })
+  ), /* @__PURE__ */ import_react45.default.createElement(
     "radialGradient",
     {
       id: `ai-logo-${customId}-gradient-3`,
@@ -5763,32 +6274,32 @@ var LoomAiGradientDef = (customId) => {
       fx: "0%",
       fy: "100%"
     },
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
-    /* @__PURE__ */ import_react44.default.createElement("stop", { offset: "45%", stopColor: "#6E68F400" })
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
+    /* @__PURE__ */ import_react45.default.createElement("stop", { offset: "45%", stopColor: "#6E68F400" })
   ));
 };
 var symbolLogoPath = "M30 15.4433C30 16.6091 29.0933 16.8581 27.9562 16.9301C22.5158 17.2323 16.7962 22.686 16.4795 28.112C16.422 29.2634 16.173 30.1702 15.0072 30.1702C13.8414 30.1702 13.578 29.2634 13.5205 28.0976C13.2038 22.686 7.48416 17.2323 2.05814 16.9301C0.906735 16.8581 0 16.6091 0 15.4433C0 14.2775 0.906735 14.043 2.05814 13.971C7.48416 13.6687 13.2038 7.65433 13.5205 2.22831C13.578 1.0769 13.827 0.170166 15.0072 0.170166C16.1874 0.170166 16.422 1.0769 16.4795 2.22831C16.7962 7.65433 22.5158 13.6687 27.9419 13.971C29.0933 14.043 30 14.2919 30 15.4433Z";
 var SymbolLogoSvg = (_a) => {
-  var _b = _a, { brand, symbolColor, customId, title } = _b, props = __objRest(_b, ["brand", "symbolColor", "customId", "title"]);
+  var _b = _a, { brand, symbolColor, customId } = _b, props = __objRest(_b, ["brand", "symbolColor", "customId"]);
   switch (brand) {
     case "ai":
-      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 30 31", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), !symbolColor ? /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ import_react44.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement("svg", __spreadValues({ "aria-label": "Loom AI", viewBox: "0 0 30 31", fill: "none" }, props), /* @__PURE__ */ import_react45.default.createElement("title", null, "Loom AI"), !symbolColor ? /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ import_react45.default.createElement(
         "path",
         {
           key: i,
           d: symbolLogoPath,
           fill: `url(#ai-logo-${customId}-gradient-${i + 1}`
         }
-      ))) : /* @__PURE__ */ import_react44.default.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }));
+      ))) : /* @__PURE__ */ import_react45.default.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }));
     case "apptile":
-      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 40 40", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 40 40", fill: "none" }, props), /* @__PURE__ */ import_react45.default.createElement("title", null, "Loom"), /* @__PURE__ */ import_react45.default.createElement(
         "path",
         {
           d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("blurple")
         }
-      ), /* @__PURE__ */ import_react44.default.createElement(
+      ), /* @__PURE__ */ import_react45.default.createElement(
         "path",
         {
           d: "M32.3962 18.6213H25.1467L31.4251 14.9965L30.0463 12.6077L23.768 16.2325L27.392 9.95464L25.0032 8.57506L21.3792 14.8529V7.604H18.6215V14.8536L14.9961 8.57506L12.6081 9.95395L16.2327 16.2318L9.95437 12.6077L8.57552 14.9958L14.8539 18.6206H7.60449V21.3784H14.8532L8.57552 25.0032L9.95437 27.392L16.2321 23.7679L12.6074 30.0457L14.9961 31.4246L18.6208 25.1461V32.3957H21.3785V25.1468L25.0025 31.4246L27.3912 30.0457L23.7665 23.7672L30.0449 27.392L31.4238 25.0032L25.1461 21.3791H32.3947V18.6213H32.3962ZM20.0003 23.7505C17.921 23.7505 16.2355 22.0651 16.2355 19.9856C16.2355 17.9062 17.921 16.2207 20.0003 16.2207C22.0797 16.2207 23.7651 17.9062 23.7651 19.9856C23.7651 22.0651 22.0797 23.7505 20.0003 23.7505Z",
@@ -5796,7 +6307,7 @@ var SymbolLogoSvg = (_a) => {
         }
       ));
     default:
-      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 31 30", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 31 30", fill: "none" }, props), /* @__PURE__ */ import_react45.default.createElement("title", null, "Loom"), /* @__PURE__ */ import_react45.default.createElement(
         "path",
         {
           d: "M30.01 13.43h-9.142l7.917-4.57-1.57-2.72-7.918 4.57 4.57-7.915-2.72-1.57-4.571 7.913V0h-3.142v9.139L8.863 1.225l-2.721 1.57 4.57 7.913L2.796 6.14 1.225 8.86l7.917 4.57H0v3.141h9.141l-7.916 4.57 1.57 2.72 7.918-4.57-4.571 7.915 2.72 1.57 4.572-7.914V30h3.142v-9.334l4.655 8.06 2.551-1.472-4.656-8.062 8.087 4.668 1.571-2.72-7.916-4.57h9.141v-3.14h.001zm-15.005 5.84a4.271 4.271 0 11-.001-8.542 4.271 4.271 0 01.001 8.542z",
@@ -5806,12 +6317,35 @@ var SymbolLogoSvg = (_a) => {
   }
 };
 var WordmarkLogoSvg = (_a) => {
-  var _b = _a, { brand, wordmarkColor, title } = _b, props = __objRest(_b, ["brand", "wordmarkColor", "title"]);
+  var _b = _a, { brand, wordmarkColor } = _b, props = __objRest(_b, ["brand", "wordmarkColor"]);
   switch (brand) {
     case "ai":
-      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 94 23", fill: wordmarkColor }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M4.12637 22.4624H0V0H4.12637V22.4624Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M13.3999 19.1737C15.4166 19.1737 17.2781 17.7155 17.2781 14.8301C17.2781 11.9448 15.4166 10.4866 13.3999 10.4866C11.3833 10.4866 9.52175 11.9448 9.52175 14.8301C9.52175 17.6845 11.3833 19.1737 13.3999 19.1737ZM13.3999 6.7325C17.9606 6.7325 21.4045 10.1143 21.4045 14.8301C21.4045 19.515 17.9606 22.9277 13.3999 22.9277C8.83919 22.9277 5.39538 19.515 5.39538 14.8301C5.39538 10.1143 8.83919 6.7325 13.3999 6.7325Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M29.7548 19.1737C31.7714 19.1737 33.6329 17.7155 33.6329 14.8301C33.6329 11.9448 31.7714 10.4866 29.7548 10.4866C27.7381 10.4866 25.8766 11.9448 25.8766 14.8301C25.8766 17.6845 27.7381 19.1737 29.7548 19.1737ZM29.7548 6.7325C34.3155 6.7325 37.7593 10.1143 37.7593 14.8301C37.7593 19.515 34.3155 22.9277 29.7548 22.9277C25.194 22.9277 21.7502 19.515 21.7502 14.8301C21.7502 10.1143 25.194 6.7325 29.7548 6.7325Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M43.1622 22.4624H39.0358V7.19788H42.976V9.05941C43.8137 7.57019 45.7683 6.76353 47.4437 6.76353C49.5224 6.76353 51.1978 7.66326 51.9734 9.30761C53.1834 7.44609 54.7967 6.76353 56.8134 6.76353C59.6367 6.76353 62.3359 8.46992 62.3359 12.5653V22.4624H58.3336V13.403C58.3336 11.7586 57.5269 10.5176 55.6344 10.5176C53.8659 10.5176 52.8111 11.8827 52.8111 13.5271V22.4624H48.7157V13.403C48.7157 11.7586 47.878 10.5176 46.0165 10.5176C44.2171 10.5176 43.1622 11.8517 43.1622 13.5271V22.4624Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M84.1324 22.4624L82.3019 17.4363H73.3666L71.5361 22.4624H67.0064L75.4453 0.46538H80.4093L88.7862 22.4624H84.1324ZM77.8342 5.21226L74.7937 13.5271H80.8747L77.8342 5.21226Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M94 22.4624H89.6565V0.46538H94V22.4624Z" }));
+      return /* @__PURE__ */ import_react45.default.createElement(
+        "svg",
+        __spreadValues({
+          "aria-label": "Loom AI",
+          viewBox: "0 0 94 23",
+          fill: wordmarkColor
+        }, props),
+        /* @__PURE__ */ import_react45.default.createElement("title", null, "Loom AI"),
+        /* @__PURE__ */ import_react45.default.createElement("path", { d: "M4.12637 22.4624H0V0H4.12637V22.4624Z" }),
+        /* @__PURE__ */ import_react45.default.createElement("path", { d: "M13.3999 19.1737C15.4166 19.1737 17.2781 17.7155 17.2781 14.8301C17.2781 11.9448 15.4166 10.4866 13.3999 10.4866C11.3833 10.4866 9.52175 11.9448 9.52175 14.8301C9.52175 17.6845 11.3833 19.1737 13.3999 19.1737ZM13.3999 6.7325C17.9606 6.7325 21.4045 10.1143 21.4045 14.8301C21.4045 19.515 17.9606 22.9277 13.3999 22.9277C8.83919 22.9277 5.39538 19.515 5.39538 14.8301C5.39538 10.1143 8.83919 6.7325 13.3999 6.7325Z" }),
+        /* @__PURE__ */ import_react45.default.createElement("path", { d: "M29.7548 19.1737C31.7714 19.1737 33.6329 17.7155 33.6329 14.8301C33.6329 11.9448 31.7714 10.4866 29.7548 10.4866C27.7381 10.4866 25.8766 11.9448 25.8766 14.8301C25.8766 17.6845 27.7381 19.1737 29.7548 19.1737ZM29.7548 6.7325C34.3155 6.7325 37.7593 10.1143 37.7593 14.8301C37.7593 19.515 34.3155 22.9277 29.7548 22.9277C25.194 22.9277 21.7502 19.515 21.7502 14.8301C21.7502 10.1143 25.194 6.7325 29.7548 6.7325Z" }),
+        /* @__PURE__ */ import_react45.default.createElement("path", { d: "M43.1622 22.4624H39.0358V7.19788H42.976V9.05941C43.8137 7.57019 45.7683 6.76353 47.4437 6.76353C49.5224 6.76353 51.1978 7.66326 51.9734 9.30761C53.1834 7.44609 54.7967 6.76353 56.8134 6.76353C59.6367 6.76353 62.3359 8.46992 62.3359 12.5653V22.4624H58.3336V13.403C58.3336 11.7586 57.5269 10.5176 55.6344 10.5176C53.8659 10.5176 52.8111 11.8827 52.8111 13.5271V22.4624H48.7157V13.403C48.7157 11.7586 47.878 10.5176 46.0165 10.5176C44.2171 10.5176 43.1622 11.8517 43.1622 13.5271V22.4624Z" }),
+        /* @__PURE__ */ import_react45.default.createElement("path", { d: "M84.1324 22.4624L82.3019 17.4363H73.3666L71.5361 22.4624H67.0064L75.4453 0.46538H80.4093L88.7862 22.4624H84.1324ZM77.8342 5.21226L74.7937 13.5271H80.8747L77.8342 5.21226Z" }),
+        /* @__PURE__ */ import_react45.default.createElement("path", { d: "M94 22.4624H89.6565V0.46538H94V22.4624Z" })
+      );
     default:
-      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 62 23", fill: wordmarkColor }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M.109 21.973V.027h4.028v21.946H.109zM38.742 7.059h3.846v1.82c.818-1.456 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.997v-8.852c0-1.607-.817-2.82-2.635-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V7.059zM13.24 22.405c-4.537 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM29.667 22.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z" }));
+      return /* @__PURE__ */ import_react45.default.createElement(
+        "svg",
+        __spreadValues({
+          "aria-label": "Loom",
+          viewBox: "0 0 62 23",
+          fill: wordmarkColor
+        }, props),
+        /* @__PURE__ */ import_react45.default.createElement("title", null, "Loom"),
+        /* @__PURE__ */ import_react45.default.createElement("path", { d: "M.109 21.973V.027h4.028v21.946H.109zM38.742 7.059h3.846v1.82c.818-1.456 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.997v-8.852c0-1.607-.817-2.82-2.635-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V7.059zM13.24 22.405c-4.537 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM29.667 22.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z" })
+      );
   }
 };
 var combinedLogoPath = "M100 7.76427C100 8.35691 99.539 8.48348 98.961 8.52007C96.1953 8.67371 93.2877 11.4461 93.1267 14.2045C93.0975 14.7898 92.9709 15.2508 92.3783 15.2508C91.7856 15.2508 91.6517 14.7898 91.6225 14.1972C91.4615 11.4461 88.5539 8.67371 85.7955 8.52007C85.2102 8.48348 84.7492 8.35691 84.7492 7.76427C84.7492 7.17162 85.2102 7.05237 85.7955 7.01578C88.5539 6.86213 91.4615 3.80464 91.6225 1.04628C91.6517 0.460948 91.7783 0 92.3783 0C92.9782 0 93.0975 0.460948 93.1267 1.04628C93.2877 3.80464 96.1953 6.86213 98.9537 7.01578C99.539 7.05237 100 7.17894 100 7.76427Z";
@@ -5820,47 +6354,45 @@ var CombinedLogoSvg = (_a) => {
     brand,
     wordmarkColor,
     symbolColor,
-    customId,
-    title
+    customId
   } = _b, props = __objRest(_b, [
     "brand",
     "wordmarkColor",
     "symbolColor",
-    "customId",
-    "title"
+    "customId"
   ]);
   switch (brand) {
     case "ai":
-      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 100 30", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), !symbolColor ? /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ import_react44.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement("svg", __spreadValues({ "aria-label": "Loom AI", viewBox: "0 0 100 30", fill: "none" }, props), /* @__PURE__ */ import_react45.default.createElement("title", null, "Loom AI"), !symbolColor ? /* @__PURE__ */ import_react45.default.createElement(import_react45.default.Fragment, null, LoomAiGradientDef(customId), [...Array(3)].map((_, i) => /* @__PURE__ */ import_react45.default.createElement(
         "path",
         {
           key: i,
           d: combinedLogoPath,
           fill: `url(#ai-logo-${customId}-gradient-${i + 1}`
         }
-      ))) : /* @__PURE__ */ import_react44.default.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) }), /* @__PURE__ */ import_react44.default.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ import_react44.default.createElement("path", { d: "M4.1997 29.5909H0.570312V9.83386H4.1997V29.5909Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M12.3563 26.6983C14.1301 26.6983 15.7674 25.4157 15.7674 22.8778C15.7674 20.34 14.1301 19.0574 12.3563 19.0574C10.5826 19.0574 8.94526 20.34 8.94526 22.8778C8.94526 25.3884 10.5826 26.6983 12.3563 26.6983ZM12.3563 15.7555C16.3678 15.7555 19.3968 18.73 19.3968 22.8778C19.3968 26.9984 16.3678 30.0002 12.3563 30.0002C8.34491 30.0002 5.31587 26.9984 5.31587 22.8778C5.31587 18.73 8.34491 15.7555 12.3563 15.7555Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M26.7414 26.6983C28.5152 26.6983 30.1525 25.4157 30.1525 22.8778C30.1525 20.34 28.5152 19.0574 26.7414 19.0574C24.9676 19.0574 23.3303 20.34 23.3303 22.8778C23.3303 25.3884 24.9676 26.6983 26.7414 26.6983ZM26.7414 15.7555C30.7528 15.7555 33.7819 18.73 33.7819 22.8778C33.7819 26.9984 30.7528 30.0002 26.7414 30.0002C22.73 30.0002 19.7009 26.9984 19.7009 22.8778C19.7009 18.73 22.73 15.7555 26.7414 15.7555Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M38.534 29.5909H34.9047V16.1648H38.3703V17.8022C39.1071 16.4923 40.8263 15.7828 42.2999 15.7828C44.1282 15.7828 45.6018 16.5742 46.284 18.0205C47.3483 16.3831 48.7673 15.7828 50.5411 15.7828C53.0243 15.7828 55.3984 17.2837 55.3984 20.8858V29.5909H51.8782V21.6226C51.8782 20.1763 51.1687 19.0847 49.5041 19.0847C47.9486 19.0847 47.0208 20.2854 47.0208 21.7317V29.5909H43.4187V21.6226C43.4187 20.1763 42.6819 19.0847 41.0446 19.0847C39.4619 19.0847 38.534 20.2581 38.534 21.7317V29.5909Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M74.5698 29.5909L72.9598 25.1701H65.1006L63.4906 29.5909H59.5064L66.929 10.2432H71.2951L78.6631 29.5909H74.5698ZM69.0302 14.4184L66.3559 21.7317H71.7045L69.0302 14.4184Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M83.249 29.5909H79.4285V10.2432H83.249V29.5909Z" })));
+      ))) : /* @__PURE__ */ import_react45.default.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) }), /* @__PURE__ */ import_react45.default.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ import_react45.default.createElement("path", { d: "M4.1997 29.5909H0.570312V9.83386H4.1997V29.5909Z" }), /* @__PURE__ */ import_react45.default.createElement("path", { d: "M12.3563 26.6983C14.1301 26.6983 15.7674 25.4157 15.7674 22.8778C15.7674 20.34 14.1301 19.0574 12.3563 19.0574C10.5826 19.0574 8.94526 20.34 8.94526 22.8778C8.94526 25.3884 10.5826 26.6983 12.3563 26.6983ZM12.3563 15.7555C16.3678 15.7555 19.3968 18.73 19.3968 22.8778C19.3968 26.9984 16.3678 30.0002 12.3563 30.0002C8.34491 30.0002 5.31587 26.9984 5.31587 22.8778C5.31587 18.73 8.34491 15.7555 12.3563 15.7555Z" }), /* @__PURE__ */ import_react45.default.createElement("path", { d: "M26.7414 26.6983C28.5152 26.6983 30.1525 25.4157 30.1525 22.8778C30.1525 20.34 28.5152 19.0574 26.7414 19.0574C24.9676 19.0574 23.3303 20.34 23.3303 22.8778C23.3303 25.3884 24.9676 26.6983 26.7414 26.6983ZM26.7414 15.7555C30.7528 15.7555 33.7819 18.73 33.7819 22.8778C33.7819 26.9984 30.7528 30.0002 26.7414 30.0002C22.73 30.0002 19.7009 26.9984 19.7009 22.8778C19.7009 18.73 22.73 15.7555 26.7414 15.7555Z" }), /* @__PURE__ */ import_react45.default.createElement("path", { d: "M38.534 29.5909H34.9047V16.1648H38.3703V17.8022C39.1071 16.4923 40.8263 15.7828 42.2999 15.7828C44.1282 15.7828 45.6018 16.5742 46.284 18.0205C47.3483 16.3831 48.7673 15.7828 50.5411 15.7828C53.0243 15.7828 55.3984 17.2837 55.3984 20.8858V29.5909H51.8782V21.6226C51.8782 20.1763 51.1687 19.0847 49.5041 19.0847C47.9486 19.0847 47.0208 20.2854 47.0208 21.7317V29.5909H43.4187V21.6226C43.4187 20.1763 42.6819 19.0847 41.0446 19.0847C39.4619 19.0847 38.534 20.2581 38.534 21.7317V29.5909Z" }), /* @__PURE__ */ import_react45.default.createElement("path", { d: "M74.5698 29.5909L72.9598 25.1701H65.1006L63.4906 29.5909H59.5064L66.929 10.2432H71.2951L78.6631 29.5909H74.5698ZM69.0302 14.4184L66.3559 21.7317H71.7045L69.0302 14.4184Z" }), /* @__PURE__ */ import_react45.default.createElement("path", { d: "M83.249 29.5909H79.4285V10.2432H83.249V29.5909Z" })));
     case "apptile":
-      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 103 40", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 103 40", fill: "none" }, props), /* @__PURE__ */ import_react45.default.createElement("title", null, "Loom"), /* @__PURE__ */ import_react45.default.createElement(
         "path",
         {
           d: "M0 12C0 5.37258 5.37258 0 12 0H28C34.6274 0 40 5.37258 40 12V28C40 34.6274 34.6274 40 28 40H12C5.37258 40 0 34.6274 0 28V12Z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("blurple")
         }
-      ), /* @__PURE__ */ import_react44.default.createElement(
+      ), /* @__PURE__ */ import_react45.default.createElement(
         "path",
         {
           d: "M32.3962 18.6213H25.1467L31.4251 14.9965L30.0463 12.6077L23.768 16.2325L27.392 9.95464L25.0032 8.57506L21.3792 14.8529V7.604H18.6215V14.8536L14.9961 8.57506L12.6081 9.95395L16.2327 16.2318L9.95437 12.6077L8.57552 14.9958L14.8539 18.6206H7.60449V21.3784H14.8532L8.57552 25.0032L9.95437 27.392L16.2321 23.7679L12.6074 30.0457L14.9961 31.4246L18.6208 25.1461V32.3957H21.3785V25.1468L25.0025 31.4246L27.3912 30.0457L23.7665 23.7672L30.0449 27.392L31.4238 25.0032L25.1461 21.3791H32.3947V18.6213H32.3962ZM20.0003 23.7505C17.921 23.7505 16.2355 22.0651 16.2355 19.9856C16.2355 17.9062 17.921 16.2207 20.0003 16.2207C22.0797 16.2207 23.7651 17.9062 23.7651 19.9856C23.7651 22.0651 22.0797 23.7505 20.0003 23.7505Z",
           fill: "white"
         }
-      ), /* @__PURE__ */ import_react44.default.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ import_react44.default.createElement("path", { d: "M47.6001 29.5076V10H51.1816V29.5076H47.6001Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M81.9516 16.2509H85.3718V17.8682C86.0987 16.575 87.7961 15.8739 89.2499 15.8739C91.0549 15.8739 92.5086 16.6556 93.1818 18.0832C94.2314 16.4659 95.633 15.8739 97.3834 15.8739C99.8338 15.8739 102.177 17.356 102.177 20.9122V29.5076H98.7027V21.6402C98.7027 20.2119 98.0019 19.1345 96.3591 19.1345C94.8238 19.1345 93.9079 20.3202 93.9079 21.7485V29.5084H90.3541V21.6402C90.3541 20.2119 89.6272 19.1345 88.0104 19.1345C86.4483 19.1345 85.5323 20.2933 85.5323 21.7485V29.5084H81.9516V16.2509Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M59.2755 29.8916C55.2407 29.8916 52.3189 26.899 52.3189 22.8795C52.3189 18.9241 55.2312 15.8603 59.2755 15.8603C63.3394 15.8603 66.232 18.9526 66.232 22.8795C66.232 26.8697 63.3086 29.8916 59.2755 29.8916ZM59.2755 19.1051C57.1944 19.1051 55.5018 20.7983 55.5018 22.8803C55.5018 24.9624 57.1944 26.6555 59.2755 26.6555C61.3565 26.6555 63.0484 24.9624 63.0484 22.8803C63.0484 20.7983 61.3565 19.1051 59.2755 19.1051Z" }), /* @__PURE__ */ import_react44.default.createElement("path", { d: "M73.8823 29.8916C69.8476 29.8916 66.9258 26.899 66.9258 22.8795C66.9258 18.9241 69.8381 15.8603 73.8823 15.8603C77.9463 15.8603 80.8389 18.9526 80.8389 22.8795C80.8389 26.8697 77.9139 29.8916 73.8823 29.8916ZM73.8823 19.0601C71.7776 19.0601 70.0652 20.7738 70.0652 22.8788C70.0652 24.9837 71.7776 26.6974 73.8823 26.6974C75.9871 26.6974 77.6995 24.9837 77.6995 22.8788C77.6988 20.7738 75.9863 19.0601 73.8823 19.0601Z" })));
+      ), /* @__PURE__ */ import_react45.default.createElement("g", { fill: wordmarkColor }, /* @__PURE__ */ import_react45.default.createElement("path", { d: "M47.6001 29.5076V10H51.1816V29.5076H47.6001Z" }), /* @__PURE__ */ import_react45.default.createElement("path", { d: "M81.9516 16.2509H85.3718V17.8682C86.0987 16.575 87.7961 15.8739 89.2499 15.8739C91.0549 15.8739 92.5086 16.6556 93.1818 18.0832C94.2314 16.4659 95.633 15.8739 97.3834 15.8739C99.8338 15.8739 102.177 17.356 102.177 20.9122V29.5076H98.7027V21.6402C98.7027 20.2119 98.0019 19.1345 96.3591 19.1345C94.8238 19.1345 93.9079 20.3202 93.9079 21.7485V29.5084H90.3541V21.6402C90.3541 20.2119 89.6272 19.1345 88.0104 19.1345C86.4483 19.1345 85.5323 20.2933 85.5323 21.7485V29.5084H81.9516V16.2509Z" }), /* @__PURE__ */ import_react45.default.createElement("path", { d: "M59.2755 29.8916C55.2407 29.8916 52.3189 26.899 52.3189 22.8795C52.3189 18.9241 55.2312 15.8603 59.2755 15.8603C63.3394 15.8603 66.232 18.9526 66.232 22.8795C66.232 26.8697 63.3086 29.8916 59.2755 29.8916ZM59.2755 19.1051C57.1944 19.1051 55.5018 20.7983 55.5018 22.8803C55.5018 24.9624 57.1944 26.6555 59.2755 26.6555C61.3565 26.6555 63.0484 24.9624 63.0484 22.8803C63.0484 20.7983 61.3565 19.1051 59.2755 19.1051Z" }), /* @__PURE__ */ import_react45.default.createElement("path", { d: "M73.8823 29.8916C69.8476 29.8916 66.9258 26.899 66.9258 22.8795C66.9258 18.9241 69.8381 15.8603 73.8823 15.8603C77.9463 15.8603 80.8389 18.9526 80.8389 22.8795C80.8389 26.8697 77.9139 29.8916 73.8823 29.8916ZM73.8823 19.0601C71.7776 19.0601 70.0652 20.7738 70.0652 22.8788C70.0652 24.9837 71.7776 26.6974 73.8823 26.6974C75.9871 26.6974 77.6995 24.9837 77.6995 22.8788C77.6988 20.7738 75.9863 19.0601 73.8823 19.0601Z" })));
     default:
-      return /* @__PURE__ */ import_react44.default.createElement("svg", __spreadValues({ viewBox: "0 0 100 30", fill: "none" }, props), title && /* @__PURE__ */ import_react44.default.createElement("title", null, title), /* @__PURE__ */ import_react44.default.createElement(
+      return /* @__PURE__ */ import_react45.default.createElement("svg", __spreadValues({ "aria-label": "Loom", viewBox: "0 0 100 30", fill: "none" }, props), /* @__PURE__ */ import_react45.default.createElement("title", null, "Loom"), /* @__PURE__ */ import_react45.default.createElement(
         "path",
         {
           d: "M30.01 13.43h-9.142l7.917-4.57-1.57-2.72-7.918 4.57 4.57-7.915-2.72-1.57-4.571 7.913V0h-3.142v9.139L8.863 1.225l-2.721 1.57 4.57 7.913L2.796 6.14 1.225 8.86l7.917 4.57H0v3.141h9.141l-7.916 4.57 1.57 2.72 7.918-4.57-4.571 7.915 2.72 1.57 4.572-7.914V30h3.142v-9.334l4.655 8.06 2.551-1.472-4.656-8.062 8.087 4.668 1.571-2.72-7.916-4.57h9.141v-3.14h.001zm-15.005 5.84a4.271 4.271 0 11-.001-8.542 4.271 4.271 0 01.001 8.542z",
           fill: symbolColor ? getColorValue(symbolColor) : getColorValue("primary")
         }
-      ), /* @__PURE__ */ import_react44.default.createElement(
+      ), /* @__PURE__ */ import_react45.default.createElement(
         "path",
         {
           d: "M38.109 25.973V4.027h4.028v21.946h-4.028zM76.742 11.059h3.846v1.82c.818-1.455 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.996v-8.852c0-1.607-.818-2.82-2.636-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V11.059zM51.24 26.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM67.667 26.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z",
@@ -5869,7 +6401,7 @@ var CombinedLogoSvg = (_a) => {
       ));
   }
 };
-var LogoWrapper = import_styled31.default.span`
+var LogoWrapper = import_styled32.default.span`
   display: block;
   ${(props) => props.maxWidth && getSize("max-width", props.maxWidth)};
 
@@ -5887,51 +6419,46 @@ var Logo = (_a) => {
     symbolColor,
     wordmarkColor = "body",
     brand = "loom",
-    customId = "",
-    title = ""
+    customId = ""
   } = _b, props = __objRest(_b, [
     "variant",
     "maxWidth",
     "symbolColor",
     "wordmarkColor",
     "brand",
-    "customId",
-    "title"
+    "customId"
   ]);
-  return /* @__PURE__ */ import_react44.default.createElement(LogoWrapper, __spreadValues({ variant, maxWidth }, props), variant === "combined" && /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react45.default.createElement(LogoWrapper, __spreadValues({ variant, maxWidth }, props), variant === "combined" && /* @__PURE__ */ import_react45.default.createElement(
     CombinedLogoSvg,
     {
       brand,
       symbolColor,
       wordmarkColor: getColorValue(wordmarkColor),
       customId,
-      className: "lns-logoSvg",
-      title
+      className: "lns-logoSvg"
     }
-  ), variant === "symbol" && /* @__PURE__ */ import_react44.default.createElement(
+  ), variant === "symbol" && /* @__PURE__ */ import_react45.default.createElement(
     SymbolLogoSvg,
     {
       brand,
       symbolColor,
       customId,
-      className: "lns-logoSvg",
-      title
+      className: "lns-logoSvg"
     }
-  ), variant === "wordmark" && /* @__PURE__ */ import_react44.default.createElement(
+  ), variant === "wordmark" && /* @__PURE__ */ import_react45.default.createElement(
     WordmarkLogoSvg,
     {
       brand,
       wordmarkColor: getColorValue(wordmarkColor),
-      className: "lns-logoSvg",
-      title
+      className: "lns-logoSvg"
     }
   ));
 };
 var logo_default = Logo;
 
 // src/components/logo-loader/logo-loader.tsx
-var import_styled32 = __toESM(require("@emotion/styled"));
-var import_react45 = __toESM(require("react"));
+var import_styled33 = __toESM(require("@emotion/styled"));
+var import_react46 = __toESM(require("react"));
 
 // src/constants/routes.ts
 var LENS_CDN = "https://cdn.loom.com/assets/lens";
@@ -5941,7 +6468,7 @@ var sizeToPx = {
   small: "40px",
   medium: "80px"
 };
-var LogoLoaderWrapper = import_styled32.default.span`
+var LogoLoaderWrapper = import_styled33.default.span`
   animation: ${(props) => props.animation};
   background-image: url(${LENS_CDN}/${(props) => props.brand}-loader.svg);
   background-size: cover;
@@ -5961,17 +6488,17 @@ var LogoLoader = ({
   brand = "loom",
   size = "medium"
 }) => {
-  return /* @__PURE__ */ import_react45.default.createElement(LogoLoaderWrapper, { animation, brand, size });
+  return /* @__PURE__ */ import_react46.default.createElement(LogoLoaderWrapper, { animation, brand, size });
 };
 var logo_loader_default = LogoLoader;
 
 // src/components/list/list.tsx
-var import_react46 = require("@emotion/react");
-var import_styled33 = __toESM(require("@emotion/styled"));
-var import_react47 = __toESM(require("react"));
+var import_react47 = require("@emotion/react");
+var import_styled34 = __toESM(require("@emotion/styled"));
+var import_react48 = __toESM(require("react"));
 var ssrComment = `/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */`;
 var variantStyles2 = {
-  border: import_react46.css`
+  border: import_react47.css`
     .ListRowWrapper:last-child {
       border-bottom: 1px solid ${getColorValue("border")};
     }
@@ -5981,7 +6508,7 @@ var variantStyles2 = {
       border-top: 1px solid ${getColorValue("border")};
     }
   `,
-  stripe: import_react46.css`
+  stripe: import_react47.css`
     .ListRowWrapper {
       &:nth-child(odd) ${ssrComment} {
         background-color: ${getColorValue("backgroundSecondary")};
@@ -5992,9 +6519,9 @@ var variantStyles2 = {
       ${getRadius("medium")};
     }
   `,
-  clear: import_react46.css``
+  clear: import_react47.css``
 };
-var ListWrapper = import_styled33.default.div`
+var ListWrapper = import_styled34.default.div`
   .ListRowWrapper {
     grid-template-columns: ${(props) => props.columns && props.columns};
     ${(props) => getSize("gap", props.gap)};
@@ -6002,7 +6529,7 @@ var ListWrapper = import_styled33.default.div`
 
   ${(props) => variantStyles2[props.variant]};
 `;
-var ListRowWrapper = import_styled33.default.div`
+var ListRowWrapper = import_styled34.default.div`
   display: grid;
   align-items: center;
   text-decoration: none;
@@ -6059,7 +6586,7 @@ var ListRow = (_a) => {
     "href"
   ]);
   const classNameFromProp = className ? ` ${className}` : ``;
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     ListRowWrapper,
     __spreadValues({
       className: `ListRowWrapper${classNameFromProp}`,
@@ -6084,7 +6611,7 @@ var List = (_a) => {
     "gap",
     "variant"
   ]);
-  return /* @__PURE__ */ import_react47.default.createElement(
+  return /* @__PURE__ */ import_react48.default.createElement(
     ListWrapper,
     __spreadValues({
       columns: columns && formatColumns(columns),
@@ -6097,15 +6624,15 @@ var List = (_a) => {
 var list_default = List;
 
 // src/components/tabs/tabs.tsx
-var import_styled34 = __toESM(require("@emotion/styled"));
-var import_react48 = __toESM(require("react"));
-var TabsContext = import_react48.default.createContext({});
+var import_styled35 = __toESM(require("@emotion/styled"));
+var import_react49 = __toESM(require("react"));
+var TabsContext = import_react49.default.createContext({});
 var negativeScrollOffset = (scrollOffset) => `calc(-1 * ${getSizeValue(scrollOffset)})`;
-var Wrapper = import_styled34.default.div`
+var Wrapper = import_styled35.default.div`
   ${(props) => props.scrollOffset && `margin: 0 ${negativeScrollOffset(props.scrollOffset)};
   `};
 `;
-var TabsNav = import_styled34.default.nav`
+var TabsNav = import_styled35.default.nav`
   --activeIndicatorHeight: 3px;
 
   display: flex;
@@ -6146,7 +6673,7 @@ var TabsNav = import_styled34.default.nav`
     ${(props) => props.scrollOffset && getSize("width", props.scrollOffset)};
   }
 `;
-var TabsNavPilled = import_styled34.default.nav`
+var TabsNavPilled = import_styled35.default.nav`
   ${getRadius("200")};
   background-color: var(--lns-color-backgroundSecondary);
 
@@ -6184,7 +6711,7 @@ var TabsNavPilled = import_styled34.default.nav`
     ${(props) => props.scrollOffset && getSize("width", props.scrollOffset)};
   }
 `;
-var TabWrapper = import_styled34.default.button`
+var TabWrapper = import_styled35.default.button`
   appearance: none;
   font: inherit;
   background: transparent;
@@ -6231,7 +6758,7 @@ var TabWrapper = import_styled34.default.button`
     ${(props) => props.isActive && `background-color: ${getColorValue("primary")}`};
   }
 `;
-var TabWrapperPilled = import_styled34.default.button`
+var TabWrapperPilled = import_styled35.default.button`
   padding: ${u(1)} 0;
 
   appearance: none;
@@ -6282,20 +6809,20 @@ var Tab = (_a) => {
     "htmlTag",
     "icon"
   ]);
-  const { isPilledDesign } = import_react48.default.useContext(TabsContext);
+  const { isPilledDesign } = import_react49.default.useContext(TabsContext);
   if (isPilledDesign) {
-    return /* @__PURE__ */ import_react48.default.createElement("li", null, /* @__PURE__ */ import_react48.default.createElement(
+    return /* @__PURE__ */ import_react49.default.createElement("li", null, /* @__PURE__ */ import_react49.default.createElement(
       TabWrapperPilled,
       __spreadValues({
         as: htmlTag,
         isActive,
         icon
       }, props),
-      icon && /* @__PURE__ */ import_react48.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react48.default.createElement(icon_default, { icon, color: "currentColor" })),
+      icon && /* @__PURE__ */ import_react49.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react49.default.createElement(icon_default, { icon, color: "currentColor" })),
       children
     ));
   }
-  return /* @__PURE__ */ import_react48.default.createElement("li", null, /* @__PURE__ */ import_react48.default.createElement(TabWrapper, __spreadValues({ as: htmlTag, isActive, icon }, props), icon && /* @__PURE__ */ import_react48.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react48.default.createElement(icon_default, { icon, color: "currentColor" })), children));
+  return /* @__PURE__ */ import_react49.default.createElement("li", null, /* @__PURE__ */ import_react49.default.createElement(TabWrapper, __spreadValues({ as: htmlTag, isActive, icon }, props), icon && /* @__PURE__ */ import_react49.default.createElement(container_default, { htmlTag: "span", paddingRight: children && "small" }, /* @__PURE__ */ import_react49.default.createElement(icon_default, { icon, color: "currentColor" })), children));
 };
 var Tabs = (_a) => {
   var _b = _a, {
@@ -6311,33 +6838,33 @@ var Tabs = (_a) => {
     "isPilledDesign",
     "hasBottomBorder"
   ]);
-  const tabsContent = isPilledDesign ? /* @__PURE__ */ import_react48.default.createElement(
+  const tabsContent = isPilledDesign ? /* @__PURE__ */ import_react49.default.createElement(
     TabsNavPilled,
     __spreadValues({
       hasFullTabs,
       scrollOffset
     }, props),
-    /* @__PURE__ */ import_react48.default.createElement("ul", null, children)
-  ) : /* @__PURE__ */ import_react48.default.createElement(
+    /* @__PURE__ */ import_react49.default.createElement("ul", null, children)
+  ) : /* @__PURE__ */ import_react49.default.createElement(
     TabsNav,
     __spreadValues({
       hasFullTabs,
       scrollOffset,
       hasBottomBorder
     }, props),
-    /* @__PURE__ */ import_react48.default.createElement("ul", null, children)
+    /* @__PURE__ */ import_react49.default.createElement("ul", null, children)
   );
   if (scrollOffset) {
-    return /* @__PURE__ */ import_react48.default.createElement(Wrapper, { scrollOffset }, tabsContent);
+    return /* @__PURE__ */ import_react49.default.createElement(Wrapper, { scrollOffset }, tabsContent);
   }
-  return /* @__PURE__ */ import_react48.default.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
+  return /* @__PURE__ */ import_react49.default.createElement(TabsContext.Provider, { value: { isPilledDesign } }, tabsContent);
 };
 var tabs_default = Tabs;
 
 // src/components/pill/pill.tsx
-var import_styled35 = __toESM(require("@emotion/styled"));
-var import_react49 = __toESM(require("react"));
-var PillWrapper = import_styled35.default.div`
+var import_styled36 = __toESM(require("@emotion/styled"));
+var import_react50 = __toESM(require("react"));
+var PillWrapper = import_styled36.default.div`
   display: inline-grid;
   grid-auto-flow: column;
   align-items: center;
@@ -6365,23 +6892,23 @@ var Pill = (_a) => {
     "icon",
     "iconPosition"
   ]);
-  const iconComponent = /* @__PURE__ */ import_react49.default.createElement(
+  const iconComponent = /* @__PURE__ */ import_react50.default.createElement(
     container_default,
     {
       htmlTag: "span",
       paddingLeft: iconPosition === "right" && "xsmall",
       paddingRight: iconPosition === "left" && "xsmall"
     },
-    /* @__PURE__ */ import_react49.default.createElement(icon_default, { icon, color: "currentColor", size: 2 })
+    /* @__PURE__ */ import_react50.default.createElement(icon_default, { icon, color: "currentColor", size: 2 })
   );
-  return /* @__PURE__ */ import_react49.default.createElement(PillWrapper, __spreadValues({ color, backgroundColor }, props), icon && iconPosition === "left" && iconComponent, children, icon && iconPosition === "right" && iconComponent);
+  return /* @__PURE__ */ import_react50.default.createElement(PillWrapper, __spreadValues({ color, backgroundColor }, props), icon && iconPosition === "left" && iconComponent, children, icon && iconPosition === "right" && iconComponent);
 };
 var pill_default = Pill;
 
 // src/components/popover/popover.tsx
-var import_styled36 = __toESM(require("@emotion/styled"));
+var import_styled37 = __toESM(require("@emotion/styled"));
 var import_react_dom = require("@floating-ui/react-dom");
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 var import_react_dom2 = __toESM(require("react-dom"));
 var import_transition_hook2 = require("transition-hook");
 var placements2 = {
@@ -6398,14 +6925,14 @@ var placements2 = {
   rightCenter: "right",
   rightBottom: "right-end"
 };
-var Wrapper2 = import_styled36.default.div`
+var Wrapper2 = import_styled37.default.div`
   position: relative;
   width: fit-content;
   // transform forces the popover to calculate the position from the trigger instead of the viewport
   transform: translate(0);
-  z-index: 1;
+  z-index: ${(props) => props.childrenZIndex};
 `;
-var ContentWrapper2 = import_styled36.default.div`
+var ContentWrapper2 = import_styled37.default.div`
   ${(props) => props.zIndex && `z-index: ${props.zIndex}`};
 `;
 var Popover = (_a) => {
@@ -6416,6 +6943,7 @@ var Popover = (_a) => {
     boundaryOffset = 0.5,
     isOpen,
     zIndex = 500,
+    childrenZIndex = 1,
     placement = "topCenter",
     rootId,
     boundaryElement = "body",
@@ -6428,6 +6956,7 @@ var Popover = (_a) => {
     "boundaryOffset",
     "isOpen",
     "zIndex",
+    "childrenZIndex",
     "placement",
     "rootId",
     "boundaryElement",
@@ -6464,7 +6993,7 @@ var Popover = (_a) => {
     ],
     strategy: "fixed"
   });
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (!refs.reference.current || !refs.floating.current) {
       return;
     }
@@ -6481,17 +7010,17 @@ var Popover = (_a) => {
       opacity: stage === "enter" ? 1 : 0
     }
   };
-  return /* @__PURE__ */ import_react50.default.createElement(Wrapper2, __spreadValues({ ref: reference }, props), children, shouldMount && /* @__PURE__ */ import_react50.default.createElement(import_react50.default.Fragment, null, !rootNode && /* @__PURE__ */ import_react50.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && import_react_dom2.default.createPortal(
-    /* @__PURE__ */ import_react50.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
+  return /* @__PURE__ */ import_react51.default.createElement(Wrapper2, __spreadProps(__spreadValues({ ref: reference }, props), { childrenZIndex }), children, shouldMount && /* @__PURE__ */ import_react51.default.createElement(import_react51.default.Fragment, null, !rootNode && /* @__PURE__ */ import_react51.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && import_react_dom2.default.createPortal(
+    /* @__PURE__ */ import_react51.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
     rootNode
   )));
 };
 var popover_default = Popover;
 
 // src/components/illustration/illustration.tsx
-var import_styled37 = __toESM(require("@emotion/styled"));
-var import_react51 = __toESM(require("react"));
-var IllustrationWrapper = import_styled37.default.span`
+var import_styled38 = __toESM(require("@emotion/styled"));
+var import_react52 = __toESM(require("react"));
+var IllustrationWrapper = import_styled38.default.span`
   display: block;
   color: ${(props) => props.color ? getColorValue(props.color) : getColorValue("grey8")};
   ${(props) => props.size && getSize("width", props.size)};
@@ -6515,7 +7044,7 @@ var Illustration = (_a) => {
     "color",
     "size"
   ]);
-  return /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(
     IllustrationWrapper,
     __spreadValues({
       "aria-hidden": "true",
@@ -6529,10 +7058,10 @@ var Illustration = (_a) => {
 var illustration_default = Illustration;
 
 // src/components/split/split.tsx
-var import_react52 = require("@emotion/react");
-var import_styled38 = __toESM(require("@emotion/styled"));
-var import_react53 = __toESM(require("react"));
-var getSizeStyles = (props) => import_react52.css`
+var import_react53 = require("@emotion/react");
+var import_styled39 = __toESM(require("@emotion/styled"));
+var import_react54 = __toESM(require("react"));
+var getSizeStyles = (props) => import_react53.css`
   ${getSize("width", props.width)};
   ${getSize("height", props.height)};
   ${getSize("min-width", props.minWidth)};
@@ -6540,7 +7069,7 @@ var getSizeStyles = (props) => import_react52.css`
   ${getSize("max-width", props.maxWidth)};
   ${getSize("max-height", props.maxHeight)};
 `;
-var SplitWrapper = import_styled38.default.div`
+var SplitWrapper = import_styled39.default.div`
   display: flex;
   ${(props) => getResponsiveOneOf("align-items", props.alignItems)};
   ${(props) => props.justifyContent && getResponsiveOneOf("justify-content", props.justifyContent)};
@@ -6553,7 +7082,7 @@ var SplitWrapper = import_styled38.default.div`
   ${(props) => getSizeStyles(props)};
   ${(props) => getListContainer(props.as)};
 `;
-var SplitSectionWrapper = import_styled38.default.div`
+var SplitSectionWrapper = import_styled39.default.div`
   ${(props) => getResponsiveNumber("flex-grow", props.grow)};
   ${(props) => getResponsiveNumber("flex-shrink", props.shrink)};
   ${(props) => props.basis && getSize("flex-basis", props.basis)};
@@ -6592,7 +7121,7 @@ var SplitSection = (_a) => {
   if (className || style) {
     console.warn(customStylesWarning);
   }
-  return /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(
     SplitSectionWrapper,
     __spreadValues({
       as: htmlTag,
@@ -6650,7 +7179,7 @@ var Split = (_a) => {
   if (className || style) {
     console.warn(customStylesWarning);
   }
-  return /* @__PURE__ */ import_react53.default.createElement(
+  return /* @__PURE__ */ import_react54.default.createElement(
     SplitWrapper,
     __spreadValues({
       as: htmlTag,
@@ -6668,9 +7197,9 @@ var Split = (_a) => {
       maxWidth,
       maxHeight
     }, props),
-    htmlTag === "ul" || htmlTag === "ol" ? import_react53.Children.map(children, (child) => {
+    htmlTag === "ul" || htmlTag === "ol" ? import_react54.Children.map(children, (child) => {
       if (child.type === SplitSection || child.type === Split) {
-        return (0, import_react53.cloneElement)(child, { htmlTag: "li" });
+        return (0, import_react54.cloneElement)(child, { htmlTag: "li" });
       }
       return child;
     }) : children
@@ -6679,10 +7208,10 @@ var Split = (_a) => {
 var split_default = Split;
 
 // src/components/color-picker/color-picker.tsx
-var import_styled39 = __toESM(require("@emotion/styled"));
-var import_react54 = __toESM(require("react"));
+var import_styled40 = __toESM(require("@emotion/styled"));
+var import_react55 = __toESM(require("react"));
 var import_react_colorful = require("react-colorful");
-var ColorfulWrapper = import_styled39.default.div`
+var ColorfulWrapper = import_styled40.default.div`
   padding: var(--lns-space-medium);
   & .react-colorful {
     width: auto;
@@ -6721,7 +7250,7 @@ var ColorfulWrapper = import_styled39.default.div`
     border: 2px solid white;
   }
 `;
-var ColorPickerContainer = import_styled39.default.div`
+var ColorPickerContainer = import_styled40.default.div`
   position: relative;
   width: ${u(31)};
   background-color: var(--lns-color-overlay);
@@ -6730,7 +7259,7 @@ var ColorPickerContainer = import_styled39.default.div`
     0 0 0 1px var(--lns-color-border),
     var(--lns-shadow-medium);
 `;
-var InputContainer = import_styled39.default.div`
+var InputContainer = import_styled40.default.div`
   position: relative;
   width: 100%;
 
@@ -6759,7 +7288,7 @@ var InputContainer = import_styled39.default.div`
     }
   }
 `;
-var ColorBox = import_styled39.default.div`
+var ColorBox = import_styled40.default.div`
   position: absolute;
   width: ${u(3)};
   height: ${u(3)};
@@ -6769,20 +7298,20 @@ var ColorBox = import_styled39.default.div`
   ${getRadius("100")};
   background-color: ${(props) => props.color};
 `;
-var ButtonWrapper2 = import_styled39.default.div`
+var ButtonWrapper2 = import_styled40.default.div`
   position: relative;
   border-radius: var(--lns-radius-medium);
   padding: 0 var(--lns-space-medium) var(--lns-space-medium)
     var(--lns-space-medium);
 `;
-var SwatchesContainer = import_styled39.default.div`
+var SwatchesContainer = import_styled40.default.div`
   display: grid;
   grid-template-columns: repeat(7, ${u(3)});
   gap: ${u(1)} ${u(1)};
   border-bottom: 1px solid var(--lns-color-border);
   padding: var(--lns-space-medium);
 `;
-var Swatch = import_styled39.default.div`
+var Swatch = import_styled40.default.div`
   cursor: pointer;
   width: ${u(3)};
   height: ${u(3)};
@@ -6793,7 +7322,7 @@ var Swatch = import_styled39.default.div`
 `;
 var SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
   const selectedSwatch = swatches.includes(currentColor) && currentColor;
-  return /* @__PURE__ */ import_react54.default.createElement(SwatchesContainer, null, swatches.map((swatch) => /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(SwatchesContainer, null, swatches.map((swatch) => /* @__PURE__ */ import_react55.default.createElement(
     Swatch,
     {
       key: swatch,
@@ -6804,7 +7333,7 @@ var SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
   )));
 };
 var ColorSelector = ({ color, setColor }) => {
-  return /* @__PURE__ */ import_react54.default.createElement(ColorfulWrapper, null, /* @__PURE__ */ import_react54.default.createElement(import_react_colorful.HexColorPicker, { color, onChange: setColor }), /* @__PURE__ */ import_react54.default.createElement(InputContainer, null, /* @__PURE__ */ import_react54.default.createElement(import_react_colorful.HexColorInput, { prefixed: true, color, onChange: setColor }), /* @__PURE__ */ import_react54.default.createElement(ColorBox, { color })));
+  return /* @__PURE__ */ import_react55.default.createElement(ColorfulWrapper, null, /* @__PURE__ */ import_react55.default.createElement(import_react_colorful.HexColorPicker, { color, onChange: setColor }), /* @__PURE__ */ import_react55.default.createElement(InputContainer, null, /* @__PURE__ */ import_react55.default.createElement(import_react_colorful.HexColorInput, { prefixed: true, color, onChange: setColor }), /* @__PURE__ */ import_react55.default.createElement(ColorBox, { color })));
 };
 var ColorPicker = (_a) => {
   var _b = _a, {
@@ -6818,7 +7347,7 @@ var ColorPicker = (_a) => {
     "swatches",
     "onChange"
   ]);
-  const [tempColor, setTempColor] = (0, import_react54.useState)(
+  const [tempColor, setTempColor] = (0, import_react55.useState)(
     defaultColor ? defaultColor : "#FFFFFF"
   );
   const handleOnChange = (hex) => {
@@ -6828,28 +7357,28 @@ var ColorPicker = (_a) => {
   const onSwatchClick = (swatch) => {
     handleOnChange(swatch);
   };
-  return /* @__PURE__ */ import_react54.default.createElement(ColorPickerContainer, __spreadValues({}, props), swatches && /* @__PURE__ */ import_react54.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(ColorPickerContainer, __spreadValues({}, props), swatches && /* @__PURE__ */ import_react55.default.createElement(
     SwatchSelector,
     {
       swatches,
       currentColor: tempColor,
       onSwatchClick
     }
-  ), /* @__PURE__ */ import_react54.default.createElement(ColorSelector, { color: tempColor, setColor: handleOnChange }), confirmButton && /* @__PURE__ */ import_react54.default.createElement(ButtonWrapper2, null, confirmButton));
+  ), /* @__PURE__ */ import_react55.default.createElement(ColorSelector, { color: tempColor, setColor: handleOnChange }), confirmButton && /* @__PURE__ */ import_react55.default.createElement(ButtonWrapper2, null, confirmButton));
 };
 var color_picker_default = ColorPicker;
 
 // src/illustrations/accounts-and-billing.js
-var React49 = __toESM(require("react"));
+var React50 = __toESM(require("react"));
 function IllustrationAccountsBilling(props) {
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React50.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 102 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React50.createElement(
       "path",
       {
         d: "M96.072 5.826H5.928v90.145h90.144V5.826z",
@@ -6858,7 +7387,7 @@ function IllustrationAccountsBilling(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React49.createElement(
+    /* @__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",
@@ -6872,37 +7401,37 @@ function IllustrationAccountsBilling(props) {
 var accounts_and_billing_default = IllustrationAccountsBilling;
 
 // src/illustrations/invite.js
-var React50 = __toESM(require("react"));
+var React51 = __toESM(require("react"));
 function IllustrationInvite(props) {
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React51.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React51.createElement(
       "path",
       {
         d: "M50.028 25.007A24.999 24.999 0 0034.586 1.905a25.022 25.022 0 00-27.26 5.42 25.002 25.002 0 0017.688 42.687V25.007h25.014z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React51.createElement(
       "path",
       {
         d: "M74.986 50.012a25.02 25.02 0 0023.11-15.436 24.993 24.993 0 00-5.422-27.25 25.017 25.017 0 00-42.702 17.681h25.014v25.005z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React50.createElement(
+    /* @__PURE__ */ React51.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__ */ React50.createElement(
+    /* @__PURE__ */ React51.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",
@@ -6914,23 +7443,23 @@ function IllustrationInvite(props) {
 var invite_default = IllustrationInvite;
 
 // src/illustrations/archived.js
-var React51 = __toESM(require("react"));
+var React52 = __toESM(require("react"));
 function IllustrationArchived(props) {
-  return /* @__PURE__ */ React51.createElement(
+  return /* @__PURE__ */ React52.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React52.createElement(
       "path",
       {
         d: "M0 .002v100h100v-100H0zm90 90H10v-80h80v80z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React51.createElement(
+    /* @__PURE__ */ React52.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",
@@ -6942,16 +7471,16 @@ function IllustrationArchived(props) {
 var archived_default = IllustrationArchived;
 
 // src/illustrations/lead-with-transparency.js
-var React52 = __toESM(require("react"));
+var React53 = __toESM(require("react"));
 function IllustrationLeadwithTransparency(props) {
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React53.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React52.createElement(
+    /* @__PURE__ */ React53.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",
@@ -6963,16 +7492,16 @@ function IllustrationLeadwithTransparency(props) {
 var lead_with_transparency_default = IllustrationLeadwithTransparency;
 
 // src/illustrations/ask-for-more.js
-var React53 = __toESM(require("react"));
+var React54 = __toESM(require("react"));
 function IllustrationAskforMore(props) {
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React54.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React54.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",
@@ -6984,16 +7513,16 @@ function IllustrationAskforMore(props) {
 var ask_for_more_default = IllustrationAskforMore;
 
 // src/illustrations/learning-and-development.js
-var React54 = __toESM(require("react"));
+var React55 = __toESM(require("react"));
 function IllustrationLearningDevelopment(props) {
-  return /* @__PURE__ */ React54.createElement(
+  return /* @__PURE__ */ React55.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 142 142",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React55.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7002,7 +7531,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React55.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7011,7 +7540,7 @@ function IllustrationLearningDevelopment(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React54.createElement(
+    /* @__PURE__ */ React55.createElement(
       "circle",
       {
         cx: 70.71,
@@ -7026,16 +7555,16 @@ function IllustrationLearningDevelopment(props) {
 var learning_and_development_default = IllustrationLearningDevelopment;
 
 // src/illustrations/business-plan.js
-var React55 = __toESM(require("react"));
+var React56 = __toESM(require("react"));
 function IllustrationBusinessPlan(props) {
-  return /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React55.createElement(
+    /* @__PURE__ */ React56.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7049,23 +7578,23 @@ function IllustrationBusinessPlan(props) {
 var business_plan_default = IllustrationBusinessPlan;
 
 // src/illustrations/loom-plans.js
-var React56 = __toESM(require("react"));
+var React57 = __toESM(require("react"));
 function IllustrationLoomPlans(props) {
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React56.createElement(
+    /* @__PURE__ */ React57.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__ */ React56.createElement(
+    /* @__PURE__ */ React57.createElement(
       "path",
       {
         d: "M49.993 12.288L62.28 0v9.064H100L87.713 21.353h-37.72v-9.065z",
@@ -7077,16 +7606,16 @@ function IllustrationLoomPlans(props) {
 var loom_plans_default = IllustrationLoomPlans;
 
 // src/illustrations/collaborate-with-teammates.js
-var React57 = __toESM(require("react"));
+var React58 = __toESM(require("react"));
 function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
-  return /* @__PURE__ */ React57.createElement(
+  return /* @__PURE__ */ React58.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React57.createElement(
+    /* @__PURE__ */ React58.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7100,16 +7629,16 @@ function IllustrationCollaboratewithTeammatesSharedLibrary(props) {
 var collaborate_with_teammates_default = IllustrationCollaboratewithTeammatesSharedLibrary;
 
 // src/illustrations/option-grants.js
-var React58 = __toESM(require("react"));
+var React59 = __toESM(require("react"));
 function IllustrationOptionGrants(props) {
-  return /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React59.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React58.createElement(
+    /* @__PURE__ */ React59.createElement(
       "path",
       {
         fill: "currentColor",
@@ -7121,16 +7650,16 @@ function IllustrationOptionGrants(props) {
 var option_grants_default = IllustrationOptionGrants;
 
 // src/illustrations/community.js
-var React59 = __toESM(require("react"));
+var React60 = __toESM(require("react"));
 function IllustrationCommunity(props) {
-  return /* @__PURE__ */ React59.createElement(
+  return /* @__PURE__ */ React60.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React59.createElement(
+    /* @__PURE__ */ React60.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7144,16 +7673,16 @@ function IllustrationCommunity(props) {
 var community_default = IllustrationCommunity;
 
 // src/illustrations/community-alt.js
-var React60 = __toESM(require("react"));
+var React61 = __toESM(require("react"));
 function IllustrationCommunityAlt(props) {
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7167,16 +7696,16 @@ function IllustrationCommunityAlt(props) {
 var community_alt_default = IllustrationCommunityAlt;
 
 // src/illustrations/parental-leave.js
-var React61 = __toESM(require("react"));
+var React62 = __toESM(require("react"));
 function IllustrationParentalLeave(props) {
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React61.createElement(
+    /* @__PURE__ */ React62.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",
@@ -7188,16 +7717,16 @@ function IllustrationParentalLeave(props) {
 var parental_leave_default = IllustrationParentalLeave;
 
 // src/illustrations/content-limit.js
-var React62 = __toESM(require("react"));
+var React63 = __toESM(require("react"));
 function IllustrationContentLimit(props) {
-  return /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React63.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React62.createElement(
+    /* @__PURE__ */ React63.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7211,16 +7740,16 @@ function IllustrationContentLimit(props) {
 var content_limit_default = IllustrationContentLimit;
 
 // src/illustrations/pto.js
-var React63 = __toESM(require("react"));
+var React64 = __toESM(require("react"));
 function IllustrationPto(props) {
-  return /* @__PURE__ */ React63.createElement(
+  return /* @__PURE__ */ React64.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 111",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React63.createElement(
+    /* @__PURE__ */ React64.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7234,16 +7763,16 @@ function IllustrationPto(props) {
 var pto_default = IllustrationPto;
 
 // src/illustrations/custom-branding.js
-var React64 = __toESM(require("react"));
+var React65 = __toESM(require("react"));
 function IllustrationCustomBranding(props) {
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React65.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",
@@ -7255,53 +7784,53 @@ function IllustrationCustomBranding(props) {
 var custom_branding_default = IllustrationCustomBranding;
 
 // src/illustrations/record.js
-var React65 = __toESM(require("react"));
+var React66 = __toESM(require("react"));
 function IllustrationRecord(props) {
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React66.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React65.createElement("g", { clipPath: "url(#Record_svg__clip0)", fill: "currentColor" }, /* @__PURE__ */ React65.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__ */ React65.createElement("defs", null, /* @__PURE__ */ React65.createElement("clipPath", { id: "Record_svg__clip0" }, /* @__PURE__ */ React65.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
+    /* @__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" })))
   );
 }
 var record_default = IllustrationRecord;
 
 // src/illustrations/desktop-app-and-chrome-extension.js
-var React66 = __toESM(require("react"));
+var React67 = __toESM(require("react"));
 function IllustrationDesktopAppandChromeExtension(props) {
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React67.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React66.createElement(
+    /* @__PURE__ */ React67.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__ */ React66.createElement(
+    /* @__PURE__ */ React67.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__ */ React66.createElement(
+    /* @__PURE__ */ React67.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__ */ React66.createElement(
+    /* @__PURE__ */ React67.createElement(
       "path",
       {
         d: "M68.52 50.317v-.449l-.077.444c.024 0 .053.005.077.005z",
@@ -7313,16 +7842,16 @@ function IllustrationDesktopAppandChromeExtension(props) {
 var desktop_app_and_chrome_extension_default = IllustrationDesktopAppandChromeExtension;
 
 // src/illustrations/remote-first.js
-var React67 = __toESM(require("react"));
+var React68 = __toESM(require("react"));
 function IllustrationRemoteFirst(props) {
-  return /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React68.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.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",
@@ -7331,7 +7860,7 @@ function IllustrationRemoteFirst(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.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",
@@ -7340,7 +7869,7 @@ function IllustrationRemoteFirst(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React67.createElement(
+    /* @__PURE__ */ React68.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",
@@ -7354,23 +7883,23 @@ function IllustrationRemoteFirst(props) {
 var remote_first_default = IllustrationRemoteFirst;
 
 // src/illustrations/device-compatibility.js
-var React68 = __toESM(require("react"));
+var React69 = __toESM(require("react"));
 function IllustrationDeviceCompatibility(props) {
-  return /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React69.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React68.createElement(
+    /* @__PURE__ */ React69.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__ */ React68.createElement(
+    /* @__PURE__ */ React69.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",
@@ -7382,17 +7911,17 @@ function IllustrationDeviceCompatibility(props) {
 var device_compatibility_default = IllustrationDeviceCompatibility;
 
 // src/illustrations/roadmap.js
-var React69 = __toESM(require("react"));
+var React70 = __toESM(require("react"));
 function IllustrationRoadmap(props) {
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React69.createElement("path", { d: "M100 100H0V0h100v100zM10 90h80V10H10v80z", fill: "currentColor" }),
-    /* @__PURE__ */ React69.createElement(
+    /* @__PURE__ */ React70.createElement("path", { d: "M100 100H0V0h100v100zM10 90h80V10H10v80z", fill: "currentColor" }),
+    /* @__PURE__ */ React70.createElement(
       "path",
       {
         d: "M50.008 39.806L80 54v-9.806L50.008 30 20 44.194V54l30.008-14.194zM80 20H20v10h60V20z",
@@ -7404,16 +7933,16 @@ function IllustrationRoadmap(props) {
 var roadmap_default = IllustrationRoadmap;
 
 // src/illustrations/downgrade.js
-var React70 = __toESM(require("react"));
+var React71 = __toESM(require("react"));
 function IllustrationDowngrade(props) {
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React71.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React70.createElement(
+    /* @__PURE__ */ React71.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7427,16 +7956,16 @@ function IllustrationDowngrade(props) {
 var downgrade_default = IllustrationDowngrade;
 
 // src/illustrations/screenshot.js
-var React71 = __toESM(require("react"));
+var React72 = __toESM(require("react"));
 function IllustrationScreenshot(props) {
-  return /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React72.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React71.createElement(
+    /* @__PURE__ */ React72.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7450,16 +7979,16 @@ function IllustrationScreenshot(props) {
 var screenshot_default = IllustrationScreenshot;
 
 // src/illustrations/embrace-the-weird.js
-var React72 = __toESM(require("react"));
+var React73 = __toESM(require("react"));
 function IllustrationEmbracetheWeird(props) {
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React73.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7473,40 +8002,40 @@ function IllustrationEmbracetheWeird(props) {
 var embrace_the_weird_default = IllustrationEmbracetheWeird;
 
 // src/illustrations/share-with-your-team.js
-var React73 = __toESM(require("react"));
+var React74 = __toESM(require("react"));
 function IllustrationSharewithYourTeamTeamLibrary(props) {
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React74.createElement(
       "g",
       {
         clipPath: "url(#Share_with_Your_Team_(Team_Library)_svg__clip0)",
         fill: "currentColor"
       },
-      /* @__PURE__ */ React73.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__ */ React73.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("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__ */ React73.createElement("defs", null, /* @__PURE__ */ React73.createElement("clipPath", { id: "Share_with_Your_Team_(Team_Library)_svg__clip0" }, /* @__PURE__ */ React73.createElement("path", { fill: "#fff", d: "M0 0h100v100H0z" })))
+    /* @__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" })))
   );
 }
 var share_with_your_team_default = IllustrationSharewithYourTeamTeamLibrary;
 
 // src/illustrations/enterprise-plan.js
-var React74 = __toESM(require("react"));
+var React75 = __toESM(require("react"));
 function IllustrationEnterprisePlan(props) {
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React75.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React74.createElement(
+    /* @__PURE__ */ React75.createElement(
       "path",
       {
         fill: "currentColor",
@@ -7518,30 +8047,30 @@ function IllustrationEnterprisePlan(props) {
 var enterprise_plan_default = IllustrationEnterprisePlan;
 
 // src/illustrations/share.js
-var React75 = __toESM(require("react"));
+var React76 = __toESM(require("react"));
 function IllustrationShare(props) {
-  return /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React76.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.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__ */ React75.createElement(
+    /* @__PURE__ */ React76.createElement(
       "path",
       {
         d: "M50 65.732h15.73v-15.73c0 8.69-7.04 15.73-15.73 15.73z",
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React75.createElement(
+    /* @__PURE__ */ React76.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",
@@ -7553,39 +8082,39 @@ function IllustrationShare(props) {
 var share_default = IllustrationShare;
 
 // src/illustrations/faq-and-security.js
-var React76 = __toESM(require("react"));
+var React77 = __toESM(require("react"));
 function IllustrationFaQandSecurity(props) {
-  return /* @__PURE__ */ React76.createElement(
+  return /* @__PURE__ */ React77.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React76.createElement(
+    /* @__PURE__ */ React77.createElement(
       "path",
       {
         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__ */ React76.createElement("path", { d: "M31 50V0H0v100h99.999V69H31V50z", fill: "currentColor" }),
-    /* @__PURE__ */ React76.createElement("path", { d: "M100 66V0H34v31h35v35h31z", fill: "currentColor" })
+    /* @__PURE__ */ React77.createElement("path", { d: "M31 50V0H0v100h99.999V69H31V50z", fill: "currentColor" }),
+    /* @__PURE__ */ React77.createElement("path", { d: "M100 66V0H34v31h35v35h31z", fill: "currentColor" })
   );
 }
 var faq_and_security_default = IllustrationFaQandSecurity;
 
 // src/illustrations/starred.js
-var React77 = __toESM(require("react"));
+var React78 = __toESM(require("react"));
 function IllustrationStarred(props) {
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 101 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React77.createElement(
+    /* @__PURE__ */ React78.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",
@@ -7597,16 +8126,16 @@ function IllustrationStarred(props) {
 var starred_default = IllustrationStarred;
 
 // src/illustrations/five-minute-limit.js
-var React78 = __toESM(require("react"));
+var React79 = __toESM(require("react"));
 function Illustration5MinuteLimit(props) {
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React78.createElement(
+    /* @__PURE__ */ React79.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7620,16 +8149,16 @@ function Illustration5MinuteLimit(props) {
 var five_minute_limit_default = Illustration5MinuteLimit;
 
 // src/illustrations/starter-plus-plan.js
-var React79 = __toESM(require("react"));
+var React80 = __toESM(require("react"));
 function IllustrationStarterPlusPlan(props) {
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React80.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React79.createElement(
+    /* @__PURE__ */ React80.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7643,16 +8172,16 @@ function IllustrationStarterPlusPlan(props) {
 var starter_plus_plan_default = IllustrationStarterPlusPlan;
 
 // src/illustrations/getting-started.js
-var React80 = __toESM(require("react"));
+var React81 = __toESM(require("react"));
 function IllustrationGettingStarted(props) {
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React81.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 106 106",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.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",
@@ -7661,7 +8190,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.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",
@@ -7670,7 +8199,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.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",
@@ -7679,7 +8208,7 @@ function IllustrationGettingStarted(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React80.createElement(
+    /* @__PURE__ */ React81.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",
@@ -7693,23 +8222,23 @@ function IllustrationGettingStarted(props) {
 var getting_started_default = IllustrationGettingStarted;
 
 // src/illustrations/strong-upload-speed.js
-var React81 = __toESM(require("react"));
+var React82 = __toESM(require("react"));
 function IllustrationStrongUploadSpeed(props) {
-  return /* @__PURE__ */ React81.createElement(
+  return /* @__PURE__ */ React82.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 111 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React81.createElement(
+    /* @__PURE__ */ React82.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__ */ React81.createElement(
+    /* @__PURE__ */ React82.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",
@@ -7721,16 +8250,16 @@ function IllustrationStrongUploadSpeed(props) {
 var strong_upload_speed_default = IllustrationStrongUploadSpeed;
 
 // src/illustrations/growth-through-empathy.js
-var React82 = __toESM(require("react"));
+var React83 = __toESM(require("react"));
 function IllustrationGrowththroughEmpathy(props) {
-  return /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React83.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 104 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.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",
@@ -7739,7 +8268,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.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",
@@ -7748,7 +8277,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.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",
@@ -7757,7 +8286,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.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",
@@ -7766,7 +8295,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.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",
@@ -7775,7 +8304,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.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",
@@ -7784,7 +8313,7 @@ function IllustrationGrowththroughEmpathy(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React83.createElement(
       "path",
       {
         d: "M64.015 0c0 6.693-5.432 12.124-12.124 12.124S39.767 6.693 39.767.002",
@@ -7798,16 +8327,16 @@ function IllustrationGrowththroughEmpathy(props) {
 var growth_through_empathy_default = IllustrationGrowththroughEmpathy;
 
 // src/illustrations/troubleshooting.js
-var React83 = __toESM(require("react"));
+var React84 = __toESM(require("react"));
 function IllustrationTroubleshooting(props) {
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React84.createElement(
       "path",
       {
         d: "M5 55h99.984c0 27.61-22.375 50-50 50S5 82.61 5 55z",
@@ -7817,7 +8346,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React84.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",
@@ -7826,7 +8355,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React84.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",
@@ -7835,7 +8364,7 @@ function IllustrationTroubleshooting(props) {
         strokeMiterlimit: 10
       }
     ),
-    /* @__PURE__ */ React83.createElement(
+    /* @__PURE__ */ React84.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",
@@ -7849,16 +8378,16 @@ function IllustrationTroubleshooting(props) {
 var troubleshooting_default = IllustrationTroubleshooting;
 
 // src/illustrations/health-plans.js
-var React84 = __toESM(require("react"));
+var React85 = __toESM(require("react"));
 function IllustrationHealthPlans(props) {
-  return /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React85.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7872,16 +8401,16 @@ function IllustrationHealthPlans(props) {
 var health_plans_default = IllustrationHealthPlans;
 
 // src/illustrations/upgrade.js
-var React85 = __toESM(require("react"));
+var React86 = __toESM(require("react"));
 function IllustrationUpgrade(props) {
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React86.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7895,16 +8424,16 @@ function IllustrationUpgrade(props) {
 var upgrade_default = IllustrationUpgrade;
 
 // src/illustrations/how-to-use-loom.js
-var React86 = __toESM(require("react"));
+var React87 = __toESM(require("react"));
 function IllustrationHowtoUseLoom(props) {
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React87.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 110 110",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React87.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",
@@ -7916,16 +8445,16 @@ function IllustrationHowtoUseLoom(props) {
 var how_to_use_loom_default = IllustrationHowtoUseLoom;
 
 // src/illustrations/upload-drag-and-drop.js
-var React87 = __toESM(require("react"));
+var React88 = __toESM(require("react"));
 function IllustrationUploadDragAndDrop(props) {
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.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",
@@ -7937,16 +8466,16 @@ function IllustrationUploadDragAndDrop(props) {
 var upload_drag_and_drop_default = IllustrationUploadDragAndDrop;
 
 // src/illustrations/use-cases.js
-var React88 = __toESM(require("react"));
+var React89 = __toESM(require("react"));
 function IllustrationUseCases(props) {
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React89.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 100",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.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",
@@ -7958,16 +8487,16 @@ function IllustrationUseCases(props) {
 var use_cases_default = IllustrationUseCases;
 
 // src/illustrations/invite-members.js
-var React89 = __toESM(require("react"));
+var React90 = __toESM(require("react"));
 function IllustrationInviteMembers(props) {
-  return /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React90.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 134 134",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React90.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -7981,45 +8510,45 @@ function IllustrationInviteMembers(props) {
 var invite_members_default = IllustrationInviteMembers;
 
 // src/illustrations/wellness.js
-var React90 = __toESM(require("react"));
+var React91 = __toESM(require("react"));
 function IllustrationWellness(props) {
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React91.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 100 101",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React90.createElement(
+    /* @__PURE__ */ React91.createElement(
       "path",
       {
         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__ */ React90.createElement(
+    /* @__PURE__ */ React91.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__ */ React90.createElement("path", { fill: "currentColor", d: "M100 67.595H66.667v33.333H100z" })
+    /* @__PURE__ */ React91.createElement("path", { fill: "currentColor", d: "M100 67.595H66.667v33.333H100z" })
   );
 }
 var wellness_default = IllustrationWellness;
 
 // src/illustrations/comments.js
-var React91 = __toESM(require("react"));
+var React92 = __toESM(require("react"));
 function IllustrationComments(props) {
-  return /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React92.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8028,7 +8557,7 @@ function IllustrationComments(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React91.createElement(
+    /* @__PURE__ */ React92.createElement(
       "path",
       {
         fill: "currentColor",
@@ -8040,16 +8569,16 @@ function IllustrationComments(props) {
 var comments_default = IllustrationComments;
 
 // src/illustrations/folders-empty-state-mobile.js
-var React92 = __toESM(require("react"));
+var React93 = __toESM(require("react"));
 function IllutrationFoldersEmptyStateMobile(props) {
-  return /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React93.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8058,7 +8587,7 @@ function IllutrationFoldersEmptyStateMobile(props) {
         fill: "currentColor"
       }
     ),
-    /* @__PURE__ */ React92.createElement(
+    /* @__PURE__ */ React93.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8072,23 +8601,23 @@ function IllutrationFoldersEmptyStateMobile(props) {
 var folders_empty_state_mobile_default = IllutrationFoldersEmptyStateMobile;
 
 // src/illustrations/help-ios.js
-var React93 = __toESM(require("react"));
+var React94 = __toESM(require("react"));
 function IllustrationHelpIos(props) {
-  return /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React94.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React94.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__ */ React93.createElement(
+    /* @__PURE__ */ React94.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8102,17 +8631,17 @@ function IllustrationHelpIos(props) {
 var help_ios_default = IllustrationHelpIos;
 
 // src/illustrations/my-videos-empty-state-mobile.js
-var React94 = __toESM(require("react"));
+var React95 = __toESM(require("react"));
 function IllustrationMyVideosEmptyStateMobile(props) {
-  return /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React94.createElement("path", { d: "M96 0H0v96h96V0zM84 12v72H12V12h72z", fill: "currentColor" }),
-    /* @__PURE__ */ React94.createElement(
+    /* @__PURE__ */ React95.createElement("path", { d: "M96 0H0v96h96V0zM84 12v72H12V12h72z", fill: "currentColor" }),
+    /* @__PURE__ */ React95.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8126,16 +8655,16 @@ function IllustrationMyVideosEmptyStateMobile(props) {
 var my_videos_empty_state_mobile_default = IllustrationMyVideosEmptyStateMobile;
 
 // src/illustrations/recents-empty-state-mobile.js
-var React95 = __toESM(require("react"));
+var React96 = __toESM(require("react"));
 function IllustrationRecentsEmptyStateMobile(props) {
-  return /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React95.createElement(
+    /* @__PURE__ */ React96.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -8149,16 +8678,16 @@ function IllustrationRecentsEmptyStateMobile(props) {
 var recents_empty_state_mobile_default = IllustrationRecentsEmptyStateMobile;
 
 // src/illustrations/chrome-notifications-empty-state.js
-var React96 = __toESM(require("react"));
+var React97 = __toESM(require("react"));
 function IllustrationChromeNotificationsEmptyState(props) {
-  return /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React97.createElement(
     "svg",
     __spreadValues({
       viewBox: "0 0 96 96",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg"
     }, props),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement(
       "circle",
       {
         cx: 15.84,
@@ -8168,7 +8697,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.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",
@@ -8176,8 +8705,8 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React96.createElement("circle", { cx: 80.16, cy: 15.84, r: 15.84, fill: "currentColor" }),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement("circle", { cx: 80.16, cy: 15.84, r: 15.84, fill: "currentColor" }),
+    /* @__PURE__ */ React97.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",
@@ -8185,7 +8714,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement(
       "circle",
       {
         cx: 48,
@@ -8195,7 +8724,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.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",
@@ -8203,7 +8732,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement(
       "circle",
       {
         cx: 15.84,
@@ -8213,7 +8742,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.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",
@@ -8221,7 +8750,7 @@ function IllustrationChromeNotificationsEmptyState(props) {
         strokeWidth: 9.6
       }
     ),
-    /* @__PURE__ */ React96.createElement(
+    /* @__PURE__ */ React97.createElement(
       "circle",
       {
         cx: 80.16,