@wistia/ui 0.6.20 → 0.6.21

package/dist/index.cjs

@@ -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.
  *
@@ -7530,211 +7530,104 @@ var Card = ({
 Card.displayName = "Card";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react19 = require("react");
-var import_react_checkbox = require("@radix-ui/react-checkbox");
-var import_styled_components34 = __toESM(require("styled-components"));
-var import_type_guards20 = require("@wistia/type-guards");
+var import_react18 = require("react");
+var import_styled_components33 = __toESM(require("styled-components"));
+var import_type_guards21 = require("@wistia/type-guards");
 
-// src/components/Label/Label.tsx
+// src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_styled_components32 = __toESM(require("styled-components"));
+var import_type_guards20 = require("@wistia/type-guards");
 
-// src/components/Heading/Heading.tsx
-var import_react18 = require("react");
+// src/private/components/FormControlLabel/FormControlLabelDescription.tsx
 var import_styled_components31 = __toESM(require("styled-components"));
+var import_type_guards19 = require("@wistia/type-guards");
 var import_jsx_runtime199 = require("react/jsx-runtime");
-var heroStyle = import_styled_components31.css`
-  --font-family: var(--wui-typography-heading-hero-family);
-  --font-size: var(--wui-typography-heading-hero-size);
-  --font-weight: var(--wui-typography-heading-hero-weight);
-  --line-height: var(--wui-typography-heading-hero-line-height);
-`;
-var heading1TextStyle = import_styled_components31.css`
-  --font-family: var(--wui-typography-heading-1-family);
-  --font-size: var(--wui-typography-heading-1-size);
-  --font-weight: var(--wui-typography-heading-1-weight);
-  --line-height: var(--wui-typography-heading-1-line-height);
-`;
-var heading2TextStyle = import_styled_components31.css`
-  --font-family: var(--wui-typography-heading-2-family);
-  --font-size: var(--wui-typography-heading-2-size);
-  --font-weight: var(--wui-typography-heading-2-weight);
-  --line-height: var(--wui-typography-heading-2-line-height);
-`;
-var heading3TextStyle = import_styled_components31.css`
-  --font-family: var(--wui-typography-heading-3-family);
-  --font-size: var(--wui-typography-heading-3-size);
-  --font-weight: var(--wui-typography-heading-3-weight);
-  --line-height: var(--wui-typography-heading-3-line-height);
-`;
-var heading4TextStyle = import_styled_components31.css`
-  --font-family: var(--wui-typography-heading-4-family);
-  --font-size: var(--wui-typography-heading-4-size);
-  --font-weight: var(--wui-typography-heading-4-weight);
-  --line-height: var(--wui-typography-heading-4-line-height);
-`;
-var heading5TextStyle = import_styled_components31.css`
-  --font-family: var(--wui-typography-heading-5-family);
-  --font-size: var(--wui-typography-heading-5-size);
-  --font-weight: var(--wui-typography-heading-5-weight);
-  --line-height: var(--wui-typography-heading-5-line-height);
-`;
-var heading6TextStyle = import_styled_components31.css`
-  --font-family: var(--wui-typography-heading-6-family);
-  --font-size: var(--wui-typography-heading-6-size);
-  --font-weight: var(--wui-typography-heading-6-weight);
-  --line-height: var(--wui-typography-heading-6-line-height);
+var disabledStyle = import_styled_components31.css`
+  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 = import_styled_components31.default.div`
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight);
-  line-height: var(--line-height);
-  color: var(--wui-color-text);
-  ${({ $variant }) => variantStyleMap[$variant]}
-  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components31.css`
-      display: inline-block;
-    `}
-  ${({ $disabled }) => $disabled && import_styled_components31.css`
-      color: var(--wui-color-text-disabled);
-    `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components31.css`
-      user-select: none;
-    `}
-  ${({ $align }) => import_styled_components31.css`
-    text-align: ${$align};
-  `}
-  margin: 0;
+var StyledFormControlLabelDescription = import_styled_components31.default.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 = (0, import_react18.forwardRef)(
-  ({
-    align = "left",
-    colorScheme = "inherit",
-    disabled = false,
-    ellipsis = false,
-    inline = false,
-    preventUserSelect = false,
-    variant = "heading1",
-    renderAs,
-    ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
-    StyledHeading,
+var FormControlLabelDescription = ({
+  children,
+  disabled = false,
+  ...props
+}) => {
+  if ((0, import_type_guards19.isNil)(children)) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+    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
+// src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_jsx_runtime200 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components32.css`
-  &::after {
-    color: var(--wui-color-text-error);
-    display: inline;
-    padding-left: var(--wui-space-01);
-    content: '*';
-  }
-`;
-var disabledStyle = import_styled_components32.css`
+var disabledStyle2 = import_styled_components32.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel2 = (0, import_styled_components32.default)(Heading).attrs({
-  variant: "heading6",
-  renderAs: "label"
-})`
-  display: block;
+var StyledLabelWrapper = import_styled_components32.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+var StyledFormControlLabel = import_styled_components32.default.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__ */ (0, import_jsx_runtime200.jsx)(
-  StyledLabel2,
-  {
-    ...otherProps,
-    $disabled: disabled,
-    $required: required,
-    $screenReaderOnly: screenReaderOnly,
-    htmlFor,
-    children
-  }
-);
-Label.displayName = "Label";
-
-// src/components/Label/LabelDescription.tsx
-var import_styled_components33 = __toESM(require("styled-components"));
-var import_type_guards19 = require("@wistia/type-guards");
-var import_jsx_runtime201 = require("react/jsx-runtime");
-var StyledLabelDescription = import_styled_components33.default.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 ((0, import_type_guards19.isNil)(children)) {
+  if ((0, import_type_guards20.isNil)(label)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+    StyledFormControlLabel,
+    {
+      $disabled: disabled,
+      htmlFor,
+      ...props,
+      children: [
+        (0, import_type_guards20.isNotNil)(controlSlot) ? controlSlot : null,
+        /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(StyledLabelWrapper, { children: [
+          label,
+          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(FormControlLabelDescription, { children: description })
+        ] })
+      ]
+    }
+  );
 };
-LabelDescription.displayName = "LabelDescription";
+FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime202 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+var import_jsx_runtime201 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -7742,137 +7635,147 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
-        fill: "white"
+        fill: "currentColor"
       }
     )
   }
 );
-var StyledCheckboxWrapper = import_styled_components34.default.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 = import_styled_components33.css`
+  cursor: not-allowed;
+  opacity: 0.5;
 `;
-var StyledCheckboxRoot = (0, import_styled_components34.default)(import_react_checkbox.Root)`
-  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 = import_styled_components33.css`
+  width: 14px;
+  height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+`;
+var inputSizeMedium = import_styled_components33.css`
+  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 = import_styled_components33.css`
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+`;
+var StyledCheckboxWrapper = import_styled_components33.default.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 = import_styled_components33.default.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 = import_styled_components33.default.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 = (0, import_styled_components34.default)(import_react_checkbox.Indicator)`
-  display: flex;
-`;
-var StyledLabelWrapper = import_styled_components34.default.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: var(--wui-space-02);
-`;
-var Checkbox = (0, import_react19.forwardRef)(
+var Checkbox = (0, import_react18.forwardRef)(
   ({
     checked,
     disabled = false,
-    forceState,
     id,
     label,
     description,
     name,
     onChange,
+    size = "md",
+    value,
     required = false,
-    value = "false",
-    ...otherProps
+    ...props
   }, ref) => {
-    const generatedId = (0, import_react19.useId)();
-    const computedId = (0, import_type_guards20.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-group-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(StyledCheckboxWrapper, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-        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 generatedId = (0, import_react18.useId)();
+    const computedId = (0, import_type_guards21.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
+      StyledCheckboxWrapper,
+      {
+        ref,
+        disabled,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+            StyledHiddenCheckboxInput,
+            {
+              ...props,
+              ref,
+              checked,
+              disabled,
+              id: computedId,
+              name,
+              onChange,
+              required,
+              type: "checkbox",
+              value
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+            FormControlLabel,
+            {
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+                StyledCheckboxInput,
+                {
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(CheckIcon, {})
                 }
-              };
-              onChange(syntheticEvent);
+              ),
+              description,
+              htmlFor: computedId,
+              label
             }
-          },
-          required,
-          value,
-          ...otherProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(StyledCheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(CheckIcon, {}) })
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(StyledLabelWrapper, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-          Label,
-          {
-            disabled,
-            htmlFor: computedId,
-            required,
-            children: label
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(LabelDescription, { children: description })
-      ] })
-    ] });
+          )
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-var import_react20 = require("react");
+var import_react19 = require("react");
 var ClickRegion = ({ children, targetRef }) => {
-  (0, import_react20.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
       targetRef.current.setAttribute("data-click-region-target-link", "");
     } else if (targetRef.current && targetRef.current.tagName === "BUTTON") {
@@ -7880,7 +7783,7 @@ var ClickRegion = ({ children, targetRef }) => {
     } else {
     }
   }, [targetRef]);
-  const handleClick = (0, import_react20.useCallback)(
+  const handleClick = (0, import_react19.useCallback)(
     (event) => {
       const node = targetRef.current;
       if (event.target instanceof HTMLAnchorElement && !event.target.hasAttribute("data-click-region-target-link") || event.target instanceof HTMLButtonElement && !event.target.hasAttribute("data-click-region-target-button")) {
@@ -7897,7 +7800,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return (0, import_react20.cloneElement)(import_react20.Children.only(children), {
+  return (0, import_react19.cloneElement)(import_react19.Children.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -7906,10 +7809,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
-var import_type_guards21 = require("@wistia/type-guards");
-var import_styled_components35 = __toESM(require("styled-components"));
-var import_jsx_runtime203 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components35.default)(import_react_collapsible.Root)`
+var import_type_guards22 = require("@wistia/type-guards");
+var import_styled_components34 = __toESM(require("styled-components"));
+var import_jsx_runtime202 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components34.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -7923,34 +7826,34 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...(0, import_type_guards21.isNotNil)(onOpenChange) && (0, import_type_guards21.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards22.isNotNil)(onOpenChange) && (0, import_type_guards22.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
-var import_react21 = require("react");
+var import_react20 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_jsx_runtime204 = require("react/jsx-runtime");
+var import_jsx_runtime203 = require("react/jsx-runtime");
 var CollapsibleTrigger = ({ children }) => {
-  import_react21.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
+  import_react20.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components36 = __toESM(require("styled-components"));
+var import_styled_components35 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
-var import_type_guards22 = require("@wistia/type-guards");
-var import_jsx_runtime205 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components36.default.div.attrs({ "data-wui-collapsible-content": true })`
+var import_type_guards23 = require("@wistia/type-guards");
+var import_jsx_runtime204 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components35.default.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if ((0, import_type_guards22.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(ClampedContent, { $clamp: clamp, children });
+  if ((0, import_type_guards23.isNotUndefined)(clamp)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(import_react_collapsible3.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(import_jsx_runtime205.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_collapsible3.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(import_jsx_runtime204.Fragment, { children: [
     children,
     " "
   ] }) });
@@ -7958,7 +7861,127 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/DataCards/DataCard.tsx
 var import_styled_components37 = __toESM(require("styled-components"));
-var import_type_guards23 = require("@wistia/type-guards");
+var import_type_guards24 = require("@wistia/type-guards");
+
+// src/components/Heading/Heading.tsx
+var import_react21 = require("react");
+var import_styled_components36 = __toESM(require("styled-components"));
+var import_jsx_runtime205 = require("react/jsx-runtime");
+var heroStyle = import_styled_components36.css`
+  --font-family: var(--wui-typography-heading-hero-family);
+  --font-size: var(--wui-typography-heading-hero-size);
+  --font-weight: var(--wui-typography-heading-hero-weight);
+  --line-height: var(--wui-typography-heading-hero-line-height);
+`;
+var heading1TextStyle = import_styled_components36.css`
+  --font-family: var(--wui-typography-heading-1-family);
+  --font-size: var(--wui-typography-heading-1-size);
+  --font-weight: var(--wui-typography-heading-1-weight);
+  --line-height: var(--wui-typography-heading-1-line-height);
+`;
+var heading2TextStyle = import_styled_components36.css`
+  --font-family: var(--wui-typography-heading-2-family);
+  --font-size: var(--wui-typography-heading-2-size);
+  --font-weight: var(--wui-typography-heading-2-weight);
+  --line-height: var(--wui-typography-heading-2-line-height);
+`;
+var heading3TextStyle = import_styled_components36.css`
+  --font-family: var(--wui-typography-heading-3-family);
+  --font-size: var(--wui-typography-heading-3-size);
+  --font-weight: var(--wui-typography-heading-3-weight);
+  --line-height: var(--wui-typography-heading-3-line-height);
+`;
+var heading4TextStyle = import_styled_components36.css`
+  --font-family: var(--wui-typography-heading-4-family);
+  --font-size: var(--wui-typography-heading-4-size);
+  --font-weight: var(--wui-typography-heading-4-weight);
+  --line-height: var(--wui-typography-heading-4-line-height);
+`;
+var heading5TextStyle = import_styled_components36.css`
+  --font-family: var(--wui-typography-heading-5-family);
+  --font-size: var(--wui-typography-heading-5-size);
+  --font-weight: var(--wui-typography-heading-5-weight);
+  --line-height: var(--wui-typography-heading-5-line-height);
+`;
+var heading6TextStyle = import_styled_components36.css`
+  --font-family: var(--wui-typography-heading-6-family);
+  --font-size: var(--wui-typography-heading-6-size);
+  --font-weight: var(--wui-typography-heading-6-weight);
+  --line-height: var(--wui-typography-heading-6-line-height);
+`;
+var variantStyleMap = {
+  hero: heroStyle,
+  heading1: heading1TextStyle,
+  heading2: heading2TextStyle,
+  heading3: heading3TextStyle,
+  heading4: heading4TextStyle,
+  heading5: heading5TextStyle,
+  heading6: heading6TextStyle
+};
+var DEFAULT_ELEMENT2 = "h1";
+var StyledHeading = import_styled_components36.default.div`
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: var(--font-weight);
+  line-height: var(--line-height);
+  color: var(--wui-color-text);
+  ${({ $variant }) => variantStyleMap[$variant]}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $inline }) => $inline && import_styled_components36.css`
+      display: inline-block;
+    `}
+  ${({ $disabled }) => $disabled && import_styled_components36.css`
+      color: var(--wui-color-text-disabled);
+    `}
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components36.css`
+      user-select: none;
+    `}
+  ${({ $align }) => import_styled_components36.css`
+    text-align: ${$align};
+  `}
+  margin: 0;
+`;
+var variantElementMap = {
+  hero: DEFAULT_ELEMENT2,
+  heading1: DEFAULT_ELEMENT2,
+  heading2: "h2",
+  heading3: "h3",
+  heading4: "h4",
+  heading5: "h5",
+  heading6: "h6"
+};
+var HeadingComponent = (0, import_react21.forwardRef)(
+  ({
+    align = "left",
+    colorScheme = "inherit",
+    disabled = false,
+    ellipsis = false,
+    inline = false,
+    preventUserSelect = false,
+    variant = "heading1",
+    renderAs,
+    ...otherProps
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
+    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
 var import_jsx_runtime206 = require("react/jsx-runtime");
 var StyledDataCard = import_styled_components37.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
@@ -8000,7 +8023,7 @@ var StyledLoadingValue = (0, import_styled_components37.default)(LoadingBackgrou
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = (0, import_styled_components37.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components37.default)(Heading)`
   grid-area: label;
 `;
 var StyledValue = (0, import_styled_components37.default)(Heading)`
@@ -8032,7 +8055,7 @@ var DataCard = ({
     ...props,
     children: [
       /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
-        StyledLabel3,
+        StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
@@ -8047,8 +8070,8 @@ var DataCard = ({
           children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards23.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards23.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards24.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards24.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -8378,7 +8401,7 @@ var import_react24 = require("react");
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 var import_styled_components42 = __toESM(require("styled-components"));
-var import_type_guards24 = require("@wistia/type-guards");
+var import_type_guards25 = require("@wistia/type-guards");
 var import_jsx_runtime211 = require("react/jsx-runtime");
 var VisuallyHidden = import_styled_components42.default.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = import_styled_components42.default.div({
@@ -8390,7 +8413,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = (0, import_type_guards24.isNotNil)(text) ? text : children;
+  const accessibleText = (0, import_type_guards25.isNotNil)(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -8507,7 +8530,7 @@ Tooltip.displayName = "Tooltip";
 // src/components/Input/Input.tsx
 var import_react23 = require("react");
 var import_styled_components44 = __toESM(require("styled-components"));
-var import_type_guards25 = require("@wistia/type-guards");
+var import_type_guards26 = require("@wistia/type-guards");
 var import_jsx_runtime213 = require("react/jsx-runtime");
 var inputStyles = import_styled_components44.css`
   --wui-input-color-bg: var(--wui-color-bg-surface);
@@ -8607,27 +8630,27 @@ var Input = (0, import_react23.forwardRef)(
     const internalRef = (0, import_react23.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      (0, import_type_guards25.isNotNil)(externalRef) && (0, import_type_guards25.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
+      (0, import_type_guards26.isNotNil)(externalRef) && (0, import_type_guards26.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards25.isNil)(leftIcon) && type === "search") {
+    if ((0, import_type_guards26.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards25.isNotNil)(leftIconToDisplay)) {
+    if ((0, import_type_guards26.isNotNil)(leftIconToDisplay)) {
       leftIconToDisplay = (0, import_react23.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards25.isNotNil)(rightIconToDisplay)) {
+    if ((0, import_type_guards26.isNotNil)(rightIconToDisplay)) {
       rightIconToDisplay = (0, import_react23.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus = (event) => {
-      if ((0, import_type_guards25.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards26.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -8808,7 +8831,7 @@ var EditableHeading = ({
 // src/components/Form/Form.tsx
 var import_react26 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
-var import_type_guards26 = require("@wistia/type-guards");
+var import_type_guards27 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react25 = require("react");
@@ -8874,7 +8897,7 @@ var FormComponent = ({
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards26.isUndefined)(validate)) {
+    if ((0, import_type_guards27.isUndefined)(validate)) {
       return {};
     }
     return validate(nextData);
@@ -8884,7 +8907,7 @@ var FormComponent = ({
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if ((0, import_type_guards26.isNotUndefined)(validate)) {
+    if ((0, import_type_guards27.isNotUndefined)(validate)) {
       handleValidate(formData);
     }
   };
@@ -8981,7 +9004,7 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 var import_react28 = require("react");
-var import_type_guards27 = require("@wistia/type-guards");
+var import_type_guards28 = require("@wistia/type-guards");
 var import_jsx_runtime217 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
@@ -8995,8 +9018,8 @@ var FormErrorSummary = ({ description }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime217.jsxs)("div", { ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards27.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards27.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime217.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards28.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards28.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
         ErrorItem,
         {
           error: err,
@@ -9019,32 +9042,92 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 var import_react31 = require("react");
-var import_styled_components49 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
+var import_styled_components50 = __toESM(require("styled-components"));
+var import_type_guards29 = require("@wistia/type-guards");
+
+// src/components/Label/Label.tsx
+var import_styled_components48 = __toESM(require("styled-components"));
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components48.css`
+  &::after {
+    color: var(--wui-color-text-error);
+    display: inline;
+    padding-left: var(--wui-space-01);
+    content: '*';
+  }
+`;
+var disabledStyle4 = import_styled_components48.css`
+  color: var(--wui-color-text-disabled);
+`;
+var StyledLabel3 = import_styled_components48.default.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__ */ (0, import_jsx_runtime218.jsx)(
+    StyledLabel3,
+    {
+      ...otherProps,
+      $disabled: disabled,
+      $required: required,
+      $screenReaderOnly: screenReaderOnly,
+      htmlFor,
+      children
+    }
+  );
+};
+Label.displayName = "Label";
 
 // src/components/FormGroup/CheckboxGroup.tsx
 var import_react30 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
+var import_styled_components49 = __toESM(require("styled-components"));
 var import_react29 = require("react");
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components48.default.fieldset`
+var import_jsx_runtime219 = require("react/jsx-runtime");
+var StyledFieldset = import_styled_components49.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components48.default.legend`
+var StyledLegend = import_styled_components49.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
   const ref = (0, import_react29.useRef)();
-  return /* @__PURE__ */ (0, import_jsx_runtime218.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime219.jsxs)(
     Stack,
     {
       ...props,
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime218.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(
           Heading,
           {
             renderAs: StyledLegend,
@@ -9060,7 +9143,7 @@ var FormGroup = ({ children, label, ...props }) => {
 FormGroup.displayName = "FormGroup";
 
 // src/components/FormGroup/CheckboxGroup.tsx
-var import_jsx_runtime219 = require("react/jsx-runtime");
+var import_jsx_runtime220 = require("react/jsx-runtime");
 var CheckboxGroupContext = (0, import_react30.createContext)(null);
 var CheckboxGroup = ({
   children,
@@ -9075,13 +9158,13 @@ var CheckboxGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(FormGroup, { ...props, children }) });
 };
 CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
-var import_jsx_runtime220 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components49.default.div`
+var import_jsx_runtime221 = require("react/jsx-runtime");
+var StyledFormField = import_styled_components50.default.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);
@@ -9105,7 +9188,7 @@ var StyledFormField = import_styled_components49.default.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components49.default.ul`
+var StyledErrorList = import_styled_components50.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9114,8 +9197,8 @@ var StyledErrorList = import_styled_components49.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = (0, import_type_guards28.isArray)(errors);
-  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  const isMultipleErrors = (0, import_type_guards29.isArray)(errors);
+  return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -9125,7 +9208,7 @@ var ErrorMessages = ({ errors, id }) => {
       children: error
     },
     `${id}-${index}`
-  )) }) : /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+  )) }) : /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
     Text,
     {
       colorScheme: "error",
@@ -9159,19 +9242,19 @@ var FormField = ({
     label: isIntegratedLabel ? label : void 0,
     ...props
   };
-  if ((0, import_type_guards28.isUndefined)(value) && (0, import_type_guards28.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards29.isUndefined)(value) && (0, import_type_guards29.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards28.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards28.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards29.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards29.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards28.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards29.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards28.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards29.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -9179,22 +9262,22 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards28.isNotNil)(error),
-      "aria-describedby": (0, import_type_guards28.isNotNil)(error) ? `${computedId}-error` : void 0
+      "aria-invalid": (0, import_type_guards29.isNotNil)(error),
+      "aria-describedby": (0, import_type_guards29.isNotNil)(error) ? `${computedId}-error` : void 0
     };
   }
   import_react31.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(
     StyledFormField,
     {
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Label, { htmlFor: computedId, children: label }),
+        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(Label, { htmlFor: computedId, children: label }),
         (0, import_react31.cloneElement)(children, childProps),
-        (0, import_type_guards28.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime220.jsxs)(import_jsx_runtime220.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime220.jsx)("div", {}),
-          /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
+        (0, import_type_guards29.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime221.jsxs)(import_jsx_runtime221.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime221.jsx)("div", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(
             ErrorMessages,
             {
               errors: computedError,
@@ -9210,7 +9293,7 @@ FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
 var import_react32 = require("react");
-var import_jsx_runtime221 = require("react/jsx-runtime");
+var import_jsx_runtime222 = require("react/jsx-runtime");
 var RadioGroupContext = (0, import_react32.createContext)(null);
 var RadioGroup = ({
   children,
@@ -9225,15 +9308,15 @@ var RadioGroup = ({
       onChange
     };
   }, [name, onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(FormGroup, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(FormGroup, { ...props, children }) });
 };
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 var import_react33 = require("react");
-var import_styled_components50 = __toESM(require("styled-components"));
-var import_jsx_runtime222 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components50.default)(Button)`
+var import_styled_components51 = __toESM(require("styled-components"));
+var import_jsx_runtime223 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components51.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9250,7 +9333,7 @@ var StyledButton2 = (0, import_styled_components50.default)(Button)`
 var IconButton = (0, import_react33.forwardRef)(
   ({ children, label, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    return /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
       StyledButton2,
       {
         ...props,
@@ -9268,9 +9351,9 @@ var IconButton = (0, import_react33.forwardRef)(
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-var import_styled_components51 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
-var import_jsx_runtime223 = require("react/jsx-runtime");
+var import_styled_components52 = __toESM(require("styled-components"));
+var import_type_guards30 = require("@wistia/type-guards");
+var import_jsx_runtime224 = require("react/jsx-runtime");
 var getFillStyle2 = (fillContainer) => {
   if (fillContainer === "horizontal") {
     return "width: 100%;";
@@ -9286,8 +9369,8 @@ var getFillStyle2 = (fillContainer) => {
   }
   return void 0;
 };
-var StyledImage = import_styled_components51.default.img`
-  border-radius: ${({ $borderRadius }) => (0, import_type_guards29.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
+var StyledImage = import_styled_components52.default.img`
+  border-radius: ${({ $borderRadius }) => (0, import_type_guards30.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle2($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
   object-position: ${({ $objPosition }) => $objPosition};
@@ -9301,7 +9384,7 @@ var Image = ({
   loading = "lazy",
   position: objPosition,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
   StyledImage,
   {
     $borderRadius: borderRadius,
@@ -9317,9 +9400,9 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/Menu/Menu.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
+var import_styled_components53 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_type_guards30 = require("@wistia/type-guards");
+var import_type_guards31 = require("@wistia/type-guards");
 var import_react35 = require("react");
 
 // src/components/Menu/MenuContext.tsx
@@ -9328,8 +9411,8 @@ var MenuContext = (0, import_react34.createContext)({ compact: false });
 var useMenuContext = () => (0, import_react34.useContext)(MenuContext);
 
 // src/components/Menu/Menu.tsx
-var import_jsx_runtime224 = require("react/jsx-runtime");
-var open = import_styled_components52.keyframes`
+var import_jsx_runtime225 = require("react/jsx-runtime");
+var open = import_styled_components53.keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -9339,7 +9422,7 @@ var open = import_styled_components52.keyframes`
     transform: scale(1);
   }
 `;
-var close = import_styled_components52.keyframes`
+var close = import_styled_components53.keyframes`
   from {
     opacity: 1;
     transform: scale(1);
@@ -9349,7 +9432,7 @@ var close = import_styled_components52.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = import_styled_components52.css`
+var menuItemCss = import_styled_components53.css`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9360,7 +9443,7 @@ var menuItemCss = import_styled_components52.css`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = import_styled_components52.css`
+var compactMenuItemCss = import_styled_components53.css`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9371,7 +9454,7 @@ var compactMenuItemCss = import_styled_components52.css`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = import_styled_components52.css`
+var menuContentCss = import_styled_components53.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -9413,7 +9496,7 @@ var menuContentCss = import_styled_components52.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = (0, import_styled_components52.default)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components53.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -9431,7 +9514,7 @@ var Menu = ({
 }) => {
   const contextValue = (0, import_react35.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
-    ...(0, import_type_guards30.isNotNil)(onOpenChange) && (0, import_type_guards30.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards31.isNotNil)(onOpenChange) && (0, import_type_guards31.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -9439,24 +9522,24 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime224.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime225.jsxs)(
     import_react_dropdown_menu.DropdownMenu,
     {
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards30.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards31.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
             disabled,
             forceState: isOpen ? "active" : void 0,
-            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(Icon, { type: "caret-down" }),
+            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(Icon, { type: "caret-down" }),
             ...triggerProps,
             children: label
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime224.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
           MenuContent,
           {
             ...props,
@@ -9476,19 +9559,19 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components53 = __toESM(require("styled-components"));
+var import_styled_components54 = __toESM(require("styled-components"));
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime225 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components53.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var import_jsx_runtime226 = require("react/jsx-runtime");
+var StyledMenuLabel = (0, import_styled_components54.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
     StyledMenuLabel,
     {
       asChild: true,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime225.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
         Heading,
         {
           renderAs: "span",
@@ -9504,16 +9587,16 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 var import_react37 = require("react");
-var import_styled_components56 = __toESM(require("styled-components"));
+var import_styled_components57 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards32 = require("@wistia/type-guards");
+var import_type_guards33 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react36 = require("react");
-var import_styled_components54 = __toESM(require("styled-components"));
-var import_type_guards31 = require("@wistia/type-guards");
-var import_jsx_runtime226 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components54.default)(Button)`
+var import_styled_components55 = __toESM(require("styled-components"));
+var import_type_guards32 = require("@wistia/type-guards");
+var import_jsx_runtime227 = require("react/jsx-runtime");
+var StyledButton3 = (0, import_styled_components55.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -9552,7 +9635,7 @@ var StyledButton3 = (0, import_styled_components54.default)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components54.default.div`
+var StyledLeftIconContainer = import_styled_components55.default.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -9563,7 +9646,7 @@ var StyledLeftIconContainer = import_styled_components54.default.div`
     }
   }
 `;
-var StyledRightIconContainer = import_styled_components54.default.div`
+var StyledRightIconContainer = import_styled_components55.default.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -9574,13 +9657,13 @@ var StyledRightIconContainer = import_styled_components54.default.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components54.default.div`
+var StyledLabelAndDescriptionContainer = import_styled_components55.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components54.default.div`
+var StyledBadgeContainer = import_styled_components55.default.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -9589,13 +9672,13 @@ var StyledBadgeContainer = import_styled_components54.default.div`
 var MenuItemButton = (0, import_react36.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if ((0, import_type_guards31.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards32.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    badge = /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(
+    badge = /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
       Icon,
       {
         colorScheme: "purple",
@@ -9607,7 +9690,7 @@ var MenuItemButton = (0, import_react36.forwardRef)(({ children, appearance, com
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime226.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(
     StyledButton3,
     {
       ...props,
@@ -9617,10 +9700,10 @@ var MenuItemButton = (0, import_react36.forwardRef)(({ children, appearance, com
       fullWidth: true,
       unstyled: true,
       children: [
-        props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards31.isNotNil)(badge) || (0, import_type_guards31.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
-        props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime226.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
+        props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledLabelAndDescriptionContainer, { children }),
+        (0, import_type_guards32.isNotNil)(badge) || (0, import_type_guards32.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
   );
@@ -9628,33 +9711,33 @@ var MenuItemButton = (0, import_react36.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components55 = __toESM(require("styled-components"));
-var import_jsx_runtime227 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components55.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components55.default)(Text).attrs({
+var import_styled_components56 = __toESM(require("styled-components"));
+var import_jsx_runtime228 = require("react/jsx-runtime");
+var StyledMenuItemLabel = import_styled_components56.default.span``;
+var StyledMenuItemDescription = (0, import_styled_components56.default)(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
 var MenuItemLabel = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledMenuItemLabel, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(StyledMenuItemLabel, { children });
 };
 var MenuItemDescription = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledMenuItemDescription, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(StyledMenuItemDescription, { children });
 };
 
 // src/components/Menu/SubMenu.tsx
-var import_jsx_runtime228 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components56.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var import_jsx_runtime229 = require("react/jsx-runtime");
+var SubMenuContent = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components56.default.div`
+var StyledMobileSubMenuItems = import_styled_components57.default.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components56.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -9665,12 +9748,12 @@ var StyledSubTrigger = (0, import_styled_components56.default)(import_react_drop
 var SubMenuTrigger = ({ icon, ...props }) => {
   const { isSmAndUp } = useMq();
   const Trigger4 = isSmAndUp ? StyledSubTrigger : import_react_dropdown_menu3.DropdownMenuItem;
-  return /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Trigger4, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Trigger4, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
     MenuItemButton,
     {
       ...props,
       leftIcon: icon,
-      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Icon, { type: "caret-right" })
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Icon, { type: "caret-right" })
     }
   ) });
 };
@@ -9684,14 +9767,14 @@ var SubMenu = ({
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = (0, import_react37.useState)(false);
   const { compact } = useMenuContext();
-  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(SubMenuTrigger, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards32.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(MenuItemDescription, { children: description }) : null
+  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(MenuItemLabel, { children: label }),
+      (0, import_type_guards33.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(SubMenuContent, { $compact: compact, children }) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime228.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(SubMenuContent, { $compact: compact, children }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(
       SubMenuTrigger,
       {
         ...props,
@@ -9700,12 +9783,12 @@ var SubMenu = ({
           setIsExpanded((prev) => !prev);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(MenuItemLabel, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(MenuItemDescription, { children: description })
+          /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(MenuItemDescription, { children: description })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+    /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
 SubMenu.displayName = "SubMenu";
@@ -9713,15 +9796,15 @@ SubMenu.displayName = "SubMenu";
 // src/components/Menu/MenuItem.tsx
 var import_react38 = require("react");
 var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime229 = require("react/jsx-runtime");
+var import_jsx_runtime230 = require("react/jsx-runtime");
 var MenuItem = (0, import_react38.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
       {
         asChild: true,
         onSelect,
-        children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
           MenuItemButton,
           {
             ...props,
@@ -9737,10 +9820,10 @@ MenuItem.displayName = "MenuItem";
 
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime230 = require("react/jsx-runtime");
+var import_jsx_runtime231 = require("react/jsx-runtime");
 var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(MenuLabel, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(MenuLabel, { children: label }),
     children
   ] });
 };
@@ -9748,11 +9831,11 @@ MenuRadioGroup.displayName = "MenuRadioGroup";
 
 // src/components/Menu/RadioMenuItem.tsx
 var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime231 = require("react/jsx-runtime");
+var import_jsx_runtime232 = require("react/jsx-runtime");
 var RadioMenuItem = ({
   onSelect,
   value,
-  indicator = /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+  indicator = /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
     Icon,
     {
       size: "sm",
@@ -9762,17 +9845,17 @@ var RadioMenuItem = ({
   ...props
 }) => {
   const extraProps = onSelect ? { onSelect } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
     import_react_dropdown_menu6.DropdownMenuRadioItem,
     {
       ...extraProps,
       asChild: true,
       value,
-      children: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
         MenuItemButton,
         {
           ...props,
-          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
         }
       )
     }
@@ -9782,9 +9865,9 @@ RadioMenuItem.displayName = "RadioMenuItem";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
-var import_jsx_runtime232 = require("react/jsx-runtime");
-var CheckboxIndicator2 = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
+var import_jsx_runtime233 = require("react/jsx-runtime");
+var CheckboxIndicator = ({ checked, ...props }) => {
+  return checked ? /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
     "svg",
     {
       ...props,
@@ -9794,14 +9877,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
           "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__ */ (0, import_jsx_runtime232.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
           "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",
@@ -9810,7 +9893,7 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
     "svg",
     {
       ...props,
@@ -9820,14 +9903,14 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
       width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
           "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__ */ (0, import_jsx_runtime232.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
           "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",
@@ -9844,18 +9927,18 @@ var CheckboxMenuItem = ({
   onCheckedChange,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
     import_react_dropdown_menu7.DropdownMenuCheckboxItem,
     {
       asChild: true,
       checked,
       onCheckedChange,
       onSelect,
-      children: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(CheckboxIndicator, { checked })
         }
       )
     }
@@ -9865,36 +9948,36 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 var import_react42 = require("react");
-var import_styled_components61 = __toESM(require("styled-components"));
+var import_styled_components62 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_type_guards34 = require("@wistia/type-guards");
+var import_type_guards35 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
-var import_styled_components58 = __toESM(require("styled-components"));
+var import_styled_components59 = __toESM(require("styled-components"));
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 
 // src/components/Modal/ModalCloseButton.tsx
-var import_styled_components57 = __toESM(require("styled-components"));
+var import_styled_components58 = __toESM(require("styled-components"));
 var import_react_dialog = require("@radix-ui/react-dialog");
-var import_jsx_runtime233 = require("react/jsx-runtime");
-var CloseButton = (0, import_styled_components57.default)(import_react_dialog.Close)`
+var import_jsx_runtime234 = require("react/jsx-runtime");
+var CloseButton = (0, import_styled_components58.default)(import_react_dialog.Close)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(CloseButton, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
     IconButton,
     {
       label: "Dismiss modal",
       size: "sm",
       variant: "ghost",
-      children: /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Icon, { type: "close" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Icon, { type: "close" })
     }
   ) });
 };
 
 // src/components/Modal/ModalHeader.tsx
-var import_jsx_runtime234 = require("react/jsx-runtime");
-var Header = import_styled_components58.default.header`
+var import_jsx_runtime235 = require("react/jsx-runtime");
+var Header = import_styled_components59.default.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -9905,7 +9988,7 @@ var Header = import_styled_components58.default.header`
     margin: 0 0 var(--wui-space-03);
   }
 `;
-var Title = (0, import_styled_components58.default)(import_react_dialog2.Title)`
+var Title = (0, import_styled_components59.default)(import_react_dialog2.Title)`
   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);
@@ -9916,21 +9999,21 @@ var ModalHeader = ({
   hideTitle,
   hideCloseButton
 }) => {
-  const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Title, { children: title });
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(Header, { $hideTitle: hideTitle, children: [
+  const TitleComponent = hideTitle ? /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Title, { children: title }) }) : /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Title, { children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
-    hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ModalCloseButton, {})
+    hideCloseButton ? null : /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(ModalCloseButton, {})
   ] });
 };
 
 // src/components/Modal/ModalContent.tsx
 var import_react40 = require("react");
-var import_styled_components59 = __toESM(require("styled-components"));
+var import_styled_components60 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react39 = require("react");
-var import_type_guards33 = require("@wistia/type-guards");
+var import_type_guards34 = require("@wistia/type-guards");
 var useFocusRestore = () => {
   const previouslyFocusedRef = (0, import_react39.useRef)(null);
   (0, import_react39.useEffect)(() => {
@@ -9938,7 +10021,7 @@ var useFocusRestore = () => {
   }, []);
   (0, import_react39.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards33.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards34.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -9948,8 +10031,8 @@ var useFocusRestore = () => {
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_jsx_runtime235 = require("react/jsx-runtime");
-var StyledModalContent = (0, import_styled_components59.default)(import_react_dialog3.Content)`
+var import_jsx_runtime236 = require("react/jsx-runtime");
+var StyledModalContent = (0, import_styled_components60.default)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -9993,7 +10076,7 @@ var StyledModalContent = (0, import_styled_components59.default)(import_react_di
 var ModalContent = (0, import_react40.forwardRef)(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
-    return /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
       StyledModalContent,
       {
         ref,
@@ -10009,8 +10092,8 @@ var ModalContent = (0, import_react40.forwardRef)(
 
 // src/private/components/Backdrop/Backdrop.tsx
 var import_react41 = require("react");
-var import_styled_components60 = __toESM(require("styled-components"));
-var import_jsx_runtime236 = require("react/jsx-runtime");
+var import_styled_components61 = __toESM(require("styled-components"));
+var import_jsx_runtime237 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
   stretch: "normal",
@@ -10023,7 +10106,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = import_styled_components60.default.div`
+var BackdropComponent = import_styled_components61.default.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -10047,7 +10130,7 @@ var BackdropComponent = import_styled_components60.default.div`
   }
 `;
 var Backdrop = (0, import_react41.forwardRef)(
-  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
+  ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
     BackdropComponent,
     {
       ref,
@@ -10061,9 +10144,9 @@ var Backdrop = (0, import_react41.forwardRef)(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime237 = require("react/jsx-runtime");
+var import_jsx_runtime238 = require("react/jsx-runtime");
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = import_styled_components61.default.div`
+var ModalBody = import_styled_components62.default.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -10081,24 +10164,24 @@ var Modal = (0, import_react42.forwardRef)(
     width = DEFAULT_MODAL_WIDTH,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards34.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards35.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(import_react_dialog4.Portal, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Backdrop, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_react_dialog4.Portal, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Backdrop, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
             ModalContent,
             {
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards34.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards35.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -10108,8 +10191,8 @@ var Modal = (0, import_react42.forwardRef)(
               width,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ModalBody, { children }),
-                /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ModalBody, { children }),
+                /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
                   ModalHeader,
                   {
                     hideCloseButton,
@@ -10129,18 +10212,18 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 var import_react_popover = require("@radix-ui/react-popover");
-var import_styled_components62 = __toESM(require("styled-components"));
+var import_styled_components63 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
-var import_type_guards35 = require("@wistia/type-guards");
+var import_type_guards36 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards35.isNotNil)(onOpenChange) && (0, import_type_guards35.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards36.isNotNil)(onOpenChange) && (0, import_type_guards36.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/Popover.tsx
-var import_jsx_runtime238 = require("react/jsx-runtime");
-var StyledContent2 = (0, import_styled_components62.default)(import_react_popover.Content)`
-  ${({ $unstyled }) => !$unstyled && import_styled_components62.css`
+var import_jsx_runtime239 = require("react/jsx-runtime");
+var StyledContent2 = (0, import_styled_components63.default)(import_react_popover.Content)`
+  ${({ $unstyled }) => !$unstyled && import_styled_components63.css`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
       max-width: 320px;
@@ -10164,25 +10247,25 @@ var Popover = ({
   unstyled = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_popover.Trigger, { asChild: true, children: trigger }),
-    /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(import_react_popover.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(
       StyledContent2,
       {
         sideOffset: 8,
         ...props,
         $unstyled: unstyled,
         children: [
-          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
+          !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
             IconButton,
             {
               "data-wui-popover-close": true,
               label: "Close",
               variant: "ghost",
-              children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Icon, { type: "close" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(Icon, { type: "close" })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)("div", { children })
+          /* @__PURE__ */ (0, import_jsx_runtime239.jsx)("div", { children })
         ]
       }
     ) })
@@ -10191,11 +10274,11 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_styled_components63 = __toESM(require("styled-components"));
+var import_styled_components64 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
-var import_type_guards36 = require("@wistia/type-guards");
-var import_jsx_runtime239 = require("react/jsx-runtime");
-var ProgressBarWrapper = import_styled_components63.default.div`
+var import_type_guards37 = require("@wistia/type-guards");
+var import_jsx_runtime240 = require("react/jsx-runtime");
+var ProgressBarWrapper = import_styled_components64.default.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
   --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
@@ -10211,7 +10294,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = import_styled_components63.default.div`
+var ProgressBarLabel = import_styled_components64.default.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -10219,7 +10302,7 @@ var ProgressBarLabel = import_styled_components63.default.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = (0, import_styled_components63.default)(import_react_progress.Indicator)`
+var StyledProgressIndicator = (0, import_styled_components64.default)(import_react_progress.Indicator)`
   background-color: var(--progress-bar-indicator-color);
   width: 100%;
   height: 100%;
@@ -10228,7 +10311,7 @@ var StyledProgressIndicator = (0, import_styled_components63.default)(import_rea
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = (0, import_styled_components63.default)(import_react_progress.Root)`
+var StyledProgressBar = (0, import_styled_components64.default)(import_react_progress.Root)`
   position: relative;
   overflow: hidden;
   background: var(--progress-bar-background-color);
@@ -10247,15 +10330,15 @@ var ProgressBar = ({
   labelRight,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime239.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards36.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(ProgressBarWrapper, { children: [
+    (0, import_type_guards37.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
       StyledProgressBar,
       {
         max,
         value: progress,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
           StyledProgressIndicator,
           {
             $max: max,
@@ -10264,85 +10347,102 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards36.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime239.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards37.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 var import_react43 = require("react");
-var import_styled_components64 = __toESM(require("styled-components"));
-var import_type_guards37 = require("@wistia/type-guards");
-var import_jsx_runtime240 = require("react/jsx-runtime");
-var StyledLabelWrapper2 = import_styled_components64.default.div`
-  display: flex;
-  flex-direction: column;
-  padding-left: var(--wui-space-02);
+var import_styled_components65 = __toESM(require("styled-components"));
+var import_type_guards38 = require("@wistia/type-guards");
+var import_jsx_runtime241 = require("react/jsx-runtime");
+var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+  "svg",
+  {
+    fill: "inherit",
+    height: "12",
+    viewBox: "0 0 12 12",
+    width: "12",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+      "circle",
+      {
+        cx: "6",
+        cy: "6",
+        fill: "currentColor",
+        r: "4"
+      }
+    )
+  }
+);
+var StyledHiddenRadioInput = import_styled_components65.default.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 = import_styled_components64.default.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 = import_styled_components65.css`
   width: 14px;
-  min-width: 14px;
   height: 14px;
+  min-width: 14px;
+  min-height: 14px;
+`;
+var inputSizeMedium2 = import_styled_components65.css`
+  width: 16px;
+  height: 16px;
+  min-width: 16px;
+  min-height: 16px;
+`;
+var inputSizeLarge2 = import_styled_components65.css`
+  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 = import_styled_components65.default.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 = import_styled_components64.css`
+var disabledStyle5 = import_styled_components65.css`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorStyle = import_styled_components64.css`
-  /* TODO Lamp to design error state */
-  &:hover,
-  &:focus,
-  &:active {
-    border-color: transparent !important;
-  }
-`;
-var defaultHoverStyle = import_styled_components64.css`
-  /* TODO Lamp to design hover state */
-  cursor: pointer;
-`;
-var StyledRadioWrapper = import_styled_components64.default.div`
-  align-items: baseline;
-  border: 1px solid transparent;
-  border-radius: 4px;
+var StyledRadioWrapper = import_styled_components65.default.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 = (0, import_react43.forwardRef)(
   ({
@@ -10353,45 +10453,50 @@ var Radio = (0, import_react43.forwardRef)(
     description,
     name,
     onChange,
-    required = false,
+    size = "md",
     value = "false",
-    ...otherProps
+    required = false,
+    ...props
   }, ref) => {
     const generatedId = (0, import_react43.useId)();
-    const computedId = (0, import_type_guards37.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(
+    const computedId = (0, import_type_guards38.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(
       StyledRadioWrapper,
       {
-        "aria-invalid": otherProps["aria-invalid"],
-        disabled,
+        $disabled: disabled,
+        "aria-invalid": props["aria-invalid"],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
-            StyledRadio,
+          /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+            StyledHiddenRadioInput,
             {
+              ...props,
               ref,
-              "aria-checked": checked,
               checked,
               disabled,
               id: computedId,
               name,
               onChange,
+              required,
               type: "radio",
-              value,
-              ...otherProps
+              value
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime240.jsxs)(StyledLabelWrapper2, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(
-              Label,
-              {
-                disabled,
-                htmlFor: computedId,
-                required,
-                children: label
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime240.jsx)(LabelDescription, { children: description })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+            FormControlLabel,
+            {
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
+                StyledRadioInput,
+                {
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(RadioIcon, {})
+                }
+              ),
+              description,
+              htmlFor: computedId,
+              label
+            }
+          )
         ]
       }
     );
@@ -10401,13 +10506,13 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react47 = require("react");
-var import_styled_components66 = __toESM(require("styled-components"));
+var import_styled_components67 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
-var import_type_guards38 = require("@wistia/type-guards");
+var import_type_guards39 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemMeasurements.tsx
 var import_react44 = require("react");
-var import_jsx_runtime241 = require("react/jsx-runtime");
+var import_jsx_runtime242 = require("react/jsx-runtime");
 var SelectedItemMeasurementsContext = (0, import_react44.createContext)(
   null
 );
@@ -10422,7 +10527,7 @@ var SelectedItemMeasurementsProvider = ({
     }),
     [selectedItemMeasurements]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(SelectedItemMeasurementsContext.Provider, { value: contextValue, children });
 };
 var useSelectedItemMeasurements = () => {
   const context = (0, import_react44.useContext)(SelectedItemMeasurementsContext);
@@ -10436,7 +10541,7 @@ var useSelectedItemMeasurements = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_react46 = require("react");
-var import_styled_components65 = __toESM(require("styled-components"));
+var import_styled_components66 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 var import_react45 = require("react");
@@ -10451,8 +10556,8 @@ var useSegmentedControlValue = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-var import_jsx_runtime242 = require("react/jsx-runtime");
-var SelectedItemIndicatorDiv = import_styled_components65.default.div`
+var import_jsx_runtime243 = require("react/jsx-runtime");
+var SelectedItemIndicatorDiv = import_styled_components66.default.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -10478,7 +10583,7 @@ var SelectedItemIndicator = () => {
   if (!selectedValue) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime242.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
     SelectedItemIndicatorDiv,
     {
       style: {
@@ -10491,8 +10596,8 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime243 = require("react/jsx-runtime");
-var segmentedControlStyles = import_styled_components66.css`
+var import_jsx_runtime244 = require("react/jsx-runtime");
+var segmentedControlStyles = import_styled_components67.css`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -10502,7 +10607,7 @@ var segmentedControlStyles = import_styled_components66.css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = (0, import_styled_components66.default)(import_react_toggle_group.Root)`
+var StyledSegmentedControl = (0, import_styled_components67.default)(import_react_toggle_group.Root)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = (0, import_react47.forwardRef)(
@@ -10514,10 +10619,10 @@ var SegmentedControl = (0, import_react47.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards38.isNil)(children)) {
+    if ((0, import_type_guards39.isNil)(children)) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
       StyledSegmentedControl,
       {
         ref,
@@ -10529,8 +10634,8 @@ var SegmentedControl = (0, import_react47.forwardRef)(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime243.jsxs)(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime243.jsx)(SelectedItemIndicator, {}),
+        children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(SelectedItemIndicator, {}),
           children
         ] }) })
       }
@@ -10541,27 +10646,27 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react48 = require("react");
-var import_styled_components67 = __toESM(require("styled-components"));
+var import_styled_components68 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
-var import_type_guards40 = require("@wistia/type-guards");
+var import_type_guards41 = require("@wistia/type-guards");
 
 // src/private/helpers/mergeRefs/mergeRefs.ts
-var import_type_guards39 = require("@wistia/type-guards");
+var import_type_guards40 = require("@wistia/type-guards");
 var mergeRefs = (refs) => (value) => {
   refs.forEach((ref) => {
-    if ((0, import_type_guards39.isFunction)(ref)) {
+    if ((0, import_type_guards40.isFunction)(ref)) {
       ref(value);
       return;
     }
-    if ((0, import_type_guards39.isNotNil)(ref)) {
+    if ((0, import_type_guards40.isNotNil)(ref)) {
       ref.current = value;
     }
   });
 };
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
-var import_jsx_runtime244 = require("react/jsx-runtime");
-var segmentedControlItemStyles = import_styled_components67.css`
+var import_jsx_runtime245 = require("react/jsx-runtime");
+var segmentedControlItemStyles = import_styled_components68.css`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -10620,7 +10725,7 @@ var segmentedControlItemStyles = import_styled_components67.css`
     }
   }
 `;
-var StyledSegmentedControlItem = (0, import_styled_components67.default)(import_react_toggle_group2.Item)`
+var StyledSegmentedControlItem = (0, import_styled_components68.default)(import_react_toggle_group2.Item)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = (0, import_react48.forwardRef)(
@@ -10661,12 +10766,12 @@ var SegmentedControlItem = (0, import_react48.forwardRef)(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards40.isNotNil)(label),
-        "aria-label": (0, import_type_guards40.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards41.isNotNil)(label),
+        "aria-label": (0, import_type_guards41.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -10683,9 +10788,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
 var import_react49 = require("react");
-var import_styled_components68 = __toESM(require("styled-components"));
-var import_jsx_runtime245 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components68.default)(import_react_select.Trigger)`
+var import_styled_components69 = __toESM(require("styled-components"));
+var import_jsx_runtime246 = require("react/jsx-runtime");
+var StyledTrigger = (0, import_styled_components69.default)(import_react_select.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --wui-select-color-bg: var(--wui-color-bg-surface);
   --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
@@ -10733,7 +10838,7 @@ var StyledTrigger = (0, import_styled_components68.default)(import_react_select.
     background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-var StyledContent3 = (0, import_styled_components68.default)(import_react_select.Content)`
+var StyledContent3 = (0, import_styled_components69.default)(import_react_select.Content)`
   --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);
@@ -10761,13 +10866,13 @@ var Select = (0, import_react49.forwardRef)(
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
       import_react_select.Root,
       {
         ...props,
         onValueChange: onChange,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
             StyledTrigger,
             {
               ref: forwardedRef,
@@ -10775,8 +10880,8 @@ var Select = (0, import_react49.forwardRef)(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.Value, { placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select.Value, { placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
                   Icon,
                   {
                     size: "md",
@@ -10786,10 +10891,10 @@ var Select = (0, import_react49.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(StyledContent3, { position: "popper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Icon, { type: "caret-up" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.Viewport, { children }),
-            /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(Icon, { type: "caret-down" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(StyledContent3, { position: "popper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select.ScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(Icon, { type: "caret-up" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select.Viewport, { children }),
+            /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select.ScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(Icon, { type: "caret-down" }) })
           ] }) })
         ]
       }
@@ -10801,9 +10906,9 @@ Select.displayName = "Select";
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react50 = require("react");
-var import_styled_components69 = __toESM(require("styled-components"));
-var import_jsx_runtime246 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components69.default)(import_react_select2.Item)`
+var import_styled_components70 = __toESM(require("styled-components"));
+var import_jsx_runtime247 = require("react/jsx-runtime");
+var StyledItem = (0, import_styled_components70.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -10826,25 +10931,25 @@ var StyledItem = (0, import_styled_components69.default)(import_react_select2.It
     background-color: transparent;
   }
 `;
-var StyledIconContainer = import_styled_components69.default.span`
+var StyledIconContainer = import_styled_components70.default.span`
   width: 12px;
 `;
 var SelectOption = (0, import_react50.forwardRef)(
   ({ children, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
             Icon,
             {
               size: "sm",
               type: "checkmark"
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(import_react_select2.ItemText, { children })
+          /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(import_react_select2.ItemText, { children })
         ]
       }
     );
@@ -10854,14 +10959,14 @@ SelectOption.displayName = "Option";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
-var import_styled_components70 = __toESM(require("styled-components"));
-var import_jsx_runtime247 = require("react/jsx-runtime");
-var StyledLabel4 = (0, import_styled_components70.default)(import_react_select3.Label)`
+var import_styled_components71 = __toESM(require("styled-components"));
+var import_jsx_runtime248 = require("react/jsx-runtime");
+var StyledLabel4 = (0, import_styled_components71.default)(import_react_select3.Label)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime247.jsxs)(import_react_select3.Group, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime248.jsxs)(import_react_select3.Group, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(StyledLabel4, { children: /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -10874,19 +10979,19 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 };
 
 // src/components/Table/Table.tsx
-var import_styled_components71 = __toESM(require("styled-components"));
-var import_jsx_runtime248 = require("react/jsx-runtime");
-var StyledTable = import_styled_components71.default.table`
+var import_styled_components72 = __toESM(require("styled-components"));
+var import_jsx_runtime249 = require("react/jsx-runtime");
+var StyledTable = import_styled_components72.default.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && import_styled_components71.css`
+  ${({ $striped }) => $striped && import_styled_components72.css`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && import_styled_components71.css`
+  ${({ $divided }) => $divided && import_styled_components72.css`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -10898,7 +11003,7 @@ var Table = ({
   divided = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
     StyledTable,
     {
       $divided: divided,
@@ -10910,35 +11015,35 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-var import_styled_components72 = __toESM(require("styled-components"));
+var import_styled_components73 = __toESM(require("styled-components"));
 
 // src/components/Table/TableSectionContext.ts
 var import_react51 = require("react");
 var TableSectionContext = (0, import_react51.createContext)(null);
 
 // src/components/Table/TableBody.tsx
-var import_jsx_runtime249 = require("react/jsx-runtime");
-var StyledTbody = import_styled_components72.default.tbody``;
+var import_jsx_runtime250 = require("react/jsx-runtime");
+var StyledTbody = import_styled_components73.default.tbody``;
 var TableBody = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(StyledTbody, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StyledTbody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 var import_react52 = require("react");
-var import_styled_components73 = __toESM(require("styled-components"));
-var import_jsx_runtime250 = require("react/jsx-runtime");
-var sharedStyles = import_styled_components73.css`
+var import_styled_components74 = __toESM(require("styled-components"));
+var import_jsx_runtime251 = require("react/jsx-runtime");
+var sharedStyles = import_styled_components74.css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = import_styled_components73.default.th`
+var StyledTh = import_styled_components74.default.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 = import_styled_components73.default.td`
+var StyledTd = import_styled_components74.default.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -10947,51 +11052,51 @@ var StyledTd = import_styled_components73.default.td`
 var TableCell = ({ children, ...props }) => {
   const section = (0, import_react52.useContext)(TableSectionContext);
   if (section === "head") {
-    return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StyledTh, { ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledTh, { ...props, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime250.jsx)(StyledTd, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledTd, { ...props, children });
 };
 
 // src/components/Table/TableFooter.tsx
-var import_styled_components74 = __toESM(require("styled-components"));
-var import_jsx_runtime251 = require("react/jsx-runtime");
-var StyledTfoot = import_styled_components74.default.tfoot``;
+var import_styled_components75 = __toESM(require("styled-components"));
+var import_jsx_runtime252 = require("react/jsx-runtime");
+var StyledTfoot = import_styled_components75.default.tfoot``;
 var TableFooter = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(StyledTfoot, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledTfoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-var import_styled_components75 = __toESM(require("styled-components"));
-var import_jsx_runtime252 = require("react/jsx-runtime");
-var StyledThead = import_styled_components75.default.thead``;
+var import_styled_components76 = __toESM(require("styled-components"));
+var import_jsx_runtime253 = require("react/jsx-runtime");
+var StyledThead = import_styled_components76.default.thead``;
 var TableHead = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledThead, { ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-var import_styled_components76 = __toESM(require("styled-components"));
-var import_jsx_runtime253 = require("react/jsx-runtime");
-var StyledTr = import_styled_components76.default.tr``;
+var import_styled_components77 = __toESM(require("styled-components"));
+var import_jsx_runtime254 = require("react/jsx-runtime");
+var StyledTr = import_styled_components77.default.tr``;
 var TableRow = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledTr, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(StyledTr, { ...props, children });
 };
 
 // src/components/Tabs/Tabs.tsx
 var import_react57 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
-var import_type_guards42 = require("@wistia/type-guards");
-var import_styled_components81 = __toESM(require("styled-components"));
+var import_type_guards43 = require("@wistia/type-guards");
+var import_styled_components82 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
-var import_styled_components77 = __toESM(require("styled-components"));
+var import_styled_components78 = __toESM(require("styled-components"));
 var import_react_tabs = require("@radix-ui/react-tabs");
-var import_jsx_runtime254 = require("react/jsx-runtime");
-var StyledTabPanel = (0, import_styled_components77.default)(import_react_tabs.Content)`
+var import_jsx_runtime255 = require("react/jsx-runtime");
+var StyledTabPanel = (0, import_styled_components78.default)(import_react_tabs.Content)`
   display: flex;
   flex-direction: column;
 `;
 var TabPanel = ({ children, value, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
     StyledTabPanel,
     {
       value,
@@ -11003,10 +11108,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabList.tsx
-var import_styled_components78 = __toESM(require("styled-components"));
+var import_styled_components79 = __toESM(require("styled-components"));
 var import_react_tabs2 = require("@radix-ui/react-tabs");
-var import_jsx_runtime255 = require("react/jsx-runtime");
-var StyledTabList = (0, import_styled_components78.default)(import_react_tabs2.List)`
+var import_jsx_runtime256 = require("react/jsx-runtime");
+var StyledTabList = (0, import_styled_components79.default)(import_react_tabs2.List)`
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
@@ -11019,7 +11124,7 @@ var TabList = ({
   ariaLabel,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime255.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(
     StyledTabList,
     {
       $fullWidth: fullWidth,
@@ -11033,9 +11138,9 @@ TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
 var import_react54 = require("react");
-var import_styled_components79 = __toESM(require("styled-components"));
+var import_styled_components80 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
-var import_type_guards41 = require("@wistia/type-guards");
+var import_type_guards42 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react53 = require("react");
@@ -11050,8 +11155,8 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/TabItem.tsx
-var import_jsx_runtime256 = require("react/jsx-runtime");
-var StyledTabItem = (0, import_styled_components79.default)(import_react_tabs3.Trigger)`
+var import_jsx_runtime257 = require("react/jsx-runtime");
+var StyledTabItem = (0, import_styled_components80.default)(import_react_tabs3.Trigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -11089,12 +11194,12 @@ var TabItem = (0, import_react54.forwardRef)(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ (0, import_jsx_runtime256.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime257.jsxs)(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards41.isNotNil)(label),
-        "aria-label": (0, import_type_guards41.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards42.isNotNil)(label),
+        "aria-label": (0, import_type_guards42.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -11131,9 +11236,9 @@ var extractTabItems = (children) => {
 
 // src/components/Tabs/SelectedItemIndicator.tsx
 var import_react56 = require("react");
-var import_styled_components80 = __toESM(require("styled-components"));
-var import_jsx_runtime257 = require("react/jsx-runtime");
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components80.default)(SelectedItemIndicatorDiv)`
+var import_styled_components81 = __toESM(require("styled-components"));
+var import_jsx_runtime258 = require("react/jsx-runtime");
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components81.default)(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -11152,7 +11257,7 @@ var SelectedItemIndicator2 = () => {
   if (selectedValue == null) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime257.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
     TabsSelectedItemIndicatorDiv,
     {
       style: {
@@ -11165,19 +11270,19 @@ var SelectedItemIndicator2 = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime258 = require("react/jsx-runtime");
-var TabsContainer = import_styled_components81.default.div`
+var import_jsx_runtime259 = require("react/jsx-runtime");
+var TabsContainer = import_styled_components82.default.div`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
   overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StickyTabContent = import_styled_components81.default.div`
+var StickyTabContent = import_styled_components82.default.div`
   flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
   overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
   overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StyledTabsRoot = (0, import_styled_components81.default)(import_react_tabs4.Root)`
+var StyledTabsRoot = (0, import_styled_components82.default)(import_react_tabs4.Root)`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
@@ -11200,7 +11305,7 @@ var Tabs = (0, import_react57.forwardRef)(
       onValueChange: setInternalSelectedValue
     } : { value: selectedValue, onValueChange: onSelectedValueChange };
     const currentValue = defaultSelectedValue !== void 0 ? internalSelectedValue : selectedValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TabsContainer, { $stickyHeaders: stickyHeaders, children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
       StyledTabsRoot,
       {
         ref,
@@ -11208,14 +11313,14 @@ var Tabs = (0, import_react57.forwardRef)(
         activationMode: "automatic",
         ...otherProps,
         ...modeProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(SelectedItemMeasurementsProvider, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime258.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(SelectedItemMeasurementsProvider, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime259.jsxs)(
             TabList,
             {
               ariaLabel,
               fullWidth,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(SelectedItemIndicator2, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(SelectedItemIndicator2, {}),
                 tabItems.map((tab) => {
                   const {
                     value,
@@ -11224,8 +11329,8 @@ var Tabs = (0, import_react57.forwardRef)(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if ((0, import_type_guards42.isNil)(icon)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
+                  if ((0, import_type_guards43.isNil)(icon)) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                       TabItem,
                       {
                         disabled,
@@ -11235,8 +11340,8 @@ var Tabs = (0, import_react57.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards42.isNotNil)(label)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
+                  if ((0, import_type_guards43.isNotNil)(label)) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                       TabItem,
                       {
                         disabled,
@@ -11247,8 +11352,8 @@ var Tabs = (0, import_react57.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards42.isNotNil)(ariaLabelForTab)) {
-                    return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
+                  if ((0, import_type_guards43.isNotNil)(ariaLabelForTab)) {
+                    return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
                       TabItem,
                       {
                         "aria-label": ariaLabelForTab,
@@ -11264,7 +11369,7 @@ var Tabs = (0, import_react57.forwardRef)(
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StickyTabContent, { $stickyHeaders: stickyHeaders, children: tabItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(
             TabPanel,
             {
               value: tab.props.value,
@@ -11281,27 +11386,34 @@ Tabs.displayName = "Tabs";
 
 // src/components/Tabs/Tab.tsx
 var import_react58 = require("react");
-var import_jsx_runtime259 = require("react/jsx-runtime");
+var import_jsx_runtime260 = require("react/jsx-runtime");
 var Tab = (0, import_react58.forwardRef)(({ children }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)("div", { ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)("div", { ref, children });
 });
 Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
 var import_react59 = require("react");
-var import_styled_components82 = __toESM(require("styled-components"));
-var import_type_guards43 = require("@wistia/type-guards");
-var import_jsx_runtime260 = require("react/jsx-runtime");
-var TagLabel = import_styled_components82.default.a`
+var import_styled_components83 = __toESM(require("styled-components"));
+var import_type_guards44 = require("@wistia/type-guards");
+var import_jsx_runtime261 = require("react/jsx-runtime");
+var TagLabel = import_styled_components83.default.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);
@@ -11320,14 +11432,14 @@ var TagLabel = import_styled_components82.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components82.default.div`
+var TagDivider = import_styled_components83.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components82.default.button`
+var StyledRemoveButton = import_styled_components83.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -11355,7 +11467,7 @@ var StyledRemoveButton = import_styled_components82.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components82.default.div`
+var StyledTag = import_styled_components83.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11368,55 +11480,67 @@ var StyledTag = import_styled_components82.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards43.isNil)(onClickRemove)) {
+  if ((0, import_type_guards44.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards43.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards44.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(import_jsx_runtime260.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(import_jsx_runtime261.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(TagDivider, { $colorScheme: colorScheme }),
+    /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
         onClick: onClickRemove,
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
             Icon,
             {
               size: "sm",
               type: "close"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
+          /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(ScreenReaderOnly, { children: onClickRemoveLabel })
         ]
       }
     )
   ] });
 };
 var Tag = (0, import_react59.forwardRef)(
-  ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = (0, import_type_guards43.isNotNil)(href) && (0, import_type_guards43.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ (0, import_jsx_runtime260.jsxs)(
+  ({
+    onClickRemove,
+    colorScheme = "inherit",
+    href,
+    icon,
+    label,
+    onClickRemoveLabel,
+    ...otherProps
+  }, ref) => {
+    const hasIcon = (0, import_type_guards44.isNotNil)(icon);
+    const labelProps = (0, import_type_guards44.isNotNil)(href) && (0, import_type_guards44.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    return /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...otherProps,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
             TagLabel,
             {
               ...labelProps,
               $colorScheme: colorScheme,
-              children: label
+              children: [
+                hasIcon ? icon : null,
+                label
+              ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
             RemoveButton,
             {
               colorScheme,
@@ -11432,26 +11556,26 @@ var Tag = (0, import_react59.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components83 = __toESM(require("styled-components"));
-var import_type_guards44 = require("@wistia/type-guards");
-var import_jsx_runtime261 = require("react/jsx-runtime");
+var import_styled_components84 = __toESM(require("styled-components"));
+var import_type_guards45 = require("@wistia/type-guards");
+var import_jsx_runtime262 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
       "g",
       {
         "data-testid": "ui-wistia-logo-brandmark",
         fill: brandmarkColor,
-        children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)("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__ */ (0, import_jsx_runtime262.jsx)("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__ */ (0, import_jsx_runtime261.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-brandmark",
       fill: brandmarkColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)("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__ */ (0, import_jsx_runtime262.jsx)("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" })
     }
   );
 };
@@ -11459,12 +11583,12 @@ var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime262.jsx)(
     "g",
     {
       "data-testid": "ui-wistia-logo-logotype",
       fill: logotypeColor,
-      children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)("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__ */ (0, import_jsx_runtime262.jsx)("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" })
     }
   );
 };
@@ -11474,7 +11598,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components83.default.svg`
+var WistiaLogoComponent = import_styled_components84.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -11490,12 +11614,12 @@ var WistiaLogoComponent = import_styled_components83.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components83.css`
+      return import_styled_components84.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components83.css`
+    return import_styled_components84.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -11532,7 +11656,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime261.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime262.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -11545,14 +11669,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime261.jsx)("title", { children: title }),
-        (0, import_type_guards44.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime261.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("title", { children: title }),
+        (0, import_type_guards45.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime261.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime262.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 // Annotate the CommonJS export names for ESM import in node: