@wistia/ui 0.0.21 → 0.0.22

package/dist/index.mjs

@@ -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.
  *
@@ -1112,7 +1112,7 @@ var colorAliasTokens = css4`
 
   /* --- 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);
@@ -5671,15 +5671,196 @@ var ButtonGroup = ({
 ButtonGroup.displayName = "ButtonGroup";
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef4, useId } from "react";
+import { forwardRef as forwardRef5, useId } from "react";
 import { Root as CheckboxRoot, Indicator as CheckboxIndicator } from "@radix-ui/react-checkbox";
-import styled11 from "styled-components";
+import styled13 from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
+import styled11, { css as css14 } from "styled-components";
+
+// src/components/Heading/Heading.tsx
+import { forwardRef as forwardRef4 } from "react";
+import styled10, { css as css13 } from "styled-components";
+
+// src/components/Ellipsis/Ellipsis.tsx
+import { isNotNil as isNotNil5 } from "@wistia/type-guards";
 import styled9, { css as css12 } from "styled-components";
 import { jsx as jsx164 } from "react/jsx-runtime";
-var requiredStyle = css12`
+var ellipsisStyle = css12`
+  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 = css12`
+  min-width: 0;
+`;
+var EllipsisComponent = styled9.div`
+  ${ellipsisStyle};
+  ${({ $lines }) => {
+  if (isNotNil5($lines)) {
+    return css12`
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: ${$lines};
+        display: -webkit-box;
+        white-space: initial;
+      `;
+  }
+  return void 0;
+}}
+`;
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx164(
+  EllipsisComponent,
+  {
+    $lines: lines,
+    ...otherProps,
+    children
+  }
+);
+Ellipsis.displayName = "Ellipsis";
+
+// src/private/helpers/makePolymorphic/makePolymorphic.tsx
+var makePolymorphic = (component) => {
+  return component;
+};
+
+// src/components/Heading/Heading.tsx
+import { jsx as jsx165 } from "react/jsx-runtime";
+var heroStyle = css13`
+  --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 = css13`
+  --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 = css13`
+  --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 = css13`
+  --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 = css13`
+  --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 = css13`
+  --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 = css13`
+  --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 = styled10.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 && css13`
+      display: inline-block;
+    `}
+  ${({ $disabled }) => $disabled && css13`
+      color: var(--wui-color-text-disabled);
+    `}
+  ${({ $preventUserSelect }) => $preventUserSelect && css13`
+      user-select: none;
+    `}
+  ${({ $align }) => css13`
+    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 = forwardRef4(
+  ({
+    align = "left",
+    colorScheme = "inherit",
+    disabled = false,
+    ellipsis = false,
+    inline = false,
+    preventUserSelect = false,
+    variant = "heading1",
+    renderAs,
+    ...otherProps
+  }, ref) => /* @__PURE__ */ jsx165(
+    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
+import { jsx as jsx166 } from "react/jsx-runtime";
+var requiredStyle = css14`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -5687,16 +5868,14 @@ var requiredStyle = css12`
     content: '*';
   }
 `;
-var disabledStyle = css12`
+var disabledStyle = css14`
   color: var(--wui-color-text-disabled);
 `;
-var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--wui-space-02)";
-var StyledLabel = styled9.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 = styled11(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 */
@@ -5704,7 +5883,6 @@ var StyledLabel = styled9.label`
   > textarea,
   > select {
     display: block;
-    margin-top: ${SPACE_BETWEEN_LABEL_AND_INPUT};
   }
 
   > label {
@@ -5712,8 +5890,8 @@ var StyledLabel = styled9.label`
   }
 
   ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
-  ${({ disabled }) => disabled && disabledStyle}
-  ${({ required }) => required && requiredStyle}
+  ${({ $disabled }) => $disabled && disabledStyle}
+  ${({ $required }) => $required && requiredStyle}
 `;
 var Label = ({
   children,
@@ -5722,24 +5900,24 @@ var Label = ({
   required = false,
   screenReaderOnly = false,
   ...otherProps
-}) => /* @__PURE__ */ jsx164(
+}) => /* @__PURE__ */ jsx166(
   StyledLabel,
   {
+    ...otherProps,
+    $disabled: disabled,
+    $required: required,
     $screenReaderOnly: screenReaderOnly,
-    disabled,
     htmlFor,
-    required,
-    ...otherProps,
     children
   }
 );
 Label.displayName = "Label";
 
 // src/components/Label/LabelDescription.tsx
-import styled10 from "styled-components";
+import styled12 from "styled-components";
 import { isNil as isNil9 } from "@wistia/type-guards";
-import { jsx as jsx165 } from "react/jsx-runtime";
-var StyledLabelDescription = styled10.div`
+import { jsx as jsx167 } from "react/jsx-runtime";
+var StyledLabelDescription = styled12.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -5752,13 +5930,13 @@ var LabelDescription = ({
   if (isNil9(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx165(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ jsx167(StyledLabelDescription, { ...props, children });
 };
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx166, jsxs as jsxs6 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx166(
+import { jsx as jsx168, jsxs as jsxs6 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx168(
   "svg",
   {
     fill: "inherit",
@@ -5766,7 +5944,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx166(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx166(
+    children: /* @__PURE__ */ jsx168(
       "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",
@@ -5775,11 +5953,10 @@ var CheckIcon = () => /* @__PURE__ */ jsx166(
     )
   }
 );
-var StyledCheckboxWrapper = styled11.div`
+var StyledCheckboxWrapper = styled13.div`
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: var(--wui-space-02);
 
   &:hover {
     /* TODO Lamp to design hover state */
@@ -5790,7 +5967,7 @@ var StyledCheckboxWrapper = styled11.div`
     background-color: #efefef;
   }
 `;
-var StyledCheckboxRoot = styled11(CheckboxRoot)`
+var StyledCheckboxRoot = styled13(CheckboxRoot)`
   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;
@@ -5803,7 +5980,6 @@ var StyledCheckboxRoot = styled11(CheckboxRoot)`
   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);
@@ -5825,21 +6001,21 @@ var StyledCheckboxRoot = styled11(CheckboxRoot)`
     /* TODO Lamp to design focus state */
   }
 `;
-var StyledCheckboxIndicator = styled11(CheckboxIndicator)`
+var StyledCheckboxIndicator = styled13(CheckboxIndicator)`
   display: flex;
 `;
-var StyledLabelWrapper = styled11.div`
+var StyledLabelWrapper = styled13.div`
   display: flex;
   flex-direction: column;
-  padding-left: var(--wui-space-02);
+  margin-left: var(--wui-space-02);
 `;
-var Checkbox = forwardRef4(
+var Checkbox = forwardRef5(
   ({
     checked,
     disabled = false,
     forceState,
     id,
-    label = "default",
+    label,
     description,
     name,
     onChange,
@@ -5848,12 +6024,13 @@ var Checkbox = forwardRef4(
     ...otherProps
   }, ref) => {
     const generatedId = useId();
-    const computedId = isNonEmptyString2(id) ? id : `ui-checkbox-${generatedId}`;
+    const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
     return /* @__PURE__ */ jsxs6(StyledCheckboxWrapper, { children: [
-      /* @__PURE__ */ jsx166(
+      /* @__PURE__ */ jsx168(
         StyledCheckboxRoot,
         {
           ref,
+          "aria-label": label,
           checked: checked ?? void 0,
           defaultChecked: checked === void 0 ? false : void 0,
           disabled,
@@ -5863,6 +6040,7 @@ var Checkbox = forwardRef4(
             if (onChange) {
               const syntheticEvent = {
                 target: {
+                  name,
                   id: computedId,
                   checked: state === true
                 }
@@ -5873,11 +6051,11 @@ var Checkbox = forwardRef4(
           required,
           value,
           ...otherProps,
-          children: /* @__PURE__ */ jsx166(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx166(CheckIcon, {}) })
+          children: /* @__PURE__ */ jsx168(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx168(CheckIcon, {}) })
         }
       ),
       /* @__PURE__ */ jsxs6(StyledLabelWrapper, { children: [
-        /* @__PURE__ */ jsx166(
+        /* @__PURE__ */ jsx168(
           Label,
           {
             disabled,
@@ -5886,7 +6064,7 @@ var Checkbox = forwardRef4(
             children: label
           }
         ),
-        /* @__PURE__ */ jsx166(LabelDescription, { children: description })
+        /* @__PURE__ */ jsx168(LabelDescription, { children: description })
       ] })
     ] });
   }
@@ -5894,13 +6072,13 @@ var Checkbox = forwardRef4(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Divider/Divider.tsx
-import styled12 from "styled-components";
-import { jsx as jsx167 } from "react/jsx-runtime";
+import styled14 from "styled-components";
+import { jsx as jsx169 } from "react/jsx-runtime";
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = styled12.hr`
+var DividerComponent = styled14.hr`
   background: none;
   border-bottom: none;
   border-left: none;
@@ -5915,7 +6093,7 @@ var DividerComponent = styled12.hr`
 `;
 var Divider = ({ size = "sm", ...otherProps }) => {
   const responsiveSize = useResponsiveProp(size);
-  return /* @__PURE__ */ jsx167(
+  return /* @__PURE__ */ jsx169(
     DividerComponent,
     {
       $borderHeight: sizeToPixelMap[responsiveSize],
@@ -5925,546 +6103,299 @@ var Divider = ({ size = "sm", ...otherProps }) => {
 };
 Divider.displayName = "Divider";
 
-// src/components/Ellipsis/Ellipsis.tsx
-import { isNotNil as isNotNil5 } from "@wistia/type-guards";
-import styled13, { css as css13 } from "styled-components";
-import { jsx as jsx168 } from "react/jsx-runtime";
-var ellipsisStyle = css13`
-  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
+import { forwardRef as forwardRef7, useRef as useRef2, useMemo as useMemo4, createContext as createContext2, useState as useState4, useId as useId2 } from "react";
+import styled16 from "styled-components";
+import { isNotUndefined as isNotUndefined4, isUndefined as isUndefined3 } from "@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
+import { forwardRef as forwardRef6 } from "react";
+import styled15 from "styled-components";
+import { jsx as jsx170 } from "react/jsx-runtime";
+var DEFAULT_ELEMENT2 = "div";
+var StyledStack = styled15.div`
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
+  gap: ${({ $gap }) => `var(--wui-${$gap})`};
 
-    & > div > div > p {
-      display: inline;
-    }
-  }
-`;
-var ellipsisFlexParentStyle = css13`
-  min-width: 0;
-`;
-var EllipsisComponent = styled13.div`
-  ${ellipsisStyle};
-  ${({ $lines }) => {
-  if (isNotNil5($lines)) {
-    return css13`
-        -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__ */ jsx168(
-  EllipsisComponent,
-  {
-    $lines: lines,
-    ...otherProps,
-    children
+var StackComponent = forwardRef6(
+  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
+    const responsiveGap = useResponsiveProp(gap);
+    const responsiveDirection = useResponsiveProp(direction);
+    return /* @__PURE__ */ jsx170(
+      StyledStack,
+      {
+        ref,
+        $direction: responsiveDirection,
+        $gap: responsiveGap,
+        as: renderAs ?? DEFAULT_ELEMENT2,
+        ...props
+      }
+    );
   }
 );
-Ellipsis.displayName = "Ellipsis";
-
-// src/components/Heading/Heading.tsx
-import { forwardRef as forwardRef5 } from "react";
-import styled14, { css as css14 } from "styled-components";
+StackComponent.displayName = "Stack";
+var Stack = makePolymorphic(StackComponent);
 
-// src/private/helpers/makePolymorphic/makePolymorphic.tsx
-var makePolymorphic = (component) => {
-  return component;
-};
+// src/components/Form/Form.tsx
+import { jsx as jsx171 } from "react/jsx-runtime";
+var StyledForm = styled16.form`
+  --form-default-width: 690px;
 
-// src/components/Heading/Heading.tsx
-import { jsx as jsx169 } from "react/jsx-runtime";
-var heroStyle = css14`
-  --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 = css14`
-  --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 = css14`
-  --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);
+  max-width: ${({ fullWidth }) => fullWidth ? "auto" : "var(--form-default-width)"};
+  align-items: ${({ fullWidth }) => fullWidth ? "stretch" : "flex-start"};
 `;
-var heading3TextStyle = css14`
-  --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 = css14`
-  --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 = css14`
-  --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 = css14`
-  --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 = styled14.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 && css14`
-      display: inline-block;
-    `}
-  ${({ $disabled }) => $disabled && css14`
-      color: var(--wui-color-text-disabled);
-    `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css14`
-      user-select: none;
-    `}
-  ${({ $align }) => css14`
-    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 = forwardRef5(
-  ({
-    align = "left",
-    colorScheme = "inherit",
-    disabled = false,
-    ellipsis = false,
-    inline = false,
-    preventUserSelect = false,
-    variant = "heading1",
-    renderAs,
-    ...otherProps
-  }, ref) => /* @__PURE__ */ jsx169(
-    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
-import { Children as Children2, cloneElement as cloneElement2, forwardRef as forwardRef6 } from "react";
-import styled16 from "styled-components";
-
-// src/components/Tooltip/Tooltip.tsx
-import {
-  Root,
-  Content,
-  Trigger,
-  Portal,
-  Arrow
-} from "@radix-ui/react-tooltip";
-import styled15, { css as css15 } from "styled-components";
-import { jsx as jsx170, jsxs as jsxs7 } from "react/jsx-runtime";
-var CompactTooltipStyles = css15`
-  --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 = styled15(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__ */ jsxs7(
-    Root,
-    {
-      delayDuration: delay,
-      ...rootProps,
-      children: [
-        /* @__PURE__ */ jsx170(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx170(Portal, { children: /* @__PURE__ */ jsxs7(
-          StyledContent,
-          {
-            $compact: compact,
-            side: direction,
-            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
-            children: [
-              content,
-              !hideArrow ? /* @__PURE__ */ jsx170(Arrow, { asChild: true, children: /* @__PURE__ */ jsx170(
-                "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__ */ jsx170("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
-import { jsx as jsx171 } from "react/jsx-runtime";
-var StyledButton2 = styled16(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 = forwardRef6(
-  ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
-    const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ jsx171(
-      StyledButton2,
-      {
-        ...props,
-        ref,
-        "aria-label": label,
-        "data-wistia-ui-icon-button": true,
-        size: responsiveSize,
-        children: cloneElement2(Children2.only(children), {
-          size: responsiveSize
-        })
-      }
-    );
-    if (disableTooltip) {
-      return button;
-    }
-    return /* @__PURE__ */ jsx171(Tooltip, { content: label, children: button });
-  }
-);
-IconButton.displayName = "IconButton";
-
-// src/components/Menu/Menu.tsx
-import styled17, { css as css16, keyframes } from "styled-components";
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuPortal,
-  DropdownMenuContent
-} from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil6, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
-import { jsx as jsx172, jsxs as jsxs8 } from "react/jsx-runtime";
-var open = keyframes`
-  from {
-    opacity: 0;
-    transform: scale(.97) translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-`;
-var close = keyframes`
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(.97) translateY(-8px);
-  }
-`;
-var menuContentCss = css16`
-  --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 = styled17(DropdownMenuContent)`
-  ${menuContentCss}
-`;
-var Menu = ({
-  align = "start",
-  children,
-  trigger,
-  label,
-  isOpen,
-  triggerProps = {},
-  onOpenChange,
-  onInteractOutside,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs8(
-    DropdownMenu,
-    {
-      modal: false,
-      ...isNotNil6(onOpenChange) && isNotNil6(isOpen) ? { open: isOpen, onOpenChange } : {},
-      children: [
-        /* @__PURE__ */ jsx172(DropdownMenuTrigger, { asChild: true, children: isNotUndefined4(trigger) ? trigger : /* @__PURE__ */ jsx172(
-          Button,
-          {
-            "aria-expanded": isOpen,
-            forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx172(Icon, { type: "caret-down" }),
-            ...triggerProps,
-            children: label
-          }
-        ) }),
-        /* @__PURE__ */ jsx172(DropdownMenuPortal, { children: /* @__PURE__ */ jsx172(
-          MenuContent,
-          {
-            ...props,
-            align,
-            onFocusOutside: (event) => {
-              event.preventDefault();
-            },
-            sideOffset: 6,
-            children
-          }
-        ) })
-      ]
+var FormContext = createContext2({
+  values: {},
+  errors: {},
+  hasSubmitted: false,
+  formId: ""
+});
+var FormComponent = ({ children, action, values = {}, validate, fullWidth = false, ...props }, forwardedRef) => {
+  const [errors, setErrors] = useState4({});
+  const [hasSubmitted, setHasSubmitted] = useState4(false);
+  const innerRef = useRef2();
+  const ref = forwardedRef ?? innerRef;
+  const autoId = useId2();
+  const id = props.id ?? autoId;
+  const handleValidate = (nextFormData) => {
+    const nextData = Object.fromEntries(nextFormData.entries());
+    if (isUndefined3(validate)) {
+      return {};
+    }
+    return validate(nextData);
+  };
+  const handleBlur = (event) => {
+    if (props.onBlur) {
+      props.onBlur(event);
+    }
+    const formData = new FormData(event.currentTarget);
+    if (isNotUndefined4(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 = useMemo4(() => {
+    return {
+      values,
+      errors,
+      hasSubmitted,
+      formId: id
+    };
+  }, [values, errors, id, hasSubmitted]);
+  return (
+    // @ts-expect-error - generic context providers are a giant pain
+    /* @__PURE__ */ jsx171(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx171(
+      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 = forwardRef7(FormComponent);
+
+// src/components/Form/useFormState.tsx
+import { useCallback as useCallback2, useState as useState5 } from "react";
+var useFormState = (action, initialData = {}) => {
+  const [data, setData] = useState5(initialData);
+  const [isPending, setIsPending] = useState5(false);
+  const [error, setError] = useState5(null);
+  const formAction = useCallback2(
+    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/Menu/MenuLabel.tsx
+// src/components/Form/FormErrorSummary.tsx
+import { useContext as useContext2, useRef as useRef3 } from "react";
+import { isArray, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
+import { jsx as jsx172, jsxs as jsxs7 } from "react/jsx-runtime";
+var ErrorItem = ({ name, error, formId }) => {
+  return /* @__PURE__ */ jsx172("li", { children: /* @__PURE__ */ jsx172(Link, { href: `${formId}-${name}`, children: error }) }, name);
+};
+var FormErrorSummary = ({ description }) => {
+  const ref = useRef3(null);
+  const { formId, errors, hasSubmitted } = useContext2(FormContext);
+  const isValid = Object.keys(errors).length === 0;
+  if (isValid || !hasSubmitted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs7("div", { ref, children: [
+    /* @__PURE__ */ jsx172("p", { children: description }),
+    /* @__PURE__ */ jsx172("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined5(error)).map(
+      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx172(
+        ErrorItem,
+        {
+          error: err,
+          formId,
+          name
+        },
+        err
+      )) : /* @__PURE__ */ jsx172(
+        ErrorItem,
+        {
+          error: error ?? "",
+          formId,
+          name
+        },
+        error
+      )
+    ) })
+  ] });
+};
+
+// src/components/FormField/FormField.tsx
+import { Children as Children2, cloneElement as cloneElement2, useContext as useContext3 } from "react";
 import styled19 from "styled-components";
-import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
+import { isArray as isArray2, isNotNil as isNotNil6, isNotUndefined as isNotUndefined6, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Text/Text.tsx
-import { forwardRef as forwardRef7 } from "react";
-import styled18, { css as css17 } from "styled-components";
+import { forwardRef as forwardRef8 } from "react";
+import styled17, { css as css15 } from "styled-components";
 import { jsx as jsx173 } from "react/jsx-runtime";
-var bodyBoldStyles = css17`
+var bodyBoldStyles = css15`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css17`
+var labelBoldStyles = css15`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css17`
+var body1TextStyle = css15`
   --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 = css17`
+var body2TextStyle = css15`
   --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 = css17`
+var body3TextStyle = css15`
   --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 = css17`
+var body4TextStyle = css15`
   --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 = css17`
+var label1TextStyle = css15`
   --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 = css17`
+var label2TextStyle = css15`
   --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 = css17`
+var label3TextStyle = css15`
   --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 = css17`
+var label4TextStyle = css15`
   --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 = css17`
+var body1MonoTextStyle = css15`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = css17`
+var body2MonoTextStyle = css15`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = css17`
+var body3MonoTextStyle = css15`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = css17`
+var body4MonoTextStyle = css15`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -6482,13 +6413,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = css17`
+var highContrastProminenceStyle = css15`
   --text-color: var(--wui-color-text-high-contrast);
 `;
-var vibrantProminenceStyle = css17`
+var vibrantProminenceStyle = css15`
   --text-color: var(--wui-color-text);
 `;
-var secondaryProminenceStyle = css17`
+var secondaryProminenceStyle = css15`
   --text-color: var(--wui-color-text-secondary);
 `;
 var prominenceMap = {
@@ -6496,7 +6427,7 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = styled18.div`
+var StyledText = styled17.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6508,24 +6439,24 @@ var StyledText = styled18.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $prominence }) => prominenceMap[$prominence]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css17`
+  ${({ $inline }) => $inline && css15`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css17`
+  ${({ $disabled }) => $disabled && css15`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css17`
+  ${({ $preventUserSelect }) => $preventUserSelect && css15`
       user-select: none;
     `}
-  ${({ $align }) => css17`
+  ${({ $align }) => css15`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css17`
+  ${({ as }) => as === "p" && css15`
       display: block;
     `}
 `;
-var DEFAULT_ELEMENT2 = "div";
-var TextComponent = forwardRef7(
+var DEFAULT_ELEMENT3 = "div";
+var TextComponent = forwardRef8(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -6542,35 +6473,466 @@ var TextComponent = forwardRef7(
       StyledText,
       {
         ref,
-        $align: align,
-        $colorScheme: colorScheme,
-        $disabled: disabled,
-        $ellipsis: ellipsis,
-        $inline: inline,
-        $preventUserSelect: preventUserSelect,
-        $prominence: prominence,
-        $variant: variant,
-        as: renderAs ?? DEFAULT_ELEMENT2,
-        ...otherProps
+        $align: align,
+        $colorScheme: colorScheme,
+        $disabled: disabled,
+        $ellipsis: ellipsis,
+        $inline: inline,
+        $preventUserSelect: preventUserSelect,
+        $prominence: prominence,
+        $variant: variant,
+        as: renderAs ?? DEFAULT_ELEMENT3,
+        ...otherProps
+      }
+    );
+  }
+);
+TextComponent.displayName = "Text";
+var Text = makePolymorphic(TextComponent);
+
+// src/components/FormGroup/CheckboxGroup.tsx
+import { createContext as createContext3, useMemo as useMemo5 } from "react";
+
+// src/components/FormGroup/FormGroup.tsx
+import styled18 from "styled-components";
+import { useRef as useRef4 } from "react";
+import { jsx as jsx174, jsxs as jsxs8 } from "react/jsx-runtime";
+var StyledFieldset = styled18.fieldset`
+  border: 0;
+`;
+var StyledLegend = styled18.legend`
+  margin-bottom: var(--space-01);
+`;
+var FormGroup = ({ children, label, ...props }) => {
+  const ref = useRef4();
+  return /* @__PURE__ */ jsxs8(
+    Stack,
+    {
+      ...props,
+      ref,
+      renderAs: StyledFieldset,
+      children: [
+        /* @__PURE__ */ jsx174(
+          Heading,
+          {
+            renderAs: StyledLegend,
+            variant: "heading5",
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+FormGroup.displayName = "FormGroup";
+
+// src/components/FormGroup/CheckboxGroup.tsx
+import { jsx as jsx175 } from "react/jsx-runtime";
+var CheckboxGroupContext = createContext3(null);
+var CheckboxGroup = ({
+  children,
+  name,
+  onChange,
+  value,
+  ...props
+}) => {
+  const context = useMemo5(() => {
+    return {
+      name,
+      onChange
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsx175(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx175(FormGroup, { ...props, children }) });
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/components/FormField/FormField.tsx
+import { jsx as jsx176, jsxs as jsxs9 } from "react/jsx-runtime";
+var StyledFormField = styled19.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 = styled19.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 = isArray2(errors);
+  return isMultipleErrors ? /* @__PURE__ */ jsx176(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx176(
+    Text,
+    {
+      colorScheme: "error",
+      id: `${id}-${index}`,
+      renderAs: "li",
+      variant: "label4",
+      children: error
+    },
+    `${id}-${index}`
+  )) }) : /* @__PURE__ */ jsx176(
+    Text,
+    {
+      colorScheme: "error",
+      id,
+      variant: "label4",
+      children: errors
+    },
+    id
+  );
+};
+var FormField = ({
+  children,
+  label,
+  name,
+  error,
+  value,
+  ...props
+}) => {
+  const formState = useContext3(FormContext);
+  const checkboxGroup = useContext3(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 (isUndefined4(value) && isNotUndefined6(defaultValue)) {
+    childProps = {
+      ...childProps,
+      defaultValue
+    };
+  }
+  if (isNotNil6(checkboxGroup)) {
+    const computedName = isNotNil6(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+    const handleChange = (event) => {
+      if (isNotUndefined6(props.onChange)) {
+        props.onChange(event);
+      }
+      if (isNotUndefined6(checkboxGroup.onChange)) {
+        checkboxGroup.onChange(event);
+      }
+    };
+    childProps = {
+      ...childProps,
+      name: computedName,
+      onChange: handleChange,
+      "aria-invalid": isNotNil6(error),
+      "aria-describedby": isNotNil6(error) ? `${id}-error` : void 0
+    };
+  }
+  Children2.only(children);
+  return /* @__PURE__ */ jsxs9(StyledFormField, { ...props, children: [
+    !isInlineLabel && /* @__PURE__ */ jsx176(Label, { htmlFor: id, children: label }),
+    cloneElement2(children, childProps),
+    isNotNil6(computedError) ? /* @__PURE__ */ jsx176(
+      ErrorMessages,
+      {
+        errors: computedError,
+        id: `${id}-error`
+      }
+    ) : null
+  ] });
+};
+FormField.displayName = "FormField";
+
+// src/components/IconButton/IconButton.tsx
+import { Children as Children3, cloneElement as cloneElement3, forwardRef as forwardRef9 } from "react";
+import styled21 from "styled-components";
+
+// src/components/Tooltip/Tooltip.tsx
+import {
+  Root,
+  Content,
+  Trigger,
+  Portal,
+  Arrow
+} from "@radix-ui/react-tooltip";
+import styled20, { css as css16 } from "styled-components";
+import { jsx as jsx177, jsxs as jsxs10 } from "react/jsx-runtime";
+var CompactTooltipStyles = css16`
+  --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 = styled20(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__ */ jsxs10(
+    Root,
+    {
+      delayDuration: delay,
+      ...rootProps,
+      children: [
+        /* @__PURE__ */ jsx177(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx177(Portal, { children: /* @__PURE__ */ jsxs10(
+          StyledContent,
+          {
+            $compact: compact,
+            side: direction,
+            sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
+            children: [
+              content,
+              !hideArrow ? /* @__PURE__ */ jsx177(Arrow, { asChild: true, children: /* @__PURE__ */ jsx177(
+                "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__ */ jsx177("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
+import { jsx as jsx178 } from "react/jsx-runtime";
+var StyledButton2 = styled21(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 = forwardRef9(
+  ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
+    const responsiveSize = useResponsiveProp(size);
+    const button = /* @__PURE__ */ jsx178(
+      StyledButton2,
+      {
+        ...props,
+        ref,
+        "aria-label": label,
+        "data-wistia-ui-icon-button": true,
+        size: responsiveSize,
+        children: cloneElement3(Children3.only(children), {
+          size: responsiveSize
+        })
       }
     );
+    if (disableTooltip) {
+      return button;
+    }
+    return /* @__PURE__ */ jsx178(Tooltip, { content: label, children: button });
   }
 );
-TextComponent.displayName = "Text";
-var Text = makePolymorphic(TextComponent);
+IconButton.displayName = "IconButton";
+
+// src/components/Menu/Menu.tsx
+import styled22, { css as css17, keyframes } from "styled-components";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuContent
+} from "@radix-ui/react-dropdown-menu";
+import { isNotNil as isNotNil7, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
+import { jsx as jsx179, jsxs as jsxs11 } from "react/jsx-runtime";
+var open = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(.97) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+`;
+var close = keyframes`
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(.97) translateY(-8px);
+  }
+`;
+var menuContentCss = css17`
+  --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 = styled22(DropdownMenuContent)`
+  ${menuContentCss}
+`;
+var Menu = ({
+  align = "start",
+  children,
+  trigger,
+  label,
+  isOpen,
+  triggerProps = {},
+  onOpenChange,
+  onInteractOutside,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxs11(
+    DropdownMenu,
+    {
+      modal: false,
+      ...isNotNil7(onOpenChange) && isNotNil7(isOpen) ? { open: isOpen, onOpenChange } : {},
+      children: [
+        /* @__PURE__ */ jsx179(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx179(
+          Button,
+          {
+            "aria-expanded": isOpen,
+            forceState: isOpen ? "active" : void 0,
+            rightIcon: /* @__PURE__ */ jsx179(Icon, { type: "caret-down" }),
+            ...triggerProps,
+            children: label
+          }
+        ) }),
+        /* @__PURE__ */ jsx179(DropdownMenuPortal, { children: /* @__PURE__ */ jsx179(
+          MenuContent,
+          {
+            ...props,
+            align,
+            onFocusOutside: (event) => {
+              event.preventDefault();
+            },
+            sideOffset: 6,
+            children
+          }
+        ) })
+      ]
+    }
+  );
+};
+Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import { jsx as jsx174 } from "react/jsx-runtime";
-var StyledMenuLabel = styled19(DropdownMenuLabel)`
+import styled23 from "styled-components";
+import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx180 } from "react/jsx-runtime";
+var StyledMenuLabel = styled23(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx174(
+  return /* @__PURE__ */ jsx180(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx174(
+      children: /* @__PURE__ */ jsx180(
         Text,
         {
           variant: "label3",
@@ -6584,8 +6946,8 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-import { useState as useState4 } from "react";
-import styled22 from "styled-components";
+import { useState as useState6 } from "react";
+import styled26 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -6596,11 +6958,11 @@ import {
 } from "@radix-ui/react-dropdown-menu";
 
 // src/components/Menu/MenuItemButton.tsx
-import { forwardRef as forwardRef8 } from "react";
-import styled20 from "styled-components";
-import { isNotNil as isNotNil7, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { jsx as jsx175, jsxs as jsxs9 } from "react/jsx-runtime";
-var StyledButton3 = styled20(Button)`
+import { forwardRef as forwardRef10 } from "react";
+import styled24 from "styled-components";
+import { isNotNil as isNotNil8, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
+import { jsx as jsx181, jsxs as jsxs12 } from "react/jsx-runtime";
+var StyledButton3 = styled24(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);
@@ -6615,9 +6977,9 @@ var StyledButton3 = styled20(Button)`
     background-color: var(--menu-item-disabled-bg);
   }
 
-  ${({ $isGated }) => isNotUndefined5($isGated) && $isGated ? `color: var(--wui-color-text);` : ""}
+  ${({ $isGated }) => isNotUndefined8($isGated) && $isGated ? `color: var(--wui-color-text);` : ""}
 `;
-var StyledMenuContent = styled20.div`
+var StyledMenuContent = styled24.div`
   display: grid;
   grid-template-areas:
     'label badge'
@@ -6626,28 +6988,28 @@ var StyledMenuContent = styled20.div`
   position: relative;
   align-content: center;
 `;
-var StyledBadgeContainer = styled20.div`
+var StyledBadgeContainer = styled24.div`
   grid-area: badge;
   align-self: start;
   justify-self: end;
   margin-left: var(--menu-item-inner-gap);
 `;
-var MenuItemButton = forwardRef8(({ children, appearance, command, ...props }, ref) => {
+var MenuItemButton = forwardRef10(({ children, appearance, command, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if (isNotUndefined5(colorScheme)) {
+    if (isNotUndefined8(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    if (isNotUndefined5(colorScheme)) {
+    if (isNotUndefined8(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is gated");
     }
     colorScheme = "purple";
-    badge = /* @__PURE__ */ jsx175(Icon, { type: "sparkle" });
+    badge = /* @__PURE__ */ jsx181(Icon, { type: "sparkle" });
   }
-  return /* @__PURE__ */ jsx175(
+  return /* @__PURE__ */ jsx181(
     StyledButton3,
     {
       ...props,
@@ -6656,9 +7018,9 @@ var MenuItemButton = forwardRef8(({ children, appearance, command, ...props }, r
       colorScheme: colorScheme ?? "default",
       fullWidth: true,
       variant: "ghost",
-      children: /* @__PURE__ */ jsxs9(StyledMenuContent, { children: [
+      children: /* @__PURE__ */ jsxs12(StyledMenuContent, { children: [
         children,
-        isNotNil7(badge) || isNotNil7(command) ? /* @__PURE__ */ jsx175(StyledBadgeContainer, { children: badge ?? command }) : null
+        isNotNil8(badge) || isNotNil8(command) ? /* @__PURE__ */ jsx181(StyledBadgeContainer, { children: badge ?? command }) : null
       ] })
     }
   );
@@ -6666,12 +7028,12 @@ var MenuItemButton = forwardRef8(({ children, appearance, command, ...props }, r
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled21 from "styled-components";
-import { jsx as jsx176 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled21(Text).attrs({ variant: "label3" })`
+import styled25 from "styled-components";
+import { jsx as jsx182 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled25(Text).attrs({ variant: "label3" })`
   grid-area: label;
 `;
-var StyledMenuItemDescription = styled21(Text).attrs({
+var StyledMenuItemDescription = styled25(Text).attrs({
   variant: "label4",
   prominence: "secondary"
 })`
@@ -6679,15 +7041,15 @@ var StyledMenuItemDescription = styled21(Text).attrs({
   grid-area: description;
 `;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx176(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx182(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx176(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx182(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx177, jsxs as jsxs10 } from "react/jsx-runtime";
-var SubMenuContent = styled22(DropdownMenuSubContent)`
+import { jsx as jsx183, jsxs as jsxs13 } from "react/jsx-runtime";
+var SubMenuContent = styled26(DropdownMenuSubContent)`
   ${menuContentCss}
   width: 298px;
 
@@ -6695,10 +7057,10 @@ var SubMenuContent = styled22(DropdownMenuSubContent)`
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled22.div`
+var StyledMobileSubMenuItems = styled26.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled22(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled26(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -6709,11 +7071,11 @@ var StyledSubTrigger = styled22(DropdownMenuSubTrigger)`
 var SubMenuTrigger = (props) => {
   const { isSmAndUp } = useMq();
   const Trigger2 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx177(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx177(
+  return /* @__PURE__ */ jsx183(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx183(
     MenuItemButton,
     {
       ...props,
-      rightIcon: /* @__PURE__ */ jsx177(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx183(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -6725,15 +7087,15 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = useState4(false);
-  return isSmAndUp ? /* @__PURE__ */ jsxs10(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs10(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx177(MenuItemLabel, { children: label }),
-      /* @__PURE__ */ jsx177(MenuItemDescription, { children: description })
+  const [isExpanded, setIsExpanded] = useState6(false);
+  return isSmAndUp ? /* @__PURE__ */ jsxs13(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs13(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ jsx183(MenuItemLabel, { children: label }),
+      /* @__PURE__ */ jsx183(MenuItemDescription, { children: description })
     ] }),
-    /* @__PURE__ */ jsx177(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx177(SubMenuContent, { children }) })
-  ] }) : /* @__PURE__ */ jsxs10(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs10(
+    /* @__PURE__ */ jsx183(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx183(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ jsxs13(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs13(
       SubMenuTrigger,
       {
         ...props,
@@ -6742,28 +7104,28 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx177(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx177(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx183(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx183(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx177(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx183(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx178 } from "react/jsx-runtime";
-var MenuItem = forwardRef9(
+import { jsx as jsx184 } from "react/jsx-runtime";
+var MenuItem = forwardRef11(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx178(
+    return /* @__PURE__ */ jsx184(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx178(
+        children: /* @__PURE__ */ jsx184(
           MenuItemButton,
           {
             ...props,
@@ -6781,10 +7143,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx179, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx185, jsxs as jsxs14 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs11(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx179(MenuLabel, { children: label }),
+  return /* @__PURE__ */ jsxs14(DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ jsx185(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -6795,11 +7157,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx180 } from "react/jsx-runtime";
+import { jsx as jsx186 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx180(
+  indicator = /* @__PURE__ */ jsx186(
     Icon,
     {
       size: "sm",
@@ -6809,16 +7171,16 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx180(
+  return /* @__PURE__ */ jsx186(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       value,
-      children: /* @__PURE__ */ jsx180(
+      children: /* @__PURE__ */ jsx186(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx180(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx186(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -6828,41 +7190,88 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 import {
-  DropdownMenuItemIndicator as DropdownMenuItemIndicator2,
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx181 } from "react/jsx-runtime";
+import { jsx as jsx187, jsxs as jsxs15 } from "react/jsx-runtime";
+var CheckboxIndicator2 = ({ checked, ...props }) => {
+  return checked ? /* @__PURE__ */ jsxs15(
+    "svg",
+    {
+      ...props,
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx187(
+          "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__ */ jsx187(
+          "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__ */ jsx187(
+          "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__ */ jsxs15(
+    "svg",
+    {
+      ...props,
+      fill: "none",
+      height: "16",
+      viewBox: "0 0 16 16",
+      width: "16",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx187(
+          "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__ */ jsx187(
+          "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__ */ jsx181(
-    Icon,
-    {
-      size: "sm",
-      type: "checkmark"
-    }
-  ),
   ...props
 }) => {
-  let extraProps = {};
-  if (onSelect) {
-    extraProps = {
-      ...extraProps,
-      onCheckedChange,
-      onSelect
-    };
-  }
-  return /* @__PURE__ */ jsx181(
+  return /* @__PURE__ */ jsx187(
     DropdownMenuCheckboxItem,
     {
-      ...extraProps,
       checked,
-      children: /* @__PURE__ */ jsx181(
+      onCheckedChange,
+      onSelect,
+      children: /* @__PURE__ */ jsx187(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx181(DropdownMenuItemIndicator2, { children: indicator })
+          leftIcon: /* @__PURE__ */ jsx187(CheckboxIndicator2, { checked })
         }
       )
     }
@@ -6871,17 +7280,16 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Radio/Radio.tsx
-import { forwardRef as forwardRef10, useId as useId2 } from "react";
-import styled23, { css as css18 } from "styled-components";
+import { forwardRef as forwardRef12, useId as useId3 } from "react";
+import styled27, { css as css18 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx182, jsxs as jsxs12 } from "react/jsx-runtime";
-var StyledLabelWrapper2 = styled23.div`
+import { jsx as jsx188, jsxs as jsxs16 } from "react/jsx-runtime";
+var StyledLabelWrapper2 = styled27.div`
   display: flex;
   flex-direction: column;
   padding-left: var(--wui-space-02);
 `;
-var StyledRadio = styled23.input`
-  align-self: flex-start;
+var StyledRadio = styled27.input`
   box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
   appearance: none;
   margin: 0;
@@ -6891,7 +7299,6 @@ var StyledRadio = styled23.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;
 
@@ -6924,8 +7331,8 @@ var defaultHoverStyle = css18`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
-var StyledRadioWrapper = styled23.div`
-  align-items: center;
+var StyledRadioWrapper = styled27.div`
+  align-items: baseline;
   border: 1px solid transparent;
   border-radius: 4px;
   display: flex;
@@ -6941,14 +7348,16 @@ var StyledRadioWrapper = styled23.div`
     background-color: #efefef;
   }
 
-  ${({ hasError }) => hasError && errorStyle};
+  &[aria-invalid='true'] {
+    ${errorStyle};
+  }
+
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = forwardRef10(
+var Radio = forwardRef12(
   ({
     checked,
     disabled = false,
-    hasError = false,
     id,
     label,
     description,
@@ -6958,15 +7367,15 @@ var Radio = forwardRef10(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = useId2();
+    const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs12(
+    return /* @__PURE__ */ jsxs16(
       StyledRadioWrapper,
       {
+        "aria-invalid": otherProps["aria-invalid"],
         disabled,
-        hasError,
         children: [
-          /* @__PURE__ */ jsx182(
+          /* @__PURE__ */ jsx188(
             StyledRadio,
             {
               ref,
@@ -6981,8 +7390,8 @@ var Radio = forwardRef10(
               ...otherProps
             }
           ),
-          /* @__PURE__ */ jsxs12(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx182(
+          /* @__PURE__ */ jsxs16(StyledLabelWrapper2, { children: [
+            /* @__PURE__ */ jsx188(
               Label,
               {
                 disabled,
@@ -6991,7 +7400,7 @@ var Radio = forwardRef10(
                 children: label
               }
             ),
-            /* @__PURE__ */ jsx182(LabelDescription, { children: description })
+            /* @__PURE__ */ jsx188(LabelDescription, { children: description })
           ] })
         ]
       }
@@ -7001,11 +7410,11 @@ var Radio = forwardRef10(
 Radio.displayName = "Radio";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled24 from "styled-components";
-import { isNotNil as isNotNil8 } from "@wistia/type-guards";
-import { jsx as jsx183 } from "react/jsx-runtime";
-var VisuallyHidden = styled24.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled24.div({
+import styled28 from "styled-components";
+import { isNotNil as isNotNil9 } from "@wistia/type-guards";
+import { jsx as jsx189 } from "react/jsx-runtime";
+var VisuallyHidden = styled28.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled28.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -7014,53 +7423,20 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = isNotNil8(text) ? text : children;
+  const accessibleText = isNotNil9(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx183(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx189(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx183(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx189(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
-// src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef11 } from "react";
-import styled25 from "styled-components";
-import { jsx as jsx184 } from "react/jsx-runtime";
-var DEFAULT_ELEMENT3 = "div";
-var StyledStack = styled25.div`
-  display: flex;
-  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ $gap }) => `var(--wui-${$gap})`};
-
-  > * {
-    flex: 1;
-  }
-`;
-var StackComponent = forwardRef11(
-  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
-    const responsiveGap = useResponsiveProp(gap);
-    const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx184(
-      StyledStack,
-      {
-        ref,
-        $direction: responsiveDirection,
-        $gap: responsiveGap,
-        as: renderAs ?? DEFAULT_ELEMENT3,
-        ...props
-      }
-    );
-  }
-);
-StackComponent.displayName = "Stack";
-var Stack = makePolymorphic(StackComponent);
-
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef12 } from "react";
-import styled26 from "styled-components";
-import { isNil as isNil10, isNotNil as isNotNil9, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment2, jsx as jsx185, jsxs as jsxs13 } from "react/jsx-runtime";
-var TagLabel = styled26.a`
+import { forwardRef as forwardRef13 } from "react";
+import styled29 from "styled-components";
+import { isNil as isNil10, isNotNil as isNotNil10, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { Fragment as Fragment2, jsx as jsx190, jsxs as jsxs17 } from "react/jsx-runtime";
+var TagLabel = styled29.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -7088,14 +7464,14 @@ var TagLabel = styled26.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled26.div`
+var TagDivider = styled29.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled26.button`
+var StyledRemoveButton = styled29.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -7123,7 +7499,7 @@ var StyledRemoveButton = styled26.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled26.div`
+var StyledTag = styled29.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -7140,39 +7516,39 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs13(Fragment2, { children: [
-    /* @__PURE__ */ jsx185(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs17(Fragment2, { children: [
+    /* @__PURE__ */ jsx190(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsxs17(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx185(
+          /* @__PURE__ */ jsx190(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx185(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx190(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = forwardRef12(
+var Tag = forwardRef13(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil9(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs13(
+    const labelProps = isNotNil10(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ jsxs17(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx185(
+          /* @__PURE__ */ jsx190(
             TagLabel,
             {
               ...labelProps,
@@ -7180,7 +7556,7 @@ var Tag = forwardRef12(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx185(
+          /* @__PURE__ */ jsx190(
             RemoveButton,
             {
               colorScheme,
@@ -7196,26 +7572,26 @@ var Tag = forwardRef12(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled27 from "styled-components";
-import { isNotNil as isNotNil10 } from "@wistia/type-guards";
-import { jsx as jsx186, jsxs as jsxs14 } from "react/jsx-runtime";
+import styled30 from "styled-components";
+import { isNotNil as isNotNil11 } from "@wistia/type-guards";
+import { jsx as jsx191, jsxs as jsxs18 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx186(
+    return /* @__PURE__ */ jsx191(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx186("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__ */ jsx191("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__ */ jsx186(
+  return /* @__PURE__ */ jsx191(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx186("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__ */ jsx191("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" })
     }
   );
 };
@@ -7223,12 +7599,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx186(
+  return /* @__PURE__ */ jsx191(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx186("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__ */ jsx191("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" })
     }
   );
 };
@@ -7238,7 +7614,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled27.svg`
+var WistiaLogoComponent = styled30.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -7280,7 +7656,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs14(
+  const Logo = /* @__PURE__ */ jsxs18(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -7290,16 +7666,37 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx186("title", { children: title }),
-        isNotNil10(description) ? /* @__PURE__ */ jsx186("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx191("title", { children: title }),
+        isNotNil11(description) ? /* @__PURE__ */ jsx191("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx186("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx191("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/FormGroup/RadioGroup.tsx
+import { createContext as createContext4, useMemo as useMemo6 } from "react";
+import { jsx as jsx192 } from "react/jsx-runtime";
+var RadioGroupContext = createContext4(null);
+var RadioGroup = ({
+  children,
+  name,
+  onChange,
+  value,
+  ...props
+}) => {
+  const context = useMemo6(() => {
+    return {
+      name,
+      onChange
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsx192(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx192(FormGroup, { ...props, children }) });
+};
+RadioGroup.displayName = "RadioGroup";
 export {
   Avatar,
   Badge,
@@ -7307,10 +7704,15 @@ export {
   Button,
   ButtonGroup,
   Checkbox,
+  CheckboxGroup,
   CheckboxMenuItem,
   ColorSchemeWrapper,
   Divider,
   Ellipsis,
+  Form,
+  FormErrorSummary,
+  FormField,
+  FormGroup,
   Heading,
   Icon,
   IconButton,
@@ -7323,6 +7725,7 @@ export {
   MenuLabel,
   MenuRadioGroup,
   Radio,
+  RadioGroup,
   RadioMenuItem,
   ScreenReaderOnly,
   Stack,
@@ -7340,6 +7743,7 @@ export {
   mq,
   useActiveMq,
   useAriaLive,
+  useFormState,
   useMq,
   useWindowSize
 };