@wistia/ui 0.4.2 → 0.4.3-beta.978508e1.854a32c

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.2
+ * @license @wistia/ui v0.4.3-beta.978508e1.854a32c
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1467,11 +1467,21 @@ var mq = {
   xlAndDown
 };
 
+// src/hooks/useBoolean/useBoolean.ts
+import { useState as useState2, useCallback as useCallback2 } from "react";
+var useBoolean = (initialValue = false) => {
+  const [value, setValue] = useState2(initialValue);
+  const toggle = useCallback2(() => setValue((val) => !val), []);
+  const setTrue = useCallback2(() => setValue(true), []);
+  const setFalse = useCallback2(() => setValue(false), []);
+  return [value, toggle, setTrue, setFalse, setValue];
+};
+
 // src/hooks/useMq/useMq.ts
 import { isBoolean } from "@wistia/type-guards";
 
 // src/hooks/useWindowSize/useWindowSize.ts
-import { useState as useState2, useLayoutEffect } from "react";
+import { useState as useState3, useLayoutEffect } from "react";
 import { debounce } from "throttle-debounce";
 
 // src/private/helpers/isClient/isClient.ts
@@ -1479,7 +1489,7 @@ var isClient = () => typeof window !== "undefined" && typeof document !== "undef
 
 // src/hooks/useWindowSize/useWindowSize.ts
 var useWindowSize = (interval = 0) => {
-  const [dimensions, setDimensions] = useState2({
+  const [dimensions, setDimensions] = useState3({
     width: isClient() ? window.innerWidth : 0,
     height: isClient() ? window.innerHeight : 0
   });
@@ -1534,8 +1544,85 @@ 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 useCallback2 } from "react";
+import { useCallback as useCallback3 } from "react";
 import { toast as sonnerToast } from "sonner";
 
 // src/private/components/Toast/Toast.tsx
@@ -1797,7 +1884,7 @@ Toast.displayName = "Toast";
 // src/hooks/useToast/useToast.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var useToast = () => {
-  return useCallback2(
+  return useCallback3(
     ({ message, action, colorScheme, icon, position = "bottom-left", duration = 3e3 }) => {
       sonnerToast.custom(
         () => {
@@ -1818,17 +1905,6 @@ 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";
@@ -5201,13 +5277,13 @@ var iconMap = {
 
 // src/private/hooks/useResponsiveProp/useResponsiveProp.ts
 import { isNotUndefined, isRecord, isUndefined } from "@wistia/type-guards";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 var isResponsiveObject = (values) => {
   return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
 };
 var useResponsiveProp = (values) => {
   const activeMediaQueries = useActiveMq();
-  return useMemo2(() => {
+  return useMemo3(() => {
     if (isRecord(values) && isResponsiveObject(values)) {
       const mq2 = activeMediaQueries.find((key) => key in values);
       return isNotUndefined(mq2) && isNotUndefined(values[mq2]) ? values[mq2] : values.base;
@@ -5655,7 +5731,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState3, useMemo as useMemo3 } from "react";
+import { useState as useState4, useMemo as useMemo4 } from "react";
 import { isNil as isNil6 } from "@wistia/type-guards";
 import styled8 from "styled-components";
 
@@ -5786,7 +5862,7 @@ var Avatar = ({
   onImageLoad,
   ...otherProps
 }) => {
-  const [imageLoadState, setImageLoadState] = useState3(null);
+  const [imageLoadState, setImageLoadState] = useState4(null);
   const handleImageLoad = () => {
     setImageLoadState("loaded");
     onImageLoad?.("image");
@@ -5796,7 +5872,7 @@ var Avatar = ({
     onImageLoad?.("initials");
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
-  const avatarColor = useMemo3(() => chooseColorScheme(name), [name]);
+  const avatarColor = useMemo4(() => chooseColorScheme(name), [name]);
   const showInitials = isNil6(imageUrl) || imageLoadState === "error";
   return /* @__PURE__ */ jsx165(
     AvatarWrapper,
@@ -5996,10 +6072,57 @@ var Box = ({
 };
 Box.displayName = "Box";
 
-// src/components/ButtonGroup/ButtonGroup.tsx
+// src/components/Breadcrumbs/Breadcrumbs.tsx
 import styled11 from "styled-components";
-import { isNil as isNil8 } from "@wistia/type-guards";
 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 { isNil as isNil8 } from "@wistia/type-guards";
+import { jsx as jsx170 } from "react/jsx-runtime";
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -6012,7 +6135,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = styled11.div`
+var ButtonGroupComponent = styled12.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -6041,7 +6164,7 @@ var ButtonGroup = ({
   if (isNil8(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx168(
+  return /* @__PURE__ */ jsx170(
     ButtonGroupComponent,
     {
       $align: align,
@@ -6054,9 +6177,9 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Card/Card.tsx
-import styled12 from "styled-components";
-import { jsx as jsx169 } from "react/jsx-runtime";
-var StyledCard = styled12(Box)`
+import styled13 from "styled-components";
+import { jsx as jsx171 } from "react/jsx-runtime";
+var StyledCard = styled13(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -6089,7 +6212,7 @@ var Card = ({
   prominence = "secondary",
   border = false,
   ...props
-}) => /* @__PURE__ */ jsx169(
+}) => /* @__PURE__ */ jsx171(
   StyledCard,
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -6107,15 +6230,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 styled16 from "styled-components";
+import styled17 from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled14, { css as css16 } from "styled-components";
+import styled15, { css as css16 } from "styled-components";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef5 } from "react";
-import styled13, { css as css15 } from "styled-components";
+import styled14, { css as css15 } from "styled-components";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -6123,7 +6246,7 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-import { jsx as jsx170 } from "react/jsx-runtime";
+import { jsx as jsx172 } from "react/jsx-runtime";
 var heroStyle = css15`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
@@ -6176,7 +6299,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = styled13.div`
+var StyledHeading = styled14.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6219,7 +6342,7 @@ var HeadingComponent = forwardRef5(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx170(
+  }, ref) => /* @__PURE__ */ jsx172(
     StyledHeading,
     {
       ref,
@@ -6239,7 +6362,7 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Label/Label.tsx
-import { jsx as jsx171 } from "react/jsx-runtime";
+import { jsx as jsx173 } from "react/jsx-runtime";
 var requiredStyle = css16`
   &::after {
     color: var(--wui-color-text-error);
@@ -6251,7 +6374,7 @@ var requiredStyle = css16`
 var disabledStyle = css16`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = styled14(Heading).attrs({
+var StyledLabel2 = styled15(Heading).attrs({
   variant: "heading6",
   renderAs: "label"
 })`
@@ -6280,7 +6403,7 @@ var Label = ({
   required = false,
   screenReaderOnly = false,
   ...otherProps
-}) => /* @__PURE__ */ jsx171(
+}) => /* @__PURE__ */ jsx173(
   StyledLabel2,
   {
     ...otherProps,
@@ -6294,10 +6417,10 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
-import styled15 from "styled-components";
+import styled16 from "styled-components";
 import { isNil as isNil9 } from "@wistia/type-guards";
-import { jsx as jsx172 } from "react/jsx-runtime";
-var StyledLabelDescription = styled15.div`
+import { jsx as jsx174 } from "react/jsx-runtime";
+var StyledLabelDescription = styled16.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -6310,13 +6433,13 @@ var LabelDescription = ({
   if (isNil9(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx172(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ jsx174(StyledLabelDescription, { ...props, children });
 };
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx173, jsxs as jsxs8 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx173(
+import { jsx as jsx175, jsxs as jsxs9 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx175(
   "svg",
   {
     fill: "inherit",
@@ -6324,7 +6447,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx173(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx173(
+    children: /* @__PURE__ */ jsx175(
       "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",
@@ -6333,7 +6456,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx173(
     )
   }
 );
-var StyledCheckboxWrapper = styled16.div`
+var StyledCheckboxWrapper = styled17.div`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -6347,7 +6470,7 @@ var StyledCheckboxWrapper = styled16.div`
     background-color: #efefef;
   }
 `;
-var StyledCheckboxRoot = styled16(CheckboxRoot)`
+var StyledCheckboxRoot = styled17(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;
@@ -6381,10 +6504,10 @@ var StyledCheckboxRoot = styled16(CheckboxRoot)`
     /* TODO Lamp to design focus state */
   }
 `;
-var StyledCheckboxIndicator = styled16(CheckboxIndicator)`
+var StyledCheckboxIndicator = styled17(CheckboxIndicator)`
   display: flex;
 `;
-var StyledLabelWrapper = styled16.div`
+var StyledLabelWrapper = styled17.div`
   display: flex;
   flex-direction: column;
   margin-left: var(--wui-space-02);
@@ -6405,8 +6528,8 @@ var Checkbox = forwardRef6(
   }, ref) => {
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
-    return /* @__PURE__ */ jsxs8(StyledCheckboxWrapper, { children: [
-      /* @__PURE__ */ jsx173(
+    return /* @__PURE__ */ jsxs9(StyledCheckboxWrapper, { children: [
+      /* @__PURE__ */ jsx175(
         StyledCheckboxRoot,
         {
           ref,
@@ -6431,11 +6554,11 @@ var Checkbox = forwardRef6(
           required,
           value,
           ...otherProps,
-          children: /* @__PURE__ */ jsx173(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx173(CheckIcon, {}) })
+          children: /* @__PURE__ */ jsx175(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx175(CheckIcon, {}) })
         }
       ),
-      /* @__PURE__ */ jsxs8(StyledLabelWrapper, { children: [
-        /* @__PURE__ */ jsx173(
+      /* @__PURE__ */ jsxs9(StyledLabelWrapper, { children: [
+        /* @__PURE__ */ jsx175(
           Label,
           {
             disabled,
@@ -6444,7 +6567,7 @@ var Checkbox = forwardRef6(
             children: label
           }
         ),
-        /* @__PURE__ */ jsx173(LabelDescription, { children: description })
+        /* @__PURE__ */ jsx175(LabelDescription, { children: description })
       ] })
     ] });
   }
@@ -6452,8 +6575,8 @@ var Checkbox = forwardRef6(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-import styled17, { css as css17 } from "styled-components";
-import { jsx as jsx174 } from "react/jsx-runtime";
+import styled18, { css as css17 } from "styled-components";
+import { jsx as jsx176 } from "react/jsx-runtime";
 var horizontalBorderCss = css17`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -6467,7 +6590,7 @@ var verticalBorderCss = css17`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled17.div`
+var DividerComponent = styled18.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -6482,7 +6605,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsx174(
+  return /* @__PURE__ */ jsx176(
     DividerComponent,
     {
       $orientation: orientation,
@@ -6495,16 +6618,16 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef8, useRef as useRef2, useMemo as useMemo4, createContext as createContext2, useState as useState4, useId as useId2 } from "react";
-import styled19 from "styled-components";
+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 { isNotUndefined as isNotUndefined4, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled18 from "styled-components";
-import { jsx as jsx175 } from "react/jsx-runtime";
+import styled19 from "styled-components";
+import { jsx as jsx177 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = styled18.div`
+var StyledStack = styled19.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -6513,7 +6636,7 @@ var StackComponent = forwardRef7(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx175(
+    return /* @__PURE__ */ jsx177(
       StyledStack,
       {
         ref,
@@ -6529,8 +6652,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-import { jsx as jsx176 } from "react/jsx-runtime";
-var StyledForm = styled19.form`
+import { jsx as jsx178 } from "react/jsx-runtime";
+var StyledForm = styled20.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -6543,9 +6666,9 @@ var FormContext = createContext2({
   formId: ""
 });
 var FormComponent = ({ children, action, values = {}, validate, fullWidth = false, ...props }, forwardedRef) => {
-  const [errors, setErrors] = useState4({});
-  const [hasSubmitted, setHasSubmitted] = useState4(false);
-  const innerRef = useRef2();
+  const [errors, setErrors] = useState5({});
+  const [hasSubmitted, setHasSubmitted] = useState5(false);
+  const innerRef = useRef3();
   const ref = forwardedRef ?? innerRef;
   const autoId = useId2();
   const id = props.id ?? autoId;
@@ -6589,7 +6712,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       void action(null);
     }
   };
-  const context = useMemo4(() => {
+  const context = useMemo5(() => {
     return {
       values,
       errors,
@@ -6599,7 +6722,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__ */ jsx176(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx176(
+    /* @__PURE__ */ jsx178(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx178(
       Stack,
       {
         gap: "space-05",
@@ -6620,12 +6743,12 @@ FormComponent.displayName = "Form";
 var Form = forwardRef8(FormComponent);
 
 // src/components/Form/useFormState.tsx
-import { useCallback as useCallback3, useState as useState5 } from "react";
+import { useCallback as useCallback4, useState as useState6 } from "react";
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = useState5(initialData);
-  const [isPending, setIsPending] = useState5(false);
-  const [error, setError] = useState5(null);
-  const formAction = useCallback3(
+  const [data, setData] = useState6(initialData);
+  const [isPending, setIsPending] = useState6(false);
+  const [error, setError] = useState6(null);
+  const formAction = useCallback4(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -6656,23 +6779,23 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-import { useContext as useContext2, useRef as useRef3 } from "react";
+import { useContext as useContext2, useRef as useRef4 } from "react";
 import { isArray, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { jsx as jsx177, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx179, jsxs as jsxs10 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx177("li", { children: /* @__PURE__ */ jsx177(Link, { href: `${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx179("li", { children: /* @__PURE__ */ jsx179(Link, { href: `${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   const { formId, errors, hasSubmitted } = useContext2(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
   }
-  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(
+  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(
         ErrorItem,
         {
           error: err,
@@ -6680,7 +6803,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx177(
+      )) : /* @__PURE__ */ jsx179(
         ErrorItem,
         {
           error: error ?? "",
@@ -6695,13 +6818,13 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children2, cloneElement as cloneElement3, useContext as useContext3 } from "react";
-import styled22 from "styled-components";
+import styled23 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 styled20, { css as css18 } from "styled-components";
-import { jsx as jsx178 } from "react/jsx-runtime";
+import styled21, { css as css18 } from "styled-components";
+import { jsx as jsx180 } from "react/jsx-runtime";
 var bodyBoldStyles = css18`
   > strong,
   b {
@@ -6800,7 +6923,7 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var StyledText = styled20.div`
+var StyledText = styled21.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -6854,7 +6977,7 @@ var TextComponent = forwardRef9(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx178(
+    return /* @__PURE__ */ jsx180(
       StyledText,
       {
         ref,
@@ -6876,28 +6999,28 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { createContext as createContext3, useMemo as useMemo5 } from "react";
+import { createContext as createContext3, useMemo as useMemo6 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
-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`
+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`
   border: 0;
 `;
-var StyledLegend = styled21.legend`
+var StyledLegend = styled22.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = useRef4();
-  return /* @__PURE__ */ jsxs10(
+  const ref = useRef5();
+  return /* @__PURE__ */ jsxs11(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ jsx179(
+        /* @__PURE__ */ jsx181(
           Heading,
           {
             renderAs: StyledLegend,
@@ -6913,7 +7036,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx180 } from "react/jsx-runtime";
+import { jsx as jsx182 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext3(null);
 var CheckboxGroup = ({
   children,
@@ -6922,19 +7045,19 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = useMemo5(() => {
+  const context = useMemo6(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx180(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx180(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx182(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx182(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { jsx as jsx181, jsxs as jsxs11 } from "react/jsx-runtime";
-var StyledFormField = styled22.div`
+import { jsx as jsx183, jsxs as jsxs12 } from "react/jsx-runtime";
+var StyledFormField = styled23.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -6942,7 +7065,7 @@ var StyledFormField = styled22.div`
   flex-direction: column;
   gap: var(--form-field-spacing);
 `;
-var StyledErrorList = styled22.ul`
+var StyledErrorList = styled23.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -6952,7 +7075,7 @@ var StyledErrorList = styled22.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = isArray2(errors);
-  return isMultipleErrors ? /* @__PURE__ */ jsx181(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx181(
+  return isMultipleErrors ? /* @__PURE__ */ jsx183(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx183(
     Text,
     {
       colorScheme: "error",
@@ -6962,7 +7085,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ jsx181(
+  )) }) : /* @__PURE__ */ jsx183(
     Text,
     {
       colorScheme: "error",
@@ -7019,10 +7142,10 @@ var FormField = ({
     };
   }
   Children2.only(children);
-  return /* @__PURE__ */ jsxs11(StyledFormField, { ...props, children: [
-    !isInlineLabel && /* @__PURE__ */ jsx181(Label, { htmlFor: id, children: label }),
+  return /* @__PURE__ */ jsxs12(StyledFormField, { ...props, children: [
+    !isInlineLabel && /* @__PURE__ */ jsx183(Label, { htmlFor: id, children: label }),
     cloneElement3(children, childProps),
-    isNotNil7(computedError) ? /* @__PURE__ */ jsx181(
+    isNotNil7(computedError) ? /* @__PURE__ */ jsx183(
       ErrorMessages,
       {
         errors: computedError,
@@ -7034,8 +7157,8 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-import { createContext as createContext4, useMemo as useMemo6 } from "react";
-import { jsx as jsx182 } from "react/jsx-runtime";
+import { createContext as createContext4, useMemo as useMemo7 } from "react";
+import { jsx as jsx184 } from "react/jsx-runtime";
 var RadioGroupContext = createContext4(null);
 var RadioGroup = ({
   children,
@@ -7044,21 +7167,21 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
-  const context = useMemo6(() => {
+  const context = useMemo7(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx182(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx182(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx184(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx184(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 import { Children as Children3, cloneElement as cloneElement4, forwardRef as forwardRef10 } from "react";
-import styled23 from "styled-components";
-import { jsx as jsx183 } from "react/jsx-runtime";
-var StyledButton2 = styled23(Button)`
+import styled24 from "styled-components";
+import { jsx as jsx185 } from "react/jsx-runtime";
+var StyledButton2 = styled24(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -7075,7 +7198,7 @@ var StyledButton2 = styled23(Button)`
 var IconButton = forwardRef10(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ jsx183(
+    return /* @__PURE__ */ jsx185(
       StyledButton2,
       {
         ...props,
@@ -7093,10 +7216,10 @@ var IconButton = forwardRef10(
 IconButton.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef5 } from "react";
-import styled24, { css as css19 } from "styled-components";
+import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef6 } from "react";
+import styled25, { css as css19 } from "styled-components";
 import { isNil as isNil10, isNotNil as isNotNil8 } from "@wistia/type-guards";
-import { jsx as jsx184, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs13 } 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);
@@ -7138,7 +7261,7 @@ var inputStyles = css19`
     }
   }
 `;
-var StyledInputContainer = styled24.div`
+var StyledInputContainer = styled25.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -7195,11 +7318,11 @@ var Input = forwardRef11(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = useRef5();
+    const internalRef = useRef6();
     const ref = isValidRef(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil10(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx184(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx186(Icon, { type: "search" });
     }
     if (isNotNil8(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement5(leftIconToDisplay, {
@@ -7224,21 +7347,21 @@ var Input = forwardRef11(
         });
       }
     };
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs13(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx184(
+          type === "multiline" ? /* @__PURE__ */ jsx186(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ jsx184(
+          ) : /* @__PURE__ */ jsx186(
             "input",
             {
               ...props,
@@ -7256,7 +7379,7 @@ var Input = forwardRef11(
 Input.displayName = "Input";
 
 // src/components/Menu/Menu.tsx
-import styled25, { css as css20, keyframes } from "styled-components";
+import styled26, { css as css20, keyframes } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -7264,7 +7387,7 @@ import {
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil9, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
-import { jsx as jsx185, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
 var open = keyframes`
   from {
     opacity: 0;
@@ -7320,8 +7443,8 @@ var menuContentCss = css20`
     transform: initial;
   }
 
-  hr {
-    margin: var(--wui-space-02) 0;
+  [role='separator'] {
+    margin: var(--menu-divider-margin) 0;
   }
 `;
 var menuItemCss = css20`
@@ -7333,6 +7456,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;
@@ -7343,8 +7467,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 = styled25(DropdownMenuContent)`
+var MenuContent = styled26(DropdownMenuContent)`
   ${menuContentCss}
   ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
@@ -7370,24 +7495,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx185(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx185(
+        /* @__PURE__ */ jsx187(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx187(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx185(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ jsx187(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ jsx185(DropdownMenuPortal, { children: /* @__PURE__ */ jsx185(
+        /* @__PURE__ */ jsx187(DropdownMenuPortal, { children: /* @__PURE__ */ jsx187(
           MenuContent,
           {
             ...props,
@@ -7407,19 +7532,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import styled26 from "styled-components";
+import styled27 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx186 } from "react/jsx-runtime";
-var StyledMenuLabel = styled26(DropdownMenuLabel)`
+import { jsx as jsx188 } from "react/jsx-runtime";
+var StyledMenuLabel = styled27(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx186(
+  return /* @__PURE__ */ jsx188(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx186(
+      children: /* @__PURE__ */ jsx188(
         Heading,
         {
           renderAs: "span",
@@ -7434,8 +7559,8 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-import { useState as useState6 } from "react";
-import styled29 from "styled-components";
+import { useState as useState7 } from "react";
+import styled30 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -7448,10 +7573,10 @@ import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef12 } from "react";
-import styled27 from "styled-components";
+import styled28 from "styled-components";
 import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
-var StyledButton3 = styled27(Button)`
+import { jsx as jsx189, jsxs as jsxs15 } from "react/jsx-runtime";
+var StyledButton3 = styled28(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -7489,7 +7614,7 @@ var StyledButton3 = styled27(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled27.div`
+var StyledLeftIconContainer = styled28.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -7498,7 +7623,7 @@ var StyledLeftIconContainer = styled27.div`
     width: var(--menu-item-left-icon-size);
   }
 `;
-var StyledRightIconContainer = styled27.div`
+var StyledRightIconContainer = styled28.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -7507,13 +7632,13 @@ var StyledRightIconContainer = styled27.div`
     width: var(--menu-item-right-icon-size);
   }
 `;
-var StyledLabelAndDescriptionContainer = styled27.div`
+var StyledLabelAndDescriptionContainer = styled28.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled27.div`
+var StyledBadgeContainer = styled28.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -7528,7 +7653,7 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx187(
+    badge = /* @__PURE__ */ jsx189(
       Icon,
       {
         colorScheme: "purple",
@@ -7540,7 +7665,7 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
       }
     );
   }
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     StyledButton3,
     {
       ...props,
@@ -7550,10 +7675,10 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        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
+        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
       ]
     }
   );
@@ -7561,23 +7686,23 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled28 from "styled-components";
-import { jsx as jsx188 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled28.span``;
-var StyledMenuItemDescription = styled28(Text).attrs({
+import styled29 from "styled-components";
+import { jsx as jsx190 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled29.span``;
+var StyledMenuItemDescription = styled29(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx188(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx190(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx188(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx190(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx189, jsxs as jsxs15 } from "react/jsx-runtime";
-var SubMenuContent = styled29(DropdownMenuSubContent)`
+import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
+var SubMenuContent = styled30(DropdownMenuSubContent)`
   ${menuContentCss}
   width: 298px;
 
@@ -7585,10 +7710,10 @@ var SubMenuContent = styled29(DropdownMenuSubContent)`
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled29.div`
+var StyledMobileSubMenuItems = styled30.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled29(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled30(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -7599,11 +7724,11 @@ var StyledSubTrigger = styled29(DropdownMenuSubTrigger)`
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger2 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx189(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx189(
+  return /* @__PURE__ */ jsx191(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx191(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ jsx189(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx191(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -7615,15 +7740,15 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = useState6(false);
-  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
+  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
     ] }),
-    /* @__PURE__ */ jsx189(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx189(SubMenuContent, { children }) })
-  ] }) : /* @__PURE__ */ jsxs15(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ jsxs16(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs16(
       SubMenuTrigger,
       {
         ...props,
@@ -7632,12 +7757,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx189(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx189(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx191(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx189(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx191(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -7645,15 +7770,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 jsx190 } from "react/jsx-runtime";
+import { jsx as jsx192 } from "react/jsx-runtime";
 var MenuItem = forwardRef13(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx190(
+    return /* @__PURE__ */ jsx192(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx190(
+        children: /* @__PURE__ */ jsx192(
           MenuItemButton,
           {
             ...props,
@@ -7671,10 +7796,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs17 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs16(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx191(MenuLabel, { children: label }),
+  return /* @__PURE__ */ jsxs17(DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ jsx193(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -7685,11 +7810,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx192 } from "react/jsx-runtime";
+import { jsx as jsx194 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx192(
+  indicator = /* @__PURE__ */ jsx194(
     Icon,
     {
       size: "sm",
@@ -7699,17 +7824,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx192(
+  return /* @__PURE__ */ jsx194(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx192(
+      children: /* @__PURE__ */ jsx194(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx192(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx194(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -7721,9 +7846,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx193, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx195, jsxs as jsxs18 } from "react/jsx-runtime";
 var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs17(
+  return checked ? /* @__PURE__ */ jsxs18(
     "svg",
     {
       ...props,
@@ -7733,14 +7858,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx193(
+        /* @__PURE__ */ jsx195(
           "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__ */ jsx193(
+        /* @__PURE__ */ jsx195(
           "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",
@@ -7749,7 +7874,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs17(
+  ) : /* @__PURE__ */ jsxs18(
     "svg",
     {
       ...props,
@@ -7759,14 +7884,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx193(
+        /* @__PURE__ */ jsx195(
           "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__ */ jsx193(
+        /* @__PURE__ */ jsx195(
           "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",
@@ -7783,18 +7908,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx193(
+  return /* @__PURE__ */ jsx195(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx193(
+      children: /* @__PURE__ */ jsx195(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx193(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ jsx195(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -7804,39 +7929,39 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef16 } from "react";
-import styled35 from "styled-components";
+import styled36 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 styled32 from "styled-components";
+import styled33 from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import styled30 from "styled-components";
+import styled31 from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx194 } from "react/jsx-runtime";
-var CloseButton = styled30(DialogClose)`
+import { jsx as jsx196 } from "react/jsx-runtime";
+var CloseButton = styled31(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx194(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx194(
+  return /* @__PURE__ */ jsx196(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx196(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx194(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx196(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled31 from "styled-components";
+import styled32 from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
-import { jsx as jsx195 } from "react/jsx-runtime";
-var VisuallyHidden = styled31.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled31.div({
+import { jsx as jsx197 } from "react/jsx-runtime";
+var VisuallyHidden = styled32.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled32.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7847,15 +7972,15 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil12(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx195(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx197(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx195(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx197(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx196, jsxs as jsxs18 } from "react/jsx-runtime";
-var Header = styled32.header`
+import { jsx as jsx198, jsxs as jsxs19 } from "react/jsx-runtime";
+var Header = styled33.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -7867,7 +7992,7 @@ var Header = styled32.header`
     margin-top: 0;
   }
 `;
-var Title = styled32(DialogTitle)`
+var Title = styled33(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);
@@ -7879,26 +8004,26 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
-  return /* @__PURE__ */ jsxs18(Header, { children: [
-    /* @__PURE__ */ jsx196(TitleWrapper, { children: title }),
-    hideCloseButton ? null : /* @__PURE__ */ jsx196(ModalCloseButton, {})
+  return /* @__PURE__ */ jsxs19(Header, { children: [
+    /* @__PURE__ */ jsx198(TitleWrapper, { children: title }),
+    hideCloseButton ? null : /* @__PURE__ */ jsx198(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef14 } from "react";
-import styled33 from "styled-components";
+import styled34 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef6, useEffect as useEffect2 } from "react";
+import { useRef as useRef7, useEffect as useEffect3 } from "react";
 import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 var useFocusRestore = () => {
-  const previouslyFocusedRef = useRef6(null);
-  useEffect2(() => {
+  const previouslyFocusedRef = useRef7(null);
+  useEffect3(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       if (isNotNil13(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -7910,8 +8035,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx197 } from "react/jsx-runtime";
-var StyledModalContent = styled33(DialogContent)`
+import { jsx as jsx199 } from "react/jsx-runtime";
+var StyledModalContent = styled34(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -7954,7 +8079,7 @@ var StyledModalContent = styled33(DialogContent)`
 var ModalContent = forwardRef14(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx197(
+    return /* @__PURE__ */ jsx199(
       StyledModalContent,
       {
         ref,
@@ -7969,8 +8094,8 @@ var ModalContent = forwardRef14(
 
 // src/private/components/Backdrop/Backdrop.tsx
 import { forwardRef as forwardRef15 } from "react";
-import styled34 from "styled-components";
-import { jsx as jsx198 } from "react/jsx-runtime";
+import styled35 from "styled-components";
+import { jsx as jsx200 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -7983,7 +8108,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = styled34.div`
+var BackdropComponent = styled35.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -8007,7 +8132,7 @@ var BackdropComponent = styled34.div`
   }
 `;
 var Backdrop = forwardRef15(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx198(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx200(
     BackdropComponent,
     {
       ref,
@@ -8021,8 +8146,8 @@ var Backdrop = forwardRef15(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx199, jsxs as jsxs19 } from "react/jsx-runtime";
-var ModalBody = styled35.div`
+import { jsx as jsx201, jsxs as jsxs20 } from "react/jsx-runtime";
+var ModalBody = styled36.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -8040,7 +8165,7 @@ var Modal = forwardRef16(
     width,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx199(
+    return /* @__PURE__ */ jsx201(
       DialogRoot,
       {
         onOpenChange: (open2) => {
@@ -8049,9 +8174,9 @@ var Modal = forwardRef16(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs19(DialogPortal, { children: [
-          /* @__PURE__ */ jsx199(Backdrop, {}),
-          /* @__PURE__ */ jsxs19(
+        children: /* @__PURE__ */ jsxs20(DialogPortal, { children: [
+          /* @__PURE__ */ jsx201(Backdrop, {}),
+          /* @__PURE__ */ jsxs20(
             ModalContent,
             {
               ref,
@@ -8068,8 +8193,8 @@ var Modal = forwardRef16(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx199(ModalBody, { children }),
-                /* @__PURE__ */ jsx199(
+                /* @__PURE__ */ jsx201(ModalBody, { children }),
+                /* @__PURE__ */ jsx201(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -8089,15 +8214,15 @@ Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef17, useId as useId3 } from "react";
-import styled36, { css as css21 } from "styled-components";
+import styled37, { css as css21 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx200, jsxs as jsxs20 } from "react/jsx-runtime";
-var StyledLabelWrapper2 = styled36.div`
+import { jsx as jsx202, jsxs as jsxs21 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled37.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled36.input`
+var StyledRadio = styled37.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -8139,7 +8264,7 @@ var defaultHoverStyle = css21`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled36.div`
+var StyledRadioWrapper = styled37.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -8177,13 +8302,13 @@ var Radio = forwardRef17(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ jsx200(
+          /* @__PURE__ */ jsx202(
             StyledRadio,
             {
               ref,
@@ -8198,8 +8323,8 @@ var Radio = forwardRef17(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ jsxs20(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx200(
+          /* @__PURE__ */ jsxs21(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ jsx202(
               Label,
               {
                 disabled,
@@ -8208,7 +8333,7 @@ var Radio = forwardRef17(
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx200(LabelDescription, { children: description })
+            /* @__PURE__ */ jsx202(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -8219,10 +8344,10 @@ Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef18 } from "react";
-import styled37 from "styled-components";
+import styled38 from "styled-components";
 import { isNil as isNil11, isNotNil as isNotNil15, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment2, jsx as jsx201, jsxs as jsxs21 } from "react/jsx-runtime";
-var TagLabel = styled37.a`
+import { Fragment as Fragment3, jsx as jsx203, jsxs as jsxs22 } from "react/jsx-runtime";
+var TagLabel = styled38.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -8250,14 +8375,14 @@ var TagLabel = styled37.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled37.div`
+var TagDivider = styled38.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled37.button`
+var StyledRemoveButton = styled38.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -8285,7 +8410,7 @@ var StyledRemoveButton = styled37.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled37.div`
+var StyledTag = styled38.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8302,23 +8427,23 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs21(Fragment2, { children: [
-    /* @__PURE__ */ jsx201(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(Fragment3, { children: [
+    /* @__PURE__ */ jsx203(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsxs22(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx201(
+          /* @__PURE__ */ jsx203(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx201(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx203(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
@@ -8327,14 +8452,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__ */ jsxs21(
+    return /* @__PURE__ */ jsxs22(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx201(
+          /* @__PURE__ */ jsx203(
             TagLabel,
             {
               ...labelProps,
@@ -8342,7 +8467,7 @@ var Tag = forwardRef18(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx201(
+          /* @__PURE__ */ jsx203(
             RemoveButton,
             {
               colorScheme,
@@ -8365,8 +8490,8 @@ import {
   Portal,
   Arrow
 } from "@radix-ui/react-tooltip";
-import styled38, { css as css22 } from "styled-components";
-import { jsx as jsx202, jsxs as jsxs22 } from "react/jsx-runtime";
+import styled39, { css as css22 } from "styled-components";
+import { jsx as jsx204, jsxs as jsxs23 } 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);
@@ -8374,7 +8499,7 @@ var CompactTooltipStyles = css22`
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = styled38(Content)`
+var StyledContent = styled39(Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8432,14 +8557,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs23(
     Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx202(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx202(Portal, { children: /* @__PURE__ */ jsxs22(
+        /* @__PURE__ */ jsx204(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx204(Portal, { children: /* @__PURE__ */ jsxs23(
           StyledContent,
           {
             $compact: compact,
@@ -8447,7 +8572,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx202(Arrow, { asChild: true, children: /* @__PURE__ */ jsx202(
+              !hideArrow ? /* @__PURE__ */ jsx204(Arrow, { asChild: true, children: /* @__PURE__ */ jsx204(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8456,7 +8581,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  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" })
+                  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" })
                 }
               ) }) : null
             ]
@@ -8469,26 +8594,26 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled39 from "styled-components";
+import styled40 from "styled-components";
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
-import { jsx as jsx203, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx205, jsxs as jsxs24 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx203(
+    return /* @__PURE__ */ jsx205(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        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" })
+        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" })
       }
     );
   }
-  return /* @__PURE__ */ jsx203(
+  return /* @__PURE__ */ jsx205(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      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" })
+      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" })
     }
   );
 };
@@ -8496,12 +8621,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx203(
+  return /* @__PURE__ */ jsx205(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      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" })
+      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" })
     }
   );
 };
@@ -8511,7 +8636,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled39.svg`
+var WistiaLogoComponent = styled40.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -8553,7 +8678,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs23(
+  const Logo = /* @__PURE__ */ jsxs24(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -8563,63 +8688,16 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx203("title", { children: title }),
-        isNotNil16(description) ? /* @__PURE__ */ jsx203("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx205("title", { children: title }),
+        isNotNil16(description) ? /* @__PURE__ */ jsx205("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx203("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx205("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,
@@ -8672,7 +8750,9 @@ export {
   mq,
   useActiveMq,
   useAriaLive,
+  useBoolean,
   useFormState,
+  useKey,
   useMq,
   useToast,
   useWindowSize