@wistia/ui 0.4.3 → 0.4.5-beta.08aaf390.8473426

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.3
+ * @license @wistia/ui v0.4.5-beta.08aaf390.8473426
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -92,6 +92,7 @@ __export(index_exports, {
   useAriaLive: () => useAriaLive,
   useBoolean: () => useBoolean,
   useFormState: () => useFormState,
+  useKey: () => useKey,
   useMq: () => useMq,
   useToast: () => useToast,
   useWindowSize: () => useWindowSize
@@ -1634,17 +1635,103 @@ var useActiveMq = () => {
   });
 };
 
-// src/hooks/useToast/useToast.tsx
+// src/hooks/useKey/useKey.ts
 var import_react6 = require("react");
+
+// src/private/hooks/useEvent/useEvent.ts
+var import_react5 = require("react");
+
+// src/private/helpers/isObjectRef/isObjectRef.ts
+var import_type_guards4 = require("@wistia/type-guards");
+var isObjectRef = (value) => {
+  return (0, import_type_guards4.isNotNil)(value) && (0, import_type_guards4.isRecord)(value) && "current" in value;
+};
+
+// src/private/hooks/useEvent/useEvent.ts
+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 = (0, import_react5.useRef)();
+  const savedEventOptions = (0, import_react5.useRef)();
+  (0, import_react5.useEffect)(() => {
+    savedEventHandler.current = eventHandler;
+  }, [eventHandler]);
+  (0, import_react5.useEffect)(() => {
+    savedEventOptions.current = eventOptions;
+  }, [eventOptions]);
+  (0, import_react5.useEffect)(() => {
+    const target = isObjectRef(eventTarget) ? eventTarget.current : eventTarget;
+    if (!eventName || !isEventTargetSupported(target)) {
+      return;
+    }
+    const eventListener = (event) => {
+      if (savedEventHandler.current !== void 0) {
+        return savedEventHandler.current(event);
+      }
+      return () => {
+      };
+    };
+    target.addEventListener(eventName, eventListener, savedEventOptions.current);
+    return () => {
+      target.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 = (0, import_react6.useMemo)(() => {
+    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
+var import_react7 = require("react");
+var import_type_guards5 = require("@wistia/type-guards");
+var useAriaLive = () => {
+  const context = (0, import_react7.useContext)(AriaLiveContext);
+  if ((0, import_type_guards5.isNil)(context)) {
+    throw new Error("useAriaLive must be used within an AriaLiveProvider");
+  }
+  return context;
+};
+
+// src/hooks/useToast/useToast.tsx
+var import_react9 = require("react");
 var import_sonner2 = require("sonner");
 
 // src/private/components/Toast/Toast.tsx
-var import_react5 = require("react");
+var import_react8 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
-var import_type_guards5 = require("@wistia/type-guards");
+var import_type_guards7 = require("@wistia/type-guards");
 
 // src/components/Ellipsis/Ellipsis.tsx
-var import_type_guards4 = require("@wistia/type-guards");
+var import_type_guards6 = require("@wistia/type-guards");
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var ellipsisStyle = import_styled_components11.css`
@@ -1676,7 +1763,7 @@ var ellipsisFlexParentStyle = import_styled_components11.css`
 var EllipsisComponent = import_styled_components11.default.div`
   ${ellipsisStyle};
   ${({ $lines }) => {
-  if ((0, import_type_guards4.isNotNil)($lines)) {
+  if ((0, import_type_guards6.isNotNil)($lines)) {
     return import_styled_components11.css`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
@@ -1860,8 +1947,8 @@ var StyledToast = import_styled_components13.default.div`
   }
 `;
 var Action = ({ actionButton }) => {
-  if ((0, import_type_guards5.isNotNil)(actionButton) && (0, import_react5.isValidElement)(actionButton)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionWrapper, { children: (0, import_react5.cloneElement)(actionButton, {
+  if ((0, import_type_guards7.isNotNil)(actionButton) && (0, import_react8.isValidElement)(actionButton)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionWrapper, { children: (0, import_react8.cloneElement)(actionButton, {
       variant: "soft",
       // force Button variant
       size: "sm"
@@ -1884,7 +1971,7 @@ var Toast = ({
       $colorScheme: colorScheme,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(MessageWrapper, { children: [
-          (0, import_type_guards5.isNotNil)(icon) ? icon : null,
+          (0, import_type_guards7.isNotNil)(icon) ? icon : null,
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Message, { lines: 3, children: message })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Action, { actionButton: action })
@@ -1897,7 +1984,7 @@ Toast.displayName = "Toast";
 // src/hooks/useToast/useToast.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var useToast = () => {
-  return (0, import_react6.useCallback)(
+  return (0, import_react9.useCallback)(
     ({ message, action, colorScheme, icon, position = "bottom-left", duration = 3e3 }) => {
       import_sonner2.toast.custom(
         () => {
@@ -1918,25 +2005,14 @@ var useToast = () => {
   );
 };
 
-// src/hooks/useAriaLive/useAriaLive.tsx
-var import_react7 = require("react");
-var import_type_guards6 = require("@wistia/type-guards");
-var useAriaLive = () => {
-  const context = (0, import_react7.useContext)(AriaLiveContext);
-  if ((0, import_type_guards6.isNil)(context)) {
-    throw new Error("useAriaLive must be used within an AriaLiveProvider");
-  }
-  return context;
-};
-
 // src/components/ActionButton/ActionButton.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/components/Button/Button.tsx
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
-var import_type_guards10 = require("@wistia/type-guards");
+var import_type_guards11 = require("@wistia/type-guards");
 
 // src/css/buttonResetCss.tsx
 var import_styled_components14 = require("styled-components");
@@ -2139,7 +2215,7 @@ var buttonSizeStyles = {
 };
 
 // src/components/Icon/Icon.tsx
-var import_type_guards8 = require("@wistia/type-guards");
+var import_type_guards9 = require("@wistia/type-guards");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/components/Icon/icons/AbTestIcon.tsx
@@ -5300,17 +5376,17 @@ var iconMap = {
 };
 
 // src/private/hooks/useResponsiveProp/useResponsiveProp.ts
-var import_type_guards7 = require("@wistia/type-guards");
-var import_react8 = require("react");
+var import_type_guards8 = require("@wistia/type-guards");
+var import_react10 = require("react");
 var isResponsiveObject = (values) => {
   return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
 };
 var useResponsiveProp = (values) => {
   const activeMediaQueries = useActiveMq();
-  return (0, import_react8.useMemo)(() => {
-    if ((0, import_type_guards7.isRecord)(values) && isResponsiveObject(values)) {
+  return (0, import_react10.useMemo)(() => {
+    if ((0, import_type_guards8.isRecord)(values) && isResponsiveObject(values)) {
       const mq2 = activeMediaQueries.find((key) => key in values);
-      return (0, import_type_guards7.isNotUndefined)(mq2) && (0, import_type_guards7.isNotUndefined)(values[mq2]) ? values[mq2] : values.base;
+      return (0, import_type_guards8.isNotUndefined)(mq2) && (0, import_type_guards8.isNotUndefined)(values[mq2]) ? values[mq2] : values.base;
     }
     return values;
   }, [activeMediaQueries, values]);
@@ -5337,13 +5413,13 @@ var Icon = ({
   ...otherProps
 }) => {
   const responsiveSize = useResponsiveProp(size);
-  if ((0, import_type_guards8.isNil)(type)) {
+  if ((0, import_type_guards9.isNil)(type)) {
     throw new Error("An Icon component requires a `type` prop to be provided");
   }
-  if ((0, import_type_guards8.isNil)(iconMap[type])) {
+  if ((0, import_type_guards9.isNil)(iconMap[type])) {
     throw new Error(`Type "${type}" does not exist, please update type prop in Icon component.`);
   }
-  if ((0, import_type_guards8.isNil)(iconSizeMap[responsiveSize])) {
+  if ((0, import_type_guards9.isNil)(iconSizeMap[responsiveSize])) {
     throw new Error(
       `Size "${responsiveSize}" does not exist, please update size prop in Icon component.`
     );
@@ -5374,13 +5450,13 @@ var Icon = ({
 Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
-var import_react9 = require("react");
-var import_type_guards9 = require("@wistia/type-guards");
+var import_react11 = require("react");
+var import_type_guards10 = require("@wistia/type-guards");
 var import_styled_components17 = __toESM(require("styled-components"));
 var import_react_router_dom = require("react-router-dom");
 var import_jsx_runtime161 = require("react/jsx-runtime");
 var generateHref = (href, type, disabled) => {
-  if (disabled || (0, import_type_guards9.isNil)(href)) {
+  if (disabled || (0, import_type_guards10.isNil)(href)) {
     return void 0;
   }
   let to = href;
@@ -5392,17 +5468,17 @@ var generateHref = (href, type, disabled) => {
   }
   return to;
 };
-var isButton = (props) => (0, import_type_guards9.isUndefined)(props.href);
-var isLink = (props) => (0, import_type_guards9.isNotUndefined)(props.href);
+var isButton = (props) => (0, import_type_guards10.isUndefined)(props.href);
+var isLink = (props) => (0, import_type_guards10.isNotUndefined)(props.href);
 var StyledLink = import_styled_components17.default.a`
-  ${({ href }) => (0, import_type_guards9.isNil)(href) && buttonResetCss};
+  ${({ href }) => (0, import_type_guards10.isNil)(href) && buttonResetCss};
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   cursor: pointer;
   font-family: var(--wui-typography-family-default);
   color: var(--wui-color-text-link);
   text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
 `;
-var Link = (0, import_react9.forwardRef)(
+var Link = (0, import_react11.forwardRef)(
   ({
     beforeAction,
     children,
@@ -5426,7 +5502,7 @@ var Link = (0, import_react9.forwardRef)(
         } finally {
           if (routingCallback !== null) {
             routingCallback();
-          } else if ((0, import_type_guards9.isNotNil)(to)) {
+          } else if ((0, import_type_guards10.isNotNil)(to)) {
             window.location.assign(to);
           } else {
           }
@@ -5485,7 +5561,7 @@ Link.displayName = "Link";
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime162 = require("react/jsx-runtime");
-var isLink2 = (props) => (0, import_type_guards10.isNotUndefined)(props.href);
+var isLink2 = (props) => (0, import_type_guards11.isNotUndefined)(props.href);
 var StyledButton = import_styled_components18.default.button`
   ${buttonResetCss}
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
@@ -5526,8 +5602,8 @@ var ButtonContent = ({
     /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
       StyledButtonContent,
       {
-        $hasLeftIcon: (0, import_type_guards10.isNotNil)(leftIcon),
-        $hasRightIcon: (0, import_type_guards10.isNotNil)(rightIcon),
+        $hasLeftIcon: (0, import_type_guards11.isNotNil)(leftIcon),
+        $hasRightIcon: (0, import_type_guards11.isNotNil)(rightIcon),
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
@@ -5538,7 +5614,7 @@ var ButtonContent = ({
     )
   ] });
 };
-var Button = (0, import_react10.forwardRef)(
+var Button = (0, import_react12.forwardRef)(
   ({
     children,
     forceState,
@@ -5595,7 +5671,7 @@ var Button = (0, import_react10.forwardRef)(
         event.preventDefault();
         return;
       }
-      if ((0, import_type_guards10.isNotNil)(onClick)) {
+      if ((0, import_type_guards11.isNotNil)(onClick)) {
         onClick(event);
       }
     };
@@ -5711,7 +5787,7 @@ var StyledLabel = import_styled_components19.default.span`
   grid-row: 2;
   text-align: left;
 `;
-var ActionButton = (0, import_react11.forwardRef)(
+var ActionButton = (0, import_react13.forwardRef)(
   ({
     icon,
     colorScheme = "default",
@@ -5755,8 +5831,8 @@ var ActionButton = (0, import_react11.forwardRef)(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-var import_react12 = require("react");
-var import_type_guards12 = require("@wistia/type-guards");
+var import_react14 = require("react");
+var import_type_guards13 = require("@wistia/type-guards");
 var import_styled_components21 = __toESM(require("styled-components"));
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
@@ -5799,13 +5875,13 @@ var ColorSchemeWrapper = ({
 ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
 
 // src/components/Avatar/formatNameForDisplay.tsx
-var import_type_guards11 = require("@wistia/type-guards");
+var import_type_guards12 = require("@wistia/type-guards");
 var containsEmojiCharacter = (char) => {
   const emojiRegex = /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu;
   return emojiRegex.test(char);
 };
 var formatNameForDisplay = (name) => {
-  if ((0, import_type_guards11.isNil)(name) || !(0, import_type_guards11.isString)(name) || (0, import_type_guards11.isEmptyString)(name) || containsEmojiCharacter(name)) {
+  if ((0, import_type_guards12.isNil)(name) || !(0, import_type_guards12.isString)(name) || (0, import_type_guards12.isEmptyString)(name) || containsEmojiCharacter(name)) {
     return "U";
   }
   const firstChar = name.trim().substring(0, 1);
@@ -5867,7 +5943,7 @@ var AvatarWrapper = import_styled_components21.default.div`
   max-height: ${({ $maxHeight }) => $maxHeight}px;
 `;
 var chooseColorScheme = (name) => {
-  if ((0, import_type_guards12.isNil)(name) || name === "Anonymous") {
+  if ((0, import_type_guards13.isNil)(name) || name === "Anonymous") {
     return "default";
   }
   const filteredColors = colorSchemeOptions.filter(
@@ -5886,7 +5962,7 @@ var Avatar = ({
   onImageLoad,
   ...otherProps
 }) => {
-  const [imageLoadState, setImageLoadState] = (0, import_react12.useState)(null);
+  const [imageLoadState, setImageLoadState] = (0, import_react14.useState)(null);
   const handleImageLoad = () => {
     setImageLoadState("loaded");
     onImageLoad?.("image");
@@ -5896,8 +5972,8 @@ var Avatar = ({
     onImageLoad?.("initials");
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
-  const avatarColor = (0, import_react12.useMemo)(() => chooseColorScheme(name), [name]);
-  const showInitials = (0, import_type_guards12.isNil)(imageUrl) || imageLoadState === "error";
+  const avatarColor = (0, import_react14.useMemo)(() => chooseColorScheme(name), [name]);
+  const showInitials = (0, import_type_guards13.isNil)(imageUrl) || imageLoadState === "error";
   return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     AvatarWrapper,
     {
@@ -5926,9 +6002,9 @@ var Avatar = ({
 Avatar.displayName = "Avatar";
 
 // src/components/Badge/Badge.tsx
-var import_react13 = require("react");
+var import_react15 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
-var import_type_guards13 = require("@wistia/type-guards");
+var import_type_guards14 = require("@wistia/type-guards");
 var import_jsx_runtime166 = require("react/jsx-runtime");
 var StyledBadge = import_styled_components22.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -5950,9 +6026,9 @@ var StyledBadge = import_styled_components22.default.div`
     width: 12px;
   }
 `;
-var Badge = (0, import_react13.forwardRef)(
+var Badge = (0, import_react15.forwardRef)(
   ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
-    const hasIcon = (0, import_type_guards13.isNotNil)(icon);
+    const hasIcon = (0, import_type_guards14.isNotNil)(icon);
     return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
       StyledBadge,
       {
@@ -5971,14 +6047,14 @@ var Badge = (0, import_react13.forwardRef)(
 Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
-var import_react14 = require("react");
+var import_react16 = require("react");
 var import_styled_components23 = __toESM(require("styled-components"));
-var import_type_guards14 = require("@wistia/type-guards");
+var import_type_guards15 = require("@wistia/type-guards");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
-  if ((0, import_type_guards14.isNotNil)(gap)) {
-    if ((0, import_type_guards14.isRecord)(gap)) {
+  if ((0, import_type_guards15.isNotNil)(gap)) {
+    if ((0, import_type_guards15.isRecord)(gap)) {
       return Object.entries(gap).map(([key, value]) => {
         return `${key}-gap: var(--wui-${value})};`;
       }).join("");
@@ -6021,30 +6097,30 @@ var BoxComponent = import_styled_components23.default.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
-  display: ${({ $inline }) => (0, import_type_guards14.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => (0, import_type_guards14.isNotNil)($basis) ? $basis : null};
+  display: ${({ $inline }) => (0, import_type_guards15.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => (0, import_type_guards15.isNotNil)($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
   ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
 
   /* Box children styles */
-  flex-grow: ${({ $grow }) => (0, import_type_guards14.isNotNil)($grow) ? $grow : null};
-  flex-shrink: ${({ $shrink }) => (0, import_type_guards14.isNotNil)($shrink) ? $shrink : null};
+  flex-grow: ${({ $grow }) => (0, import_type_guards15.isNotNil)($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => (0, import_type_guards15.isNotNil)($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
   ${({ $gap }) => getGapStyle($gap)};
   justify-content: ${({ $justifyContent }) => $justifyContent};
-  order: ${({ $order }) => (0, import_type_guards14.isNotNil)($order) ? $order : null};
+  order: ${({ $order }) => (0, import_type_guards15.isNotNil)($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
-  if ((0, import_type_guards14.isNotNil)(children)) {
+  if ((0, import_type_guards15.isNotNil)(children)) {
     if (typeof children === "object" && isDev) {
-      return import_react14.Children.map(children, (child) => {
-        if ((0, import_type_guards14.isNil)(child)) return null;
+      return import_react16.Children.map(children, (child) => {
+        if ((0, import_type_guards15.isNil)(child)) return null;
         const elementParams = {};
         if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
           elementParams.hasBoxParent = true;
         }
-        return (0, import_react14.cloneElement)(child, elementParams);
+        return (0, import_react16.cloneElement)(child, elementParams);
       });
     }
     return children;
@@ -6096,10 +6172,57 @@ var Box = ({
 };
 Box.displayName = "Box";
 
-// src/components/ButtonGroup/ButtonGroup.tsx
+// src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_styled_components24 = __toESM(require("styled-components"));
-var import_type_guards15 = require("@wistia/type-guards");
 var import_jsx_runtime168 = require("react/jsx-runtime");
+var StyledBreadcrumbs = import_styled_components24.default.nav`
+  display: flex;
+  align-items: center;
+  gap: var(--wui-space-01);
+
+  > svg:last-of-type {
+    display: none;
+  }
+`;
+var Breadcrumbs = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+    StyledBreadcrumbs,
+    {
+      "aria-label": "Breadcrumbs",
+      ...props,
+      children
+    }
+  );
+};
+Breadcrumbs.displayName = "Breadcrumbs";
+
+// src/components/Breadcrumbs/Breadcrumb.tsx
+var import_jsx_runtime169 = require("react/jsx-runtime");
+var Breadcrumb = ({ icon, href, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(import_jsx_runtime169.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+      Button,
+      {
+        href,
+        leftIcon: icon,
+        variant: "ghost",
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+      Icon,
+      {
+        size: "sm",
+        type: "caret-right"
+      }
+    )
+  ] });
+};
+
+// src/components/ButtonGroup/ButtonGroup.tsx
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_type_guards16 = require("@wistia/type-guards");
+var import_jsx_runtime170 = require("react/jsx-runtime");
 var getAlignment = (align) => {
   if (align === "center") {
     return "center";
@@ -6112,7 +6235,7 @@ var getAlignment = (align) => {
   }
   return "flex-start";
 };
-var ButtonGroupComponent = import_styled_components24.default.div`
+var ButtonGroupComponent = import_styled_components25.default.div`
   display: flex;
 
   /* this helps ensure that primary buttons appear at the top of the column */
@@ -6138,10 +6261,10 @@ var ButtonGroup = ({
   fullWidth = false,
   ...otherProps
 }) => {
-  if ((0, import_type_guards15.isNil)(children)) {
+  if ((0, import_type_guards16.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
     ButtonGroupComponent,
     {
       $align: align,
@@ -6154,9 +6277,9 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Card/Card.tsx
-var import_styled_components25 = __toESM(require("styled-components"));
-var import_jsx_runtime169 = require("react/jsx-runtime");
-var StyledCard = (0, import_styled_components25.default)(Box)`
+var import_styled_components26 = __toESM(require("styled-components"));
+var import_jsx_runtime171 = require("react/jsx-runtime");
+var StyledCard = (0, import_styled_components26.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   box-sizing: border-box;
   padding: ${({ $paddingSize }) => `var(--wui-${$paddingSize})`};
@@ -6189,7 +6312,7 @@ var Card = ({
   prominence = "secondary",
   border = false,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
   StyledCard,
   {
     $backgroundColor: prominenceMap[prominence].backgroundColor,
@@ -6205,17 +6328,17 @@ var Card = ({
 Card.displayName = "Card";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react16 = require("react");
+var import_react18 = require("react");
 var import_react_checkbox = require("@radix-ui/react-checkbox");
-var import_styled_components29 = __toESM(require("styled-components"));
-var import_type_guards17 = require("@wistia/type-guards");
+var import_styled_components30 = __toESM(require("styled-components"));
+var import_type_guards18 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
+var import_styled_components28 = __toESM(require("styled-components"));
 
 // src/components/Heading/Heading.tsx
-var import_react15 = require("react");
-var import_styled_components26 = __toESM(require("styled-components"));
+var import_react17 = require("react");
+var import_styled_components27 = __toESM(require("styled-components"));
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -6223,44 +6346,44 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-var import_jsx_runtime170 = require("react/jsx-runtime");
-var heroStyle = import_styled_components26.css`
+var import_jsx_runtime172 = require("react/jsx-runtime");
+var heroStyle = import_styled_components27.css`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = import_styled_components26.css`
+var heading1TextStyle = import_styled_components27.css`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = import_styled_components26.css`
+var heading2TextStyle = import_styled_components27.css`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = import_styled_components26.css`
+var heading3TextStyle = import_styled_components27.css`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = import_styled_components26.css`
+var heading4TextStyle = import_styled_components27.css`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = import_styled_components26.css`
+var heading5TextStyle = import_styled_components27.css`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = import_styled_components26.css`
+var heading6TextStyle = import_styled_components27.css`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -6276,7 +6399,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = import_styled_components26.default.div`
+var StyledHeading = import_styled_components27.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6285,16 +6408,16 @@ var StyledHeading = import_styled_components26.default.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components26.css`
+  ${({ $inline }) => $inline && import_styled_components27.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components26.css`
+  ${({ $disabled }) => $disabled && import_styled_components27.css`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components26.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components27.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components26.css`
+  ${({ $align }) => import_styled_components27.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -6308,7 +6431,7 @@ var variantElementMap = {
   heading5: "h5",
   heading6: "h6"
 };
-var HeadingComponent = (0, import_react15.forwardRef)(
+var HeadingComponent = (0, import_react17.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -6319,7 +6442,7 @@ var HeadingComponent = (0, import_react15.forwardRef)(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
     StyledHeading,
     {
       ref,
@@ -6339,8 +6462,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Label/Label.tsx
-var import_jsx_runtime171 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components27.css`
+var import_jsx_runtime173 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components28.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -6348,10 +6471,10 @@ var requiredStyle = import_styled_components27.css`
     content: '*';
   }
 `;
-var disabledStyle = import_styled_components27.css`
+var disabledStyle = import_styled_components28.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = (0, import_styled_components27.default)(Heading).attrs({
+var StyledLabel2 = (0, import_styled_components28.default)(Heading).attrs({
   variant: "heading6",
   renderAs: "label"
 })`
@@ -6380,7 +6503,7 @@ var Label = ({
   required = false,
   screenReaderOnly = false,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
   StyledLabel2,
   {
     ...otherProps,
@@ -6394,10 +6517,10 @@ var Label = ({
 Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
-var import_styled_components28 = __toESM(require("styled-components"));
-var import_type_guards16 = require("@wistia/type-guards");
-var import_jsx_runtime172 = require("react/jsx-runtime");
-var StyledLabelDescription = import_styled_components28.default.div`
+var import_styled_components29 = __toESM(require("styled-components"));
+var import_type_guards17 = require("@wistia/type-guards");
+var import_jsx_runtime174 = require("react/jsx-runtime");
+var StyledLabelDescription = import_styled_components29.default.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -6407,16 +6530,16 @@ var LabelDescription = ({
   children,
   ...props
 }) => {
-  if ((0, import_type_guards16.isNil)(children)) {
+  if ((0, import_type_guards17.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(StyledLabelDescription, { ...props, children });
 };
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime173 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
+var import_jsx_runtime175 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -6424,7 +6547,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
       "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",
@@ -6433,7 +6556,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
     )
   }
 );
-var StyledCheckboxWrapper = import_styled_components29.default.div`
+var StyledCheckboxWrapper = import_styled_components30.default.div`
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -6447,7 +6570,7 @@ var StyledCheckboxWrapper = import_styled_components29.default.div`
     background-color: #efefef;
   }
 `;
-var StyledCheckboxRoot = (0, import_styled_components29.default)(import_react_checkbox.Root)`
+var StyledCheckboxRoot = (0, import_styled_components30.default)(import_react_checkbox.Root)`
   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;
@@ -6481,15 +6604,15 @@ var StyledCheckboxRoot = (0, import_styled_components29.default)(import_react_ch
     /* TODO Lamp to design focus state */
   }
 `;
-var StyledCheckboxIndicator = (0, import_styled_components29.default)(import_react_checkbox.Indicator)`
+var StyledCheckboxIndicator = (0, import_styled_components30.default)(import_react_checkbox.Indicator)`
   display: flex;
 `;
-var StyledLabelWrapper = import_styled_components29.default.div`
+var StyledLabelWrapper = import_styled_components30.default.div`
   display: flex;
   flex-direction: column;
   margin-left: var(--wui-space-02);
 `;
-var Checkbox = (0, import_react16.forwardRef)(
+var Checkbox = (0, import_react18.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -6503,10 +6626,10 @@ var Checkbox = (0, import_react16.forwardRef)(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = (0, import_react16.useId)();
-    const computedId = (0, import_type_guards17.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(StyledCheckboxWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
+    const generatedId = (0, import_react18.useId)();
+    const computedId = (0, import_type_guards18.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(StyledCheckboxWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
         StyledCheckboxRoot,
         {
           ref,
@@ -6531,11 +6654,11 @@ var Checkbox = (0, import_react16.forwardRef)(
           required,
           value,
           ...otherProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(StyledCheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(CheckIcon, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(StyledCheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(CheckIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(StyledLabelWrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(StyledLabelWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
           Label,
           {
             disabled,
@@ -6544,7 +6667,7 @@ var Checkbox = (0, import_react16.forwardRef)(
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(LabelDescription, { children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(LabelDescription, { children: description })
       ] })
     ] });
   }
@@ -6552,22 +6675,22 @@ var Checkbox = (0, import_react16.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
-var import_jsx_runtime174 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components30.css`
+var import_styled_components31 = __toESM(require("styled-components"));
+var import_jsx_runtime176 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components31.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = import_styled_components30.css`
+var verticalBorderCss = import_styled_components31.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components30.default.div`
+var DividerComponent = import_styled_components31.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -6582,7 +6705,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -6595,25 +6718,25 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
-var import_react18 = require("react");
-var import_styled_components32 = __toESM(require("styled-components"));
-var import_type_guards18 = require("@wistia/type-guards");
+var import_react20 = require("react");
+var import_styled_components33 = __toESM(require("styled-components"));
+var import_type_guards19 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
-var import_react17 = require("react");
-var import_styled_components31 = __toESM(require("styled-components"));
-var import_jsx_runtime175 = require("react/jsx-runtime");
+var import_react19 = require("react");
+var import_styled_components32 = __toESM(require("styled-components"));
+var import_jsx_runtime177 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT2 = "div";
-var StyledStack = import_styled_components31.default.div`
+var StyledStack = import_styled_components32.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
 `;
-var StackComponent = (0, import_react17.forwardRef)(
+var StackComponent = (0, import_react19.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
       StyledStack,
       {
         ref,
@@ -6629,29 +6752,29 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-var import_jsx_runtime176 = require("react/jsx-runtime");
-var StyledForm = import_styled_components32.default.form`
+var import_jsx_runtime178 = require("react/jsx-runtime");
+var StyledForm = import_styled_components33.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = (0, import_react18.createContext)({
+var FormContext = (0, import_react20.createContext)({
   values: {},
   errors: {},
   hasSubmitted: false,
   formId: ""
 });
 var FormComponent = ({ children, action, values = {}, validate, fullWidth = false, ...props }, forwardedRef) => {
-  const [errors, setErrors] = (0, import_react18.useState)({});
-  const [hasSubmitted, setHasSubmitted] = (0, import_react18.useState)(false);
-  const innerRef = (0, import_react18.useRef)();
+  const [errors, setErrors] = (0, import_react20.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react20.useState)(false);
+  const innerRef = (0, import_react20.useRef)();
   const ref = forwardedRef ?? innerRef;
-  const autoId = (0, import_react18.useId)();
+  const autoId = (0, import_react20.useId)();
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards18.isUndefined)(validate)) {
+    if ((0, import_type_guards19.isUndefined)(validate)) {
       return {};
     }
     return validate(nextData);
@@ -6661,7 +6784,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if ((0, import_type_guards18.isNotUndefined)(validate)) {
+    if ((0, import_type_guards19.isNotUndefined)(validate)) {
       handleValidate(formData);
     }
   };
@@ -6689,7 +6812,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       void action(null);
     }
   };
-  const context = (0, import_react18.useMemo)(() => {
+  const context = (0, import_react20.useMemo)(() => {
     return {
       values,
       errors,
@@ -6699,7 +6822,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__ */ (0, import_jsx_runtime176.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
       Stack,
       {
         gap: "space-05",
@@ -6717,15 +6840,15 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
   );
 };
 FormComponent.displayName = "Form";
-var Form = (0, import_react18.forwardRef)(FormComponent);
+var Form = (0, import_react20.forwardRef)(FormComponent);
 
 // src/components/Form/useFormState.tsx
-var import_react19 = require("react");
+var import_react21 = require("react");
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = (0, import_react19.useState)(initialData);
-  const [isPending, setIsPending] = (0, import_react19.useState)(false);
-  const [error, setError] = (0, import_react19.useState)(null);
-  const formAction = (0, import_react19.useCallback)(
+  const [data, setData] = (0, import_react21.useState)(initialData);
+  const [isPending, setIsPending] = (0, import_react21.useState)(false);
+  const [error, setError] = (0, import_react21.useState)(null);
+  const formAction = (0, import_react21.useCallback)(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -6756,23 +6879,23 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-var import_react20 = require("react");
-var import_type_guards19 = require("@wistia/type-guards");
-var import_jsx_runtime177 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_type_guards20 = require("@wistia/type-guards");
+var import_jsx_runtime179 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Link, { href: `${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Link, { href: `${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = (0, import_react20.useRef)(null);
-  const { formId, errors, hasSubmitted } = (0, import_react20.useContext)(FormContext);
+  const ref = (0, import_react22.useRef)(null);
+  const { formId, errors, hasSubmitted } = (0, import_react22.useContext)(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards19.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards19.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards20.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards20.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
         ErrorItem,
         {
           error: err,
@@ -6780,7 +6903,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -6794,95 +6917,95 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-var import_react24 = require("react");
-var import_styled_components35 = __toESM(require("styled-components"));
-var import_type_guards20 = require("@wistia/type-guards");
+var import_react26 = require("react");
+var import_styled_components36 = __toESM(require("styled-components"));
+var import_type_guards21 = require("@wistia/type-guards");
 
 // src/components/Text/Text.tsx
-var import_react21 = require("react");
-var import_styled_components33 = __toESM(require("styled-components"));
-var import_jsx_runtime178 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components33.css`
+var import_react23 = require("react");
+var import_styled_components34 = __toESM(require("styled-components"));
+var import_jsx_runtime180 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components34.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components33.css`
+var labelBoldStyles = import_styled_components34.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components33.css`
+var body1TextStyle = import_styled_components34.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
   --line-height: var(--wui-typography-body-1-line-height);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components33.css`
+var body2TextStyle = import_styled_components34.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
   --line-height: var(--wui-typography-body-2-line-height);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components33.css`
+var body3TextStyle = import_styled_components34.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
   --line-height: var(--wui-typography-body-3-line-height);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components33.css`
+var body4TextStyle = import_styled_components34.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
   --line-height: var(--wui-typography-body-4-line-height);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components33.css`
+var label1TextStyle = import_styled_components34.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components33.css`
+var label2TextStyle = import_styled_components34.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components33.css`
+var label3TextStyle = import_styled_components34.css`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components33.css`
+var label4TextStyle = import_styled_components34.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components33.css`
+var body1MonoTextStyle = import_styled_components34.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components33.css`
+var body2MonoTextStyle = import_styled_components34.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components33.css`
+var body3MonoTextStyle = import_styled_components34.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components33.css`
+var body4MonoTextStyle = import_styled_components34.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -6900,7 +7023,7 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var StyledText = import_styled_components33.default.div`
+var StyledText = import_styled_components34.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -6924,24 +7047,24 @@ var StyledText = import_styled_components33.default.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components33.css`
+  ${({ $inline }) => $inline && import_styled_components34.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components33.css`
+  ${({ $disabled }) => $disabled && import_styled_components34.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components33.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components34.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components33.css`
+  ${({ $align }) => import_styled_components34.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components33.css`
+  ${({ as }) => as === "p" && import_styled_components34.css`
       display: block;
     `}
 `;
 var DEFAULT_ELEMENT3 = "div";
-var TextComponent = (0, import_react21.forwardRef)(
+var TextComponent = (0, import_react23.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -6954,7 +7077,7 @@ var TextComponent = (0, import_react21.forwardRef)(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
       StyledText,
       {
         ref,
@@ -6976,28 +7099,28 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_react23 = require("react");
+var import_react25 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components34 = __toESM(require("styled-components"));
-var import_react22 = require("react");
-var import_jsx_runtime179 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components34.default.fieldset`
+var import_styled_components35 = __toESM(require("styled-components"));
+var import_react24 = require("react");
+var import_jsx_runtime181 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components35.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components34.default.legend`
+var StyledLegend = import_styled_components35.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = (0, import_react22.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
+  const ref = (0, import_react24.useRef)();
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
           Heading,
           {
             renderAs: StyledLegend,
@@ -7013,8 +7136,8 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_jsx_runtime180 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react23.createContext)(null);
+var import_jsx_runtime182 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react25.createContext)(null);
 var CheckboxGroup = ({
   children,
   name,
@@ -7022,19 +7145,19 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react23.useMemo)(() => {
+  const context = (0, import_react25.useMemo)(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-var import_jsx_runtime181 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components35.default.div`
+var import_jsx_runtime183 = require("react/jsx-runtime");
+var StyledFormField = import_styled_components36.default.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-error-color: var(--wui-color-text-secondary-error);
 
@@ -7042,7 +7165,7 @@ var StyledFormField = import_styled_components35.default.div`
   flex-direction: column;
   gap: var(--form-field-spacing);
 `;
-var StyledErrorList = import_styled_components35.default.ul`
+var StyledErrorList = import_styled_components36.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -7051,8 +7174,8 @@ var StyledErrorList = import_styled_components35.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = (0, import_type_guards20.isArray)(errors);
-  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  const isMultipleErrors = (0, import_type_guards21.isArray)(errors);
+  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -7062,7 +7185,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -7082,8 +7205,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = (0, import_react24.useContext)(FormContext);
-  const checkboxGroup = (0, import_react24.useContext)(CheckboxGroupContext);
+  const formState = (0, import_react26.useContext)(FormContext);
+  const checkboxGroup = (0, import_react26.useContext)(CheckboxGroupContext);
   const id = props.id ?? `${formState.formId}-${name}`;
   const isInlineLabel = children.type === Checkbox;
   const computedError = error ?? formState.errors[name];
@@ -7094,19 +7217,19 @@ var FormField = ({
     label: isInlineLabel ? label : void 0,
     ...props
   };
-  if ((0, import_type_guards20.isUndefined)(value) && (0, import_type_guards20.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards21.isUndefined)(value) && (0, import_type_guards21.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards20.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards20.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards21.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards21.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards20.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards21.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards20.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards21.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -7114,15 +7237,15 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards20.isNotNil)(error),
-      "aria-describedby": (0, import_type_guards20.isNotNil)(error) ? `${id}-error` : void 0
+      "aria-invalid": (0, import_type_guards21.isNotNil)(error),
+      "aria-describedby": (0, import_type_guards21.isNotNil)(error) ? `${id}-error` : void 0
     };
   }
-  import_react24.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(StyledFormField, { ...props, children: [
-    !isInlineLabel && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Label, { htmlFor: id, children: label }),
-    (0, import_react24.cloneElement)(children, childProps),
-    (0, import_type_guards20.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  import_react26.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(StyledFormField, { ...props, children: [
+    !isInlineLabel && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Label, { htmlFor: id, children: label }),
+    (0, import_react26.cloneElement)(children, childProps),
+    (0, import_type_guards21.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
       ErrorMessages,
       {
         errors: computedError,
@@ -7134,9 +7257,9 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-var import_react25 = require("react");
-var import_jsx_runtime182 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react25.createContext)(null);
+var import_react27 = require("react");
+var import_jsx_runtime184 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react27.createContext)(null);
 var RadioGroup = ({
   children,
   name,
@@ -7144,21 +7267,21 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react25.useMemo)(() => {
+  const context = (0, import_react27.useMemo)(() => {
     return {
       name,
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
-var import_react26 = require("react");
-var import_styled_components36 = __toESM(require("styled-components"));
-var import_jsx_runtime183 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components36.default)(Button)`
+var import_react28 = require("react");
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_jsx_runtime185 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components37.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -7172,10 +7295,10 @@ var StyledButton2 = (0, import_styled_components36.default)(Button)`
   align-items: center;
   line-height: 1;
 `;
-var IconButton = (0, import_react26.forwardRef)(
+var IconButton = (0, import_react28.forwardRef)(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
       StyledButton2,
       {
         ...props,
@@ -7183,7 +7306,7 @@ var IconButton = (0, import_react26.forwardRef)(
         "aria-label": label,
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
-        children: (0, import_react26.cloneElement)(import_react26.Children.only(children), {
+        children: (0, import_react28.cloneElement)(import_react28.Children.only(children), {
           size: responsiveSize
         })
       }
@@ -7193,11 +7316,11 @@ var IconButton = (0, import_react26.forwardRef)(
 IconButton.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
-var import_react27 = require("react");
-var import_styled_components37 = __toESM(require("styled-components"));
-var import_type_guards21 = require("@wistia/type-guards");
-var import_jsx_runtime184 = require("react/jsx-runtime");
-var inputStyles = import_styled_components37.css`
+var import_react29 = require("react");
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_type_guards22 = require("@wistia/type-guards");
+var import_jsx_runtime186 = require("react/jsx-runtime");
+var inputStyles = import_styled_components38.css`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border);
@@ -7238,7 +7361,7 @@ var inputStyles = import_styled_components37.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components37.default.div`
+var StyledInputContainer = import_styled_components38.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -7283,9 +7406,9 @@ var StyledInputContainer = import_styled_components37.default.div`
   }
 `;
 var isValidRef = (ref) => {
-  return typeof ref === "object" && ref !== null && "current" in ref && (0, import_type_guards21.isNotNil)(ref.current);
+  return typeof ref === "object" && ref !== null && "current" in ref && (0, import_type_guards22.isNotNil)(ref.current);
 };
-var Input = (0, import_react27.forwardRef)(
+var Input = (0, import_react29.forwardRef)(
   ({
     fullWidth = false,
     monospace = false,
@@ -7295,27 +7418,27 @@ var Input = (0, import_react27.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react27.useRef)();
+    const internalRef = (0, import_react29.useRef)();
     const ref = isValidRef(externalRef) ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards21.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { type: "search" });
+    if ((0, import_type_guards22.isNil)(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards21.isNotNil)(leftIconToDisplay)) {
-      leftIconToDisplay = (0, import_react27.cloneElement)(leftIconToDisplay, {
+    if ((0, import_type_guards22.isNotNil)(leftIconToDisplay)) {
+      leftIconToDisplay = (0, import_react29.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards21.isNotNil)(rightIconToDisplay)) {
-      rightIconToDisplay = (0, import_react27.cloneElement)(rightIconToDisplay, {
+    if ((0, import_type_guards22.isNotNil)(rightIconToDisplay)) {
+      rightIconToDisplay = (0, import_react29.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus = (event) => {
-      if ((0, import_type_guards21.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards22.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && ref && "current" in ref) {
@@ -7324,21 +7447,21 @@ var Input = (0, import_react27.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
             "input",
             {
               ...props,
@@ -7356,11 +7479,11 @@ var Input = (0, import_react27.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/Menu/Menu.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
+var import_styled_components39 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_type_guards22 = require("@wistia/type-guards");
-var import_jsx_runtime185 = require("react/jsx-runtime");
-var open = import_styled_components38.keyframes`
+var import_type_guards23 = require("@wistia/type-guards");
+var import_jsx_runtime187 = require("react/jsx-runtime");
+var open = import_styled_components39.keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -7370,7 +7493,7 @@ var open = import_styled_components38.keyframes`
     transform: scale(1);
   }
 `;
-var close = import_styled_components38.keyframes`
+var close = import_styled_components39.keyframes`
   from {
     opacity: 1;
     transform: scale(1);
@@ -7380,7 +7503,7 @@ var close = import_styled_components38.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuContentCss = import_styled_components38.css`
+var menuContentCss = import_styled_components39.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: 0 0 64px 0 rgba(0 0 0 / 8%); /* TODO - Need a box-shadow token */
@@ -7415,11 +7538,11 @@ var menuContentCss = import_styled_components38.css`
     transform: initial;
   }
 
-  hr {
-    margin: var(--wui-space-02) 0;
+  [role='separator'] {
+    margin: var(--menu-divider-margin) 0;
   }
 `;
-var menuItemCss = import_styled_components38.css`
+var menuItemCss = import_styled_components39.css`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -7428,8 +7551,9 @@ var menuItemCss = import_styled_components38.css`
   --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 = import_styled_components38.css`
+var compactMenuItemCss = import_styled_components39.css`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -7438,8 +7562,9 @@ var compactMenuItemCss = import_styled_components38.css`
   --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 = (0, import_styled_components38.default)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components39.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
   ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
@@ -7457,7 +7582,7 @@ var Menu = ({
   ...props
 }) => {
   let controlProps = {
-    ...(0, import_type_guards22.isNotNil)(onOpenChange) && (0, import_type_guards22.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards23.isNotNil)(onOpenChange) && (0, import_type_guards23.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -7465,24 +7590,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
     import_react_dropdown_menu.DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards22.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards23.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
           MenuContent,
           {
             ...props,
@@ -7502,19 +7627,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components39 = __toESM(require("styled-components"));
+var import_styled_components40 = __toESM(require("styled-components"));
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime186 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components39.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var import_jsx_runtime188 = require("react/jsx-runtime");
+var StyledMenuLabel = (0, import_styled_components40.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
         Heading,
         {
           renderAs: "span",
@@ -7529,17 +7654,17 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-var import_react29 = require("react");
-var import_styled_components42 = __toESM(require("styled-components"));
+var import_react31 = require("react");
+var import_styled_components43 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards24 = require("@wistia/type-guards");
+var import_type_guards25 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
-var import_react28 = require("react");
-var import_styled_components40 = __toESM(require("styled-components"));
-var import_type_guards23 = require("@wistia/type-guards");
-var import_jsx_runtime187 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components40.default)(Button)`
+var import_react30 = require("react");
+var import_styled_components41 = __toESM(require("styled-components"));
+var import_type_guards24 = require("@wistia/type-guards");
+var import_jsx_runtime189 = require("react/jsx-runtime");
+var StyledButton3 = (0, import_styled_components41.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -7577,7 +7702,7 @@ var StyledButton3 = (0, import_styled_components40.default)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components40.default.div`
+var StyledLeftIconContainer = import_styled_components41.default.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -7586,7 +7711,7 @@ var StyledLeftIconContainer = import_styled_components40.default.div`
     width: var(--menu-item-left-icon-size);
   }
 `;
-var StyledRightIconContainer = import_styled_components40.default.div`
+var StyledRightIconContainer = import_styled_components41.default.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -7595,28 +7720,28 @@ var StyledRightIconContainer = import_styled_components40.default.div`
     width: var(--menu-item-right-icon-size);
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components40.default.div`
+var StyledLabelAndDescriptionContainer = import_styled_components41.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components40.default.div`
+var StyledBadgeContainer = import_styled_components41.default.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = (0, import_react28.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
+var MenuItemButton = (0, import_react30.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if ((0, import_type_guards23.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards24.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+    badge = /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
       Icon,
       {
         colorScheme: "purple",
@@ -7628,7 +7753,7 @@ var MenuItemButton = (0, import_react28.forwardRef)(({ children, appearance, com
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
     StyledButton3,
     {
       ...props,
@@ -7638,10 +7763,10 @@ var MenuItemButton = (0, import_react28.forwardRef)(({ children, appearance, com
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards23.isNotNil)(badge) || (0, import_type_guards23.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledLabelAndDescriptionContainer, { children }),
+        (0, import_type_guards24.isNotNil)(badge) || (0, import_type_guards24.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -7649,23 +7774,23 @@ var MenuItemButton = (0, import_react28.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
-var import_jsx_runtime188 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components41.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components41.default)(Text).attrs({
+var import_styled_components42 = __toESM(require("styled-components"));
+var import_jsx_runtime190 = require("react/jsx-runtime");
+var StyledMenuItemLabel = import_styled_components42.default.span``;
+var StyledMenuItemDescription = (0, import_styled_components42.default)(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-var import_jsx_runtime189 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components42.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var import_jsx_runtime191 = require("react/jsx-runtime");
+var SubMenuContent = (0, import_styled_components43.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
   width: 298px;
 
@@ -7673,10 +7798,10 @@ var SubMenuContent = (0, import_styled_components42.default)(import_react_dropdo
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components42.default.div`
+var StyledMobileSubMenuItems = import_styled_components43.default.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components42.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components43.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -7687,11 +7812,11 @@ var StyledSubTrigger = (0, import_styled_components42.default)(import_react_drop
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger2 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
-  return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -7703,15 +7828,15 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = (0, import_react29.useState)(false);
-  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards24.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(MenuItemDescription, { children: description }) : null
+  const [isExpanded, setIsExpanded] = (0, import_react31.useState)(false);
+  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemLabel, { children: label }),
+      (0, import_type_guards25.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(SubMenuContent, { children }) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
       SubMenuTrigger,
       {
         ...props,
@@ -7720,28 +7845,28 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(MenuItemDescription, { children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime190 = require("react/jsx-runtime");
-var MenuItem = (0, import_react30.forwardRef)(
+var import_jsx_runtime192 = require("react/jsx-runtime");
+var MenuItem = (0, import_react32.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
           MenuItemButton,
           {
             ...props,
@@ -7757,10 +7882,10 @@ MenuItem.displayName = "MenuItem";
 
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime191 = require("react/jsx-runtime");
+var import_jsx_runtime193 = require("react/jsx-runtime");
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuLabel, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -7768,11 +7893,11 @@ MenuRadioGroup.displayName = "MenuRadioGroup";
 
 // src/components/Menu/RadioMenuItem.tsx
 var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_jsx_runtime194 = require("react/jsx-runtime");
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+  indicator = /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
     Icon,
     {
       size: "sm",
@@ -7782,17 +7907,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
     import_react_dropdown_menu6.DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -7802,9 +7927,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime193 = require("react/jsx-runtime");
+var import_jsx_runtime195 = require("react/jsx-runtime");
 var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
+  return checked ? /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(
     "svg",
     {
       ...props,
@@ -7814,14 +7939,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
           "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__ */ (0, import_jsx_runtime193.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
           "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",
@@ -7830,7 +7955,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(
     "svg",
     {
       ...props,
@@ -7840,14 +7965,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
           "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__ */ (0, import_jsx_runtime193.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
           "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",
@@ -7864,18 +7989,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
     import_react_dropdown_menu7.DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -7884,40 +8009,40 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-var import_react34 = require("react");
-var import_styled_components48 = __toESM(require("styled-components"));
+var import_react36 = require("react");
+var import_styled_components49 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_type_guards27 = require("@wistia/type-guards");
+var import_type_guards28 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
-var import_styled_components45 = __toESM(require("styled-components"));
+var import_styled_components46 = __toESM(require("styled-components"));
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 
 // src/components/Modal/ModalCloseButton.tsx
-var import_styled_components43 = __toESM(require("styled-components"));
+var import_styled_components44 = __toESM(require("styled-components"));
 var import_react_dialog = require("@radix-ui/react-dialog");
-var import_jsx_runtime194 = require("react/jsx-runtime");
-var CloseButton = (0, import_styled_components43.default)(import_react_dialog.Close)`
+var import_jsx_runtime196 = require("react/jsx-runtime");
+var CloseButton = (0, import_styled_components44.default)(import_react_dialog.Close)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(Icon, { type: "close" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components44 = __toESM(require("styled-components"));
-var import_type_guards25 = require("@wistia/type-guards");
-var import_jsx_runtime195 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components44.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components44.default.div({
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_type_guards26 = require("@wistia/type-guards");
+var import_jsx_runtime197 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components45.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components45.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7926,17 +8051,17 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = (0, import_type_guards25.isNotNil)(text) ? text : children;
+  const accessibleText = (0, import_type_guards26.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Modal/ModalHeader.tsx
-var import_jsx_runtime196 = require("react/jsx-runtime");
-var Header = import_styled_components45.default.header`
+var import_jsx_runtime198 = require("react/jsx-runtime");
+var Header = import_styled_components46.default.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -7948,7 +8073,7 @@ var Header = import_styled_components45.default.header`
     margin-top: 0;
   }
 `;
-var Title = (0, import_styled_components45.default)(import_react_dialog2.Title)`
+var Title = (0, import_styled_components46.default)(import_react_dialog2.Title)`
   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);
@@ -7960,28 +8085,28 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleWrapper = hideTitle ? ScreenReaderOnly : Title;
-  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(Header, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(TitleWrapper, { children: title }),
-    hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(ModalCloseButton, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsxs)(Header, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(TitleWrapper, { children: title }),
+    hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_react32 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
+var import_react34 = require("react");
+var import_styled_components47 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-var import_react31 = require("react");
-var import_type_guards26 = require("@wistia/type-guards");
+var import_react33 = require("react");
+var import_type_guards27 = require("@wistia/type-guards");
 var useFocusRestore = () => {
-  const previouslyFocusedRef = (0, import_react31.useRef)(null);
-  (0, import_react31.useEffect)(() => {
+  const previouslyFocusedRef = (0, import_react33.useRef)(null);
+  (0, import_react33.useEffect)(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards26.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards27.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -7991,8 +8116,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_jsx_runtime197 = require("react/jsx-runtime");
-var StyledModalContent = (0, import_styled_components46.default)(import_react_dialog3.Content)`
+var import_jsx_runtime199 = require("react/jsx-runtime");
+var StyledModalContent = (0, import_styled_components47.default)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -8032,10 +8157,10 @@ var StyledModalContent = (0, import_styled_components46.default)(import_react_di
     }
   }
 `;
-var ModalContent = (0, import_react32.forwardRef)(
+var ModalContent = (0, import_react34.forwardRef)(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
       StyledModalContent,
       {
         ref,
@@ -8049,9 +8174,9 @@ var ModalContent = (0, import_react32.forwardRef)(
 );
 
 // src/private/components/Backdrop/Backdrop.tsx
-var import_react33 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_jsx_runtime198 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_jsx_runtime200 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -8064,7 +8189,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = import_styled_components47.default.div`
+var BackdropComponent = import_styled_components48.default.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -8087,8 +8212,8 @@ var BackdropComponent = import_styled_components47.default.div`
     }
   }
 `;
-var Backdrop = (0, import_react33.forwardRef)(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+var Backdrop = (0, import_react35.forwardRef)(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
     BackdropComponent,
     {
       ref,
@@ -8102,13 +8227,13 @@ var Backdrop = (0, import_react33.forwardRef)(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime199 = require("react/jsx-runtime");
-var ModalBody = import_styled_components48.default.div`
+var import_jsx_runtime201 = require("react/jsx-runtime");
+var ModalBody = import_styled_components49.default.div`
   flex-direction: column;
   display: flex;
   order: 2;
 `;
-var Modal = (0, import_react34.forwardRef)(
+var Modal = (0, import_react36.forwardRef)(
   ({
     children,
     fullHeight = false,
@@ -8121,25 +8246,25 @@ var Modal = (0, import_react34.forwardRef)(
     width,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards27.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards28.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(import_react_dialog4.Portal, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(Backdrop, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(import_react_dialog4.Portal, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Backdrop, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
             ModalContent,
             {
               ref,
               "aria-describedby": void 0,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards27.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards28.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -8149,8 +8274,8 @@ var Modal = (0, import_react34.forwardRef)(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(ModalBody, { children }),
-                /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ModalBody, { children }),
+                /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -8169,16 +8294,16 @@ var Modal = (0, import_react34.forwardRef)(
 Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
-var import_react35 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime200 = require("react/jsx-runtime");
-var StyledLabelWrapper2 = import_styled_components49.default.div`
+var import_react37 = require("react");
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_type_guards29 = require("@wistia/type-guards");
+var import_jsx_runtime202 = require("react/jsx-runtime");
+var StyledLabelWrapper2 = import_styled_components50.default.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = import_styled_components49.default.input`
+var StyledRadio = import_styled_components50.default.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -8204,11 +8329,11 @@ var StyledRadio = import_styled_components49.default.input`
     transform: scale(1);
   }
 `;
-var disabledStyle2 = import_styled_components49.css`
+var disabledStyle2 = import_styled_components50.css`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorStyle = import_styled_components49.css`
+var errorStyle = import_styled_components50.css`
   /* TODO Lamp to design error state */
   &:hover,
   &:focus,
@@ -8216,11 +8341,11 @@ var errorStyle = import_styled_components49.css`
     border-color: transparent !important;
   }
 `;
-var defaultHoverStyle = import_styled_components49.css`
+var defaultHoverStyle = import_styled_components50.css`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = import_styled_components49.default.div`
+var StyledRadioWrapper = import_styled_components50.default.div`
   align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
@@ -8243,7 +8368,7 @@ var StyledRadioWrapper = import_styled_components49.default.div`
 
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = (0, import_react35.forwardRef)(
+var Radio = (0, import_react37.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -8256,15 +8381,15 @@ var Radio = (0, import_react35.forwardRef)(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = (0, import_react35.useId)();
-    const computedId = (0, import_type_guards28.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+    const generatedId = (0, import_react37.useId)();
+    const computedId = (0, import_type_guards29.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
       StyledRadioWrapper,
       {
         "aria-invalid": otherProps["aria-invalid"],
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
             StyledRadio,
             {
               ref,
@@ -8279,8 +8404,8 @@ var Radio = (0, import_react35.forwardRef)(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
               Label,
               {
                 disabled,
@@ -8289,7 +8414,7 @@ var Radio = (0, import_react35.forwardRef)(
                 children: label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(LabelDescription, { children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -8299,11 +8424,11 @@ var Radio = (0, import_react35.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
-var import_react36 = require("react");
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
-var import_jsx_runtime201 = require("react/jsx-runtime");
-var TagLabel = import_styled_components50.default.a`
+var import_react38 = require("react");
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_type_guards30 = require("@wistia/type-guards");
+var import_jsx_runtime203 = require("react/jsx-runtime");
+var TagLabel = import_styled_components51.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -8331,14 +8456,14 @@ var TagLabel = import_styled_components50.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components50.default.div`
+var TagDivider = import_styled_components51.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components50.default.button`
+var StyledRemoveButton = import_styled_components51.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -8366,7 +8491,7 @@ var StyledRemoveButton = import_styled_components50.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components50.default.div`
+var StyledTag = import_styled_components51.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -8375,47 +8500,47 @@ var StyledTag = import_styled_components50.default.div`
   overflow: hidden;
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards29.isNil)(onClickRemove)) {
+  if ((0, import_type_guards30.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards29.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards30.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(import_jsx_runtime201.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(import_jsx_runtime203.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = (0, import_react36.forwardRef)(
+var Tag = (0, import_react38.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = (0, import_type_guards29.isNotNil)(href) && (0, import_type_guards29.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
+    const labelProps = (0, import_type_guards30.isNotNil)(href) && (0, import_type_guards30.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
             TagLabel,
             {
               ...labelProps,
@@ -8423,7 +8548,7 @@ var Tag = (0, import_react36.forwardRef)(
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -8440,16 +8565,16 @@ Tag.displayName = "Tag";
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components51 = __toESM(require("styled-components"));
-var import_jsx_runtime202 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components51.css`
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_jsx_runtime204 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components52.css`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
   --tooltip-font-weight: var(--wui-typography-label-4-weight);
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = (0, import_styled_components51.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components52.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8507,14 +8632,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(
           StyledContent,
           {
             $compact: compact,
@@ -8522,7 +8647,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8531,7 +8656,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("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__ */ (0, import_jsx_runtime204.jsx)("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
             ]
@@ -8544,26 +8669,26 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime203 = require("react/jsx-runtime");
+var import_styled_components53 = __toESM(require("styled-components"));
+var import_type_guards31 = require("@wistia/type-guards");
+var import_jsx_runtime205 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("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__ */ (0, import_jsx_runtime205.jsx)("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__ */ (0, import_jsx_runtime203.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("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__ */ (0, import_jsx_runtime205.jsx)("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" })
     }
   );
 };
@@ -8571,12 +8696,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("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__ */ (0, import_jsx_runtime205.jsx)("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" })
     }
   );
 };
@@ -8586,7 +8711,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components52.default.svg`
+var WistiaLogoComponent = import_styled_components53.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -8628,7 +8753,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -8638,63 +8763,16 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("title", { children: title }),
-        (0, import_type_guards30.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("title", { children: title }),
+        (0, import_type_guards31.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime203.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
-
-// src/components/Breadcrumbs/Breadcrumbs.tsx
-var import_styled_components53 = __toESM(require("styled-components"));
-var import_jsx_runtime204 = require("react/jsx-runtime");
-var StyledBreadcrumbs = import_styled_components53.default.nav`
-  display: flex;
-  align-items: center;
-  gap: var(--wui-space-01);
-
-  > svg:last-of-type {
-    display: none;
-  }
-`;
-var Breadcrumbs = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
-    StyledBreadcrumbs,
-    {
-      "aria-label": "Breadcrumbs",
-      ...props,
-      children
-    }
-  );
-};
-Breadcrumbs.displayName = "Breadcrumbs";
-
-// src/components/Breadcrumbs/Breadcrumb.tsx
-var import_jsx_runtime205 = require("react/jsx-runtime");
-var Breadcrumb = ({ icon, href, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(import_jsx_runtime205.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
-      Button,
-      {
-        href,
-        leftIcon: icon,
-        variant: "ghost",
-        children
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
-      Icon,
-      {
-        size: "sm",
-        type: "caret-right"
-      }
-    )
-  ] });
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -8750,6 +8828,7 @@ var Breadcrumb = ({ icon, href, children }) => {
   useAriaLive,
   useBoolean,
   useFormState,
+  useKey,
   useMq,
   useToast,
   useWindowSize