@wistia/ui 0.10.4 → 0.10.5-beta.0e9afde3.22d8df5

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.10.4
+ * @license @wistia/ui v0.10.5-beta.0e9afde3.22d8df5
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7828,6 +7828,7 @@ var StyledBadge = import_styled_components26.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
+  box-shadow: ${({ $variant }) => $variant === "outline" ? "inset 0 0 0 1px var(--wui-color-border)" : "none"};
   border-radius: var(--wui-border-radius-rounded);
   color: var(--wui-color-text);
   display: inline-flex;
@@ -7835,17 +7836,21 @@ var StyledBadge = import_styled_components26.default.div`
   font-weight: var(--wui-typography-label-4-weight);
   gap: var(--wui-space-01);
   justify-content: center;
+  line-height: var(--wui-typography-label-3-line-height);
   padding: var(--wui-space-01) var(--wui-space-02);
   width: fit-content;
 
-  /* Icon component size */
-  svg {
-    height: 12px;
-    width: 12px;
+  /* Icon component size and color */
+  && {
+    svg {
+      color: var(--wui-color-icon);
+      height: 12px;
+      width: 12px;
+    }
   }
 `;
 var Badge = (0, import_react26.forwardRef)(
-  ({ colorScheme = "inherit", label, icon, ...props }, ref) => {
+  ({ colorScheme = "inherit", label, icon, variant = "default", ...props }, ref) => {
     const hasIcon = (0, import_type_guards19.isNotNil)(icon);
     return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
       StyledBadge,
@@ -7854,6 +7859,7 @@ var Badge = (0, import_react26.forwardRef)(
         ...props,
         $colorScheme: colorScheme,
         $hasIcon: hasIcon,
+        $variant: variant,
         children: [
           hasIcon ? icon : null,
           /* @__PURE__ */ (0, import_jsx_runtime200.jsx)("span", { children: label })
@@ -8303,9 +8309,9 @@ var Center = (0, import_react29.forwardRef)(
 Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react34 = require("react");
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_type_guards26 = require("@wistia/type-guards");
+var import_react35 = require("react");
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_type_guards28 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_styled_components35 = __toESM(require("styled-components"));
@@ -8424,7 +8430,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_react33 = require("react");
+var import_react34 = require("react");
+var import_type_guards27 = require("@wistia/type-guards");
 
 // src/components/FormGroup/FormGroup.tsx
 var import_styled_components38 = __toESM(require("styled-components"));
@@ -8621,11 +8628,132 @@ var FormGroup = ({ children, label, ...props }) => {
 };
 FormGroup.displayName = "FormGroup";
 
-// src/components/FormGroup/CheckboxGroup.tsx
+// src/components/Form/Form.tsx
+var import_react33 = require("react");
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_type_guards26 = 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_runtime213 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react33.createContext)(null);
+var StyledForm = import_styled_components39.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_react33.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_react33.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react33.useState)(false);
+  const innerRef = (0, import_react33.useRef)();
+  const ref = forwardedRef ?? innerRef;
+  const autoId = (0, import_react33.useId)();
+  const id = props.id ?? autoId;
+  const handleValidate = (nextFormData) => {
+    const nextData = serializeFormData(nextFormData);
+    if ((0, import_type_guards26.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_guards26.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_react33.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_runtime213.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime213.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_react33.forwardRef)(FormComponent);
+
+// src/components/FormGroup/CheckboxGroup.tsx
+var import_jsx_runtime214 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react34.createContext)(null);
 var useCheckboxGroup = () => {
-  return (0, import_react33.useContext)(CheckboxGroupContext);
+  return (0, import_react34.useContext)(CheckboxGroupContext);
 };
 var CheckboxGroup = ({
   children,
@@ -8634,19 +8762,22 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = (0, import_react33.useMemo)(() => {
+  const formState = (0, import_react34.useContext)(FormContext);
+  const derivedValue = (0, import_type_guards27.isArray)(formState.values[name]) ? formState.values[name] : value;
+  const context = (0, import_react34.useMemo)(() => {
     return {
-      name,
-      onChange
+      name: `${name}[]`,
+      onChange,
+      value: derivedValue
     };
-  }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(FormGroup, { ...props, children }) });
+  }, [name, derivedValue, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime214 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -8654,7 +8785,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime215.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",
@@ -8663,7 +8794,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components39.css`
+var sizeSmall = import_styled_components40.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -8674,7 +8805,7 @@ var sizeSmall = import_styled_components39.css`
     height: 7px;
   }
 `;
-var sizeMedium = import_styled_components39.css`
+var sizeMedium = import_styled_components40.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -8685,7 +8816,7 @@ var sizeMedium = import_styled_components39.css`
     height: 9px;
   }
 `;
-var sizeLarge = import_styled_components39.css`
+var sizeLarge = import_styled_components40.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -8701,14 +8832,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components39.default.div`
+var StyledCheckboxWrapper = import_styled_components40.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components39.default.div`
+var StyledCheckboxInput = import_styled_components40.default.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -8730,7 +8861,7 @@ var StyledCheckboxInput = import_styled_components39.default.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components39.default.input`
+var StyledHiddenCheckboxInput = import_styled_components40.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -8744,7 +8875,7 @@ var StyledHiddenCheckboxInput = import_styled_components39.default.input`
     display: block;
   }
 `;
-var Checkbox = (0, import_react34.forwardRef)(
+var Checkbox = (0, import_react35.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -8759,20 +8890,23 @@ var Checkbox = (0, import_react34.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react34.useId)();
-    const computedId = (0, import_type_guards26.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    const generatedId = (0, import_react35.useId)();
+    const computedId = (0, import_type_guards28.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_runtime214.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    const defaultChecked = (0, import_type_guards28.isNotUndefined)(value) && contextValue ? contextValue.includes(value) : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
         StyledHiddenCheckboxInput,
         {
           ...props,
           ref,
           checked,
+          ...(0, import_type_guards28.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked },
           disabled,
           id: computedId,
           name: checkboxName,
@@ -8782,16 +8916,16 @@ var Checkbox = (0, import_react34.forwardRef)(
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(CheckIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(CheckIcon, {})
             }
           ),
           description,
@@ -8807,14 +8941,14 @@ var Checkbox = (0, import_react34.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-var import_react35 = require("react");
+var import_react36 = 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_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -8822,7 +8956,7 @@ var ClickRegion = ({ children, targetRef }) => {
     } else {
     }
   }, [targetRef]);
-  const handleClick = (0, import_react35.useCallback)(
+  const handleClick = (0, import_react36.useCallback)(
     (event) => {
       const node = targetRef.current;
       if (event.target === node) {
@@ -8842,7 +8976,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return (0, import_react35.cloneElement)(import_react35.Children.only(children), {
+  return (0, import_react36.cloneElement)(import_react36.Children.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -8851,10 +8985,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
-var import_type_guards27 = require("@wistia/type-guards");
-var import_styled_components40 = __toESM(require("styled-components"));
-var import_jsx_runtime215 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components40.default)(import_react_collapsible.Root)`
+var import_type_guards29 = require("@wistia/type-guards");
+var import_styled_components41 = __toESM(require("styled-components"));
+var import_jsx_runtime216 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components41.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -8868,32 +9002,32 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...(0, import_type_guards27.isNotNil)(onOpenChange) && (0, import_type_guards27.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards29.isNotNil)(onOpenChange) && (0, import_type_guards29.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
-var import_react36 = require("react");
+var import_react37 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_jsx_runtime216 = require("react/jsx-runtime");
+var import_jsx_runtime217 = require("react/jsx-runtime");
 var CollapsibleTrigger = ({ children }) => {
-  import_react36.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
+  import_react37.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
+var import_styled_components42 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
-var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime217 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components41.default.div`
+var import_type_guards30 = require("@wistia/type-guards");
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components42.default.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if ((0, import_type_guards28.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+  if ((0, import_type_guards30.isNotUndefined)(clamp)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
       ClampedContent,
       {
         $clamp: clamp,
@@ -8902,18 +9036,18 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)(import_jsx_runtime217.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(import_jsx_runtime218.Fragment, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_react37 = require("react");
-var import_styled_components42 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components42.default.div`
+var import_react38 = require("react");
+var import_styled_components43 = __toESM(require("styled-components"));
+var import_type_guards31 = require("@wistia/type-guards");
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components43.default.div`
   display: grid;
   grid-template-areas: 'label slot' 'value value';
   grid-template-rows: auto auto;
@@ -8968,7 +9102,7 @@ var StyledDataCard = import_styled_components42.default.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = import_styled_components42.keyframes`
+var shimmer = import_styled_components43.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -8976,7 +9110,7 @@ var shimmer = import_styled_components42.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components42.default.div`
+var LoadingBackground = import_styled_components43.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8987,27 +9121,27 @@ var LoadingBackground = import_styled_components42.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components42.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components43.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components42.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components43.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components42.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components43.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components42.default)(Heading)`
+var StyledValue = (0, import_styled_components43.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components42.default.div`
+var StyledSlot = import_styled_components43.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components42.default.div`
+var StyledDataCardTrendContainer = import_styled_components43.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -9020,34 +9154,34 @@ var DataCardInner = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards29.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards29.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards31.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards31.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
-var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -9055,18 +9189,18 @@ var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
   }
 );
 var DataCard = (props) => {
-  const ref = (0, import_react37.useRef)(null);
-  if ((0, import_type_guards29.isNotNil)(props.href) || (0, import_type_guards29.isNotNil)(props.onClick)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+  const ref = (0, import_react38.useRef)(null);
+  if ((0, import_type_guards31.isNotNil)(props.href) || (0, import_type_guards31.isNotNil)(props.onClick)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot ?? DataCardArrowIcon,
         ...props,
-        label: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+        label: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
           Button,
           {
             ref,
-            ...(0, import_type_guards29.isNotNil)(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
+            ...(0, import_type_guards31.isNotNil)(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
             disabled: props.disabled ?? false,
             href: props.href,
             onClick: props.onClick,
@@ -9077,14 +9211,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(DataCardInner, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components43 = __toESM(require("styled-components"));
-var import_jsx_runtime219 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components43.default)(Box)`
+var import_styled_components44 = __toESM(require("styled-components"));
+var import_jsx_runtime220 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components44.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -9098,7 +9232,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -9116,26 +9250,26 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components45 = __toESM(require("styled-components"));
+var import_styled_components46 = __toESM(require("styled-components"));
 
 // src/components/Text/Text.tsx
-var import_react38 = require("react");
-var import_styled_components44 = __toESM(require("styled-components"));
-var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime220 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components44.css`
+var import_react39 = require("react");
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_type_guards32 = require("@wistia/type-guards");
+var import_jsx_runtime221 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components45.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components44.css`
+var labelBoldStyles = import_styled_components45.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components44.css`
+var body1TextStyle = import_styled_components45.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -9143,7 +9277,7 @@ var body1TextStyle = import_styled_components44.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components44.css`
+var body2TextStyle = import_styled_components45.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -9151,7 +9285,7 @@ var body2TextStyle = import_styled_components44.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components44.css`
+var body3TextStyle = import_styled_components45.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -9159,7 +9293,7 @@ var body3TextStyle = import_styled_components44.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components44.css`
+var body4TextStyle = import_styled_components45.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -9167,47 +9301,47 @@ var body4TextStyle = import_styled_components44.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components44.css`
+var label1TextStyle = import_styled_components45.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components44.css`
+var label2TextStyle = import_styled_components45.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components44.css`
+var label3TextStyle = import_styled_components45.css`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components44.css`
+var label4TextStyle = import_styled_components45.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components44.css`
+var body1MonoTextStyle = import_styled_components45.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components44.css`
+var body2MonoTextStyle = import_styled_components45.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components44.css`
+var body3MonoTextStyle = import_styled_components45.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components44.css`
+var body4MonoTextStyle = import_styled_components45.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -9242,7 +9376,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components44.default.div`
+var StyledText = import_styled_components45.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -9266,27 +9400,27 @@ var StyledText = import_styled_components44.default.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $truncate }) => {
-  if ((0, import_type_guards30.isNotNil)($truncate)) {
-    return import_styled_components44.css`
+  if ((0, import_type_guards32.isNotNil)($truncate)) {
+    return import_styled_components45.css`
         ${ellipsisStyle};
         ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && import_styled_components44.css`
+  ${({ $inline }) => $inline && import_styled_components45.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components44.css`
+  ${({ $disabled }) => $disabled && import_styled_components45.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components44.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components45.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components44.css`
+  ${({ $align }) => import_styled_components45.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components44.css`
+  ${({ as }) => as === "p" && import_styled_components45.css`
       display: block;
 
       + p {
@@ -9294,7 +9428,7 @@ var StyledText = import_styled_components44.default.div`
       }
     `}
 `;
-var TextComponent = (0, import_react38.forwardRef)(
+var TextComponent = (0, import_react39.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -9307,7 +9441,7 @@ var TextComponent = (0, import_react38.forwardRef)(
     renderAs,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
       StyledText,
       {
         ref,
@@ -9329,8 +9463,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_jsx_runtime221 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components45.default.div`
+var import_jsx_runtime222 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components46.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -9345,8 +9479,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
       Icon,
       {
         size: "md",
@@ -9354,7 +9488,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -9366,22 +9500,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_jsx_runtime222 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components46.css`
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_jsx_runtime223 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components47.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_components46.css`
+var verticalBorderCss = import_styled_components47.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components46.default.div`
+var DividerComponent = import_styled_components47.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -9393,7 +9527,7 @@ var DividerComponent = import_styled_components46.default.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -9406,14 +9540,14 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_react40 = require("react");
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_react41 = require("react");
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components47 = __toESM(require("styled-components"));
-var import_jsx_runtime223 = require("react/jsx-runtime");
-var hide = import_styled_components47.keyframes`
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var hide = import_styled_components48.keyframes`
   from {
     opacity: 1;
   }
@@ -9421,7 +9555,7 @@ var hide = import_styled_components47.keyframes`
     opacity: 0;
   }
 `;
-var slideDownAndFade = import_styled_components47.keyframes`
+var slideDownAndFade = import_styled_components48.keyframes`
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -9431,7 +9565,7 @@ var slideDownAndFade = import_styled_components47.keyframes`
     transform: translateY(0);
   }
 `;
-var slideLeftAndFade = import_styled_components47.keyframes`
+var slideLeftAndFade = import_styled_components48.keyframes`
   from {
     opacity: 0;
     transform: translateX(6px);
@@ -9441,7 +9575,7 @@ var slideLeftAndFade = import_styled_components47.keyframes`
     transform: translateX(0);
   }
 `;
-var slideUpAndFade = import_styled_components47.keyframes`
+var slideUpAndFade = import_styled_components48.keyframes`
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -9451,7 +9585,7 @@ var slideUpAndFade = import_styled_components47.keyframes`
     transform: translateY(0);
   }
 `;
-var slideRightAndFade = import_styled_components47.keyframes`
+var slideRightAndFade = import_styled_components48.keyframes`
   from {
     opacity: 0;
     transform: translateX(-6px);
@@ -9461,7 +9595,7 @@ var slideRightAndFade = import_styled_components47.keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = (0, import_styled_components47.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components48.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);
@@ -9523,21 +9657,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -9546,7 +9680,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime223.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_runtime224.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
             ]
@@ -9559,13 +9693,13 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-var import_react39 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_type_guards31 = require("@wistia/type-guards");
+var import_react40 = require("react");
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_type_guards33 = require("@wistia/type-guards");
 
 // src/css/inputCss.ts
-var import_styled_components48 = require("styled-components");
-var inputCss = import_styled_components48.css`
+var import_styled_components49 = require("styled-components");
+var inputCss = import_styled_components49.css`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -9591,8 +9725,8 @@ var inputCss = import_styled_components48.css`
 `;
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime224 = require("react/jsx-runtime");
-var inputStyles = import_styled_components49.css`
+var import_jsx_runtime225 = require("react/jsx-runtime");
+var inputStyles = import_styled_components50.css`
   ${inputCss}
   input,
   textarea {
@@ -9627,7 +9761,7 @@ var inputStyles = import_styled_components49.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components49.default.div`
+var StyledInputContainer = import_styled_components50.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9694,7 +9828,7 @@ var StyledInputContainer = import_styled_components49.default.div`
     padding-right: 32px;
   }
 `;
-var Input = (0, import_react39.forwardRef)(
+var Input = (0, import_react40.forwardRef)(
   ({
     fullWidth = true,
     monospace = false,
@@ -9704,30 +9838,30 @@ var Input = (0, import_react39.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react39.useRef)();
+    const internalRef = (0, import_react40.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      (0, import_type_guards31.isNotNil)(externalRef) && (0, import_type_guards31.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
+      (0, import_type_guards33.isNotNil)(externalRef) && (0, import_type_guards33.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards31.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(Icon, { type: "search" });
+    if ((0, import_type_guards33.isNil)(leftIcon) && type === "search") {
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards31.isNotNil)(leftIconToDisplay)) {
-      leftIconToDisplay = (0, import_react39.cloneElement)(leftIconToDisplay, {
+    if ((0, import_type_guards33.isNotNil)(leftIconToDisplay)) {
+      leftIconToDisplay = (0, import_react40.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards31.isNotNil)(rightIconToDisplay)) {
-      rightIconToDisplay = (0, import_react39.cloneElement)(rightIconToDisplay, {
+    if ((0, import_type_guards33.isNotNil)(rightIconToDisplay)) {
+      rightIconToDisplay = (0, import_react40.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus2 = (event) => {
-      if ((0, import_type_guards31.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards33.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -9736,21 +9870,21 @@ var Input = (0, import_react39.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
             "input",
             {
               ...props,
@@ -9768,8 +9902,8 @@ var Input = (0, import_react39.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime225 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components50.default)(Input)`
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components51.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9786,7 +9920,7 @@ var StyledInput = (0, import_styled_components50.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components50.css`
+var editableStyles = import_styled_components51.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9796,7 +9930,7 @@ var editableStyles = import_styled_components50.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components50.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components51.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9813,11 +9947,11 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react40.useState)(false);
-  const [value, setValue] = (0, import_react40.useState)(children);
-  const [previousValue, setPreviousValue] = (0, import_react40.useState)(children);
-  const [headingHeight, setHeadingHeight] = (0, import_react40.useState)("60");
-  const headingRef = (0, import_react40.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react41.useState)(false);
+  const [value, setValue] = (0, import_react41.useState)(children);
+  const [previousValue, setPreviousValue] = (0, import_react41.useState)(children);
+  const [headingHeight, setHeadingHeight] = (0, import_react41.useState)("60");
+  const headingRef = (0, import_react41.useRef)(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -9850,7 +9984,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9864,7 +9998,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -9882,9 +10016,9 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(import_jsx_runtime225.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(import_jsx_runtime226.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -9895,110 +10029,6 @@ var EditableHeading = ({
   ] });
 };
 
-// src/components/Form/Form.tsx
-var import_react41 = require("react");
-var import_styled_components51 = __toESM(require("styled-components"));
-var import_type_guards32 = require("@wistia/type-guards");
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var StyledForm = import_styled_components51.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_react41.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_react41.useState)({});
-  const [hasSubmitted, setHasSubmitted] = (0, import_react41.useState)(false);
-  const innerRef = (0, import_react41.useRef)();
-  const ref = forwardedRef ?? innerRef;
-  const autoId = (0, import_react41.useId)();
-  const id = props.id ?? autoId;
-  const handleValidate = (nextFormData) => {
-    const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards32.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_guards32.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_react41.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_runtime226.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime226.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_react41.forwardRef)(FormComponent);
-
 // src/components/Form/useFormState.tsx
 var import_react42 = require("react");
 var useFormState = (action, initialData = {}) => {
@@ -10012,7 +10042,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);
@@ -10037,7 +10067,7 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 var import_react43 = require("react");
-var import_type_guards33 = require("@wistia/type-guards");
+var import_type_guards34 = require("@wistia/type-guards");
 var import_jsx_runtime227 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
@@ -10051,8 +10081,8 @@ var FormErrorSummary = ({ description }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)("div", { ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards33.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards33.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards34.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards34.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
         ErrorItem,
         {
           error: err,
@@ -10076,7 +10106,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 var import_react44 = require("react");
 var import_styled_components53 = __toESM(require("styled-components"));
-var import_type_guards34 = require("@wistia/type-guards");
+var import_type_guards35 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
 var import_styled_components52 = __toESM(require("styled-components"));
@@ -10179,7 +10209,7 @@ var StyledErrorList = import_styled_components53.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = (0, import_type_guards34.isArray)(errors);
+  const isMultipleErrors = (0, import_type_guards35.isArray)(errors);
   return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
     Text,
     {
@@ -10229,19 +10259,19 @@ var FormField = ({
     "aria-describedby": ariaDescribedby,
     ...props
   };
-  if ((0, import_type_guards34.isUndefined)(value) && (0, import_type_guards34.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards35.isUndefined)(value) && (0, import_type_guards35.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards34.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards34.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards35.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards35.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards34.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards35.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards34.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards35.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -10249,7 +10279,7 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards34.isNotNil)(error)
+      "aria-invalid": (0, import_type_guards35.isNotNil)(error)
     };
   }
   import_react44.Children.only(children);
@@ -10260,9 +10290,9 @@ var FormField = ({
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
         !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Label, { htmlFor: computedId, children: label }),
-        (0, import_type_guards34.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        (0, import_type_guards35.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react44.cloneElement)(children, childProps),
-        (0, import_type_guards34.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(import_jsx_runtime229.Fragment, { children: [
+        (0, import_type_guards35.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(import_jsx_runtime229.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime229.jsx)("div", {}),
           /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
             ErrorMessages,
@@ -10292,12 +10322,15 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
+  const formState = (0, import_react45.useContext)(FormContext);
+  const derivedValue = typeof formState.values[name] === "string" ? formState.values[name] : value;
   const context = (0, import_react45.useMemo)(() => {
     return {
       name,
-      onChange
+      onChange,
+      value: derivedValue
     };
-  }, [name, onChange]);
+  }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
@@ -10343,7 +10376,7 @@ IconButton.displayName = "IconButton";
 // src/components/InputClickToCopy/InputClickToCopy.tsx
 var import_styled_components55 = __toESM(require("styled-components"));
 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 StyledInput2 = (0, import_styled_components55.default)(Input)`
   &:not([aria-disabled='true']) {
@@ -10371,12 +10404,12 @@ var InputClickToCopy = (0, import_react47.forwardRef)(
     }, [isCopied]);
     const handleClick = (event) => {
       event.preventDefault();
-      if ((0, import_type_guards35.isFunction)(props.onClick)) {
+      if ((0, import_type_guards36.isFunction)(props.onClick)) {
         props.onClick(event);
       }
       void copyToClipboard(value).then(() => {
         setIsCopied(true);
-        if ((0, import_type_guards35.isFunction)(onCopy)) {
+        if ((0, import_type_guards36.isFunction)(onCopy)) {
           onCopy(value);
         }
         return value;
@@ -10406,7 +10439,7 @@ InputClickToCopy.displayName = "InputClickToCopy";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
 var import_styled_components56 = __toESM(require("styled-components"));
-var import_type_guards36 = require("@wistia/type-guards");
+var import_type_guards37 = require("@wistia/type-guards");
 var import_jsx_runtime233 = require("react/jsx-runtime");
 var StyledKeyboardShortcut = import_styled_components56.default.div`
   align-items: center;
@@ -10500,7 +10533,7 @@ var KeyboardShortcut = ({
     $fullWidth: fullWidth,
     ...otherProps,
     children: [
-      (0, import_type_guards36.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Label2, { children: label }),
+      (0, import_type_guards37.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Label2, { children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
         StyledKey,
         {
@@ -10516,7 +10549,7 @@ KeyboardShortcut.displayName = "KeyboardShortcut";
 // src/components/Menu/Menu.tsx
 var import_styled_components57 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_type_guards37 = require("@wistia/type-guards");
+var import_type_guards38 = require("@wistia/type-guards");
 var import_react49 = require("react");
 
 // src/components/Menu/MenuContext.tsx
@@ -10628,7 +10661,7 @@ var Menu = ({
 }) => {
   const contextValue = (0, import_react49.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
-    ...(0, import_type_guards37.isNotNil)(onOpenChange) && (0, import_type_guards37.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards38.isNotNil)(onOpenChange) && (0, import_type_guards38.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -10642,7 +10675,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards37.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards38.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
@@ -10704,12 +10737,12 @@ MenuLabel.displayName = "MenuLabel";
 var import_react51 = require("react");
 var import_styled_components61 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards39 = require("@wistia/type-guards");
+var import_type_guards40 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react50 = require("react");
 var import_styled_components59 = __toESM(require("styled-components"));
-var import_type_guards38 = require("@wistia/type-guards");
+var import_type_guards39 = require("@wistia/type-guards");
 var import_jsx_runtime236 = require("react/jsx-runtime");
 var StyledButton3 = (0, import_styled_components59.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -10787,7 +10820,7 @@ var StyledBadgeContainer = import_styled_components59.default.div`
 var MenuItemButton = (0, import_react50.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if ((0, import_type_guards38.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards39.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
@@ -10817,7 +10850,7 @@ var MenuItemButton = (0, import_react50.forwardRef)(({ children, appearance, com
       children: [
         props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards38.isNotNil)(badge) || (0, import_type_guards38.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        (0, import_type_guards39.isNotNil)(badge) || (0, import_type_guards39.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -10889,7 +10922,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards39.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(MenuItemDescription, { children: description }) : null
+      (0, import_type_guards40.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
@@ -10981,7 +11014,7 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards40 = require("@wistia/type-guards");
+var import_type_guards41 = require("@wistia/type-guards");
 var import_jsx_runtime242 = require("react/jsx-runtime");
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ (0, import_jsx_runtime242.jsxs)(
@@ -11055,8 +11088,8 @@ var CheckboxMenuItem = ({
         MenuItemButton,
         {
           ...props,
-          leftIcon: (0, import_type_guards40.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(CheckboxIndicator, { checked }),
-          rightIcon: (0, import_type_guards40.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Icon, { type: "checkmark" }) }) : void 0
+          leftIcon: (0, import_type_guards41.isNotNil)(props.icon) ? props.icon : /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(CheckboxIndicator, { checked }),
+          rightIcon: (0, import_type_guards41.isNotNil)(props.icon) ? /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -11068,7 +11101,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 var import_react56 = require("react");
 var import_styled_components66 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_type_guards42 = require("@wistia/type-guards");
+var import_type_guards43 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components63 = __toESM(require("styled-components"));
@@ -11131,7 +11164,7 @@ var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react53 = require("react");
-var import_type_guards41 = require("@wistia/type-guards");
+var import_type_guards42 = require("@wistia/type-guards");
 var useFocusRestore = () => {
   const previouslyFocusedRef = (0, import_react53.useRef)(null);
   (0, import_react53.useEffect)(() => {
@@ -11139,7 +11172,7 @@ var useFocusRestore = () => {
   }, []);
   (0, import_react53.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards41.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards42.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -11330,7 +11363,7 @@ var Modal = (0, import_react56.forwardRef)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards42.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards43.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -11345,7 +11378,7 @@ var Modal = (0, import_react56.forwardRef)(
               alignVertical,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards42.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards43.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -11379,9 +11412,9 @@ var import_react_popover2 = require("@radix-ui/react-popover");
 var import_styled_components68 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
-var import_type_guards43 = require("@wistia/type-guards");
+var import_type_guards44 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards43.isNotNil)(onOpenChange) && (0, import_type_guards43.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards44.isNotNil)(onOpenChange) && (0, import_type_guards44.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
@@ -11536,7 +11569,7 @@ Popover.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components69 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
-var import_type_guards44 = require("@wistia/type-guards");
+var import_type_guards45 = require("@wistia/type-guards");
 var import_jsx_runtime250 = require("react/jsx-runtime");
 var ProgressBarWrapper = import_styled_components69.default.div`
   --progress-bar-height: 8px;
@@ -11591,7 +11624,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime250.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards44.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    (0, import_type_guards45.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(
       StyledProgressBar,
       {
@@ -11607,7 +11640,7 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards44.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards45.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
@@ -11615,7 +11648,7 @@ ProgressBar.displayName = "ProgressBar";
 // src/components/Radio/Radio.tsx
 var import_react57 = require("react");
 var import_styled_components70 = __toESM(require("styled-components"));
-var import_type_guards45 = require("@wistia/type-guards");
+var import_type_guards46 = require("@wistia/type-guards");
 var import_jsx_runtime251 = require("react/jsx-runtime");
 var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
   "svg",
@@ -11732,12 +11765,14 @@ var Radio = (0, import_react57.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react57.useId)();
-    const computedId = (0, import_type_guards45.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards46.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 = contextValue === value;
     return /* @__PURE__ */ (0, import_jsx_runtime251.jsxs)(
       StyledRadioWrapper,
       {
@@ -11756,7 +11791,8 @@ var Radio = (0, import_react57.forwardRef)(
               onChange: handleOnChange,
               required,
               type: "radio",
-              value
+              value,
+              ...(0, import_type_guards46.isNotUndefined)(defaultChecked) ? { defaultChecked } : { checked }
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
@@ -11789,7 +11825,7 @@ Radio.displayName = "Radio";
 var import_react60 = require("react");
 var import_styled_components72 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
-var import_type_guards46 = require("@wistia/type-guards");
+var import_type_guards47 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 var import_react58 = require("react");
@@ -11889,7 +11925,7 @@ var SegmentedControl = (0, import_react60.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards46.isNil)(children)) {
+    if ((0, import_type_guards47.isNil)(children)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
@@ -11918,7 +11954,7 @@ SegmentedControl.displayName = "SegmentedControl";
 var import_react61 = require("react");
 var import_styled_components73 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
-var import_type_guards47 = require("@wistia/type-guards");
+var import_type_guards48 = require("@wistia/type-guards");
 var import_jsx_runtime255 = require("react/jsx-runtime");
 var segmentedControlItemStyles = import_styled_components73.css`
   all: unset; /* ToggleGroupItem is a button element */
@@ -12026,8 +12062,8 @@ var SegmentedControlItem = (0, import_react61.forwardRef)(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: (0, import_type_guards47.isNotNil)(label),
-        "aria-label": (0, import_type_guards47.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards48.isNotNil)(label),
+        "aria-label": (0, import_type_guards48.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -12159,7 +12195,7 @@ Select.displayName = "Select";
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react63 = require("react");
 var import_styled_components75 = __toESM(require("styled-components"));
-var import_type_guards48 = require("@wistia/type-guards");
+var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime257 = require("react/jsx-runtime");
 var StyledItem = (0, import_styled_components75.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
@@ -12203,7 +12239,7 @@ var SelectOption = (0, import_react63.forwardRef)(
               type: "checkmark"
             }
           ) }) }),
-          (0, import_type_guards48.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)("div", { children: [
+          (0, import_type_guards49.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)("div", { children: [
             children,
             /* @__PURE__ */ (0, import_jsx_runtime257.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(import_react_select2.ItemText, { children })
@@ -12238,7 +12274,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 // src/components/Switch/Switch.tsx
 var import_react64 = require("react");
 var import_styled_components77 = __toESM(require("styled-components"));
-var import_type_guards49 = require("@wistia/type-guards");
+var import_type_guards50 = require("@wistia/type-guards");
 var import_jsx_runtime259 = require("react/jsx-runtime");
 var sizeSmall3 = import_styled_components77.css`
   --wui-size-small-width: 24px;
@@ -12357,7 +12393,7 @@ var Switch = (0, import_react64.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react64.useId)();
-    const computedId = (0, import_type_guards49.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = (0, import_type_guards50.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
         StyledHiddenSwitchInput,
@@ -12512,7 +12548,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 var import_react_tabs = require("@radix-ui/react-tabs");
 var import_react68 = require("react");
-var import_type_guards50 = require("@wistia/type-guards");
+var import_type_guards51 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react67 = require("react");
@@ -12549,10 +12585,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if ((0, import_type_guards50.isNotNil)(value)) {
+  if ((0, import_type_guards51.isNotNil)(value)) {
     rootProps.value = value;
   }
-  if ((0, import_type_guards50.isNotNil)(defaultValue)) {
+  if ((0, import_type_guards51.isNotNil)(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime266.jsx)(SelectedItemStyleProvider, { children }) }) });
@@ -12612,7 +12648,7 @@ TabsList.displayName = "TabsList";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react69 = require("react");
-var import_type_guards51 = require("@wistia/type-guards");
+var import_type_guards52 = require("@wistia/type-guards");
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
 var import_styled_components86 = __toESM(require("styled-components"));
@@ -12663,8 +12699,8 @@ var TabsTrigger = (0, import_react69.forwardRef)(
       {
         ...otherProps,
         ref: combinedRef,
-        $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,
         value,
         children: [
@@ -12680,7 +12716,7 @@ TabsTrigger.displayName = "TabsTrigger";
 // src/components/Tag/Tag.tsx
 var import_react70 = require("react");
 var import_styled_components87 = __toESM(require("styled-components"));
-var import_type_guards52 = require("@wistia/type-guards");
+var import_type_guards53 = require("@wistia/type-guards");
 var import_jsx_runtime271 = require("react/jsx-runtime");
 var TagLabel = import_styled_components87.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12765,10 +12801,10 @@ var StyledTag = import_styled_components87.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards52.isNil)(onClickRemove)) {
+  if ((0, import_type_guards53.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards52.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards53.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -12797,8 +12833,8 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = (0, import_react70.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
-    const hasIcon = (0, import_type_guards52.isNotNil)(icon);
-    const labelProps = (0, import_type_guards52.isNotNil)(href) && (0, import_type_guards52.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    const hasIcon = (0, import_type_guards53.isNotNil)(icon);
+    const labelProps = (0, import_type_guards53.isNotNil)(href) && (0, import_type_guards53.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime271.jsxs)(
       StyledTag,
       {
@@ -12834,7 +12870,7 @@ Tag.displayName = "Tag";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components88 = __toESM(require("styled-components"));
-var import_type_guards53 = require("@wistia/type-guards");
+var import_type_guards54 = require("@wistia/type-guards");
 var import_jsx_runtime272 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components88.default.div`
   align-items: center;
@@ -12862,7 +12898,7 @@ var StyledThumbnailBadge = import_styled_components88.default.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(StyledThumbnailBadge, { ...props, children: [
-    (0, import_type_guards53.isNotNil)(icon) && icon,
+    (0, import_type_guards54.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("span", { children: label })
   ] });
 };
@@ -12871,10 +12907,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react71 = require("react");
 var import_styled_components91 = __toESM(require("styled-components"));
-var import_type_guards56 = require("@wistia/type-guards");
+var import_type_guards57 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards54 = require("@wistia/type-guards");
+var import_type_guards55 = require("@wistia/type-guards");
 var import_styled_components89 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components89.css`
@@ -13002,12 +13038,12 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards54.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards55.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 var import_styled_components90 = __toESM(require("styled-components"));
-var import_type_guards55 = require("@wistia/type-guards");
+var import_type_guards56 = require("@wistia/type-guards");
 var import_jsx_runtime273 = require("react/jsx-runtime");
 var ScrubLine = import_styled_components90.default.div`
   position: absolute;
@@ -13093,8 +13129,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = (0, import_type_guards55.isNotNil)(cursorPosition);
-  const scrubLinePosition = (0, import_type_guards55.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = (0, import_type_guards56.isNotNil)(cursorPosition);
+  const scrubLinePosition = (0, import_type_guards56.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -13164,10 +13200,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = import_styled_components91.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards56.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards57.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards56.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards57.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -13209,10 +13245,10 @@ var Thumbnail = (0, import_react71.forwardRef)(
     const storyboardElementRef = (0, import_react71.useRef)(null);
     const [cursorPosition, setCursorPosition] = (0, import_react71.useState)(null);
     const backgroundUrl = (0, import_react71.useMemo)(
-      () => thumbnailImageType === "square" && (0, import_type_guards56.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && (0, import_type_guards57.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = (0, import_type_guards56.isNotNil)(storyboard);
+    const isScrubbable = (0, import_type_guards57.isNotNil)(storyboard);
     const trackStoryboardLoadStatus = (0, import_react71.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -13245,7 +13281,7 @@ var Thumbnail = (0, import_react71.forwardRef)(
       return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
     }, [isScrubbable, isMouseOver, isStoryboardReady]);
     const renderStoryboard = (0, import_react71.useCallback)(() => {
-      if (!storyboard || (0, import_type_guards56.isUndefined)(height) || (0, import_type_guards56.isEmptyString)(height)) return null;
+      if (!storyboard || (0, import_type_guards57.isUndefined)(height) || (0, import_type_guards57.isEmptyString)(height)) return null;
       const {
         url,
         width: sbWidth,
@@ -13255,7 +13291,7 @@ var Thumbnail = (0, import_react71.forwardRef)(
         frameCount,
         aspectRatio
       } = storyboard;
-      const targetWidth = (0, import_type_guards56.isString)(width) ? parseInt(width, 10) : Number(width);
+      const targetWidth = (0, import_type_guards57.isString)(width) ? parseInt(width, 10) : Number(width);
       const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
       return /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
         ThumbnailStoryboardViewer,
@@ -13276,7 +13312,7 @@ var Thumbnail = (0, import_react71.forwardRef)(
     let thumbnailContent = null;
     if (shouldRenderStoryboard) {
       thumbnailContent = renderStoryboard();
-    } else if ((0, import_type_guards56.isNotNil)(thumbnailUrl)) {
+    } else if ((0, import_type_guards57.isNotNil)(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime274.jsx)(
         ThumbnailImage,
         {
@@ -13301,7 +13337,7 @@ var Thumbnail = (0, import_react71.forwardRef)(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          (0, import_type_guards56.isNotNil)(children) ? children : null,
+          (0, import_type_guards57.isNotNil)(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -13313,7 +13349,7 @@ Thumbnail.displayName = "Thumbnail";
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react72 = __toESM(require("react"));
 var import_styled_components92 = __toESM(require("styled-components"));
-var import_type_guards57 = require("@wistia/type-guards");
+var import_type_guards58 = require("@wistia/type-guards");
 var import_jsx_runtime275 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
@@ -13393,7 +13429,7 @@ var ThumbnailCollage = ({
 }) => {
   const thumbnailArray = import_react72.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
-  const thumbnails = (0, import_type_guards57.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
+  const thumbnails = (0, import_type_guards58.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
     return import_react72.default.cloneElement(child, {
       ...child.props,
       children: void 0
@@ -13421,7 +13457,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components93 = __toESM(require("styled-components"));
-var import_type_guards58 = require("@wistia/type-guards");
+var import_type_guards59 = require("@wistia/type-guards");
 var import_jsx_runtime276 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -13534,7 +13570,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("title", { children: title }),
-        (0, import_type_guards58.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards59.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime276.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -13545,18 +13581,18 @@ var WistiaLogo = ({
 WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/List/List.tsx
-var import_type_guards60 = require("@wistia/type-guards");
+var import_type_guards61 = require("@wistia/type-guards");
 var import_styled_components95 = __toESM(require("styled-components"));
 
 // src/components/List/ListItem.tsx
 var import_styled_components94 = __toESM(require("styled-components"));
-var import_type_guards59 = require("@wistia/type-guards");
+var import_type_guards60 = require("@wistia/type-guards");
 var import_jsx_runtime277 = require("react/jsx-runtime");
 var ListItemComponent = import_styled_components94.default.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
-  if ((0, import_type_guards59.isNil)(children)) {
+  if ((0, import_type_guards60.isNil)(children)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(ListItemComponent, { children });
@@ -13686,13 +13722,13 @@ var List = ({
   ...otherProps
 }) => {
   const listVariant = variant ?? "bullets";
-  if ((0, import_type_guards60.isNotNil)(children)) {
+  if ((0, import_type_guards61.isNotNil)(children)) {
     if (Array.isArray(children) && !children.length) {
       return null;
     }
     return renderListComponent(children, listVariant, otherProps);
   }
-  if ((0, import_type_guards60.isNotNil)(items)) {
+  if ((0, import_type_guards61.isNotNil)(items)) {
     if (!items.length) {
       return null;
     }