@wistia/ui 0.10.10 → 0.10.11

package/dist/index.mjs

@@ -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.
  *
@@ -7331,7 +7331,7 @@ var StyledActionButton = styled6(Button)`
   }
 
   &:hover,
-  :focus-visible {
+  &:focus-visible {
     --wui-color-text: var(--wui-color-text-button);
 
     ${({ $hoverColorScheme }) => getColorScheme($hoverColorScheme)};
@@ -7839,24 +7839,25 @@ var getFlexStyle = (flexMode) => {
   }
 };
 var StyledBoxComponent = styled11.div`
+  /* properties meant for Box parent (flex container) */
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
-  align-self: ${({ $alignSelf }) => $alignSelf ?? null};
   display: ${({ $inline }) => isNotNil10($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => isNotNil10($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 }) => isNotNil10($basis) ? $basis : null};
   flex-grow: ${({ $grow }) => isNotNil10($grow) ? $grow : null};
   flex-shrink: ${({ $shrink }) => isNotNil10($shrink) ? $shrink : null};
-  flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
-  justify-content: ${({ $justifyContent }) => $justifyContent};
   order: ${({ $order }) => isNotNil10($order) ? $order : null};
 `;
 var DEFAULT_ELEMENT = "div";
@@ -8743,9 +8744,9 @@ var Center = forwardRef9(
 Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef11, useId } from "react";
-import styled26, { css as css25 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
+import { forwardRef as forwardRef12, useId as useId2 } from "react";
+import styled27, { css as css25 } from "styled-components";
+import { isNonEmptyString as isNonEmptyString2, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import styled23, { css as css24 } from "styled-components";
@@ -8864,7 +8865,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { createContext as createContext3, useMemo as useMemo6, useContext as useContext3 } from "react";
+import { createContext as createContext4, useMemo as useMemo7, useContext as useContext3 } from "react";
+import { isArray } from "@wistia/type-guards";
 
 // src/components/FormGroup/FormGroup.tsx
 import styled25 from "styled-components";
@@ -8934,9 +8936,130 @@ var FormGroup = ({ children, label, ...props }) => {
 };
 FormGroup.displayName = "FormGroup";
 
-// src/components/FormGroup/CheckboxGroup.tsx
+// src/components/Form/Form.tsx
+import { forwardRef as forwardRef11, useRef as useRef8, useMemo as useMemo6, createContext as createContext3, useState as useState11, useId } from "react";
+import styled26 from "styled-components";
+import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@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
 import { jsx as jsx216 } from "react/jsx-runtime";
-var CheckboxGroupContext = createContext3(null);
+var StyledForm = styled26.form`
+  --form-default-width: 690px;
+
+  max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
+`;
+var FormContext = createContext3({
+  values: {},
+  errors: {},
+  hasSubmitted: false,
+  formId: "NO_FORM",
+  labelPosition: "block"
+});
+var FormComponent = ({
+  children,
+  action,
+  values = {},
+  labelPosition = "block",
+  validate,
+  fullWidth = false,
+  ...props
+}, forwardedRef) => {
+  const [errors, setErrors] = useState11({});
+  const [hasSubmitted, setHasSubmitted] = useState11(false);
+  const innerRef = useRef8();
+  const ref = forwardedRef ?? innerRef;
+  const autoId = useId();
+  const id = props.id ?? autoId;
+  const handleValidate = (nextFormData) => {
+    const nextData = serializeFormData(nextFormData);
+    if (isUndefined3(validate)) {
+      return {};
+    }
+    return validate(nextData);
+  };
+  const handleBlur2 = (event) => {
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+    const formData = new FormData(event.currentTarget);
+    if (isNotUndefined6(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 = useMemo6(() => {
+    return {
+      values,
+      errors,
+      hasSubmitted,
+      formId: id,
+      labelPosition
+    };
+  }, [labelPosition, values, errors, id, hasSubmitted]);
+  return (
+    // @ts-expect-error - generic context providers are a giant pain
+    /* @__PURE__ */ jsx216(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx216(
+      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 = forwardRef11(FormComponent);
+
+// src/components/FormGroup/CheckboxGroup.tsx
+import { jsx as jsx217 } from "react/jsx-runtime";
+var CheckboxGroupContext = createContext4(null);
 var useCheckboxGroup = () => {
   return useContext3(CheckboxGroupContext);
 };
@@ -8947,19 +9070,22 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = useMemo6(() => {
+  const formState = useContext3(FormContext);
+  const derivedValue = isArray(formState.values[name]) ? formState.values[name] : value;
+  const context = useMemo7(() => {
     return {
-      name,
-      onChange
+      name: `${name}[]`,
+      onChange,
+      value: derivedValue
     };
-  }, [name, onChange]);
-  return /* @__PURE__ */ jsx216(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx216(FormGroup, { ...props, children }) });
+  }, [name, derivedValue, onChange]);
+  return /* @__PURE__ */ jsx217(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx217(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx217, jsxs as jsxs17 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx217(
+import { jsx as jsx218, jsxs as jsxs17 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx218(
   "svg",
   {
     fill: "inherit",
@@ -8967,7 +9093,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx217(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx217(
+    children: /* @__PURE__ */ jsx218(
       "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",
@@ -9014,14 +9140,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = styled26.div`
+var StyledCheckboxWrapper = styled27.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = styled26.div`
+var StyledCheckboxInput = styled27.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -9043,7 +9169,7 @@ var StyledCheckboxInput = styled26.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = styled26.input`
+var StyledHiddenCheckboxInput = styled27.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -9057,7 +9183,7 @@ var StyledHiddenCheckboxInput = styled26.input`
     display: block;
   }
 `;
-var Checkbox = forwardRef11(
+var Checkbox = forwardRef12(
   ({
     checked,
     disabled = false,
@@ -9072,20 +9198,22 @@ var Checkbox = forwardRef11(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = useId();
+    const generatedId = useId2();
     const computedId = isNonEmptyString2(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;
+    const defaultChecked = isNotUndefined7(value) && contextValue ? contextValue.includes(value) : void 0;
     return /* @__PURE__ */ jsxs17(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ jsx217(
+      /* @__PURE__ */ jsx218(
         StyledHiddenCheckboxInput,
         {
           ...props,
           ref,
-          checked,
+          ...isNotUndefined7(defaultChecked) ? { defaultChecked } : { checked },
           disabled,
           id: computedId,
           name: checkboxName,
@@ -9095,16 +9223,16 @@ var Checkbox = forwardRef11(
           value
         }
       ),
-      /* @__PURE__ */ jsx217(
+      /* @__PURE__ */ jsx218(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ jsx217(
+          controlSlot: /* @__PURE__ */ jsx218(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ jsx217(CheckIcon, {})
+              children: /* @__PURE__ */ jsx218(CheckIcon, {})
             }
           ),
           description,
@@ -9165,9 +9293,9 @@ ClickRegion.displayName = "ClickRegion";
 // src/components/Collapsible/Collapsible.tsx
 import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
-import styled27 from "styled-components";
-import { jsx as jsx218 } from "react/jsx-runtime";
-var StyledRoot = styled27(CollapsibleRoot)`
+import styled28 from "styled-components";
+import { jsx as jsx219 } from "react/jsx-runtime";
+var StyledRoot = styled28(CollapsibleRoot)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -9183,16 +9311,16 @@ var Collapsible = ({
   const controlProps = {
     ...isNotNil16(onOpenChange) && isNotNil16(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx218(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx219(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
-import styled28 from "styled-components";
-import { jsx as jsx219 } from "react/jsx-runtime";
-var StyledTrigger = styled28(Trigger)`
+import styled29 from "styled-components";
+import { jsx as jsx220 } from "react/jsx-runtime";
+var StyledTrigger = styled29(Trigger)`
   [data-wui-collapsible-icon] {
     transition: transform var(--wui-motion-duration-03) ease-in-out;
   }
@@ -9215,11 +9343,11 @@ var StyledTrigger = styled28(Trigger)`
 `;
 var CollapsibleTrigger = ({ children }) => {
   Children4.only(children);
-  return /* @__PURE__ */ jsx219(StyledTrigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx220(StyledTrigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleTriggerIcon.tsx
-import { jsx as jsx220 } from "react/jsx-runtime";
+import { jsx as jsx221 } from "react/jsx-runtime";
 var iconRotationMap = {
   "caret-left-strong": "-90",
   "caret-left": "-90",
@@ -9228,7 +9356,7 @@ var iconRotationMap = {
   plus: "45"
 };
 var CollapsibleTriggerIcon = ({ type, ...props }) => {
-  return /* @__PURE__ */ jsx220(
+  return /* @__PURE__ */ jsx221(
     Icon,
     {
       ...props,
@@ -9241,16 +9369,16 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
 CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import styled29 from "styled-components";
+import styled30 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
-import { isNotUndefined as isNotUndefined6 } from "@wistia/type-guards";
-import { Fragment as Fragment4, jsx as jsx221, jsxs as jsxs18 } from "react/jsx-runtime";
-var ClampedContent = styled29.div`
+import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
+import { Fragment as Fragment4, jsx as jsx222, jsxs as jsxs18 } from "react/jsx-runtime";
+var ClampedContent = styled30.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if (isNotUndefined6(clamp)) {
-    return /* @__PURE__ */ jsx221(
+  if (isNotUndefined8(clamp)) {
+    return /* @__PURE__ */ jsx222(
       ClampedContent,
       {
         $clamp: clamp,
@@ -9259,7 +9387,7 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx221(Content, { children: /* @__PURE__ */ jsxs18(Fragment4, { children: [
+  return /* @__PURE__ */ jsx222(Content, { children: /* @__PURE__ */ jsxs18(Fragment4, { children: [
     children,
     " "
   ] }) });
@@ -9268,23 +9396,23 @@ var CollapsibleContent = ({ clamp, children }) => {
 // src/components/Combobox/Combobox.tsx
 import * as Ariakit from "@ariakit/react";
 import {
-  useMemo as useMemo7,
-  useRef as useRef8,
-  useState as useState11,
+  useMemo as useMemo8,
+  useRef as useRef9,
+  useState as useState12,
   useTransition,
   useEffect as useEffect10,
   Children as Children5,
   isValidElement as isValidElement2
 } from "react";
 import { matchSorter } from "match-sorter";
-import styled31 from "styled-components";
+import styled32 from "styled-components";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef12 } from "react";
-import styled30 from "styled-components";
+import { forwardRef as forwardRef13 } from "react";
+import styled31 from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil17, isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { Fragment as Fragment5, jsx as jsx222, jsxs as jsxs19 } from "react/jsx-runtime";
-var TagLabel = styled30.a`
+import { Fragment as Fragment5, jsx as jsx223, jsxs as jsxs19 } from "react/jsx-runtime";
+var TagLabel = styled31.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -9302,31 +9430,31 @@ var TagLabel = styled30.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 = styled30.div`
+var TagDivider = styled31.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled30.button`
+var StyledRemoveButton = styled31.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -9341,20 +9469,20 @@ var StyledRemoveButton = styled30.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 = styled30.div`
+var StyledTag = styled31.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -9376,7 +9504,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     );
   }
   return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsx222(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsx223(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs19(
       StyledRemoveButton,
       {
@@ -9384,20 +9512,20 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx222(
+          /* @__PURE__ */ jsx223(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx222(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx223(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = forwardRef12(
+var Tag = forwardRef13(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = isNotNil17(icon);
     const labelProps = isNotNil17(href) && isNonEmptyString3(href) ? { href, as: "a" } : { as: "span" };
@@ -9419,7 +9547,7 @@ var Tag = forwardRef12(
               ]
             }
           ),
-          /* @__PURE__ */ jsx222(
+          /* @__PURE__ */ jsx223(
             RemoveButton,
             {
               colorScheme,
@@ -9462,8 +9590,8 @@ var inputCss = css26`
 `;
 
 // src/components/Combobox/Combobox.tsx
-import { jsx as jsx223, jsxs as jsxs20 } from "react/jsx-runtime";
-var ComboboxWapper = styled31.div`
+import { jsx as jsx224, jsxs as jsxs20 } from "react/jsx-runtime";
+var ComboboxWapper = styled32.div`
   ${inputCss};
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -9512,7 +9640,7 @@ var ComboboxWapper = styled31.div`
     }
   }
 `;
-var ComboboxInput = styled31(Ariakit.Combobox)`
+var ComboboxInput = styled32(Ariakit.Combobox)`
   appearance: none;
   padding: 0;
   width: 100%;
@@ -9527,7 +9655,7 @@ var ComboboxInput = styled31(Ariakit.Combobox)`
     outline-width: 2px;
   }
 `;
-var ComboboxPopover = styled31(Ariakit.Popover)`
+var ComboboxPopover = styled32(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);
@@ -9552,7 +9680,7 @@ var ComboboxPopover = styled31(Ariakit.Popover)`
     --item-opacity: 0.5;
   }
 `;
-var ComboboxItem2 = styled31(Ariakit.ComboboxItem)`
+var ComboboxItem2 = styled32(Ariakit.ComboboxItem)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-combobox-option-padding);
@@ -9577,12 +9705,12 @@ var ComboboxItem2 = styled31(Ariakit.ComboboxItem)`
     background-color: transparent;
   }
 `;
-var NoResults = styled31.div`
+var NoResults = styled32.div`
   gap: var(--wui-space-02);
 `;
 var POPOVER_WIDTH_OFFSET = 20;
 var ComboboxOption = ({ value, children }) => {
-  return /* @__PURE__ */ jsx223(
+  return /* @__PURE__ */ jsx224(
     ComboboxItem2,
     {
       className: "combobox-item",
@@ -9611,9 +9739,9 @@ var Combobox2 = ({
   fullWidth = true
 }) => {
   const [isPending, startTransition] = useTransition();
-  const [wrapperWidth, setWrapperWidth] = useState11("auto");
-  const comboboxWrapperRef = useRef8(null);
-  const options = useMemo7(() => extractOptions(children), [children]);
+  const [wrapperWidth, setWrapperWidth] = useState12("auto");
+  const comboboxWrapperRef = useRef9(null);
+  const options = useMemo8(() => extractOptions(children), [children]);
   useEffect10(() => {
     const comboboxWrapper = comboboxWrapperRef.current;
     if (comboboxWrapper) {
@@ -9632,7 +9760,7 @@ var Combobox2 = ({
   const handleRemoveValue = (valueToRemove) => {
     onChange(value.filter((val) => val !== valueToRemove));
   };
-  const matches = useMemo7(() => {
+  const matches = useMemo8(() => {
     return matchSorter(Object.keys(options), searchValue);
   }, [options, searchValue]);
   return /* @__PURE__ */ jsxs20(
@@ -9652,7 +9780,7 @@ var Combobox2 = ({
             ref: comboboxWrapperRef,
             $fullWidth: fullWidth,
             children: [
-              value.map((selectedValue) => /* @__PURE__ */ jsx223(
+              value.map((selectedValue) => /* @__PURE__ */ jsx224(
                 Tag,
                 {
                   href: "https://example.com",
@@ -9662,7 +9790,7 @@ var Combobox2 = ({
                 },
                 selectedValue
               )),
-              /* @__PURE__ */ jsx223(ComboboxInput, { placeholder })
+              /* @__PURE__ */ jsx224(ComboboxInput, { placeholder })
             ]
           }
         ),
@@ -9683,7 +9811,7 @@ var Combobox2 = ({
                   focusOnHover: true,
                   value: match,
                   children: [
-                    /* @__PURE__ */ jsx223(
+                    /* @__PURE__ */ jsx224(
                       Icon,
                       {
                         size: "sm",
@@ -9698,7 +9826,7 @@ var Combobox2 = ({
                 },
                 match
               )),
-              !matches.length && /* @__PURE__ */ jsx223(NoResults, { children: "No results found" })
+              !matches.length && /* @__PURE__ */ jsx224(NoResults, { children: "No results found" })
             ]
           }
         )
@@ -9708,11 +9836,11 @@ var Combobox2 = ({
 };
 
 // src/components/DataCards/DataCard.tsx
-import { useRef as useRef9 } from "react";
-import styled32, { keyframes } from "styled-components";
+import { useRef as useRef10 } from "react";
+import styled33, { keyframes } from "styled-components";
 import { isNotNil as isNotNil18, isNotNull } from "@wistia/type-guards";
-import { jsx as jsx224, jsxs as jsxs21 } from "react/jsx-runtime";
-var StyledDataCard = styled32.div`
+import { jsx as jsx225, jsxs as jsxs21 } from "react/jsx-runtime";
+var StyledDataCard = styled33.div`
   display: grid;
   grid-template-areas: 'label slot' 'value value';
   grid-template-rows: auto auto;
@@ -9775,7 +9903,7 @@ var shimmer = keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled32.div`
+var LoadingBackground = styled33.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -9786,27 +9914,27 @@ var LoadingBackground = styled32.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled32(LoadingBackground)`
+var StyledLoadingLabel = styled33(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled32(LoadingBackground)`
+var StyledLoadingValue = styled33(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = styled32(Heading)`
+var StyledLabel2 = styled33(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled32(Heading)`
+var StyledValue = styled33(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled32.div`
+var StyledSlot = styled33.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled32.div`
+var StyledDataCardTrendContainer = styled33.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -9825,28 +9953,28 @@ var DataCardInner = ({
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx224(
+      /* @__PURE__ */ jsx225(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx224(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx225(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx224(
+      /* @__PURE__ */ jsx225(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx224(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx225(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx224(StyledSlot, { children: upperRightSlot }),
-      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx224(StyledDataCardTrendContainer, { children: trend })
+      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx225(StyledSlot, { children: upperRightSlot }),
+      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx225(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
-var DataCardArrowIcon = /* @__PURE__ */ jsx224(
+var DataCardArrowIcon = /* @__PURE__ */ jsx225(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -9854,14 +9982,14 @@ var DataCardArrowIcon = /* @__PURE__ */ jsx224(
   }
 );
 var DataCard = (props) => {
-  const ref = useRef9(null);
+  const ref = useRef10(null);
   if (isNotNil18(props.href) || isNotNil18(props.onClick)) {
-    return /* @__PURE__ */ jsx224(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx224(
+    return /* @__PURE__ */ jsx225(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx225(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot ?? DataCardArrowIcon,
         ...props,
-        label: /* @__PURE__ */ jsx224(
+        label: /* @__PURE__ */ jsx225(
           Button,
           {
             ref,
@@ -9876,14 +10004,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx224(DataCardInner, { ...props });
+  return /* @__PURE__ */ jsx225(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-import styled33 from "styled-components";
-import { jsx as jsx225 } from "react/jsx-runtime";
-var StyledDataCards = styled33(Box)`
+import styled34 from "styled-components";
+import { jsx as jsx226 } from "react/jsx-runtime";
+var StyledDataCards = styled34(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -9897,7 +10025,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx225(
+  return /* @__PURE__ */ jsx226(
     StyledDataCards,
     {
       ...props,
@@ -9915,9 +10043,9 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled34 from "styled-components";
-import { jsx as jsx226, jsxs as jsxs22 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled34.div`
+import styled35 from "styled-components";
+import { jsx as jsx227, jsxs as jsxs22 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled35.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -9933,7 +10061,7 @@ var DataCardTrend = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs22(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx226(
+    /* @__PURE__ */ jsx227(
       Icon,
       {
         size: "md",
@@ -9941,7 +10069,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx226(
+    /* @__PURE__ */ jsx227(
       Text,
       {
         prominence: "secondary",
@@ -9953,8 +10081,8 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled35, { css as css27 } from "styled-components";
-import { jsx as jsx227 } from "react/jsx-runtime";
+import styled36, { css as css27 } from "styled-components";
+import { jsx as jsx228 } from "react/jsx-runtime";
 var horizontalBorderCss = css27`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -9968,7 +10096,7 @@ var verticalBorderCss = css27`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled35.div`
+var DividerComponent = styled36.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -9980,7 +10108,7 @@ var DividerComponent = styled35.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ jsx227(
+  return /* @__PURE__ */ jsx228(
     DividerComponent,
     {
       $orientation: orientation,
@@ -9993,8 +10121,8 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled38, { css as css29 } from "styled-components";
-import { useState as useState12, useRef as useRef11 } from "react";
+import styled39, { css as css29 } from "styled-components";
+import { useState as useState13, useRef as useRef12 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -10004,8 +10132,8 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled36, { keyframes as keyframes2 } from "styled-components";
-import { jsx as jsx228, jsxs as jsxs23 } from "react/jsx-runtime";
+import styled37, { keyframes as keyframes2 } from "styled-components";
+import { jsx as jsx229, jsxs as jsxs23 } from "react/jsx-runtime";
 var hide = keyframes2`
   from {
     opacity: 1;
@@ -10054,7 +10182,7 @@ var slideRightAndFade = keyframes2`
     transform: translateX(0);
   }
 `;
-var StyledContent = styled36(TooltipContent)`
+var StyledContent = styled37(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -10122,15 +10250,15 @@ var Tooltip = ({
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx228(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx228(TooltipPortal, { children: /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsx229(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx229(TooltipPortal, { children: /* @__PURE__ */ jsxs23(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx228(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx228(
+              !hideArrow ? /* @__PURE__ */ jsx229(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx229(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -10139,7 +10267,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx228("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__ */ jsx229("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
             ]
@@ -10152,10 +10280,10 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef13, cloneElement as cloneElement4, useRef as useRef10 } from "react";
-import styled37, { css as css28 } from "styled-components";
+import { forwardRef as forwardRef14, cloneElement as cloneElement4, useRef as useRef11 } from "react";
+import styled38, { css as css28 } from "styled-components";
 import { isNil as isNil14, isNotNil as isNotNil19, isRecord as isRecord4 } from "@wistia/type-guards";
-import { jsx as jsx229, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx230, jsxs as jsxs24 } from "react/jsx-runtime";
 var inputStyles = css28`
   ${inputCss}
   input,
@@ -10191,7 +10319,7 @@ var inputStyles = css28`
     }
   }
 `;
-var StyledInputContainer = styled37.div`
+var StyledInputContainer = styled38.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -10239,8 +10367,8 @@ var StyledInputContainer = styled37.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;
   }
 
@@ -10253,12 +10381,12 @@ var StyledInputContainer = styled37.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 = forwardRef13(
+var Input = forwardRef14(
   ({
     fullWidth = true,
     monospace = false,
@@ -10268,14 +10396,14 @@ var Input = forwardRef13(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = useRef10();
+    const internalRef = useRef11();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
       isNotNil19(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
     if (isNil14(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx229(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx230(Icon, { type: "search" });
     }
     if (isNotNil19(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
@@ -10307,14 +10435,14 @@ var Input = forwardRef13(
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx229(
+          type === "multiline" ? /* @__PURE__ */ jsx230(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ jsx229(
+          ) : /* @__PURE__ */ jsx230(
             "input",
             {
               ...props,
@@ -10332,8 +10460,8 @@ var Input = forwardRef13(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { Fragment as Fragment6, jsx as jsx230, jsxs as jsxs25 } from "react/jsx-runtime";
-var StyledInput = styled38(Input)`
+import { Fragment as Fragment6, jsx as jsx231, jsxs as jsxs25 } from "react/jsx-runtime";
+var StyledInput = styled39(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -10348,6 +10476,7 @@ var StyledInput = styled38(Input)`
     padding: var(--wui-space-02);
     border: none;
     height: ${({ $height }) => `${$height}px`};
+    min-height: ${({ $height }) => `${$height}px`};
   }
 `;
 var editableStyles = css29`
@@ -10360,7 +10489,7 @@ var editableStyles = css29`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled38(Heading)`
+var StyledHeading2 = styled39(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -10377,11 +10506,11 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = useState12(false);
-  const [value, setValue] = useState12(children);
-  const [previousValue, setPreviousValue] = useState12(children);
-  const [headingHeight, setHeadingHeight] = useState12("60");
-  const headingRef = useRef11(null);
+  const [isEditing, setIsEditing] = useState13(false);
+  const [value, setValue] = useState13(children);
+  const [previousValue, setPreviousValue] = useState13(children);
+  const [headingHeight, setHeadingHeight] = useState13("60");
+  const headingRef = useRef12(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -10414,7 +10543,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx230(
+  const HeadingComponent2 = /* @__PURE__ */ jsx231(
     StyledHeading2,
     {
       ref: headingRef,
@@ -10428,7 +10557,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ jsx230(
+    return /* @__PURE__ */ jsx231(
       StyledInput,
       {
         $height: headingHeight,
@@ -10447,8 +10576,8 @@ var EditableHeading = ({
     );
   }
   return /* @__PURE__ */ jsxs25(Fragment6, { children: [
-    /* @__PURE__ */ jsx230(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ jsx230(ScreenReaderOnly, { children: /* @__PURE__ */ jsx230(
+    /* @__PURE__ */ jsx231(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ jsx231(ScreenReaderOnly, { children: /* @__PURE__ */ jsx231(
       "button",
       {
         "aria-label": ariaLabel,
@@ -10459,110 +10588,6 @@ var EditableHeading = ({
   ] });
 };
 
-// src/components/Form/Form.tsx
-import { forwardRef as forwardRef14, useRef as useRef12, useMemo as useMemo8, createContext as createContext4, useState as useState13, useId as useId2 } from "react";
-import styled39 from "styled-components";
-import { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
-import { jsx as jsx231 } from "react/jsx-runtime";
-var StyledForm = styled39.form`
-  --form-default-width: 690px;
-
-  max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
-  align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
-`;
-var FormContext = createContext4({
-  values: {},
-  errors: {},
-  hasSubmitted: false,
-  formId: "NO_FORM",
-  labelPosition: "block"
-});
-var FormComponent = ({
-  children,
-  action,
-  values = {},
-  labelPosition = "block",
-  validate,
-  fullWidth = false,
-  ...props
-}, forwardedRef) => {
-  const [errors, setErrors] = useState13({});
-  const [hasSubmitted, setHasSubmitted] = useState13(false);
-  const innerRef = useRef12();
-  const ref = forwardedRef ?? innerRef;
-  const autoId = useId2();
-  const id = props.id ?? autoId;
-  const handleValidate = (nextFormData) => {
-    const nextData = Object.fromEntries(nextFormData.entries());
-    if (isUndefined3(validate)) {
-      return {};
-    }
-    return validate(nextData);
-  };
-  const handleBlur2 = (event) => {
-    if (props.onBlur) {
-      props.onBlur(event);
-    }
-    const formData = new FormData(event.currentTarget);
-    if (isNotUndefined7(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 = useMemo8(() => {
-    return {
-      values,
-      errors,
-      hasSubmitted,
-      formId: id,
-      labelPosition
-    };
-  }, [labelPosition, values, errors, id, hasSubmitted]);
-  return (
-    // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ jsx231(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx231(
-      Stack,
-      {
-        ...props,
-        ref,
-        $fullWidth: fullWidth,
-        as: StyledForm,
-        gap: "space-05",
-        id,
-        onBlur: handleBlur2,
-        onReset: handleReset,
-        onSubmit: handleSubmit,
-        children
-      }
-    ) })
-  );
-};
-FormComponent.displayName = "Form";
-var Form = forwardRef14(FormComponent);
-
 // src/components/Form/useFormState.tsx
 import { useCallback as useCallback9, useState as useState14 } from "react";
 var useFormState = (action, initialData = {}) => {
@@ -10576,7 +10601,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);
@@ -10601,7 +10626,7 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext4, useRef as useRef13 } from "react";
-import { isArray, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
+import { isArray as isArray2, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
 import { jsx as jsx232, jsxs as jsxs26 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ jsx232("li", { children: /* @__PURE__ */ jsx232(Link, { href: `#${formId}-${name}`, children: error }) }, name);
@@ -10615,8 +10640,8 @@ var FormErrorSummary = ({ description }) => {
   }
   return /* @__PURE__ */ jsxs26("div", { ref, children: [
     /* @__PURE__ */ jsx232("p", { children: description }),
-    /* @__PURE__ */ jsx232("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined8(error)).map(
-      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx232(
+    /* @__PURE__ */ jsx232("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined9(error)).map(
+      ([name, error]) => isArray2(error) ? error.map((err) => /* @__PURE__ */ jsx232(
         ErrorItem,
         {
           error: err,
@@ -10640,7 +10665,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 import { Children as Children6, cloneElement as cloneElement5, useContext as useContext5 } from "react";
 import styled41 from "styled-components";
-import { isArray as isArray2, isNotNil as isNotNil20, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import { isArray as isArray3, isNotNil as isNotNil20, isNotUndefined as isNotUndefined10, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
 import styled40, { css as css30 } from "styled-components";
@@ -10743,7 +10768,7 @@ var StyledErrorList = styled41.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = isArray2(errors);
+  const isMultipleErrors = isArray3(errors);
   return isMultipleErrors ? /* @__PURE__ */ jsx234(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx234(
     Text,
     {
@@ -10793,7 +10818,7 @@ var FormField = ({
     "aria-describedby": ariaDescribedby,
     ...props
   };
-  if (isUndefined4(value) && isNotUndefined9(defaultValue)) {
+  if (isUndefined4(value) && isNotUndefined10(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
@@ -10802,10 +10827,10 @@ var FormField = ({
   if (isNotNil20(checkboxGroup)) {
     const computedName = isNotNil20(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if (isNotUndefined9(props.onChange)) {
+      if (isNotUndefined10(props.onChange)) {
         props.onChange(event);
       }
-      if (isNotUndefined9(checkboxGroup.onChange)) {
+      if (isNotUndefined10(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -10856,12 +10881,15 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
+  const formState = useContext6(FormContext);
+  const derivedValue = typeof formState.values[name] === "string" ? formState.values[name] : value;
   const context = useMemo9(() => {
     return {
       name,
-      onChange
+      onChange,
+      value: derivedValue
     };
-  }, [name, onChange]);
+  }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ jsx235(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx235(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
@@ -11205,7 +11233,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil23, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
+import { isNotNil as isNotNil23, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
 import { useMemo as useMemo10 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -11331,7 +11359,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx240(DropdownMenuTrigger, { asChild: true, children: isNotUndefined10(trigger) ? trigger : /* @__PURE__ */ jsx240(
+        /* @__PURE__ */ jsx240(DropdownMenuTrigger, { asChild: true, children: isNotUndefined11(trigger) ? trigger : /* @__PURE__ */ jsx240(
           Button,
           {
             "aria-expanded": isOpen,
@@ -11405,7 +11433,7 @@ import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef16 } from "react";
 import styled48 from "styled-components";
-import { isNotNil as isNotNil24, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
+import { isNotNil as isNotNil24, isNotUndefined as isNotUndefined12 } from "@wistia/type-guards";
 import { jsx as jsx242, jsxs as jsxs31 } from "react/jsx-runtime";
 var StyledButton3 = styled48(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -11422,7 +11450,7 @@ var StyledButton3 = styled48(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);
   }
 
@@ -11483,7 +11511,7 @@ var StyledBadgeContainer = styled48.div`
 var MenuItemButton = forwardRef16(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if (isNotUndefined11(colorScheme)) {
+    if (isNotUndefined12(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
@@ -12319,7 +12347,7 @@ ProgressBar.displayName = "ProgressBar";
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef21, useId as useId3 } from "react";
 import styled59, { css as css36 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString4, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { jsx as jsx257, jsxs as jsxs39 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx257(
   "svg",
@@ -12440,8 +12468,10 @@ var Radio = forwardRef21(
     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 = isNotUndefined13(value) && isNotUndefined13(contextValue) ? contextValue.includes(value) : void 0;
     return /* @__PURE__ */ jsxs39(
       StyledRadioWrapper,
       {
@@ -12453,14 +12483,14 @@ var Radio = forwardRef21(
             {
               ...props,
               ref,
-              checked,
               disabled,
               id: computedId,
               name: radioName,
               onChange: handleOnChange,
               required,
               type: "radio",
-              value
+              value,
+              ...isNotUndefined13(defaultChecked) ? { defaultChecked } : { checked }
             }
           ),
           /* @__PURE__ */ jsx257(