@wistia/ui 0.9.4 → 0.9.5-beta.710b9e02.ea620db

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.9.4
+ * @license @wistia/ui v0.9.5-beta.710b9e02.ea620db
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8208,9 +8208,9 @@ var Center = (0, import_react28.forwardRef)(
 Center.displayName = "Center";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react29 = require("react");
-var import_styled_components36 = __toESM(require("styled-components"));
-var import_type_guards25 = require("@wistia/type-guards");
+var import_react33 = require("react");
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_type_guards26 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_styled_components35 = __toESM(require("styled-components"));
@@ -8328,9 +8328,230 @@ var FormControlLabel = ({
 };
 FormControlLabel.displayName = "FormControlLabel";
 
-// src/components/Checkbox/Checkbox.tsx
+// src/components/FormGroup/CheckboxGroup.tsx
+var import_react32 = require("react");
+
+// src/components/FormGroup/FormGroup.tsx
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_react31 = require("react");
+
+// src/components/Stack/Stack.tsx
+var import_react29 = require("react");
+var import_styled_components36 = __toESM(require("styled-components"));
 var import_jsx_runtime208 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+var DEFAULT_ELEMENT2 = "div";
+var StyledStack = import_styled_components36.default.div`
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
+  gap: ${({ $gap }) => `var(--wui-${$gap})`};
+  align-items: ${({ $alignItems }) => $alignItems};
+`;
+var StackComponent = (0, import_react29.forwardRef)(
+  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
+    const responsiveGap = useResponsiveProp(gap);
+    const responsiveDirection = useResponsiveProp(direction);
+    const responsiveAlignItems = useResponsiveProp(alignItems);
+    return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+      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
+var import_react30 = require("react");
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_type_guards25 = require("@wistia/type-guards");
+var import_jsx_runtime209 = require("react/jsx-runtime");
+var heroStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-hero-family);
+  --font-size: var(--wui-typography-heading-hero-size);
+  --font-weight: var(--wui-typography-heading-hero-weight);
+  --line-height: var(--wui-typography-heading-hero-line-height);
+`;
+var heading1TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-1-family);
+  --font-size: var(--wui-typography-heading-1-size);
+  --font-weight: var(--wui-typography-heading-1-weight);
+  --line-height: var(--wui-typography-heading-1-line-height);
+`;
+var heading2TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-2-family);
+  --font-size: var(--wui-typography-heading-2-size);
+  --font-weight: var(--wui-typography-heading-2-weight);
+  --line-height: var(--wui-typography-heading-2-line-height);
+`;
+var heading3TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-3-family);
+  --font-size: var(--wui-typography-heading-3-size);
+  --font-weight: var(--wui-typography-heading-3-weight);
+  --line-height: var(--wui-typography-heading-3-line-height);
+`;
+var heading4TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-4-family);
+  --font-size: var(--wui-typography-heading-4-size);
+  --font-weight: var(--wui-typography-heading-4-weight);
+  --line-height: var(--wui-typography-heading-4-line-height);
+`;
+var heading5TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-5-family);
+  --font-size: var(--wui-typography-heading-5-size);
+  --font-weight: var(--wui-typography-heading-5-weight);
+  --line-height: var(--wui-typography-heading-5-line-height);
+`;
+var heading6TextStyle = import_styled_components37.css`
+  --font-family: var(--wui-typography-heading-6-family);
+  --font-size: var(--wui-typography-heading-6-size);
+  --font-weight: var(--wui-typography-heading-6-weight);
+  --line-height: var(--wui-typography-heading-6-line-height);
+`;
+var variantStyleMap = {
+  hero: heroStyle,
+  heading1: heading1TextStyle,
+  heading2: heading2TextStyle,
+  heading3: heading3TextStyle,
+  heading4: heading4TextStyle,
+  heading5: heading5TextStyle,
+  heading6: heading6TextStyle
+};
+var DEFAULT_ELEMENT3 = "h1";
+var StyledHeading = import_styled_components37.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  color: var(--wui-color-text);
+  ${({ $variant }) => variantStyleMap[$variant]}
+  ${({ $truncate }) => {
+  if ((0, import_type_guards25.isNotNil)($truncate)) {
+    return import_styled_components37.css`
+        ${ellipsisStyle};
+        ${lineClampCss($truncate)};
+      `;
+  }
+  return void 0;
+}}
+  ${({ $inline }) => $inline && import_styled_components37.css`
+      display: inline-block;
+    `}
+  ${({ $disabled }) => $disabled && import_styled_components37.css`
+      color: var(--wui-color-text-disabled);
+    `}
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components37.css`
+      user-select: none;
+    `}
+  ${({ $align }) => import_styled_components37.css`
+    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 = (0, import_react30.forwardRef)(
+  ({
+    align = "left",
+    colorScheme = "inherit",
+    disabled = false,
+    inline = false,
+    preventUserSelect = false,
+    truncate,
+    variant = "heading1",
+    renderAs,
+    ...props
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+    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
+var import_jsx_runtime210 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components38.default.fieldset`
+  border: 0;
+`;
+var StyledLegend = import_styled_components38.default.legend`
+  margin-bottom: var(--space-01);
+`;
+var FormGroup = ({ children, label, ...props }) => {
+  const ref = (0, import_react31.useRef)();
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(
+    Stack,
+    {
+      ...props,
+      ref,
+      renderAs: StyledFieldset,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
+          Heading,
+          {
+            renderAs: StyledLegend,
+            variant: "heading5",
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+};
+FormGroup.displayName = "FormGroup";
+
+// src/components/FormGroup/CheckboxGroup.tsx
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var CheckboxGroupContext = (0, import_react32.createContext)(null);
+var useCheckboxGroup = () => {
+  return (0, import_react32.useContext)(CheckboxGroupContext);
+};
+var CheckboxGroup = ({
+  children,
+  name,
+  onChange,
+  value,
+  ...props
+}) => {
+  const context = (0, import_react32.useMemo)(() => {
+    return {
+      name,
+      onChange
+    };
+  }, [name, onChange]);
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(FormGroup, { ...props, children }) });
+};
+CheckboxGroup.displayName = "CheckboxGroup";
+
+// src/components/Checkbox/Checkbox.tsx
+var import_jsx_runtime212 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -8338,7 +8559,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
@@ -8347,7 +8568,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
     )
   }
 );
-var sizeSmall = import_styled_components36.css`
+var sizeSmall = import_styled_components39.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -8358,7 +8579,7 @@ var sizeSmall = import_styled_components36.css`
     height: 7px;
   }
 `;
-var sizeMedium = import_styled_components36.css`
+var sizeMedium = import_styled_components39.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -8369,7 +8590,7 @@ var sizeMedium = import_styled_components36.css`
     height: 9px;
   }
 `;
-var sizeLarge = import_styled_components36.css`
+var sizeLarge = import_styled_components39.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -8385,14 +8606,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components36.default.div`
+var StyledCheckboxWrapper = import_styled_components39.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = import_styled_components36.default.div`
+var StyledCheckboxInput = import_styled_components39.default.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -8414,7 +8635,7 @@ var StyledCheckboxInput = import_styled_components36.default.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components36.default.input`
+var StyledHiddenCheckboxInput = import_styled_components39.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -8428,7 +8649,7 @@ var StyledHiddenCheckboxInput = import_styled_components36.default.input`
     display: block;
   }
 `;
-var Checkbox = (0, import_react29.forwardRef)(
+var Checkbox = (0, import_react33.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -8443,10 +8664,15 @@ var Checkbox = (0, import_react29.forwardRef)(
     hideLabel = false,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react29.useId)();
-    const computedId = (0, import_type_guards25.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+    const generatedId = (0, import_react33.useId)();
+    const computedId = (0, import_type_guards26.isNonEmptyString)(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__ */ (0, import_jsx_runtime212.jsxs)(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
         StyledHiddenCheckboxInput,
         {
           ...props,
@@ -8454,23 +8680,23 @@ var Checkbox = (0, import_react29.forwardRef)(
           checked,
           disabled,
           id: computedId,
-          name,
-          onChange,
+          name: checkboxName,
+          onChange: handleOnChange,
           required,
           type: "checkbox",
           value
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(CheckIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(CheckIcon, {})
             }
           ),
           description,
@@ -8486,14 +8712,14 @@ var Checkbox = (0, import_react29.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-var import_react30 = require("react");
+var import_react34 = require("react");
 var isClickableElement = (element) => {
   if (!element) return false;
   const el = element;
   return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
 };
 var ClickRegion = ({ children, targetRef }) => {
-  (0, import_react30.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -8501,7 +8727,7 @@ var ClickRegion = ({ children, targetRef }) => {
     } else {
     }
   }, [targetRef]);
-  const handleClick = (0, import_react30.useCallback)(
+  const handleClick = (0, import_react34.useCallback)(
     (event) => {
       const node = targetRef.current;
       if (event.target === node) {
@@ -8521,7 +8747,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return (0, import_react30.cloneElement)(import_react30.Children.only(children), {
+  return (0, import_react34.cloneElement)(import_react34.Children.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -8530,10 +8756,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
-var import_type_guards26 = require("@wistia/type-guards");
-var import_styled_components37 = __toESM(require("styled-components"));
-var import_jsx_runtime209 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components37.default)(import_react_collapsible.Root)`
+var import_type_guards27 = require("@wistia/type-guards");
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components40.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -8547,32 +8773,32 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...(0, import_type_guards26.isNotNil)(onOpenChange) && (0, import_type_guards26.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards27.isNotNil)(onOpenChange) && (0, import_type_guards27.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
-var import_react31 = require("react");
+var import_react35 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_jsx_runtime210 = require("react/jsx-runtime");
+var import_jsx_runtime214 = require("react/jsx-runtime");
 var CollapsibleTrigger = ({ children }) => {
-  import_react31.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
+  import_react35.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
+var import_styled_components41 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
-var import_type_guards27 = require("@wistia/type-guards");
-var import_jsx_runtime211 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components38.default.div`
+var import_type_guards28 = require("@wistia/type-guards");
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components41.default.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if ((0, import_type_guards27.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
+  if ((0, import_type_guards28.isNotUndefined)(clamp)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       ClampedContent,
       {
         $clamp: clamp,
@@ -8581,147 +8807,18 @@ var CollapsibleContent = ({ clamp, children }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(import_jsx_runtime211.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(import_react_collapsible3.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime215.jsxs)(import_jsx_runtime215.Fragment, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_react33 = require("react");
-var import_styled_components40 = __toESM(require("styled-components"));
+var import_react36 = require("react");
+var import_styled_components42 = __toESM(require("styled-components"));
 var import_type_guards29 = require("@wistia/type-guards");
-
-// src/components/Heading/Heading.tsx
-var import_react32 = require("react");
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime212 = require("react/jsx-runtime");
-var heroStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-hero-family);
-  --font-size: var(--wui-typography-heading-hero-size);
-  --font-weight: var(--wui-typography-heading-hero-weight);
-  --line-height: var(--wui-typography-heading-hero-line-height);
-`;
-var heading1TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-1-family);
-  --font-size: var(--wui-typography-heading-1-size);
-  --font-weight: var(--wui-typography-heading-1-weight);
-  --line-height: var(--wui-typography-heading-1-line-height);
-`;
-var heading2TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-2-family);
-  --font-size: var(--wui-typography-heading-2-size);
-  --font-weight: var(--wui-typography-heading-2-weight);
-  --line-height: var(--wui-typography-heading-2-line-height);
-`;
-var heading3TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-3-family);
-  --font-size: var(--wui-typography-heading-3-size);
-  --font-weight: var(--wui-typography-heading-3-weight);
-  --line-height: var(--wui-typography-heading-3-line-height);
-`;
-var heading4TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-4-family);
-  --font-size: var(--wui-typography-heading-4-size);
-  --font-weight: var(--wui-typography-heading-4-weight);
-  --line-height: var(--wui-typography-heading-4-line-height);
-`;
-var heading5TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-5-family);
-  --font-size: var(--wui-typography-heading-5-size);
-  --font-weight: var(--wui-typography-heading-5-weight);
-  --line-height: var(--wui-typography-heading-5-line-height);
-`;
-var heading6TextStyle = import_styled_components39.css`
-  --font-family: var(--wui-typography-heading-6-family);
-  --font-size: var(--wui-typography-heading-6-size);
-  --font-weight: var(--wui-typography-heading-6-weight);
-  --line-height: var(--wui-typography-heading-6-line-height);
-`;
-var variantStyleMap = {
-  hero: heroStyle,
-  heading1: heading1TextStyle,
-  heading2: heading2TextStyle,
-  heading3: heading3TextStyle,
-  heading4: heading4TextStyle,
-  heading5: heading5TextStyle,
-  heading6: heading6TextStyle
-};
-var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components39.default.div`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  color: var(--wui-color-text);
-  ${({ $variant }) => variantStyleMap[$variant]}
-  ${({ $truncate }) => {
-  if ((0, import_type_guards28.isNotNil)($truncate)) {
-    return import_styled_components39.css`
-        ${ellipsisStyle};
-        ${lineClampCss($truncate)};
-      `;
-  }
-  return void 0;
-}}
-  ${({ $inline }) => $inline && import_styled_components39.css`
-      display: inline-block;
-    `}
-  ${({ $disabled }) => $disabled && import_styled_components39.css`
-      color: var(--wui-color-text-disabled);
-    `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components39.css`
-      user-select: none;
-    `}
-  ${({ $align }) => import_styled_components39.css`
-    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 = (0, import_react32.forwardRef)(
-  ({
-    align = "left",
-    colorScheme = "inherit",
-    disabled = false,
-    inline = false,
-    preventUserSelect = false,
-    truncate,
-    variant = "heading1",
-    renderAs,
-    ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
-    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
-var import_jsx_runtime213 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components40.default.div`
+var import_jsx_runtime216 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components42.default.div`
   display: grid;
   grid-template-areas: 'label slot' 'value value';
   grid-template-rows: auto auto;
@@ -8776,7 +8873,7 @@ var StyledDataCard = import_styled_components40.default.div`
     ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-var shimmer = import_styled_components40.keyframes`
+var shimmer = import_styled_components42.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -8784,7 +8881,7 @@ var shimmer = import_styled_components40.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components40.default.div`
+var LoadingBackground = import_styled_components42.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8795,27 +8892,27 @@ var LoadingBackground = import_styled_components40.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components40.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components42.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components40.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components42.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components40.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components42.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components40.default)(Heading)`
+var StyledValue = (0, import_styled_components42.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components40.default.div`
+var StyledSlot = import_styled_components42.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components40.default.div`
+var StyledDataCardTrendContainer = import_styled_components42.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8828,34 +8925,34 @@ var DataCardInner = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards29.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards29.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards29.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards29.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
-var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -8863,14 +8960,14 @@ var DataCardArrowIcon = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
   }
 );
 var DataCard = (props) => {
-  const ref = (0, import_react33.useRef)(null);
+  const ref = (0, import_react36.useRef)(null);
   if ((0, import_type_guards29.isNotNil)(props.href) || (0, import_type_guards29.isNotNil)(props.onClick)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot ?? DataCardArrowIcon,
         ...props,
-        label: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+        label: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
           Button,
           {
             ref,
@@ -8885,14 +8982,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(DataCardInner, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
-var import_jsx_runtime214 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components41.default)(Box)`
+var import_styled_components43 = __toESM(require("styled-components"));
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components43.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8906,7 +9003,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -8924,26 +9021,26 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components43 = __toESM(require("styled-components"));
+var import_styled_components45 = __toESM(require("styled-components"));
 
 // src/components/Text/Text.tsx
-var import_react34 = require("react");
-var import_styled_components42 = __toESM(require("styled-components"));
+var import_react37 = require("react");
+var import_styled_components44 = __toESM(require("styled-components"));
 var import_type_guards30 = require("@wistia/type-guards");
-var import_jsx_runtime215 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components42.css`
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components44.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components42.css`
+var labelBoldStyles = import_styled_components44.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components42.css`
+var body1TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8951,7 +9048,7 @@ var body1TextStyle = import_styled_components42.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components42.css`
+var body2TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8959,7 +9056,7 @@ var body2TextStyle = import_styled_components42.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components42.css`
+var body3TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8967,7 +9064,7 @@ var body3TextStyle = import_styled_components42.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components42.css`
+var body4TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8975,47 +9072,47 @@ var body4TextStyle = import_styled_components42.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components42.css`
+var label1TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components42.css`
+var label2TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components42.css`
+var label3TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components42.css`
+var label4TextStyle = import_styled_components44.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components42.css`
+var body1MonoTextStyle = import_styled_components44.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components42.css`
+var body2MonoTextStyle = import_styled_components44.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components42.css`
+var body3MonoTextStyle = import_styled_components44.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components42.css`
+var body4MonoTextStyle = import_styled_components44.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -9035,22 +9132,22 @@ var variantStyleMap2 = {
 };
 var bodyElement = "p";
 var labelElement = "span";
-var DEFAULT_ELEMENT3 = bodyElement;
+var DEFAULT_ELEMENT4 = bodyElement;
 var variantElementMap2 = {
-  body1: DEFAULT_ELEMENT3,
-  body2: DEFAULT_ELEMENT3,
-  body3: DEFAULT_ELEMENT3,
-  body4: DEFAULT_ELEMENT3,
-  body1Mono: DEFAULT_ELEMENT3,
-  body2Mono: DEFAULT_ELEMENT3,
-  body3Mono: DEFAULT_ELEMENT3,
-  body4Mono: DEFAULT_ELEMENT3,
+  body1: DEFAULT_ELEMENT4,
+  body2: DEFAULT_ELEMENT4,
+  body3: DEFAULT_ELEMENT4,
+  body4: DEFAULT_ELEMENT4,
+  body1Mono: DEFAULT_ELEMENT4,
+  body2Mono: DEFAULT_ELEMENT4,
+  body3Mono: DEFAULT_ELEMENT4,
+  body4Mono: DEFAULT_ELEMENT4,
   label1: labelElement,
   label2: labelElement,
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components42.default.div`
+var StyledText = import_styled_components44.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -9075,26 +9172,26 @@ var StyledText = import_styled_components42.default.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $truncate }) => {
   if ((0, import_type_guards30.isNotNil)($truncate)) {
-    return import_styled_components42.css`
+    return import_styled_components44.css`
         ${ellipsisStyle};
         ${lineClampCss($truncate)};
       `;
   }
   return void 0;
 }}
-  ${({ $inline }) => $inline && import_styled_components42.css`
+  ${({ $inline }) => $inline && import_styled_components44.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components42.css`
+  ${({ $disabled }) => $disabled && import_styled_components44.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components42.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components44.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components42.css`
+  ${({ $align }) => import_styled_components44.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components42.css`
+  ${({ as }) => as === "p" && import_styled_components44.css`
       display: block;
 
       + p {
@@ -9102,7 +9199,7 @@ var StyledText = import_styled_components42.default.div`
       }
     `}
 `;
-var TextComponent = (0, import_react34.forwardRef)(
+var TextComponent = (0, import_react37.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -9115,7 +9212,7 @@ var TextComponent = (0, import_react34.forwardRef)(
     renderAs,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
       StyledText,
       {
         ref,
@@ -9137,8 +9234,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_jsx_runtime216 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components43.default.div`
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components45.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -9153,8 +9250,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       Icon,
       {
         size: "md",
@@ -9162,7 +9259,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -9174,22 +9271,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components44 = __toESM(require("styled-components"));
-var import_jsx_runtime217 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components44.css`
+var import_styled_components46 = __toESM(require("styled-components"));
+var import_jsx_runtime220 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components46.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = import_styled_components44.css`
+var verticalBorderCss = import_styled_components46.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components44.default.div`
+var DividerComponent = import_styled_components46.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -9201,7 +9298,7 @@ var DividerComponent = import_styled_components44.default.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -9214,14 +9311,14 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
-var import_react36 = require("react");
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_react39 = require("react");
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components45 = __toESM(require("styled-components"));
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var hide = import_styled_components45.keyframes`
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_jsx_runtime221 = require("react/jsx-runtime");
+var hide = import_styled_components47.keyframes`
   from {
     opacity: 1;
   }
@@ -9229,7 +9326,7 @@ var hide = import_styled_components45.keyframes`
     opacity: 0;
   }
 `;
-var slideDownAndFade = import_styled_components45.keyframes`
+var slideDownAndFade = import_styled_components47.keyframes`
   from {
     opacity: 0;
     transform: translateY(-6px);
@@ -9239,7 +9336,7 @@ var slideDownAndFade = import_styled_components45.keyframes`
     transform: translateY(0);
   }
 `;
-var slideLeftAndFade = import_styled_components45.keyframes`
+var slideLeftAndFade = import_styled_components47.keyframes`
   from {
     opacity: 0;
     transform: translateX(6px);
@@ -9249,7 +9346,7 @@ var slideLeftAndFade = import_styled_components45.keyframes`
     transform: translateX(0);
   }
 `;
-var slideUpAndFade = import_styled_components45.keyframes`
+var slideUpAndFade = import_styled_components47.keyframes`
   from {
     opacity: 0;
     transform: translateY(6px);
@@ -9259,7 +9356,7 @@ var slideUpAndFade = import_styled_components45.keyframes`
     transform: translateY(0);
   }
 `;
-var slideRightAndFade = import_styled_components45.keyframes`
+var slideRightAndFade = import_styled_components47.keyframes`
   from {
     opacity: 0;
     transform: translateX(-6px);
@@ -9269,7 +9366,7 @@ var slideRightAndFade = import_styled_components45.keyframes`
     transform: translateX(0);
   }
 `;
-var StyledContent = (0, import_styled_components45.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components47.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -9331,21 +9428,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -9354,7 +9451,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime218.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -9367,13 +9464,13 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-var import_react35 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
+var import_react38 = require("react");
+var import_styled_components49 = __toESM(require("styled-components"));
 var import_type_guards31 = require("@wistia/type-guards");
 
 // src/css/sharedStyles/inputCssVariables.ts
-var import_styled_components46 = require("styled-components");
-var inputCssVariables = import_styled_components46.css`
+var import_styled_components48 = require("styled-components");
+var inputCssVariables = import_styled_components48.css`
   /* Colors */
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -9399,8 +9496,8 @@ var inputCssVariables = import_styled_components46.css`
 `;
 
 // src/components/Input/Input.tsx
-var import_jsx_runtime219 = require("react/jsx-runtime");
-var inputStyles = import_styled_components47.css`
+var import_jsx_runtime222 = require("react/jsx-runtime");
+var inputStyles = import_styled_components49.css`
   ${inputCssVariables}
   input,
   textarea {
@@ -9435,7 +9532,7 @@ var inputStyles = import_styled_components47.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components47.default.div`
+var StyledInputContainer = import_styled_components49.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9502,7 +9599,7 @@ var StyledInputContainer = import_styled_components47.default.div`
     padding-right: 32px;
   }
 `;
-var Input = (0, import_react35.forwardRef)(
+var Input = (0, import_react38.forwardRef)(
   ({
     fullWidth = true,
     monospace = false,
@@ -9512,24 +9609,24 @@ var Input = (0, import_react35.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react35.useRef)();
+    const internalRef = (0, import_react38.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
       (0, import_type_guards31.isNotNil)(externalRef) && (0, import_type_guards31.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards31.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Icon, { type: "search" });
     }
     if ((0, import_type_guards31.isNotNil)(leftIconToDisplay)) {
-      leftIconToDisplay = (0, import_react35.cloneElement)(leftIconToDisplay, {
+      leftIconToDisplay = (0, import_react38.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
     if ((0, import_type_guards31.isNotNil)(rightIconToDisplay)) {
-      rightIconToDisplay = (0, import_react35.cloneElement)(rightIconToDisplay, {
+      rightIconToDisplay = (0, import_react38.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
@@ -9544,21 +9641,21 @@ var Input = (0, import_react35.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
             "input",
             {
               ...props,
@@ -9576,8 +9673,8 @@ var Input = (0, import_react35.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components48.default)(Input)`
+var import_jsx_runtime223 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components50.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9594,7 +9691,7 @@ var StyledInput = (0, import_styled_components48.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components48.css`
+var editableStyles = import_styled_components50.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9604,7 +9701,7 @@ var editableStyles = import_styled_components48.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components48.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components50.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9621,11 +9718,11 @@ var EditableHeading = ({
   __forceEditing = false,
   editingDisabled = false
 }) => {
-  const [isEditing, setIsEditing] = (0, import_react36.useState)(false);
-  const [value, setValue] = (0, import_react36.useState)(children);
-  const [previousValue, setPreviousValue] = (0, import_react36.useState)(children);
-  const [headingHeight, setHeadingHeight] = (0, import_react36.useState)("60");
-  const headingRef = (0, import_react36.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react39.useState)(false);
+  const [value, setValue] = (0, import_react39.useState)(children);
+  const [previousValue, setPreviousValue] = (0, import_react39.useState)(children);
+  const [headingHeight, setHeadingHeight] = (0, import_react39.useState)("60");
+  const headingRef = (0, import_react39.useRef)(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -9658,7 +9755,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9672,7 +9769,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -9690,9 +9787,9 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(import_jsx_runtime220.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)(import_jsx_runtime223.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -9704,51 +9801,17 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-var import_react38 = require("react");
-var import_styled_components50 = __toESM(require("styled-components"));
+var import_react40 = require("react");
+var import_styled_components51 = __toESM(require("styled-components"));
 var import_type_guards32 = require("@wistia/type-guards");
-
-// src/components/Stack/Stack.tsx
-var import_react37 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_jsx_runtime221 = require("react/jsx-runtime");
-var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components49.default.div`
-  display: flex;
-  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ $gap }) => `var(--wui-${$gap})`};
-  align-items: ${({ $alignItems }) => $alignItems};
-`;
-var StackComponent = (0, import_react37.forwardRef)(
-  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
-    const responsiveGap = useResponsiveProp(gap);
-    const responsiveDirection = useResponsiveProp(direction);
-    const responsiveAlignItems = useResponsiveProp(alignItems);
-    return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
-      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
-var import_jsx_runtime222 = require("react/jsx-runtime");
-var StyledForm = import_styled_components50.default.form`
+var import_jsx_runtime224 = require("react/jsx-runtime");
+var StyledForm = import_styled_components51.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = (0, import_react38.createContext)({
+var FormContext = (0, import_react40.createContext)({
   values: {},
   errors: {},
   hasSubmitted: false,
@@ -9764,11 +9827,11 @@ var FormComponent = ({
   fullWidth = false,
   ...props
 }, forwardedRef) => {
-  const [errors, setErrors] = (0, import_react38.useState)({});
-  const [hasSubmitted, setHasSubmitted] = (0, import_react38.useState)(false);
-  const innerRef = (0, import_react38.useRef)();
+  const [errors, setErrors] = (0, import_react40.useState)({});
+  const [hasSubmitted, setHasSubmitted] = (0, import_react40.useState)(false);
+  const innerRef = (0, import_react40.useRef)();
   const ref = forwardedRef ?? innerRef;
-  const autoId = (0, import_react38.useId)();
+  const autoId = (0, import_react40.useId)();
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
@@ -9810,7 +9873,7 @@ var FormComponent = ({
       void action(null);
     }
   };
-  const context = (0, import_react38.useMemo)(() => {
+  const context = (0, import_react40.useMemo)(() => {
     return {
       values,
       errors,
@@ -9821,7 +9884,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
       Stack,
       {
         ...props,
@@ -9839,15 +9902,15 @@ var FormComponent = ({
   );
 };
 FormComponent.displayName = "Form";
-var Form = (0, import_react38.forwardRef)(FormComponent);
+var Form = (0, import_react40.forwardRef)(FormComponent);
 
 // src/components/Form/useFormState.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 var useFormState = (action, initialData = {}) => {
-  const [data, setData] = (0, import_react39.useState)(initialData);
-  const [isPending, setIsPending] = (0, import_react39.useState)(false);
-  const [error, setError] = (0, import_react39.useState)(null);
-  const formAction = (0, import_react39.useCallback)(
+  const [data, setData] = (0, import_react41.useState)(initialData);
+  const [isPending, setIsPending] = (0, import_react41.useState)(false);
+  const [error, setError] = (0, import_react41.useState)(null);
+  const formAction = (0, import_react41.useCallback)(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -9878,23 +9941,23 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_type_guards33 = require("@wistia/type-guards");
-var import_jsx_runtime223 = require("react/jsx-runtime");
+var import_jsx_runtime225 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = (0, import_react40.useRef)(null);
-  const { formId, errors, hasSubmitted } = (0, import_react40.useContext)(FormContext);
+  const ref = (0, import_react42.useRef)(null);
+  const { formId, errors, hasSubmitted } = (0, import_react42.useContext)(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards33.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards33.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime225.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards33.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards33.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
         ErrorItem,
         {
           error: err,
@@ -9902,7 +9965,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -9921,9 +9984,9 @@ var import_styled_components53 = __toESM(require("styled-components"));
 var import_type_guards34 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
-var import_jsx_runtime224 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components51.css`
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components52.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9931,10 +9994,10 @@ var requiredStyle = import_styled_components51.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components51.css`
+var disabledStyle3 = import_styled_components52.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components51.default.label`
+var StyledLabel3 = import_styled_components52.default.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9966,7 +10029,7 @@ var Label = ({
   screenReaderOnly = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     StyledLabel3,
     {
       ...props,
@@ -9980,63 +10043,6 @@ var Label = ({
 };
 Label.displayName = "Label";
 
-// src/components/FormGroup/CheckboxGroup.tsx
-var import_react42 = require("react");
-
-// src/components/FormGroup/FormGroup.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
-var import_react41 = require("react");
-var import_jsx_runtime225 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components52.default.fieldset`
-  border: 0;
-`;
-var StyledLegend = import_styled_components52.default.legend`
-  margin-bottom: var(--space-01);
-`;
-var FormGroup = ({ children, label, ...props }) => {
-  const ref = (0, import_react41.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
-    Stack,
-    {
-      ...props,
-      ref,
-      renderAs: StyledFieldset,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
-          Heading,
-          {
-            renderAs: StyledLegend,
-            variant: "heading5",
-            children: label
-          }
-        ),
-        children
-      ]
-    }
-  );
-};
-FormGroup.displayName = "FormGroup";
-
-// src/components/FormGroup/CheckboxGroup.tsx
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var CheckboxGroupContext = (0, import_react42.createContext)(null);
-var CheckboxGroup = ({
-  children,
-  name,
-  onChange,
-  value,
-  ...props
-}) => {
-  const context = (0, import_react42.useMemo)(() => {
-    return {
-      name,
-      onChange
-    };
-  }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(FormGroup, { ...props, children }) });
-};
-CheckboxGroup.displayName = "CheckboxGroup";
-
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime227 = require("react/jsx-runtime");
 var StyledFormField = import_styled_components53.default.div`
@@ -10181,6 +10187,9 @@ FormField.displayName = "FormField";
 var import_react44 = require("react");
 var import_jsx_runtime228 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react44.createContext)(null);
+var useRadioGroup = () => {
+  return (0, import_react44.useContext)(RadioGroupContext);
+};
 var RadioGroup = ({
   children,
   name,
@@ -11629,6 +11638,11 @@ var Radio = (0, import_react56.forwardRef)(
   }, ref) => {
     const generatedId = (0, import_react56.useId)();
     const computedId = (0, import_type_guards45.isNonEmptyString)(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__ */ (0, import_jsx_runtime249.jsxs)(
       StyledRadioWrapper,
       {
@@ -11643,8 +11657,8 @@ var Radio = (0, import_react56.forwardRef)(
               checked,
               disabled,
               id: computedId,
-              name,
-              onChange,
+              name: radioName,
+              onChange: handleOnChange,
               required,
               type: "radio",
               value
@@ -11875,7 +11889,7 @@ var StyledSegmentedControlItem = (0, import_styled_components73.default)(import_
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = (0, import_react60.forwardRef)(
-  ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
+  ({ disabled, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = (0, import_react60.useRef)(null);
@@ -11916,6 +11930,7 @@ var SegmentedControlItem = (0, import_react60.forwardRef)(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
+        ...otherProps,
         $hasLabel: (0, import_type_guards47.isNotNil)(label),
         "aria-label": (0, import_type_guards47.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,