@wistia/ui 0.4.2-beta.95ff7209.e6cccb0 → 0.4.2-beta.9d135bdd.3003cc8

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.2-beta.95ff7209.e6cccb0
+ * @license @wistia/ui v0.4.2-beta.9d135bdd.3003cc8
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -90,6 +90,7 @@ __export(index_exports, {
   mq: () => mq,
   useActiveMq: () => useActiveMq,
   useAriaLive: () => useAriaLive,
+  useBoolean: () => useBoolean,
   useFormState: () => useFormState,
   useMq: () => useMq,
   useToast: () => useToast,
@@ -1556,11 +1557,21 @@ var mq = {
   xlAndDown
 };
 
+// src/hooks/useBoolean/useBoolean.ts
+var import_react3 = require("react");
+var useBoolean = (initialValue = false) => {
+  const [value, setValue] = (0, import_react3.useState)(initialValue);
+  const toggle = (0, import_react3.useCallback)(() => setValue((val) => !val), []);
+  const setTrue = (0, import_react3.useCallback)(() => setValue(true), []);
+  const setFalse = (0, import_react3.useCallback)(() => setValue(false), []);
+  return [value, toggle, setTrue, setFalse, setValue];
+};
+
 // src/hooks/useMq/useMq.ts
 var import_type_guards3 = require("@wistia/type-guards");
 
 // src/hooks/useWindowSize/useWindowSize.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_throttle_debounce = require("throttle-debounce");
 
 // src/private/helpers/isClient/isClient.ts
@@ -1568,11 +1579,11 @@ var isClient = () => typeof window !== "undefined" && typeof document !== "undef
 
 // src/hooks/useWindowSize/useWindowSize.ts
 var useWindowSize = (interval = 0) => {
-  const [dimensions, setDimensions] = (0, import_react3.useState)({
+  const [dimensions, setDimensions] = (0, import_react4.useState)({
     width: isClient() ? window.innerWidth : 0,
     height: isClient() ? window.innerHeight : 0
   });
-  (0, import_react3.useLayoutEffect)(() => {
+  (0, import_react4.useLayoutEffect)(() => {
     const handleResize = (0, import_throttle_debounce.debounce)(
       interval,
       () => setDimensions({
@@ -1624,11 +1635,11 @@ var useActiveMq = () => {
 };
 
 // src/hooks/useToast/useToast.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_sonner2 = require("sonner");
 
 // src/private/components/Toast/Toast.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
 var import_type_guards5 = require("@wistia/type-guards");
 
@@ -1849,8 +1860,8 @@ var StyledToast = import_styled_components13.default.div`
   }
 `;
 var Action = ({ actionButton }) => {
-  if ((0, import_type_guards5.isNotNil)(actionButton) && (0, import_react4.isValidElement)(actionButton)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ActionWrapper, { children: (0, import_react4.cloneElement)(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, {
       variant: "soft",
       // force Button variant
       size: "sm"
@@ -1886,7 +1897,7 @@ Toast.displayName = "Toast";
 // src/hooks/useToast/useToast.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var useToast = () => {
-  return (0, import_react5.useCallback)(
+  return (0, import_react6.useCallback)(
     ({ message, action, colorScheme, icon, position = "bottom-left", duration = 3e3 }) => {
       import_sonner2.toast.custom(
         () => {
@@ -1908,10 +1919,10 @@ var useToast = () => {
 };
 
 // src/hooks/useAriaLive/useAriaLive.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_type_guards6 = require("@wistia/type-guards");
 var useAriaLive = () => {
-  const context = (0, import_react6.useContext)(AriaLiveContext);
+  const context = (0, import_react7.useContext)(AriaLiveContext);
   if ((0, import_type_guards6.isNil)(context)) {
     throw new Error("useAriaLive must be used within an AriaLiveProvider");
   }
@@ -1919,11 +1930,11 @@ var useAriaLive = () => {
 };
 
 // src/components/ActionButton/ActionButton.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/components/Button/Button.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_styled_components18 = __toESM(require("styled-components"));
 var import_type_guards10 = require("@wistia/type-guards");
 
@@ -5290,13 +5301,13 @@ var iconMap = {
 
 // src/private/hooks/useResponsiveProp/useResponsiveProp.ts
 var import_type_guards7 = require("@wistia/type-guards");
-var import_react7 = require("react");
+var import_react8 = 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_react7.useMemo)(() => {
+  return (0, import_react8.useMemo)(() => {
     if ((0, import_type_guards7.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;
@@ -5363,7 +5374,7 @@ var Icon = ({
 Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_type_guards9 = require("@wistia/type-guards");
 var import_styled_components17 = __toESM(require("styled-components"));
 var import_react_router_dom = require("react-router-dom");
@@ -5391,7 +5402,7 @@ var StyledLink = import_styled_components17.default.a`
   color: var(--wui-color-text-link);
   text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
 `;
-var Link = (0, import_react8.forwardRef)(
+var Link = (0, import_react9.forwardRef)(
   ({
     beforeAction,
     children,
@@ -5527,7 +5538,7 @@ var ButtonContent = ({
     )
   ] });
 };
-var Button = (0, import_react9.forwardRef)(
+var Button = (0, import_react10.forwardRef)(
   ({
     children,
     forceState,
@@ -5700,7 +5711,7 @@ var StyledLabel = import_styled_components19.default.span`
   grid-row: 2;
   text-align: left;
 `;
-var ActionButton = (0, import_react10.forwardRef)(
+var ActionButton = (0, import_react11.forwardRef)(
   ({
     icon,
     colorScheme = "default",
@@ -5744,7 +5755,7 @@ var ActionButton = (0, import_react10.forwardRef)(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_type_guards12 = require("@wistia/type-guards");
 var import_styled_components21 = __toESM(require("styled-components"));
 
@@ -5875,7 +5886,7 @@ var Avatar = ({
   onImageLoad,
   ...otherProps
 }) => {
-  const [imageLoadState, setImageLoadState] = (0, import_react11.useState)(null);
+  const [imageLoadState, setImageLoadState] = (0, import_react12.useState)(null);
   const handleImageLoad = () => {
     setImageLoadState("loaded");
     onImageLoad?.("image");
@@ -5885,7 +5896,7 @@ var Avatar = ({
     onImageLoad?.("initials");
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
-  const avatarColor = (0, import_react11.useMemo)(() => chooseColorScheme(name), [name]);
+  const avatarColor = (0, import_react12.useMemo)(() => chooseColorScheme(name), [name]);
   const showInitials = (0, import_type_guards12.isNil)(imageUrl) || imageLoadState === "error";
   return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     AvatarWrapper,
@@ -5915,7 +5926,7 @@ var Avatar = ({
 Avatar.displayName = "Avatar";
 
 // src/components/Badge/Badge.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_styled_components22 = __toESM(require("styled-components"));
 var import_type_guards13 = require("@wistia/type-guards");
 var import_jsx_runtime166 = require("react/jsx-runtime");
@@ -5939,7 +5950,7 @@ var StyledBadge = import_styled_components22.default.div`
     width: 12px;
   }
 `;
-var Badge = (0, import_react12.forwardRef)(
+var Badge = (0, import_react13.forwardRef)(
   ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
     const hasIcon = (0, import_type_guards13.isNotNil)(icon);
     return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
@@ -5960,7 +5971,7 @@ var Badge = (0, import_react12.forwardRef)(
 Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_styled_components23 = __toESM(require("styled-components"));
 var import_type_guards14 = require("@wistia/type-guards");
 var import_jsx_runtime167 = require("react/jsx-runtime");
@@ -6027,13 +6038,13 @@ var BoxComponent = import_styled_components23.default.div`
 var wrapChildren = (children) => {
   if ((0, import_type_guards14.isNotNil)(children)) {
     if (typeof children === "object" && isDev) {
-      return import_react13.Children.map(children, (child) => {
+      return import_react14.Children.map(children, (child) => {
         if ((0, import_type_guards14.isNil)(child)) return null;
         const elementParams = {};
         if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
           elementParams.hasBoxParent = true;
         }
-        return (0, import_react13.cloneElement)(child, elementParams);
+        return (0, import_react14.cloneElement)(child, elementParams);
       });
     }
     return children;
@@ -6194,7 +6205,7 @@ var Card = ({
 Card.displayName = "Card";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react15 = require("react");
+var import_react16 = 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");
@@ -6203,7 +6214,7 @@ var import_type_guards17 = require("@wistia/type-guards");
 var import_styled_components27 = __toESM(require("styled-components"));
 
 // src/components/Heading/Heading.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_styled_components26 = __toESM(require("styled-components"));
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -6297,7 +6308,7 @@ var variantElementMap = {
   heading5: "h5",
   heading6: "h6"
 };
-var HeadingComponent = (0, import_react14.forwardRef)(
+var HeadingComponent = (0, import_react15.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -6478,7 +6489,7 @@ var StyledLabelWrapper = import_styled_components29.default.div`
   flex-direction: column;
   margin-left: var(--wui-space-02);
 `;
-var Checkbox = (0, import_react15.forwardRef)(
+var Checkbox = (0, import_react16.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -6492,7 +6503,7 @@ var Checkbox = (0, import_react15.forwardRef)(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = (0, import_react15.useId)();
+    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)(
@@ -6584,12 +6595,12 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_styled_components32 = __toESM(require("styled-components"));
 var import_type_guards18 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_styled_components31 = __toESM(require("styled-components"));
 var import_jsx_runtime175 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT2 = "div";
@@ -6598,7 +6609,7 @@ var StyledStack = import_styled_components31.default.div`
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
 `;
-var StackComponent = (0, import_react16.forwardRef)(
+var StackComponent = (0, import_react17.forwardRef)(
   ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
@@ -6625,18 +6636,18 @@ var StyledForm = import_styled_components32.default.form`
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = (0, import_react17.createContext)({
+var FormContext = (0, import_react18.createContext)({
   values: {},
   errors: {},
   hasSubmitted: false,
   formId: ""
 });
 var FormComponent = ({ children, action, values = {}, validate, fullWidth = false, ...props }, forwardedRef) => {
-  const [errors, setErrors] = (0, import_react17.useState)({});
-  const [hasSubmitted, setHasSubmitted] = (0, import_react17.useState)(false);
-  const innerRef = (0, import_react17.useRef)();
+  const [errors, setErrors] = (0, import_react18.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react18.useState)(false);
+  const innerRef = (0, import_react18.useRef)();
   const ref = forwardedRef ?? innerRef;
-  const autoId = (0, import_react17.useId)();
+  const autoId = (0, import_react18.useId)();
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
@@ -6678,7 +6689,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       void action(null);
     }
   };
-  const context = (0, import_react17.useMemo)(() => {
+  const context = (0, import_react18.useMemo)(() => {
     return {
       values,
       errors,
@@ -6706,15 +6717,15 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
   );
 };
 FormComponent.displayName = "Form";
-var Form = (0, import_react17.forwardRef)(FormComponent);
+var Form = (0, import_react18.forwardRef)(FormComponent);
 
 // src/components/Form/useFormState.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = (0, import_react18.useState)(initialData);
-  const [isPending, setIsPending] = (0, import_react18.useState)(false);
-  const [error, setError] = (0, import_react18.useState)(null);
-  const formAction = (0, import_react18.useCallback)(
+  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)(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -6745,15 +6756,15 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_type_guards19 = require("@wistia/type-guards");
 var import_jsx_runtime177 = 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);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = (0, import_react19.useRef)(null);
-  const { formId, errors, hasSubmitted } = (0, import_react19.useContext)(FormContext);
+  const ref = (0, import_react20.useRef)(null);
+  const { formId, errors, hasSubmitted } = (0, import_react20.useContext)(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
@@ -6783,12 +6794,12 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_styled_components35 = __toESM(require("styled-components"));
 var import_type_guards20 = require("@wistia/type-guards");
 
 // src/components/Text/Text.tsx
-var import_react20 = require("react");
+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`
@@ -6930,7 +6941,7 @@ var StyledText = import_styled_components33.default.div`
     `}
 `;
 var DEFAULT_ELEMENT3 = "div";
-var TextComponent = (0, import_react20.forwardRef)(
+var TextComponent = (0, import_react21.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -6965,11 +6976,11 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
 var import_styled_components34 = __toESM(require("styled-components"));
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime179 = require("react/jsx-runtime");
 var StyledFieldset = import_styled_components34.default.fieldset`
   border: 0;
@@ -6978,7 +6989,7 @@ var StyledLegend = import_styled_components34.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
-  const ref = (0, import_react21.useRef)();
+  const ref = (0, import_react22.useRef)();
   return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
     Stack,
     {
@@ -7003,7 +7014,7 @@ FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
 var import_jsx_runtime180 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react22.createContext)(null);
+var CheckboxGroupContext = (0, import_react23.createContext)(null);
 var CheckboxGroup = ({
   children,
   name,
@@ -7011,7 +7022,7 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react22.useMemo)(() => {
+  const context = (0, import_react23.useMemo)(() => {
     return {
       name,
       onChange
@@ -7071,8 +7082,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = (0, import_react23.useContext)(FormContext);
-  const checkboxGroup = (0, import_react23.useContext)(CheckboxGroupContext);
+  const formState = (0, import_react24.useContext)(FormContext);
+  const checkboxGroup = (0, import_react24.useContext)(CheckboxGroupContext);
   const id = props.id ?? `${formState.formId}-${name}`;
   const isInlineLabel = children.type === Checkbox;
   const computedError = error ?? formState.errors[name];
@@ -7107,10 +7118,10 @@ var FormField = ({
       "aria-describedby": (0, import_type_guards20.isNotNil)(error) ? `${id}-error` : void 0
     };
   }
-  import_react23.Children.only(children);
+  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_react23.cloneElement)(children, childProps),
+    (0, import_react24.cloneElement)(children, childProps),
     (0, import_type_guards20.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
       ErrorMessages,
       {
@@ -7123,9 +7134,9 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime182 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react24.createContext)(null);
+var RadioGroupContext = (0, import_react25.createContext)(null);
 var RadioGroup = ({
   children,
   name,
@@ -7133,7 +7144,7 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react24.useMemo)(() => {
+  const context = (0, import_react25.useMemo)(() => {
     return {
       name,
       onChange
@@ -7144,7 +7155,7 @@ var RadioGroup = ({
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
-var import_react25 = require("react");
+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)`
@@ -7161,7 +7172,7 @@ var StyledButton2 = (0, import_styled_components36.default)(Button)`
   align-items: center;
   line-height: 1;
 `;
-var IconButton = (0, import_react25.forwardRef)(
+var IconButton = (0, import_react26.forwardRef)(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
     return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
@@ -7172,7 +7183,7 @@ var IconButton = (0, import_react25.forwardRef)(
         "aria-label": label,
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
-        children: (0, import_react25.cloneElement)(import_react25.Children.only(children), {
+        children: (0, import_react26.cloneElement)(import_react26.Children.only(children), {
           size: responsiveSize
         })
       }
@@ -7182,7 +7193,7 @@ var IconButton = (0, import_react25.forwardRef)(
 IconButton.displayName = "IconButton";
 
 // src/components/Input/Input.tsx
-var import_react26 = require("react");
+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");
@@ -7274,7 +7285,7 @@ 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);
 };
-var Input = (0, import_react26.forwardRef)(
+var Input = (0, import_react27.forwardRef)(
   ({
     fullWidth = false,
     monospace = false,
@@ -7284,21 +7295,21 @@ var Input = (0, import_react26.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react26.useRef)();
+    const internalRef = (0, import_react27.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_guards21.isNotNil)(leftIconToDisplay)) {
-      leftIconToDisplay = (0, import_react26.cloneElement)(leftIconToDisplay, {
+      leftIconToDisplay = (0, import_react27.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
     if ((0, import_type_guards21.isNotNil)(rightIconToDisplay)) {
-      rightIconToDisplay = (0, import_react26.cloneElement)(rightIconToDisplay, {
+      rightIconToDisplay = (0, import_react27.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
@@ -7518,13 +7529,13 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_styled_components42 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_type_guards24 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
-var import_react27 = require("react");
+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");
@@ -7596,7 +7607,7 @@ var StyledBadgeContainer = import_styled_components40.default.div`
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
+var MenuItemButton = (0, import_react28.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if ((0, import_type_guards23.isNotUndefined)(colorScheme)) {
@@ -7692,7 +7703,7 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = (0, import_react28.useState)(false);
+  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 }),
@@ -7720,10 +7731,10 @@ var SubMenu = ({
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-var import_react29 = require("react");
+var import_react30 = 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_react29.forwardRef)(
+var MenuItem = (0, import_react30.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
@@ -7873,7 +7884,7 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
 var import_styled_components48 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
 var import_type_guards27 = require("@wistia/type-guards");
@@ -7956,19 +7967,19 @@ var ModalHeader = ({
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_styled_components46 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_type_guards26 = require("@wistia/type-guards");
 var useFocusRestore = () => {
-  const previouslyFocusedRef = (0, import_react30.useRef)(null);
-  (0, import_react30.useEffect)(() => {
+  const previouslyFocusedRef = (0, import_react31.useRef)(null);
+  (0, import_react31.useEffect)(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     return () => {
       if ((0, import_type_guards26.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -8021,7 +8032,7 @@ var StyledModalContent = (0, import_styled_components46.default)(import_react_di
     }
   }
 `;
-var ModalContent = (0, import_react31.forwardRef)(
+var ModalContent = (0, import_react32.forwardRef)(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
@@ -8038,7 +8049,7 @@ var ModalContent = (0, import_react31.forwardRef)(
 );
 
 // src/private/components/Backdrop/Backdrop.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
 var import_jsx_runtime198 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
@@ -8076,7 +8087,7 @@ var BackdropComponent = import_styled_components47.default.div`
     }
   }
 `;
-var Backdrop = (0, import_react32.forwardRef)(
+var Backdrop = (0, import_react33.forwardRef)(
   ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
     BackdropComponent,
     {
@@ -8097,7 +8108,7 @@ var ModalBody = import_styled_components48.default.div`
   display: flex;
   order: 2;
 `;
-var Modal = (0, import_react33.forwardRef)(
+var Modal = (0, import_react34.forwardRef)(
   ({
     children,
     fullHeight = false,
@@ -8158,7 +8169,7 @@ var Modal = (0, import_react33.forwardRef)(
 Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
-var import_react34 = require("react");
+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");
@@ -8232,7 +8243,7 @@ var StyledRadioWrapper = import_styled_components49.default.div`
 
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = (0, import_react34.forwardRef)(
+var Radio = (0, import_react35.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -8245,7 +8256,7 @@ var Radio = (0, import_react34.forwardRef)(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = (0, import_react34.useId)();
+    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)(
       StyledRadioWrapper,
@@ -8288,7 +8299,7 @@ var Radio = (0, import_react34.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
-var import_react35 = require("react");
+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");
@@ -8394,7 +8405,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     )
   ] });
 };
-var Tag = (0, import_react35.forwardRef)(
+var Tag = (0, import_react36.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)(
@@ -8737,6 +8748,7 @@ var Breadcrumb = ({ icon, href, children }) => {
   mq,
   useActiveMq,
   useAriaLive,
+  useBoolean,
   useFormState,
   useMq,
   useToast,