@wistia/ui 0.9.5 → 0.9.6-beta.0bdb4e44.c8b94c3

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.9.5
+ * @license @wistia/ui v0.9.6-beta.0bdb4e44.c8b94c3
  *
  * 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 forwardRef7, useId } from "react";
-import styled20, { css as css21 } from "styled-components";
+import { forwardRef as forwardRef9, useId } from "react";
+import styled23, { css as css22 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
@@ -8196,9 +8196,230 @@ 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 jsx208, jsxs as jsxs15 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx208(
+import { jsx as jsx212, jsxs as jsxs16 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx212(
   "svg",
   {
     fill: "inherit",
@@ -8206,7 +8427,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx208(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx208(
+    children: /* @__PURE__ */ jsx212(
       "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",
@@ -8215,7 +8436,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx208(
     )
   }
 );
-var sizeSmall = css21`
+var sizeSmall = css22`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -8226,7 +8447,7 @@ var sizeSmall = css21`
     height: 7px;
   }
 `;
-var sizeMedium = css21`
+var sizeMedium = css22`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -8237,7 +8458,7 @@ var sizeMedium = css21`
     height: 9px;
   }
 `;
-var sizeLarge = css21`
+var sizeLarge = css22`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -8253,14 +8474,14 @@ var getSizeCss = (size) => {
   if (size === "lg") return sizeLarge;
   return sizeMedium;
 };
-var StyledCheckboxWrapper = styled20.div`
+var StyledCheckboxWrapper = styled23.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledCheckboxInput = styled20.div`
+var StyledCheckboxInput = styled23.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -8282,7 +8503,7 @@ var StyledCheckboxInput = styled20.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = styled20.input`
+var StyledHiddenCheckboxInput = styled23.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -8296,7 +8517,7 @@ var StyledHiddenCheckboxInput = styled20.input`
     display: block;
   }
 `;
-var Checkbox = forwardRef7(
+var Checkbox = forwardRef9(
   ({
     checked,
     disabled = false,
@@ -8313,8 +8534,13 @@ var Checkbox = forwardRef7(
   }, ref) => {
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ jsxs15(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ jsx208(
+    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(
         StyledHiddenCheckboxInput,
         {
           ...props,
@@ -8322,23 +8548,23 @@ var Checkbox = forwardRef7(
           checked,
           disabled,
           id: computedId,
-          name,
-          onChange,
+          name: checkboxName,
+          onChange: handleOnChange,
           required,
           type: "checkbox",
           value
         }
       ),
-      /* @__PURE__ */ jsx208(
+      /* @__PURE__ */ jsx212(
         FormControlLabel,
         {
-          controlSlot: /* @__PURE__ */ jsx208(
+          controlSlot: /* @__PURE__ */ jsx212(
             StyledCheckboxInput,
             {
               $disabled: disabled,
               $size: size,
               "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ jsx208(CheckIcon, {})
+              children: /* @__PURE__ */ jsx212(CheckIcon, {})
             }
           ),
           description,
@@ -8398,10 +8624,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
-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)`
+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)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -8415,181 +8641,52 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...isNotNil13(onOpenChange) && isNotNil13(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil14(onOpenChange) && isNotNil14(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx209(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx213(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 jsx210 } from "react/jsx-runtime";
+import { jsx as jsx214 } from "react/jsx-runtime";
 var CollapsibleTrigger = ({ children }) => {
   Children3.only(children);
-  return /* @__PURE__ */ jsx210(Trigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx214(Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import styled22 from "styled-components";
+import styled25 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined6 } from "@wistia/type-guards";
-import { Fragment as Fragment4, jsx as jsx211, jsxs as jsxs16 } from "react/jsx-runtime";
-var ClampedContent = styled22.div`
+import { Fragment as Fragment4, jsx as jsx215, jsxs as jsxs17 } from "react/jsx-runtime";
+var ClampedContent = styled25.div`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if (isNotUndefined6(clamp)) {
-    return /* @__PURE__ */ jsx211(
-      ClampedContent,
-      {
-        $clamp: clamp,
-        "data-wui-collapsible-content": "true",
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx211(Content, { children: /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    children,
-    " "
-  ] }) });
-};
-
-// src/components/DataCards/DataCard.tsx
-import { useRef as useRef6 } from "react";
-import styled24, { keyframes } from "styled-components";
-import { isNotNil as isNotNil15, isNotNull } from "@wistia/type-guards";
-
-// 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);
+  if (isNotUndefined6(clamp)) {
+    return /* @__PURE__ */ jsx215(
+      ClampedContent,
+      {
+        $clamp: clamp,
+        "data-wui-collapsible-content": "true",
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx215(Content, { children: /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    children,
+    " "
+  ] }) });
+};
 
 // src/components/DataCards/DataCard.tsx
-import { jsx as jsx213, jsxs as jsxs17 } from "react/jsx-runtime";
-var StyledDataCard = styled24.div`
+import { useRef as useRef7 } from "react";
+import styled26, { 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`
   display: grid;
   grid-template-areas: 'label slot' 'value value';
   grid-template-rows: auto auto;
@@ -8652,7 +8749,7 @@ var shimmer = keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled24.div`
+var LoadingBackground = styled26.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8663,27 +8760,27 @@ var LoadingBackground = styled24.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled24(LoadingBackground)`
+var StyledLoadingLabel = styled26(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled24(LoadingBackground)`
+var StyledLoadingValue = styled26(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = styled24(Heading)`
+var StyledLabel2 = styled26(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled24(Heading)`
+var StyledValue = styled26(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled24.div`
+var StyledSlot = styled26.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled24.div`
+var StyledDataCardTrendContainer = styled26.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8696,34 +8793,34 @@ var DataCardInner = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ jsxs17(
+}) => /* @__PURE__ */ jsxs18(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx213(
+      /* @__PURE__ */ jsx216(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx213(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx216(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx213(
+      /* @__PURE__ */ jsx216(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx213(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx216(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx213(StyledSlot, { children: upperRightSlot }),
-      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx213(StyledDataCardTrendContainer, { children: trend })
+      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx216(StyledSlot, { children: upperRightSlot }),
+      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx216(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
-var DataCardArrowIcon = /* @__PURE__ */ jsx213(
+var DataCardArrowIcon = /* @__PURE__ */ jsx216(
   Icon,
   {
     "data-wui-data-card-hover-icon": true,
@@ -8731,14 +8828,14 @@ var DataCardArrowIcon = /* @__PURE__ */ jsx213(
   }
 );
 var DataCard = (props) => {
-  const ref = useRef6(null);
+  const ref = useRef7(null);
   if (isNotNil15(props.href) || isNotNil15(props.onClick)) {
-    return /* @__PURE__ */ jsx213(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx213(
+    return /* @__PURE__ */ jsx216(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx216(
       DataCardInner,
       {
         upperRightSlot: props.upperRightSlot ?? DataCardArrowIcon,
         ...props,
-        label: /* @__PURE__ */ jsx213(
+        label: /* @__PURE__ */ jsx216(
           Button,
           {
             ref,
@@ -8753,14 +8850,14 @@ var DataCard = (props) => {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx213(DataCardInner, { ...props });
+  return /* @__PURE__ */ jsx216(DataCardInner, { ...props });
 };
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-import styled25 from "styled-components";
-import { jsx as jsx214 } from "react/jsx-runtime";
-var StyledDataCards = styled25(Box)`
+import styled27 from "styled-components";
+import { jsx as jsx217 } from "react/jsx-runtime";
+var StyledDataCards = styled27(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8774,7 +8871,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx214(
+  return /* @__PURE__ */ jsx217(
     StyledDataCards,
     {
       ...props,
@@ -8792,13 +8889,13 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled27 from "styled-components";
+import styled29 from "styled-components";
 
 // src/components/Text/Text.tsx
-import { forwardRef as forwardRef9 } from "react";
-import styled26, { css as css23 } from "styled-components";
+import { forwardRef as forwardRef10 } from "react";
+import styled28, { css as css23 } from "styled-components";
 import { isNotNil as isNotNil16 } from "@wistia/type-guards";
-import { jsx as jsx215 } from "react/jsx-runtime";
+import { jsx as jsx218 } from "react/jsx-runtime";
 var bodyBoldStyles = css23`
   > strong,
   b {
@@ -8903,22 +9000,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 = styled26.div`
+var StyledText = styled28.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8970,7 +9067,7 @@ var StyledText = styled26.div`
       }
     `}
 `;
-var TextComponent = forwardRef9(
+var TextComponent = forwardRef10(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -8983,7 +9080,7 @@ var TextComponent = forwardRef9(
     renderAs,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx215(
+    return /* @__PURE__ */ jsx218(
       StyledText,
       {
         ref,
@@ -9005,8 +9102,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-import { jsx as jsx216, jsxs as jsxs18 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled27.div`
+import { jsx as jsx219, jsxs as jsxs19 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled29.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -9021,8 +9118,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs18(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx216(
+  return /* @__PURE__ */ jsxs19(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ jsx219(
       Icon,
       {
         size: "md",
@@ -9030,7 +9127,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx216(
+    /* @__PURE__ */ jsx219(
       Text,
       {
         prominence: "secondary",
@@ -9042,8 +9139,8 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled28, { css as css24 } from "styled-components";
-import { jsx as jsx217 } from "react/jsx-runtime";
+import styled30, { css as css24 } from "styled-components";
+import { jsx as jsx220 } from "react/jsx-runtime";
 var horizontalBorderCss = css24`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -9057,7 +9154,7 @@ var verticalBorderCss = css24`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled28.div`
+var DividerComponent = styled30.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -9069,7 +9166,7 @@ var DividerComponent = styled28.div`
 }}
 `;
 var Divider = ({ orientation = "horizontal", ...props }) => {
-  return /* @__PURE__ */ jsx217(
+  return /* @__PURE__ */ jsx220(
     DividerComponent,
     {
       $orientation: orientation,
@@ -9082,8 +9179,8 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled31, { css as css27 } from "styled-components";
-import { useState as useState9, useRef as useRef8 } from "react";
+import styled33, { css as css27 } from "styled-components";
+import { useState as useState9, useRef as useRef9 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -9093,8 +9190,8 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled29, { keyframes as keyframes2 } from "styled-components";
-import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
+import styled31, { keyframes as keyframes2 } from "styled-components";
+import { jsx as jsx221, jsxs as jsxs20 } from "react/jsx-runtime";
 var hide = keyframes2`
   from {
     opacity: 1;
@@ -9143,7 +9240,7 @@ var slideRightAndFade = keyframes2`
     transform: translateX(0);
   }
 `;
-var StyledContent = styled29(TooltipContent)`
+var StyledContent = styled31(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -9205,21 +9302,21 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs20(
     TooltipRoot,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx218(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx218(TooltipPortal, { children: /* @__PURE__ */ jsxs19(
+        /* @__PURE__ */ jsx221(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx221(TooltipPortal, { children: /* @__PURE__ */ jsxs20(
           StyledContent,
           {
             side: direction,
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx218(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx218(
+              !hideArrow ? /* @__PURE__ */ jsx221(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx221(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -9228,7 +9325,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  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" })
+                  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" })
                 }
               ) }) : null
             ]
@@ -9241,8 +9338,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef10, cloneElement as cloneElement3, useRef as useRef7 } from "react";
-import styled30, { css as css26 } from "styled-components";
+import { forwardRef as forwardRef11, cloneElement as cloneElement3, useRef as useRef8 } from "react";
+import styled32, { 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
@@ -9273,7 +9370,7 @@ var inputCssVariables = css25`
 `;
 
 // src/components/Input/Input.tsx
-import { jsx as jsx219, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx222, jsxs as jsxs21 } from "react/jsx-runtime";
 var inputStyles = css26`
   ${inputCssVariables}
   input,
@@ -9309,7 +9406,7 @@ var inputStyles = css26`
     }
   }
 `;
-var StyledInputContainer = styled30.div`
+var StyledInputContainer = styled32.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9376,7 +9473,7 @@ var StyledInputContainer = styled30.div`
     padding-right: 32px;
   }
 `;
-var Input = forwardRef10(
+var Input = forwardRef11(
   ({
     fullWidth = true,
     monospace = false,
@@ -9386,14 +9483,14 @@ var Input = forwardRef10(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = useRef7();
+    const internalRef = useRef8();
     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__ */ jsx219(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx222(Icon, { type: "search" });
     }
     if (isNotNil17(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement3(leftIconToDisplay, {
@@ -9418,21 +9515,21 @@ var Input = forwardRef10(
         });
       }
     };
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx219(
+          type === "multiline" ? /* @__PURE__ */ jsx222(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus2
             }
-          ) : /* @__PURE__ */ jsx219(
+          ) : /* @__PURE__ */ jsx222(
             "input",
             {
               ...props,
@@ -9450,8 +9547,8 @@ var Input = forwardRef10(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { Fragment as Fragment5, jsx as jsx220, jsxs as jsxs21 } from "react/jsx-runtime";
-var StyledInput = styled31(Input)`
+import { Fragment as Fragment5, jsx as jsx223, jsxs as jsxs22 } from "react/jsx-runtime";
+var StyledInput = styled33(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9478,7 +9575,7 @@ var editableStyles = css27`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled31(Heading)`
+var StyledHeading2 = styled33(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9499,7 +9596,7 @@ var EditableHeading = ({
   const [value, setValue] = useState9(children);
   const [previousValue, setPreviousValue] = useState9(children);
   const [headingHeight, setHeadingHeight] = useState9("60");
-  const headingRef = useRef8(null);
+  const headingRef = useRef9(null);
   const handleSetEditing = (editing) => {
     if (editingDisabled) return;
     if (editing && headingRef.current) {
@@ -9532,7 +9629,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx220(
+  const HeadingComponent2 = /* @__PURE__ */ jsx223(
     StyledHeading2,
     {
       ref: headingRef,
@@ -9546,7 +9643,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || __forceEditing) {
-    return /* @__PURE__ */ jsx220(
+    return /* @__PURE__ */ jsx223(
       StyledInput,
       {
         $height: headingHeight,
@@ -9564,9 +9661,9 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-    /* @__PURE__ */ jsx220(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
-    /* @__PURE__ */ jsx220(ScreenReaderOnly, { children: /* @__PURE__ */ jsx220(
+  return /* @__PURE__ */ jsxs22(Fragment5, { children: [
+    /* @__PURE__ */ jsx223(Tooltip, { content: tooltipText, children: HeadingComponent2 }),
+    /* @__PURE__ */ jsx223(ScreenReaderOnly, { children: /* @__PURE__ */ jsx223(
       "button",
       {
         "aria-label": ariaLabel,
@@ -9578,51 +9675,17 @@ var EditableHeading = ({
 };
 
 // src/components/Form/Form.tsx
-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 { 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 { isNotUndefined as isNotUndefined7, isUndefined as isUndefined3 } from "@wistia/type-guards";
-
-// 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`
+import { jsx as jsx224 } from "react/jsx-runtime";
+var StyledForm = styled34.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
   align-items: ${({ $fullWidth }) => $fullWidth ? "stretch" : "flex-start"};
 `;
-var FormContext = createContext3({
+var FormContext = createContext4({
   values: {},
   errors: {},
   hasSubmitted: false,
@@ -9640,7 +9703,7 @@ var FormComponent = ({
 }, forwardedRef) => {
   const [errors, setErrors] = useState10({});
   const [hasSubmitted, setHasSubmitted] = useState10(false);
-  const innerRef = useRef9();
+  const innerRef = useRef10();
   const ref = forwardedRef ?? innerRef;
   const autoId = useId2();
   const id = props.id ?? autoId;
@@ -9684,7 +9747,7 @@ var FormComponent = ({
       void action(null);
     }
   };
-  const context = useMemo4(() => {
+  const context = useMemo5(() => {
     return {
       values,
       errors,
@@ -9695,7 +9758,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ jsx222(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx222(
+    /* @__PURE__ */ jsx224(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx224(
       Stack,
       {
         ...props,
@@ -9752,23 +9815,23 @@ var useFormState = (action, initialData = {}) => {
 };
 
 // src/components/Form/FormErrorSummary.tsx
-import { useContext as useContext3, useRef as useRef10 } from "react";
+import { useContext as useContext4, useRef as useRef11 } from "react";
 import { isArray, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
-import { jsx as jsx223, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx225, jsxs as jsxs23 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx223("li", { children: /* @__PURE__ */ jsx223(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx225("li", { children: /* @__PURE__ */ jsx225(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
-  const ref = useRef10(null);
-  const { formId, errors, hasSubmitted } = useContext3(FormContext);
+  const ref = useRef11(null);
+  const { formId, errors, hasSubmitted } = useContext4(FormContext);
   const isValid = Object.keys(errors).length === 0;
   if (isValid || !hasSubmitted) {
     return null;
   }
-  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(
+  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(
         ErrorItem,
         {
           error: err,
@@ -9776,7 +9839,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx223(
+      )) : /* @__PURE__ */ jsx225(
         ErrorItem,
         {
           error: error ?? "",
@@ -9790,13 +9853,13 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-import { Children as Children4, cloneElement as cloneElement4, useContext as useContext4 } from "react";
+import { Children as Children4, cloneElement as cloneElement4, useContext as useContext5 } 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 styled34, { css as css28 } from "styled-components";
-import { jsx as jsx224 } from "react/jsx-runtime";
+import styled35, { css as css28 } from "styled-components";
+import { jsx as jsx226 } from "react/jsx-runtime";
 var requiredStyle = css28`
   &::after {
     color: var(--wui-color-text-error);
@@ -9808,7 +9871,7 @@ var requiredStyle = css28`
 var disabledStyle3 = css28`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = styled34.label`
+var StyledLabel3 = styled35.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9840,7 +9903,7 @@ var Label = ({
   screenReaderOnly = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx224(
+  return /* @__PURE__ */ jsx226(
     StyledLabel3,
     {
       ...props,
@@ -9854,63 +9917,6 @@ 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`
@@ -9986,8 +9992,8 @@ var FormField = ({
   value,
   ...props
 }) => {
-  const formState = useContext4(FormContext);
-  const checkboxGroup = useContext4(CheckboxGroupContext);
+  const formState = useContext5(FormContext);
+  const checkboxGroup = useContext5(CheckboxGroupContext);
   const defaultValue = formState.values[name];
   const isIntegratedLabel = children.type === Checkbox;
   const computedId = id ?? `${formState.formId}-${name}`;
@@ -10052,9 +10058,12 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-import { createContext as createContext5, useMemo as useMemo6 } from "react";
+import { createContext as createContext5, useMemo as useMemo6, useContext as useContext6 } from "react";
 import { jsx as jsx228 } from "react/jsx-runtime";
 var RadioGroupContext = createContext5(null);
+var useRadioGroup = () => {
+  return useContext6(RadioGroupContext);
+};
 var RadioGroup = ({
   children,
   name,
@@ -10295,9 +10304,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 useContext5 } from "react";
+import { createContext as createContext6, useContext as useContext7 } from "react";
 var MenuContext = createContext6({ compact: false });
-var useMenuContext = () => useContext5(MenuContext);
+var useMenuContext = () => useContext7(MenuContext);
 
 // src/components/Menu/Menu.tsx
 import { jsx as jsx232, jsxs as jsxs26 } from "react/jsx-runtime";
@@ -11523,6 +11532,11 @@ 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,
       {
@@ -11537,8 +11551,8 @@ var Radio = forwardRef20(
               checked,
               disabled,
               id: computedId,
-              name,
-              onChange,
+              name: radioName,
+              onChange: handleOnChange,
               required,
               type: "radio",
               value
@@ -11577,7 +11591,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 useContext6, useMemo as useMemo8, useState as useState14 } from "react";
+import { createContext as createContext7, useContext as useContext8, useMemo as useMemo8, useState as useState14 } from "react";
 import { jsx as jsx250 } from "react/jsx-runtime";
 var SelectedItemStyleContext = createContext7(null);
 var SelectedItemStyleProvider = ({
@@ -11604,7 +11618,7 @@ var SelectedItemStyleProvider = ({
   return /* @__PURE__ */ jsx250(SelectedItemStyleContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemStyle = () => {
-  const context = useContext6(SelectedItemStyleContext);
+  const context = useContext8(SelectedItemStyleContext);
   if (context === null) {
     throw new Error("useSelectedItemStyle must be used within a SelectedItemStyleProvider");
   }
@@ -11615,11 +11629,11 @@ var useSelectedItemStyle = () => {
 import styled54 from "styled-components";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
-import { createContext as createContext8, useContext as useContext7 } from "react";
+import { createContext as createContext8, useContext as useContext9 } from "react";
 var SegmentedControlValueContext = createContext8(null);
 var SegmentedControlValueProvider = SegmentedControlValueContext.Provider;
 var useSegmentedControlValue = () => {
-  const context = useContext7(SegmentedControlValueContext);
+  const context = useContext9(SegmentedControlValueContext);
   if (context === null) {
     throw new Error("useSegmentedControlValue must be used within a SegmentedControlValueProvider");
   }
@@ -11736,7 +11750,7 @@ var segmentedControlItemStyles = css35`
     outline: 2px solid var(--wui-color-focus-ring);
   }
 
-  &:hover:not([data-state='on'], [data-state='active']) {
+  &:hover:not([data-state='on'], [data-state='active'], [aria-selected='true']) {
     background-color: var(--wui-color-bg-surface-secondary-hover);
   }
 
@@ -12251,7 +12265,7 @@ var TableBody = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableCell.tsx
-import { useContext as useContext8 } from "react";
+import { useContext as useContext10 } from "react";
 import styled63, { css as css38 } from "styled-components";
 import { jsx as jsx259 } from "react/jsx-runtime";
 var sharedStyles = css38`
@@ -12272,7 +12286,7 @@ var StyledTd = styled63.td`
   line-height: var(--wui-typography-body-2-line-height);
 `;
 var TableCell = ({ children, ...props }) => {
-  const section = useContext8(TableSectionContext);
+  const section = useContext10(TableSectionContext);
   if (section === "head") {
     return /* @__PURE__ */ jsx259(StyledTh, { ...props, children });
   }
@@ -12304,89 +12318,125 @@ var TableRow = ({ children, ...props }) => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { forwardRef as forwardRef27, useState as useState15 } from "react";
-import { Root as TabsRoot } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil31, isNil as isNil14 } from "@wistia/type-guards";
-import styled71 from "styled-components";
+import { Root as RadixTabsRoot } from "@radix-ui/react-tabs";
+import { useCallback as useCallback10, useState as useState15 } from "react";
+import { isNotNil as isNotNil30 } from "@wistia/type-guards";
 
-// src/components/Tabs/TabPanel.tsx
-import styled67 from "styled-components";
-import { Content as TabsContent } from "@radix-ui/react-tabs";
+// src/components/Tabs/useTabsValue.tsx
+import { createContext as createContext10, useContext as useContext11 } from "react";
+var TabsValueContext = createContext10(null);
+var TabsValueProvider = TabsValueContext.Provider;
+var useTabsValue = () => {
+  const context = useContext11(TabsValueContext);
+  if (context === null) {
+    throw new Error("useTabsValue must be used within a TabsValueProvider");
+  }
+  return context;
+};
+
+// src/components/Tabs/Tabs.tsx
 import { jsx as jsx263 } from "react/jsx-runtime";
-var StyledTabPanel = styled67(TabsContent)`
-  display: flex;
-  flex-direction: column;
-`;
-var TabPanel = ({ children, value, ...props }) => {
-  return /* @__PURE__ */ jsx263(
-    StyledTabPanel,
-    {
-      value,
-      ...props,
-      children
-    }
+var Tabs = ({
+  children,
+  value: valueProp,
+  onValueChange: onValueChangeProp,
+  defaultValue,
+  ...props
+}) => {
+  const [value, setValue] = useState15(valueProp ?? defaultValue);
+  const onValueChange = useCallback10(
+    (newValue) => {
+      setValue(newValue);
+      if (onValueChangeProp) {
+        onValueChangeProp(newValue);
+      }
+    },
+    [onValueChangeProp]
   );
+  const rootProps = {
+    ...props,
+    onValueChange
+  };
+  if (isNotNil30(value)) {
+    rootProps.value = value;
+  }
+  if (isNotNil30(defaultValue)) {
+    rootProps.defaultValue = defaultValue;
+  }
+  return /* @__PURE__ */ jsx263(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx263(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx263(SelectedItemStyleProvider, { children }) }) });
 };
-TabPanel.displayName = "TabPanel";
+Tabs.displayName = "Tabs";
 
-// src/components/Tabs/TabList.tsx
-import styled68 from "styled-components";
-import { List as RadixTabList } from "@radix-ui/react-tabs";
+// src/components/Tabs/TabsContent.tsx
+import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
 import { jsx as jsx264 } from "react/jsx-runtime";
-var StyledTabList = styled68(RadixTabList)`
-  ${segmentedControlStyles}
+var TabsContent = ({ children, value }) => {
+  return /* @__PURE__ */ jsx264(RadixTabsContent, { value, children });
+};
+TabsContent.displayName = "TabsContent";
 
-  margin-bottom: var(--wui-space-04);
-  width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
-  align-self: ${({ $fullWidth }) => $fullWidth ? "auto" : "flex-start"};
+// src/components/Tabs/TabsList.tsx
+import { List as RadixTabList } from "@radix-ui/react-tabs";
+import styled68 from "styled-components";
+
+// src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
+import styled67 from "styled-components";
+var TabsSelectedItemIndicatorDiv = styled67(SelectedItemIndicatorDiv)`
+  &:has(~ button[role='tab']:focus-visible) {
+    outline: 2px solid var(--wui-color-focus-ring);
+  }
 `;
-var TabList = ({
-  children,
-  fullWidth,
-  ariaLabel,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx264(
-    StyledTabList,
+
+// src/components/Tabs/SelectedTabIndicator.tsx
+import { jsx as jsx265 } from "react/jsx-runtime";
+var SelectedTabIndicator = () => {
+  const { selectedItemIndicatorStyle } = useSelectedItemStyle();
+  const selectedValue = useTabsValue();
+  if (selectedValue == null) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx265(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
+};
+
+// src/components/Tabs/TabsList.tsx
+import { jsx as jsx266, jsxs as jsxs42 } from "react/jsx-runtime";
+var StyledRadixTabsList = styled68(RadixTabList)`
+  ${segmentedControlStyles}
+`;
+var TabsList = ({ children, fullWidth = true, ...props }) => {
+  return /* @__PURE__ */ jsxs42(
+    StyledRadixTabsList,
     {
       $fullWidth: fullWidth,
-      "aria-label": ariaLabel,
-      ...props,
-      children
+      "aria-label": props["aria-label"],
+      children: [
+        /* @__PURE__ */ jsx266(SelectedTabIndicator, {}),
+        children
+      ]
     }
   );
 };
-TabList.displayName = "TabList";
+TabsList.displayName = "TabsList";
 
-// src/components/Tabs/TabItem.tsx
+// src/components/Tabs/TabsTrigger.tsx
 import { forwardRef as forwardRef26, useEffect as useEffect12, useRef as useRef14 } from "react";
-import styled69 from "styled-components";
-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 useContext9 } from "react";
-var TabsValueContext = createContext10(null);
-var TabsValueProvider = TabsValueContext.Provider;
-var useTabsValue = () => {
-  const context = useContext9(TabsValueContext);
-  if (context === null) {
-    throw new Error("useTabsValue must be used within a TabsValueProvider");
-  }
-  return context;
-};
+import { isNotNil as isNotNil31 } from "@wistia/type-guards";
 
-// src/components/Tabs/TabItem.tsx
-import { jsxs as jsxs42 } from "react/jsx-runtime";
-var StyledTabItem = styled69(RadixTab)`
+// src/components/Tabs/StyledRadixTabsTrigger.tsx
+import styled69 from "styled-components";
+import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
+var StyledRadixTabsTrigger = styled69(RadixTabsTrigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
     outline: none;
   }
 `;
-var TabItem = forwardRef26(
-  ({ disabled = false, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
+
+// src/components/Tabs/TabsTrigger.tsx
+import { jsxs as jsxs43 } from "react/jsx-runtime";
+var TabsTrigger = forwardRef26(
+  ({ disabled = false, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useTabsValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = useRef14(null);
@@ -12416,12 +12466,13 @@ var TabItem = forwardRef26(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs42(
-      StyledTabItem,
+    return /* @__PURE__ */ jsxs43(
+      StyledRadixTabsTrigger,
       {
+        ...otherProps,
         ref: combinedRef,
-        $hasLabel: isNotNil30(label),
-        "aria-label": isNotNil30(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil31(label),
+        "aria-label": isNotNil31(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -12432,176 +12483,14 @@ var TabItem = forwardRef26(
     );
   }
 );
-TabItem.displayName = "TabItem";
-
-// src/components/Tabs/extractTabItems.ts
-import { Children as Children6, Fragment as Fragment7, isValidElement as isValidElement2 } from "react";
-var extractTabItems = (children) => {
-  const tabItems = [];
-  Children6.forEach(children, (child) => {
-    if (!isValidElement2(child)) {
-      return;
-    }
-    if (typeof child.type !== "string" && child.type.displayName === "Tab") {
-      tabItems.push(child);
-    } else if (child.type === Fragment7) {
-      const fragmentElement = child;
-      tabItems.push(...extractTabItems(fragmentElement.props.children));
-    } else if ((child.props.children ?? null) != null) {
-      const childChildren = child.props.children;
-      tabItems.push(...extractTabItems(childChildren));
-    } else {
-    }
-  });
-  return tabItems;
-};
-
-// src/components/Tabs/SelectedItemIndicator.tsx
-import styled70 from "styled-components";
-import { jsx as jsx265 } from "react/jsx-runtime";
-var TabsSelectedItemIndicatorDiv = styled70(SelectedItemIndicatorDiv)`
-  &:has(~ ${StyledTabItem}:focus-visible) {
-    outline: 2px solid var(--wui-color-focus-ring);
-  }
-`;
-var SelectedItemIndicator2 = () => {
-  const { selectedItemIndicatorStyle } = useSelectedItemStyle();
-  const selectedValue = useTabsValue();
-  if (selectedValue == null) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx265(TabsSelectedItemIndicatorDiv, { style: selectedItemIndicatorStyle });
-};
-
-// src/components/Tabs/Tabs.tsx
-import { jsx as jsx266, jsxs as jsxs43 } from "react/jsx-runtime";
-var TabsContainer = styled71.div`
-  display: flex;
-  flex-direction: column;
-  height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
-  overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
-`;
-var StickyTabContent = styled71.div`
-  flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
-  overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
-  overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
-`;
-var StyledTabsRoot = styled71(TabsRoot)`
-  display: flex;
-  flex-direction: column;
-  height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
-`;
-var Tabs = forwardRef27(
-  ({
-    children,
-    fullWidth = true,
-    "aria-label": ariaLabel,
-    defaultSelectedValue,
-    selectedValue,
-    onSelectedValueChange,
-    stickyHeaders = true,
-    ...props
-  }, ref) => {
-    const tabItems = extractTabItems(children);
-    const [internalSelectedValue, setInternalSelectedValue] = useState15(defaultSelectedValue);
-    const modeProps = defaultSelectedValue !== void 0 ? {
-      defaultValue: defaultSelectedValue,
-      onValueChange: setInternalSelectedValue
-    } : { value: selectedValue, onValueChange: onSelectedValueChange };
-    const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
-    return /* @__PURE__ */ jsx266(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ jsx266(
-      StyledTabsRoot,
-      {
-        ref,
-        $stickyHeaders: stickyHeaders,
-        activationMode: "automatic",
-        ...props,
-        ...modeProps,
-        children: /* @__PURE__ */ jsx266(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs43(SelectedItemStyleProvider, { children: [
-          /* @__PURE__ */ jsxs43(
-            TabList,
-            {
-              ariaLabel,
-              fullWidth,
-              children: [
-                /* @__PURE__ */ jsx266(SelectedItemIndicator2, {}),
-                tabItems.map((tab) => {
-                  const {
-                    value,
-                    disabled = false,
-                    icon,
-                    label,
-                    "aria-label": ariaLabelForTab
-                  } = tab.props;
-                  if (isNil14(icon)) {
-                    return /* @__PURE__ */ jsx266(
-                      TabItem,
-                      {
-                        disabled,
-                        label,
-                        value
-                      },
-                      value
-                    );
-                  }
-                  if (isNotNil31(label)) {
-                    return /* @__PURE__ */ jsx266(
-                      TabItem,
-                      {
-                        disabled,
-                        icon,
-                        label,
-                        value
-                      },
-                      value
-                    );
-                  }
-                  if (isNotNil31(ariaLabelForTab)) {
-                    return /* @__PURE__ */ jsx266(
-                      TabItem,
-                      {
-                        "aria-label": ariaLabelForTab,
-                        disabled,
-                        icon,
-                        value
-                      },
-                      value
-                    );
-                  }
-                  throw new Error("A `Tab` with an icon must have either label or aria-label");
-                })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx266(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ jsx266(
-            TabPanel,
-            {
-              value: tab.props.value,
-              children: tab.props.children
-            },
-            tab.props.value
-          )) })
-        ] }) })
-      }
-    ) });
-  }
-);
-Tabs.displayName = "Tabs";
-
-// src/components/Tabs/Tab.tsx
-import { forwardRef as forwardRef28 } from "react";
-import { jsx as jsx267 } from "react/jsx-runtime";
-var Tab = forwardRef28(({ children }, ref) => {
-  return /* @__PURE__ */ jsx267("div", { ref, children });
-});
-Tab.displayName = "Tab";
+TabsTrigger.displayName = "TabsTrigger";
 
 // src/components/Tag/Tag.tsx
-import { forwardRef as forwardRef29 } from "react";
-import styled72 from "styled-components";
-import { isNil as isNil15, isNotNil as isNotNil32, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment8, jsx as jsx268, jsxs as jsxs44 } from "react/jsx-runtime";
-var TagLabel = styled72.a`
+import { forwardRef as forwardRef27 } from "react";
+import styled70 from "styled-components";
+import { isNil as isNil14, isNotNil as isNotNil32, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
+import { Fragment as Fragment7, jsx as jsx267, jsxs as jsxs44 } from "react/jsx-runtime";
+var TagLabel = styled70.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12636,14 +12525,14 @@ var TagLabel = styled72.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled72.div`
+var TagDivider = styled70.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled72.button`
+var StyledRemoveButton = styled70.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -12671,7 +12560,7 @@ var StyledRemoveButton = styled72.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled72.div`
+var StyledTag = styled70.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -12684,16 +12573,16 @@ var StyledTag = styled72.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if (isNil15(onClickRemove)) {
+  if (isNil14(onClickRemove)) {
     return null;
   }
-  if (isNil15(onClickRemoveLabel)) {
+  if (isNil14(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs44(Fragment8, { children: [
-    /* @__PURE__ */ jsx268(TagDivider, { $colorScheme: colorScheme }),
+  return /* @__PURE__ */ jsxs44(Fragment7, { children: [
+    /* @__PURE__ */ jsx267(TagDivider, { $colorScheme: colorScheme }),
     /* @__PURE__ */ jsxs44(
       StyledRemoveButton,
       {
@@ -12701,20 +12590,20 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx268(
+          /* @__PURE__ */ jsx267(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx268(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx267(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
-var Tag = forwardRef29(
+var Tag = forwardRef27(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = isNotNil32(icon);
     const labelProps = isNotNil32(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
@@ -12736,7 +12625,7 @@ var Tag = forwardRef29(
               ]
             }
           ),
-          /* @__PURE__ */ jsx268(
+          /* @__PURE__ */ jsx267(
             RemoveButton,
             {
               colorScheme,
@@ -12752,10 +12641,10 @@ var Tag = forwardRef29(
 Tag.displayName = "Tag";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-import styled73 from "styled-components";
+import styled71 from "styled-components";
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
-import { jsx as jsx269, jsxs as jsxs45 } from "react/jsx-runtime";
-var StyledThumbnailBadge = styled73.div`
+import { jsx as jsx268, jsxs as jsxs45 } from "react/jsx-runtime";
+var StyledThumbnailBadge = styled71.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -12782,15 +12671,15 @@ var StyledThumbnailBadge = styled73.div`
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs45(StyledThumbnailBadge, { ...props, children: [
     isNotNil33(icon) && icon,
-    /* @__PURE__ */ jsx269("span", { children: label })
+    /* @__PURE__ */ jsx268("span", { children: label })
   ] });
 };
 ThumbnailBadge.displayName = "ThumbnailBadge";
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { forwardRef as forwardRef30, useState as useState16, useRef as useRef15, useCallback as useCallback10, useMemo as useMemo9 } from "react";
-import styled75 from "styled-components";
-import { isNil as isNil16, isNotNil as isNotNil36, isUndefined as isUndefined5, isEmptyString as isEmptyString2, isString as isString2 } from "@wistia/type-guards";
+import { forwardRef as forwardRef28, useState as useState16, useRef as useRef15, useCallback as useCallback11, useMemo as useMemo9 } from "react";
+import styled73 from "styled-components";
+import { isNil as isNil15, isNotNil as isNotNil36, isUndefined as isUndefined5, isEmptyString as isEmptyString2, isString as isString2 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 import { isNotNil as isNotNil34 } from "@wistia/type-guards";
@@ -12925,10 +12814,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-import styled74 from "styled-components";
+import styled72 from "styled-components";
 import { isNotNil as isNotNil35 } from "@wistia/type-guards";
-import { jsx as jsx270, jsxs as jsxs46 } from "react/jsx-runtime";
-var ScrubLine = styled74.div`
+import { jsx as jsx269, jsxs as jsxs46 } from "react/jsx-runtime";
+var ScrubLine = styled72.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -13036,8 +12925,8 @@ var ThumbnailStoryboardViewer = ({
       ...props,
       style: viewerStyles,
       children: [
-        /* @__PURE__ */ jsx270("div", { style: storyboardStyles }),
-        showScrubLine ? /* @__PURE__ */ jsx270(
+        /* @__PURE__ */ jsx269("div", { style: storyboardStyles }),
+        showScrubLine ? /* @__PURE__ */ jsx269(
           ScrubLine,
           {
             style: {
@@ -13051,20 +12940,20 @@ var ThumbnailStoryboardViewer = ({
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx271, jsxs as jsxs47 } from "react/jsx-runtime";
-var WideThumbnailImage = styled75.img`
+import { jsx as jsx270, jsxs as jsxs47 } from "react/jsx-runtime";
+var WideThumbnailImage = styled73.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = styled75.img`
+var SquareThumbnailImage = styled73.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
 `;
 var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   if (thumbnailImageType === "wide") {
-    return /* @__PURE__ */ jsx271(
+    return /* @__PURE__ */ jsx270(
       WideThumbnailImage,
       {
         alt: "",
@@ -13073,7 +12962,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx271(
+  return /* @__PURE__ */ jsx270(
     SquareThumbnailImage,
     {
       alt: "",
@@ -13082,11 +12971,11 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnail = styled75.div`
+var StyledThumbnail = styled73.div`
   background-image: ${({ $backgroundUrl }) => isNotNil36($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  isNil16($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  isNil15($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -13111,7 +13000,7 @@ var getRelativeMousePosition = (elem, mouseEvent) => {
     left: relativeLeft
   };
 };
-var Thumbnail = forwardRef30(
+var Thumbnail = forwardRef28(
   ({
     gradientBackground = "defaultMidOne",
     thumbnailImageType = "square",
@@ -13132,7 +13021,7 @@ var Thumbnail = forwardRef30(
       [thumbnailImageType, thumbnailUrl]
     );
     const isScrubbable = isNotNil36(storyboard);
-    const trackStoryboardLoadStatus = useCallback10(() => {
+    const trackStoryboardLoadStatus = useCallback11(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
       }
@@ -13142,7 +13031,7 @@ var Thumbnail = forwardRef30(
       storyboardElementRef.current = asset;
       return storyboardElementRef.current;
     }, [storyboard]);
-    const handleMouseMove = useCallback10(
+    const handleMouseMove = useCallback11(
       (mouseEvent) => {
         if (!isScrubbable) return;
         const elem = mouseEvent.currentTarget;
@@ -13155,7 +13044,7 @@ var Thumbnail = forwardRef30(
       },
       [isScrubbable, trackStoryboardLoadStatus]
     );
-    const handleMouseOut = useCallback10(() => {
+    const handleMouseOut = useCallback11(() => {
       if (!isScrubbable) return;
       setIsMouseOver(false);
       setCursorPosition(null);
@@ -13163,7 +13052,7 @@ var Thumbnail = forwardRef30(
     const shouldRenderStoryboard = useMemo9(() => {
       return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
     }, [isScrubbable, isMouseOver, isStoryboardReady]);
-    const renderStoryboard = useCallback10(() => {
+    const renderStoryboard = useCallback11(() => {
       if (!storyboard || isUndefined5(height) || isEmptyString2(height)) return null;
       const {
         url,
@@ -13176,7 +13065,7 @@ var Thumbnail = forwardRef30(
       } = storyboard;
       const targetWidth = isString2(width) ? parseInt(width, 10) : Number(width);
       const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
-      return /* @__PURE__ */ jsx271(
+      return /* @__PURE__ */ jsx270(
         ThumbnailStoryboardViewer,
         {
           cursorPosition: effectiveCursorPosition,
@@ -13196,7 +13085,7 @@ var Thumbnail = forwardRef30(
     if (shouldRenderStoryboard) {
       thumbnailContent = renderStoryboard();
     } else if (isNotNil36(thumbnailUrl)) {
-      thumbnailContent = /* @__PURE__ */ jsx271(
+      thumbnailContent = /* @__PURE__ */ jsx270(
         ThumbnailImage,
         {
           thumbnailImageType,
@@ -13231,10 +13120,10 @@ Thumbnail.displayName = "Thumbnail";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 import React2 from "react";
-import styled76 from "styled-components";
+import styled74 from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
-import { jsx as jsx272 } from "react/jsx-runtime";
-var StyledThumbnailCollage = styled76.div`
+import { jsx as jsx271 } from "react/jsx-runtime";
+var StyledThumbnailCollage = styled74.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -13316,7 +13205,7 @@ var ThumbnailCollage = ({
     });
   }) : [
     // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
-    /* @__PURE__ */ jsx272(
+    /* @__PURE__ */ jsx271(
       Thumbnail,
       {
         gradientBackground,
@@ -13325,7 +13214,7 @@ var ThumbnailCollage = ({
       "fallback"
     )
   ];
-  return /* @__PURE__ */ jsx272(
+  return /* @__PURE__ */ jsx271(
     StyledThumbnailCollage,
     {
       $gradientBackground: gradientBackground,
@@ -13337,26 +13226,26 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled77, { css as css40 } from "styled-components";
+import styled75, { css as css40 } from "styled-components";
 import { isNotNil as isNotNil37 } from "@wistia/type-guards";
-import { jsx as jsx273, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs48 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx273(
+    return /* @__PURE__ */ jsx272(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx273("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+        children: /* @__PURE__ */ jsx272("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
       }
     );
   }
-  return /* @__PURE__ */ jsx273(
+  return /* @__PURE__ */ jsx272(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx273("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+      children: /* @__PURE__ */ jsx272("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
     }
   );
 };
@@ -13364,12 +13253,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx273(
+  return /* @__PURE__ */ jsx272(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx273("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+      children: /* @__PURE__ */ jsx272("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
     }
   );
 };
@@ -13379,7 +13268,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled77.svg`
+var WistiaLogoComponent = styled75.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -13450,38 +13339,38 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx273("title", { children: title }),
-        isNotNil37(description) ? /* @__PURE__ */ jsx273("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx272("title", { children: title }),
+        isNotNil37(description) ? /* @__PURE__ */ jsx272("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx273("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx272("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil38 } from "@wistia/type-guards";
-import styled79, { css as css41 } from "styled-components";
+import styled77, { css as css41 } from "styled-components";
 
 // src/components/List/ListItem.tsx
-import styled78 from "styled-components";
-import { isNil as isNil17 } from "@wistia/type-guards";
-import { jsx as jsx274 } from "react/jsx-runtime";
-var ListItemComponent = styled78.li`
+import styled76 from "styled-components";
+import { isNil as isNil16 } from "@wistia/type-guards";
+import { jsx as jsx273 } from "react/jsx-runtime";
+var ListItemComponent = styled76.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
-  if (isNil17(children)) {
+  if (isNil16(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx274(ListItemComponent, { children });
+  return /* @__PURE__ */ jsx273(ListItemComponent, { children });
 };
 ListItem.displayName = "ListItem";
 
 // src/components/List/List.tsx
-import { jsx as jsx275, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx274, jsxs as jsxs49 } from "react/jsx-runtime";
 var spacesStyle = css41`
   overflow: hidden;
   padding-left: 0;
@@ -13540,7 +13429,7 @@ var unbulletedStyle = css41`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = styled79.ul`
+var ListComponent = styled77.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -13567,7 +13456,7 @@ var ListComponent = styled79.ul`
 `;
 var renderListComponent = (listItems, variant, { ...otherProps }) => {
   const elementType = variant === "ordered" ? "ol" : "ul";
-  return /* @__PURE__ */ jsx275(
+  return /* @__PURE__ */ jsx274(
     ListComponent,
     {
       as: elementType,
@@ -13592,7 +13481,7 @@ var renderListFromArray = (listItems, variant, otherProps) => {
     if (Array.isArray(item)) {
       return null;
     }
-    return /* @__PURE__ */ jsx275(ListItem, { children: item }, key);
+    return /* @__PURE__ */ jsx274(ListItem, { children: item }, key);
   });
   return renderListComponent(items, variant, otherProps);
 };
@@ -13683,7 +13572,6 @@ export {
   Stack,
   SubMenu,
   Switch,
-  Tab,
   Table,
   TableBody,
   TableCell,
@@ -13691,6 +13579,9 @@ export {
   TableHead,
   TableRow,
   Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
   Tag,
   Text,
   Thumbnail,