@wistia/ui 0.6.19 → 0.6.20-beta.c8a0b106.eb6e6a5

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.19
+ * @license @wistia/ui v0.6.20-beta.c8a0b106.eb6e6a5
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7413,192 +7413,15 @@ var Card = ({
 Card.displayName = "Card";
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef7, useId } from "react";
-import { Root as CheckboxRoot, Indicator as CheckboxIndicator } from "@radix-ui/react-checkbox";
-import styled18 from "styled-components";
+import { forwardRef as forwardRef6, useId } from "react";
+import styled16, { css as css18 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
-// src/components/Label/Label.tsx
-import styled16, { css as css19 } from "styled-components";
-
-// src/components/Heading/Heading.tsx
-import { forwardRef as forwardRef6 } from "react";
-import styled15, { css as css18 } from "styled-components";
-import { jsx as jsx199 } from "react/jsx-runtime";
-var heroStyle = css18`
-  --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 = css18`
-  --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 = css18`
-  --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 = css18`
-  --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 = css18`
-  --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 = css18`
-  --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 = css18`
-  --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 = styled15.div`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  color: var(--wui-color-text);
-  ${({ $variant }) => variantStyleMap[$variant]}
-  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css18`
-      display: inline-block;
-    `}
-  ${({ $disabled }) => $disabled && css18`
-      color: var(--wui-color-text-disabled);
-    `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css18`
-      user-select: none;
-    `}
-  ${({ $align }) => css18`
-    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 = forwardRef6(
-  ({
-    align = "left",
-    colorScheme = "inherit",
-    disabled = false,
-    ellipsis = false,
-    inline = false,
-    preventUserSelect = false,
-    variant = "heading1",
-    renderAs,
-    ...otherProps
-  }, ref) => /* @__PURE__ */ jsx199(
-    StyledHeading,
-    {
-      ref,
-      $align: align,
-      $colorScheme: colorScheme,
-      $disabled: disabled,
-      $ellipsis: ellipsis,
-      $inline: inline,
-      $preventUserSelect: preventUserSelect,
-      $variant: variant,
-      as: renderAs ?? variantElementMap[variant],
-      ...otherProps
-    }
-  )
-);
-HeadingComponent.displayName = "Heading";
-var Heading = makePolymorphic(HeadingComponent);
-
-// src/components/Label/Label.tsx
-import { jsx as jsx200 } from "react/jsx-runtime";
-var requiredStyle = css19`
-  &::after {
-    color: var(--wui-color-text-error);
-    display: inline;
-    padding-left: var(--wui-space-01);
-    content: '*';
-  }
-`;
-var disabledStyle = css19`
-  color: var(--wui-color-text-disabled);
-`;
-var StyledLabel2 = styled16(Heading).attrs({
-  variant: "heading6",
-  renderAs: "label"
-})`
-  display: block;
-  width: 100%;
-
-  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
-  > input,
-  > textarea,
-  > select {
-    display: block;
-  }
-
-  > label {
-    font-weight: normal;
-  }
-
-  ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
-  ${({ $disabled }) => $disabled && disabledStyle}
-  ${({ $required }) => $required && requiredStyle}
-`;
-var Label = ({
-  children,
-  disabled = false,
-  htmlFor,
-  required = false,
-  screenReaderOnly = false,
-  ...otherProps
-}) => /* @__PURE__ */ jsx200(
-  StyledLabel2,
-  {
-    ...otherProps,
-    $disabled: disabled,
-    $required: required,
-    $screenReaderOnly: screenReaderOnly,
-    htmlFor,
-    children
-  }
-);
-Label.displayName = "Label";
-
 // src/components/Label/LabelDescription.tsx
-import styled17 from "styled-components";
+import styled15 from "styled-components";
 import { isNil as isNil11 } from "@wistia/type-guards";
-import { jsx as jsx201 } from "react/jsx-runtime";
-var StyledLabelDescription = styled17.div`
+import { jsx as jsx199 } from "react/jsx-runtime";
+var StyledLabelDescription = styled15.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -7611,13 +7434,13 @@ var LabelDescription = ({
   if (isNil11(children)) {
     return null;
   }
-  return /* @__PURE__ */ jsx201(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ jsx199(StyledLabelDescription, { ...props, children });
 };
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx202, jsxs as jsxs12 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx202(
+import { jsx as jsx200, jsxs as jsxs12 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx200(
   "svg",
   {
     fill: "inherit",
@@ -7625,129 +7448,109 @@ var CheckIcon = () => /* @__PURE__ */ jsx202(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx202(
+    children: /* @__PURE__ */ jsx200(
       "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",
-        fill: "white"
+        fill: "currentColor"
       }
     )
   }
 );
-var StyledCheckboxWrapper = styled18.div`
+var disabledStyle = css18`
+  cursor: not-allowed;
+  opacity: 0.5;
+`;
+var inputSizeMedium = css18`
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+`;
+var StyledLabelWrapper = styled16.div`
   display: flex;
-  align-items: center;
-  cursor: pointer;
+  flex-direction: column;
+`;
+var StyledCheckboxWrapper = styled16.div`
+  display: flex;
+  margin: 0;
 
-  &:hover {
-    /* TODO Lamp to design hover state */
-  }
+  /* TODO this solves a problem but potentially causes and a11y issue */
+  user-select: none;
 
-  &:focus-within {
-    /* TODO Lamp to design focus state */
-    background-color: #efefef;
-  }
+  ${({ disabled }) => disabled && disabledStyle};
 `;
-var StyledCheckboxRoot = styled18(CheckboxRoot)`
-  all: unset; /* CheckboxRoot renders as a button element, so we need to reset all styles */
-  background-color: var(--wui-color-bg-fill-white);
-  min-width: 16px;
-  min-height: 16px;
-  border-radius: var(--wui-border-radius-01);
-  border-width: 1px;
-  border-style: solid;
-  border-color: var(--wui-color-border);
+var StyledLabel2 = styled16.label`
+  cursor: pointer;
   display: flex;
   align-items: center;
-  justify-content: center;
-  align-self: start; /* align to the top to handle label descriptions */
-
-  &[data-state='checked'] {
-    background-color: var(--wui-color-bg-fill);
-  }
+  gap: var(--wui-space-01);
+`;
+var StyledCheckboxInput = styled16.div`
+  /* TODO prop-ify sizes */
+  ${inputSizeMedium}
+  line-height: 0;
+  margin: 0;
+  border: 1px solid var(--wui-color-border);
+  border-radius: var(--wui-border-radius-01);
+  background-color: var(--wui-color-bg-fill-white);
+  display: grid;
+  place-content: center;
+  align-self: flex-start;
 
-  &[disabled] {
-    background-color: var(--wui-color-bg-surface-disabled);
+  svg {
+    display: none;
 
-    svg path {
-      fill: var(--wui-color-icon-disabled);
+    path {
+      fill: var(--wui-color-bg-fill-white);
     }
   }
+`;
+var StyledHiddenCheckboxInput = styled16.input`
+  ${visuallyHiddenStyle}
 
-  &:hover {
-    /* TODO Lamp to design hover state */
+  /* toggles display of faux-input background-color */
+  &:checked + label [data-wui-faux-input='true'] {
+    background-color: var(--wui-color-bg-fill);
   }
 
-  &:focus {
-    /* TODO Lamp to design focus state */
+  /* toggles display of CheckIcon */
+  &:checked + label svg {
+    display: block;
   }
 `;
-var StyledCheckboxIndicator = styled18(CheckboxIndicator)`
-  display: flex;
-`;
-var StyledLabelWrapper = styled18.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: var(--wui-space-02);
-`;
-var Checkbox = forwardRef7(
-  ({
-    checked,
-    disabled = false,
-    forceState,
-    id,
-    label,
-    description,
-    name,
-    onChange,
-    required = false,
-    value = "false",
-    ...otherProps
-  }, ref) => {
+var Checkbox = forwardRef6(
+  ({ checked, disabled = false, id, label, description, name, onChange, value, ...otherProps }, ref) => {
     const generatedId = useId();
-    const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
-    return /* @__PURE__ */ jsxs12(StyledCheckboxWrapper, { children: [
-      /* @__PURE__ */ jsx202(
-        StyledCheckboxRoot,
-        {
-          ref,
-          "aria-label": label,
-          checked: checked ?? void 0,
-          defaultChecked: checked === void 0 ? false : void 0,
-          disabled,
-          id: computedId,
-          name,
-          onCheckedChange: (state) => {
-            if (onChange) {
-              const syntheticEvent = {
-                target: {
-                  name,
-                  id: computedId,
-                  checked: state === true
-                }
-              };
-              onChange(syntheticEvent);
+    const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    return /* @__PURE__ */ jsxs12(
+      StyledCheckboxWrapper,
+      {
+        ref,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx200(
+            StyledHiddenCheckboxInput,
+            {
+              ...otherProps,
+              disabled,
+              id: computedId,
+              name,
+              onChange,
+              type: "checkbox",
+              value
             }
-          },
-          required,
-          value,
-          ...otherProps,
-          children: /* @__PURE__ */ jsx202(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx202(CheckIcon, {}) })
-        }
-      ),
-      /* @__PURE__ */ jsxs12(StyledLabelWrapper, { children: [
-        /* @__PURE__ */ jsx202(
-          Label,
-          {
-            disabled,
-            htmlFor: computedId,
-            required,
-            children: label
-          }
-        ),
-        /* @__PURE__ */ jsx202(LabelDescription, { children: description })
-      ] })
-    ] });
+          ),
+          /* @__PURE__ */ jsxs12(StyledLabel2, { htmlFor: computedId, children: [
+            /* @__PURE__ */ jsx200(StyledCheckboxInput, { "data-wui-faux-input": "true", children: /* @__PURE__ */ jsx200(CheckIcon, {}) }),
+            /* @__PURE__ */ jsxs12(StyledLabelWrapper, { children: [
+              label,
+              /* @__PURE__ */ jsx200(LabelDescription, { children: description })
+            ] })
+          ] })
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -7790,9 +7593,9 @@ ClickRegion.displayName = "ClickRegion";
 // src/components/Collapsible/Collapsible.tsx
 import { Root } from "@radix-ui/react-collapsible";
 import { isNotNil as isNotNil8 } from "@wistia/type-guards";
-import styled19 from "styled-components";
-import { jsx as jsx203 } from "react/jsx-runtime";
-var StyledRoot = styled19(Root)`
+import styled17 from "styled-components";
+import { jsx as jsx201 } from "react/jsx-runtime";
+var StyledRoot = styled17(Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -7808,42 +7611,162 @@ var Collapsible = ({
   const controlProps = {
     ...isNotNil8(onOpenChange) && isNotNil8(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx203(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx201(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
-import { jsx as jsx204 } from "react/jsx-runtime";
+import { jsx as jsx202 } from "react/jsx-runtime";
 var CollapsibleTrigger = ({ children }) => {
   Children4.only(children);
-  return /* @__PURE__ */ jsx204(Trigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx202(Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import styled20 from "styled-components";
+import styled18 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { Fragment as Fragment4, jsx as jsx205, jsxs as jsxs13 } from "react/jsx-runtime";
-var ClampedContent = styled20.div.attrs({ "data-wui-collapsible-content": true })`
+import { Fragment as Fragment4, jsx as jsx203, jsxs as jsxs13 } from "react/jsx-runtime";
+var ClampedContent = styled18.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
   if (isNotUndefined5(clamp)) {
-    return /* @__PURE__ */ jsx205(ClampedContent, { $clamp: clamp, children });
+    return /* @__PURE__ */ jsx203(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ jsx205(Content, { asChild: true, children: /* @__PURE__ */ jsxs13(Fragment4, { children: [
+  return /* @__PURE__ */ jsx203(Content, { asChild: true, children: /* @__PURE__ */ jsxs13(Fragment4, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-import styled21, { keyframes } from "styled-components";
+import styled20, { keyframes } from "styled-components";
 import { isNotNull } from "@wistia/type-guards";
-import { jsx as jsx206, jsxs as jsxs14 } from "react/jsx-runtime";
-var StyledDataCard = styled21.div`
+
+// src/components/Heading/Heading.tsx
+import { forwardRef as forwardRef7 } from "react";
+import styled19, { css as css19 } from "styled-components";
+import { jsx as jsx204 } from "react/jsx-runtime";
+var heroStyle = css19`
+  --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 = css19`
+  --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 = css19`
+  --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 = css19`
+  --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 = css19`
+  --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 = css19`
+  --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 = css19`
+  --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 = styled19.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  color: var(--wui-color-text);
+  ${({ $variant }) => variantStyleMap[$variant]}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $inline }) => $inline && css19`
+      display: inline-block;
+    `}
+  ${({ $disabled }) => $disabled && css19`
+      color: var(--wui-color-text-disabled);
+    `}
+  ${({ $preventUserSelect }) => $preventUserSelect && css19`
+      user-select: none;
+    `}
+  ${({ $align }) => css19`
+    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 = forwardRef7(
+  ({
+    align = "left",
+    colorScheme = "inherit",
+    disabled = false,
+    ellipsis = false,
+    inline = false,
+    preventUserSelect = false,
+    variant = "heading1",
+    renderAs,
+    ...otherProps
+  }, ref) => /* @__PURE__ */ jsx204(
+    StyledHeading,
+    {
+      ref,
+      $align: align,
+      $colorScheme: colorScheme,
+      $disabled: disabled,
+      $ellipsis: ellipsis,
+      $inline: inline,
+      $preventUserSelect: preventUserSelect,
+      $variant: variant,
+      as: renderAs ?? variantElementMap[variant],
+      ...otherProps
+    }
+  )
+);
+HeadingComponent.displayName = "Heading";
+var Heading = makePolymorphic(HeadingComponent);
+
+// src/components/DataCards/DataCard.tsx
+import { jsx as jsx205, jsxs as jsxs14 } from "react/jsx-runtime";
+var StyledDataCard = styled20.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -7864,7 +7787,7 @@ var shimmer = keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled21.div`
+var LoadingBackground = styled20.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -7875,27 +7798,27 @@ var LoadingBackground = styled21.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled21(LoadingBackground)`
+var StyledLoadingLabel = styled20(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled21(LoadingBackground)`
+var StyledLoadingValue = styled20(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = styled21(Heading)`
+var StyledLabel3 = styled20(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled21(Heading)`
+var StyledValue = styled20(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled21.div`
+var StyledSlot = styled20.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled21.div`
+var StyledDataCardTrendContainer = styled20.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -7914,33 +7837,33 @@ var DataCard = ({
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx206(
+      /* @__PURE__ */ jsx205(
         StyledLabel3,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx206(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx205(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx206(
+      /* @__PURE__ */ jsx205(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx206(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx205(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx206(StyledSlot, { children: upperRightSlot }),
-      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx206(StyledDataCardTrendContainer, { children: trend })
+      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx205(StyledSlot, { children: upperRightSlot }),
+      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx205(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-import styled22 from "styled-components";
-import { jsx as jsx207 } from "react/jsx-runtime";
-var StyledDataCards = styled22(Box)`
+import styled21 from "styled-components";
+import { jsx as jsx206 } from "react/jsx-runtime";
+var StyledDataCards = styled21(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -7954,7 +7877,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx207(
+  return /* @__PURE__ */ jsx206(
     StyledDataCards,
     {
       ...props,
@@ -7972,12 +7895,12 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled24 from "styled-components";
+import styled23 from "styled-components";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled23, { css as css20 } from "styled-components";
-import { jsx as jsx208 } from "react/jsx-runtime";
+import styled22, { css as css20 } from "styled-components";
+import { jsx as jsx207 } from "react/jsx-runtime";
 var bodyBoldStyles = css20`
   > strong,
   b {
@@ -8097,7 +8020,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = styled23.div`
+var StyledText = styled22.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8154,7 +8077,7 @@ var TextComponent = forwardRef8(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx208(
+    return /* @__PURE__ */ jsx207(
       StyledText,
       {
         ref,
@@ -8176,8 +8099,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-import { jsx as jsx209, jsxs as jsxs15 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled24.div`
+import { jsx as jsx208, jsxs as jsxs15 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled23.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8193,7 +8116,7 @@ var DataCardTrend = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs15(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx209(
+    /* @__PURE__ */ jsx208(
       Icon,
       {
         size: "md",
@@ -8201,7 +8124,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx209(
+    /* @__PURE__ */ jsx208(
       Text,
       {
         prominence: "secondary",
@@ -8213,8 +8136,8 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled25, { css as css21 } from "styled-components";
-import { jsx as jsx210 } from "react/jsx-runtime";
+import styled24, { css as css21 } from "styled-components";
+import { jsx as jsx209 } from "react/jsx-runtime";
 var horizontalBorderCss = css21`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -8228,7 +8151,7 @@ var verticalBorderCss = css21`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled25.div`
+var DividerComponent = styled24.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8243,7 +8166,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsx210(
+  return /* @__PURE__ */ jsx209(
     DividerComponent,
     {
       $orientation: orientation,
@@ -8256,15 +8179,15 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled29, { css as css24 } from "styled-components";
+import styled28, { css as css24 } from "styled-components";
 import { useState as useState5, useRef as useRef4 } from "react";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled26 from "styled-components";
+import styled25 from "styled-components";
 import { isNotNil as isNotNil9 } from "@wistia/type-guards";
-import { jsx as jsx211 } from "react/jsx-runtime";
-var VisuallyHidden = styled26.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled26.div({
+import { jsx as jsx210 } from "react/jsx-runtime";
+var VisuallyHidden = styled25.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled25.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -8275,9 +8198,9 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = isNotNil9(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ jsx211(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ jsx210(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ jsx211(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsx210(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
@@ -8289,8 +8212,8 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled27, { css as css22 } from "styled-components";
-import { jsx as jsx212, jsxs as jsxs16 } from "react/jsx-runtime";
+import styled26, { css as css22 } from "styled-components";
+import { jsx as jsx211, jsxs as jsxs16 } from "react/jsx-runtime";
 var CompactTooltipStyles = css22`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
@@ -8298,7 +8221,7 @@ var CompactTooltipStyles = css22`
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = styled27(TooltipContent)`
+var StyledContent = styled26(TooltipContent)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8363,8 +8286,8 @@ var Tooltip = ({
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx212(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx212(TooltipPortal, { children: /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsx211(TooltipTrigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx211(TooltipPortal, { children: /* @__PURE__ */ jsxs16(
           StyledContent,
           {
             $compact: compact,
@@ -8372,7 +8295,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx212(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx212(
+              !hideArrow ? /* @__PURE__ */ jsx211(TooltipArrow, { asChild: true, children: /* @__PURE__ */ jsx211(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8381,7 +8304,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx212("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__ */ jsx211("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
             ]
@@ -8395,9 +8318,9 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef9, cloneElement as cloneElement4, useRef as useRef3 } from "react";
-import styled28, { css as css23 } from "styled-components";
+import styled27, { css as css23 } from "styled-components";
 import { isNil as isNil12, isNotNil as isNotNil10, isRecord as isRecord4 } from "@wistia/type-guards";
-import { jsx as jsx213, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx212, jsxs as jsxs17 } from "react/jsx-runtime";
 var inputStyles = css23`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -8439,7 +8362,7 @@ var inputStyles = css23`
     }
   }
 `;
-var StyledInputContainer = styled28.div`
+var StyledInputContainer = styled27.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -8500,7 +8423,7 @@ var Input = forwardRef9(
     );
     let leftIconToDisplay = leftIcon;
     if (isNil12(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ jsx213(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ jsx212(Icon, { type: "search" });
     }
     if (isNotNil10(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
@@ -8532,14 +8455,14 @@ var Input = forwardRef9(
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ jsx213(
+          type === "multiline" ? /* @__PURE__ */ jsx212(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ jsx213(
+          ) : /* @__PURE__ */ jsx212(
             "input",
             {
               ...props,
@@ -8557,8 +8480,8 @@ var Input = forwardRef9(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import { Fragment as Fragment5, jsx as jsx214, jsxs as jsxs18 } from "react/jsx-runtime";
-var StyledInput = styled29(Input)`
+import { Fragment as Fragment5, jsx as jsx213, jsxs as jsxs18 } from "react/jsx-runtime";
+var StyledInput = styled28(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -8588,7 +8511,7 @@ var editableStyles = css24`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = styled29(Heading)`
+var StyledHeading2 = styled28(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -8642,7 +8565,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ jsx214(
+  const HeadingComponent2 = /* @__PURE__ */ jsx213(
     StyledHeading2,
     {
       ref: headingRef,
@@ -8656,7 +8579,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || forceEditing) {
-    return /* @__PURE__ */ jsx214(
+    return /* @__PURE__ */ jsx213(
       StyledInput,
       {
         $height: headingHeight,
@@ -8675,7 +8598,7 @@ var EditableHeading = ({
     );
   }
   return /* @__PURE__ */ jsxs18(Fragment5, { children: [
-    /* @__PURE__ */ jsx214(
+    /* @__PURE__ */ jsx213(
       Tooltip,
       {
         compact: true,
@@ -8683,7 +8606,7 @@ var EditableHeading = ({
         children: HeadingComponent2
       }
     ),
-    /* @__PURE__ */ jsx214(ScreenReaderOnly, { children: /* @__PURE__ */ jsx214(
+    /* @__PURE__ */ jsx213(ScreenReaderOnly, { children: /* @__PURE__ */ jsx213(
       "button",
       {
         "aria-label": ariaLabel,
@@ -8696,27 +8619,30 @@ var EditableHeading = ({
 
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef11, useRef as useRef5, useMemo as useMemo4, createContext as createContext2, useState as useState6, useId as useId2 } from "react";
-import styled31 from "styled-components";
+import styled30 from "styled-components";
 import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef10 } from "react";
-import styled30 from "styled-components";
-import { jsx as jsx215 } from "react/jsx-runtime";
+import styled29 from "styled-components";
+import { jsx as jsx214 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = styled30.div`
+var StyledStack = styled29.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
+  align-items: ${({ $alignItems }) => $alignItems};
 `;
 var StackComponent = forwardRef10(
-  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
+  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx215(
+    const responsiveAlignItems = useResponsiveProp(alignItems);
+    return /* @__PURE__ */ jsx214(
       StyledStack,
       {
         ref,
+        $alignItems: responsiveAlignItems,
         $direction: responsiveDirection,
         $gap: responsiveGap,
         as: renderAs ?? DEFAULT_ELEMENT4,
@@ -8729,8 +8655,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-import { jsx as jsx216 } from "react/jsx-runtime";
-var StyledForm = styled31.form`
+import { jsx as jsx215 } from "react/jsx-runtime";
+var StyledForm = styled30.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -8809,7 +8735,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ jsx216(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx216(
+    /* @__PURE__ */ jsx215(FormContext.Provider, { value: context, children: /* @__PURE__ */ jsx215(
       Stack,
       {
         ...props,
@@ -8868,9 +8794,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 import { useContext as useContext2, useRef as useRef6 } from "react";
 import { isArray, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
-import { jsx as jsx217, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx216, jsxs as jsxs19 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
-  return /* @__PURE__ */ jsx217("li", { children: /* @__PURE__ */ jsx217(Link, { href: `#${formId}-${name}`, children: error }) }, name);
+  return /* @__PURE__ */ jsx216("li", { children: /* @__PURE__ */ jsx216(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = useRef6(null);
@@ -8880,9 +8806,9 @@ var FormErrorSummary = ({ description }) => {
     return null;
   }
   return /* @__PURE__ */ jsxs19("div", { ref, children: [
-    /* @__PURE__ */ jsx217("p", { children: description }),
-    /* @__PURE__ */ jsx217("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined7(error)).map(
-      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx217(
+    /* @__PURE__ */ jsx216("p", { children: description }),
+    /* @__PURE__ */ jsx216("ul", { children: Object.entries(errors).filter(([, error]) => isNotUndefined7(error)).map(
+      ([name, error]) => isArray(error) ? error.map((err) => /* @__PURE__ */ jsx216(
         ErrorItem,
         {
           error: err,
@@ -8890,7 +8816,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ jsx217(
+      )) : /* @__PURE__ */ jsx216(
         ErrorItem,
         {
           error: error ?? "",
@@ -8908,6 +8834,62 @@ import { Children as Children5, cloneElement as cloneElement5, useContext as use
 import styled33 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil11, isNotUndefined as isNotUndefined8, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
+// src/components/Label/Label.tsx
+import styled31, { css as css25 } from "styled-components";
+import { jsx as jsx217 } from "react/jsx-runtime";
+var requiredStyle = css25`
+  &::after {
+    color: var(--wui-color-text-error);
+    display: inline;
+    padding-left: var(--wui-space-01);
+    content: '*';
+  }
+`;
+var disabledStyle2 = css25`
+  color: var(--wui-color-text-disabled);
+`;
+var StyledLabel4 = styled31(Heading).attrs({
+  variant: "heading6",
+  renderAs: "label"
+})`
+  display: block;
+  width: 100%;
+
+  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
+  > input,
+  > textarea,
+  > select {
+    display: block;
+  }
+
+  > label {
+    font-weight: normal;
+  }
+
+  ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
+  ${({ $disabled }) => $disabled && disabledStyle2}
+  ${({ $required }) => $required && requiredStyle}
+`;
+var Label = ({
+  children,
+  disabled = false,
+  htmlFor,
+  required = false,
+  screenReaderOnly = false,
+  ...otherProps
+}) => /* @__PURE__ */ jsx217(
+  StyledLabel4,
+  {
+    ...otherProps,
+    $disabled: disabled,
+    $required: required,
+    $screenReaderOnly: screenReaderOnly,
+    htmlFor,
+    children
+  }
+);
+Label.displayName = "Label";
+
 // src/components/FormGroup/CheckboxGroup.tsx
 import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
@@ -9203,7 +9185,7 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/Menu/Menu.tsx
-import styled36, { css as css25, keyframes as keyframes2 } from "styled-components";
+import styled36, { css as css26, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -9240,7 +9222,7 @@ var close = keyframes2`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = css25`
+var menuItemCss = css26`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9251,7 +9233,7 @@ var menuItemCss = css25`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = css25`
+var compactMenuItemCss = css26`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9262,7 +9244,7 @@ var compactMenuItemCss = css25`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = css25`
+var menuContentCss = css26`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -9688,7 +9670,7 @@ import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx232, jsxs as jsxs26 } from "react/jsx-runtime";
-var CheckboxIndicator2 = ({ checked, ...props }) => {
+var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs26(
     "svg",
     {
@@ -9760,7 +9742,7 @@ var CheckboxMenuItem = ({
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx232(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ jsx232(CheckboxIndicator, { checked })
         }
       )
     }
@@ -10034,7 +10016,7 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import styled46, { css as css26 } from "styled-components";
+import styled46, { css as css27 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
@@ -10045,7 +10027,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 import { jsx as jsx238, jsxs as jsxs29 } from "react/jsx-runtime";
 var StyledContent2 = styled46(Content2)`
-  ${({ $unstyled }) => !$unstyled && css26`
+  ${({ $unstyled }) => !$unstyled && css27`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: 320px;
@@ -10176,7 +10158,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef18, useId as useId3 } from "react";
-import styled48, { css as css27 } from "styled-components";
+import styled48, { css as css28 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
 import { jsx as jsx240, jsxs as jsxs31 } from "react/jsx-runtime";
 var StyledLabelWrapper2 = styled48.div`
@@ -10210,11 +10192,11 @@ var StyledRadio = styled48.input`
     transform: scale(1);
   }
 `;
-var disabledStyle2 = css27`
+var disabledStyle3 = css28`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorStyle = css27`
+var errorStyle = css28`
   /* TODO Lamp to design error state */
   &:hover,
   &:focus,
@@ -10222,7 +10204,7 @@ var errorStyle = css27`
     border-color: transparent !important;
   }
 `;
-var defaultHoverStyle = css27`
+var defaultHoverStyle = css28`
   /* TODO Lamp to design hover state */
   cursor: pointer;
 `;
@@ -10247,7 +10229,7 @@ var StyledRadioWrapper = styled48.div`
     ${errorStyle};
   }
 
-  ${({ disabled }) => disabled && disabledStyle2};
+  ${({ disabled }) => disabled && disabledStyle3};
 `;
 var Radio = forwardRef18(
   ({
@@ -10306,7 +10288,7 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef19 } from "react";
-import styled50, { css as css28 } from "styled-components";
+import styled50, { css as css29 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil13 } from "@wistia/type-guards";
 
@@ -10397,7 +10379,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx243, jsxs as jsxs32 } from "react/jsx-runtime";
-var segmentedControlStyles = css28`
+var segmentedControlStyles = css29`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -10446,7 +10428,7 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef20, useEffect as useEffect6, useRef as useRef9 } from "react";
-import styled51, { css as css29 } from "styled-components";
+import styled51, { css as css30 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil21 } from "@wistia/type-guards";
 
@@ -10466,7 +10448,7 @@ var mergeRefs = (refs) => (value) => {
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { jsxs as jsxs33 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css29`
+var segmentedControlItemStyles = css30`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -10770,12 +10752,12 @@ SelectOption.displayName = "Option";
 import { Group, Label as Label2 } from "@radix-ui/react-select";
 import styled54 from "styled-components";
 import { jsx as jsx246, jsxs as jsxs36 } from "react/jsx-runtime";
-var StyledLabel4 = styled54(Label2)`
+var StyledLabel5 = styled54(Label2)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
   return /* @__PURE__ */ jsxs36(Group, { ...props, children: [
-    /* @__PURE__ */ jsx246(StyledLabel4, { children: /* @__PURE__ */ jsx246(
+    /* @__PURE__ */ jsx246(StyledLabel5, { children: /* @__PURE__ */ jsx246(
       Text,
       {
         prominence: "secondary",
@@ -10788,19 +10770,19 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 };
 
 // src/components/Table/Table.tsx
-import styled55, { css as css30 } from "styled-components";
+import styled55, { css as css31 } from "styled-components";
 import { jsx as jsx247 } from "react/jsx-runtime";
 var StyledTable = styled55.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && css30`
+  ${({ $striped }) => $striped && css31`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && css30`
+  ${({ $divided }) => $divided && css31`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -10839,9 +10821,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext7 } from "react";
-import styled57, { css as css31 } from "styled-components";
+import styled57, { css as css32 } from "styled-components";
 import { jsx as jsx249 } from "react/jsx-runtime";
-var sharedStyles = css31`
+var sharedStyles = css32`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -11346,7 +11328,7 @@ var Tag = forwardRef26(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled67, { css as css32 } from "styled-components";
+import styled67, { css as css33 } from "styled-components";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 import { jsx as jsx259, jsxs as jsxs40 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -11404,12 +11386,12 @@ var WistiaLogoComponent = styled67.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css32`
+      return css33`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css32`
+    return css33`
         aspect-ratio: 127 / 32;
       `;
   }