@wistia/ui 0.6.20 → 0.6.21

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.20
+ * @license @wistia/ui v0.6.21
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7413,211 +7413,104 @@ 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 styled17, { css as css20 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
-// src/components/Label/Label.tsx
+// src/private/components/FormControlLabel/FormControlLabel.tsx
 import styled16, { css as css19 } from "styled-components";
+import { isNil as isNil12, isNotNil as isNotNil8 } from "@wistia/type-guards";
 
-// src/components/Heading/Heading.tsx
-import { forwardRef as forwardRef6 } from "react";
+// src/private/components/FormControlLabel/FormControlLabelDescription.tsx
 import styled15, { css as css18 } from "styled-components";
+import { isNil as isNil11 } from "@wistia/type-guards";
 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 disabledStyle = css18`
+  color: var(--wui-color-text-disabled);
 `;
-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 StyledFormControlLabelDescription = styled15.div`
+  color: var(--wui-color-text-secondary);
+  display: block;
+  font-size: var(--wui-typography-body-4-size);
+  font-weight: var(--wui-typography-body-4-weight);
+  line-height: var(--wui-typography-body-4-line-height);
+  margin-top: var(--wui-space-01);
+
+  ${({ $disabled }) => $disabled && disabledStyle}
 `;
-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,
+var FormControlLabelDescription = ({
+  children,
+  disabled = false,
+  ...props
+}) => {
+  if (isNil11(children)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx199(
+    StyledFormControlLabelDescription,
     {
-      ref,
-      $align: align,
-      $colorScheme: colorScheme,
+      ...props,
       $disabled: disabled,
-      $ellipsis: ellipsis,
-      $inline: inline,
-      $preventUserSelect: preventUserSelect,
-      $variant: variant,
-      as: renderAs ?? variantElementMap[variant],
-      ...otherProps
+      children
     }
-  )
-);
-HeadingComponent.displayName = "Heading";
-var Heading = makePolymorphic(HeadingComponent);
+  );
+};
+FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
-// 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`
+// src/private/components/FormControlLabel/FormControlLabel.tsx
+import { jsx as jsx200, jsxs as jsxs12 } from "react/jsx-runtime";
+var disabledStyle2 = css19`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = styled16(Heading).attrs({
-  variant: "heading6",
-  renderAs: "label"
-})`
-  display: block;
+var StyledLabelWrapper = styled16.div`
+  display: flex;
+  flex-direction: column;
+`;
+var StyledFormControlLabel = styled16.label`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--wui-space-01);
   width: 100%;
+  color: var(--wui-color-tex);
+  font-size: var(--wui-typography-label-3-size);
+  font-weight: var(--wui-typography-label-3-weight);
+  line-height: var(--wui-typography-label-3-line-height);
 
-  /* 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}
+  ${({ $disabled }) => $disabled && disabledStyle2}
 `;
-var Label = ({
-  children,
+var FormControlLabel = ({
+  label,
+  description,
   disabled = false,
+  controlSlot,
   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 { isNil as isNil11 } from "@wistia/type-guards";
-import { jsx as jsx201 } from "react/jsx-runtime";
-var StyledLabelDescription = styled17.div`
-  color: var(--wui-color-text-secondary);
-  font-size: var(--wui-typography-body-4-size);
-  font-weight: var(--wui-typography-body-4-weight);
-  line-height: var(--wui-typography-body-4-line-height);
-`;
-var LabelDescription = ({
-  children,
   ...props
 }) => {
-  if (isNil11(children)) {
+  if (isNil12(label)) {
     return null;
   }
-  return /* @__PURE__ */ jsx201(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ jsxs12(
+    StyledFormControlLabel,
+    {
+      $disabled: disabled,
+      htmlFor,
+      ...props,
+      children: [
+        isNotNil8(controlSlot) ? controlSlot : null,
+        /* @__PURE__ */ jsxs12(StyledLabelWrapper, { children: [
+          label,
+          /* @__PURE__ */ jsx200(FormControlLabelDescription, { children: description })
+        ] })
+      ]
+    }
+  );
 };
-LabelDescription.displayName = "LabelDescription";
+FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx202, jsxs as jsxs12 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx202(
+import { jsx as jsx201, jsxs as jsxs13 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx201(
   "svg",
   {
     fill: "inherit",
@@ -7625,129 +7518,139 @@ var CheckIcon = () => /* @__PURE__ */ jsx202(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx202(
+    children: /* @__PURE__ */ jsx201(
       "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`
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    /* TODO Lamp to design hover state */
-  }
-
-  &:focus-within {
-    /* TODO Lamp to design focus state */
-    background-color: #efefef;
-  }
+var disabledStyle3 = css20`
+  cursor: not-allowed;
+  opacity: 0.5;
 `;
-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);
+var inputSizeSmall = css20`
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+`;
+var inputSizeMedium = css20`
+  width: 16px;
+  height: 16px;
   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 inputSizeLarge = css20`
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+`;
+var StyledCheckboxWrapper = styled17.div`
   display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: start; /* align to the top to handle label descriptions */
+  margin: 0;
 
-  &[data-state='checked'] {
-    background-color: var(--wui-color-bg-fill);
-  }
+  /* TODO this solves a problem but potentially causes and a11y issue */
+  user-select: none;
 
-  &[disabled] {
-    background-color: var(--wui-color-bg-surface-disabled);
+  ${({ disabled }) => disabled && disabledStyle3};
+`;
+var getSizeCss = (size) => {
+  if (size === "sm") return inputSizeSmall;
+  if (size === "lg") return inputSizeLarge;
+  return inputSizeMedium;
+};
+var StyledCheckboxInput = styled17.div`
+  ${({ $size }) => getSizeCss($size)}
+  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;
 
-    svg path {
-      fill: var(--wui-color-icon-disabled);
+  svg {
+    display: none;
+
+    path {
+      fill: var(--wui-color-bg-fill-white);
     }
   }
+`;
+var StyledHiddenCheckboxInput = styled17.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(
+var Checkbox = forwardRef6(
   ({
     checked,
     disabled = false,
-    forceState,
     id,
     label,
     description,
     name,
     onChange,
+    size = "md",
+    value,
     required = false,
-    value = "false",
-    ...otherProps
+    ...props
   }, 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
+    const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    return /* @__PURE__ */ jsxs13(
+      StyledCheckboxWrapper,
+      {
+        ref,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx201(
+            StyledHiddenCheckboxInput,
+            {
+              ...props,
+              ref,
+              checked,
+              disabled,
+              id: computedId,
+              name,
+              onChange,
+              required,
+              type: "checkbox",
+              value
+            }
+          ),
+          /* @__PURE__ */ jsx201(
+            FormControlLabel,
+            {
+              controlSlot: /* @__PURE__ */ jsx201(
+                StyledCheckboxInput,
+                {
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ jsx201(CheckIcon, {})
                 }
-              };
-              onChange(syntheticEvent);
+              ),
+              description,
+              htmlFor: computedId,
+              label
             }
-          },
-          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 })
-      ] })
-    ] });
+          )
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -7789,10 +7692,10 @@ 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 { isNotNil as isNotNil9 } from "@wistia/type-guards";
+import styled18 from "styled-components";
+import { jsx as jsx202 } from "react/jsx-runtime";
+var StyledRoot = styled18(Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -7806,43 +7709,163 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...isNotNil8(onOpenChange) && isNotNil8(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil9(onOpenChange) && isNotNil9(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx203(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx202(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 jsx203 } from "react/jsx-runtime";
 var CollapsibleTrigger = ({ children }) => {
   Children4.only(children);
-  return /* @__PURE__ */ jsx204(Trigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx203(Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import styled20 from "styled-components";
+import styled19 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 jsx204, jsxs as jsxs14 } from "react/jsx-runtime";
+var ClampedContent = styled19.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__ */ jsx204(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ jsx205(Content, { asChild: true, children: /* @__PURE__ */ jsxs13(Fragment4, { children: [
+  return /* @__PURE__ */ jsx204(Content, { asChild: true, children: /* @__PURE__ */ jsxs14(Fragment4, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-import styled21, { keyframes } from "styled-components";
-import { isNotNull } from "@wistia/type-guards";
-import { jsx as jsx206, jsxs as jsxs14 } from "react/jsx-runtime";
+import styled21, { keyframes } from "styled-components";
+import { isNotNull } from "@wistia/type-guards";
+
+// src/components/Heading/Heading.tsx
+import { forwardRef as forwardRef7 } from "react";
+import styled20, { css as css21 } from "styled-components";
+import { jsx as jsx205 } 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_ELEMENT2 = "h1";
+var StyledHeading = styled20.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 && 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_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__ */ jsx205(
+    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 jsx206, jsxs as jsxs15 } from "react/jsx-runtime";
 var StyledDataCard = styled21.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
@@ -7883,7 +7906,7 @@ var StyledLoadingValue = styled21(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = styled21(Heading)`
+var StyledLabel2 = styled21(Heading)`
   grid-area: label;
 `;
 var StyledValue = styled21(Heading)`
@@ -7908,14 +7931,14 @@ var DataCard = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ jsxs14(
+}) => /* @__PURE__ */ jsxs15(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
       /* @__PURE__ */ jsx206(
-        StyledLabel3,
+        StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
@@ -7976,21 +7999,21 @@ import styled24 from "styled-components";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled23, { css as css20 } from "styled-components";
+import styled23, { css as css22 } from "styled-components";
 import { jsx as jsx208 } from "react/jsx-runtime";
-var bodyBoldStyles = css20`
+var bodyBoldStyles = css22`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css20`
+var labelBoldStyles = css22`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css20`
+var body1TextStyle = css22`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -7998,7 +8021,7 @@ var body1TextStyle = css20`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = css20`
+var body2TextStyle = css22`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8006,7 +8029,7 @@ var body2TextStyle = css20`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = css20`
+var body3TextStyle = css22`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8014,7 +8037,7 @@ var body3TextStyle = css20`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = css20`
+var body4TextStyle = css22`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8022,47 +8045,47 @@ var body4TextStyle = css20`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = css20`
+var label1TextStyle = css22`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = css20`
+var label2TextStyle = css22`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = css20`
+var label3TextStyle = css22`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = css20`
+var label4TextStyle = css22`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = css20`
+var body1MonoTextStyle = css22`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = css20`
+var body2MonoTextStyle = css22`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = css20`
+var body3MonoTextStyle = css22`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = css20`
+var body4MonoTextStyle = css22`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8121,19 +8144,19 @@ var StyledText = styled23.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css20`
+  ${({ $inline }) => $inline && css22`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css20`
+  ${({ $disabled }) => $disabled && css22`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css20`
+  ${({ $preventUserSelect }) => $preventUserSelect && css22`
       user-select: none;
     `}
-  ${({ $align }) => css20`
+  ${({ $align }) => css22`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css20`
+  ${({ as }) => as === "p" && css22`
       display: block;
 
       + p {
@@ -8176,7 +8199,7 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-import { jsx as jsx209, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx209, jsxs as jsxs16 } from "react/jsx-runtime";
 var StyledDataCardTrend = styled24.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
@@ -8192,7 +8215,7 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs15(StyledDataCardTrend, { $outlook: outlook, children: [
+  return /* @__PURE__ */ jsxs16(StyledDataCardTrend, { $outlook: outlook, children: [
     /* @__PURE__ */ jsx209(
       Icon,
       {
@@ -8213,16 +8236,16 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled25, { css as css21 } from "styled-components";
+import styled25, { css as css23 } from "styled-components";
 import { jsx as jsx210 } from "react/jsx-runtime";
-var horizontalBorderCss = css21`
+var horizontalBorderCss = css23`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = css21`
+var verticalBorderCss = css23`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
@@ -8256,12 +8279,12 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled29, { css as css24 } from "styled-components";
+import styled29, { css as css26 } from "styled-components";
 import { useState as useState5, useRef as useRef4 } from "react";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 import styled26 from "styled-components";
-import { isNotNil as isNotNil9 } from "@wistia/type-guards";
+import { isNotNil as isNotNil10 } from "@wistia/type-guards";
 import { jsx as jsx211 } from "react/jsx-runtime";
 var VisuallyHidden = styled26.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = styled26.div({
@@ -8273,7 +8296,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = isNotNil9(text) ? text : children;
+  const accessibleText = isNotNil10(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ jsx211(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -8289,9 +8312,9 @@ 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";
-var CompactTooltipStyles = css22`
+import styled27, { css as css24 } from "styled-components";
+import { jsx as jsx212, jsxs as jsxs17 } from "react/jsx-runtime";
+var CompactTooltipStyles = css24`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
   --tooltip-font-weight: var(--wui-typography-label-4-weight);
@@ -8357,14 +8380,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     TooltipRoot,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
         /* @__PURE__ */ jsx212(TooltipTrigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx212(TooltipPortal, { children: /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsx212(TooltipPortal, { children: /* @__PURE__ */ jsxs17(
           StyledContent,
           {
             $compact: compact,
@@ -8395,10 +8418,10 @@ 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 { isNil as isNil12, isNotNil as isNotNil10, isRecord as isRecord4 } from "@wistia/type-guards";
-import { jsx as jsx213, jsxs as jsxs17 } from "react/jsx-runtime";
-var inputStyles = css23`
+import styled28, { css as css25 } from "styled-components";
+import { isNil as isNil13, isNotNil as isNotNil11, isRecord as isRecord4 } from "@wistia/type-guards";
+import { jsx as jsx213, jsxs as jsxs18 } from "react/jsx-runtime";
+var inputStyles = css25`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border);
@@ -8496,27 +8519,27 @@ var Input = forwardRef9(
     const internalRef = useRef3();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      isNotNil10(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
+      isNotNil11(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if (isNil12(leftIcon) && type === "search") {
+    if (isNil13(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx213(Icon, { type: "search" });
     }
-    if (isNotNil10(leftIconToDisplay)) {
+    if (isNotNil11(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil10(rightIconToDisplay)) {
+    if (isNotNil11(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement4(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus = (event) => {
-      if (isNotNil10(props.onFocus)) {
+      if (isNotNil11(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -8525,7 +8548,7 @@ var Input = forwardRef9(
         });
       }
     };
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
@@ -8557,7 +8580,7 @@ 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";
+import { Fragment as Fragment5, jsx as jsx214, jsxs as jsxs19 } from "react/jsx-runtime";
 var StyledInput = styled29(Input)`
   :not([rows]) {
     min-height: unset;
@@ -8578,7 +8601,7 @@ var StyledInput = styled29(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = css24`
+var editableStyles = css26`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -8674,7 +8697,7 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
     /* @__PURE__ */ jsx214(
       Tooltip,
       {
@@ -8871,7 +8894,7 @@ 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 jsx217, jsxs as jsxs20 } from "react/jsx-runtime";
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ jsx217("li", { children: /* @__PURE__ */ jsx217(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
@@ -8882,7 +8905,7 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  return /* @__PURE__ */ jsxs19("div", { ref, children: [
+  return /* @__PURE__ */ jsxs20("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(
@@ -8908,32 +8931,92 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children5, cloneElement as cloneElement5, useContext as useContext3 } from "react";
-import styled33 from "styled-components";
-import { isArray as isArray2, isNotNil as isNotNil11, isNotUndefined as isNotUndefined8, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import styled34 from "styled-components";
+import { isArray as isArray2, isNotNil as isNotNil12, isNotUndefined as isNotUndefined8, isUndefined as isUndefined4 } from "@wistia/type-guards";
+
+// src/components/Label/Label.tsx
+import styled32, { css as css27 } from "styled-components";
+import { jsx as jsx218 } from "react/jsx-runtime";
+var requiredStyle = css27`
+  &::after {
+    color: var(--wui-color-text-error);
+    display: inline;
+    padding-left: var(--wui-space-01);
+    content: '*';
+  }
+`;
+var disabledStyle4 = css27`
+  color: var(--wui-color-text-disabled);
+`;
+var StyledLabel3 = styled32.label`
+  display: block;
+  width: 100%;
+  color: var(--wui-color-text);
+  font-family: var(--wui-typography-heading-6-family);
+  line-height: var(--wui-typography-heading-6-line-height);
+  font-size: var(--wui-typography-heading-6-size);
+  font-weight: var(--wui-typography-heading-6-weight);
+
+  /* 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 && disabledStyle4}
+  ${({ $required }) => $required && requiredStyle}
+`;
+var Label = ({
+  children,
+  disabled = false,
+  htmlFor,
+  required = false,
+  screenReaderOnly = false,
+  ...otherProps
+}) => {
+  return /* @__PURE__ */ jsx218(
+    StyledLabel3,
+    {
+      ...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";
 
 // src/components/FormGroup/FormGroup.tsx
-import styled32 from "styled-components";
+import styled33 from "styled-components";
 import { useRef as useRef7 } from "react";
-import { jsx as jsx218, jsxs as jsxs20 } from "react/jsx-runtime";
-var StyledFieldset = styled32.fieldset`
+import { jsx as jsx219, jsxs as jsxs21 } from "react/jsx-runtime";
+var StyledFieldset = styled33.fieldset`
   border: 0;
 `;
-var StyledLegend = styled32.legend`
+var StyledLegend = styled33.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
   const ref = useRef7();
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ jsx218(
+        /* @__PURE__ */ jsx219(
           Heading,
           {
             renderAs: StyledLegend,
@@ -8949,7 +9032,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { jsx as jsx219 } from "react/jsx-runtime";
+import { jsx as jsx220 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext3(null);
 var CheckboxGroup = ({
   children,
@@ -8964,13 +9047,13 @@ var CheckboxGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx219(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx219(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx220(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx220(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-import { Fragment as Fragment6, jsx as jsx220, jsxs as jsxs21 } from "react/jsx-runtime";
-var StyledFormField = styled33.div`
+import { Fragment as Fragment6, jsx as jsx221, jsxs as jsxs22 } from "react/jsx-runtime";
+var StyledFormField = styled34.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
@@ -8994,7 +9077,7 @@ var StyledFormField = styled33.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = styled33.ul`
+var StyledErrorList = styled34.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9004,7 +9087,7 @@ var StyledErrorList = styled33.ul`
 `;
 var ErrorMessages = ({ errors, id }) => {
   const isMultipleErrors = isArray2(errors);
-  return isMultipleErrors ? /* @__PURE__ */ jsx220(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx220(
+  return isMultipleErrors ? /* @__PURE__ */ jsx221(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ jsx221(
     Text,
     {
       colorScheme: "error",
@@ -9014,7 +9097,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ jsx220(
+  )) }) : /* @__PURE__ */ jsx221(
     Text,
     {
       colorScheme: "error",
@@ -9054,8 +9137,8 @@ var FormField = ({
       defaultValue
     };
   }
-  if (isNotNil11(checkboxGroup)) {
-    const computedName = isNotNil11(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if (isNotNil12(checkboxGroup)) {
+    const computedName = isNotNil12(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
       if (isNotUndefined8(props.onChange)) {
         props.onChange(event);
@@ -9068,22 +9151,22 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": isNotNil11(error),
-      "aria-describedby": isNotNil11(error) ? `${computedId}-error` : void 0
+      "aria-invalid": isNotNil12(error),
+      "aria-describedby": isNotNil12(error) ? `${computedId}-error` : void 0
     };
   }
   Children5.only(children);
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     StyledFormField,
     {
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ jsx220(Label, { htmlFor: computedId, children: label }),
+        !isIntegratedLabel && /* @__PURE__ */ jsx221(Label, { htmlFor: computedId, children: label }),
         cloneElement5(children, childProps),
-        isNotNil11(computedError) ? /* @__PURE__ */ jsxs21(Fragment6, { children: [
-          /* @__PURE__ */ jsx220("div", {}),
-          /* @__PURE__ */ jsx220(
+        isNotNil12(computedError) ? /* @__PURE__ */ jsxs22(Fragment6, { children: [
+          /* @__PURE__ */ jsx221("div", {}),
+          /* @__PURE__ */ jsx221(
             ErrorMessages,
             {
               errors: computedError,
@@ -9099,7 +9182,7 @@ FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 import { createContext as createContext4, useMemo as useMemo6 } from "react";
-import { jsx as jsx221 } from "react/jsx-runtime";
+import { jsx as jsx222 } from "react/jsx-runtime";
 var RadioGroupContext = createContext4(null);
 var RadioGroup = ({
   children,
@@ -9114,15 +9197,15 @@ var RadioGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ jsx221(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx221(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ jsx222(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx222(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 import { Children as Children6, cloneElement as cloneElement6, forwardRef as forwardRef12 } from "react";
-import styled34 from "styled-components";
-import { jsx as jsx222 } from "react/jsx-runtime";
-var StyledButton2 = styled34(Button)`
+import styled35 from "styled-components";
+import { jsx as jsx223 } from "react/jsx-runtime";
+var StyledButton2 = styled35(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9139,7 +9222,7 @@ var StyledButton2 = styled34(Button)`
 var IconButton = forwardRef12(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ jsx222(
+    return /* @__PURE__ */ jsx223(
       StyledButton2,
       {
         ...props,
@@ -9157,9 +9240,9 @@ var IconButton = forwardRef12(
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import styled35 from "styled-components";
-import { isNotNil as isNotNil12 } from "@wistia/type-guards";
-import { jsx as jsx223 } from "react/jsx-runtime";
+import styled36 from "styled-components";
+import { isNotNil as isNotNil13 } from "@wistia/type-guards";
+import { jsx as jsx224 } from "react/jsx-runtime";
 var getFillStyle2 = (fillContainer) => {
   if (fillContainer === "horizontal") {
     return "width: 100%;";
@@ -9175,8 +9258,8 @@ var getFillStyle2 = (fillContainer) => {
   }
   return void 0;
 };
-var StyledImage = styled35.img`
-  border-radius: ${({ $borderRadius }) => isNotNil12($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
+var StyledImage = styled36.img`
+  border-radius: ${({ $borderRadius }) => isNotNil13($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle2($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
   object-position: ${({ $objPosition }) => $objPosition};
@@ -9190,7 +9273,7 @@ var Image = ({
   loading = "lazy",
   position: objPosition,
   ...otherProps
-}) => /* @__PURE__ */ jsx223(
+}) => /* @__PURE__ */ jsx224(
   StyledImage,
   {
     $borderRadius: borderRadius,
@@ -9206,14 +9289,14 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/Menu/Menu.tsx
-import styled36, { css as css25, keyframes as keyframes2 } from "styled-components";
+import styled37, { css as css28, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil13, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
+import { isNotNil as isNotNil14, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
 import { useMemo as useMemo7 } from "react";
 
 // src/components/Menu/MenuContext.tsx
@@ -9222,7 +9305,7 @@ var MenuContext = createContext5({ compact: false });
 var useMenuContext = () => useContext4(MenuContext);
 
 // src/components/Menu/Menu.tsx
-import { jsx as jsx224, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx225, jsxs as jsxs23 } from "react/jsx-runtime";
 var open = keyframes2`
   from {
     opacity: 0;
@@ -9243,7 +9326,7 @@ var close = keyframes2`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = css25`
+var menuItemCss = css28`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9254,7 +9337,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 = css28`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9265,7 +9348,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 = css28`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -9307,7 +9390,7 @@ var menuContentCss = css25`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = styled36(DropdownMenuContent)`
+var MenuContent = styled37(DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -9325,7 +9408,7 @@ var Menu = ({
 }) => {
   const contextValue = useMemo7(() => ({ compact }), [compact]);
   let controlProps = {
-    ...isNotNil13(onOpenChange) && isNotNil13(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil14(onOpenChange) && isNotNil14(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -9333,24 +9416,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsx224(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx225(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs23(
     DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ jsx224(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx224(
+        /* @__PURE__ */ jsx225(DropdownMenuTrigger, { asChild: true, children: isNotUndefined9(trigger) ? trigger : /* @__PURE__ */ jsx225(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ jsx224(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ jsx225(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ jsx224(DropdownMenuPortal, { children: /* @__PURE__ */ jsx224(
+        /* @__PURE__ */ jsx225(DropdownMenuPortal, { children: /* @__PURE__ */ jsx225(
           MenuContent,
           {
             ...props,
@@ -9370,19 +9453,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-import styled37 from "styled-components";
+import styled38 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx225 } from "react/jsx-runtime";
-var StyledMenuLabel = styled37(DropdownMenuLabel)`
+import { jsx as jsx226 } from "react/jsx-runtime";
+var StyledMenuLabel = styled38(DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx225(
+  return /* @__PURE__ */ jsx226(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ jsx225(
+      children: /* @__PURE__ */ jsx226(
         Heading,
         {
           renderAs: "span",
@@ -9398,7 +9481,7 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState8 } from "react";
-import styled40 from "styled-components";
+import styled41 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -9407,14 +9490,14 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil15 } from "@wistia/type-guards";
+import { isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef13 } from "react";
-import styled38 from "styled-components";
-import { isNotNil as isNotNil14, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
-import { jsx as jsx226, jsxs as jsxs23 } from "react/jsx-runtime";
-var StyledButton3 = styled38(Button)`
+import styled39 from "styled-components";
+import { isNotNil as isNotNil15, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
+import { jsx as jsx227, jsxs as jsxs24 } from "react/jsx-runtime";
+var StyledButton3 = styled39(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -9453,7 +9536,7 @@ var StyledButton3 = styled38(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = styled38.div`
+var StyledLeftIconContainer = styled39.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -9464,7 +9547,7 @@ var StyledLeftIconContainer = styled38.div`
     }
   }
 `;
-var StyledRightIconContainer = styled38.div`
+var StyledRightIconContainer = styled39.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -9475,13 +9558,13 @@ var StyledRightIconContainer = styled38.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = styled38.div`
+var StyledLabelAndDescriptionContainer = styled39.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = styled38.div`
+var StyledBadgeContainer = styled39.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -9496,7 +9579,7 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ jsx226(
+    badge = /* @__PURE__ */ jsx227(
       Icon,
       {
         colorScheme: "purple",
@@ -9508,7 +9591,7 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
       }
     );
   }
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     StyledButton3,
     {
       ...props,
@@ -9518,10 +9601,10 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ jsx226(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ jsx226(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil14(badge) || isNotNil14(command) ? /* @__PURE__ */ jsx226(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ jsx226(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ jsx227(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx227(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil15(badge) || isNotNil15(command) ? /* @__PURE__ */ jsx227(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ jsx227(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -9529,33 +9612,33 @@ var MenuItemButton = forwardRef13(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled39 from "styled-components";
-import { jsx as jsx227 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled39.span``;
-var StyledMenuItemDescription = styled39(Text).attrs({
+import styled40 from "styled-components";
+import { jsx as jsx228 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled40.span``;
+var StyledMenuItemDescription = styled40(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ jsx227(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ jsx228(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ jsx227(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ jsx228(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-import { jsx as jsx228, jsxs as jsxs24 } from "react/jsx-runtime";
-var SubMenuContent = styled40(DropdownMenuSubContent)`
+import { jsx as jsx229, jsxs as jsxs25 } from "react/jsx-runtime";
+var SubMenuContent = styled41(DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = styled40.div`
+var StyledMobileSubMenuItems = styled41.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = styled40(DropdownMenuSubTrigger)`
+var StyledSubTrigger = styled41(DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -9566,12 +9649,12 @@ var StyledSubTrigger = styled40(DropdownMenuSubTrigger)`
 var SubMenuTrigger = ({ icon, ...props }) => {
   const { isSmAndUp } = useMq();
   const Trigger4 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
-  return /* @__PURE__ */ jsx228(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx228(
+  return /* @__PURE__ */ jsx229(Trigger4, { asChild: true, children: /* @__PURE__ */ jsx229(
     MenuItemButton,
     {
       ...props,
       leftIcon: icon,
-      rightIcon: /* @__PURE__ */ jsx228(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ jsx229(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -9585,14 +9668,14 @@ var SubMenu = ({
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState8(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ jsxs24(DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ jsxs24(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ jsx228(MenuItemLabel, { children: label }),
-      isNotNil15(description) ? /* @__PURE__ */ jsx228(MenuItemDescription, { children: description }) : null
+  return isSmAndUp ? /* @__PURE__ */ jsxs25(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs25(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ jsx229(MenuItemLabel, { children: label }),
+      isNotNil16(description) ? /* @__PURE__ */ jsx229(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx228(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx228(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ jsxs24(DropdownMenuGroup, { children: [
-    /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsx229(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx229(SubMenuContent, { $compact: compact, children }) })
+  ] }) : /* @__PURE__ */ jsxs25(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs25(
       SubMenuTrigger,
       {
         ...props,
@@ -9601,12 +9684,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ jsx228(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ jsx228(MenuItemDescription, { children: description })
+          /* @__PURE__ */ jsx229(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx229(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ jsx228(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ jsx229(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -9614,15 +9697,15 @@ SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef14 } from "react";
 import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx229 } from "react/jsx-runtime";
+import { jsx as jsx230 } from "react/jsx-runtime";
 var MenuItem = forwardRef14(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ jsx229(
+    return /* @__PURE__ */ jsx230(
       DropdownMenuItem2,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ jsx229(
+        children: /* @__PURE__ */ jsx230(
           MenuItemButton,
           {
             ...props,
@@ -9640,10 +9723,10 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx230, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx231, jsxs as jsxs26 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs25(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx230(MenuLabel, { children: label }),
+  return /* @__PURE__ */ jsxs26(DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ jsx231(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -9654,11 +9737,11 @@ import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx231 } from "react/jsx-runtime";
+import { jsx as jsx232 } from "react/jsx-runtime";
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ jsx231(
+  indicator = /* @__PURE__ */ jsx232(
     Icon,
     {
       size: "sm",
@@ -9668,17 +9751,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ jsx231(
+  return /* @__PURE__ */ jsx232(
     DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ jsx231(
+      children: /* @__PURE__ */ jsx232(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ jsx231(DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ jsx232(DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -9690,9 +9773,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 import {
   DropdownMenuCheckboxItem
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx232, jsxs as jsxs26 } from "react/jsx-runtime";
-var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs26(
+import { jsx as jsx233, jsxs as jsxs27 } from "react/jsx-runtime";
+var CheckboxIndicator = ({ checked, ...props }) => {
+  return checked ? /* @__PURE__ */ jsxs27(
     "svg",
     {
       ...props,
@@ -9702,14 +9785,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx232(
+        /* @__PURE__ */ jsx233(
           "path",
           {
             d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
             fill: "#2949e5"
           }
         ),
-        /* @__PURE__ */ jsx232(
+        /* @__PURE__ */ jsx233(
           "path",
           {
             d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
@@ -9718,7 +9801,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs26(
+  ) : /* @__PURE__ */ jsxs27(
     "svg",
     {
       ...props,
@@ -9728,14 +9811,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsx232(
+        /* @__PURE__ */ jsx233(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
             fill: "#fcfcfd"
           }
         ),
-        /* @__PURE__ */ jsx232(
+        /* @__PURE__ */ jsx233(
           "path",
           {
             d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
@@ -9752,18 +9835,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx232(
+  return /* @__PURE__ */ jsx233(
     DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ jsx232(
+      children: /* @__PURE__ */ jsx233(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ jsx232(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ jsx233(CheckboxIndicator, { checked })
         }
       )
     }
@@ -9773,36 +9856,36 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef17 } from "react";
-import styled45 from "styled-components";
+import styled46 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil17 } from "@wistia/type-guards";
+import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import styled42 from "styled-components";
+import styled43 from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import styled41 from "styled-components";
+import styled42 from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
-import { jsx as jsx233 } from "react/jsx-runtime";
-var CloseButton = styled41(DialogClose)`
+import { jsx as jsx234 } from "react/jsx-runtime";
+var CloseButton = styled42(DialogClose)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ jsx233(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx233(
+  return /* @__PURE__ */ jsx234(CloseButton, { asChild: true, children: /* @__PURE__ */ jsx234(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ jsx233(Icon, { type: "close" })
+      children: /* @__PURE__ */ jsx234(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx234, jsxs as jsxs27 } from "react/jsx-runtime";
-var Header = styled42.header`
+import { jsx as jsx235, jsxs as jsxs28 } from "react/jsx-runtime";
+var Header = styled43.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -9813,7 +9896,7 @@ var Header = styled42.header`
     margin: 0 0 var(--wui-space-03);
   }
 `;
-var Title = styled42(DialogTitle)`
+var Title = styled43(DialogTitle)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -9824,21 +9907,21 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx234(ScreenReaderOnly, { children: /* @__PURE__ */ jsx234(Title, { children: title }) }) : /* @__PURE__ */ jsx234(Title, { children: title });
-  return /* @__PURE__ */ jsxs27(Header, { $hideTitle: hideTitle, children: [
+  const TitleComponent = hideTitle ? /* @__PURE__ */ jsx235(ScreenReaderOnly, { children: /* @__PURE__ */ jsx235(Title, { children: title }) }) : /* @__PURE__ */ jsx235(Title, { children: title });
+  return /* @__PURE__ */ jsxs28(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
-    hideCloseButton ? null : /* @__PURE__ */ jsx234(ModalCloseButton, {})
+    hideCloseButton ? null : /* @__PURE__ */ jsx235(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef15 } from "react";
-import styled43 from "styled-components";
+import styled44 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef8, useEffect as useEffect5 } from "react";
-import { isNotNil as isNotNil16 } from "@wistia/type-guards";
+import { isNotNil as isNotNil17 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef8(null);
   useEffect5(() => {
@@ -9846,7 +9929,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect5(() => {
     return () => {
-      if (isNotNil16(previouslyFocusedRef.current)) {
+      if (isNotNil17(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -9856,8 +9939,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-import { jsx as jsx235 } from "react/jsx-runtime";
-var StyledModalContent = styled43(DialogContent)`
+import { jsx as jsx236 } from "react/jsx-runtime";
+var StyledModalContent = styled44(DialogContent)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -9901,7 +9984,7 @@ var StyledModalContent = styled43(DialogContent)`
 var ModalContent = forwardRef15(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ jsx235(
+    return /* @__PURE__ */ jsx236(
       StyledModalContent,
       {
         ref,
@@ -9917,8 +10000,8 @@ var ModalContent = forwardRef15(
 
 // src/private/components/Backdrop/Backdrop.tsx
 import { forwardRef as forwardRef16 } from "react";
-import styled44 from "styled-components";
-import { jsx as jsx236 } from "react/jsx-runtime";
+import styled45 from "styled-components";
+import { jsx as jsx237 } from "react/jsx-runtime";
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -9931,7 +10014,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = styled44.div`
+var BackdropComponent = styled45.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -9955,7 +10038,7 @@ var BackdropComponent = styled44.div`
   }
 `;
 var Backdrop = forwardRef16(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx236(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ jsx237(
     BackdropComponent,
     {
       ref,
@@ -9969,9 +10052,9 @@ var Backdrop = forwardRef16(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx237, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx238, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = styled45.div`
+var ModalBody = styled46.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -9989,24 +10072,24 @@ var Modal = forwardRef17(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsx237(
+    return /* @__PURE__ */ jsx238(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil17(onRequestClose)) {
+          if (!open2 && isNotNil18(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs28(DialogPortal, { children: [
-          /* @__PURE__ */ jsx237(Backdrop, {}),
-          /* @__PURE__ */ jsxs28(
+        children: /* @__PURE__ */ jsxs29(DialogPortal, { children: [
+          /* @__PURE__ */ jsx238(Backdrop, {}),
+          /* @__PURE__ */ jsxs29(
             ModalContent,
             {
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil17(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil18(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -10016,8 +10099,8 @@ var Modal = forwardRef17(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ jsx237(ModalBody, { children }),
-                /* @__PURE__ */ jsx237(
+                /* @__PURE__ */ jsx238(ModalBody, { children }),
+                /* @__PURE__ */ jsx238(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -10037,18 +10120,18 @@ 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 styled47, { css as css29 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil18 } from "@wistia/type-guards";
+import { isNotNil as isNotNil19 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil18(onOpenChange) && isNotNil18(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil19(onOpenChange) && isNotNil19(isOpen) ? { open: 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`
+import { jsx as jsx239, jsxs as jsxs30 } from "react/jsx-runtime";
+var StyledContent2 = styled47(Content2)`
+  ${({ $unstyled }) => !$unstyled && css29`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: 320px;
@@ -10072,25 +10155,25 @@ var Popover = ({
   unstyled = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs29(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ jsx238(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx238(Portal, { children: /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
+    /* @__PURE__ */ jsx239(Trigger2, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx239(Portal, { children: /* @__PURE__ */ jsxs30(
       StyledContent2,
       {
         sideOffset: 8,
         ...props,
         $unstyled: unstyled,
         children: [
-          !hideCloseButton && /* @__PURE__ */ jsx238(Close, { asChild: true, children: /* @__PURE__ */ jsx238(
+          !hideCloseButton && /* @__PURE__ */ jsx239(Close, { asChild: true, children: /* @__PURE__ */ jsx239(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ jsx238(Icon, { type: "close" })
+              children: /* @__PURE__ */ jsx239(Icon, { type: "close" })
             }
           ) }),
-          /* @__PURE__ */ jsx238("div", { children })
+          /* @__PURE__ */ jsx239("div", { children })
         ]
       }
     ) })
@@ -10099,11 +10182,11 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import styled47 from "styled-components";
+import styled48 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil19 } from "@wistia/type-guards";
-import { jsx as jsx239, jsxs as jsxs30 } from "react/jsx-runtime";
-var ProgressBarWrapper = styled47.div`
+import { isNotNil as isNotNil20 } from "@wistia/type-guards";
+import { jsx as jsx240, jsxs as jsxs31 } from "react/jsx-runtime";
+var ProgressBarWrapper = styled48.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
   --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
@@ -10119,7 +10202,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = styled47.div`
+var ProgressBarLabel = styled48.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -10127,7 +10210,7 @@ var ProgressBarLabel = styled47.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = styled47(ProgressIndicator)`
+var StyledProgressIndicator = styled48(ProgressIndicator)`
   background-color: var(--progress-bar-indicator-color);
   width: 100%;
   height: 100%;
@@ -10136,7 +10219,7 @@ var StyledProgressIndicator = styled47(ProgressIndicator)`
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = styled47(ProgressRoot)`
+var StyledProgressBar = styled48(ProgressRoot)`
   position: relative;
   overflow: hidden;
   background: var(--progress-bar-background-color);
@@ -10155,15 +10238,15 @@ var ProgressBar = ({
   labelRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs30(ProgressBarWrapper, { children: [
-    isNotNil19(labelLeft) ? /* @__PURE__ */ jsx239(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ jsx239(
+  return /* @__PURE__ */ jsxs31(ProgressBarWrapper, { children: [
+    isNotNil20(labelLeft) ? /* @__PURE__ */ jsx240(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ jsx240(
       StyledProgressBar,
       {
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ jsx239(
+        children: /* @__PURE__ */ jsx240(
           StyledProgressIndicator,
           {
             $max: max,
@@ -10172,85 +10255,102 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil19(labelRight) ? /* @__PURE__ */ jsx239(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil20(labelRight) ? /* @__PURE__ */ jsx240(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 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 styled49, { css as css30 } 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`
-  display: flex;
-  flex-direction: column;
-  padding-left: var(--wui-space-02);
+import { jsx as jsx241, jsxs as jsxs32 } from "react/jsx-runtime";
+var RadioIcon = () => /* @__PURE__ */ jsx241(
+  "svg",
+  {
+    fill: "inherit",
+    height: "12",
+    viewBox: "0 0 12 12",
+    width: "12",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx241(
+      "circle",
+      {
+        cx: "6",
+        cy: "6",
+        fill: "currentColor",
+        r: "4"
+      }
+    )
+  }
+);
+var StyledHiddenRadioInput = styled49.input`
+  ${visuallyHiddenStyle}
+
+  /* toggles display of faux-input background-color */
+  &:checked + label [data-wui-faux-input='true'] {
+    border-color: var(--wui-color-bg-fill);
+  }
+
+  /* toggles display of RadioIcon */
+  &:checked + label svg {
+    display: block;
+  }
 `;
-var StyledRadio = styled48.input`
-  box-shadow: ${({ type }) => type === "checkbox" ? "inset 0 0.5px 1.5px 0 rgba(0, 0, 0, 0.38)" : "none"};
-  appearance: none;
-  margin: 0;
-  color: currentcolor;
+var inputSizeSmall2 = css30`
   width: 14px;
-  min-width: 14px;
   height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+`;
+var inputSizeMedium2 = css30`
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+`;
+var inputSizeLarge2 = css30`
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+`;
+var getSizeCss2 = (size) => {
+  if (size === "sm") return inputSizeSmall2;
+  if (size === "lg") return inputSizeLarge2;
+  return inputSizeMedium2;
+};
+var StyledRadioInput = styled49.div`
+  ${({ $size }) => getSizeCss2($size)}
+  line-height: 0;
+  margin: 0;
   border: 1px solid var(--wui-color-border);
-  border-radius: 50%;
+  border-radius: 50%; /* TODO --wui-border-radius-rounded */
+  background-color: var(--wui-color-bg-fill-white);
   display: grid;
   place-content: center;
+  align-self: flex-start;
 
-  &&::before {
-    content: '';
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    transform: scale(0);
-    box-shadow: inset 1em 1em var(--wui-color-bg-fill);
-  }
+  svg {
+    display: none;
 
-  &&:checked::before {
-    transform: scale(1);
+    circle {
+      fill: var(--wui-color-bg-fill);
+    }
   }
 `;
-var disabledStyle2 = css27`
+var disabledStyle5 = css30`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorStyle = css27`
-  /* TODO Lamp to design error state */
-  &:hover,
-  &:focus,
-  &:active {
-    border-color: transparent !important;
-  }
-`;
-var defaultHoverStyle = css27`
-  /* TODO Lamp to design hover state */
-  cursor: pointer;
-`;
-var StyledRadioWrapper = styled48.div`
-  align-items: baseline;
-  border: 1px solid transparent;
-  border-radius: 4px;
+var StyledRadioWrapper = styled49.div`
   display: flex;
-  gap: var(--wui-space-02);
-  padding: var(--wui-space-02);
-
-  &:hover {
-    ${defaultHoverStyle}
-  }
-
-  &:focus-within {
-    /* TODO Lamp to design focus state */
-    background-color: #efefef;
-  }
+  margin: 0;
 
-  &[aria-invalid='true'] {
-    ${errorStyle};
-  }
+  /* TODO this solves a problem but potentially causes and a11y issue */
+  user-select: none;
 
-  ${({ disabled }) => disabled && disabledStyle2};
+  ${({ $disabled }) => $disabled && disabledStyle5};
 `;
 var Radio = forwardRef18(
   ({
@@ -10261,45 +10361,50 @@ var Radio = forwardRef18(
     description,
     name,
     onChange,
-    required = false,
+    size = "md",
     value = "false",
-    ...otherProps
+    required = false,
+    ...props
   }, ref) => {
     const generatedId = useId3();
-    const computedId = isNonEmptyString3(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs31(
+    const computedId = isNonEmptyString3(id) ? id : `wistia-ui-radio-${generatedId}`;
+    return /* @__PURE__ */ jsxs32(
       StyledRadioWrapper,
       {
-        "aria-invalid": otherProps["aria-invalid"],
-        disabled,
+        $disabled: disabled,
+        "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ jsx240(
-            StyledRadio,
+          /* @__PURE__ */ jsx241(
+            StyledHiddenRadioInput,
             {
+              ...props,
               ref,
-              "aria-checked": checked,
               checked,
               disabled,
               id: computedId,
               name,
               onChange,
+              required,
               type: "radio",
-              value,
-              ...otherProps
+              value
             }
           ),
-          /* @__PURE__ */ jsxs31(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ jsx240(
-              Label,
-              {
-                disabled,
-                htmlFor: computedId,
-                required,
-                children: label
-              }
-            ),
-            /* @__PURE__ */ jsx240(LabelDescription, { children: description })
-          ] })
+          /* @__PURE__ */ jsx241(
+            FormControlLabel,
+            {
+              controlSlot: /* @__PURE__ */ jsx241(
+                StyledRadioInput,
+                {
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ jsx241(RadioIcon, {})
+                }
+              ),
+              description,
+              htmlFor: computedId,
+              label
+            }
+          )
         ]
       }
     );
@@ -10309,13 +10414,13 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef19 } from "react";
-import styled50, { css as css28 } from "styled-components";
+import styled51, { css as css31 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
-import { isNil as isNil13 } from "@wistia/type-guards";
+import { isNil as isNil14 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemMeasurements.tsx
 import { createContext as createContext6, useContext as useContext5, useMemo as useMemo8, useState as useState9 } from "react";
-import { jsx as jsx241 } from "react/jsx-runtime";
+import { jsx as jsx242 } from "react/jsx-runtime";
 var SelectedItemMeasurementsContext = createContext6(
   null
 );
@@ -10330,7 +10435,7 @@ var SelectedItemMeasurementsProvider = ({
     }),
     [selectedItemMeasurements]
   );
-  return /* @__PURE__ */ jsx241(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx242(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemMeasurements = () => {
   const context = useContext5(SelectedItemMeasurementsContext);
@@ -10344,7 +10449,7 @@ var useSelectedItemMeasurements = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 import { useMemo as useMemo9 } from "react";
-import styled49 from "styled-components";
+import styled50 from "styled-components";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 import { createContext as createContext7, useContext as useContext6 } from "react";
@@ -10359,8 +10464,8 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import { jsx as jsx242 } from "react/jsx-runtime";
-var SelectedItemIndicatorDiv = styled49.div`
+import { jsx as jsx243 } from "react/jsx-runtime";
+var SelectedItemIndicatorDiv = styled50.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -10386,7 +10491,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue) {
     return null;
   }
-  return /* @__PURE__ */ jsx242(
+  return /* @__PURE__ */ jsx243(
     SelectedItemIndicatorDiv,
     {
       style: {
@@ -10399,8 +10504,8 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx243, jsxs as jsxs32 } from "react/jsx-runtime";
-var segmentedControlStyles = css28`
+import { jsx as jsx244, jsxs as jsxs33 } from "react/jsx-runtime";
+var segmentedControlStyles = css31`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -10410,7 +10515,7 @@ var segmentedControlStyles = css28`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = styled50(ToggleGroupRoot)`
+var StyledSegmentedControl = styled51(ToggleGroupRoot)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = forwardRef19(
@@ -10422,10 +10527,10 @@ var SegmentedControl = forwardRef19(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if (isNil13(children)) {
+    if (isNil14(children)) {
       return null;
     }
-    return /* @__PURE__ */ jsx243(
+    return /* @__PURE__ */ jsx244(
       StyledSegmentedControl,
       {
         ref,
@@ -10437,8 +10542,8 @@ var SegmentedControl = forwardRef19(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx243(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs32(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ jsx243(SelectedItemIndicator, {}),
+        children: /* @__PURE__ */ jsx244(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs33(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ jsx244(SelectedItemIndicator, {}),
           children
         ] }) })
       }
@@ -10449,27 +10554,27 @@ 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 styled52, { css as css32 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil21 } from "@wistia/type-guards";
+import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 
 // src/private/helpers/mergeRefs/mergeRefs.ts
-import { isNotNil as isNotNil20, isFunction as isFunction2 } from "@wistia/type-guards";
+import { isNotNil as isNotNil21, isFunction as isFunction2 } from "@wistia/type-guards";
 var mergeRefs = (refs) => (value) => {
   refs.forEach((ref) => {
     if (isFunction2(ref)) {
       ref(value);
       return;
     }
-    if (isNotNil20(ref)) {
+    if (isNotNil21(ref)) {
       ref.current = value;
     }
   });
 };
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-import { jsxs as jsxs33 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css29`
+import { jsxs as jsxs34 } from "react/jsx-runtime";
+var segmentedControlItemStyles = css32`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -10528,7 +10633,7 @@ var segmentedControlItemStyles = css29`
     }
   }
 `;
-var StyledSegmentedControlItem = styled51(ToggleGroupItem)`
+var StyledSegmentedControlItem = styled52(ToggleGroupItem)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = forwardRef20(
@@ -10569,12 +10674,12 @@ var SegmentedControlItem = forwardRef20(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs34(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
-        $hasLabel: isNotNil21(label),
-        "aria-label": isNotNil21(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil22(label),
+        "aria-label": isNotNil22(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -10600,9 +10705,9 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef21 } from "react";
-import styled52 from "styled-components";
-import { jsx as jsx244, jsxs as jsxs34 } from "react/jsx-runtime";
-var StyledTrigger = styled52(Trigger3)`
+import styled53 from "styled-components";
+import { jsx as jsx245, jsxs as jsxs35 } from "react/jsx-runtime";
+var StyledTrigger = styled53(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --wui-select-color-bg: var(--wui-color-bg-surface);
   --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -10650,7 +10755,7 @@ var StyledTrigger = styled52(Trigger3)`
     background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-var StyledContent3 = styled52(Content3)`
+var StyledContent3 = styled53(Content3)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -10678,13 +10783,13 @@ var Select = forwardRef21(
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs35(
       Root3,
       {
         ...props,
         onValueChange: onChange,
         children: [
-          /* @__PURE__ */ jsxs34(
+          /* @__PURE__ */ jsxs35(
             StyledTrigger,
             {
               ref: forwardedRef,
@@ -10692,8 +10797,8 @@ var Select = forwardRef21(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ jsx244(Value, { placeholder }),
-                /* @__PURE__ */ jsx244(
+                /* @__PURE__ */ jsx245(Value, { placeholder }),
+                /* @__PURE__ */ jsx245(
                   Icon,
                   {
                     size: "md",
@@ -10703,10 +10808,10 @@ var Select = forwardRef21(
               ]
             }
           ),
-          /* @__PURE__ */ jsx244(Portal2, { children: /* @__PURE__ */ jsxs34(StyledContent3, { position: "popper", children: [
-            /* @__PURE__ */ jsx244(ScrollUpButton, { children: /* @__PURE__ */ jsx244(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ jsx244(Viewport, { children }),
-            /* @__PURE__ */ jsx244(ScrollDownButton, { children: /* @__PURE__ */ jsx244(Icon, { type: "caret-down" }) })
+          /* @__PURE__ */ jsx245(Portal2, { children: /* @__PURE__ */ jsxs35(StyledContent3, { position: "popper", children: [
+            /* @__PURE__ */ jsx245(ScrollUpButton, { children: /* @__PURE__ */ jsx245(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ jsx245(Viewport, { children }),
+            /* @__PURE__ */ jsx245(ScrollDownButton, { children: /* @__PURE__ */ jsx245(Icon, { type: "caret-down" }) })
           ] }) })
         ]
       }
@@ -10718,9 +10823,9 @@ Select.displayName = "Select";
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef22 } from "react";
-import styled53 from "styled-components";
-import { jsx as jsx245, jsxs as jsxs35 } from "react/jsx-runtime";
-var StyledItem = styled53(Item)`
+import styled54 from "styled-components";
+import { jsx as jsx246, jsxs as jsxs36 } from "react/jsx-runtime";
+var StyledItem = styled54(Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -10743,25 +10848,25 @@ var StyledItem = styled53(Item)`
     background-color: transparent;
   }
 `;
-var StyledIconContainer = styled53.span`
+var StyledIconContainer = styled54.span`
   width: 12px;
 `;
 var SelectOption = forwardRef22(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ jsx245(StyledIconContainer, { children: /* @__PURE__ */ jsx245(ItemIndicator, { children: /* @__PURE__ */ jsx245(
+          /* @__PURE__ */ jsx246(StyledIconContainer, { children: /* @__PURE__ */ jsx246(ItemIndicator, { children: /* @__PURE__ */ jsx246(
             Icon,
             {
               size: "sm",
               type: "checkmark"
             }
           ) }) }),
-          /* @__PURE__ */ jsx245(ItemText, { children })
+          /* @__PURE__ */ jsx246(ItemText, { children })
         ]
       }
     );
@@ -10771,14 +10876,14 @@ SelectOption.displayName = "Option";
 
 // src/components/Select/SelectOptionGroup.tsx
 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)`
+import styled55 from "styled-components";
+import { jsx as jsx247, jsxs as jsxs37 } from "react/jsx-runtime";
+var StyledLabel4 = styled55(Label2)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs36(Group, { ...props, children: [
-    /* @__PURE__ */ jsx246(StyledLabel4, { children: /* @__PURE__ */ jsx246(
+  return /* @__PURE__ */ jsxs37(Group, { ...props, children: [
+    /* @__PURE__ */ jsx247(StyledLabel4, { children: /* @__PURE__ */ jsx247(
       Text,
       {
         prominence: "secondary",
@@ -10791,19 +10896,19 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 };
 
 // src/components/Table/Table.tsx
-import styled55, { css as css30 } from "styled-components";
-import { jsx as jsx247 } from "react/jsx-runtime";
-var StyledTable = styled55.table`
+import styled56, { css as css33 } from "styled-components";
+import { jsx as jsx248 } from "react/jsx-runtime";
+var StyledTable = styled56.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && css30`
+  ${({ $striped }) => $striped && css33`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && css30`
+  ${({ $divided }) => $divided && css33`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -10815,7 +10920,7 @@ var Table = ({
   divided = false,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx247(
+  return /* @__PURE__ */ jsx248(
     StyledTable,
     {
       $divided: divided,
@@ -10827,35 +10932,35 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-import styled56 from "styled-components";
+import styled57 from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
 import { createContext as createContext8 } from "react";
 var TableSectionContext = createContext8(null);
 
 // src/components/Table/TableBody.tsx
-import { jsx as jsx248 } from "react/jsx-runtime";
-var StyledTbody = styled56.tbody``;
+import { jsx as jsx249 } from "react/jsx-runtime";
+var StyledTbody = styled57.tbody``;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx248(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx248(StyledTbody, { ...props, children }) });
+  return /* @__PURE__ */ jsx249(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ jsx249(StyledTbody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext7 } from "react";
-import styled57, { css as css31 } from "styled-components";
-import { jsx as jsx249 } from "react/jsx-runtime";
-var sharedStyles = css31`
+import styled58, { css as css34 } from "styled-components";
+import { jsx as jsx250 } from "react/jsx-runtime";
+var sharedStyles = css34`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = styled57.th`
+var StyledTh = styled58.th`
   ${sharedStyles}
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-weight-label-bold);
   line-height: var(--wui-typography-body-4-line-height);
 `;
-var StyledTd = styled57.td`
+var StyledTd = styled58.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -10864,51 +10969,51 @@ var StyledTd = styled57.td`
 var TableCell = ({ children, ...props }) => {
   const section = useContext7(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ jsx249(StyledTh, { ...props, children });
+    return /* @__PURE__ */ jsx250(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ jsx249(StyledTd, { ...props, children });
+  return /* @__PURE__ */ jsx250(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFooter.tsx
-import styled58 from "styled-components";
-import { jsx as jsx250 } from "react/jsx-runtime";
-var StyledTfoot = styled58.tfoot``;
+import styled59 from "styled-components";
+import { jsx as jsx251 } from "react/jsx-runtime";
+var StyledTfoot = styled59.tfoot``;
 var TableFooter = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx250(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx250(StyledTfoot, { ...props, children }) });
+  return /* @__PURE__ */ jsx251(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ jsx251(StyledTfoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-import styled59 from "styled-components";
-import { jsx as jsx251 } from "react/jsx-runtime";
-var StyledThead = styled59.thead``;
+import styled60 from "styled-components";
+import { jsx as jsx252 } from "react/jsx-runtime";
+var StyledThead = styled60.thead``;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx251(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx251(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ jsx252(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ jsx252(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-import styled60 from "styled-components";
-import { jsx as jsx252 } from "react/jsx-runtime";
-var StyledTr = styled60.tr``;
+import styled61 from "styled-components";
+import { jsx as jsx253 } from "react/jsx-runtime";
+var StyledTr = styled61.tr``;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx252(StyledTr, { ...props, children });
+  return /* @__PURE__ */ jsx253(StyledTr, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
 import { forwardRef as forwardRef24, useState as useState10 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil23, isNil as isNil14 } from "@wistia/type-guards";
-import styled65 from "styled-components";
+import { isNotNil as isNotNil24, isNil as isNil15 } from "@wistia/type-guards";
+import styled66 from "styled-components";
 
 // src/components/Tabs/TabPanel.tsx
-import styled61 from "styled-components";
+import styled62 from "styled-components";
 import { Content as TabsContent } from "@radix-ui/react-tabs";
-import { jsx as jsx253 } from "react/jsx-runtime";
-var StyledTabPanel = styled61(TabsContent)`
+import { jsx as jsx254 } from "react/jsx-runtime";
+var StyledTabPanel = styled62(TabsContent)`
   display: flex;
   flex-direction: column;
 `;
 var TabPanel = ({ children, value, ...props }) => {
-  return /* @__PURE__ */ jsx253(
+  return /* @__PURE__ */ jsx254(
     StyledTabPanel,
     {
       value,
@@ -10920,10 +11025,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabList.tsx
-import styled62 from "styled-components";
+import styled63 from "styled-components";
 import { List as RadixTabList } from "@radix-ui/react-tabs";
-import { jsx as jsx254 } from "react/jsx-runtime";
-var StyledTabList = styled62(RadixTabList)`
+import { jsx as jsx255 } from "react/jsx-runtime";
+var StyledTabList = styled63(RadixTabList)`
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
@@ -10936,7 +11041,7 @@ var TabList = ({
   ariaLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx254(
+  return /* @__PURE__ */ jsx255(
     StyledTabList,
     {
       $fullWidth: fullWidth,
@@ -10950,9 +11055,9 @@ TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
 import { forwardRef as forwardRef23, useEffect as useEffect7, useRef as useRef10 } from "react";
-import styled63 from "styled-components";
+import styled64 from "styled-components";
 import { Trigger as RadixTab } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil22 } from "@wistia/type-guards";
+import { isNotNil as isNotNil23 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext9, useContext as useContext8 } from "react";
@@ -10967,8 +11072,8 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/TabItem.tsx
-import { jsxs as jsxs37 } from "react/jsx-runtime";
-var StyledTabItem = styled63(RadixTab)`
+import { jsxs as jsxs38 } from "react/jsx-runtime";
+var StyledTabItem = styled64(RadixTab)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -11006,12 +11111,12 @@ var TabItem = forwardRef23(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs38(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: isNotNil22(label),
-        "aria-label": isNotNil22(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil23(label),
+        "aria-label": isNotNil23(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -11048,9 +11153,9 @@ var extractTabItems = (children) => {
 
 // src/components/Tabs/SelectedItemIndicator.tsx
 import { useMemo as useMemo10 } from "react";
-import styled64 from "styled-components";
-import { jsx as jsx255 } from "react/jsx-runtime";
-var TabsSelectedItemIndicatorDiv = styled64(SelectedItemIndicatorDiv)`
+import styled65 from "styled-components";
+import { jsx as jsx256 } from "react/jsx-runtime";
+var TabsSelectedItemIndicatorDiv = styled65(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -11069,7 +11174,7 @@ var SelectedItemIndicator2 = () => {
   if (selectedValue == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx255(
+  return /* @__PURE__ */ jsx256(
     TabsSelectedItemIndicatorDiv,
     {
       style: {
@@ -11082,19 +11187,19 @@ var SelectedItemIndicator2 = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx256, jsxs as jsxs38 } from "react/jsx-runtime";
-var TabsContainer = styled65.div`
+import { jsx as jsx257, jsxs as jsxs39 } from "react/jsx-runtime";
+var TabsContainer = styled66.div`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
   overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StickyTabContent = styled65.div`
+var StickyTabContent = styled66.div`
   flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
   overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
   overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StyledTabsRoot = styled65(TabsRoot)`
+var StyledTabsRoot = styled66(TabsRoot)`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
@@ -11117,7 +11222,7 @@ var Tabs = forwardRef24(
       onValueChange: setInternalSelectedValue
     } : { value: selectedValue, onValueChange: onSelectedValueChange };
     const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
-    return /* @__PURE__ */ jsx256(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ jsx256(
+    return /* @__PURE__ */ jsx257(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ jsx257(
       StyledTabsRoot,
       {
         ref,
@@ -11125,14 +11230,14 @@ var Tabs = forwardRef24(
         activationMode: "automatic",
         ...otherProps,
         ...modeProps,
-        children: /* @__PURE__ */ jsx256(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs38(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ jsxs38(
+        children: /* @__PURE__ */ jsx257(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs39(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ jsxs39(
             TabList,
             {
               ariaLabel,
               fullWidth,
               children: [
-                /* @__PURE__ */ jsx256(SelectedItemIndicator2, {}),
+                /* @__PURE__ */ jsx257(SelectedItemIndicator2, {}),
                 tabItems.map((tab) => {
                   const {
                     value,
@@ -11141,8 +11246,8 @@ var Tabs = forwardRef24(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if (isNil14(icon)) {
-                    return /* @__PURE__ */ jsx256(
+                  if (isNil15(icon)) {
+                    return /* @__PURE__ */ jsx257(
                       TabItem,
                       {
                         disabled,
@@ -11152,8 +11257,8 @@ var Tabs = forwardRef24(
                       value
                     );
                   }
-                  if (isNotNil23(label)) {
-                    return /* @__PURE__ */ jsx256(
+                  if (isNotNil24(label)) {
+                    return /* @__PURE__ */ jsx257(
                       TabItem,
                       {
                         disabled,
@@ -11164,8 +11269,8 @@ var Tabs = forwardRef24(
                       value
                     );
                   }
-                  if (isNotNil23(ariaLabelForTab)) {
-                    return /* @__PURE__ */ jsx256(
+                  if (isNotNil24(ariaLabelForTab)) {
+                    return /* @__PURE__ */ jsx257(
                       TabItem,
                       {
                         "aria-label": ariaLabelForTab,
@@ -11181,7 +11286,7 @@ var Tabs = forwardRef24(
               ]
             }
           ),
-          /* @__PURE__ */ jsx256(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ jsx256(
+          /* @__PURE__ */ jsx257(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ jsx257(
             TabPanel,
             {
               value: tab.props.value,
@@ -11198,27 +11303,34 @@ Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx257 } from "react/jsx-runtime";
+import { jsx as jsx258 } from "react/jsx-runtime";
 var Tab = forwardRef25(({ children }, ref) => {
-  return /* @__PURE__ */ jsx257("div", { ref, children });
+  return /* @__PURE__ */ jsx258("div", { ref, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef26 } from "react";
-import styled66 from "styled-components";
-import { isNil as isNil15, isNotNil as isNotNil24, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { Fragment as Fragment8, jsx as jsx258, jsxs as jsxs39 } from "react/jsx-runtime";
-var TagLabel = styled66.a`
+import styled67 from "styled-components";
+import { isNil as isNil16, isNotNil as isNotNil25, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { Fragment as Fragment8, jsx as jsx259, jsxs as jsxs40 } from "react/jsx-runtime";
+var TagLabel = styled67.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
   line-height: var(--wui-typography-label-4-line-height);
   border-radius: var(--wui-border-radius-01);
+  display: flex;
   align-items: center;
   color: var(--wui-color-text);
   text-decoration: none;
   padding: var(--wui-space-01);
+  gap: var(--wui-space-01);
+
+  svg {
+    height: 12px;
+    width: 12px;
+  }
 
   :not(:only-child) {
     padding-right: var(--wui-space-01);
@@ -11237,14 +11349,14 @@ var TagLabel = styled66.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = styled66.div`
+var TagDivider = styled67.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = styled66.button`
+var StyledRemoveButton = styled67.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -11272,7 +11384,7 @@ var StyledRemoveButton = styled66.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = styled66.div`
+var StyledTag = styled67.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11285,55 +11397,67 @@ var StyledTag = styled66.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if (isNil15(onClickRemove)) {
+  if (isNil16(onClickRemove)) {
     return null;
   }
-  if (isNil15(onClickRemoveLabel)) {
+  if (isNil16(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs39(Fragment8, { children: [
-    /* @__PURE__ */ jsx258(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(Fragment8, { children: [
+    /* @__PURE__ */ jsx259(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ jsxs40(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx258(
+          /* @__PURE__ */ jsx259(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ jsx258(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ jsx259(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
 var Tag = forwardRef26(
-  ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil24(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs39(
+  ({
+    onClickRemove,
+    colorScheme = "inherit",
+    href,
+    icon,
+    label,
+    onClickRemoveLabel,
+    ...otherProps
+  }, ref) => {
+    const hasIcon = isNotNil25(icon);
+    const labelProps = isNotNil25(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ jsxs40(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ jsx258(
+          /* @__PURE__ */ jsxs40(
             TagLabel,
             {
               ...labelProps,
               $colorScheme: colorScheme,
-              children: label
+              children: [
+                hasIcon ? icon : null,
+                label
+              ]
             }
           ),
-          /* @__PURE__ */ jsx258(
+          /* @__PURE__ */ jsx259(
             RemoveButton,
             {
               colorScheme,
@@ -11349,26 +11473,26 @@ var Tag = forwardRef26(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled67, { css as css32 } from "styled-components";
-import { isNotNil as isNotNil25 } from "@wistia/type-guards";
-import { jsx as jsx259, jsxs as jsxs40 } from "react/jsx-runtime";
+import styled68, { css as css35 } from "styled-components";
+import { isNotNil as isNotNil26 } from "@wistia/type-guards";
+import { jsx as jsx260, jsxs as jsxs41 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx259(
+    return /* @__PURE__ */ jsx260(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ jsx259("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__ */ jsx260("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__ */ jsx259(
+  return /* @__PURE__ */ jsx260(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ jsx259("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__ */ jsx260("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" })
     }
   );
 };
@@ -11376,12 +11500,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx259(
+  return /* @__PURE__ */ jsx260(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ jsx259("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__ */ jsx260("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" })
     }
   );
 };
@@ -11391,7 +11515,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled67.svg`
+var WistiaLogoComponent = styled68.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -11407,12 +11531,12 @@ var WistiaLogoComponent = styled67.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css32`
+      return css35`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css32`
+    return css35`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -11449,7 +11573,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs40(
+  const Logo = /* @__PURE__ */ jsxs41(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -11462,14 +11586,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx259("title", { children: title }),
-        isNotNil25(description) ? /* @__PURE__ */ jsx259("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx260("title", { children: title }),
+        isNotNil26(description) ? /* @__PURE__ */ jsx260("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx259("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx260("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 export {