@wistia/ui 0.0.14 → 0.0.16

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.14
+ * @license @wistia/ui v0.0.16
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -440,6 +440,48 @@ var lightGlobalTokens = css3`
   --gray-alpha-10: #0000117d;
   --gray-alpha-11: #00000a9c;
   --gray-alpha-12: #000005de;
+  --vendor-hubspot-1: #fefcfb;
+  --vendor-hubspot-2: #fff5f2;
+  --vendor-hubspot-3: #ffe9e2;
+  --vendor-hubspot-4: #ffd7c9;
+  --vendor-hubspot-5: #ffc8b7;
+  --vendor-hubspot-6: #ffb8a3;
+  --vendor-hubspot-7: #ffa48d;
+  --vendor-hubspot-8: #f68a70;
+  --vendor-hubspot-9: #ff5c36;
+  --vendor-hubspot-10: #f24d25;
+  --vendor-hubspot-11: #d93a0f;
+  --vendor-hubspot-12: #5b2a1e;
+  --vendor-hubspot-surface: #fff3efcc;
+  --vendor-hubspot-contrast: #ffffff;
+  --vendor-marketo-1: #fdfdff;
+  --vendor-marketo-2: #f7f8ff;
+  --vendor-marketo-3: #eff2ff;
+  --vendor-marketo-4: #e3e8ff;
+  --vendor-marketo-5: #d5ddff;
+  --vendor-marketo-6: #c5cfff;
+  --vendor-marketo-7: #b0bcfa;
+  --vendor-marketo-8: #93a0f2;
+  --vendor-marketo-9: #4c50cc;
+  --vendor-marketo-10: #4040bb;
+  --vendor-marketo-11: #4f55c7;
+  --vendor-marketo-12: #252a62;
+  --vendor-marketo-surface: #f5f6ffcc;
+  --vendor-marketo-contrast: #ffffff;
+  --vendor-pardot-1: #fafdff;
+  --vendor-pardot-2: #f3fafe;
+  --vendor-pardot-3: #e1f5ff;
+  --vendor-pardot-4: #ceeeff;
+  --vendor-pardot-5: #bae5ff;
+  --vendor-pardot-6: #a4d9fa;
+  --vendor-pardot-7: #85c9f1;
+  --vendor-pardot-8: #4fb3e8;
+  --vendor-pardot-9: #00a1e0;
+  --vendor-pardot-10: #0094cf;
+  --vendor-pardot-11: #0079b5;
+  --vendor-pardot-12: #0c3a51;
+  --vendor-pardot-surface: #f0f9fecc;
+  --vendor-pardot-contrast: #ffffff;
 `;
 var darkGlobalTokens = css3`
   --app-background: #101629;
@@ -729,6 +771,48 @@ var darkGlobalTokens = css3`
   --gray-alpha-10: #a4bffe96;
   --gray-alpha-11: #b4caffde;
   --gray-alpha-12: #e4eeff;
+  --vendor-hubspot-1: #1d1513;
+  --vendor-hubspot-2: #231815;
+  --vendor-hubspot-3: #3b1a12;
+  --vendor-hubspot-4: #511609;
+  --vendor-hubspot-5: #601d0d;
+  --vendor-hubspot-6: #702a1a;
+  --vendor-hubspot-7: #883a27;
+  --vendor-hubspot-8: #af4a33;
+  --vendor-hubspot-9: #ff5c36;
+  --vendor-hubspot-10: #f14f28;
+  --vendor-hubspot-11: #ff9578;
+  --vendor-hubspot-12: #ffd5ca;
+  --vendor-hubspot-surface: #361a0280;
+  --vendor-hubspot-contrast: #ffffff;
+  --vendor-marketo-1: #141621;
+  --vendor-marketo-2: #161827;
+  --vendor-marketo-3: #1f234a;
+  --vendor-marketo-4: #262a66;
+  --vendor-marketo-5: #2f3476;
+  --vendor-marketo-6: #383f83;
+  --vendor-marketo-7: #444c97;
+  --vendor-marketo-8: #515ab4;
+  --vendor-marketo-9: #4c50cc;
+  --vendor-marketo-10: #4040bb;
+  --vendor-marketo-11: #9faeff;
+  --vendor-marketo-12: #dae1ff;
+  --vendor-marketo-surface: #1c1a2680;
+  --vendor-marketo-contrast: #ffffff;
+  --vendor-pardot-1: #0e191f;
+  --vendor-pardot-2: #111d24;
+  --vendor-pardot-3: #092c3d;
+  --vendor-pardot-4: #003752;
+  --vendor-pardot-5: #004463;
+  --vendor-pardot-6: #055274;
+  --vendor-pardot-7: #15648a;
+  --vendor-pardot-8: #197ba9;
+  --vendor-pardot-9: #00a1e0;
+  --vendor-pardot-10: #0095d3;
+  --vendor-pardot-11: #62c3f8;
+  --vendor-pardot-12: #bfe7ff;
+  --vendor-pardot-surface: #12242080;
+  --vendor-pardot-contrast: #ffffff;
 `;
 
 // src/css/designTokens/colorAlias.tsx
@@ -1512,7 +1596,10 @@ var colorSchemeOptions = [
   "orange",
   "pink",
   "purple",
-  "yellow"
+  "yellow",
+  "vendor-hubspot",
+  "vendor-marketo",
+  "vendor-pardot"
 ];
 var StyledColorSchemeWrapper = styled.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -1708,8 +1795,8 @@ import { Children, cloneElement } from "react";
 import styled4 from "styled-components";
 import { isNotNil as isNotNil2, isNil as isNil5, isRecord } from "@wistia/type-guards";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var isDev = process.env["NODE_ENV"] === "development";
-var PROPS_FOR_FLEX_CHILDREN = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow", "order", "shrink"]);
+var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
+var propsForFlexChildren = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow", "order", "shrink"]);
 var getGapStyle = (gap) => {
   if (isNotNil2(gap)) {
     if (isRecord(gap)) {
@@ -1799,7 +1886,7 @@ var Box = ({
 }) => {
   if (isDev && !hasBoxParent) {
     Object.keys(otherProps).forEach((prop) => {
-      if (PROPS_FOR_FLEX_CHILDREN.has(prop)) {
+      if (propsForFlexChildren.has(prop)) {
         console.warn(`${prop} only has an effect on <Box> instances that are children of a <Box>`);
       }
     });
@@ -5390,6 +5477,7 @@ var StyledButton = styled7.button`
   ${({ $unstyled }) => !$unstyled && buttonBaseStyles}
   ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
   position: relative;
+  text-align: center;
 `;
 var StyledButtonContent = styled7.div`
   align-items: center;
@@ -5405,7 +5493,6 @@ var StyledButtonContent = styled7.div`
 `;
 var StyledButtonContentLabel = styled7.span`
   flex: 1;
-  text-align: center;
 `;
 var StyledButtonLoading = styled7.div`
   position: absolute;
@@ -5534,7 +5621,7 @@ var getAlignment = (align) => {
   if (align === "right") {
     return "flex-end";
   }
-  return void 0;
+  return "flex-start";
 };
 var ButtonGroupComponent = styled8.div`
   display: flex;
@@ -5577,14 +5664,237 @@ var ButtonGroup = ({
 };
 ButtonGroup.displayName = "ButtonGroup";
 
-// src/components/Divider/Divider.tsx
-import styled9 from "styled-components";
+// src/components/Checkbox/Checkbox.tsx
+import { forwardRef as forwardRef4, useId } from "react";
+import { Root as CheckboxRoot, Indicator as CheckboxIndicator } from "@radix-ui/react-checkbox";
+import styled11 from "styled-components";
+import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
+
+// src/components/Label/Label.tsx
+import styled9, { css as css12 } from "styled-components";
 import { jsx as jsx164 } from "react/jsx-runtime";
+var requiredStyle = css12`
+  &::after {
+    color: var(--color-text-error);
+    display: inline;
+    padding-left: var(--space-01);
+    content: '*';
+  }
+`;
+var disabledStyle = css12`
+  color: var(--color-text-disabled);
+`;
+var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--space-02)";
+var StyledLabel = styled9.label`
+  display: inline-block;
+  font-size: var(--typography-label-1-size);
+  font-weight: var(--typography-label-1-weight);
+  line-height: var(--typography-label-1-line-height);
+  cursor: inherit;
+  width: 100%;
+
+  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
+  > input,
+  > textarea,
+  > select {
+    display: block;
+    margin-top: ${SPACE_BETWEEN_LABEL_AND_INPUT};
+  }
+
+  > 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__ */ jsx164(
+  StyledLabel,
+  {
+    $screenReaderOnly: screenReaderOnly,
+    disabled,
+    htmlFor,
+    required,
+    ...otherProps,
+    children
+  }
+);
+Label.displayName = "Label";
+
+// src/components/Label/LabelDescription.tsx
+import styled10 from "styled-components";
+import { isNil as isNil9 } from "@wistia/type-guards";
+import { jsx as jsx165 } from "react/jsx-runtime";
+var StyledLabelDescription = styled10.div`
+  color: var(--color-text-secondary);
+  font-size: var(--typography-body-4-size);
+  font-weight: var(--typography-body-4-weight);
+  line-height: var(--typography-body-4-line-height);
+`;
+var LabelDescription = ({
+  children,
+  ...props
+}) => {
+  if (isNil9(children)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx165(StyledLabelDescription, { ...props, children });
+};
+LabelDescription.displayName = "LabelDescription";
+
+// src/components/Checkbox/Checkbox.tsx
+import { jsx as jsx166, jsxs as jsxs6 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx166(
+  "svg",
+  {
+    fill: "inherit",
+    height: "8",
+    viewBox: "0 0 10 8",
+    width: "10",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx166(
+      "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"
+      }
+    )
+  }
+);
+var StyledCheckboxWrapper = styled11.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: var(--space-02);
+
+  &:hover {
+    /* TODO Lamp to design hover state */
+  }
+
+  &:focus-within {
+    /* TODO Lamp to design focus state */
+    background-color: #efefef;
+  }
+`;
+var StyledCheckboxRoot = styled11(CheckboxRoot)`
+  all: unset; /* CheckboxRoot renders as a button element, so we need to reset all styles */
+  background-color: var(--color-bg-fill-white);
+  min-width: 16px;
+  min-height: 16px;
+  border-radius: var(--border-radius-01);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: start; /* align to the top to handle label descriptions */
+  margin-top: 3px; /* bump down slightly to mimic "align-self: center" */
+
+  &[data-state='checked'] {
+    background-color: var(--color-bg-fill);
+  }
+
+  &[disabled] {
+    background-color: var(--color-bg-surface-disabled);
+
+    svg path {
+      fill: var(--color-icon-disabled);
+    }
+  }
+
+  &:hover {
+    /* TODO Lamp to design hover state */
+  }
+
+  &:focus {
+    /* TODO Lamp to design focus state */
+  }
+`;
+var StyledCheckboxIndicator = styled11(CheckboxIndicator)`
+  display: flex;
+`;
+var StyledLabelWrapper = styled11.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--space-02);
+`;
+var Checkbox = forwardRef4(
+  ({
+    checked,
+    disabled = false,
+    forceState,
+    id,
+    label = "default",
+    description,
+    name,
+    onChange,
+    required = false,
+    value = "false",
+    ...otherProps
+  }, ref) => {
+    const generatedId = useId();
+    const computedId = isNonEmptyString2(id) ? id : `vhs-collapsible-group-${generatedId}`;
+    return /* @__PURE__ */ jsxs6(StyledCheckboxWrapper, { children: [
+      /* @__PURE__ */ jsx166(
+        StyledCheckboxRoot,
+        {
+          ref,
+          checked: checked ?? void 0,
+          defaultChecked: checked === void 0 ? false : void 0,
+          disabled,
+          id: computedId,
+          name,
+          onCheckedChange: (state) => {
+            if (onChange) {
+              const syntheticEvent = {
+                target: {
+                  id: computedId,
+                  checked: state === true
+                }
+              };
+              onChange(syntheticEvent);
+            }
+          },
+          required,
+          value,
+          ...otherProps,
+          children: /* @__PURE__ */ jsx166(StyledCheckboxIndicator, { children: /* @__PURE__ */ jsx166(CheckIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ jsxs6(StyledLabelWrapper, { children: [
+        /* @__PURE__ */ jsx166(
+          Label,
+          {
+            disabled,
+            htmlFor: computedId,
+            required,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx166(LabelDescription, { children: description })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/Divider/Divider.tsx
+import styled12 from "styled-components";
+import { jsx as jsx167 } from "react/jsx-runtime";
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = styled9.hr`
+var DividerComponent = styled12.hr`
   background: none;
   border-bottom: none;
   border-left: none;
@@ -5599,7 +5909,7 @@ var DividerComponent = styled9.hr`
 `;
 var Divider = ({ size = "sm", ...otherProps }) => {
   const responsiveSize = useResponsiveProp(size);
-  return /* @__PURE__ */ jsx164(
+  return /* @__PURE__ */ jsx167(
     DividerComponent,
     {
       $borderHeight: sizeToPixelMap[responsiveSize],
@@ -5611,9 +5921,9 @@ Divider.displayName = "Divider";
 
 // src/components/Ellipsis/Ellipsis.tsx
 import { isNotNil as isNotNil5 } from "@wistia/type-guards";
-import styled10, { css as css12 } from "styled-components";
-import { jsx as jsx165 } from "react/jsx-runtime";
-var ellipsisStyle = css12`
+import styled13, { css as css13 } from "styled-components";
+import { jsx as jsx168 } from "react/jsx-runtime";
+var ellipsisStyle = css13`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5636,14 +5946,14 @@ var ellipsisStyle = css12`
     }
   }
 `;
-var ellipsisFlexParentStyle = css12`
+var ellipsisFlexParentStyle = css13`
   min-width: 0;
 `;
-var EllipsisComponent = styled10.div`
+var EllipsisComponent = styled13.div`
   ${ellipsisStyle};
   ${({ $lines }) => {
   if (isNotNil5($lines)) {
-    return css12`
+    return css13`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
         display: -webkit-box;
@@ -5653,7 +5963,7 @@ var EllipsisComponent = styled10.div`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx165(
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx168(
   EllipsisComponent,
   {
     $lines: lines,
@@ -5664,8 +5974,8 @@ var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ jsx165(
 Ellipsis.displayName = "Ellipsis";
 
 // src/components/Heading/Heading.tsx
-import { forwardRef as forwardRef4 } from "react";
-import styled11, { css as css13 } from "styled-components";
+import { forwardRef as forwardRef5 } from "react";
+import styled14, { css as css14 } from "styled-components";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -5673,44 +5983,44 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-import { jsx as jsx166 } from "react/jsx-runtime";
-var heroStyle = css13`
+import { jsx as jsx169 } from "react/jsx-runtime";
+var heroStyle = css14`
   --font-family: var(--typography-heading-hero-family);
   --font-size: var(--typography-heading-hero-size);
   --font-weight: var(--typography-heading-hero-weight);
   --line-height: var(--typography-heading-hero-line-height);
 `;
-var heading1TextStyle = css13`
+var heading1TextStyle = css14`
   --font-family: var(--typography-heading-1-family);
   --font-size: var(--typography-heading-1-size);
   --font-weight: var(--typography-heading-1-weight);
   --line-height: var(--typography-heading-1-line-height);
 `;
-var heading2TextStyle = css13`
+var heading2TextStyle = css14`
   --font-family: var(--typography-heading-2-family);
   --font-size: var(--typography-heading-2-size);
   --font-weight: var(--typography-heading-2-weight);
   --line-height: var(--typography-heading-2-line-height);
 `;
-var heading3TextStyle = css13`
+var heading3TextStyle = css14`
   --font-family: var(--typography-heading-3-family);
   --font-size: var(--typography-heading-3-size);
   --font-weight: var(--typography-heading-3-weight);
   --line-height: var(--typography-heading-3-line-height);
 `;
-var heading4TextStyle = css13`
+var heading4TextStyle = css14`
   --font-family: var(--typography-heading-4-family);
   --font-size: var(--typography-heading-4-size);
   --font-weight: var(--typography-heading-4-weight);
   --line-height: var(--typography-heading-4-line-height);
 `;
-var heading5TextStyle = css13`
+var heading5TextStyle = css14`
   --font-family: var(--typography-heading-5-family);
   --font-size: var(--typography-heading-5-size);
   --font-weight: var(--typography-heading-5-weight);
   --line-height: var(--typography-heading-5-line-height);
 `;
-var heading6TextStyle = css13`
+var heading6TextStyle = css14`
   --font-family: var(--typography-heading-6-family);
   --font-size: var(--typography-heading-6-size);
   --font-weight: var(--typography-heading-6-weight);
@@ -5726,7 +6036,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = styled11.div`
+var StyledHeading = styled14.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -5735,16 +6045,16 @@ var StyledHeading = styled11.div`
   color: var(--color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css13`
+  ${({ $inline }) => $inline && css14`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css13`
+  ${({ $disabled }) => $disabled && css14`
       color: var(--color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css13`
+  ${({ $preventUserSelect }) => $preventUserSelect && css14`
       user-select: none;
     `}
-  ${({ $align }) => css13`
+  ${({ $align }) => css14`
     text-align: ${$align};
   `}
   margin: 0;
@@ -5758,7 +6068,7 @@ var variantElementMap = {
   heading5: "h5",
   heading6: "h6"
 };
-var HeadingComponent = forwardRef4(
+var HeadingComponent = forwardRef5(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -5769,7 +6079,7 @@ var HeadingComponent = forwardRef4(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx166(
+  }, ref) => /* @__PURE__ */ jsx169(
     StyledHeading,
     {
       ref,
@@ -5789,8 +6099,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/IconButton/IconButton.tsx
-import { Children as Children2, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
-import styled13 from "styled-components";
+import { Children as Children2, cloneElement as cloneElement2, forwardRef as forwardRef6 } from "react";
+import styled16 from "styled-components";
 
 // src/components/Tooltip/Tooltip.tsx
 import {
@@ -5800,16 +6110,16 @@ import {
   Portal,
   Arrow
 } from "@radix-ui/react-tooltip";
-import styled12, { css as css14 } from "styled-components";
-import { jsx as jsx167, jsxs as jsxs6 } from "react/jsx-runtime";
-var CompactTooltipStyles = css14`
+import styled15, { css as css15 } from "styled-components";
+import { jsx as jsx170, jsxs as jsxs7 } from "react/jsx-runtime";
+var CompactTooltipStyles = css15`
   --tooltip-font-size: var(--typography-label-4-size);
   --tooltip-line-height: var(--typography-label-4-line-height);
   --tooltip-font-weight: var(--typography-label-4-weight);
   --tooltip-horizontal-padding: var(--space-02);
   --tooltip-vertical-padding: var(--space-03);
 `;
-var StyledContent = styled12(Content)`
+var StyledContent = styled15(Content)`
   --tooltip-font-family: var(--typography-family-default);
   --tooltip-border-radius: var(--border-radius-05);
   --tooltip-bg: var(--color-bg-tooltip);
@@ -5867,14 +6177,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ jsx167(Trigger, { asChild: true, children }),
-        /* @__PURE__ */ jsx167(Portal, { children: /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsx170(Trigger, { asChild: true, children }),
+        /* @__PURE__ */ jsx170(Portal, { children: /* @__PURE__ */ jsxs7(
           StyledContent,
           {
             $compact: compact,
@@ -5882,7 +6192,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ jsx167(Arrow, { asChild: true, children: /* @__PURE__ */ jsx167(
+              !hideArrow ? /* @__PURE__ */ jsx170(Arrow, { asChild: true, children: /* @__PURE__ */ jsx170(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -5891,7 +6201,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ jsx167("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__ */ jsx170("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
             ]
@@ -5904,8 +6214,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/IconButton/IconButton.tsx
-import { jsx as jsx168 } from "react/jsx-runtime";
-var StyledButton2 = styled13(Button)`
+import { jsx as jsx171 } from "react/jsx-runtime";
+var StyledButton2 = styled16(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -5919,10 +6229,10 @@ var StyledButton2 = styled13(Button)`
   align-items: center;
   line-height: 1;
 `;
-var IconButton = forwardRef5(
+var IconButton = forwardRef6(
   ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ jsx168(
+    const button = /* @__PURE__ */ jsx171(
       StyledButton2,
       {
         ...props,
@@ -5938,209 +6248,217 @@ var IconButton = forwardRef5(
     if (disableTooltip) {
       return button;
     }
-    return /* @__PURE__ */ jsx168(Tooltip, { content: label, children: button });
+    return /* @__PURE__ */ jsx171(Tooltip, { content: label, children: button });
   }
 );
 IconButton.displayName = "IconButton";
 
-// src/components/Label/Label.tsx
-import styled14, { css as css15 } from "styled-components";
-import { jsx as jsx169 } from "react/jsx-runtime";
-var requiredStyle = css15`
-  &::after {
-    color: red; /* TODO need a color for this */
-    display: inline;
-    padding-left: var(--space-01);
-    content: '*';
+// src/components/Menu/Menu.tsx
+import styled17, { css as css16, keyframes } from "styled-components";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuContent
+} from "@radix-ui/react-dropdown-menu";
+import { isNotNil as isNotNil6, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
+import { jsx as jsx172, jsxs as jsxs8 } from "react/jsx-runtime";
+var open = keyframes`
+  from {
+    opacity: 0;
+    transform: scale(.97) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
   }
 `;
-var disabledStyle = css15`
-  color: var(--color-text-disabled);
+var close = keyframes`
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(.97) translateY(-8px);
+  }
 `;
-var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--space-02)";
-var StyledLabel = styled14.label`
-  display: block;
-  font-size: var(--typography-label-1-size);
-  font-weight: var(--typography-label-1-weight);
-  line-height: var(--typography-label-1-line-height);
-  margin-bottom: ${SPACE_BETWEEN_LABEL_AND_INPUT};
-  width: 100%;
-
-  /* if label is wrapping an input this ensures it appears beneath the label with a nice margin */
-  > input,
-  > textarea,
-  > select {
-    display: block;
-    margin-top: ${SPACE_BETWEEN_LABEL_AND_INPUT};
+var menuContentCss = css16`
+  --menu-font-family: var(--typography-family-default);
+  --menu-bg: var(--color-bg-fill-white); /* TODO - Not sure what token to use for this */
+  --menu-shadow: 0 0 64px 0 rgba(0 0 0 / 8%); /* TODO - Need a box-shadow token */
+  --menu-border-radius: var(--border-radius-01);
+  --menu-padding: var(--space-03);
+  --menu-min-width: 120px;
+  --menu-max-width: 284px;
+  --menu-zindex: 500; /* TODO - need z-index token */
+
+  animation: ${open}; /* TODO - need easing tokens */
+  font-family: var(--menu-font-family);
+  background: var(--menu-bg);
+  border-radius: var(--menu-border-radius);
+  box-shadow: var(--menu-shadow); /* TODO - Need a box-shadow token */
+  max-height: var(--radix-dropdown-menu-content-available-height);
+  min-width: var(--menu-min-width);
+  max-width: var(--menu-max-width);
+  overflow: auto;
+  padding: var(--menu-padding);
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  z-index: var(--menu-zindex);
+
+  &[data-state='closed'] {
+    animation: ${close}; /* TODO - need easing tokens */
   }
 
-  > label {
-    font-weight: normal;
+  ${mq.smAndUp} {
+    bottom: 0;
+    padding: var(--menu-padding);
+    right: 0;
+    top: 0;
+    transform: initial;
   }
 
-  ${({ screenReaderOnly }) => screenReaderOnly && visuallyHiddenStyle}
-  ${({ disabled }) => disabled && disabledStyle}
-  ${({ required }) => required && requiredStyle}
-`;
-var Label = ({
-  children,
-  disabled = false,
-  htmlFor,
-  required = false,
-  screenReaderOnly = false,
-  ...otherProps
-}) => /* @__PURE__ */ jsx169(
-  StyledLabel,
-  {
-    disabled,
-    required,
-    screenReaderOnly,
-    ...otherProps,
-    children
+  hr {
+    margin: var(--space-02) 0;
   }
-);
-Label.displayName = "Label";
-
-// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled15 from "styled-components";
-import { isNotNil as isNotNil6 } from "@wistia/type-guards";
-import { jsx as jsx170 } from "react/jsx-runtime";
-var VisuallyHidden = styled15.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled15.div({
-  "&:not(:focus-within)": visuallyHiddenStyle
-});
-var ScreenReaderOnly = ({
-  text,
+`;
+var MenuContent = styled17(DropdownMenuContent)`
+  ${menuContentCss}
+`;
+var Menu = ({
+  align = "start",
   children,
-  focusable = false,
-  ...otherProps
+  trigger,
+  label,
+  isOpen,
+  triggerProps = {},
+  onOpenChange,
+  onInteractOutside,
+  ...props
 }) => {
-  const accessibleText = isNotNil6(text) ? text : children;
-  if (focusable) {
-    return /* @__PURE__ */ jsx170(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
-  }
-  return /* @__PURE__ */ jsx170(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ jsxs8(
+    DropdownMenu,
+    {
+      modal: false,
+      ...isNotNil6(onOpenChange) && isNotNil6(isOpen) ? { open: isOpen, onOpenChange } : {},
+      children: [
+        /* @__PURE__ */ jsx172(DropdownMenuTrigger, { asChild: true, children: isNotUndefined4(trigger) ? trigger : /* @__PURE__ */ jsx172(
+          Button,
+          {
+            "aria-expanded": isOpen,
+            forceState: isOpen ? "active" : void 0,
+            rightIcon: /* @__PURE__ */ jsx172(Icon, { type: "caret-down" }),
+            ...triggerProps,
+            children: label
+          }
+        ) }),
+        /* @__PURE__ */ jsx172(DropdownMenuPortal, { children: /* @__PURE__ */ jsx172(
+          MenuContent,
+          {
+            ...props,
+            align,
+            onFocusOutside: (event) => {
+              event.preventDefault();
+            },
+            sideOffset: 6,
+            children
+          }
+        ) })
+      ]
+    }
+  );
 };
-ScreenReaderOnly.displayName = "ScreenReaderOnly";
-
-// src/components/Stack/Stack.tsx
-import { forwardRef as forwardRef6 } from "react";
-import styled16 from "styled-components";
-import { jsx as jsx171 } from "react/jsx-runtime";
-var DEFAULT_ELEMENT2 = "div";
-var StyledStack = styled16.div`
-  display: flex;
-  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ $gap }) => `var(--${$gap})`};
+Menu.displayName = "Menu";
 
-  > * {
-    flex: 1;
-  }
-`;
-var StackComponent = forwardRef6(
-  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
-    const responsiveGap = useResponsiveProp(gap);
-    const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ jsx171(
-      StyledStack,
-      {
-        ref,
-        $direction: responsiveDirection,
-        $gap: responsiveGap,
-        as: renderAs ?? DEFAULT_ELEMENT2,
-        ...props
-      }
-    );
-  }
-);
-StackComponent.displayName = "Stack";
-var Stack = makePolymorphic(StackComponent);
+// src/components/Menu/MenuLabel.tsx
+import styled19 from "styled-components";
+import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled17, { css as css16 } from "styled-components";
-import { jsx as jsx172 } from "react/jsx-runtime";
-var bodyBoldStyles = css16`
+import styled18, { css as css17 } from "styled-components";
+import { jsx as jsx173 } from "react/jsx-runtime";
+var bodyBoldStyles = css17`
   > strong,
   b {
     font-weight: var(--typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = css16`
+var labelBoldStyles = css17`
   > strong,
   b {
     font-weight: var(--typography-weight-label-bold);
   }
 `;
-var body1TextStyle = css16`
+var body1TextStyle = css17`
   --font-family: var(--typography-body-1-family);
   --font-size: var(--typography-body-1-size);
   --font-weight: var(--typography-body-1-weight);
   --line-height: var(--typography-body-1-line-height);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = css16`
+var body2TextStyle = css17`
   --font-family: var(--typography-body-2-family);
   --font-size: var(--typography-body-2-size);
   --font-weight: var(--typography-body-2-weight);
   --line-height: var(--typography-body-2-line-height);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = css16`
+var body3TextStyle = css17`
   --font-family: var(--typography-body-3-family);
   --font-size: var(--typography-body-3-size);
   --font-weight: var(--typography-body-3-weight);
   --line-height: var(--typography-body-3-line-height);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = css16`
+var body4TextStyle = css17`
   --font-family: var(--typography-body-4-family);
   --font-size: var(--typography-body-4-size);
   --font-weight: var(--typography-body-4-weight);
   --line-height: var(--typography-body-4-line-height);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = css16`
+var label1TextStyle = css17`
   --font-family: var(--typography-label-1-family);
   --font-size: var(--typography-label-1-size);
   --font-weight: var(--typography-label-1-weight);
   --line-height: var(--typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = css16`
+var label2TextStyle = css17`
   --font-family: var(--typography-label-2-family);
   --font-size: var(--typography-label-2-size);
   --font-weight: var(--typography-label-2-weight);
   --line-height: var(--typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = css16`
+var label3TextStyle = css17`
   --font-family: var(--typography-label-3-family);
   --font-size: var(--typography-label-3-size);
   --font-weight: var(--typography-label-3-weight);
   --line-height: var(--typography-label-3-line-height);
   ${labelBoldStyles}
 `;
-var label4TextStyle = css16`
+var label4TextStyle = css17`
   --font-family: var(--typography-label-4-family);
   --font-size: var(--typography-label-4-size);
   --font-weight: var(--typography-label-4-weight);
   --line-height: var(--typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = css16`
+var body1MonoTextStyle = css17`
   ${body1TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body2MonoTextStyle = css16`
+var body2MonoTextStyle = css17`
   ${body2TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body3MonoTextStyle = css16`
+var body3MonoTextStyle = css17`
   ${body3TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body4MonoTextStyle = css16`
+var body4MonoTextStyle = css17`
   ${body4TextStyle};
   --font-family: var(--typography-family-mono);
 `;
@@ -6158,13 +6476,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = css16`
+var highContrastProminenceStyle = css17`
   --text-color: var(--color-text-high-contrast);
 `;
-var vibrantProminenceStyle = css16`
+var vibrantProminenceStyle = css17`
   --text-color: var(--color-text);
 `;
-var secondaryProminenceStyle = css16`
+var secondaryProminenceStyle = css17`
   --text-color: var(--color-text-secondary);
 `;
 var prominenceMap = {
@@ -6172,7 +6490,7 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = styled17.div`
+var StyledText = styled18.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6184,23 +6502,23 @@ var StyledText = styled17.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $prominence }) => prominenceMap[$prominence]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && css16`
+  ${({ $inline }) => $inline && css17`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && css16`
+  ${({ $disabled }) => $disabled && css17`
       --text-color: var(--color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && css16`
+  ${({ $preventUserSelect }) => $preventUserSelect && css17`
       user-select: none;
     `}
-  ${({ $align }) => css16`
+  ${({ $align }) => css17`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && css16`
+  ${({ as }) => as === "p" && css17`
       display: block;
     `}
 `;
-var DEFAULT_ELEMENT3 = "div";
+var DEFAULT_ELEMENT2 = "div";
 var TextComponent = forwardRef7(
   ({
     align = "left",
@@ -6214,7 +6532,7 @@ var TextComponent = forwardRef7(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx172(
+    return /* @__PURE__ */ jsx173(
       StyledText,
       {
         ref,
@@ -6226,7 +6544,7 @@ var TextComponent = forwardRef7(
         $preventUserSelect: preventUserSelect,
         $prominence: prominence,
         $variant: variant,
-        as: renderAs ?? DEFAULT_ELEMENT3,
+        as: renderAs ?? DEFAULT_ELEMENT2,
         ...otherProps
       }
     );
@@ -6235,21 +6553,408 @@ var TextComponent = forwardRef7(
 TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
+// src/components/Menu/MenuLabel.tsx
+import { jsx as jsx174 } from "react/jsx-runtime";
+var StyledMenuLabel = styled19(DropdownMenuLabel)`
+  padding: var(--space-02);
+`;
+var MenuLabel = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx174(
+    StyledMenuLabel,
+    {
+      asChild: true,
+      ...props,
+      children: /* @__PURE__ */ jsx174(
+        Text,
+        {
+          variant: "label3",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+};
+MenuLabel.displayName = "MenuLabel";
+
+// src/components/Menu/SubMenu.tsx
+import { useState as useState4 } from "react";
+import styled22 from "styled-components";
+import {
+  DropdownMenuPortal as DropdownMenuPortal2,
+  DropdownMenuSub,
+  DropdownMenuGroup,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuItem
+} from "@radix-ui/react-dropdown-menu";
+
+// src/components/Menu/MenuItemButton.tsx
+import { forwardRef as forwardRef8 } from "react";
+import styled20 from "styled-components";
+import { isNotNil as isNotNil7, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
+import { jsx as jsx175, jsxs as jsxs9 } from "react/jsx-runtime";
+var StyledButton3 = styled20(Button)`
+  --menu-item-border-radius: var(--border-radius-01);
+  --menu-item-gap: var(--space-01);
+  --menu-item-inner-gap: var(--space-04);
+  --menu-item-disabled-bg: var(--color-white);
+
+  text-align: left;
+  align-items: left;
+  border-radius: var(--menu-item-border-radius);
+  display: flex;
+
+  &[aria-disabled='true'] {
+    background-color: var(--menu-item-disabled-bg);
+  }
+
+  ${({ $isGated }) => isNotUndefined5($isGated) && $isGated ? `color: var(--color-text);` : ""}
+`;
+var StyledMenuContent = styled20.div`
+  display: grid;
+  grid-template-areas:
+    'label badge'
+    'description badge';
+  grid-template-columns: 1fr auto;
+  position: relative;
+  align-content: center;
+`;
+var StyledBadgeContainer = styled20.div`
+  grid-area: badge;
+  align-self: start;
+  justify-self: end;
+  margin-left: var(--menu-item-inner-gap);
+`;
+var MenuItemButton = forwardRef8(({ children, appearance, command, ...props }, ref) => {
+  let { colorScheme, badge } = props;
+  if (appearance === "dangerous") {
+    if (isNotUndefined5(colorScheme)) {
+      console.warn("colorScheme prop is ignored when appearance is dangerous");
+    }
+    colorScheme = "error";
+  }
+  if (appearance === "gated") {
+    if (isNotUndefined5(colorScheme)) {
+      console.warn("colorScheme prop is ignored when appearance is gated");
+    }
+    colorScheme = "purple";
+    badge = /* @__PURE__ */ jsx175(Icon, { type: "sparkle" });
+  }
+  return /* @__PURE__ */ jsx175(
+    StyledButton3,
+    {
+      ...props,
+      ref,
+      $isGated: appearance === "gated",
+      colorScheme: colorScheme ?? "default",
+      fullWidth: true,
+      variant: "ghost",
+      children: /* @__PURE__ */ jsxs9(StyledMenuContent, { children: [
+        children,
+        isNotNil7(badge) || isNotNil7(command) ? /* @__PURE__ */ jsx175(StyledBadgeContainer, { children: badge ?? command }) : null
+      ] })
+    }
+  );
+});
+MenuItemButton.displayName = "MenuItemButton";
+
+// src/components/Menu/MenuItemLabelDescription.tsx
+import styled21 from "styled-components";
+import { jsx as jsx176 } from "react/jsx-runtime";
+var StyledMenuItemLabel = styled21(Text).attrs({ variant: "label3" })`
+  grid-area: label;
+`;
+var StyledMenuItemDescription = styled21(Text).attrs({
+  variant: "label4",
+  prominence: "secondary"
+})`
+  margin-top: var(--menu-item-gap);
+  grid-area: description;
+`;
+var MenuItemLabel = ({ children }) => {
+  return /* @__PURE__ */ jsx176(StyledMenuItemLabel, { children });
+};
+var MenuItemDescription = ({ children }) => {
+  return /* @__PURE__ */ jsx176(StyledMenuItemDescription, { children });
+};
+
+// src/components/Menu/SubMenu.tsx
+import { jsx as jsx177, jsxs as jsxs10 } from "react/jsx-runtime";
+var SubMenuContent = styled22(DropdownMenuSubContent)`
+  ${menuContentCss}
+  width: 298px;
+
+  ${mq.smAndDown} {
+    transform: translateX(-100%) !important;
+  }
+`;
+var StyledMobileSubMenuItems = styled22.div`
+  margin-left: var(--space-04);
+`;
+var StyledSubTrigger = styled22(DropdownMenuSubTrigger)`
+  outline: none;
+
+  &[data-state='open'],
+  &[data-highlighted] {
+    background-color: var(--button-color-bg-hover);
+  }
+`;
+var SubMenuTrigger = (props) => {
+  const { isSmAndUp } = useMq();
+  const Trigger2 = isSmAndUp ? StyledSubTrigger : DropdownMenuItem;
+  return /* @__PURE__ */ jsx177(Trigger2, { asChild: true, children: /* @__PURE__ */ jsx177(
+    MenuItemButton,
+    {
+      ...props,
+      rightIcon: /* @__PURE__ */ jsx177(Icon, { type: "caret-right" })
+    }
+  ) });
+};
+var SubMenu = ({
+  label,
+  description,
+  children,
+  onOpenChange = () => null,
+  ...props
+}) => {
+  const { isSmAndUp } = useMq();
+  const [isExpanded, setIsExpanded] = useState4(false);
+  return isSmAndUp ? /* @__PURE__ */ jsxs10(DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ jsxs10(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ jsx177(MenuItemLabel, { children: label }),
+      /* @__PURE__ */ jsx177(MenuItemDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsx177(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx177(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ jsxs10(DropdownMenuGroup, { children: [
+    /* @__PURE__ */ jsxs10(
+      SubMenuTrigger,
+      {
+        ...props,
+        onClick: (event) => {
+          event.preventDefault();
+          setIsExpanded((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ jsx177(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ jsx177(MenuItemDescription, { children: description })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx177(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+  ] });
+};
+SubMenu.displayName = "SubMenu";
+
+// src/components/Menu/MenuItem.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { DropdownMenuItem as DropdownMenuItem2 } from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx178 } from "react/jsx-runtime";
+var MenuItem = forwardRef9(
+  ({ onSelect = () => null, ...props }, ref) => {
+    return /* @__PURE__ */ jsx178(
+      DropdownMenuItem2,
+      {
+        asChild: true,
+        onSelect,
+        children: /* @__PURE__ */ jsx178(
+          MenuItemButton,
+          {
+            ...props,
+            ref,
+            leftIcon: props.icon
+          }
+        )
+      }
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+
+// src/components/Menu/MenuRadioGroup.tsx
+import {
+  DropdownMenuRadioGroup
+} from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx179, jsxs as jsxs11 } from "react/jsx-runtime";
+var MenuRadioGroup = ({ children, label, ...props }) => {
+  return /* @__PURE__ */ jsxs11(DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ jsx179(MenuLabel, { children: label }),
+    children
+  ] });
+};
+MenuRadioGroup.displayName = "MenuRadioGroup";
+
+// src/components/Menu/RadioMenuItem.tsx
+import {
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioItem
+} from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx180 } from "react/jsx-runtime";
+var RadioMenuItem = ({
+  onSelect,
+  value,
+  indicator = /* @__PURE__ */ jsx180(
+    Icon,
+    {
+      size: "sm",
+      type: "checkmark"
+    }
+  ),
+  ...props
+}) => {
+  const extraProps = onSelect ? { onSelect } : {};
+  return /* @__PURE__ */ jsx180(
+    DropdownMenuRadioItem,
+    {
+      ...extraProps,
+      value,
+      children: /* @__PURE__ */ jsx180(
+        MenuItemButton,
+        {
+          ...props,
+          rightIcon: /* @__PURE__ */ jsx180(DropdownMenuItemIndicator, { children: indicator })
+        }
+      )
+    }
+  );
+};
+RadioMenuItem.displayName = "RadioMenuItem";
+
+// src/components/Menu/CheckboxMenuItem.tsx
+import {
+  DropdownMenuItemIndicator as DropdownMenuItemIndicator2,
+  DropdownMenuCheckboxItem
+} from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx181 } from "react/jsx-runtime";
+var CheckboxMenuItem = ({
+  onSelect,
+  checked,
+  onCheckedChange,
+  indicator = /* @__PURE__ */ jsx181(
+    Icon,
+    {
+      size: "sm",
+      type: "checkmark"
+    }
+  ),
+  ...props
+}) => {
+  let extraProps = {};
+  if (onSelect) {
+    extraProps = {
+      ...extraProps,
+      onCheckedChange,
+      onSelect
+    };
+  }
+  return /* @__PURE__ */ jsx181(
+    DropdownMenuCheckboxItem,
+    {
+      ...extraProps,
+      checked,
+      children: /* @__PURE__ */ jsx181(
+        MenuItemButton,
+        {
+          ...props,
+          rightIcon: /* @__PURE__ */ jsx181(DropdownMenuItemIndicator2, { children: indicator })
+        }
+      )
+    }
+  );
+};
+CheckboxMenuItem.displayName = "CheckboxMenuItem";
+
+// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+import styled23 from "styled-components";
+import { isNotNil as isNotNil8 } from "@wistia/type-guards";
+import { jsx as jsx182 } from "react/jsx-runtime";
+var VisuallyHidden = styled23.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled23.div({
+  "&:not(:focus-within)": visuallyHiddenStyle
+});
+var ScreenReaderOnly = ({
+  text,
+  children,
+  focusable = false,
+  ...otherProps
+}) => {
+  const accessibleText = isNotNil8(text) ? text : children;
+  if (focusable) {
+    return /* @__PURE__ */ jsx182(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+  }
+  return /* @__PURE__ */ jsx182(VisuallyHidden, { ...otherProps, children: accessibleText });
+};
+ScreenReaderOnly.displayName = "ScreenReaderOnly";
+
+// src/components/Stack/Stack.tsx
+import { forwardRef as forwardRef10 } from "react";
+import styled24 from "styled-components";
+import { jsx as jsx183 } from "react/jsx-runtime";
+var DEFAULT_ELEMENT3 = "div";
+var StyledStack = styled24.div`
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
+  gap: ${({ $gap }) => `var(--${$gap})`};
+
+  > * {
+    flex: 1;
+  }
+`;
+var StackComponent = forwardRef10(
+  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
+    const responsiveGap = useResponsiveProp(gap);
+    const responsiveDirection = useResponsiveProp(direction);
+    return /* @__PURE__ */ jsx183(
+      StyledStack,
+      {
+        ref,
+        $direction: responsiveDirection,
+        $gap: responsiveGap,
+        as: renderAs ?? DEFAULT_ELEMENT3,
+        ...props
+      }
+    );
+  }
+);
+StackComponent.displayName = "Stack";
+var Stack = makePolymorphic(StackComponent);
+
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled18 from "styled-components";
-import { isNotNil as isNotNil7 } from "@wistia/type-guards";
-import { jsx as jsx173, jsxs as jsxs7 } from "react/jsx-runtime";
+import styled25 from "styled-components";
+import { isNotNil as isNotNil9 } from "@wistia/type-guards";
+import { jsx as jsx184, jsxs as jsxs12 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx173("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx173("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__ */ jsx184(
+      "g",
+      {
+        "data-testid": "ui-wistia-logo-brandmark",
+        fill: brandmarkColor,
+        children: /* @__PURE__ */ jsx184("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__ */ jsx173("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx173("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" }) });
+  return /* @__PURE__ */ jsx184(
+    "g",
+    {
+      "data-testid": "ui-wistia-logo-brandmark",
+      fill: brandmarkColor,
+      children: /* @__PURE__ */ jsx184("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" })
+    }
+  );
 };
 var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx173("g", { fill: logotypeColor, children: /* @__PURE__ */ jsx173("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" }) });
+  return /* @__PURE__ */ jsx184(
+    "g",
+    {
+      "data-testid": "ui-wistia-logo-logotype",
+      fill: logotypeColor,
+      children: /* @__PURE__ */ jsx184("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" })
+    }
+  );
 };
 var computedViewBox = (iconOnly) => {
   if (iconOnly) {
@@ -6257,7 +6962,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled18.svg`
+var WistiaLogoComponent = styled25.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -6299,7 +7004,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs7(
+  const Logo = /* @__PURE__ */ jsxs12(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -6309,14 +7014,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx173("title", { children: title }),
-        isNotNil7(description) ? /* @__PURE__ */ jsx173("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx184("title", { children: title }),
+        isNotNil9(description) ? /* @__PURE__ */ jsx184("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx173("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx184("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 export {
@@ -6325,6 +7030,8 @@ export {
   Box,
   Button,
   ButtonGroup,
+  Checkbox,
+  CheckboxMenuItem,
   ColorSchemeWrapper,
   Divider,
   Ellipsis,
@@ -6333,8 +7040,16 @@ export {
   IconButton,
   Label,
   Link,
+  Menu,
+  MenuItem,
+  MenuItemDescription,
+  MenuItemLabel,
+  MenuLabel,
+  MenuRadioGroup,
+  RadioMenuItem,
   ScreenReaderOnly,
   Stack,
+  SubMenu,
   Text,
   Tooltip,
   UIProvider,