@wistia/ui 0.0.21 → 0.0.22

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.21
+ * @license @wistia/ui v0.0.22
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -45,10 +45,15 @@ __export(src_exports, {
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
   Checkbox: () => Checkbox,
+  CheckboxGroup: () => CheckboxGroup,
   CheckboxMenuItem: () => CheckboxMenuItem,
   ColorSchemeWrapper: () => ColorSchemeWrapper,
   Divider: () => Divider,
   Ellipsis: () => Ellipsis,
+  Form: () => Form,
+  FormErrorSummary: () => FormErrorSummary,
+  FormField: () => FormField,
+  FormGroup: () => FormGroup,
   Heading: () => Heading,
   Icon: () => Icon,
   IconButton: () => IconButton,
@@ -61,6 +66,7 @@ __export(src_exports, {
   MenuLabel: () => MenuLabel,
   MenuRadioGroup: () => MenuRadioGroup,
   Radio: () => Radio,
+  RadioGroup: () => RadioGroup,
   RadioMenuItem: () => RadioMenuItem,
   ScreenReaderOnly: () => ScreenReaderOnly,
   Stack: () => Stack,
@@ -78,6 +84,7 @@ __export(src_exports, {
   mq: () => mq,
   useActiveMq: () => useActiveMq,
   useAriaLive: () => useAriaLive,
+  useFormState: () => useFormState,
   useMq: () => useMq,
   useWindowSize: () => useWindowSize
 });
@@ -1187,7 +1194,7 @@ var colorAliasTokens = import_styled_components4.css`
 
   /* --- Misc --- */
   --wui-color-bg-fill-white: #ffffff;
-  --wui-color-bg-nav: var(--wui-blue-600);
+  --wui-color-bg-nav: #1f3399;
   --wui-color-focus-color: var(--wui-blue-9);
   --wui-color-notification-pill-color: var(--wui-pink-9);
   --wui-color-overlay: var(--wui-gray-alpha-9);
@@ -5746,15 +5753,196 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_react_checkbox = require("@radix-ui/react-checkbox");
-var import_styled_components23 = __toESM(require("styled-components"));
-var import_type_guards15 = require("@wistia/type-guards");
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_type_guards16 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
+var import_styled_components23 = __toESM(require("styled-components"));
+
+// src/components/Heading/Heading.tsx
+var import_react11 = require("react");
+var import_styled_components22 = __toESM(require("styled-components"));
+
+// src/components/Ellipsis/Ellipsis.tsx
+var import_type_guards14 = require("@wistia/type-guards");
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_jsx_runtime164 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components21.css`
+var ellipsisStyle = import_styled_components21.css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  /*
+    Using feature detection (i.e., -webkit-named-image) we only target Safari browsers
+    with this additional styling to prevent a bug that's exclusive to Safari.
+
+    Note that Safari does not properly hide the truncated text for non-inline/inline-block
+    elements so we need to apply display: inline to all the paragraphs in the description.
+    see https://stackoverflow.com/a/70683084
+  */
+  @supports (background: - webkit-named-image(i)) {
+    & > div > div:has(p) {
+      margin-top: 16px;
+    }
+
+    & > div > div > p {
+      display: inline;
+    }
+  }
+`;
+var ellipsisFlexParentStyle = import_styled_components21.css`
+  min-width: 0;
+`;
+var EllipsisComponent = import_styled_components21.default.div`
+  ${ellipsisStyle};
+  ${({ $lines }) => {
+  if ((0, import_type_guards14.isNotNil)($lines)) {
+    return import_styled_components21.css`
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: ${$lines};
+        display: -webkit-box;
+        white-space: initial;
+      `;
+  }
+  return void 0;
+}}
+`;
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  EllipsisComponent,
+  {
+    $lines: lines,
+    ...otherProps,
+    children
+  }
+);
+Ellipsis.displayName = "Ellipsis";
+
+// src/private/helpers/makePolymorphic/makePolymorphic.tsx
+var makePolymorphic = (component) => {
+  return component;
+};
+
+// src/components/Heading/Heading.tsx
+var import_jsx_runtime165 = require("react/jsx-runtime");
+var heroStyle = import_styled_components22.css`
+  --font-family: var(--wui-typography-heading-hero-family);
+  --font-size: var(--wui-typography-heading-hero-size);
+  --font-weight: var(--wui-typography-heading-hero-weight);
+  --line-height: var(--wui-typography-heading-hero-line-height);
+`;
+var heading1TextStyle = import_styled_components22.css`
+  --font-family: var(--wui-typography-heading-1-family);
+  --font-size: var(--wui-typography-heading-1-size);
+  --font-weight: var(--wui-typography-heading-1-weight);
+  --line-height: var(--wui-typography-heading-1-line-height);
+`;
+var heading2TextStyle = import_styled_components22.css`
+  --font-family: var(--wui-typography-heading-2-family);
+  --font-size: var(--wui-typography-heading-2-size);
+  --font-weight: var(--wui-typography-heading-2-weight);
+  --line-height: var(--wui-typography-heading-2-line-height);
+`;
+var heading3TextStyle = import_styled_components22.css`
+  --font-family: var(--wui-typography-heading-3-family);
+  --font-size: var(--wui-typography-heading-3-size);
+  --font-weight: var(--wui-typography-heading-3-weight);
+  --line-height: var(--wui-typography-heading-3-line-height);
+`;
+var heading4TextStyle = import_styled_components22.css`
+  --font-family: var(--wui-typography-heading-4-family);
+  --font-size: var(--wui-typography-heading-4-size);
+  --font-weight: var(--wui-typography-heading-4-weight);
+  --line-height: var(--wui-typography-heading-4-line-height);
+`;
+var heading5TextStyle = import_styled_components22.css`
+  --font-family: var(--wui-typography-heading-5-family);
+  --font-size: var(--wui-typography-heading-5-size);
+  --font-weight: var(--wui-typography-heading-5-weight);
+  --line-height: var(--wui-typography-heading-5-line-height);
+`;
+var heading6TextStyle = import_styled_components22.css`
+  --font-family: var(--wui-typography-heading-6-family);
+  --font-size: var(--wui-typography-heading-6-size);
+  --font-weight: var(--wui-typography-heading-6-weight);
+  --line-height: var(--wui-typography-heading-6-line-height);
+`;
+var variantStyleMap = {
+  hero: heroStyle,
+  heading1: heading1TextStyle,
+  heading2: heading2TextStyle,
+  heading3: heading3TextStyle,
+  heading4: heading4TextStyle,
+  heading5: heading5TextStyle,
+  heading6: heading6TextStyle
+};
+var DEFAULT_ELEMENT = "h1";
+var StyledHeading = import_styled_components22.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  color: var(--wui-color-text);
+  ${({ $variant }) => variantStyleMap[$variant]}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $inline }) => $inline && import_styled_components22.css`
+      display: inline-block;
+    `}
+  ${({ $disabled }) => $disabled && import_styled_components22.css`
+      color: var(--wui-color-text-disabled);
+    `}
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components22.css`
+      user-select: none;
+    `}
+  ${({ $align }) => import_styled_components22.css`
+    text-align: ${$align};
+  `}
+  margin: 0;
+`;
+var variantElementMap = {
+  hero: DEFAULT_ELEMENT,
+  heading1: DEFAULT_ELEMENT,
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  heading5: "h5",
+  heading6: "h6"
+};
+var HeadingComponent = (0, import_react11.forwardRef)(
+  ({
+    align = "left",
+    colorScheme = "inherit",
+    disabled = false,
+    ellipsis = false,
+    inline = false,
+    preventUserSelect = false,
+    variant = "heading1",
+    renderAs,
+    ...otherProps
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+    StyledHeading,
+    {
+      ref,
+      $align: align,
+      $colorScheme: colorScheme,
+      $disabled: disabled,
+      $ellipsis: ellipsis,
+      $inline: inline,
+      $preventUserSelect: preventUserSelect,
+      $variant: variant,
+      as: renderAs ?? variantElementMap[variant],
+      ...otherProps
+    }
+  )
+);
+HeadingComponent.displayName = "Heading";
+var Heading = makePolymorphic(HeadingComponent);
+
+// src/components/Label/Label.tsx
+var import_jsx_runtime166 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components23.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -5762,16 +5950,14 @@ var requiredStyle = import_styled_components21.css`
     content: '*';
   }
 `;
-var disabledStyle = import_styled_components21.css`
+var disabledStyle = import_styled_components23.css`
   color: var(--wui-color-text-disabled);
 `;
-var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--wui-space-02)";
-var StyledLabel = import_styled_components21.default.label`
-  display: inline-block;
-  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);
-  cursor: inherit;
+var StyledLabel = (0, import_styled_components23.default)(Heading).attrs({
+  variant: "heading6",
+  renderAs: "label"
+})`
+  display: block;
   width: 100%;
 
   /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
@@ -5779,7 +5965,6 @@ var StyledLabel = import_styled_components21.default.label`
   > textarea,
   > select {
     display: block;
-    margin-top: ${SPACE_BETWEEN_LABEL_AND_INPUT};
   }
 
   > label {
@@ -5787,8 +5972,8 @@ var StyledLabel = import_styled_components21.default.label`
   }
 
   ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
-  ${({ disabled }) => disabled && disabledStyle}
-  ${({ required }) => required && requiredStyle}
+  ${({ $disabled }) => $disabled && disabledStyle}
+  ${({ $required }) => $required && requiredStyle}
 `;
 var Label = ({
   children,
@@ -5797,24 +5982,24 @@ var Label = ({
   required = false,
   screenReaderOnly = false,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
   StyledLabel,
   {
+    ...otherProps,
+    $disabled: disabled,
+    $required: required,
     $screenReaderOnly: screenReaderOnly,
-    disabled,
     htmlFor,
-    required,
-    ...otherProps,
     children
   }
 );
 Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
-var import_styled_components22 = __toESM(require("styled-components"));
-var import_type_guards14 = require("@wistia/type-guards");
-var import_jsx_runtime165 = require("react/jsx-runtime");
-var StyledLabelDescription = import_styled_components22.default.div`
+var import_styled_components24 = __toESM(require("styled-components"));
+var import_type_guards15 = require("@wistia/type-guards");
+var import_jsx_runtime167 = require("react/jsx-runtime");
+var StyledLabelDescription = import_styled_components24.default.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -5824,16 +6009,16 @@ var LabelDescription = ({
   children,
   ...props
 }) => {
-  if ((0, import_type_guards14.isNil)(children)) {
+  if ((0, import_type_guards15.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(StyledLabelDescription, { ...props, children });
 };
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime166 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var import_jsx_runtime168 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -5841,7 +6026,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime168.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",
@@ -5850,11 +6035,10 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
     )
   }
 );
-var StyledCheckboxWrapper = import_styled_components23.default.div`
+var StyledCheckboxWrapper = import_styled_components25.default.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: var(--wui-space-02);
 
   &:hover {
     /* TODO Lamp to design hover state */
@@ -5865,7 +6049,7 @@ var StyledCheckboxWrapper = import_styled_components23.default.div`
     background-color: #efefef;
   }
 `;
-var StyledCheckboxRoot = (0, import_styled_components23.default)(import_react_checkbox.Root)`
+var StyledCheckboxRoot = (0, import_styled_components25.default)(import_react_checkbox.Root)`
   all: unset; /* CheckboxRoot renders as a button element, so we need to reset all styles */
   background-color: var(--wui-color-bg-fill-white);
   min-width: 16px;
@@ -5878,7 +6062,6 @@ var StyledCheckboxRoot = (0, import_styled_components23.default)(import_react_ch
   align-items: center;
   justify-content: center;
   align-self: start; /* align to the top to handle label descriptions */
-  margin-top: 3px; /* bump down slightly to mimic "align-self: center" */
 
   &[data-state='checked'] {
     background-color: var(--wui-color-bg-fill);
@@ -5900,21 +6083,21 @@ var StyledCheckboxRoot = (0, import_styled_components23.default)(import_react_ch
     /* TODO Lamp to design focus state */
   }
 `;
-var StyledCheckboxIndicator = (0, import_styled_components23.default)(import_react_checkbox.Indicator)`
+var StyledCheckboxIndicator = (0, import_styled_components25.default)(import_react_checkbox.Indicator)`
   display: flex;
 `;
-var StyledLabelWrapper = import_styled_components23.default.div`
+var StyledLabelWrapper = import_styled_components25.default.div`
   display: flex;
   flex-direction: column;
-  padding-left: var(--wui-space-02);
+  margin-left: var(--wui-space-02);
 `;
-var Checkbox = (0, import_react11.forwardRef)(
+var Checkbox = (0, import_react12.forwardRef)(
   ({
     checked,
     disabled = false,
     forceState,
     id,
-    label = "default",
+    label,
     description,
     name,
     onChange,
@@ -5922,13 +6105,14 @@ var Checkbox = (0, import_react11.forwardRef)(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = (0, import_react11.useId)();
-    const computedId = (0, import_type_guards15.isNonEmptyString)(id) ? id : `ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(StyledCheckboxWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+    const generatedId = (0, import_react12.useId)();
+    const computedId = (0, import_type_guards16.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(StyledCheckboxWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
         StyledCheckboxRoot,
         {
           ref,
+          "aria-label": label,
           checked: checked ?? void 0,
           defaultChecked: checked === void 0 ? false : void 0,
           disabled,
@@ -5938,6 +6122,7 @@ var Checkbox = (0, import_react11.forwardRef)(
             if (onChange) {
               const syntheticEvent = {
                 target: {
+                  name,
                   id: computedId,
                   checked: state === true
                 }
@@ -5948,11 +6133,11 @@ var Checkbox = (0, import_react11.forwardRef)(
           required,
           value,
           ...otherProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(StyledCheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(CheckIcon, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(StyledCheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(CheckIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(StyledLabelWrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(StyledLabelWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
           Label,
           {
             disabled,
@@ -5961,7 +6146,7 @@ var Checkbox = (0, import_react11.forwardRef)(
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(LabelDescription, { children: description })
+        /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(LabelDescription, { children: description })
       ] })
     ] });
   }
@@ -5969,13 +6154,13 @@ var Checkbox = (0, import_react11.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-var import_styled_components24 = __toESM(require("styled-components"));
-var import_jsx_runtime167 = require("react/jsx-runtime");
+var import_styled_components26 = __toESM(require("styled-components"));
+var import_jsx_runtime169 = require("react/jsx-runtime");
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = import_styled_components24.default.hr`
+var DividerComponent = import_styled_components26.default.hr`
   background: none;
   border-bottom: none;
   border-left: none;
@@ -5990,7 +6175,7 @@ var DividerComponent = import_styled_components24.default.hr`
 `;
 var Divider = ({ size = "sm", ...otherProps }) => {
   const responsiveSize = useResponsiveProp(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
     DividerComponent,
     {
       $borderHeight: sizeToPixelMap[responsiveSize],
@@ -6000,535 +6185,299 @@ var Divider = ({ size = "sm", ...otherProps }) => {
 };
 Divider.displayName = "Divider";
 
-// src/components/Ellipsis/Ellipsis.tsx
-var import_type_guards16 = require("@wistia/type-guards");
-var import_styled_components25 = __toESM(require("styled-components"));
-var import_jsx_runtime168 = require("react/jsx-runtime");
-var ellipsisStyle = import_styled_components25.css`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  /*
-    Using feature detection (i.e., -webkit-named-image) we only target Safari browsers
-    with this additional styling to prevent a bug that's exclusive to Safari.
+// src/components/Form/Form.tsx
+var import_react14 = require("react");
+var import_styled_components28 = __toESM(require("styled-components"));
+var import_type_guards17 = require("@wistia/type-guards");
 
-    Note that Safari does not properly hide the truncated text for non-inline/inline-block
-    elements so we need to apply display: inline to all the paragraphs in the description.
-    see https://stackoverflow.com/a/70683084
-  */
-  @supports (background: - webkit-named-image(i)) {
-    & > div > div:has(p) {
-      margin-top: 16px;
-    }
+// src/components/Stack/Stack.tsx
+var import_react13 = require("react");
+var import_styled_components27 = __toESM(require("styled-components"));
+var import_jsx_runtime170 = require("react/jsx-runtime");
+var DEFAULT_ELEMENT2 = "div";
+var StyledStack = import_styled_components27.default.div`
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
+  gap: ${({ $gap }) => `var(--wui-${$gap})`};
 
-    & > div > div > p {
-      display: inline;
-    }
-  }
-`;
-var ellipsisFlexParentStyle = import_styled_components25.css`
-  min-width: 0;
-`;
-var EllipsisComponent = import_styled_components25.default.div`
-  ${ellipsisStyle};
-  ${({ $lines }) => {
-  if ((0, import_type_guards16.isNotNil)($lines)) {
-    return import_styled_components25.css`
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: ${$lines};
-        display: -webkit-box;
-        white-space: initial;
-      `;
+  > * {
+    flex: 1;
   }
-  return void 0;
-}}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
-  EllipsisComponent,
-  {
-    $lines: lines,
-    ...otherProps,
-    children
+var StackComponent = (0, import_react13.forwardRef)(
+  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
+    const responsiveGap = useResponsiveProp(gap);
+    const responsiveDirection = useResponsiveProp(direction);
+    return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+      StyledStack,
+      {
+        ref,
+        $direction: responsiveDirection,
+        $gap: responsiveGap,
+        as: renderAs ?? DEFAULT_ELEMENT2,
+        ...props
+      }
+    );
   }
 );
-Ellipsis.displayName = "Ellipsis";
+StackComponent.displayName = "Stack";
+var Stack = makePolymorphic(StackComponent);
 
-// src/components/Heading/Heading.tsx
-var import_react12 = require("react");
-var import_styled_components26 = __toESM(require("styled-components"));
-
-// src/private/helpers/makePolymorphic/makePolymorphic.tsx
-var makePolymorphic = (component) => {
-  return component;
-};
-
-// src/components/Heading/Heading.tsx
-var import_jsx_runtime169 = require("react/jsx-runtime");
-var heroStyle = import_styled_components26.css`
-  --font-family: var(--wui-typography-heading-hero-family);
-  --font-size: var(--wui-typography-heading-hero-size);
-  --font-weight: var(--wui-typography-heading-hero-weight);
-  --line-height: var(--wui-typography-heading-hero-line-height);
-`;
-var heading1TextStyle = import_styled_components26.css`
-  --font-family: var(--wui-typography-heading-1-family);
-  --font-size: var(--wui-typography-heading-1-size);
-  --font-weight: var(--wui-typography-heading-1-weight);
-  --line-height: var(--wui-typography-heading-1-line-height);
-`;
-var heading2TextStyle = import_styled_components26.css`
-  --font-family: var(--wui-typography-heading-2-family);
-  --font-size: var(--wui-typography-heading-2-size);
-  --font-weight: var(--wui-typography-heading-2-weight);
-  --line-height: var(--wui-typography-heading-2-line-height);
-`;
-var heading3TextStyle = import_styled_components26.css`
-  --font-family: var(--wui-typography-heading-3-family);
-  --font-size: var(--wui-typography-heading-3-size);
-  --font-weight: var(--wui-typography-heading-3-weight);
-  --line-height: var(--wui-typography-heading-3-line-height);
-`;
-var heading4TextStyle = import_styled_components26.css`
-  --font-family: var(--wui-typography-heading-4-family);
-  --font-size: var(--wui-typography-heading-4-size);
-  --font-weight: var(--wui-typography-heading-4-weight);
-  --line-height: var(--wui-typography-heading-4-line-height);
-`;
-var heading5TextStyle = import_styled_components26.css`
-  --font-family: var(--wui-typography-heading-5-family);
-  --font-size: var(--wui-typography-heading-5-size);
-  --font-weight: var(--wui-typography-heading-5-weight);
-  --line-height: var(--wui-typography-heading-5-line-height);
-`;
-var heading6TextStyle = import_styled_components26.css`
-  --font-family: var(--wui-typography-heading-6-family);
-  --font-size: var(--wui-typography-heading-6-size);
-  --font-weight: var(--wui-typography-heading-6-weight);
-  --line-height: var(--wui-typography-heading-6-line-height);
-`;
-var variantStyleMap = {
-  hero: heroStyle,
-  heading1: heading1TextStyle,
-  heading2: heading2TextStyle,
-  heading3: heading3TextStyle,
-  heading4: heading4TextStyle,
-  heading5: heading5TextStyle,
-  heading6: heading6TextStyle
-};
-var DEFAULT_ELEMENT = "h1";
-var StyledHeading = import_styled_components26.default.div`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  color: var(--wui-color-text);
-  ${({ $variant }) => variantStyleMap[$variant]}
-  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components26.css`
-      display: inline-block;
-    `}
-  ${({ $disabled }) => $disabled && import_styled_components26.css`
-      color: var(--wui-color-text-disabled);
-    `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components26.css`
-      user-select: none;
-    `}
-  ${({ $align }) => import_styled_components26.css`
-    text-align: ${$align};
-  `}
-  margin: 0;
-`;
-var variantElementMap = {
-  hero: DEFAULT_ELEMENT,
-  heading1: DEFAULT_ELEMENT,
-  heading2: "h2",
-  heading3: "h3",
-  heading4: "h4",
-  heading5: "h5",
-  heading6: "h6"
-};
-var HeadingComponent = (0, import_react12.forwardRef)(
-  ({
-    align = "left",
-    colorScheme = "inherit",
-    disabled = false,
-    ellipsis = false,
-    inline = false,
-    preventUserSelect = false,
-    variant = "heading1",
-    renderAs,
-    ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
-    StyledHeading,
-    {
-      ref,
-      $align: align,
-      $colorScheme: colorScheme,
-      $disabled: disabled,
-      $ellipsis: ellipsis,
-      $inline: inline,
-      $preventUserSelect: preventUserSelect,
-      $variant: variant,
-      as: renderAs ?? variantElementMap[variant],
-      ...otherProps
-    }
-  )
-);
-HeadingComponent.displayName = "Heading";
-var Heading = makePolymorphic(HeadingComponent);
-
-// src/components/IconButton/IconButton.tsx
-var import_react13 = require("react");
-var import_styled_components28 = __toESM(require("styled-components"));
-
-// src/components/Tooltip/Tooltip.tsx
-var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components27 = __toESM(require("styled-components"));
-var import_jsx_runtime170 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components27.css`
-  --tooltip-font-size: var(--wui-typography-label-4-size);
-  --tooltip-line-height: var(--wui-typography-label-4-line-height);
-  --tooltip-font-weight: var(--wui-typography-label-4-weight);
-  --tooltip-horizontal-padding: var(--wui-space-02);
-  --tooltip-vertical-padding: var(--wui-space-03);
-`;
-var StyledContent = (0, import_styled_components27.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);
-  --tooltip-color: var(--wui-color-text-on-fill);
-  --tooltip-font-size: var(--wui-typography-label-3-size);
-  --tooltip-line-height: var(--wui-typography-label-3-line-height);
-  --tooltip-font-weight: var(--wui-typography-label-3-weight);
-  --tooltip-horizontal-padding: var(--wui-space-03);
-  --tooltip-vertical-padding: var(--wui-space-03);
-
-  ${({ $compact }) => Boolean($compact) && CompactTooltipStyles};
-
-  font-family: var(--tooltip-font-family);
-  font-size: var(--tooltip-font-size);
-  border-radius: var(--tooltip-border-radius);
-  padding: var(--tooltip-horizontal-padding) var(--tooltip-vertical-padding);
-  background-color: var(--tooltip-bg);
-  color: var(--tooltip-color);
-  user-select: none;
-  animation-duration: 400ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-  max-width: 30em;
-
-  &[data-state='delayed-open'][data-side='top'] {
-    animation-name: slideDownAndFade;
-  }
-
-  &[data-state='delayed-open'][data-side='right'] {
-    animation-name: slideLeftAndFade;
-  }
-
-  &[data-state='delayed-open'][data-side='bottom'] {
-    animation-name: slideUpAndFade;
-  }
-
-  &[data-state='delayed-open'][data-side='left'] {
-    animation-name: slideRightAndFade;
-  }
-`;
-var VISUAL_OFFSET = 6;
-var Tooltip = ({
-  delay = 700,
-  direction = "top",
-  content,
-  children,
-  forceOpen,
-  compact = false,
-  hideArrow = false
-}) => {
-  const rootProps = {};
-  if (content === "" || content === null) {
-    rootProps.open = false;
-  }
-  if (forceOpen === true) {
-    rootProps.open = true;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
-    import_react_tooltip2.Root,
-    {
-      delayDuration: delay,
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
-          StyledContent,
-          {
-            $compact: compact,
-            side: direction,
-            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
-            children: [
-              content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
-                "svg",
-                {
-                  fill: "var(--tooltip-bg)",
-                  height: "8",
-                  style: { transform: "translateY(-2px)" },
-                  viewBox: "0 0 12 8",
-                  width: "12",
-                  xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime170.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
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-};
-Tooltip.displayName = "Tooltip";
-
-// src/components/IconButton/IconButton.tsx
-var import_jsx_runtime171 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components28.default)(Button)`
-  --icon-button-size-sm: 24px;
-  --icon-button-size-md: 32px;
-  --icon-button-size-lg: 40px;
-  --icon-button-size-xl: 48px;
-
-  border-radius: 50%;
-  height: ${({ size }) => `var(--icon-button-size-${size})`};
-  width: ${({ size }) => `var(--icon-button-size-${size})`};
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  line-height: 1;
-`;
-var IconButton = (0, import_react13.forwardRef)(
-  ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
-    const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
-      StyledButton2,
-      {
-        ...props,
-        ref,
-        "aria-label": label,
-        "data-wistia-ui-icon-button": true,
-        size: responsiveSize,
-        children: (0, import_react13.cloneElement)(import_react13.Children.only(children), {
-          size: responsiveSize
-        })
-      }
-    );
-    if (disableTooltip) {
-      return button;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Tooltip, { content: label, children: button });
-  }
-);
-IconButton.displayName = "IconButton";
-
-// src/components/Menu/Menu.tsx
-var import_styled_components29 = __toESM(require("styled-components"));
-var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_type_guards17 = require("@wistia/type-guards");
-var import_jsx_runtime172 = require("react/jsx-runtime");
-var open = import_styled_components29.keyframes`
-  from {
-    opacity: 0;
-    transform: scale(.97) translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-`;
-var close = import_styled_components29.keyframes`
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(.97) translateY(-8px);
-  }
-`;
-var menuContentCss = import_styled_components29.css`
-  --menu-font-family: var(--wui-typography-family-default);
-  --menu-bg: var(--wui-color-bg-fill-white); /* TODO - Not sure what token to use for this */
-  --menu-shadow: 0 0 64px 0 rgba(0 0 0 / 8%); /* TODO - Need a box-shadow token */
-  --menu-border-radius: var(--wui-border-radius-01);
-  --menu-padding: var(--wui-space-03);
-  --menu-min-width: 120px;
-  --menu-max-width: 284px;
-  --menu-zindex: 500; /* TODO - need z-index token */
-
-  animation: ${open}; /* TODO - need easing tokens */
-  font-family: var(--menu-font-family);
-  background: var(--menu-bg);
-  border-radius: var(--menu-border-radius);
-  box-shadow: var(--menu-shadow); /* TODO - Need a box-shadow token */
-  max-height: var(--radix-dropdown-menu-content-available-height);
-  min-width: var(--menu-min-width);
-  max-width: var(--menu-max-width);
-  overflow: auto;
-  padding: var(--menu-padding);
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-  z-index: var(--menu-zindex);
-
-  &[data-state='closed'] {
-    animation: ${close}; /* TODO - need easing tokens */
-  }
-
-  ${mq.smAndUp} {
-    bottom: 0;
-    padding: var(--menu-padding);
-    right: 0;
-    top: 0;
-    transform: initial;
-  }
-
-  hr {
-    margin: var(--wui-space-02) 0;
-  }
-`;
-var MenuContent = (0, import_styled_components29.default)(import_react_dropdown_menu.DropdownMenuContent)`
-  ${menuContentCss}
-`;
-var Menu = ({
-  align = "start",
-  children,
-  trigger,
-  label,
-  isOpen,
-  triggerProps = {},
-  onOpenChange,
-  onInteractOutside,
-  ...props
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
-    import_react_dropdown_menu.DropdownMenu,
-    {
-      modal: false,
-      ...(0, import_type_guards17.isNotNil)(onOpenChange) && (0, import_type_guards17.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {},
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards17.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
-          Button,
-          {
-            "aria-expanded": isOpen,
-            forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Icon, { type: "caret-down" }),
-            ...triggerProps,
-            children: label
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
-          MenuContent,
-          {
-            ...props,
-            align,
-            onFocusOutside: (event) => {
-              event.preventDefault();
-            },
-            sideOffset: 6,
-            children
-          }
-        ) })
-      ]
+// src/components/Form/Form.tsx
+var import_jsx_runtime171 = require("react/jsx-runtime");
+var StyledForm = import_styled_components28.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_react14.createContext)({
+  values: {},
+  errors: {},
+  hasSubmitted: false,
+  formId: ""
+});
+var FormComponent = ({ children, action, values = {}, validate, fullWidth = false, ...props }, forwardedRef) => {
+  const [errors, setErrors] = (0, import_react14.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react14.useState)(false);
+  const innerRef = (0, import_react14.useRef)();
+  const ref = forwardedRef ?? innerRef;
+  const autoId = (0, import_react14.useId)();
+  const id = props.id ?? autoId;
+  const handleValidate = (nextFormData) => {
+    const nextData = Object.fromEntries(nextFormData.entries());
+    if ((0, import_type_guards17.isUndefined)(validate)) {
+      return {};
+    }
+    return validate(nextData);
+  };
+  const handleBlur = (event) => {
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+    const formData = new FormData(event.currentTarget);
+    if ((0, import_type_guards17.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_react14.useMemo)(() => {
+    return {
+      values,
+      errors,
+      hasSubmitted,
+      formId: id
+    };
+  }, [values, errors, id, hasSubmitted]);
+  return (
+    // @ts-expect-error - generic context providers are a giant pain
+    /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
+      Stack,
+      {
+        gap: "space-05",
+        ...props,
+        ref,
+        as: StyledForm,
+        fullWidth,
+        id,
+        onBlur: handleBlur,
+        onReset: handleReset,
+        onSubmit: handleSubmit,
+        children
+      }
+    ) })
   );
 };
-Menu.displayName = "Menu";
+FormComponent.displayName = "Form";
+var Form = (0, import_react14.forwardRef)(FormComponent);
 
-// src/components/Menu/MenuLabel.tsx
+// src/components/Form/useFormState.tsx
+var import_react15 = require("react");
+var useFormState = (action, initialData = {}) => {
+  const [data, setData] = (0, import_react15.useState)(initialData);
+  const [isPending, setIsPending] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)(null);
+  const formAction = (0, import_react15.useCallback)(
+    async (nextFormData) => {
+      if (nextFormData === null) {
+        setData(initialData);
+        setError(null);
+        return;
+      }
+      const nextData = Object.fromEntries(nextFormData.entries());
+      setIsPending(true);
+      try {
+        const result = await action(data, nextData);
+        setData(result);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setIsPending(false);
+      }
+    },
+    [action, initialData, data]
+  );
+  return [
+    {
+      data,
+      error
+    },
+    formAction,
+    isPending
+  ];
+};
+
+// src/components/Form/FormErrorSummary.tsx
+var import_react16 = require("react");
+var import_type_guards18 = require("@wistia/type-guards");
+var import_jsx_runtime172 = require("react/jsx-runtime");
+var ErrorItem = ({ name, error, formId }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Link, { href: `${formId}-${name}`, children: error }) }, name);
+};
+var FormErrorSummary = ({ description }) => {
+  const ref = (0, import_react16.useRef)(null);
+  const { formId, errors, hasSubmitted } = (0, import_react16.useContext)(FormContext);
+  const isValid = Object.keys(errors).length === 0;
+  if (isValid || !hasSubmitted) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards18.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards18.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+        ErrorItem,
+        {
+          error: err,
+          formId,
+          name
+        },
+        err
+      )) : /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+        ErrorItem,
+        {
+          error: error ?? "",
+          formId,
+          name
+        },
+        error
+      )
+    ) })
+  ] });
+};
+
+// src/components/FormField/FormField.tsx
+var import_react20 = require("react");
 var import_styled_components31 = __toESM(require("styled-components"));
-var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
+var import_type_guards19 = require("@wistia/type-guards");
 
 // src/components/Text/Text.tsx
-var import_react14 = require("react");
-var import_styled_components30 = __toESM(require("styled-components"));
+var import_react17 = require("react");
+var import_styled_components29 = __toESM(require("styled-components"));
 var import_jsx_runtime173 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components30.css`
+var bodyBoldStyles = import_styled_components29.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components30.css`
+var labelBoldStyles = import_styled_components29.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components30.css`
+var body1TextStyle = import_styled_components29.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
   --line-height: var(--wui-typography-body-1-line-height);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components30.css`
+var body2TextStyle = import_styled_components29.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
   --line-height: var(--wui-typography-body-2-line-height);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components30.css`
+var body3TextStyle = import_styled_components29.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
   --line-height: var(--wui-typography-body-3-line-height);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components30.css`
+var body4TextStyle = import_styled_components29.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
   --line-height: var(--wui-typography-body-4-line-height);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components30.css`
+var label1TextStyle = import_styled_components29.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_components30.css`
+var label2TextStyle = import_styled_components29.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_components30.css`
+var label3TextStyle = import_styled_components29.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_components30.css`
+var label4TextStyle = import_styled_components29.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_components30.css`
+var body1MonoTextStyle = import_styled_components29.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components30.css`
+var body2MonoTextStyle = import_styled_components29.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components30.css`
+var body3MonoTextStyle = import_styled_components29.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components30.css`
+var body4MonoTextStyle = import_styled_components29.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -6546,13 +6495,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = import_styled_components30.css`
+var highContrastProminenceStyle = import_styled_components29.css`
   --text-color: var(--wui-color-text-high-contrast);
 `;
-var vibrantProminenceStyle = import_styled_components30.css`
+var vibrantProminenceStyle = import_styled_components29.css`
   --text-color: var(--wui-color-text);
 `;
-var secondaryProminenceStyle = import_styled_components30.css`
+var secondaryProminenceStyle = import_styled_components29.css`
   --text-color: var(--wui-color-text-secondary);
 `;
 var prominenceMap = {
@@ -6560,7 +6509,7 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = import_styled_components30.default.div`
+var StyledText = import_styled_components29.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6572,24 +6521,24 @@ var StyledText = import_styled_components30.default.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $prominence }) => prominenceMap[$prominence]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components30.css`
+  ${({ $inline }) => $inline && import_styled_components29.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components30.css`
+  ${({ $disabled }) => $disabled && import_styled_components29.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components30.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components29.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components30.css`
+  ${({ $align }) => import_styled_components29.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components30.css`
+  ${({ as }) => as === "p" && import_styled_components29.css`
       display: block;
     `}
 `;
-var DEFAULT_ELEMENT2 = "div";
-var TextComponent = (0, import_react14.forwardRef)(
+var DEFAULT_ELEMENT3 = "div";
+var TextComponent = (0, import_react17.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -6614,27 +6563,447 @@ var TextComponent = (0, import_react14.forwardRef)(
         $preventUserSelect: preventUserSelect,
         $prominence: prominence,
         $variant: variant,
-        as: renderAs ?? DEFAULT_ELEMENT2,
+        as: renderAs ?? DEFAULT_ELEMENT3,
         ...otherProps
       }
     );
   }
 );
-TextComponent.displayName = "Text";
-var Text = makePolymorphic(TextComponent);
+TextComponent.displayName = "Text";
+var Text = makePolymorphic(TextComponent);
+
+// src/components/FormGroup/CheckboxGroup.tsx
+var import_react19 = require("react");
+
+// src/components/FormGroup/FormGroup.tsx
+var import_styled_components30 = __toESM(require("styled-components"));
+var import_react18 = require("react");
+var import_jsx_runtime174 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components30.default.fieldset`
+  border: 0;
+`;
+var StyledLegend = import_styled_components30.default.legend`
+  margin-bottom: var(--space-01);
+`;
+var FormGroup = ({ children, label, ...props }) => {
+  const ref = (0, import_react18.useRef)();
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
+    Stack,
+    {
+      ...props,
+      ref,
+      renderAs: StyledFieldset,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+          Heading,
+          {
+            renderAs: StyledLegend,
+            variant: "heading5",
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+FormGroup.displayName = "FormGroup";
+
+// src/components/FormGroup/CheckboxGroup.tsx
+var import_jsx_runtime175 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react19.createContext)(null);
+var CheckboxGroup = ({
+  children,
+  name,
+  onChange,
+  value,
+  ...props
+}) => {
+  const context = (0, import_react19.useMemo)(() => {
+    return {
+      name,
+      onChange
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(FormGroup, { ...props, children }) });
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/components/FormField/FormField.tsx
+var import_jsx_runtime176 = require("react/jsx-runtime");
+var StyledFormField = import_styled_components31.default.div`
+  --form-field-spacing: var(--wui-space-01);
+  --form-field-error-color: var(--wui-color-text-error);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-field-spacing);
+`;
+var StyledErrorList = import_styled_components31.default.ul`
+  margin: 0;
+  padding: 0;
+  padding-left: var(--wui-space-04);
+  display: flex;
+  flex-direction: column;
+  gap: var(--wui-space-01);
+`;
+var ErrorMessages = ({ errors, id }) => {
+  const isMultipleErrors = (0, import_type_guards19.isArray)(errors);
+  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
+    Text,
+    {
+      colorScheme: "error",
+      id: `${id}-${index}`,
+      renderAs: "li",
+      variant: "label4",
+      children: error
+    },
+    `${id}-${index}`
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
+    Text,
+    {
+      colorScheme: "error",
+      id,
+      variant: "label4",
+      children: errors
+    },
+    id
+  );
+};
+var FormField = ({
+  children,
+  label,
+  name,
+  error,
+  value,
+  ...props
+}) => {
+  const formState = (0, import_react20.useContext)(FormContext);
+  const checkboxGroup = (0, import_react20.useContext)(CheckboxGroupContext);
+  const id = props.id ?? `${formState.formId}-${name}`;
+  const isInlineLabel = children.type === Checkbox;
+  const computedError = error ?? formState.errors[name];
+  const defaultValue = formState.values[name];
+  let childProps = {
+    name,
+    id,
+    label: isInlineLabel ? label : void 0,
+    ...props
+  };
+  if ((0, import_type_guards19.isUndefined)(value) && (0, import_type_guards19.isNotUndefined)(defaultValue)) {
+    childProps = {
+      ...childProps,
+      defaultValue
+    };
+  }
+  if ((0, import_type_guards19.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards19.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+    const handleChange = (event) => {
+      if ((0, import_type_guards19.isNotUndefined)(props.onChange)) {
+        props.onChange(event);
+      }
+      if ((0, import_type_guards19.isNotUndefined)(checkboxGroup.onChange)) {
+        checkboxGroup.onChange(event);
+      }
+    };
+    childProps = {
+      ...childProps,
+      name: computedName,
+      onChange: handleChange,
+      "aria-invalid": (0, import_type_guards19.isNotNil)(error),
+      "aria-describedby": (0, import_type_guards19.isNotNil)(error) ? `${id}-error` : void 0
+    };
+  }
+  import_react20.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(StyledFormField, { ...props, children: [
+    !isInlineLabel && /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(Label, { htmlFor: id, children: label }),
+    (0, import_react20.cloneElement)(children, childProps),
+    (0, import_type_guards19.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
+      ErrorMessages,
+      {
+        errors: computedError,
+        id: `${id}-error`
+      }
+    ) : null
+  ] });
+};
+FormField.displayName = "FormField";
+
+// src/components/IconButton/IconButton.tsx
+var import_react21 = require("react");
+var import_styled_components33 = __toESM(require("styled-components"));
+
+// src/components/Tooltip/Tooltip.tsx
+var import_react_tooltip2 = require("@radix-ui/react-tooltip");
+var import_styled_components32 = __toESM(require("styled-components"));
+var import_jsx_runtime177 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components32.css`
+  --tooltip-font-size: var(--wui-typography-label-4-size);
+  --tooltip-line-height: var(--wui-typography-label-4-line-height);
+  --tooltip-font-weight: var(--wui-typography-label-4-weight);
+  --tooltip-horizontal-padding: var(--wui-space-02);
+  --tooltip-vertical-padding: var(--wui-space-03);
+`;
+var StyledContent = (0, import_styled_components32.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);
+  --tooltip-color: var(--wui-color-text-on-fill);
+  --tooltip-font-size: var(--wui-typography-label-3-size);
+  --tooltip-line-height: var(--wui-typography-label-3-line-height);
+  --tooltip-font-weight: var(--wui-typography-label-3-weight);
+  --tooltip-horizontal-padding: var(--wui-space-03);
+  --tooltip-vertical-padding: var(--wui-space-03);
+
+  ${({ $compact }) => Boolean($compact) && CompactTooltipStyles};
+
+  font-family: var(--tooltip-font-family);
+  font-size: var(--tooltip-font-size);
+  border-radius: var(--tooltip-border-radius);
+  padding: var(--tooltip-horizontal-padding) var(--tooltip-vertical-padding);
+  background-color: var(--tooltip-bg);
+  color: var(--tooltip-color);
+  user-select: none;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+  max-width: 30em;
+
+  &[data-state='delayed-open'][data-side='top'] {
+    animation-name: slideDownAndFade;
+  }
+
+  &[data-state='delayed-open'][data-side='right'] {
+    animation-name: slideLeftAndFade;
+  }
+
+  &[data-state='delayed-open'][data-side='bottom'] {
+    animation-name: slideUpAndFade;
+  }
+
+  &[data-state='delayed-open'][data-side='left'] {
+    animation-name: slideRightAndFade;
+  }
+`;
+var VISUAL_OFFSET = 6;
+var Tooltip = ({
+  delay = 700,
+  direction = "top",
+  content,
+  children,
+  forceOpen,
+  compact = false,
+  hideArrow = false
+}) => {
+  const rootProps = {};
+  if (content === "" || content === null) {
+    rootProps.open = false;
+  }
+  if (forceOpen === true) {
+    rootProps.open = true;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(
+    import_react_tooltip2.Root,
+    {
+      delayDuration: delay,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(
+          StyledContent,
+          {
+            $compact: compact,
+            side: direction,
+            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
+            children: [
+              content,
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
+                "svg",
+                {
+                  fill: "var(--tooltip-bg)",
+                  height: "8",
+                  style: { transform: "translateY(-2px)" },
+                  viewBox: "0 0 12 8",
+                  width: "12",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime177.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
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+Tooltip.displayName = "Tooltip";
+
+// src/components/IconButton/IconButton.tsx
+var import_jsx_runtime178 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components33.default)(Button)`
+  --icon-button-size-sm: 24px;
+  --icon-button-size-md: 32px;
+  --icon-button-size-lg: 40px;
+  --icon-button-size-xl: 48px;
+
+  border-radius: 50%;
+  height: ${({ size }) => `var(--icon-button-size-${size})`};
+  width: ${({ size }) => `var(--icon-button-size-${size})`};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+`;
+var IconButton = (0, import_react21.forwardRef)(
+  ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
+    const responsiveSize = useResponsiveProp(size);
+    const button = /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+      StyledButton2,
+      {
+        ...props,
+        ref,
+        "aria-label": label,
+        "data-wistia-ui-icon-button": true,
+        size: responsiveSize,
+        children: (0, import_react21.cloneElement)(import_react21.Children.only(children), {
+          size: responsiveSize
+        })
+      }
+    );
+    if (disableTooltip) {
+      return button;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(Tooltip, { content: label, children: button });
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/components/Menu/Menu.tsx
+var import_styled_components34 = __toESM(require("styled-components"));
+var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+var import_type_guards20 = require("@wistia/type-guards");
+var import_jsx_runtime179 = require("react/jsx-runtime");
+var open = import_styled_components34.keyframes`
+  from {
+    opacity: 0;
+    transform: scale(.97) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+var close = import_styled_components34.keyframes`
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(.97) translateY(-8px);
+  }
+`;
+var menuContentCss = import_styled_components34.css`
+  --menu-font-family: var(--wui-typography-family-default);
+  --menu-bg: var(--wui-color-bg-fill-white); /* TODO - Not sure what token to use for this */
+  --menu-shadow: 0 0 64px 0 rgba(0 0 0 / 8%); /* TODO - Need a box-shadow token */
+  --menu-border-radius: var(--wui-border-radius-01);
+  --menu-padding: var(--wui-space-03);
+  --menu-min-width: 120px;
+  --menu-max-width: 284px;
+  --menu-zindex: 500; /* TODO - need z-index token */
+
+  animation: ${open}; /* TODO - need easing tokens */
+  font-family: var(--menu-font-family);
+  background: var(--menu-bg);
+  border-radius: var(--menu-border-radius);
+  box-shadow: var(--menu-shadow); /* TODO - Need a box-shadow token */
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  min-width: var(--menu-min-width);
+  max-width: var(--menu-max-width);
+  overflow: auto;
+  padding: var(--menu-padding);
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  z-index: var(--menu-zindex);
+
+  &[data-state='closed'] {
+    animation: ${close}; /* TODO - need easing tokens */
+  }
+
+  ${mq.smAndUp} {
+    bottom: 0;
+    padding: var(--menu-padding);
+    right: 0;
+    top: 0;
+    transform: initial;
+  }
+
+  hr {
+    margin: var(--wui-space-02) 0;
+  }
+`;
+var MenuContent = (0, import_styled_components34.default)(import_react_dropdown_menu.DropdownMenuContent)`
+  ${menuContentCss}
+`;
+var Menu = ({
+  align = "start",
+  children,
+  trigger,
+  label,
+  isOpen,
+  triggerProps = {},
+  onOpenChange,
+  onInteractOutside,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
+    import_react_dropdown_menu.DropdownMenu,
+    {
+      modal: false,
+      ...(0, import_type_guards20.isNotNil)(onOpenChange) && (0, import_type_guards20.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {},
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards20.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+          Button,
+          {
+            "aria-expanded": isOpen,
+            forceState: isOpen ? "active" : void 0,
+            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(Icon, { type: "caret-down" }),
+            ...triggerProps,
+            children: label
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+          MenuContent,
+          {
+            ...props,
+            align,
+            onFocusOutside: (event) => {
+              event.preventDefault();
+            },
+            sideOffset: 6,
+            children
+          }
+        ) })
+      ]
+    }
+  );
+};
+Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-var import_jsx_runtime174 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components31.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var import_styled_components35 = __toESM(require("styled-components"));
+var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
+var import_jsx_runtime180 = require("react/jsx-runtime");
+var StyledMenuLabel = (0, import_styled_components35.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
         Text,
         {
           variant: "label3",
@@ -6648,16 +7017,16 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-var import_react16 = require("react");
-var import_styled_components34 = __toESM(require("styled-components"));
+var import_react23 = require("react");
+var import_styled_components38 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 
 // src/components/Menu/MenuItemButton.tsx
-var import_react15 = require("react");
-var import_styled_components32 = __toESM(require("styled-components"));
-var import_type_guards18 = require("@wistia/type-guards");
-var import_jsx_runtime175 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components32.default)(Button)`
+var import_react22 = require("react");
+var import_styled_components36 = __toESM(require("styled-components"));
+var import_type_guards21 = require("@wistia/type-guards");
+var import_jsx_runtime181 = require("react/jsx-runtime");
+var StyledButton3 = (0, import_styled_components36.default)(Button)`
   --menu-item-border-radius: var(--wui-border-radius-01);
   --menu-item-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-04);
@@ -6672,9 +7041,9 @@ var StyledButton3 = (0, import_styled_components32.default)(Button)`
     background-color: var(--menu-item-disabled-bg);
   }
 
-  ${({ $isGated }) => (0, import_type_guards18.isNotUndefined)($isGated) && $isGated ? `color: var(--wui-color-text);` : ""}
+  ${({ $isGated }) => (0, import_type_guards21.isNotUndefined)($isGated) && $isGated ? `color: var(--wui-color-text);` : ""}
 `;
-var StyledMenuContent = import_styled_components32.default.div`
+var StyledMenuContent = import_styled_components36.default.div`
   display: grid;
   grid-template-areas:
     'label badge'
@@ -6683,28 +7052,28 @@ var StyledMenuContent = import_styled_components32.default.div`
   position: relative;
   align-content: center;
 `;
-var StyledBadgeContainer = import_styled_components32.default.div`
+var StyledBadgeContainer = import_styled_components36.default.div`
   grid-area: badge;
   align-self: start;
   justify-self: end;
   margin-left: var(--menu-item-inner-gap);
 `;
-var MenuItemButton = (0, import_react15.forwardRef)(({ children, appearance, command, ...props }, ref) => {
+var MenuItemButton = (0, import_react22.forwardRef)(({ children, appearance, command, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if ((0, import_type_guards18.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards21.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    if ((0, import_type_guards18.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards21.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is gated");
     }
     colorScheme = "purple";
-    badge = /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Icon, { type: "sparkle" });
+    badge = /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(Icon, { type: "sparkle" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     StyledButton3,
     {
       ...props,
@@ -6713,9 +7082,9 @@ var MenuItemButton = (0, import_react15.forwardRef)(({ children, appearance, com
       colorScheme: colorScheme ?? "default",
       fullWidth: true,
       variant: "ghost",
-      children: /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(StyledMenuContent, { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(StyledMenuContent, { children: [
         children,
-        (0, import_type_guards18.isNotNil)(badge) || (0, import_type_guards18.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null
+        (0, import_type_guards21.isNotNil)(badge) || (0, import_type_guards21.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null
       ] })
     }
   );
@@ -6723,12 +7092,12 @@ var MenuItemButton = (0, import_react15.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components33 = __toESM(require("styled-components"));
-var import_jsx_runtime176 = require("react/jsx-runtime");
-var StyledMenuItemLabel = (0, import_styled_components33.default)(Text).attrs({ variant: "label3" })`
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_jsx_runtime182 = require("react/jsx-runtime");
+var StyledMenuItemLabel = (0, import_styled_components37.default)(Text).attrs({ variant: "label3" })`
   grid-area: label;
 `;
-var StyledMenuItemDescription = (0, import_styled_components33.default)(Text).attrs({
+var StyledMenuItemDescription = (0, import_styled_components37.default)(Text).attrs({
   variant: "label4",
   prominence: "secondary"
 })`
@@ -6736,15 +7105,15 @@ var StyledMenuItemDescription = (0, import_styled_components33.default)(Text).at
   grid-area: description;
 `;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-var import_jsx_runtime177 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components34.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var import_jsx_runtime183 = require("react/jsx-runtime");
+var SubMenuContent = (0, import_styled_components38.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
   width: 298px;
 
@@ -6752,10 +7121,10 @@ var SubMenuContent = (0, import_styled_components34.default)(import_react_dropdo
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components34.default.div`
+var StyledMobileSubMenuItems = import_styled_components38.default.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components34.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components38.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -6766,11 +7135,11 @@ var StyledSubTrigger = (0, import_styled_components34.default)(import_react_drop
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger2 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
-  return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -6782,15 +7151,15 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = (0, import_react16.useState)(false);
-  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(MenuItemLabel, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(MenuItemDescription, { children: description })
+  const [isExpanded, setIsExpanded] = (0, import_react23.useState)(false);
+  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(MenuItemLabel, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(MenuItemDescription, { children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(SubMenuContent, { children }) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)(
       SubMenuTrigger,
       {
         ...props,
@@ -6799,28 +7168,28 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(MenuItemDescription, { children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-var import_react17 = require("react");
+var import_react24 = require("react");
 var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime178 = require("react/jsx-runtime");
-var MenuItem = (0, import_react17.forwardRef)(
+var import_jsx_runtime184 = require("react/jsx-runtime");
+var MenuItem = (0, import_react24.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
           MenuItemButton,
           {
             ...props,
@@ -6836,10 +7205,10 @@ MenuItem.displayName = "MenuItem";
 
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime179 = require("react/jsx-runtime");
+var import_jsx_runtime185 = require("react/jsx-runtime");
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(MenuLabel, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -6847,11 +7216,11 @@ MenuRadioGroup.displayName = "MenuRadioGroup";
 
 // src/components/Menu/RadioMenuItem.tsx
 var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime180 = require("react/jsx-runtime");
+var import_jsx_runtime186 = require("react/jsx-runtime");
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  indicator = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
     Icon,
     {
       size: "sm",
@@ -6861,16 +7230,16 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
     import_react_dropdown_menu6.DropdownMenuRadioItem,
     {
       ...extraProps,
       value,
-      children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -6880,38 +7249,86 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime181 = require("react/jsx-runtime");
+var import_jsx_runtime187 = require("react/jsx-runtime");
+var CheckboxIndicator2 = ({ checked, ...props }) => {
+  return checked ? /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
+    "svg",
+    {
+      ...props,
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+          "path",
+          {
+            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
+            fill: "#2949E5"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+          "path",
+          {
+            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
+            stroke: "#D9D9DE"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+          "path",
+          {
+            d: "M6.47275 11.1931L3.3775 8.08009C3.19155 7.89306 3.19155 7.58982 3.3775 7.40278L4.05092 6.72547C4.23688 6.53842 4.53841 6.53842 4.72436 6.72547L6.80947 8.82254L11.2755 4.33082C11.4615 4.1438 11.763 4.1438 11.949 4.33082L12.6224 5.00813C12.8083 5.19516 12.8083 5.4984 12.6224 5.68544L7.14618 11.1931C6.96021 11.3802 6.6587 11.3802 6.47275 11.1931Z",
+            fill: "white"
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
+    "svg",
+    {
+      ...props,
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+          "path",
+          {
+            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
+            fill: "#FCFCFD"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+          "path",
+          {
+            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
+            stroke: "#D9D9DE"
+          }
+        )
+      ]
+    }
+  );
+};
 var CheckboxMenuItem = ({
-  onSelect,
+  onSelect = () => null,
   checked,
   onCheckedChange,
-  indicator = /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
-    Icon,
-    {
-      size: "sm",
-      type: "checkmark"
-    }
-  ),
   ...props
 }) => {
-  let extraProps = {};
-  if (onSelect) {
-    extraProps = {
-      ...extraProps,
-      onCheckedChange,
-      onSelect
-    };
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
     import_react_dropdown_menu7.DropdownMenuCheckboxItem,
     {
-      ...extraProps,
       checked,
-      children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+      onCheckedChange,
+      onSelect,
+      children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: indicator })
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -6920,17 +7337,16 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Radio/Radio.tsx
-var import_react18 = require("react");
-var import_styled_components35 = __toESM(require("styled-components"));
-var import_type_guards19 = require("@wistia/type-guards");
-var import_jsx_runtime182 = require("react/jsx-runtime");
-var StyledLabelWrapper2 = import_styled_components35.default.div`
+var import_react25 = require("react");
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_type_guards22 = require("@wistia/type-guards");
+var import_jsx_runtime188 = require("react/jsx-runtime");
+var StyledLabelWrapper2 = import_styled_components39.default.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = import_styled_components35.default.input`
-  align-self: flex-start;
+var StyledRadio = import_styled_components39.default.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -6940,7 +7356,6 @@ var StyledRadio = import_styled_components35.default.input`
   height: 14px;
   border: 1px solid var(--wui-color-border);
   border-radius: 50%;
-  transform: translateY(5px); /* visually center the radio button */
   display: grid;
   place-content: center;
 
@@ -6957,11 +7372,11 @@ var StyledRadio = import_styled_components35.default.input`
     transform: scale(1);
   }
 `;
-var disabledStyle2 = import_styled_components35.css`
+var disabledStyle2 = import_styled_components39.css`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorStyle = import_styled_components35.css`
+var errorStyle = import_styled_components39.css`
   /* TODO Lamp to design error state */
   &:hover,
   &:focus,
@@ -6969,12 +7384,12 @@ var errorStyle = import_styled_components35.css`
     border-color: transparent !important;
   }
 `;
-var defaultHoverStyle = import_styled_components35.css`
+var defaultHoverStyle = import_styled_components39.css`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = import_styled_components35.default.div`
-  align-items: center;
+var StyledRadioWrapper = import_styled_components39.default.div`
+  align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
   display: flex;
@@ -6990,14 +7405,16 @@ var StyledRadioWrapper = import_styled_components35.default.div`
     background-color: #efefef;
   }
 
-  ${({ hasError }) => hasError && errorStyle};
+  &[aria-invalid='true'] {
+    ${errorStyle};
+  }
+
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = (0, import_react18.forwardRef)(
+var Radio = (0, import_react25.forwardRef)(
   ({
     checked,
     disabled = false,
-    hasError = false,
     id,
     label,
     description,
@@ -7007,15 +7424,15 @@ var Radio = (0, import_react18.forwardRef)(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = (0, import_react18.useId)();
-    const computedId = (0, import_type_guards19.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(
+    const generatedId = (0, import_react25.useId)();
+    const computedId = (0, import_type_guards22.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
       StyledRadioWrapper,
       {
+        "aria-invalid": otherProps["aria-invalid"],
         disabled,
-        hasError,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
             StyledRadio,
             {
               ref,
@@ -7030,8 +7447,8 @@ var Radio = (0, import_react18.forwardRef)(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
               Label,
               {
                 disabled,
@@ -7040,7 +7457,7 @@ var Radio = (0, import_react18.forwardRef)(
                 children: label
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(LabelDescription, { children: description })
+            /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -7050,11 +7467,11 @@ var Radio = (0, import_react18.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components36 = __toESM(require("styled-components"));
-var import_type_guards20 = require("@wistia/type-guards");
-var import_jsx_runtime183 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components36.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components36.default.div({
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_type_guards23 = require("@wistia/type-guards");
+var import_jsx_runtime189 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components40.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components40.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7063,53 +7480,20 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = (0, import_type_guards20.isNotNil)(text) ? text : children;
+  const accessibleText = (0, import_type_guards23.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
-// src/components/Stack/Stack.tsx
-var import_react19 = require("react");
-var import_styled_components37 = __toESM(require("styled-components"));
-var import_jsx_runtime184 = require("react/jsx-runtime");
-var DEFAULT_ELEMENT3 = "div";
-var StyledStack = import_styled_components37.default.div`
-  display: flex;
-  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ $gap }) => `var(--wui-${$gap})`};
-
-  > * {
-    flex: 1;
-  }
-`;
-var StackComponent = (0, import_react19.forwardRef)(
-  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
-    const responsiveGap = useResponsiveProp(gap);
-    const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
-      StyledStack,
-      {
-        ref,
-        $direction: responsiveDirection,
-        $gap: responsiveGap,
-        as: renderAs ?? DEFAULT_ELEMENT3,
-        ...props
-      }
-    );
-  }
-);
-StackComponent.displayName = "Stack";
-var Stack = makePolymorphic(StackComponent);
-
 // src/components/Tag/Tag.tsx
-var import_react20 = require("react");
-var import_styled_components38 = __toESM(require("styled-components"));
-var import_type_guards21 = require("@wistia/type-guards");
-var import_jsx_runtime185 = require("react/jsx-runtime");
-var TagLabel = import_styled_components38.default.a`
+var import_react26 = require("react");
+var import_styled_components41 = __toESM(require("styled-components"));
+var import_type_guards24 = require("@wistia/type-guards");
+var import_jsx_runtime190 = require("react/jsx-runtime");
+var TagLabel = import_styled_components41.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -7137,14 +7521,14 @@ var TagLabel = import_styled_components38.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components38.default.div`
+var TagDivider = import_styled_components41.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components38.default.button`
+var StyledRemoveButton = import_styled_components41.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -7172,7 +7556,7 @@ var StyledRemoveButton = import_styled_components38.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components38.default.div`
+var StyledTag = import_styled_components41.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7181,47 +7565,47 @@ var StyledTag = import_styled_components38.default.div`
   overflow: hidden;
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards21.isNil)(onClickRemove)) {
+  if ((0, import_type_guards24.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards21.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards24.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(import_jsx_runtime185.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(import_jsx_runtime190.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = (0, import_react20.forwardRef)(
+var Tag = (0, import_react26.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = (0, import_type_guards21.isNotNil)(href) && (0, import_type_guards21.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
+    const labelProps = (0, import_type_guards24.isNotNil)(href) && (0, import_type_guards24.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
             TagLabel,
             {
               ...labelProps,
@@ -7229,7 +7613,7 @@ var Tag = (0, import_react20.forwardRef)(
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -7245,26 +7629,26 @@ var Tag = (0, import_react20.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_type_guards22 = require("@wistia/type-guards");
-var import_jsx_runtime186 = require("react/jsx-runtime");
+var import_styled_components42 = __toESM(require("styled-components"));
+var import_type_guards25 = require("@wistia/type-guards");
+var import_jsx_runtime191 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
     }
   );
 };
@@ -7272,12 +7656,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
     }
   );
 };
@@ -7287,7 +7671,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components39.default.svg`
+var WistiaLogoComponent = import_styled_components42.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -7329,7 +7713,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -7339,16 +7723,37 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("title", { children: title }),
-        (0, import_type_guards22.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("title", { children: title }),
+        (0, import_type_guards25.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/FormGroup/RadioGroup.tsx
+var import_react27 = require("react");
+var import_jsx_runtime192 = require("react/jsx-runtime");
+var RadioGroupContext = (0, import_react27.createContext)(null);
+var RadioGroup = ({
+  children,
+  name,
+  onChange,
+  value,
+  ...props
+}) => {
+  const context = (0, import_react27.useMemo)(() => {
+    return {
+      name,
+      onChange
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(FormGroup, { ...props, children }) });
+};
+RadioGroup.displayName = "RadioGroup";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -7357,10 +7762,15 @@ WistiaLogo.displayName = "WistiaLogo";
   Button,
   ButtonGroup,
   Checkbox,
+  CheckboxGroup,
   CheckboxMenuItem,
   ColorSchemeWrapper,
   Divider,
   Ellipsis,
+  Form,
+  FormErrorSummary,
+  FormField,
+  FormGroup,
   Heading,
   Icon,
   IconButton,
@@ -7373,6 +7783,7 @@ WistiaLogo.displayName = "WistiaLogo";
   MenuLabel,
   MenuRadioGroup,
   Radio,
+  RadioGroup,
   RadioMenuItem,
   ScreenReaderOnly,
   Stack,
@@ -7390,6 +7801,7 @@ WistiaLogo.displayName = "WistiaLogo";
   mq,
   useActiveMq,
   useAriaLive,
+  useFormState,
   useMq,
   useWindowSize
 });