@wistia/ui 0.4.3-beta.f6b8f8cc.086364f → 0.4.4

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.3-beta.f6b8f8cc.086364f
+ * @license @wistia/ui v0.4.4
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1544,83 +1544,6 @@ var useActiveMq = () => {
   });
 };
 
-// src/hooks/useKey/useKey.ts
-import { useMemo as useMemo2 } from "react";
-
-// src/private/hooks/useEvent/useEvent.ts
-import { useEffect as useEffect2, useRef as useRef2 } from "react";
-var isEventTargetSupported = (eventTarget) => (
-  // @ts-expect-error the compiler thinks that addEventListener may not exist on eventTarget, but we still need to check it.
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  !!(typeof eventTarget === "object" && eventTarget?.addEventListener)
-);
-var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
-  const savedEventHandler = useRef2();
-  const savedEventOptions = useRef2();
-  useEffect2(() => {
-    savedEventHandler.current = eventHandler;
-  }, [eventHandler]);
-  useEffect2(() => {
-    savedEventOptions.current = eventOptions;
-  }, [eventOptions]);
-  useEffect2(() => {
-    if (!eventName || !isEventTargetSupported(eventTarget)) {
-      return;
-    }
-    const eventListener = (event) => {
-      if (savedEventHandler.current !== void 0) {
-        return savedEventHandler.current(event);
-      }
-      return () => {
-      };
-    };
-    eventTarget.addEventListener(eventName, eventListener, savedEventOptions.current);
-    return () => {
-      eventTarget.removeEventListener(eventName, eventListener, savedEventOptions.current);
-    };
-  }, [eventName, eventTarget, savedEventOptions]);
-};
-
-// src/hooks/useKey/useKey.ts
-var createKeyPredicate = (keyFilter) => {
-  if (typeof keyFilter === "function") {
-    return keyFilter;
-  }
-  if (typeof keyFilter === "string") {
-    return (event) => event.key === keyFilter;
-  }
-  if (keyFilter !== null && keyFilter !== void 0 && !!keyFilter) {
-    return () => true;
-  }
-  return () => false;
-};
-var useKey = (key, eventHandler, options = {}, dependencies = [key]) => {
-  const { eventName = "keydown", eventTarget, eventOptions } = options;
-  const memoizedEventHandler = useMemo2(() => {
-    const predicate = createKeyPredicate(key);
-    return (handlerEvent) => {
-      if (["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement?.nodeName ?? "") || document.activeElement?.isContentEditable) {
-        return;
-      }
-      if (predicate(handlerEvent)) {
-        return eventHandler(handlerEvent);
-      }
-    };
-  }, dependencies);
-  useEvent(eventName, memoizedEventHandler, eventTarget, eventOptions);
-};
-
-// src/hooks/useAriaLive/useAriaLive.tsx
-import { useContext } from "react";
-import { isNil as isNil2 } from "@wistia/type-guards";
-var useAriaLive = () => {
-  const context = useContext(AriaLiveContext);
-  if (isNil2(context)) {
-    throw new Error("useAriaLive must be used within an AriaLiveProvider");
-  }
-  return context;
-};
-
 // src/hooks/useToast/useToast.tsx
 import { useCallback as useCallback3 } from "react";
 import { toast as sonnerToast } from "sonner";
@@ -1905,6 +1828,17 @@ var useToast = () => {
   );
 };
 
+// src/hooks/useAriaLive/useAriaLive.tsx
+import { useContext } from "react";
+import { isNil as isNil2 } from "@wistia/type-guards";
+var useAriaLive = () => {
+  const context = useContext(AriaLiveContext);
+  if (isNil2(context)) {
+    throw new Error("useAriaLive must be used within an AriaLiveProvider");
+  }
+  return context;
+};
+
 // src/components/ActionButton/ActionButton.tsx
 import { forwardRef as forwardRef3 } from "react";
 import styled6, { css as css14 } from "styled-components";
@@ -5277,13 +5211,13 @@ var iconMap = {
 
 // src/private/hooks/useResponsiveProp/useResponsiveProp.ts
 import { isNotUndefined, isRecord, isUndefined } from "@wistia/type-guards";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo2 } from "react";
 var isResponsiveObject = (values) => {
   return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
 };
 var useResponsiveProp = (values) => {
   const activeMediaQueries = useActiveMq();
-  return useMemo3(() => {
+  return useMemo2(() => {
     if (isRecord(values) && isResponsiveObject(values)) {
       const mq2 = activeMediaQueries.find((key) => key in values);
       return isNotUndefined(mq2) && isNotUndefined(values[mq2]) ? values[mq2] : values.base;
@@ -5731,7 +5665,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState4, useMemo as useMemo4 } from "react";
+import { useState as useState4, useMemo as useMemo3 } from "react";
 import { isNil as isNil6 } from "@wistia/type-guards";
 import styled8 from "styled-components";
 
@@ -5872,7 +5806,7 @@ var Avatar = ({
     onImageLoad?.("initials");
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
-  const avatarColor = useMemo4(() => chooseColorScheme(name), [name]);
+  const avatarColor = useMemo3(() => chooseColorScheme(name), [name]);
   const showInitials = isNil6(imageUrl) || imageLoadState === "error";
   return /* @__PURE__ */ jsx165(
     AvatarWrapper,
@@ -6072,57 +6006,10 @@ var Box = ({
 };
 Box.displayName = "Box";
 
-// src/components/Breadcrumbs/Breadcrumbs.tsx
-import styled11 from "styled-components";
-import { jsx as jsx168 } from "react/jsx-runtime";
-var StyledBreadcrumbs = styled11.nav`
-  display: flex;
-  align-items: center;
-  gap: var(--wui-space-01);
-
-  > svg:last-of-type {
-    display: none;
-  }
-`;
-var Breadcrumbs = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx168(
-    StyledBreadcrumbs,
-    {
-      "aria-label": "Breadcrumbs",
-      ...props,
-      children
-    }
-  );
-};
-Breadcrumbs.displayName = "Breadcrumbs";
-
-// src/components/Breadcrumbs/Breadcrumb.tsx
-import { Fragment as Fragment2, jsx as jsx169, jsxs as jsxs8 } from "react/jsx-runtime";
-var Breadcrumb = ({ icon, href, children }) => {
-  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
-    /* @__PURE__ */ jsx169(
-      Button,
-      {
-        href,
-        leftIcon: icon,
-        variant: "ghost",
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx169(
-      Icon,
-      {
-        size: "sm",
-        type: "caret-right"
-      }
-    )
-  ] });
-};
-
 // src/components/ButtonGroup/ButtonGroup.tsx
-import styled12 from "styled-components";
+import styled11 from "styled-components";
 import { isNil as isNil8 } from "@wistia/type-guards";
-import { jsx as jsx170 } from "react/jsx-runtime";
+import { jsx as jsx168 } from "react/jsx-runtime";
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -6135,7 +6022,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = styled12.div`
+var ButtonGroupComponent = styled11.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -6164,7 +6051,7 @@ var ButtonGroup = ({
   if (isNil8(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx170(
+  return /* @__PURE__ */ jsx168(
     ButtonGroupComponent,
     {
       $align: align,
@@ -6177,9 +6064,9 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Card/Card.tsx
-import styled13 from "styled-components";
-import { jsx as jsx171 } from "react/jsx-runtime";
-var StyledCard = styled13(Box)`
+import styled12 from "styled-components";
+import { jsx as jsx169 } from "react/jsx-runtime";
+var StyledCard = styled12(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -6212,7 +6099,7 @@ var Card = ({
   prominence = "secondary",
   border = false,
   ...props
-}) => /* @__PURE__ */ jsx171(
+}) => /* @__PURE__ */ jsx169(
   StyledCard,
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -6230,15 +6117,15 @@ Card.displayName = "Card";
 // src/components/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef6, useId } from "react";
 import { Root as CheckboxRoot, Indicator as CheckboxIndicator } from "@radix-ui/react-checkbox";
-import styled17 from "styled-components";
+import styled16 from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled15, { css as css16 } from "styled-components";
+import styled14, { css as css16 } from "styled-components";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef5 } from "react";
-import styled14, { css as css15 } from "styled-components";
+import styled13, { css as css15 } from "styled-components";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -6246,7 +6133,7 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-import { jsx as jsx172 } from "react/jsx-runtime";
+import { jsx as jsx170 } from "react/jsx-runtime";
 var heroStyle = css15`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
@@ -6299,7 +6186,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = styled14.div`
+var StyledHeading = styled13.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6342,7 +6229,7 @@ var HeadingComponent = forwardRef5(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx172(
+  }, ref) => /* @__PURE__ */ jsx170(
     StyledHeading,
     {
       ref,
@@ -6362,7 +6249,7 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Label/Label.tsx
-import { jsx as jsx173 } from "react/jsx-runtime";
+import { jsx as jsx171 } from "react/jsx-runtime";
 var requiredStyle = css16`
   &::after {
     color: var(--wui-color-text-error);
@@ -6374,7 +6261,7 @@ var requiredStyle = css16`
 var disabledStyle = css16`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = styled15(Heading).attrs({
+var StyledLabel2 = styled14(Heading).attrs({
   variant: "heading6",
   renderAs: "label"
 })`
@@ -6403,7 +6290,7 @@ var Label = ({
   required = false,
   screenReaderOnly = false,
   ...otherProps
-}) => /* @__PURE__ */ jsx173(
+}) => /* @__PURE__ */ jsx171(
   StyledLabel2,
   {
     ...otherProps,
@@ -6417,10 +6304,10 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
-import styled16 from "styled-components";
+import styled15 from "styled-components";
 import { isNil as isNil9 } from "@wistia/type-guards";
-import { jsx as jsx174 } from "react/jsx-runtime";
-var StyledLabelDescription = styled16.div`
+import { jsx as jsx172 } from "react/jsx-runtime";
+var StyledLabelDescription = styled15.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -6433,13 +6320,13 @@ var LabelDescription = ({
   if (isNil9(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx174(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ jsx172(StyledLabelDescription, { ...props, children });
 };
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx175, jsxs as jsxs9 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx175(
+import { jsx as jsx173, jsxs as jsxs8 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx173(
   "svg",
   {
     fill: "inherit",
@@ -6447,7 +6334,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx175(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx175(
+    children: /* @__PURE__ */ jsx173(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
@@ -6456,7 +6343,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx175(
     )
   }
 );
-var StyledCheckboxWrapper = styled17.div`
+var StyledCheckboxWrapper = styled16.div`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -6470,7 +6357,7 @@ var StyledCheckboxWrapper = styled17.div`
     background-color: #efefef;
   }
 `;
-var StyledCheckboxRoot = styled17(CheckboxRoot)`
+var StyledCheckboxRoot = styled16(CheckboxRoot)`
   all: unset; /* CheckboxRoot renders as a button element, so we need to reset all styles */
   background-color: var(--wui-color-bg-fill-white);
   min-width: 16px;
@@ -6504,10 +6391,10 @@ var StyledCheckboxRoot = styled17(CheckboxRoot)`
     /* TODO Lamp to design focus state */
   }
 `;
-var StyledCheckboxIndicator = styled17(CheckboxIndicator)`
+var StyledCheckboxIndicator = styled16(CheckboxIndicator)`
   display: flex;
 `;
-var StyledLabelWrapper = styled17.div`
+var StyledLabelWrapper = styled16.div`
   display: flex;
   flex-direction: column;
   margin-left: var(--wui-space-02);
@@ -6528,8 +6415,8 @@ var Checkbox = forwardRef6(
   }, ref) => {
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
-    return /* @__PURE__ */ jsxs9(StyledCheckboxWrapper, { children: [
-      /* @__PURE__ */ jsx175(
+    return /* @__PURE__ */ jsxs8(StyledCheckboxWrapper, { children: [
+      /* @__PURE__ */ jsx173(
         StyledCheckboxRoot,
         {
           ref,
@@ -6554,11 +6441,11 @@ var Checkbox = forwardRef6(
           required,
           value,
           ...otherProps,
-          children: /* @__PURE__ */ jsx175(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx175(CheckIcon, {}) })
+          children: /* @__PURE__ */ jsx173(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx173(CheckIcon, {}) })
         }
       ),
-      /* @__PURE__ */ jsxs9(StyledLabelWrapper, { children: [
-        /* @__PURE__ */ jsx175(
+      /* @__PURE__ */ jsxs8(StyledLabelWrapper, { children: [
+        /* @__PURE__ */ jsx173(
           Label,
           {
             disabled,
@@ -6567,7 +6454,7 @@ var Checkbox = forwardRef6(
             children: label
           }
         ),
-        /* @__PURE__ */ jsx175(LabelDescription, { children: description })
+        /* @__PURE__ */ jsx173(LabelDescription, { children: description })
       ] })
     ] });
   }
@@ -6575,8 +6462,8 @@ var Checkbox = forwardRef6(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-import styled18, { css as css17 } from "styled-components";
-import { jsx as jsx176 } from "react/jsx-runtime";
+import styled17, { css as css17 } from "styled-components";
+import { jsx as jsx174 } from "react/jsx-runtime";
 var horizontalBorderCss = css17`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -6590,7 +6477,7 @@ var verticalBorderCss = css17`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled18.div`
+var DividerComponent = styled17.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -6605,7 +6492,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsx176(
+  return /* @__PURE__ */ jsx174(
     DividerComponent,
     {
       $orientation: orientation,
@@ -6618,16 +6505,16 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef8, useRef as useRef3, useMemo as useMemo5, createContext as createContext2, useState as useState5, useId as useId2 } from "react";
-import styled20 from "styled-components";
+import { forwardRef as forwardRef8, useRef as useRef2, useMemo as useMemo4, createContext as createContext2, useState as useState5, useId as useId2 } from "react";
+import styled19 from "styled-components";
 import { isNotUndefined as isNotUndefined4, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled19 from "styled-components";
-import { jsx as jsx177 } from "react/jsx-runtime";
+import styled18 from "styled-components";
+import { jsx as jsx175 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = styled19.div`
+var StyledStack = styled18.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -6636,7 +6523,7 @@ var StackComponent = forwardRef7(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx177(
+    return /* @__PURE__ */ jsx175(
       StyledStack,
       {
         ref,
@@ -6652,8 +6539,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-import { jsx as jsx178 } from "react/jsx-runtime";
-var StyledForm = styled20.form`
+import { jsx as jsx176 } from "react/jsx-runtime";
+var StyledForm = styled19.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -6668,7 +6555,7 @@ var FormContext = createContext2({
 var FormComponent = ({ children, action, values = {}, validate, fullWidth = false, ...props }, forwardedRef) => {
   const [errors, setErrors] = useState5({});
   const [hasSubmitted, setHasSubmitted] = useState5(false);
-  const innerRef = useRef3();
+  const innerRef = useRef2();
   const ref = forwardedRef ?? innerRef;
   const autoId = useId2();
   const id = props.id ?? autoId;
@@ -6712,7 +6599,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       void action(null);
     }
   };
-  const context = useMemo5(() => {
+  const context = useMemo4(() => {
     return {
       values,
       errors,
@@ -6722,7 +6609,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
   }, [values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ jsx178(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx178(
+    /* @__PURE__ */ jsx176(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx176(
       Stack,
       {
         gap: "space-05",
@@ -6779,23 +6666,23 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-import { useContext as useContext2, useRef as useRef4 } from "react";
+import { useContext as useContext2, useRef as useRef3 } from "react";
 import { isArray, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { jsx as jsx179, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx177, jsxs as jsxs9 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx179("li", { children: /* @__PURE__ */ jsx179(Link, { href: `${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx177("li", { children: /* @__PURE__ */ jsx177(Link, { href: `${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = useRef4(null);
+  const ref = useRef3(null);
   const { formId, errors, hasSubmitted } = useContext2(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs10("div", { ref, children: [
-    /* @__PURE__ */ jsx179("p", { children: description }),
-    /* @__PURE__ */ jsx179("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined5(error)).map(
-      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx179(
+  return /* @__PURE__ */ jsxs9("div", { ref, children: [
+    /* @__PURE__ */ jsx177("p", { children: description }),
+    /* @__PURE__ */ jsx177("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined5(error)).map(
+      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx177(
         ErrorItem,
         {
           error: err,
@@ -6803,7 +6690,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx179(
+      )) : /* @__PURE__ */ jsx177(
         ErrorItem,
         {
           error: error ?? "",
@@ -6818,13 +6705,13 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children2, cloneElement as cloneElement3, useContext as useContext3 } from "react";
-import styled23 from "styled-components";
+import styled22 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil7, isNotUndefined as isNotUndefined6, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef9 } from "react";
-import styled21, { css as css18 } from "styled-components";
-import { jsx as jsx180 } from "react/jsx-runtime";
+import styled20, { css as css18 } from "styled-components";
+import { jsx as jsx178 } from "react/jsx-runtime";
 var bodyBoldStyles = css18`
   > strong,
   b {
@@ -6923,7 +6810,7 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var StyledText = styled21.div`
+var StyledText = styled20.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -6977,7 +6864,7 @@ var TextComponent = forwardRef9(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx180(
+    return /* @__PURE__ */ jsx178(
       StyledText,
       {
         ref,
@@ -6999,28 +6886,28 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { createContext as createContext3, useMemo as useMemo6 } from "react";
+import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
-import styled22 from "styled-components";
-import { useRef as useRef5 } from "react";
-import { jsx as jsx181, jsxs as jsxs11 } from "react/jsx-runtime";
-var StyledFieldset = styled22.fieldset`
+import styled21 from "styled-components";
+import { useRef as useRef4 } from "react";
+import { jsx as jsx179, jsxs as jsxs10 } from "react/jsx-runtime";
+var StyledFieldset = styled21.fieldset`
   border: 0;
 `;
-var StyledLegend = styled22.legend`
+var StyledLegend = styled21.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = useRef5();
-  return /* @__PURE__ */ jsxs11(
+  const ref = useRef4();
+  return /* @__PURE__ */ jsxs10(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ jsx181(
+        /* @__PURE__ */ jsx179(
           Heading,
           {
             renderAs: StyledLegend,
@@ -7036,7 +6923,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx182 } from "react/jsx-runtime";
+import { jsx as jsx180 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext3(null);
 var CheckboxGroup = ({
   children,
@@ -7045,19 +6932,19 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = useMemo6(() => {
+  const context = useMemo5(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx182(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx182(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx180(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx180(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { jsx as jsx183, jsxs as jsxs12 } from "react/jsx-runtime";
-var StyledFormField = styled23.div`
+import { jsx as jsx181, jsxs as jsxs11 } from "react/jsx-runtime";
+var StyledFormField = styled22.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -7065,7 +6952,7 @@ var StyledFormField = styled23.div`
   flex-direction: column;
   gap: var(--form-field-spacing);
 `;
-var StyledErrorList = styled23.ul`
+var StyledErrorList = styled22.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -7075,7 +6962,7 @@ var StyledErrorList = styled23.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = isArray2(errors);
-  return isMultipleErrors ? /* @__PURE__ */ jsx183(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx183(
+  return isMultipleErrors ? /* @__PURE__ */ jsx181(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx181(
     Text,
     {
       colorScheme: "error",
@@ -7085,7 +6972,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ jsx183(
+  )) }) : /* @__PURE__ */ jsx181(
     Text,
     {
       colorScheme: "error",
@@ -7142,10 +7029,10 @@ var FormField = ({
     };
   }
   Children2.only(children);
-  return /* @__PURE__ */ jsxs12(StyledFormField, { ...props, children: [
-    !isInlineLabel && /* @__PURE__ */ jsx183(Label, { htmlFor: id, children: label }),
+  return /* @__PURE__ */ jsxs11(StyledFormField, { ...props, children: [
+    !isInlineLabel && /* @__PURE__ */ jsx181(Label, { htmlFor: id, children: label }),
     cloneElement3(children, childProps),
-    isNotNil7(computedError) ? /* @__PURE__ */ jsx183(
+    isNotNil7(computedError) ? /* @__PURE__ */ jsx181(
       ErrorMessages,
       {
         errors: computedError,
@@ -7157,8 +7044,8 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-import { createContext as createContext4, useMemo as useMemo7 } from "react";
-import { jsx as jsx184 } from "react/jsx-runtime";
+import { createContext as createContext4, useMemo as useMemo6 } from "react";
+import { jsx as jsx182 } from "react/jsx-runtime";
 var RadioGroupContext = createContext4(null);
 var RadioGroup = ({
   children,
@@ -7167,21 +7054,21 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
-  const context = useMemo7(() => {
+  const context = useMemo6(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx184(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx184(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx182(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx182(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 import { Children as Children3, cloneElement as cloneElement4, forwardRef as forwardRef10 } from "react";
-import styled24 from "styled-components";
-import { jsx as jsx185 } from "react/jsx-runtime";
-var StyledButton2 = styled24(Button)`
+import styled23 from "styled-components";
+import { jsx as jsx183 } from "react/jsx-runtime";
+var StyledButton2 = styled23(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -7198,7 +7085,7 @@ var StyledButton2 = styled24(Button)`
 var IconButton = forwardRef10(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ jsx185(
+    return /* @__PURE__ */ jsx183(
       StyledButton2,
       {
         ...props,
@@ -7216,10 +7103,10 @@ var IconButton = forwardRef10(
 IconButton.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef6 } from "react";
-import styled25, { css as css19 } from "styled-components";
+import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef5 } from "react";
+import styled24, { css as css19 } from "styled-components";
 import { isNil as isNil10, isNotNil as isNotNil8 } from "@wistia/type-guards";
-import { jsx as jsx186, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx184, jsxs as jsxs12 } from "react/jsx-runtime";
 var inputStyles = css19`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -7261,7 +7148,7 @@ var inputStyles = css19`
     }
   }
 `;
-var StyledInputContainer = styled25.div`
+var StyledInputContainer = styled24.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -7318,11 +7205,11 @@ var Input = forwardRef11(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = useRef6();
+    const internalRef = useRef5();
     const ref = isValidRef(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil10(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx186(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx184(Icon, { type: "search" });
     }
     if (isNotNil8(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement5(leftIconToDisplay, {
@@ -7347,21 +7234,21 @@ var Input = forwardRef11(
         });
       }
     };
-    return /* @__PURE__ */ jsxs13(
+    return /* @__PURE__ */ jsxs12(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx186(
+          type === "multiline" ? /* @__PURE__ */ jsx184(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ jsx186(
+          ) : /* @__PURE__ */ jsx184(
             "input",
             {
               ...props,
@@ -7379,7 +7266,7 @@ var Input = forwardRef11(
 Input.displayName = "Input";
 
 // src/components/Menu/Menu.tsx
-import styled26, { css as css20, keyframes } from "styled-components";
+import styled25, { css as css20, keyframes } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -7387,7 +7274,7 @@ import {
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil9, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
-import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx185, jsxs as jsxs13 } from "react/jsx-runtime";
 var open = keyframes`
   from {
     opacity: 0;
@@ -7443,8 +7330,8 @@ var menuContentCss = css20`
     transform: initial;
   }
 
-  hr {
-    margin: var(--wui-space-02) 0;
+  [role='separator'] {
+    margin: var(--menu-divider-margin) 0;
   }
 `;
 var menuItemCss = css20`
@@ -7456,6 +7343,7 @@ var menuItemCss = css20`
   --menu-label-font-size: var(--wui-typography-label-3-size);
   --menu-label-font-weight: var(--wui-typography-label-3-weight);
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
+  --menu-divider-margin: var(--wui-space-02);
 `;
 var compactMenuItemCss = css20`
   --menu-label-description-gap: 0;
@@ -7466,8 +7354,9 @@ var compactMenuItemCss = css20`
   --menu-label-font-size: var(--wui-typography-label-4-size);
   --menu-label-font-weight: var(--wui-typography-label-4-weight);
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
+  --menu-divider-margin: var(--wui-space-01);
 `;
-var MenuContent = styled26(DropdownMenuContent)`
+var MenuContent = styled25(DropdownMenuContent)`
   ${menuContentCss}
   ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
@@ -7493,24 +7382,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs13(
     DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx187(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx187(
+        /* @__PURE__ */ jsx185(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx185(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx187(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ jsx185(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ jsx187(DropdownMenuPortal, { children: /* @__PURE__ */ jsx187(
+        /* @__PURE__ */ jsx185(DropdownMenuPortal, { children: /* @__PURE__ */ jsx185(
           MenuContent,
           {
             ...props,
@@ -7530,19 +7419,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import styled27 from "styled-components";
+import styled26 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx188 } from "react/jsx-runtime";
-var StyledMenuLabel = styled27(DropdownMenuLabel)`
+import { jsx as jsx186 } from "react/jsx-runtime";
+var StyledMenuLabel = styled26(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx188(
+  return /* @__PURE__ */ jsx186(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx188(
+      children: /* @__PURE__ */ jsx186(
         Heading,
         {
           renderAs: "span",
@@ -7558,7 +7447,7 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState7 } from "react";
-import styled30 from "styled-components";
+import styled29 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -7571,10 +7460,10 @@ import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef12 } from "react";
-import styled28 from "styled-components";
+import styled27 from "styled-components";
 import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx189, jsxs as jsxs15 } from "react/jsx-runtime";
-var StyledButton3 = styled28(Button)`
+import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
+var StyledButton3 = styled27(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -7612,7 +7501,7 @@ var StyledButton3 = styled28(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled28.div`
+var StyledLeftIconContainer = styled27.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -7621,7 +7510,7 @@ var StyledLeftIconContainer = styled28.div`
     width: var(--menu-item-left-icon-size);
   }
 `;
-var StyledRightIconContainer = styled28.div`
+var StyledRightIconContainer = styled27.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -7630,13 +7519,13 @@ var StyledRightIconContainer = styled28.div`
     width: var(--menu-item-right-icon-size);
   }
 `;
-var StyledLabelAndDescriptionContainer = styled28.div`
+var StyledLabelAndDescriptionContainer = styled27.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled28.div`
+var StyledBadgeContainer = styled27.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -7651,7 +7540,7 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx189(
+    badge = /* @__PURE__ */ jsx187(
       Icon,
       {
         colorScheme: "purple",
@@ -7663,7 +7552,7 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
       }
     );
   }
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     StyledButton3,
     {
       ...props,
@@ -7673,10 +7562,10 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ jsx189(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ jsx189(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil10(badge) || isNotNil10(command) ? /* @__PURE__ */ jsx189(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ jsx189(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ jsx187(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx187(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil10(badge) || isNotNil10(command) ? /* @__PURE__ */ jsx187(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ jsx187(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -7684,23 +7573,23 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled29 from "styled-components";
-import { jsx as jsx190 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled29.span``;
-var StyledMenuItemDescription = styled29(Text).attrs({
+import styled28 from "styled-components";
+import { jsx as jsx188 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled28.span``;
+var StyledMenuItemDescription = styled28(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx190(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx188(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx190(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx188(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
-var SubMenuContent = styled30(DropdownMenuSubContent)`
+import { jsx as jsx189, jsxs as jsxs15 } from "react/jsx-runtime";
+var SubMenuContent = styled29(DropdownMenuSubContent)`
   ${menuContentCss}
   width: 298px;
 
@@ -7708,10 +7597,10 @@ var SubMenuContent = styled30(DropdownMenuSubContent)`
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled30.div`
+var StyledMobileSubMenuItems = styled29.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled30(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled29(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -7722,11 +7611,11 @@ var StyledSubTrigger = styled30(DropdownMenuSubTrigger)`
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger2 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx191(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx191(
+  return /* @__PURE__ */ jsx189(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx189(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ jsx191(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx189(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -7739,14 +7628,14 @@ var SubMenu = ({
 }) => {
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState7(false);
-  return isSmAndUp ? /* @__PURE__ */ jsxs16(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs16(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
-      isNotNil11(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
+  return isSmAndUp ? /* @__PURE__ */ jsxs15(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs15(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ jsx189(MenuItemLabel, { children: label }),
+      isNotNil11(description) ? /* @__PURE__ */ jsx189(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { children }) })
-  ] }) : /* @__PURE__ */ jsxs16(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs16(
+    /* @__PURE__ */ jsx189(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx189(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ jsxs15(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs15(
       SubMenuTrigger,
       {
         ...props,
@@ -7755,12 +7644,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx191(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx189(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx189(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx191(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx189(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -7768,15 +7657,15 @@ SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef13 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx190 } from "react/jsx-runtime";
 var MenuItem = forwardRef13(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx192(
+    return /* @__PURE__ */ jsx190(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx192(
+        children: /* @__PURE__ */ jsx190(
           MenuItemButton,
           {
             ...props,
@@ -7794,10 +7683,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx193, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs17(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx193(MenuLabel, { children: label }),
+  return /* @__PURE__ */ jsxs16(DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ jsx191(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -7808,11 +7697,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx194 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx194(
+  indicator = /* @__PURE__ */ jsx192(
     Icon,
     {
       size: "sm",
@@ -7822,17 +7711,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx194(
+  return /* @__PURE__ */ jsx192(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx194(
+      children: /* @__PURE__ */ jsx192(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx194(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx192(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -7844,9 +7733,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx195, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs17 } from "react/jsx-runtime";
 var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs18(
+  return checked ? /* @__PURE__ */ jsxs17(
     "svg",
     {
       ...props,
@@ -7856,14 +7745,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx195(
+        /* @__PURE__ */ jsx193(
           "path",
           {
             d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
             fill: "#2949e5"
           }
         ),
-        /* @__PURE__ */ jsx195(
+        /* @__PURE__ */ jsx193(
           "path",
           {
             d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
@@ -7872,7 +7761,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs18(
+  ) : /* @__PURE__ */ jsxs17(
     "svg",
     {
       ...props,
@@ -7882,14 +7771,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx195(
+        /* @__PURE__ */ jsx193(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
             fill: "#fcfcfd"
           }
         ),
-        /* @__PURE__ */ jsx195(
+        /* @__PURE__ */ jsx193(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
@@ -7906,18 +7795,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx195(
+  return /* @__PURE__ */ jsx193(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx195(
+      children: /* @__PURE__ */ jsx193(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx195(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ jsx193(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -7927,39 +7816,39 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef16 } from "react";
-import styled36 from "styled-components";
+import styled35 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
 import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import styled33 from "styled-components";
+import styled32 from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import styled31 from "styled-components";
+import styled30 from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx196 } from "react/jsx-runtime";
-var CloseButton = styled31(DialogClose)`
+import { jsx as jsx194 } from "react/jsx-runtime";
+var CloseButton = styled30(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx196(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx196(
+  return /* @__PURE__ */ jsx194(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx194(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx196(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx194(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled32 from "styled-components";
+import styled31 from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
-import { jsx as jsx197 } from "react/jsx-runtime";
-var VisuallyHidden = styled32.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled32.div({
+import { jsx as jsx195 } from "react/jsx-runtime";
+var VisuallyHidden = styled31.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled31.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7970,15 +7859,15 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil12(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx197(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx195(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx197(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx195(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx198, jsxs as jsxs19 } from "react/jsx-runtime";
-var Header = styled33.header`
+import { jsx as jsx196, jsxs as jsxs18 } from "react/jsx-runtime";
+var Header = styled32.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -7990,7 +7879,7 @@ var Header = styled33.header`
     margin-top: 0;
   }
 `;
-var Title = styled33(DialogTitle)`
+var Title = styled32(DialogTitle)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -8002,26 +7891,26 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
-  return /* @__PURE__ */ jsxs19(Header, { children: [
-    /* @__PURE__ */ jsx198(TitleWrapper, { children: title }),
-    hideCloseButton ? null : /* @__PURE__ */ jsx198(ModalCloseButton, {})
+  return /* @__PURE__ */ jsxs18(Header, { children: [
+    /* @__PURE__ */ jsx196(TitleWrapper, { children: title }),
+    hideCloseButton ? null : /* @__PURE__ */ jsx196(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef14 } from "react";
-import styled34 from "styled-components";
+import styled33 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef7, useEffect as useEffect3 } from "react";
+import { useRef as useRef6, useEffect as useEffect2 } from "react";
 import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 var useFocusRestore = () => {
-  const previouslyFocusedRef = useRef7(null);
-  useEffect3(() => {
+  const previouslyFocusedRef = useRef6(null);
+  useEffect2(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect3(() => {
+  useEffect2(() => {
     return () => {
       if (isNotNil13(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -8033,8 +7922,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx199 } from "react/jsx-runtime";
-var StyledModalContent = styled34(DialogContent)`
+import { jsx as jsx197 } from "react/jsx-runtime";
+var StyledModalContent = styled33(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -8077,7 +7966,7 @@ var StyledModalContent = styled34(DialogContent)`
 var ModalContent = forwardRef14(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx199(
+    return /* @__PURE__ */ jsx197(
       StyledModalContent,
       {
         ref,
@@ -8092,8 +7981,8 @@ var ModalContent = forwardRef14(
 
 // src/private/components/Backdrop/Backdrop.tsx
 import { forwardRef as forwardRef15 } from "react";
-import styled35 from "styled-components";
-import { jsx as jsx200 } from "react/jsx-runtime";
+import styled34 from "styled-components";
+import { jsx as jsx198 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -8106,7 +7995,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = styled35.div`
+var BackdropComponent = styled34.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -8130,7 +8019,7 @@ var BackdropComponent = styled35.div`
   }
 `;
 var Backdrop = forwardRef15(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx200(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx198(
     BackdropComponent,
     {
       ref,
@@ -8144,8 +8033,8 @@ var Backdrop = forwardRef15(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx201, jsxs as jsxs20 } from "react/jsx-runtime";
-var ModalBody = styled36.div`
+import { jsx as jsx199, jsxs as jsxs19 } from "react/jsx-runtime";
+var ModalBody = styled35.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -8163,7 +8052,7 @@ var Modal = forwardRef16(
     width,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx201(
+    return /* @__PURE__ */ jsx199(
       DialogRoot,
       {
         onOpenChange: (open2) => {
@@ -8172,9 +8061,9 @@ var Modal = forwardRef16(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs20(DialogPortal, { children: [
-          /* @__PURE__ */ jsx201(Backdrop, {}),
-          /* @__PURE__ */ jsxs20(
+        children: /* @__PURE__ */ jsxs19(DialogPortal, { children: [
+          /* @__PURE__ */ jsx199(Backdrop, {}),
+          /* @__PURE__ */ jsxs19(
             ModalContent,
             {
               ref,
@@ -8191,8 +8080,8 @@ var Modal = forwardRef16(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx201(ModalBody, { children }),
-                /* @__PURE__ */ jsx201(
+                /* @__PURE__ */ jsx199(ModalBody, { children }),
+                /* @__PURE__ */ jsx199(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -8212,15 +8101,15 @@ Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef17, useId as useId3 } from "react";
-import styled37, { css as css21 } from "styled-components";
+import styled36, { css as css21 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx202, jsxs as jsxs21 } from "react/jsx-runtime";
-var StyledLabelWrapper2 = styled37.div`
+import { jsx as jsx200, jsxs as jsxs20 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled36.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled37.input`
+var StyledRadio = styled36.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -8262,7 +8151,7 @@ var defaultHoverStyle = css21`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled37.div`
+var StyledRadioWrapper = styled36.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -8300,13 +8189,13 @@ var Radio = forwardRef17(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs20(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ jsx202(
+          /* @__PURE__ */ jsx200(
             StyledRadio,
             {
               ref,
@@ -8321,8 +8210,8 @@ var Radio = forwardRef17(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ jsxs21(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx202(
+          /* @__PURE__ */ jsxs20(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ jsx200(
               Label,
               {
                 disabled,
@@ -8331,7 +8220,7 @@ var Radio = forwardRef17(
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx202(LabelDescription, { children: description })
+            /* @__PURE__ */ jsx200(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -8342,10 +8231,10 @@ Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef18 } from "react";
-import styled38 from "styled-components";
+import styled37 from "styled-components";
 import { isNil as isNil11, isNotNil as isNotNil15, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment3, jsx as jsx203, jsxs as jsxs22 } from "react/jsx-runtime";
-var TagLabel = styled38.a`
+import { Fragment as Fragment2, jsx as jsx201, jsxs as jsxs21 } from "react/jsx-runtime";
+var TagLabel = styled37.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -8373,14 +8262,14 @@ var TagLabel = styled38.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled38.div`
+var TagDivider = styled37.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled38.button`
+var StyledRemoveButton = styled37.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -8408,7 +8297,7 @@ var StyledRemoveButton = styled38.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled38.div`
+var StyledTag = styled37.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8425,23 +8314,23 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs22(Fragment3, { children: [
-    /* @__PURE__ */ jsx203(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs21(Fragment2, { children: [
+    /* @__PURE__ */ jsx201(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsxs21(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx203(
+          /* @__PURE__ */ jsx201(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx203(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx201(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -8450,14 +8339,14 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 var Tag = forwardRef18(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = isNotNil15(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs21(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx203(
+          /* @__PURE__ */ jsx201(
             TagLabel,
             {
               ...labelProps,
@@ -8465,7 +8354,7 @@ var Tag = forwardRef18(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx203(
+          /* @__PURE__ */ jsx201(
             RemoveButton,
             {
               colorScheme,
@@ -8488,8 +8377,8 @@ import {
   Portal,
   Arrow
 } from "@radix-ui/react-tooltip";
-import styled39, { css as css22 } from "styled-components";
-import { jsx as jsx204, jsxs as jsxs23 } from "react/jsx-runtime";
+import styled38, { css as css22 } from "styled-components";
+import { jsx as jsx202, jsxs as jsxs22 } from "react/jsx-runtime";
 var CompactTooltipStyles = css22`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
@@ -8497,7 +8386,7 @@ var CompactTooltipStyles = css22`
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = styled39(Content)`
+var StyledContent = styled38(Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8555,14 +8444,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs22(
     Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx204(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx204(Portal, { children: /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsx202(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx202(Portal, { children: /* @__PURE__ */ jsxs22(
           StyledContent,
           {
             $compact: compact,
@@ -8570,7 +8459,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx204(Arrow, { asChild: true, children: /* @__PURE__ */ jsx204(
+              !hideArrow ? /* @__PURE__ */ jsx202(Arrow, { asChild: true, children: /* @__PURE__ */ jsx202(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8579,7 +8468,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx204("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ jsx202("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -8592,26 +8481,26 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled40 from "styled-components";
+import styled39 from "styled-components";
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
-import { jsx as jsx205, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx203, jsxs as jsxs23 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx205(
+    return /* @__PURE__ */ jsx203(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx205("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+        children: /* @__PURE__ */ jsx203("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
       }
     );
   }
-  return /* @__PURE__ */ jsx205(
+  return /* @__PURE__ */ jsx203(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx205("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+      children: /* @__PURE__ */ jsx203("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
     }
   );
 };
@@ -8619,12 +8508,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx205(
+  return /* @__PURE__ */ jsx203(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx205("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+      children: /* @__PURE__ */ jsx203("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
     }
   );
 };
@@ -8634,7 +8523,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled40.svg`
+var WistiaLogoComponent = styled39.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -8676,7 +8565,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs24(
+  const Logo = /* @__PURE__ */ jsxs23(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -8686,16 +8575,63 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx205("title", { children: title }),
-        isNotNil16(description) ? /* @__PURE__ */ jsx205("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx203("title", { children: title }),
+        isNotNil16(description) ? /* @__PURE__ */ jsx203("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx205("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx203("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Breadcrumbs/Breadcrumbs.tsx
+import styled40 from "styled-components";
+import { jsx as jsx204 } from "react/jsx-runtime";
+var StyledBreadcrumbs = styled40.nav`
+  display: flex;
+  align-items: center;
+  gap: var(--wui-space-01);
+
+  > svg:last-of-type {
+    display: none;
+  }
+`;
+var Breadcrumbs = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx204(
+    StyledBreadcrumbs,
+    {
+      "aria-label": "Breadcrumbs",
+      ...props,
+      children
+    }
+  );
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/components/Breadcrumbs/Breadcrumb.tsx
+import { Fragment as Fragment3, jsx as jsx205, jsxs as jsxs24 } from "react/jsx-runtime";
+var Breadcrumb = ({ icon, href, children }) => {
+  return /* @__PURE__ */ jsxs24(Fragment3, { children: [
+    /* @__PURE__ */ jsx205(
+      Button,
+      {
+        href,
+        leftIcon: icon,
+        variant: "ghost",
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx205(
+      Icon,
+      {
+        size: "sm",
+        type: "caret-right"
+      }
+    )
+  ] });
+};
 export {
   ActionButton,
   Avatar,
@@ -8750,7 +8686,6 @@ export {
   useAriaLive,
   useBoolean,
   useFormState,
-  useKey,
   useMq,
   useToast,
   useWindowSize