@wistia/ui 0.10.10 → 0.10.11

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.10
+ * @license @wistia/ui v0.10.11
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7468,7 +7468,7 @@ var StyledActionButton = (0, import_styled_components22.default)(Button)`
   }
 
   &:hover,
-  :focus-visible {
+  &:focus-visible {
     --wui-color-text: var(--wui-color-text-button);
 
     ${({ $hoverColorScheme }) => getColorScheme($hoverColorScheme)};
@@ -7976,24 +7976,25 @@ var getFlexStyle = (flexMode) => {
   }
 };
 var StyledBoxComponent = import_styled_components27.default.div`
+  /* properties meant for Box parent (flex container) */
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
-  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
   display: ${({ $inline }) => (0, import_type_guards20.isNotNil)($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => (0, import_type_guards20.isNotNil)($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
+  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+  height: ${({ $height }) => $height ?? null};
+  width: ${({ $width }) => $width ?? null};
   ${({ $fillBox: fill }) => getFillStyle2(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
   ${({ $flexMode }) => getFlexStyle($flexMode)};
   ${({ $gap }) => getGapStyle($gap)};
-  height: ${({ $height }) => $height ?? null};
-  width: ${({ $width }) => $width ?? null};
 
-  /* Box children styles */
+  /* properties meant for Box children (flex items) */
+  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
+  flex-basis: ${({ $basis }) => (0, import_type_guards20.isNotNil)($basis) ? $basis : null};
   flex-grow: ${({ $grow }) => (0, import_type_guards20.isNotNil)($grow) ? $grow : null};
   flex-shrink: ${({ $shrink }) => (0, import_type_guards20.isNotNil)($shrink) ? $shrink : null};
-  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
-  justify-content: ${({ $justifyContent }) => $justifyContent};
   order: ${({ $order }) => (0, import_type_guards20.isNotNil)($order) ? $order : null};
 `;
 var DEFAULT_ELEMENT = "div";
@@ -8880,9 +8881,9 @@ var Center = (0, import_react33.forwardRef)(
 Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react37 = require("react");
-var import_styled_components42 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
+var import_react38 = require("react");
+var import_styled_components43 = __toESM(require("styled-components"));
+var import_type_guards30 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_styled_components39 = __toESM(require("styled-components"));
@@ -9001,7 +9002,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
+var import_type_guards29 = require("@wistia/type-guards");
 
 // src/components/FormGroup/FormGroup.tsx
 var import_styled_components41 = __toESM(require("styled-components"));
@@ -9071,11 +9073,132 @@ var FormGroup = ({ children, label, ...props }) => {
 };
 FormGroup.displayName = "FormGroup";
 
-// src/components/FormGroup/CheckboxGroup.tsx
+// src/components/Form/Form.tsx
+var import_react36 = require("react");
+var import_styled_components42 = __toESM(require("styled-components"));
+var import_type_guards28 = require("@wistia/type-guards");
+
+// src/components/Form/serializeFormData.tsx
+var ARRAY_SUFFIX = "[]";
+var serializeFormData = (formData) => {
+  const data = {};
+  formData.forEach((value, key) => {
+    if (key.endsWith(ARRAY_SUFFIX)) {
+      const newKey = key.slice(0, -ARRAY_SUFFIX.length);
+      data[newKey] = formData.getAll(key);
+    } else {
+      data[key] = value;
+    }
+  });
+  return data;
+};
+
+// src/components/Form/Form.tsx
 var import_jsx_runtime216 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react36.createContext)(null);
+var StyledForm = import_styled_components42.default.form`
+  --form-default-width: 690px;
+
+  max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
+`;
+var FormContext = (0, import_react36.createContext)({
+  values: {},
+  errors: {},
+  hasSubmitted: false,
+  formId: "NO_FORM",
+  labelPosition: "block"
+});
+var FormComponent = ({
+  children,
+  action,
+  values = {},
+  labelPosition = "block",
+  validate,
+  fullWidth = false,
+  ...props
+}, forwardedRef) => {
+  const [errors, setErrors] = (0, import_react36.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react36.useState)(false);
+  const innerRef = (0, import_react36.useRef)();
+  const ref = forwardedRef ?? innerRef;
+  const autoId = (0, import_react36.useId)();
+  const id = props.id ?? autoId;
+  const handleValidate = (nextFormData) => {
+    const nextData = serializeFormData(nextFormData);
+    if ((0, import_type_guards28.isUndefined)(validate)) {
+      return {};
+    }
+    return validate(nextData);
+  };
+  const handleBlur2 = (event) => {
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+    const formData = new FormData(event.currentTarget);
+    if ((0, import_type_guards28.isNotUndefined)(validate)) {
+      handleValidate(formData);
+    }
+  };
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const nextErrors = handleValidate(formData);
+    const isValid = Object.keys(nextErrors).length === 0;
+    setErrors(nextErrors);
+    setHasSubmitted(true);
+    if (isValid && props.onSubmit) {
+      props.onSubmit(event);
+    }
+    if (isValid && action) {
+      void action(formData);
+    }
+  };
+  const handleReset = (event) => {
+    setErrors({});
+    setHasSubmitted(false);
+    if (props.onReset) {
+      props.onReset(event);
+    }
+    if (action) {
+      void action(null);
+    }
+  };
+  const context = (0, import_react36.useMemo)(() => {
+    return {
+      values,
+      errors,
+      hasSubmitted,
+      formId: id,
+      labelPosition
+    };
+  }, [labelPosition, values, errors, id, hasSubmitted]);
+  return (
+    // @ts-expect-error - generic context providers are a giant pain
+    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+      Stack,
+      {
+        ...props,
+        ref,
+        $fullWidth: fullWidth,
+        alignItems: fullWidth ? "stretch" : "flex-start",
+        as: StyledForm,
+        gap: "space-05",
+        id,
+        onBlur: handleBlur2,
+        onReset: handleReset,
+        onSubmit: handleSubmit,
+        children
+      }
+    ) })
+  );
+};
+FormComponent.displayName = "Form";
+var Form = (0, import_react36.forwardRef)(FormComponent);
+
+// src/components/FormGroup/CheckboxGroup.tsx
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react37.createContext)(null);
 var useCheckboxGroup = () => {
-  return (0, import_react36.useContext)(CheckboxGroupContext);
+  return (0, import_react37.useContext)(CheckboxGroupContext);
 };
 var CheckboxGroup = ({
   children,
@@ -9084,19 +9207,22 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react36.useMemo)(() => {
+  const formState = (0, import_react37.useContext)(FormContext);
+  const derivedValue = (0, import_type_guards29.isArray)(formState.values[name]) ? formState.values[name] : value;
+  const context = (0, import_react37.useMemo)(() => {
     return {
-      name,
-      onChange
+      name: `${name}[]`,
+      onChange,
+      value: derivedValue
     };
-  }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(FormGroup, { ...props, children }) });
+  }, [name, derivedValue, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime217 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -9104,7 +9230,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime218.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",
@@ -9113,7 +9239,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components42.css`
+var sizeSmall = import_styled_components43.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -9124,7 +9250,7 @@ var sizeSmall = import_styled_components42.css`
     height: 7px;
   }
 `;
-var sizeMedium = import_styled_components42.css`
+var sizeMedium = import_styled_components43.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -9135,7 +9261,7 @@ var sizeMedium = import_styled_components42.css`
     height: 9px;
   }
 `;
-var sizeLarge = import_styled_components42.css`
+var sizeLarge = import_styled_components43.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -9151,14 +9277,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components42.default.div`
+var StyledCheckboxWrapper = import_styled_components43.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components42.default.div`
+var StyledCheckboxInput = import_styled_components43.default.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -9180,7 +9306,7 @@ var StyledCheckboxInput = import_styled_components42.default.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components42.default.input`
+var StyledHiddenCheckboxInput = import_styled_components43.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -9194,7 +9320,7 @@ var StyledHiddenCheckboxInput = import_styled_components42.default.input`
     display: block;
   }
 `;
-var Checkbox = (0, import_react37.forwardRef)(
+var Checkbox = (0, import_react38.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -9209,20 +9335,22 @@ var Checkbox = (0, import_react37.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react37.useId)();
-    const computedId = (0, import_type_guards28.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    const generatedId = (0, import_react38.useId)();
+    const computedId = (0, import_type_guards30.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
     const checkboxGroupContext = useCheckboxGroup();
     const contextName = checkboxGroupContext?.name;
     const contextOnChange = checkboxGroupContext?.onChange;
+    const contextValue = checkboxGroupContext?.value;
     const checkboxName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+    const defaultChecked = (0, import_type_guards30.isNotUndefined)(value) && contextValue ? contextValue.includes(value) : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
         StyledHiddenCheckboxInput,
         {
           ...props,
           ref,
-          checked,
+          ...(0, import_type_guards30.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked },
           disabled,
           id: computedId,
           name: checkboxName,
@@ -9232,16 +9360,16 @@ var Checkbox = (0, import_react37.forwardRef)(
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(CheckIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(CheckIcon, {})
             }
           ),
           description,
@@ -9257,14 +9385,14 @@ var Checkbox = (0, import_react37.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-var import_react38 = require("react");
+var import_react39 = require("react");
 var isClickableElement = (element) => {
   if (!element) return false;
   const el = element;
   return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
 };
 var ClickRegion = ({ children, targetRef }) => {
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -9272,7 +9400,7 @@ var ClickRegion = ({ children, targetRef }) => {
     } else {
     }
   }, [targetRef]);
-  const handleClick = (0, import_react38.useCallback)(
+  const handleClick = (0, import_react39.useCallback)(
     (event) => {
       const node = targetRef.current;
       if (event.target === node) {
@@ -9292,7 +9420,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return (0, import_react38.cloneElement)(import_react38.Children.only(children), {
+  return (0, import_react39.cloneElement)(import_react39.Children.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -9301,10 +9429,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
-var import_type_guards29 = require("@wistia/type-guards");
-var import_styled_components43 = __toESM(require("styled-components"));
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components43.default)(import_react_collapsible.Root)`
+var import_type_guards31 = require("@wistia/type-guards");
+var import_styled_components44 = __toESM(require("styled-components"));
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components44.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -9318,18 +9446,18 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...(0, import_type_guards29.isNotNil)(onOpenChange) && (0, import_type_guards29.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards31.isNotNil)(onOpenChange) && (0, import_type_guards31.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_styled_components44 = __toESM(require("styled-components"));
-var import_jsx_runtime219 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components44.default)(import_react_collapsible2.Trigger)`
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_jsx_runtime220 = require("react/jsx-runtime");
+var StyledTrigger = (0, import_styled_components45.default)(import_react_collapsible2.Trigger)`
   [data-wui-collapsible-icon] {
     transition: transform var(--wui-motion-duration-03) ease-in-out;
   }
@@ -9351,12 +9479,12 @@ var StyledTrigger = (0, import_styled_components44.default)(import_react_collaps
   }
 `;
 var CollapsibleTrigger = ({ children }) => {
-  import_react39.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(StyledTrigger, { asChild: true, children });
+  import_react40.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(StyledTrigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleTriggerIcon.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
+var import_jsx_runtime221 = require("react/jsx-runtime");
 var iconRotationMap = {
   "caret-left-strong": "-90",
   "caret-left": "-90",
@@ -9365,7 +9493,7 @@ var iconRotationMap = {
   plus: "45"
 };
 var CollapsibleTriggerIcon = ({ type, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
     Icon,
     {
       ...props,
@@ -9378,16 +9506,16 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
 CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components45 = __toESM(require("styled-components"));
+var import_styled_components46 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
-var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime221 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components45.default.div`
+var import_type_guards32 = require("@wistia/type-guards");
+var import_jsx_runtime222 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components46.default.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if ((0, import_type_guards30.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+  if ((0, import_type_guards32.isNotUndefined)(clamp)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
       ClampedContent,
       {
         $clamp: clamp,
@@ -9396,7 +9524,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_jsx_runtime221.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(import_jsx_runtime222.Fragment, { children: [
     children,
     " "
   ] }) });
@@ -9404,16 +9532,16 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/Combobox/Combobox.tsx
 var Ariakit = __toESM(require("@ariakit/react"));
-var import_react41 = require("react");
+var import_react42 = require("react");
 var import_match_sorter = require("match-sorter");
-var import_styled_components48 = __toESM(require("styled-components"));
+var import_styled_components49 = __toESM(require("styled-components"));
 
 // src/components/Tag/Tag.tsx
-var import_react40 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_type_guards31 = require("@wistia/type-guards");
-var import_jsx_runtime222 = require("react/jsx-runtime");
-var TagLabel = import_styled_components46.default.a`
+var import_react41 = require("react");
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_type_guards33 = require("@wistia/type-guards");
+var import_jsx_runtime223 = require("react/jsx-runtime");
+var TagLabel = import_styled_components47.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -9431,31 +9559,31 @@ var TagLabel = import_styled_components46.default.a`
     width: 12px;
   }
 
-  :not(:only-child) {
+  &:focus-visible {
+    outline: unset;
+    box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
+  }
+
+  &:not(:only-child) {
     padding-right: var(--wui-space-01);
   }
 
-  :is(a):hover {
+  &:is(a):hover {
     background: var(--wui-color-bg-surface-secondary-hover);
   }
 
-  :is(a):active {
+  &:is(a):active {
     background: var(--wui-color-bg-surface-secondary-active);
   }
-
-  :focus-visible {
-    outline: unset;
-    box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
-  }
 `;
-var TagDivider = import_styled_components46.default.div`
+var TagDivider = import_styled_components47.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components46.default.button`
+var StyledRemoveButton = import_styled_components47.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -9470,20 +9598,20 @@ var StyledRemoveButton = import_styled_components46.default.button`
     fill: var(--wui-color-icon);
   }
 
-  :hover {
+  &:hover {
     background: var(--wui-color-bg-surface-secondary-hover);
   }
 
-  :active {
+  &:active {
     background: var(--wui-color-bg-surface-secondary-active);
   }
 
-  :focus-visible {
+  &:focus-visible {
     outline: unset;
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components46.default.div`
+var StyledTag = import_styled_components47.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -9496,48 +9624,48 @@ var StyledTag = import_styled_components46.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards31.isNil)(onClickRemove)) {
+  if ((0, import_type_guards33.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards31.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards33.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(import_jsx_runtime222.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(import_jsx_runtime223.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = (0, import_react40.forwardRef)(
+var Tag = (0, import_react41.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
-    const hasIcon = (0, import_type_guards31.isNotNil)(icon);
-    const labelProps = (0, import_type_guards31.isNotNil)(href) && (0, import_type_guards31.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(
+    const hasIcon = (0, import_type_guards33.isNotNil)(icon);
+    const labelProps = (0, import_type_guards33.isNotNil)(href) && (0, import_type_guards33.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
             TagLabel,
             {
               ...labelProps,
@@ -9548,7 +9676,7 @@ var Tag = (0, import_react40.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -9564,8 +9692,8 @@ var Tag = (0, import_react40.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/css/inputCss.ts
-var import_styled_components47 = require("styled-components");
-var inputCss = import_styled_components47.css`
+var import_styled_components48 = require("styled-components");
+var inputCss = import_styled_components48.css`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -9591,8 +9719,8 @@ var inputCss = import_styled_components47.css`
 `;
 
 // src/components/Combobox/Combobox.tsx
-var import_jsx_runtime223 = require("react/jsx-runtime");
-var ComboboxWapper = import_styled_components48.default.div`
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var ComboboxWapper = import_styled_components49.default.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -9641,7 +9769,7 @@ var ComboboxWapper = import_styled_components48.default.div`
     }
   }
 `;
-var ComboboxInput = (0, import_styled_components48.default)(Ariakit.Combobox)`
+var ComboboxInput = (0, import_styled_components49.default)(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -9656,7 +9784,7 @@ var ComboboxInput = (0, import_styled_components48.default)(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover = (0, import_styled_components48.default)(Ariakit.Popover)`
+var ComboboxPopover = (0, import_styled_components49.default)(Ariakit.Popover)`
   --wui-combobox-content-border: var(--wui-color-border);
   --wui-combobox-content-bg: var(--wui-color-bg-surface);
   --wui-combobox-content-border-radius: var(--wui-border-radius-02);
@@ -9681,7 +9809,7 @@ var ComboboxPopover = (0, import_styled_components48.default)(Ariakit.Popover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = (0, import_styled_components48.default)(Ariakit.ComboboxItem)`
+var ComboboxItem2 = (0, import_styled_components49.default)(Ariakit.ComboboxItem)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -9706,12 +9834,12 @@ var ComboboxItem2 = (0, import_styled_components48.default)(Ariakit.ComboboxItem
     background-color: transparent;
   }
 `;
-var NoResults = import_styled_components48.default.div`
+var NoResults = import_styled_components49.default.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
 var ComboboxOption = ({ value, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
     ComboboxItem2,
     {
       className: "combobox-item",
@@ -9723,8 +9851,8 @@ var ComboboxOption = ({ value, children }) => {
 };
 var extractOptions = (children) => {
   const options = {};
-  import_react41.Children.forEach(children, (child) => {
-    if ((0, import_react41.isValidElement)(child) && "value" in child.props && "children" in child.props) {
+  import_react42.Children.forEach(children, (child) => {
+    if ((0, import_react42.isValidElement)(child) && "value" in child.props && "children" in child.props) {
       options[child.props.value] = child.props.children ?? child.props.value;
     }
   });
@@ -9739,11 +9867,11 @@ var Combobox2 = ({
   children,
   fullWidth = true
 }) => {
-  const [isPending, startTransition] = (0, import_react41.useTransition)();
-  const [wrapperWidth, setWrapperWidth] = (0, import_react41.useState)("auto");
-  const comboboxWrapperRef = (0, import_react41.useRef)(null);
-  const options = (0, import_react41.useMemo)(() => extractOptions(children), [children]);
-  (0, import_react41.useEffect)(() => {
+  const [isPending, startTransition] = (0, import_react42.useTransition)();
+  const [wrapperWidth, setWrapperWidth] = (0, import_react42.useState)("auto");
+  const comboboxWrapperRef = (0, import_react42.useRef)(null);
+  const options = (0, import_react42.useMemo)(() => extractOptions(children), [children]);
+  (0, import_react42.useEffect)(() => {
     const comboboxWrapper = comboboxWrapperRef.current;
     if (comboboxWrapper) {
       const updateWidthVariable = () => {
@@ -9761,10 +9889,10 @@ var Combobox2 = ({
   const handleRemoveValue = (valueToRemove) => {
     onChange(value.filter((val) => val !== valueToRemove));
   };
-  const matches = (0, import_react41.useMemo)(() => {
+  const matches = (0, import_react42.useMemo)(() => {
     return (0, import_match_sorter.matchSorter)(Object.keys(options), searchValue);
   }, [options, searchValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
     Ariakit.ComboboxProvider,
     {
       selectedValue: value,
@@ -9775,13 +9903,13 @@ var Combobox2 = ({
         });
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
           ComboboxWapper,
           {
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+              value.map((selectedValue) => /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
                 Tag,
                 {
                   href: "https://example.com",
@@ -9791,11 +9919,11 @@ var Combobox2 = ({
                 },
                 selectedValue
               )),
-              /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(ComboboxInput, { placeholder })
+              /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(ComboboxInput, { placeholder })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
           ComboboxPopover,
           {
             "aria-busy": isPending,
@@ -9805,14 +9933,14 @@ var Combobox2 = ({
               width: wrapperWidth
             },
             children: [
-              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+              matches.map((match) => /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
                 ComboboxItem2,
                 {
                   className: "combobox-item",
                   focusOnHover: true,
                   value: match,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
                       Icon,
                       {
                         size: "sm",
@@ -9827,7 +9955,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -9837,11 +9965,11 @@ var Combobox2 = ({
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_react42 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_type_guards32 = require("@wistia/type-guards");
-var import_jsx_runtime224 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components49.default.div`
+var import_react43 = require("react");
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_type_guards34 = require("@wistia/type-guards");
+var import_jsx_runtime225 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components50.default.div`
   display: grid;
   grid-template-areas: 'label slot' 'value value';
   grid-template-rows: auto auto;
@@ -9896,7 +10024,7 @@ var StyledDataCard = import_styled_components49.default.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = import_styled_components49.keyframes`
+var shimmer = import_styled_components50.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -9904,7 +10032,7 @@ var shimmer = import_styled_components49.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components49.default.div`
+var LoadingBackground = import_styled_components50.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -9915,27 +10043,27 @@ var LoadingBackground = import_styled_components49.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components49.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components50.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components49.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components50.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components49.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components50.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components49.default)(Heading)`
+var StyledValue = (0, import_styled_components50.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components49.default.div`
+var StyledSlot = import_styled_components50.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components49.default.div`
+var StyledDataCardTrendContainer = import_styled_components50.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -9948,34 +10076,34 @@ var DataCardInner = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards32.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards32.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards34.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards34.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
-var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -9983,18 +10111,18 @@ var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
   }
 );
 var DataCard = (props) => {
-  const ref = (0, import_react42.useRef)(null);
-  if ((0, import_type_guards32.isNotNil)(props.href) || (0, import_type_guards32.isNotNil)(props.onClick)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+  const ref = (0, import_react43.useRef)(null);
+  if ((0, import_type_guards34.isNotNil)(props.href) || (0, import_type_guards34.isNotNil)(props.onClick)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot ?? DataCardArrowIcon,
         ...props,
-        label: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+        label: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
           Button,
           {
             ref,
-            ...(0, import_type_guards32.isNotNil)(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
+            ...(0, import_type_guards34.isNotNil)(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
             disabled: props.disabled ?? false,
             href: props.href,
             onClick: props.onClick,
@@ -10005,14 +10133,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(DataCardInner, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime225 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components50.default)(Box)`
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components51.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -10026,7 +10154,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -10044,9 +10172,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components51.default.div`
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_jsx_runtime227 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components52.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -10061,8 +10189,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
       Icon,
       {
         size: "md",
@@ -10070,7 +10198,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -10082,22 +10210,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_jsx_runtime227 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components52.css`
+var import_styled_components53 = __toESM(require("styled-components"));
+var import_jsx_runtime228 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components53.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_components52.css`
+var verticalBorderCss = import_styled_components53.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components52.default.div`
+var DividerComponent = import_styled_components53.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -10109,7 +10237,7 @@ var DividerComponent = import_styled_components52.default.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -10122,14 +10250,14 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components55 = __toESM(require("styled-components"));
-var import_react44 = require("react");
+var import_styled_components56 = __toESM(require("styled-components"));
+var import_react45 = require("react");
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components53 = __toESM(require("styled-components"));
-var import_jsx_runtime228 = require("react/jsx-runtime");
-var hide = import_styled_components53.keyframes`
+var import_styled_components54 = __toESM(require("styled-components"));
+var import_jsx_runtime229 = require("react/jsx-runtime");
+var hide = import_styled_components54.keyframes`
   from {
     opacity: 1;
   }
@@ -10137,7 +10265,7 @@ var hide = import_styled_components53.keyframes`
     opacity: 0;
   }
 `;
-var slideDownAndFade = import_styled_components53.keyframes`
+var slideDownAndFade = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -10147,7 +10275,7 @@ var slideDownAndFade = import_styled_components53.keyframes`
     transform: translateY(0);
   }
 `;
-var slideLeftAndFade = import_styled_components53.keyframes`
+var slideLeftAndFade = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: translateX(6px);
@@ -10157,7 +10285,7 @@ var slideLeftAndFade = import_styled_components53.keyframes`
     transform: translateX(0);
   }
 `;
-var slideUpAndFade = import_styled_components53.keyframes`
+var slideUpAndFade = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -10167,7 +10295,7 @@ var slideUpAndFade = import_styled_components53.keyframes`
     transform: translateY(0);
   }
 `;
-var slideRightAndFade = import_styled_components53.keyframes`
+var slideRightAndFade = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: translateX(-6px);
@@ -10177,7 +10305,7 @@ var slideRightAndFade = import_styled_components53.keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = (0, import_styled_components53.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components54.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);
@@ -10239,21 +10367,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -10262,7 +10390,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime228.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_runtime229.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
             ]
@@ -10275,11 +10403,11 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-var import_react43 = require("react");
-var import_styled_components54 = __toESM(require("styled-components"));
-var import_type_guards33 = require("@wistia/type-guards");
-var import_jsx_runtime229 = require("react/jsx-runtime");
-var inputStyles = import_styled_components54.css`
+var import_react44 = require("react");
+var import_styled_components55 = __toESM(require("styled-components"));
+var import_type_guards35 = require("@wistia/type-guards");
+var import_jsx_runtime230 = require("react/jsx-runtime");
+var inputStyles = import_styled_components55.css`
   ${inputCss}
   input,
   textarea {
@@ -10314,7 +10442,7 @@ var inputStyles = import_styled_components54.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components54.default.div`
+var StyledInputContainer = import_styled_components55.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -10362,8 +10490,8 @@ var StyledInputContainer = import_styled_components54.default.div`
     transform: translateY(-50%);
   }
 
-  :has(.wui-input-left-icon) input,
-  :has(.wui-input-left-icon) textarea {
+  &:has(.wui-input-left-icon) input,
+  &:has(.wui-input-left-icon) textarea {
     padding-left: 32px;
   }
 
@@ -10376,12 +10504,12 @@ var StyledInputContainer = import_styled_components54.default.div`
     transform: translateY(-50%);
   }
 
-  :has(.wui-input-right-icon) input,
-  :has(.wui-input-right-icon) textarea {
+  &:has(.wui-input-right-icon) input,
+  &:has(.wui-input-right-icon) textarea {
     padding-right: 32px;
   }
 `;
-var Input = (0, import_react43.forwardRef)(
+var Input = (0, import_react44.forwardRef)(
   ({
     fullWidth = true,
     monospace = false,
@@ -10391,30 +10519,30 @@ var Input = (0, import_react43.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react43.useRef)();
+    const internalRef = (0, import_react44.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      (0, import_type_guards33.isNotNil)(externalRef) && (0, import_type_guards33.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
+      (0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards33.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Icon, { type: "search" });
+    if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards33.isNotNil)(leftIconToDisplay)) {
-      leftIconToDisplay = (0, import_react43.cloneElement)(leftIconToDisplay, {
+    if ((0, import_type_guards35.isNotNil)(leftIconToDisplay)) {
+      leftIconToDisplay = (0, import_react44.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards33.isNotNil)(rightIconToDisplay)) {
-      rightIconToDisplay = (0, import_react43.cloneElement)(rightIconToDisplay, {
+    if ((0, import_type_guards35.isNotNil)(rightIconToDisplay)) {
+      rightIconToDisplay = (0, import_react44.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus2 = (event) => {
-      if ((0, import_type_guards33.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards35.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -10423,21 +10551,21 @@ var Input = (0, import_react43.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
             "input",
             {
               ...props,
@@ -10455,8 +10583,8 @@ var Input = (0, import_react43.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime230 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components55.default)(Input)`
+var import_jsx_runtime231 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components56.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -10471,9 +10599,10 @@ var StyledInput = (0, import_styled_components55.default)(Input)`
     padding: var(--wui-space-02);
     border: none;
     height: ${({ $height }) => `${$height}px`};
+    min-height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components55.css`
+var editableStyles = import_styled_components56.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -10483,7 +10612,7 @@ var editableStyles = import_styled_components55.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components55.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components56.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -10500,11 +10629,11 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react44.useState)(false);
-  const [value, setValue] = (0, import_react44.useState)(children);
-  const [previousValue, setPreviousValue] = (0, import_react44.useState)(children);
-  const [headingHeight, setHeadingHeight] = (0, import_react44.useState)("60");
-  const headingRef = (0, import_react44.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react45.useState)(false);
+  const [value, setValue] = (0, import_react45.useState)(children);
+  const [previousValue, setPreviousValue] = (0, import_react45.useState)(children);
+  const [headingHeight, setHeadingHeight] = (0, import_react45.useState)("60");
+  const headingRef = (0, import_react45.useRef)(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -10537,7 +10666,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -10551,7 +10680,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -10569,9 +10698,9 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(import_jsx_runtime230.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(import_jsx_runtime231.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -10582,110 +10711,6 @@ var EditableHeading = ({
   ] });
 };
 
-// src/components/Form/Form.tsx
-var import_react45 = require("react");
-var import_styled_components56 = __toESM(require("styled-components"));
-var import_type_guards34 = require("@wistia/type-guards");
-var import_jsx_runtime231 = require("react/jsx-runtime");
-var StyledForm = import_styled_components56.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_react45.createContext)({
-  values: {},
-  errors: {},
-  hasSubmitted: false,
-  formId: "NO_FORM",
-  labelPosition: "block"
-});
-var FormComponent = ({
-  children,
-  action,
-  values = {},
-  labelPosition = "block",
-  validate,
-  fullWidth = false,
-  ...props
-}, forwardedRef) => {
-  const [errors, setErrors] = (0, import_react45.useState)({});
-  const [hasSubmitted, setHasSubmitted] = (0, import_react45.useState)(false);
-  const innerRef = (0, import_react45.useRef)();
-  const ref = forwardedRef ?? innerRef;
-  const autoId = (0, import_react45.useId)();
-  const id = props.id ?? autoId;
-  const handleValidate = (nextFormData) => {
-    const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards34.isUndefined)(validate)) {
-      return {};
-    }
-    return validate(nextData);
-  };
-  const handleBlur2 = (event) => {
-    if (props.onBlur) {
-      props.onBlur(event);
-    }
-    const formData = new FormData(event.currentTarget);
-    if ((0, import_type_guards34.isNotUndefined)(validate)) {
-      handleValidate(formData);
-    }
-  };
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    const formData = new FormData(event.currentTarget);
-    const nextErrors = handleValidate(formData);
-    const isValid = Object.keys(nextErrors).length === 0;
-    setErrors(nextErrors);
-    setHasSubmitted(true);
-    if (isValid && props.onSubmit) {
-      props.onSubmit(event);
-    }
-    if (isValid && action) {
-      void action(formData);
-    }
-  };
-  const handleReset = (event) => {
-    setErrors({});
-    setHasSubmitted(false);
-    if (props.onReset) {
-      props.onReset(event);
-    }
-    if (action) {
-      void action(null);
-    }
-  };
-  const context = (0, import_react45.useMemo)(() => {
-    return {
-      values,
-      errors,
-      hasSubmitted,
-      formId: id,
-      labelPosition
-    };
-  }, [labelPosition, values, errors, id, hasSubmitted]);
-  return (
-    // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
-      Stack,
-      {
-        ...props,
-        ref,
-        $fullWidth: fullWidth,
-        as: StyledForm,
-        gap: "space-05",
-        id,
-        onBlur: handleBlur2,
-        onReset: handleReset,
-        onSubmit: handleSubmit,
-        children
-      }
-    ) })
-  );
-};
-FormComponent.displayName = "Form";
-var Form = (0, import_react45.forwardRef)(FormComponent);
-
 // src/components/Form/useFormState.tsx
 var import_react46 = require("react");
 var useFormState = (action, initialData = {}) => {
@@ -10699,7 +10724,7 @@ var useFormState = (action, initialData = {}) => {
         setError(null);
         return;
       }
-      const nextData = Object.fromEntries(nextFormData.entries());
+      const nextData = serializeFormData(nextFormData);
       setIsPending(true);
       try {
         const result = await action(data, nextData);
@@ -10724,7 +10749,7 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 var import_react47 = require("react");
-var import_type_guards35 = require("@wistia/type-guards");
+var import_type_guards36 = require("@wistia/type-guards");
 var import_jsx_runtime232 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
@@ -10738,8 +10763,8 @@ var FormErrorSummary = ({ description }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)("div", { ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards35.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards35.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime232.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards36.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards36.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
         ErrorItem,
         {
           error: err,
@@ -10763,7 +10788,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 var import_react48 = require("react");
 var import_styled_components58 = __toESM(require("styled-components"));
-var import_type_guards36 = require("@wistia/type-guards");
+var import_type_guards37 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
 var import_styled_components57 = __toESM(require("styled-components"));
@@ -10866,7 +10891,7 @@ var StyledErrorList = import_styled_components58.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = (0, import_type_guards36.isArray)(errors);
+  const isMultipleErrors = (0, import_type_guards37.isArray)(errors);
   return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
     Text,
     {
@@ -10916,19 +10941,19 @@ var FormField = ({
     "aria-describedby": ariaDescribedby,
     ...props
   };
-  if ((0, import_type_guards36.isUndefined)(value) && (0, import_type_guards36.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards37.isUndefined)(value) && (0, import_type_guards37.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards36.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards36.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards37.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards37.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards36.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards37.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards36.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards37.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -10936,7 +10961,7 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards36.isNotNil)(error)
+      "aria-invalid": (0, import_type_guards37.isNotNil)(error)
     };
   }
   import_react48.Children.only(children);
@@ -10947,9 +10972,9 @@ var FormField = ({
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
         !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Label, { htmlFor: computedId, children: label }),
-        (0, import_type_guards36.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        (0, import_type_guards37.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react48.cloneElement)(children, childProps),
-        (0, import_type_guards36.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_jsx_runtime234.Fragment, { children: [
+        (0, import_type_guards37.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_jsx_runtime234.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime234.jsx)("div", {}),
           /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
             ErrorMessages,
@@ -10979,12 +11004,15 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
+  const formState = (0, import_react49.useContext)(FormContext);
+  const derivedValue = typeof formState.values[name] === "string" ? formState.values[name] : value;
   const context = (0, import_react49.useMemo)(() => {
     return {
       name,
-      onChange
+      onChange,
+      value: derivedValue
     };
-  }, [name, onChange]);
+  }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
@@ -10992,7 +11020,7 @@ RadioGroup.displayName = "RadioGroup";
 // src/components/InputClickToCopy/InputClickToCopy.tsx
 var import_styled_components59 = __toESM(require("styled-components"));
 var import_react50 = require("react");
-var import_type_guards37 = require("@wistia/type-guards");
+var import_type_guards38 = require("@wistia/type-guards");
 var import_jsx_runtime236 = require("react/jsx-runtime");
 var StyledInput2 = (0, import_styled_components59.default)(Input)`
   &:not([aria-disabled='true']) {
@@ -11020,12 +11048,12 @@ var InputClickToCopy = (0, import_react50.forwardRef)(
     }, [isCopied]);
     const handleClick = (event) => {
       event.preventDefault();
-      if ((0, import_type_guards37.isFunction)(props.onClick)) {
+      if ((0, import_type_guards38.isFunction)(props.onClick)) {
         props.onClick(event);
       }
       void copyToClipboard(value).then(() => {
         setIsCopied(true);
-        if ((0, import_type_guards37.isFunction)(onCopy)) {
+        if ((0, import_type_guards38.isFunction)(onCopy)) {
           onCopy(value);
         }
         return value;
@@ -11055,7 +11083,7 @@ InputClickToCopy.displayName = "InputClickToCopy";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
 var import_styled_components60 = __toESM(require("styled-components"));
-var import_type_guards38 = require("@wistia/type-guards");
+var import_type_guards39 = require("@wistia/type-guards");
 var import_jsx_runtime237 = require("react/jsx-runtime");
 var StyledKeyboardShortcut = import_styled_components60.default.div`
   align-items: center;
@@ -11149,7 +11177,7 @@ var KeyboardShortcut = ({
     $fullWidth: fullWidth,
     ...otherProps,
     children: [
-      (0, import_type_guards38.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Label2, { children: label }),
+      (0, import_type_guards39.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Label2, { children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
         StyledKey,
         {
@@ -11163,18 +11191,18 @@ var KeyboardShortcut = ({
 KeyboardShortcut.displayName = "KeyboardShortcut";
 
 // src/components/List/List.tsx
-var import_type_guards40 = require("@wistia/type-guards");
+var import_type_guards41 = require("@wistia/type-guards");
 var import_styled_components62 = __toESM(require("styled-components"));
 
 // src/components/List/ListItem.tsx
 var import_styled_components61 = __toESM(require("styled-components"));
-var import_type_guards39 = require("@wistia/type-guards");
+var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime238 = require("react/jsx-runtime");
 var ListItemComponent = import_styled_components61.default.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
-  if ((0, import_type_guards39.isNil)(children)) {
+  if ((0, import_type_guards40.isNil)(children)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ListItemComponent, { children });
@@ -11304,13 +11332,13 @@ var List = ({
   ...otherProps
 }) => {
   const listVariant = variant ?? "bullets";
-  if ((0, import_type_guards40.isNotNil)(children)) {
+  if ((0, import_type_guards41.isNotNil)(children)) {
     if (Array.isArray(children) && !children.length) {
       return null;
     }
     return renderListComponent(children, listVariant, otherProps);
   }
-  if ((0, import_type_guards40.isNotNil)(items)) {
+  if ((0, import_type_guards41.isNotNil)(items)) {
     if (!items.length) {
       return null;
     }
@@ -11323,7 +11351,7 @@ List.displayName = "List";
 // src/components/Menu/Menu.tsx
 var import_styled_components63 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_type_guards41 = require("@wistia/type-guards");
+var import_type_guards42 = require("@wistia/type-guards");
 var import_react52 = require("react");
 
 // src/components/Menu/MenuContext.tsx
@@ -11435,7 +11463,7 @@ var Menu = ({
 }) => {
   const contextValue = (0, import_react52.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
-    ...(0, import_type_guards41.isNotNil)(onOpenChange) && (0, import_type_guards41.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards42.isNotNil)(onOpenChange) && (0, import_type_guards42.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -11449,7 +11477,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards41.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards42.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
@@ -11511,12 +11539,12 @@ MenuLabel.displayName = "MenuLabel";
 var import_react54 = require("react");
 var import_styled_components67 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards43 = require("@wistia/type-guards");
+var import_type_guards44 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react53 = require("react");
 var import_styled_components65 = __toESM(require("styled-components"));
-var import_type_guards42 = require("@wistia/type-guards");
+var import_type_guards43 = require("@wistia/type-guards");
 var import_jsx_runtime242 = require("react/jsx-runtime");
 var StyledButton3 = (0, import_styled_components65.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -11533,7 +11561,7 @@ var StyledButton3 = (0, import_styled_components65.default)(Button)`
   line-height: var(--menu-label-line-height);
   transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
 
-  :active {
+  &:active {
     background-color: var(--wui-color-bg-surface-active);
   }
 
@@ -11594,7 +11622,7 @@ var StyledBadgeContainer = import_styled_components65.default.div`
 var MenuItemButton = (0, import_react53.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if ((0, import_type_guards42.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards43.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
@@ -11624,7 +11652,7 @@ var MenuItemButton = (0, import_react53.forwardRef)(({ children, appearance, com
       children: [
         props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards42.isNotNil)(badge) || (0, import_type_guards42.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        (0, import_type_guards43.isNotNil)(badge) || (0, import_type_guards43.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -11696,7 +11724,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards43.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(MenuItemDescription, { children: description }) : null
+      (0, import_type_guards44.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
@@ -11788,7 +11816,7 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards44 = require("@wistia/type-guards");
+var import_type_guards45 = require("@wistia/type-guards");
 var import_jsx_runtime248 = require("react/jsx-runtime");
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(
@@ -11862,8 +11890,8 @@ var CheckboxMenuItem = ({
         MenuItemButton,
         {
           ...props,
-          leftIcon: (0, import_type_guards44.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(CheckboxIndicator, { checked }),
-          rightIcon: (0, import_type_guards44.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Icon, { type: "checkmark" }) }) : void 0
+          leftIcon: (0, import_type_guards45.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(CheckboxIndicator, { checked }),
+          rightIcon: (0, import_type_guards45.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -11875,7 +11903,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 var import_react59 = require("react");
 var import_styled_components72 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_type_guards46 = require("@wistia/type-guards");
+var import_type_guards47 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components69 = __toESM(require("styled-components"));
@@ -11938,7 +11966,7 @@ var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react56 = require("react");
-var import_type_guards45 = require("@wistia/type-guards");
+var import_type_guards46 = require("@wistia/type-guards");
 var useFocusRestore = () => {
   const previouslyFocusedRef = (0, import_react56.useRef)(null);
   (0, import_react56.useEffect)(() => {
@@ -11946,7 +11974,7 @@ var useFocusRestore = () => {
   }, []);
   (0, import_react56.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards45.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards46.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -12137,7 +12165,7 @@ var Modal = (0, import_react59.forwardRef)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards46.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards47.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -12152,7 +12180,7 @@ var Modal = (0, import_react59.forwardRef)(
               alignVertical,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards46.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards47.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -12186,9 +12214,9 @@ var import_react_popover2 = require("@radix-ui/react-popover");
 var import_styled_components74 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
-var import_type_guards47 = require("@wistia/type-guards");
+var import_type_guards48 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards47.isNotNil)(onOpenChange) && (0, import_type_guards47.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards48.isNotNil)(onOpenChange) && (0, import_type_guards48.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
@@ -12343,7 +12371,7 @@ Popover2.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components75 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
-var import_type_guards48 = require("@wistia/type-guards");
+var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime256 = require("react/jsx-runtime");
 var ProgressBarWrapper = import_styled_components75.default.div`
   --progress-bar-height: 8px;
@@ -12398,7 +12426,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards48.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    (0, import_type_guards49.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
       StyledProgressBar,
       {
@@ -12414,7 +12442,7 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards48.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards49.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
@@ -12422,7 +12450,7 @@ ProgressBar.displayName = "ProgressBar";
 // src/components/Radio/Radio.tsx
 var import_react60 = require("react");
 var import_styled_components76 = __toESM(require("styled-components"));
-var import_type_guards49 = require("@wistia/type-guards");
+var import_type_guards50 = require("@wistia/type-guards");
 var import_jsx_runtime257 = require("react/jsx-runtime");
 var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
   "svg",
@@ -12539,12 +12567,14 @@ var Radio = (0, import_react60.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react60.useId)();
-    const computedId = (0, import_type_guards49.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards50.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
+    const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
+    const defaultChecked = (0, import_type_guards50.isNotUndefined)(value) && (0, import_type_guards50.isNotUndefined)(contextValue) ? contextValue.includes(value) : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
       StyledRadioWrapper,
       {
@@ -12556,14 +12586,14 @@ var Radio = (0, import_react60.forwardRef)(
             {
               ...props,
               ref,
-              checked,
               disabled,
               id: computedId,
               name: radioName,
               onChange: handleOnChange,
               required,
               type: "radio",
-              value
+              value,
+              ...(0, import_type_guards50.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked }
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
@@ -12596,7 +12626,7 @@ Radio.displayName = "Radio";
 var import_react63 = require("react");
 var import_styled_components78 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
-var import_type_guards50 = require("@wistia/type-guards");
+var import_type_guards51 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 var import_react61 = require("react");
@@ -12696,7 +12726,7 @@ var SegmentedControl = (0, import_react63.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards50.isNil)(children)) {
+    if ((0, import_type_guards51.isNil)(children)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
@@ -12725,7 +12755,7 @@ SegmentedControl.displayName = "SegmentedControl";
 var import_react64 = require("react");
 var import_styled_components79 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
-var import_type_guards51 = require("@wistia/type-guards");
+var import_type_guards52 = require("@wistia/type-guards");
 var import_jsx_runtime261 = require("react/jsx-runtime");
 var segmentedControlItemStyles = import_styled_components79.css`
   all: unset; /* ToggleGroupItem is a button element */
@@ -12833,8 +12863,8 @@ var SegmentedControlItem = (0, import_react64.forwardRef)(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: (0, import_type_guards51.isNotNil)(label),
-        "aria-label": (0, import_type_guards51.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards52.isNotNil)(label),
+        "aria-label": (0, import_type_guards52.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -12966,7 +12996,7 @@ Select.displayName = "Select";
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react66 = require("react");
 var import_styled_components81 = __toESM(require("styled-components"));
-var import_type_guards52 = require("@wistia/type-guards");
+var import_type_guards53 = require("@wistia/type-guards");
 var import_jsx_runtime263 = require("react/jsx-runtime");
 var StyledItem = (0, import_styled_components81.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
@@ -13010,7 +13040,7 @@ var SelectOption = (0, import_react66.forwardRef)(
               type: "checkmark"
             }
           ) }) }),
-          (0, import_type_guards52.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)("div", { children: [
+          (0, import_type_guards53.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime263.jsxs)("div", { children: [
             children,
             /* @__PURE__ */ (0, import_jsx_runtime263.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime263.jsx)(import_react_select2.ItemText, { children })
@@ -13045,7 +13075,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 // src/components/Slider/Slider.tsx
 var import_react_slider = require("@radix-ui/react-slider");
 var import_styled_components83 = __toESM(require("styled-components"));
-var import_type_guards53 = require("@wistia/type-guards");
+var import_type_guards54 = require("@wistia/type-guards");
 var import_jsx_runtime265 = require("react/jsx-runtime");
 var SliderContainer = import_styled_components83.default.div`
   --wui-slider-track-color: var(--wui-gray-6);
@@ -13124,7 +13154,7 @@ var Slider = ({
   "data-testid": dataTestId = "ui-slider",
   ...otherProps
 }) => {
-  if (!((0, import_type_guards53.isNonEmptyString)(ariaLabel) || (0, import_type_guards53.isNonEmptyString)(ariaLabelledby))) {
+  if (!((0, import_type_guards54.isNonEmptyString)(ariaLabel) || (0, import_type_guards54.isNonEmptyString)(ariaLabelledby))) {
     throw new Error(
       "UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
     );
@@ -13172,7 +13202,7 @@ Slider.displayName = "Slider";
 // src/components/Switch/Switch.tsx
 var import_react67 = require("react");
 var import_styled_components84 = __toESM(require("styled-components"));
-var import_type_guards54 = require("@wistia/type-guards");
+var import_type_guards55 = require("@wistia/type-guards");
 var import_jsx_runtime266 = require("react/jsx-runtime");
 var sizeSmall3 = import_styled_components84.css`
   --wui-size-small-width: 24px;
@@ -13291,7 +13321,7 @@ var Switch = (0, import_react67.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react67.useId)();
-    const computedId = (0, import_type_guards54.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = (0, import_type_guards55.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime266.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(
         StyledHiddenSwitchInput,
@@ -13446,7 +13476,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 var import_react_tabs = require("@radix-ui/react-tabs");
 var import_react71 = require("react");
-var import_type_guards55 = require("@wistia/type-guards");
+var import_type_guards56 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react70 = require("react");
@@ -13483,10 +13513,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if ((0, import_type_guards55.isNotNil)(value)) {
+  if ((0, import_type_guards56.isNotNil)(value)) {
     rootProps.value = value;
   }
-  if ((0, import_type_guards55.isNotNil)(defaultValue)) {
+  if ((0, import_type_guards56.isNotNil)(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(SelectedItemStyleProvider, { children }) }) });
@@ -13546,7 +13576,7 @@ TabsList.displayName = "TabsList";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react72 = require("react");
-var import_type_guards56 = require("@wistia/type-guards");
+var import_type_guards57 = require("@wistia/type-guards");
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
 var import_styled_components93 = __toESM(require("styled-components"));
@@ -13597,8 +13627,8 @@ var TabsTrigger = (0, import_react72.forwardRef)(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards56.isNotNil)(label),
-        "aria-label": (0, import_type_guards56.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards57.isNotNil)(label),
+        "aria-label": (0, import_type_guards57.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -13613,7 +13643,7 @@ TabsTrigger.displayName = "TabsTrigger";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components94 = __toESM(require("styled-components"));
-var import_type_guards57 = require("@wistia/type-guards");
+var import_type_guards58 = require("@wistia/type-guards");
 var import_jsx_runtime278 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components94.default.div`
   align-items: center;
@@ -13641,7 +13671,7 @@ var StyledThumbnailBadge = import_styled_components94.default.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime278.jsxs)(StyledThumbnailBadge, { ...props, children: [
-    (0, import_type_guards57.isNotNil)(icon) && icon,
+    (0, import_type_guards58.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime278.jsx)("span", { children: label })
   ] });
 };
@@ -13650,10 +13680,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react73 = require("react");
 var import_styled_components97 = __toESM(require("styled-components"));
-var import_type_guards60 = require("@wistia/type-guards");
+var import_type_guards61 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards58 = require("@wistia/type-guards");
+var import_type_guards59 = require("@wistia/type-guards");
 var import_styled_components95 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components95.css`
@@ -13781,12 +13811,12 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards58.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards59.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 var import_styled_components96 = __toESM(require("styled-components"));
-var import_type_guards59 = require("@wistia/type-guards");
+var import_type_guards60 = require("@wistia/type-guards");
 var import_jsx_runtime279 = require("react/jsx-runtime");
 var ScrubLine = import_styled_components96.default.div`
   position: absolute;
@@ -13872,8 +13902,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = (0, import_type_guards59.isNotNil)(cursorPosition);
-  const scrubLinePosition = (0, import_type_guards59.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = (0, import_type_guards60.isNotNil)(cursorPosition);
+  const scrubLinePosition = (0, import_type_guards60.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -13943,10 +13973,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = import_styled_components97.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards60.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards61.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards60.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards61.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -13988,10 +14018,10 @@ var Thumbnail = (0, import_react73.forwardRef)(
     const storyboardElementRef = (0, import_react73.useRef)(null);
     const [cursorPosition, setCursorPosition] = (0, import_react73.useState)(null);
     const backgroundUrl = (0, import_react73.useMemo)(
-      () => thumbnailImageType === "square" && (0, import_type_guards60.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && (0, import_type_guards61.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = (0, import_type_guards60.isNotNil)(storyboard);
+    const isScrubbable = (0, import_type_guards61.isNotNil)(storyboard);
     const trackStoryboardLoadStatus = (0, import_react73.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -14024,7 +14054,7 @@ var Thumbnail = (0, import_react73.forwardRef)(
       return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
     }, [isScrubbable, isMouseOver, isStoryboardReady]);
     const renderStoryboard = (0, import_react73.useCallback)(() => {
-      if (!storyboard || (0, import_type_guards60.isUndefined)(height) || (0, import_type_guards60.isEmptyString)(height)) return null;
+      if (!storyboard || (0, import_type_guards61.isUndefined)(height) || (0, import_type_guards61.isEmptyString)(height)) return null;
       const {
         url,
         width: sbWidth,
@@ -14034,7 +14064,7 @@ var Thumbnail = (0, import_react73.forwardRef)(
         frameCount,
         aspectRatio
       } = storyboard;
-      const targetWidth = (0, import_type_guards60.isString)(width) ? parseInt(width, 10) : Number(width);
+      const targetWidth = (0, import_type_guards61.isString)(width) ? parseInt(width, 10) : Number(width);
       const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
       return /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
         ThumbnailStoryboardViewer,
@@ -14055,7 +14085,7 @@ var Thumbnail = (0, import_react73.forwardRef)(
     let thumbnailContent = null;
     if (shouldRenderStoryboard) {
       thumbnailContent = renderStoryboard();
-    } else if ((0, import_type_guards60.isNotNil)(thumbnailUrl)) {
+    } else if ((0, import_type_guards61.isNotNil)(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime280.jsx)(
         ThumbnailImage,
         {
@@ -14080,7 +14110,7 @@ var Thumbnail = (0, import_react73.forwardRef)(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          (0, import_type_guards60.isNotNil)(children) ? children : null,
+          (0, import_type_guards61.isNotNil)(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -14092,7 +14122,7 @@ Thumbnail.displayName = "Thumbnail";
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react74 = __toESM(require("react"));
 var import_styled_components98 = __toESM(require("styled-components"));
-var import_type_guards61 = require("@wistia/type-guards");
+var import_type_guards62 = require("@wistia/type-guards");
 var import_jsx_runtime281 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
@@ -14172,7 +14202,7 @@ var ThumbnailCollage = ({
 }) => {
   const thumbnailArray = import_react74.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
-  const thumbnails = (0, import_type_guards61.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
+  const thumbnails = (0, import_type_guards62.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
     return import_react74.default.cloneElement(child, {
       ...child.props,
       children: void 0
@@ -14200,7 +14230,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components99 = __toESM(require("styled-components"));
-var import_type_guards62 = require("@wistia/type-guards");
+var import_type_guards63 = require("@wistia/type-guards");
 var import_jsx_runtime282 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -14313,7 +14343,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime282.jsx)("title", { children: title }),
-        (0, import_type_guards62.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime282.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards63.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime282.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]