@wistia/ui 0.6.19 → 0.6.20-beta.018053dc.9bb5958

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.19
+ * @license @wistia/ui v0.6.20-beta.018053dc.9bb5958
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7530,192 +7530,15 @@ 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");
-
-// src/components/Label/Label.tsx
-var import_styled_components32 = __toESM(require("styled-components"));
-
-// src/components/Heading/Heading.tsx
 var import_react18 = require("react");
-var import_styled_components31 = __toESM(require("styled-components"));
-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 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 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,
-    {
-      ref,
-      $align: align,
-      $colorScheme: colorScheme,
-      $disabled: disabled,
-      $ellipsis: ellipsis,
-      $inline: inline,
-      $preventUserSelect: preventUserSelect,
-      $variant: variant,
-      as: renderAs ?? variantElementMap[variant],
-      ...otherProps
-    }
-  )
-);
-HeadingComponent.displayName = "Heading";
-var Heading = makePolymorphic(HeadingComponent);
-
-// src/components/Label/Label.tsx
-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`
-  color: var(--wui-color-text-disabled);
-`;
-var StyledLabel2 = (0, import_styled_components32.default)(Heading).attrs({
-  variant: "heading6",
-  renderAs: "label"
-})`
-  display: block;
-  width: 100%;
-
-  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
-  > input,
-  > textarea,
-  > select {
-    display: block;
-  }
-
-  > label {
-    font-weight: normal;
-  }
-
-  ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
-  ${({ $disabled }) => $disabled && disabledStyle}
-  ${({ $required }) => $required && requiredStyle}
-`;
-var Label = ({
-  children,
-  disabled = false,
-  htmlFor,
-  required = false,
-  screenReaderOnly = false,
-  ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
-  StyledLabel2,
-  {
-    ...otherProps,
-    $disabled: disabled,
-    $required: required,
-    $screenReaderOnly: screenReaderOnly,
-    htmlFor,
-    children
-  }
-);
-Label.displayName = "Label";
+var import_styled_components32 = __toESM(require("styled-components"));
+var import_type_guards20 = require("@wistia/type-guards");
 
 // src/components/Label/LabelDescription.tsx
-var import_styled_components33 = __toESM(require("styled-components"));
+var import_styled_components31 = __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`
+var import_jsx_runtime199 = require("react/jsx-runtime");
+var StyledLabelDescription = import_styled_components31.default.div`
   color: var(--wui-color-text-secondary);
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-body-4-weight);
@@ -7728,13 +7551,13 @@ var LabelDescription = ({
   if ((0, import_type_guards19.isNil)(children)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(StyledLabelDescription, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(StyledLabelDescription, { ...props, children });
 };
 LabelDescription.displayName = "LabelDescription";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime202 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+var import_jsx_runtime200 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -7742,137 +7565,112 @@ 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_runtime200.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 disabledStyle = import_styled_components32.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 inputSizeMedium = import_styled_components32.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 StyledLabelWrapper = import_styled_components32.default.div`
   display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: start; /* align to the top to handle label descriptions */
+  flex-direction: column;
+`;
+var StyledCheckboxWrapper = import_styled_components32.default.div`
+  display: flex;
+  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 && disabledStyle};
+`;
+var StyledCheckboxInput = import_styled_components32.default.div`
+  /* TODO prop-ify sizes */
+  ${inputSizeMedium}
+  line-height: 0;
+  margin: 0;
+  border: 1px solid var(--wui-color-border);
+  border-radius: var(--wui-border-radius-01);
+  background-color: var(--wui-color-bg-fill-white);
+  display: grid;
+  place-content: center;
+  align-self: flex-start;
 
-    svg path {
-      fill: var(--wui-color-icon-disabled);
-    }
+  path {
+    fill: var(--wui-color-bg-fill-white);
   }
+`;
+var StyledLabel2 = import_styled_components32.default.label`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--wui-space-01);
+`;
+var StyledHiddenCheckboxInput = import_styled_components32.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 */
+  &:not(:checked) + label svg {
+    display: none;
   }
 `;
-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)(
-  ({
-    checked,
-    disabled = false,
-    forceState,
-    id,
-    label,
-    description,
-    name,
-    onChange,
-    required = false,
-    value = "false",
-    ...otherProps
-  }, 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
-                }
-              };
-              onChange(syntheticEvent);
+var Checkbox = (0, import_react18.forwardRef)(
+  ({ checked, disabled = false, id, label, description, name, onChange, value, ...otherProps }, ref) => {
+    const generatedId = (0, import_react18.useId)();
+    const computedId = (0, import_type_guards20.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+      StyledCheckboxWrapper,
+      {
+        ref,
+        disabled,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
+            StyledHiddenCheckboxInput,
+            {
+              ...otherProps,
+              disabled,
+              id: computedId,
+              name,
+              type: "checkbox",
+              value
             }
-          },
-          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 })
-      ] })
-    ] });
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(StyledLabel2, { htmlFor: computedId, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(StyledCheckboxInput, { "data-wui-faux-input": "true", children: /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(CheckIcon, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(StyledLabelWrapper, { children: [
+              label,
+              /* @__PURE__ */ (0, import_jsx_runtime200.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 +7678,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 +7695,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
   });
@@ -7907,9 +7705,9 @@ 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_styled_components33 = __toESM(require("styled-components"));
+var import_jsx_runtime201 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components33.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -7925,42 +7723,162 @@ var Collapsible = ({
   const controlProps = {
     ...(0, import_type_guards21.isNotNil)(onOpenChange) && (0, import_type_guards21.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime201.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_runtime202 = 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_runtime202.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components36 = __toESM(require("styled-components"));
+var import_styled_components34 = __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_jsx_runtime203 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components34.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 });
+    return /* @__PURE__ */ (0, import_jsx_runtime203.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_runtime203.jsx)(import_react_collapsible3.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(import_jsx_runtime203.Fragment, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_styled_components37 = __toESM(require("styled-components"));
+var import_styled_components36 = __toESM(require("styled-components"));
 var import_type_guards23 = require("@wistia/type-guards");
-var import_jsx_runtime206 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components37.default.div`
+
+// src/components/Heading/Heading.tsx
+var import_react21 = require("react");
+var import_styled_components35 = __toESM(require("styled-components"));
+var import_jsx_runtime204 = require("react/jsx-runtime");
+var heroStyle = import_styled_components35.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_components35.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_components35.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_components35.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_components35.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_components35.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_components35.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_components35.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_components35.css`
+      display: inline-block;
+    `}
+  ${({ $disabled }) => $disabled && import_styled_components35.css`
+      color: var(--wui-color-text-disabled);
+    `}
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components35.css`
+      user-select: none;
+    `}
+  ${({ $align }) => import_styled_components35.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_runtime204.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_runtime205 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components36.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -7973,7 +7891,7 @@ var StyledDataCard = import_styled_components37.default.div`
   border-radius: var(--wui-border-radius-02);
   position: relative;
 `;
-var shimmer = import_styled_components37.keyframes`
+var shimmer = import_styled_components36.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -7981,7 +7899,7 @@ var shimmer = import_styled_components37.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components37.default.div`
+var LoadingBackground = import_styled_components36.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -7992,27 +7910,27 @@ var LoadingBackground = import_styled_components37.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components37.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components36.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components37.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components36.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel3 = (0, import_styled_components37.default)(Heading)`
+var StyledLabel3 = (0, import_styled_components36.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components37.default)(Heading)`
+var StyledValue = (0, import_styled_components36.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components37.default.div`
+var StyledSlot = import_styled_components36.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components37.default.div`
+var StyledDataCardTrendContainer = import_styled_components36.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8025,39 +7943,39 @@ var DataCard = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
         StyledLabel3,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime205.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_guards23.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards23.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
-var import_jsx_runtime207 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components38.default)(Box)`
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components37.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8071,7 +7989,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -8089,25 +8007,25 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components40 = __toESM(require("styled-components"));
+var import_styled_components39 = __toESM(require("styled-components"));
 
 // src/components/Text/Text.tsx
 var import_react22 = require("react");
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_jsx_runtime208 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components39.css`
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_jsx_runtime207 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components38.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components39.css`
+var labelBoldStyles = import_styled_components38.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components39.css`
+var body1TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8115,7 +8033,7 @@ var body1TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components39.css`
+var body2TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8123,7 +8041,7 @@ var body2TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components39.css`
+var body3TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8131,7 +8049,7 @@ var body3TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components39.css`
+var body4TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8139,47 +8057,47 @@ var body4TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components39.css`
+var label1TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components39.css`
+var label2TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components39.css`
+var label3TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-label-3-family);
   --font-size: var(--wui-typography-label-3-size);
   --font-weight: var(--wui-typography-label-3-weight);
   --line-height: var(--wui-typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components39.css`
+var label4TextStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components39.css`
+var body1MonoTextStyle = import_styled_components38.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components39.css`
+var body2MonoTextStyle = import_styled_components38.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components39.css`
+var body3MonoTextStyle = import_styled_components38.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components39.css`
+var body4MonoTextStyle = import_styled_components38.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8214,7 +8132,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components39.default.div`
+var StyledText = import_styled_components38.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8238,19 +8156,19 @@ var StyledText = import_styled_components39.default.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components39.css`
+  ${({ $inline }) => $inline && import_styled_components38.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components39.css`
+  ${({ $disabled }) => $disabled && import_styled_components38.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components39.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components38.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components39.css`
+  ${({ $align }) => import_styled_components38.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components39.css`
+  ${({ as }) => as === "p" && import_styled_components38.css`
       display: block;
 
       + p {
@@ -8271,7 +8189,7 @@ var TextComponent = (0, import_react22.forwardRef)(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
       StyledText,
       {
         ref,
@@ -8293,8 +8211,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_jsx_runtime209 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components40.default.div`
+var import_jsx_runtime208 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components39.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8309,8 +8227,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
       Icon,
       {
         size: "md",
@@ -8318,7 +8236,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -8330,22 +8248,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
-var import_jsx_runtime210 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components41.css`
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_jsx_runtime209 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components40.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = import_styled_components41.css`
+var verticalBorderCss = import_styled_components40.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components41.default.div`
+var DividerComponent = import_styled_components40.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8360,7 +8278,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -8373,15 +8291,15 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components45 = __toESM(require("styled-components"));
+var import_styled_components44 = __toESM(require("styled-components"));
 var import_react24 = require("react");
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components42 = __toESM(require("styled-components"));
+var import_styled_components41 = __toESM(require("styled-components"));
 var import_type_guards24 = 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({
+var import_jsx_runtime210 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components41.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components41.default.div({
   "&:not(:focus-within)": visuallyHiddenStyle
 });
 var ScreenReaderOnly = ({
@@ -8392,24 +8310,24 @@ var ScreenReaderOnly = ({
 }) => {
   const accessibleText = (0, import_type_guards24.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components43 = __toESM(require("styled-components"));
-var import_jsx_runtime212 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components43.css`
+var import_styled_components42 = __toESM(require("styled-components"));
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components42.css`
   --tooltip-font-size: var(--wui-typography-label-4-size);
   --tooltip-line-height: var(--wui-typography-label-4-line-height);
   --tooltip-font-weight: var(--wui-typography-label-4-weight);
   --tooltip-horizontal-padding: var(--wui-space-02);
   --tooltip-vertical-padding: var(--wui-space-03);
 `;
-var StyledContent = (0, import_styled_components43.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components42.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -8468,14 +8386,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
           StyledContent,
           {
             $compact: compact,
@@ -8483,7 +8401,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -8492,7 +8410,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime212.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime211.jsx)("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
                 }
               ) }) : null
             ]
@@ -8506,10 +8424,10 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 var import_react23 = require("react");
-var import_styled_components44 = __toESM(require("styled-components"));
+var import_styled_components43 = __toESM(require("styled-components"));
 var import_type_guards25 = require("@wistia/type-guards");
-var import_jsx_runtime213 = require("react/jsx-runtime");
-var inputStyles = import_styled_components44.css`
+var import_jsx_runtime212 = require("react/jsx-runtime");
+var inputStyles = import_styled_components43.css`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
   --wui-input-color-border: var(--wui-color-border);
@@ -8550,7 +8468,7 @@ var inputStyles = import_styled_components44.css`
     }
   }
 `;
-var StyledInputContainer = import_styled_components44.default.div`
+var StyledInputContainer = import_styled_components43.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -8611,7 +8529,7 @@ var Input = (0, import_react23.forwardRef)(
     );
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards25.isNil)(leftIcon) && type === "search") {
-      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(Icon, { type: "search" });
+      leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(Icon, { type: "search" });
     }
     if ((0, import_type_guards25.isNotNil)(leftIconToDisplay)) {
       leftIconToDisplay = (0, import_react23.cloneElement)(leftIconToDisplay, {
@@ -8636,21 +8554,21 @@ var Input = (0, import_react23.forwardRef)(
         });
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime212.jsxs)(
       StyledInputContainer,
       {
         $fullWidth: fullWidth,
         $monospace: monospace,
         children: [
           leftIconToDisplay ?? null,
-          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+          type === "multiline" ? /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
             "textarea",
             {
               ...props,
               ref,
               onFocus: handleFocus
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime212.jsx)(
             "input",
             {
               ...props,
@@ -8668,8 +8586,8 @@ var Input = (0, import_react23.forwardRef)(
 Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_jsx_runtime214 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components45.default)(Input)`
+var import_jsx_runtime213 = require("react/jsx-runtime");
+var StyledInput = (0, import_styled_components44.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -8689,7 +8607,7 @@ var StyledInput = (0, import_styled_components45.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components45.css`
+var editableStyles = import_styled_components44.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -8699,7 +8617,7 @@ var editableStyles = import_styled_components45.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components45.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components44.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -8753,7 +8671,7 @@ var EditableHeading = ({
       handleSetEditing(false);
     }
   };
-  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+  const HeadingComponent2 = /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
     StyledHeading2,
     {
       ref: headingRef,
@@ -8767,7 +8685,7 @@ var EditableHeading = ({
     return HeadingComponent2;
   }
   if (isEditing || forceEditing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
       StyledInput,
       {
         $height: headingHeight,
@@ -8785,8 +8703,8 @@ var EditableHeading = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime214.jsxs)(import_jsx_runtime214.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime213.jsxs)(import_jsx_runtime213.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
       Tooltip,
       {
         compact: true,
@@ -8794,7 +8712,7 @@ var EditableHeading = ({
         children: HeadingComponent2
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(ScreenReaderOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(
       "button",
       {
         "aria-label": ariaLabel,
@@ -8807,27 +8725,30 @@ var EditableHeading = ({
 
 // src/components/Form/Form.tsx
 var import_react26 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
+var import_styled_components46 = __toESM(require("styled-components"));
 var import_type_guards26 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react25 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
-var import_jsx_runtime215 = require("react/jsx-runtime");
+var import_styled_components45 = __toESM(require("styled-components"));
+var import_jsx_runtime214 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components46.default.div`
+var StyledStack = import_styled_components45.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
+  align-items: ${({ $alignItems }) => $alignItems};
 `;
 var StackComponent = (0, import_react25.forwardRef)(
-  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
+  ({ renderAs, direction = "vertical", gap = "space-02", alignItems = "stretch", ...props }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
+    const responsiveAlignItems = useResponsiveProp(alignItems);
+    return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
       StyledStack,
       {
         ref,
+        $alignItems: responsiveAlignItems,
         $direction: responsiveDirection,
         $gap: responsiveGap,
         as: renderAs ?? DEFAULT_ELEMENT4,
@@ -8840,8 +8761,8 @@ StackComponent.displayName = "Stack";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
-var import_jsx_runtime216 = require("react/jsx-runtime");
-var StyledForm = import_styled_components47.default.form`
+var import_jsx_runtime215 = require("react/jsx-runtime");
+var StyledForm = import_styled_components46.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -8920,7 +8841,7 @@ var FormComponent = ({
   }, [labelPosition, values, errors, id, hasSubmitted]);
   return (
     // @ts-expect-error - generic context providers are a giant pain
-    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime215.jsx)(
       Stack,
       {
         ...props,
@@ -8979,9 +8900,9 @@ var useFormState = (action, initialData = {}) => {
 // src/components/Form/FormErrorSummary.tsx
 var import_react28 = require("react");
 var import_type_guards27 = require("@wistia/type-guards");
-var import_jsx_runtime217 = require("react/jsx-runtime");
+var import_jsx_runtime216 = 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);
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
 };
 var FormErrorSummary = ({ description }) => {
   const ref = (0, import_react28.useRef)(null);
@@ -8990,10 +8911,10 @@ var FormErrorSummary = ({ description }) => {
   if (isValid || !hasSubmitted) {
     return null;
   }
-  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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime216.jsxs)("div", { ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime216.jsx)("p", { children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime216.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_runtime216.jsx)(
         ErrorItem,
         {
           error: err,
@@ -9001,7 +8922,7 @@ var FormErrorSummary = ({ description }) => {
           name
         },
         err
-      )) : /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+      )) : /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
         ErrorItem,
         {
           error: error ?? "",
@@ -9019,6 +8940,62 @@ var import_react31 = require("react");
 var import_styled_components49 = __toESM(require("styled-components"));
 var import_type_guards28 = require("@wistia/type-guards");
 
+// src/components/Label/Label.tsx
+var import_styled_components47 = __toESM(require("styled-components"));
+var import_jsx_runtime217 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components47.css`
+  &::after {
+    color: var(--wui-color-text-error);
+    display: inline;
+    padding-left: var(--wui-space-01);
+    content: '*';
+  }
+`;
+var disabledStyle2 = import_styled_components47.css`
+  color: var(--wui-color-text-disabled);
+`;
+var StyledLabel4 = (0, import_styled_components47.default)(Heading).attrs({
+  variant: "heading6",
+  renderAs: "label"
+})`
+  display: block;
+  width: 100%;
+
+  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
+  > input,
+  > textarea,
+  > select {
+    display: block;
+  }
+
+  > label {
+    font-weight: normal;
+  }
+
+  ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
+  ${({ $disabled }) => $disabled && disabledStyle2}
+  ${({ $required }) => $required && requiredStyle}
+`;
+var Label = ({
+  children,
+  disabled = false,
+  htmlFor,
+  required = false,
+  screenReaderOnly = false,
+  ...otherProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime217.jsx)(
+  StyledLabel4,
+  {
+    ...otherProps,
+    $disabled: disabled,
+    $required: required,
+    $screenReaderOnly: screenReaderOnly,
+    htmlFor,
+    children
+  }
+);
+Label.displayName = "Label";
+
 // src/components/FormGroup/CheckboxGroup.tsx
 var import_react30 = require("react");
 
@@ -9780,7 +9757,7 @@ 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 }) => {
+var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
     "svg",
     {
@@ -9852,7 +9829,7 @@ var CheckboxMenuItem = ({
         MenuItemButton,
         {
           ...props,
-          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(CheckboxIndicator2, { checked })
+          leftIcon: /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(CheckboxIndicator, { checked })
         }
       )
     }
@@ -10302,7 +10279,7 @@ var StyledRadio = import_styled_components64.default.input`
     transform: scale(1);
   }
 `;
-var disabledStyle2 = import_styled_components64.css`
+var disabledStyle3 = import_styled_components64.css`
   cursor: not-allowed;
   opacity: 0.5;
 `;
@@ -10339,7 +10316,7 @@ var StyledRadioWrapper = import_styled_components64.default.div`
     ${errorStyle};
   }
 
-  ${({ disabled }) => disabled && disabledStyle2};
+  ${({ disabled }) => disabled && disabledStyle3};
 `;
 var Radio = (0, import_react43.forwardRef)(
   ({
@@ -10853,12 +10830,12 @@ SelectOption.displayName = "Option";
 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 StyledLabel5 = (0, import_styled_components70.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)(
+    /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(StyledLabel5, { children: /* @__PURE__ */ (0, import_jsx_runtime247.jsx)(
       Text,
       {
         prominence: "secondary",