@wistia/ui 0.9.5-beta.d06f577d.c09e2a6 → 0.9.5

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.9.5-beta.d06f577d.c09e2a6
+ * @license @wistia/ui v0.9.5
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8076,8 +8076,8 @@ var Center = forwardRef6(
 Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef9, useId } from "react";
-import styled23, { css as css22 } from "styled-components";
+import { forwardRef as forwardRef7, useId } from "react";
+import styled20, { css as css21 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
@@ -8196,230 +8196,9 @@ var FormControlLabel = ({
 };
 FormControlLabel.displayName = "FormControlLabel";
 
-// src/components/FormGroup/CheckboxGroup.tsx
-import { createContext as createContext3, useMemo as useMemo4, useContext as useContext3 } from "react";
-
-// src/components/FormGroup/FormGroup.tsx
-import styled22 from "styled-components";
-import { useRef as useRef6 } from "react";
-
-// src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef7 } from "react";
-import styled20 from "styled-components";
-import { jsx as jsx208 } from "react/jsx-runtime";
-var DEFAULT_ELEMENT2 = "div";
-var StyledStack = styled20.div`
-  display: flex;
-  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ $gap }) => `var(--wui-${$gap})`};
-  align-items: ${({ $alignItems }) => $alignItems};
-`;
-var StackComponent = forwardRef7(
-  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
-    const responsiveGap = useResponsiveProp(gap);
-    const responsiveDirection = useResponsiveProp(direction);
-    const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ jsx208(
-      StyledStack,
-      {
-        ref,
-        $alignItems: responsiveAlignItems,
-        $direction: responsiveDirection,
-        $gap: responsiveGap,
-        as: renderAs ?? DEFAULT_ELEMENT2,
-        ...props
-      }
-    );
-  }
-);
-StackComponent.displayName = "Stack";
-var Stack = makePolymorphic(StackComponent);
-
-// src/components/Heading/Heading.tsx
-import { forwardRef as forwardRef8 } from "react";
-import styled21, { css as css21 } from "styled-components";
-import { isNotNil as isNotNil13 } from "@wistia/type-guards";
-import { jsx as jsx209 } from "react/jsx-runtime";
-var heroStyle = css21`
-  --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 = css21`
-  --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 = css21`
-  --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 = css21`
-  --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 = css21`
-  --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 = css21`
-  --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 = css21`
-  --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_ELEMENT3 = "h1";
-var StyledHeading = styled21.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]}
-  ${({ $truncate }) => {
-  if (isNotNil13($truncate)) {
-    return css21`
-        ${ellipsisStyle};
-        ${lineClampCss($truncate)};
-      `;
-  }
-  return void 0;
-}}
-  ${({ $inline }) => $inline && css21`
-      display: inline-block;
-    `}
-  ${({ $disabled }) => $disabled && css21`
-      color: var(--wui-color-text-disabled);
-    `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css21`
-      user-select: none;
-    `}
-  ${({ $align }) => css21`
-    text-align: ${$align};
-  `}
-  margin: 0;
-`;
-var variantElementMap = {
-  hero: DEFAULT_ELEMENT3,
-  heading1: DEFAULT_ELEMENT3,
-  heading2: "h2",
-  heading3: "h3",
-  heading4: "h4",
-  heading5: "h5",
-  heading6: "h6"
-};
-var HeadingComponent = forwardRef8(
-  ({
-    align = "left",
-    colorScheme = "inherit",
-    disabled = false,
-    inline = false,
-    preventUserSelect = false,
-    truncate,
-    variant = "heading1",
-    renderAs,
-    ...props
-  }, ref) => /* @__PURE__ */ jsx209(
-    StyledHeading,
-    {
-      ref,
-      $align: align,
-      $colorScheme: colorScheme,
-      $disabled: disabled,
-      $inline: inline,
-      $preventUserSelect: preventUserSelect,
-      $truncate: truncate,
-      $variant: variant,
-      as: renderAs ?? variantElementMap[variant],
-      ...props
-    }
-  )
-);
-HeadingComponent.displayName = "Heading";
-var Heading = makePolymorphic(HeadingComponent);
-
-// src/components/FormGroup/FormGroup.tsx
-import { jsx as jsx210, jsxs as jsxs15 } from "react/jsx-runtime";
-var StyledFieldset = styled22.fieldset`
-  border: 0;
-`;
-var StyledLegend = styled22.legend`
-  margin-bottom: var(--space-01);
-`;
-var FormGroup = ({ children, label, ...props }) => {
-  const ref = useRef6();
-  return /* @__PURE__ */ jsxs15(
-    Stack,
-    {
-      ...props,
-      ref,
-      renderAs: StyledFieldset,
-      children: [
-        /* @__PURE__ */ jsx210(
-          Heading,
-          {
-            renderAs: StyledLegend,
-            variant: "heading5",
-            children: label
-          }
-        ),
-        children
-      ]
-    }
-  );
-};
-FormGroup.displayName = "FormGroup";
-
-// src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx211 } from "react/jsx-runtime";
-var CheckboxGroupContext = createContext3(null);
-var useCheckboxGroup = () => {
-  return useContext3(CheckboxGroupContext);
-};
-var CheckboxGroup = ({
-  children,
-  name,
-  onChange,
-  value,
-  ...props
-}) => {
-  const context = useMemo4(() => {
-    return {
-      name,
-      onChange
-    };
-  }, [name, onChange]);
-  return /* @__PURE__ */ jsx211(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx211(FormGroup, { ...props, children }) });
-};
-CheckboxGroup.displayName = "CheckboxGroup";
-
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx212, jsxs as jsxs16 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx212(
+import { jsx as jsx208, jsxs as jsxs15 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx208(
   "svg",
   {
     fill: "inherit",
@@ -8427,7 +8206,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx212(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx212(
+    children: /* @__PURE__ */ jsx208(
       "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",
@@ -8436,7 +8215,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx212(
     )
   }
 );
-var sizeSmall = css22`
+var sizeSmall = css21`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -8447,7 +8226,7 @@ var sizeSmall = css22`
     height: 7px;
   }
 `;
-var sizeMedium = css22`
+var sizeMedium = css21`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -8458,7 +8237,7 @@ var sizeMedium = css22`
     height: 9px;
   }
 `;
-var sizeLarge = css22`
+var sizeLarge = css21`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -8474,14 +8253,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = styled23.div`
+var StyledCheckboxWrapper = styled20.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = styled23.div`
+var StyledCheckboxInput = styled20.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -8503,7 +8282,7 @@ var StyledCheckboxInput = styled23.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = styled23.input`
+var StyledHiddenCheckboxInput = styled20.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -8517,7 +8296,7 @@ var StyledHiddenCheckboxInput = styled23.input`
     display: block;
   }
 `;
-var Checkbox = forwardRef9(
+var Checkbox = forwardRef7(
   ({
     checked,
     disabled = false,
@@ -8534,13 +8313,8 @@ var Checkbox = forwardRef9(
   }, ref) => {
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    const checkboxGroupContext = useCheckboxGroup();
-    const contextName = checkboxGroupContext?.name;
-    const contextOnChange = checkboxGroupContext?.onChange;
-    const checkboxName = name ?? contextName;
-    const handleOnChange = onChange ?? contextOnChange;
-    return /* @__PURE__ */ jsxs16(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ jsx212(
+    return /* @__PURE__ */ jsxs15(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ jsx208(
         StyledHiddenCheckboxInput,
         {
           ...props,
@@ -8548,23 +8322,23 @@ var Checkbox = forwardRef9(
           checked,
           disabled,
           id: computedId,
-          name: checkboxName,
-          onChange: handleOnChange,
+          name,
+          onChange,
           required,
           type: "checkbox",
           value
         }
       ),
-      /* @__PURE__ */ jsx212(
+      /* @__PURE__ */ jsx208(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ jsx212(
+          controlSlot: /* @__PURE__ */ jsx208(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ jsx212(CheckIcon, {})
+              children: /* @__PURE__ */ jsx208(CheckIcon, {})
             }
           ),
           description,
@@ -8624,10 +8398,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
-import { isNotNil as isNotNil14 } from "@wistia/type-guards";
-import styled24 from "styled-components";
-import { jsx as jsx213 } from "react/jsx-runtime";
-var StyledRoot = styled24(CollapsibleRoot)`
+import { isNotNil as isNotNil13 } from "@wistia/type-guards";
+import styled21 from "styled-components";
+import { jsx as jsx209 } from "react/jsx-runtime";
+var StyledRoot = styled21(CollapsibleRoot)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -8641,32 +8415,32 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...isNotNil14(onOpenChange) && isNotNil14(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil13(onOpenChange) && isNotNil13(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx213(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx209(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children3 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
-import { jsx as jsx214 } from "react/jsx-runtime";
+import { jsx as jsx210 } from "react/jsx-runtime";
 var CollapsibleTrigger = ({ children }) => {
   Children3.only(children);
-  return /* @__PURE__ */ jsx214(Trigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx210(Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import styled25 from "styled-components";
+import styled22 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined6 } from "@wistia/type-guards";
-import { Fragment as Fragment4, jsx as jsx215, jsxs as jsxs17 } from "react/jsx-runtime";
-var ClampedContent = styled25.div`
+import { Fragment as Fragment4, jsx as jsx211, jsxs as jsxs16 } from "react/jsx-runtime";
+var ClampedContent = styled22.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
   if (isNotUndefined6(clamp)) {
-    return /* @__PURE__ */ jsx215(
+    return /* @__PURE__ */ jsx211(
       ClampedContent,
       {
         $clamp: clamp,
@@ -8675,18 +8449,147 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx215(Content, { children: /* @__PURE__ */ jsxs17(Fragment4, { children: [
+  return /* @__PURE__ */ jsx211(Content, { children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-import { useRef as useRef7 } from "react";
-import styled26, { keyframes } from "styled-components";
+import { useRef as useRef6 } from "react";
+import styled24, { keyframes } from "styled-components";
 import { isNotNil as isNotNil15, isNotNull } from "@wistia/type-guards";
-import { jsx as jsx216, jsxs as jsxs18 } from "react/jsx-runtime";
-var StyledDataCard = styled26.div`
+
+// src/components/Heading/Heading.tsx
+import { forwardRef as forwardRef8 } from "react";
+import styled23, { css as css22 } from "styled-components";
+import { isNotNil as isNotNil14 } from "@wistia/type-guards";
+import { jsx as jsx212 } from "react/jsx-runtime";
+var heroStyle = css22`
+  --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 = css22`
+  --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 = css22`
+  --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 = css22`
+  --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 = css22`
+  --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 = css22`
+  --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 = css22`
+  --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_ELEMENT2 = "h1";
+var StyledHeading = styled23.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]}
+  ${({ $truncate }) => {
+  if (isNotNil14($truncate)) {
+    return css22`
+        ${ellipsisStyle};
+        ${lineClampCss($truncate)};
+      `;
+  }
+  return void 0;
+}}
+  ${({ $inline }) => $inline && css22`
+      display: inline-block;
+    `}
+  ${({ $disabled }) => $disabled && css22`
+      color: var(--wui-color-text-disabled);
+    `}
+  ${({ $preventUserSelect }) => $preventUserSelect && css22`
+      user-select: none;
+    `}
+  ${({ $align }) => css22`
+    text-align: ${$align};
+  `}
+  margin: 0;
+`;
+var variantElementMap = {
+  hero: DEFAULT_ELEMENT2,
+  heading1: DEFAULT_ELEMENT2,
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  heading5: "h5",
+  heading6: "h6"
+};
+var HeadingComponent = forwardRef8(
+  ({
+    align = "left",
+    colorScheme = "inherit",
+    disabled = false,
+    inline = false,
+    preventUserSelect = false,
+    truncate,
+    variant = "heading1",
+    renderAs,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx212(
+    StyledHeading,
+    {
+      ref,
+      $align: align,
+      $colorScheme: colorScheme,
+      $disabled: disabled,
+      $inline: inline,
+      $preventUserSelect: preventUserSelect,
+      $truncate: truncate,
+      $variant: variant,
+      as: renderAs ?? variantElementMap[variant],
+      ...props
+    }
+  )
+);
+HeadingComponent.displayName = "Heading";
+var Heading = makePolymorphic(HeadingComponent);
+
+// src/components/DataCards/DataCard.tsx
+import { jsx as jsx213, jsxs as jsxs17 } from "react/jsx-runtime";
+var StyledDataCard = styled24.div`
   display: grid;
   grid-template-areas: 'label slot' 'value value';
   grid-template-rows: auto auto;
@@ -8749,7 +8652,7 @@ var shimmer = keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled26.div`
+var LoadingBackground = styled24.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8760,27 +8663,27 @@ var LoadingBackground = styled26.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled26(LoadingBackground)`
+var StyledLoadingLabel = styled24(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled26(LoadingBackground)`
+var StyledLoadingValue = styled24(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = styled26(Heading)`
+var StyledLabel2 = styled24(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled26(Heading)`
+var StyledValue = styled24(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled26.div`
+var StyledSlot = styled24.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled26.div`
+var StyledDataCardTrendContainer = styled24.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8793,34 +8696,34 @@ var DataCardInner = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ jsxs18(
+}) => /* @__PURE__ */ jsxs17(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx216(
+      /* @__PURE__ */ jsx213(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx216(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx213(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx216(
+      /* @__PURE__ */ jsx213(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx216(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx213(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx216(StyledSlot, { children: upperRightSlot }),
-      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx216(StyledDataCardTrendContainer, { children: trend })
+      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx213(StyledSlot, { children: upperRightSlot }),
+      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx213(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
-var DataCardArrowIcon = /* @__PURE__ */ jsx216(
+var DataCardArrowIcon = /* @__PURE__ */ jsx213(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -8828,14 +8731,14 @@ var DataCardArrowIcon = /* @__PURE__ */ jsx216(
   }
 );
 var DataCard = (props) => {
-  const ref = useRef7(null);
+  const ref = useRef6(null);
   if (isNotNil15(props.href) || isNotNil15(props.onClick)) {
-    return /* @__PURE__ */ jsx216(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx216(
+    return /* @__PURE__ */ jsx213(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx213(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot ?? DataCardArrowIcon,
         ...props,
-        label: /* @__PURE__ */ jsx216(
+        label: /* @__PURE__ */ jsx213(
           Button,
           {
             ref,
@@ -8850,14 +8753,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx216(DataCardInner, { ...props });
+  return /* @__PURE__ */ jsx213(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-import styled27 from "styled-components";
-import { jsx as jsx217 } from "react/jsx-runtime";
-var StyledDataCards = styled27(Box)`
+import styled25 from "styled-components";
+import { jsx as jsx214 } from "react/jsx-runtime";
+var StyledDataCards = styled25(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8871,7 +8774,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx217(
+  return /* @__PURE__ */ jsx214(
     StyledDataCards,
     {
       ...props,
@@ -8889,13 +8792,13 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled29 from "styled-components";
+import styled27 from "styled-components";
 
 // src/components/Text/Text.tsx
-import { forwardRef as forwardRef10 } from "react";
-import styled28, { css as css23 } from "styled-components";
+import { forwardRef as forwardRef9 } from "react";
+import styled26, { css as css23 } from "styled-components";
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
-import { jsx as jsx218 } from "react/jsx-runtime";
+import { jsx as jsx215 } from "react/jsx-runtime";
 var bodyBoldStyles = css23`
   > strong,
   b {
@@ -9000,22 +8903,22 @@ var variantStyleMap2 = {
 };
 var bodyElement = "p";
 var labelElement = "span";
-var DEFAULT_ELEMENT4 = bodyElement;
+var DEFAULT_ELEMENT3 = bodyElement;
 var variantElementMap2 = {
-  body1: DEFAULT_ELEMENT4,
-  body2: DEFAULT_ELEMENT4,
-  body3: DEFAULT_ELEMENT4,
-  body4: DEFAULT_ELEMENT4,
-  body1Mono: DEFAULT_ELEMENT4,
-  body2Mono: DEFAULT_ELEMENT4,
-  body3Mono: DEFAULT_ELEMENT4,
-  body4Mono: DEFAULT_ELEMENT4,
+  body1: DEFAULT_ELEMENT3,
+  body2: DEFAULT_ELEMENT3,
+  body3: DEFAULT_ELEMENT3,
+  body4: DEFAULT_ELEMENT3,
+  body1Mono: DEFAULT_ELEMENT3,
+  body2Mono: DEFAULT_ELEMENT3,
+  body3Mono: DEFAULT_ELEMENT3,
+  body4Mono: DEFAULT_ELEMENT3,
   label1: labelElement,
   label2: labelElement,
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = styled28.div`
+var StyledText = styled26.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -9067,7 +8970,7 @@ var StyledText = styled28.div`
       }
     `}
 `;
-var TextComponent = forwardRef10(
+var TextComponent = forwardRef9(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -9080,7 +8983,7 @@ var TextComponent = forwardRef10(
     renderAs,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx218(
+    return /* @__PURE__ */ jsx215(
       StyledText,
       {
         ref,
@@ -9102,8 +9005,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-import { jsx as jsx219, jsxs as jsxs19 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled29.div`
+import { jsx as jsx216, jsxs as jsxs18 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled27.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -9118,8 +9021,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs19(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx219(
+  return /* @__PURE__ */ jsxs18(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ jsx216(
       Icon,
       {
         size: "md",
@@ -9127,7 +9030,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx219(
+    /* @__PURE__ */ jsx216(
       Text,
       {
         prominence: "secondary",
@@ -9139,8 +9042,8 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled30, { css as css24 } from "styled-components";
-import { jsx as jsx220 } from "react/jsx-runtime";
+import styled28, { css as css24 } from "styled-components";
+import { jsx as jsx217 } from "react/jsx-runtime";
 var horizontalBorderCss = css24`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -9154,7 +9057,7 @@ var verticalBorderCss = css24`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled30.div`
+var DividerComponent = styled28.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -9166,7 +9069,7 @@ var DividerComponent = styled30.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ jsx220(
+  return /* @__PURE__ */ jsx217(
     DividerComponent,
     {
       $orientation: orientation,
@@ -9179,8 +9082,8 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled33, { css as css27 } from "styled-components";
-import { useState as useState9, useRef as useRef9 } from "react";
+import styled31, { css as css27 } from "styled-components";
+import { useState as useState9, useRef as useRef8 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -9190,8 +9093,8 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled31, { keyframes as keyframes2 } from "styled-components";
-import { jsx as jsx221, jsxs as jsxs20 } from "react/jsx-runtime";
+import styled29, { keyframes as keyframes2 } from "styled-components";
+import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
 var hide = keyframes2`
   from {
     opacity: 1;
@@ -9240,7 +9143,7 @@ var slideRightAndFade = keyframes2`
     transform: translateX(0);
   }
 `;
-var StyledContent = styled31(TooltipContent)`
+var StyledContent = styled29(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -9302,21 +9205,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs19(
     TooltipRoot,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx221(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx221(TooltipPortal, { children: /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsx218(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx218(TooltipPortal, { children: /* @__PURE__ */ jsxs19(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx221(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx221(
+              !hideArrow ? /* @__PURE__ */ jsx218(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx218(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -9325,7 +9228,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx221("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ jsx218("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
             ]
@@ -9338,8 +9241,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef11, cloneElement as cloneElement3, useRef as useRef8 } from "react";
-import styled32, { css as css26 } from "styled-components";
+import { forwardRef as forwardRef10, cloneElement as cloneElement3, useRef as useRef7 } from "react";
+import styled30, { css as css26 } from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil17, isRecord as isRecord4 } from "@wistia/type-guards";
 
 // src/css/sharedStyles/inputCssVariables.ts
@@ -9370,7 +9273,7 @@ var inputCssVariables = css25`
 `;
 
 // src/components/Input/Input.tsx
-import { jsx as jsx222, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx219, jsxs as jsxs20 } from "react/jsx-runtime";
 var inputStyles = css26`
   ${inputCssVariables}
   input,
@@ -9406,7 +9309,7 @@ var inputStyles = css26`
     }
   }
 `;
-var StyledInputContainer = styled32.div`
+var StyledInputContainer = styled30.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9473,7 +9376,7 @@ var StyledInputContainer = styled32.div`
     padding-right: 32px;
   }
 `;
-var Input = forwardRef11(
+var Input = forwardRef10(
   ({
     fullWidth = true,
     monospace = false,
@@ -9483,14 +9386,14 @@ var Input = forwardRef11(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = useRef8();
+    const internalRef = useRef7();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
       isNotNil17(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
     if (isNil12(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx222(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx219(Icon, { type: "search" });
     }
     if (isNotNil17(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement3(leftIconToDisplay, {
@@ -9515,21 +9418,21 @@ var Input = forwardRef11(
         });
       }
     };
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs20(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx222(
+          type === "multiline" ? /* @__PURE__ */ jsx219(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ jsx222(
+          ) : /* @__PURE__ */ jsx219(
             "input",
             {
               ...props,
@@ -9547,8 +9450,8 @@ var Input = forwardRef11(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { Fragment as Fragment5, jsx as jsx223, jsxs as jsxs22 } from "react/jsx-runtime";
-var StyledInput = styled33(Input)`
+import { Fragment as Fragment5, jsx as jsx220, jsxs as jsxs21 } from "react/jsx-runtime";
+var StyledInput = styled31(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9575,7 +9478,7 @@ var editableStyles = css27`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled33(Heading)`
+var StyledHeading2 = styled31(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9596,7 +9499,7 @@ var EditableHeading = ({
   const [value, setValue] = useState9(children);
   const [previousValue, setPreviousValue] = useState9(children);
   const [headingHeight, setHeadingHeight] = useState9("60");
-  const headingRef = useRef9(null);
+  const headingRef = useRef8(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -9629,7 +9532,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx223(
+  const HeadingComponent2 = /* @__PURE__ */ jsx220(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9643,7 +9546,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ jsx223(
+    return /* @__PURE__ */ jsx220(
       StyledInput,
       {
         $height: headingHeight,
@@ -9661,9 +9564,9 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs22(Fragment5, { children: [
-    /* @__PURE__ */ jsx223(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ jsx223(ScreenReaderOnly, { children: /* @__PURE__ */ jsx223(
+  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    /* @__PURE__ */ jsx220(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ jsx220(ScreenReaderOnly, { children: /* @__PURE__ */ jsx220(
       "button",
       {
         "aria-label": ariaLabel,
@@ -9675,17 +9578,51 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef12, useRef as useRef10, useMemo as useMemo5, createContext as createContext4, useState as useState10, useId as useId2 } from "react";
-import styled34 from "styled-components";
+import { forwardRef as forwardRef12, useRef as useRef9, useMemo as useMemo4, createContext as createContext3, useState as useState10, useId as useId2 } from "react";
+import styled33 from "styled-components";
 import { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
-import { jsx as jsx224 } from "react/jsx-runtime";
-var StyledForm = styled34.form`
+
+// src/components/Stack/Stack.tsx
+import { forwardRef as forwardRef11 } from "react";
+import styled32 from "styled-components";
+import { jsx as jsx221 } from "react/jsx-runtime";
+var DEFAULT_ELEMENT4 = "div";
+var StyledStack = styled32.div`
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
+  gap: ${({ $gap }) => `var(--wui-${$gap})`};
+  align-items: ${({ $alignItems }) => $alignItems};
+`;
+var StackComponent = forwardRef11(
+  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
+    const responsiveGap = useResponsiveProp(gap);
+    const responsiveDirection = useResponsiveProp(direction);
+    const responsiveAlignItems = useResponsiveProp(alignItems);
+    return /* @__PURE__ */ jsx221(
+      StyledStack,
+      {
+        ref,
+        $alignItems: responsiveAlignItems,
+        $direction: responsiveDirection,
+        $gap: responsiveGap,
+        as: renderAs ?? DEFAULT_ELEMENT4,
+        ...props
+      }
+    );
+  }
+);
+StackComponent.displayName = "Stack";
+var Stack = makePolymorphic(StackComponent);
+
+// src/components/Form/Form.tsx
+import { jsx as jsx222 } from "react/jsx-runtime";
+var StyledForm = styled33.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = createContext4({
+var FormContext = createContext3({
   values: {},
   errors: {},
   hasSubmitted: false,
@@ -9703,7 +9640,7 @@ var FormComponent = ({
 }, forwardedRef) => {
   const [errors, setErrors] = useState10({});
   const [hasSubmitted, setHasSubmitted] = useState10(false);
-  const innerRef = useRef10();
+  const innerRef = useRef9();
   const ref = forwardedRef ?? innerRef;
   const autoId = useId2();
   const id = props.id ?? autoId;
@@ -9747,7 +9684,7 @@ var FormComponent = ({
       void action(null);
     }
   };
-  const context = useMemo5(() => {
+  const context = useMemo4(() => {
     return {
       values,
       errors,
@@ -9758,7 +9695,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ jsx224(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx224(
+    /* @__PURE__ */ jsx222(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx222(
       Stack,
       {
         ...props,
@@ -9815,23 +9752,23 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-import { useContext as useContext4, useRef as useRef11 } from "react";
+import { useContext as useContext3, useRef as useRef10 } from "react";
 import { isArray, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx225, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx223, jsxs as jsxs22 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx225("li", { children: /* @__PURE__ */ jsx225(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx223("li", { children: /* @__PURE__ */ jsx223(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = useRef11(null);
-  const { formId, errors, hasSubmitted } = useContext4(FormContext);
+  const ref = useRef10(null);
+  const { formId, errors, hasSubmitted } = useContext3(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs23("div", { ref, children: [
-    /* @__PURE__ */ jsx225("p", { children: description }),
-    /* @__PURE__ */ jsx225("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined8(error)).map(
-      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx225(
+  return /* @__PURE__ */ jsxs22("div", { ref, children: [
+    /* @__PURE__ */ jsx223("p", { children: description }),
+    /* @__PURE__ */ jsx223("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined8(error)).map(
+      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx223(
         ErrorItem,
         {
           error: err,
@@ -9839,7 +9776,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx225(
+      )) : /* @__PURE__ */ jsx223(
         ErrorItem,
         {
           error: error ?? "",
@@ -9853,13 +9790,13 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-import { Children as Children4, cloneElement as cloneElement4, useContext as useContext5 } from "react";
+import { Children as Children4, cloneElement as cloneElement4, useContext as useContext4 } from "react";
 import styled36 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil18, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled35, { css as css28 } from "styled-components";
-import { jsx as jsx226 } from "react/jsx-runtime";
+import styled34, { css as css28 } from "styled-components";
+import { jsx as jsx224 } from "react/jsx-runtime";
 var requiredStyle = css28`
   &::after {
     color: var(--wui-color-text-error);
@@ -9871,7 +9808,7 @@ var requiredStyle = css28`
 var disabledStyle3 = css28`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = styled35.label`
+var StyledLabel3 = styled34.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9903,7 +9840,7 @@ var Label = ({
   screenReaderOnly = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx226(
+  return /* @__PURE__ */ jsx224(
     StyledLabel3,
     {
       ...props,
@@ -9917,6 +9854,63 @@ var Label = ({
 };
 Label.displayName = "Label";
 
+// src/components/FormGroup/CheckboxGroup.tsx
+import { createContext as createContext4, useMemo as useMemo5 } from "react";
+
+// src/components/FormGroup/FormGroup.tsx
+import styled35 from "styled-components";
+import { useRef as useRef11 } from "react";
+import { jsx as jsx225, jsxs as jsxs23 } from "react/jsx-runtime";
+var StyledFieldset = styled35.fieldset`
+  border: 0;
+`;
+var StyledLegend = styled35.legend`
+  margin-bottom: var(--space-01);
+`;
+var FormGroup = ({ children, label, ...props }) => {
+  const ref = useRef11();
+  return /* @__PURE__ */ jsxs23(
+    Stack,
+    {
+      ...props,
+      ref,
+      renderAs: StyledFieldset,
+      children: [
+        /* @__PURE__ */ jsx225(
+          Heading,
+          {
+            renderAs: StyledLegend,
+            variant: "heading5",
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+FormGroup.displayName = "FormGroup";
+
+// src/components/FormGroup/CheckboxGroup.tsx
+import { jsx as jsx226 } from "react/jsx-runtime";
+var CheckboxGroupContext = createContext4(null);
+var CheckboxGroup = ({
+  children,
+  name,
+  onChange,
+  value,
+  ...props
+}) => {
+  const context = useMemo5(() => {
+    return {
+      name,
+      onChange
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ jsx226(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx226(FormGroup, { ...props, children }) });
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+
 // src/components/FormField/FormField.tsx
 import { Fragment as Fragment6, jsx as jsx227, jsxs as jsxs24 } from "react/jsx-runtime";
 var StyledFormField = styled36.div`
@@ -9992,8 +9986,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = useContext5(FormContext);
-  const checkboxGroup = useContext5(CheckboxGroupContext);
+  const formState = useContext4(FormContext);
+  const checkboxGroup = useContext4(CheckboxGroupContext);
   const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
@@ -10058,12 +10052,9 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-import { createContext as createContext5, useMemo as useMemo6, useContext as useContext6 } from "react";
+import { createContext as createContext5, useMemo as useMemo6 } from "react";
 import { jsx as jsx228 } from "react/jsx-runtime";
 var RadioGroupContext = createContext5(null);
-var useRadioGroup = () => {
-  return useContext6(RadioGroupContext);
-};
 var RadioGroup = ({
   children,
   name,
@@ -10304,9 +10295,9 @@ import { isNotNil as isNotNil20, isNotUndefined as isNotUndefined10 } from "@wis
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
-import { createContext as createContext6, useContext as useContext7 } from "react";
+import { createContext as createContext6, useContext as useContext5 } from "react";
 var MenuContext = createContext6({ compact: false });
-var useMenuContext = () => useContext7(MenuContext);
+var useMenuContext = () => useContext5(MenuContext);
 
 // src/components/Menu/Menu.tsx
 import { jsx as jsx232, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -11532,11 +11523,6 @@ var Radio = forwardRef20(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `wistia-ui-radio-${generatedId}`;
-    const radioGroupContext = useRadioGroup();
-    const contextName = radioGroupContext?.name;
-    const contextOnChange = radioGroupContext?.onChange;
-    const radioName = name ?? contextName;
-    const handleOnChange = onChange ?? contextOnChange;
     return /* @__PURE__ */ jsxs35(
       StyledRadioWrapper,
       {
@@ -11551,8 +11537,8 @@ var Radio = forwardRef20(
               checked,
               disabled,
               id: computedId,
-              name: radioName,
-              onChange: handleOnChange,
+              name,
+              onChange,
               required,
               type: "radio",
               value
@@ -11591,7 +11577,7 @@ import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil13 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
-import { createContext as createContext7, useContext as useContext8, useMemo as useMemo8, useState as useState14 } from "react";
+import { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState14 } from "react";
 import { jsx as jsx250 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext7(null);
 var SelectedItemStyleProvider = ({
@@ -11618,7 +11604,7 @@ var SelectedItemStyleProvider = ({
   return /* @__PURE__ */ jsx250(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
-  const context = useContext8(SelectedItemStyleContext);
+  const context = useContext6(SelectedItemStyleContext);
   if (context === null) {
     throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
   }
@@ -11629,11 +11615,11 @@ var useSelectedItemStyle = () => {
 import styled54 from "styled-components";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
-import { createContext as createContext8, useContext as useContext9 } from "react";
+import { createContext as createContext8, useContext as useContext7 } from "react";
 var SegmentedControlValueContext = createContext8(null);
 var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
 var useSegmentedControlValue = () => {
-  const context = useContext9(SegmentedControlValueContext);
+  const context = useContext7(SegmentedControlValueContext);
   if (context === null) {
     throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
   }
@@ -12265,7 +12251,7 @@ var TableBody = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableCell.tsx
-import { useContext as useContext10 } from "react";
+import { useContext as useContext8 } from "react";
 import styled63, { css as css38 } from "styled-components";
 import { jsx as jsx259 } from "react/jsx-runtime";
 var sharedStyles = css38`
@@ -12286,7 +12272,7 @@ var StyledTd = styled63.td`
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = useContext10(TableSectionContext);
+  const section = useContext8(TableSectionContext);
   if (section === "head") {
     return /* @__PURE__ */ jsx259(StyledTh, { ...props, children });
   }
@@ -12379,11 +12365,11 @@ import { Trigger as RadixTab } from "@radix-ui/react-tabs";
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
-import { createContext as createContext10, useContext as useContext11 } from "react";
+import { createContext as createContext10, useContext as useContext9 } from "react";
 var TabsValueContext = createContext10(null);
 var TabsValueProvider = TabsValueContext.Provider;
 var useTabsValue = () => {
-  const context = useContext11(TabsValueContext);
+  const context = useContext9(TabsValueContext);
   if (context === null) {
     throw new Error("useTabsValue must be used within a TabsValueProvider");
   }