@wistia/ui 0.0.15 → 0.0.16

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.0.15
+ * @license @wistia/ui v0.0.16
  *
  * Copyright (c) 2024-2024, Wistia, Inc. and its affiliates.
  *
@@ -44,6 +44,8 @@ __export(src_exports, {
   Box: () => Box,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
+  Checkbox: () => Checkbox,
+  CheckboxMenuItem: () => CheckboxMenuItem,
   ColorSchemeWrapper: () => ColorSchemeWrapper,
   Divider: () => Divider,
   Ellipsis: () => Ellipsis,
@@ -52,8 +54,16 @@ __export(src_exports, {
   IconButton: () => IconButton,
   Label: () => Label,
   Link: () => Link,
+  Menu: () => Menu,
+  MenuItem: () => MenuItem,
+  MenuItemDescription: () => MenuItemDescription,
+  MenuItemLabel: () => MenuItemLabel,
+  MenuLabel: () => MenuLabel,
+  MenuRadioGroup: () => MenuRadioGroup,
+  RadioMenuItem: () => RadioMenuItem,
   ScreenReaderOnly: () => ScreenReaderOnly,
   Stack: () => Stack,
+  SubMenu: () => SubMenu,
   Text: () => Text,
   Tooltip: () => Tooltip,
   UIProvider: () => UIProvider,
@@ -5540,6 +5550,7 @@ var StyledButton = import_styled_components19.default.button`
   ${({ $unstyled }) => !$unstyled && buttonBaseStyles}
   ${({ $fullWidth }) => $fullWidth && "width: 100%;"}
   position: relative;
+  text-align: center;
 `;
 var StyledButtonContent = import_styled_components19.default.div`
   align-items: center;
@@ -5555,7 +5566,6 @@ var StyledButtonContent = import_styled_components19.default.div`
 `;
 var StyledButtonContentLabel = import_styled_components19.default.span`
   flex: 1;
-  text-align: center;
 `;
 var StyledButtonLoading = import_styled_components19.default.div`
   position: absolute;
@@ -5727,14 +5737,237 @@ var ButtonGroup = ({
 };
 ButtonGroup.displayName = "ButtonGroup";
 
-// src/components/Divider/Divider.tsx
+// src/components/Checkbox/Checkbox.tsx
+var import_react11 = require("react");
+var import_react_checkbox = require("@radix-ui/react-checkbox");
+var import_styled_components23 = __toESM(require("styled-components"));
+var import_type_guards15 = require("@wistia/type-guards");
+
+// src/components/Label/Label.tsx
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_jsx_runtime164 = require("react/jsx-runtime");
+var requiredStyle = import_styled_components21.css`
+  &::after {
+    color: var(--color-text-error);
+    display: inline;
+    padding-left: var(--space-01);
+    content: '*';
+  }
+`;
+var disabledStyle = import_styled_components21.css`
+  color: var(--color-text-disabled);
+`;
+var SPACE_BETWEEN_LABEL_AND_INPUT = "var(--space-02)";
+var StyledLabel = import_styled_components21.default.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__ */ (0, import_jsx_runtime164.jsx)(
+  StyledLabel,
+  {
+    $screenReaderOnly: screenReaderOnly,
+    disabled,
+    htmlFor,
+    required,
+    ...otherProps,
+    children
+  }
+);
+Label.displayName = "Label";
+
+// src/components/Label/LabelDescription.tsx
+var import_styled_components22 = __toESM(require("styled-components"));
+var import_type_guards14 = require("@wistia/type-guards");
+var import_jsx_runtime165 = require("react/jsx-runtime");
+var StyledLabelDescription = import_styled_components22.default.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 ((0, import_type_guards14.isNil)(children)) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(StyledLabelDescription, { ...props, children });
+};
+LabelDescription.displayName = "LabelDescription";
+
+// src/components/Checkbox/Checkbox.tsx
+var import_jsx_runtime166 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+  "svg",
+  {
+    fill: "inherit",
+    height: "8",
+    viewBox: "0 0 10 8",
+    width: "10",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime166.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"
+      }
+    )
+  }
+);
+var StyledCheckboxWrapper = import_styled_components23.default.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 = (0, import_styled_components23.default)(import_react_checkbox.Root)`
+  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 = (0, import_styled_components23.default)(import_react_checkbox.Indicator)`
+  display: flex;
+`;
+var StyledLabelWrapper = import_styled_components23.default.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: var(--space-02);
+`;
+var Checkbox = (0, import_react11.forwardRef)(
+  ({
+    checked,
+    disabled = false,
+    forceState,
+    id,
+    label = "default",
+    description,
+    name,
+    onChange,
+    required = false,
+    value = "false",
+    ...otherProps
+  }, ref) => {
+    const generatedId = (0, import_react11.useId)();
+    const computedId = (0, import_type_guards15.isNonEmptyString)(id) ? id : `vhs-collapsible-group-${generatedId}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(StyledCheckboxWrapper, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+        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__ */ (0, import_jsx_runtime166.jsx)(StyledCheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(CheckIcon, {}) })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(StyledLabelWrapper, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+          Label,
+          {
+            disabled,
+            htmlFor: computedId,
+            required,
+            children: label
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(LabelDescription, { children: description })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/Divider/Divider.tsx
+var import_styled_components24 = __toESM(require("styled-components"));
+var import_jsx_runtime167 = require("react/jsx-runtime");
 var sizeToPixelMap = {
   lg: 4,
   sm: 1
 };
-var DividerComponent = import_styled_components21.default.hr`
+var DividerComponent = import_styled_components24.default.hr`
   background: none;
   border-bottom: none;
   border-left: none;
@@ -5749,7 +5982,7 @@ var DividerComponent = import_styled_components21.default.hr`
 `;
 var Divider = ({ size = "sm", ...otherProps }) => {
   const responsiveSize = useResponsiveProp(size);
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
     DividerComponent,
     {
       $borderHeight: sizeToPixelMap[responsiveSize],
@@ -5760,10 +5993,10 @@ var Divider = ({ size = "sm", ...otherProps }) => {
 Divider.displayName = "Divider";
 
 // src/components/Ellipsis/Ellipsis.tsx
-var import_type_guards14 = require("@wistia/type-guards");
-var import_styled_components22 = __toESM(require("styled-components"));
-var import_jsx_runtime165 = require("react/jsx-runtime");
-var ellipsisStyle = import_styled_components22.css`
+var import_type_guards16 = require("@wistia/type-guards");
+var import_styled_components25 = __toESM(require("styled-components"));
+var import_jsx_runtime168 = require("react/jsx-runtime");
+var ellipsisStyle = import_styled_components25.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5786,14 +6019,14 @@ var ellipsisStyle = import_styled_components22.css`
     }
   }
 `;
-var ellipsisFlexParentStyle = import_styled_components22.css`
+var ellipsisFlexParentStyle = import_styled_components25.css`
   min-width: 0;
 `;
-var EllipsisComponent = import_styled_components22.default.div`
+var EllipsisComponent = import_styled_components25.default.div`
   ${ellipsisStyle};
   ${({ $lines }) => {
-  if ((0, import_type_guards14.isNotNil)($lines)) {
-    return import_styled_components22.css`
+  if ((0, import_type_guards16.isNotNil)($lines)) {
+    return import_styled_components25.css`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
         display: -webkit-box;
@@ -5803,7 +6036,7 @@ var EllipsisComponent = import_styled_components22.default.div`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
   EllipsisComponent,
   {
     $lines: lines,
@@ -5814,8 +6047,8 @@ var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, impor
 Ellipsis.displayName = "Ellipsis";
 
 // src/components/Heading/Heading.tsx
-var import_react11 = require("react");
-var import_styled_components23 = __toESM(require("styled-components"));
+var import_react12 = require("react");
+var import_styled_components26 = __toESM(require("styled-components"));
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -5823,44 +6056,44 @@ var makePolymorphic = (component) => {
 };
 
 // src/components/Heading/Heading.tsx
-var import_jsx_runtime166 = require("react/jsx-runtime");
-var heroStyle = import_styled_components23.css`
+var import_jsx_runtime169 = require("react/jsx-runtime");
+var heroStyle = import_styled_components26.css`
   --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 = import_styled_components23.css`
+var heading1TextStyle = import_styled_components26.css`
   --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 = import_styled_components23.css`
+var heading2TextStyle = import_styled_components26.css`
   --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 = import_styled_components23.css`
+var heading3TextStyle = import_styled_components26.css`
   --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 = import_styled_components23.css`
+var heading4TextStyle = import_styled_components26.css`
   --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 = import_styled_components23.css`
+var heading5TextStyle = import_styled_components26.css`
   --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 = import_styled_components23.css`
+var heading6TextStyle = import_styled_components26.css`
   --font-family: var(--typography-heading-6-family);
   --font-size: var(--typography-heading-6-size);
   --font-weight: var(--typography-heading-6-weight);
@@ -5876,7 +6109,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT = "h1";
-var StyledHeading = import_styled_components23.default.div`
+var StyledHeading = import_styled_components26.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -5885,16 +6118,16 @@ var StyledHeading = import_styled_components23.default.div`
   color: var(--color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components23.css`
+  ${({ $inline }) => $inline && import_styled_components26.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components23.css`
+  ${({ $disabled }) => $disabled && import_styled_components26.css`
       color: var(--color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components23.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components26.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components23.css`
+  ${({ $align }) => import_styled_components26.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -5908,7 +6141,7 @@ var variantElementMap = {
   heading5: "h5",
   heading6: "h6"
 };
-var HeadingComponent = (0, import_react11.forwardRef)(
+var HeadingComponent = (0, import_react12.forwardRef)(
   ({
     align = "left",
     colorScheme = "inherit",
@@ -5919,7 +6152,7 @@ var HeadingComponent = (0, import_react11.forwardRef)(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
     StyledHeading,
     {
       ref,
@@ -5939,21 +6172,21 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/IconButton/IconButton.tsx
-var import_react12 = require("react");
-var import_styled_components25 = __toESM(require("styled-components"));
+var import_react13 = require("react");
+var import_styled_components28 = __toESM(require("styled-components"));
 
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
-var import_styled_components24 = __toESM(require("styled-components"));
-var import_jsx_runtime167 = require("react/jsx-runtime");
-var CompactTooltipStyles = import_styled_components24.css`
+var import_styled_components27 = __toESM(require("styled-components"));
+var import_jsx_runtime170 = require("react/jsx-runtime");
+var CompactTooltipStyles = import_styled_components27.css`
   --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 = (0, import_styled_components24.default)(import_react_tooltip2.Content)`
+var StyledContent = (0, import_styled_components27.default)(import_react_tooltip2.Content)`
   --tooltip-font-family: var(--typography-family-default);
   --tooltip-border-radius: var(--border-radius-05);
   --tooltip-bg: var(--color-bg-tooltip);
@@ -6011,14 +6244,14 @@ var Tooltip = ({
   if (forceOpen === true) {
     rootProps.open = true;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
     import_react_tooltip2.Root,
     {
       delayDuration: delay,
       ...rootProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_react_tooltip2.Trigger, { asChild: true, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_react_tooltip2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)(
           StyledContent,
           {
             $compact: compact,
@@ -6026,7 +6259,7 @@ var Tooltip = ({
             sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
             children: [
               content,
-              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+              !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_react_tooltip2.Arrow, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
                 "svg",
                 {
                   fill: "var(--tooltip-bg)",
@@ -6035,7 +6268,7 @@ var Tooltip = ({
                   viewBox: "0 0 12 8",
                   width: "12",
                   xmlns: "http://www.w3.org/2000/svg",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime167.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_runtime170.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
             ]
@@ -6048,8 +6281,8 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/IconButton/IconButton.tsx
-var import_jsx_runtime168 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components25.default)(Button)`
+var import_jsx_runtime171 = require("react/jsx-runtime");
+var StyledButton2 = (0, import_styled_components28.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -6063,10 +6296,10 @@ var StyledButton2 = (0, import_styled_components25.default)(Button)`
   align-items: center;
   line-height: 1;
 `;
-var IconButton = (0, import_react12.forwardRef)(
+var IconButton = (0, import_react13.forwardRef)(
   ({ children, label, disableTooltip = false, size = "md", ...props }, ref) => {
     const responsiveSize = useResponsiveProp(size);
-    const button = /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
       StyledButton2,
       {
         ...props,
@@ -6074,7 +6307,7 @@ var IconButton = (0, import_react12.forwardRef)(
         "aria-label": label,
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
-        children: (0, import_react12.cloneElement)(import_react12.Children.only(children), {
+        children: (0, import_react13.cloneElement)(import_react13.Children.only(children), {
           size: responsiveSize
         })
       }
@@ -6082,211 +6315,212 @@ var IconButton = (0, import_react12.forwardRef)(
     if (disableTooltip) {
       return button;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(Tooltip, { content: label, children: button });
+    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(Tooltip, { content: label, children: button });
   }
 );
 IconButton.displayName = "IconButton";
 
-// src/components/Label/Label.tsx
-var import_styled_components26 = __toESM(require("styled-components"));
-var import_jsx_runtime169 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components26.css`
-  &::after {
-    color: red; /* TODO need a color for this */
-    display: inline;
-    padding-left: var(--space-01);
-    content: '*';
+// src/components/Menu/Menu.tsx
+var import_styled_components29 = __toESM(require("styled-components"));
+var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
+var import_type_guards17 = require("@wistia/type-guards");
+var import_jsx_runtime172 = require("react/jsx-runtime");
+var open = import_styled_components29.keyframes`
+  from {
+    opacity: 0;
+    transform: scale(.97) translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
   }
 `;
-var disabledStyle = import_styled_components26.css`
-  color: var(--color-text-disabled);
+var close = import_styled_components29.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 = import_styled_components26.default.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);
-  margin-bottom: ${SPACE_BETWEEN_LABEL_AND_INPUT};
-  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};
+var menuContentCss = import_styled_components29.css`
+  --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__ */ (0, import_jsx_runtime169.jsx)(
-  StyledLabel,
-  {
-    disabled,
-    htmlFor,
-    required,
-    screenReaderOnly,
-    ...otherProps,
-    children
+  hr {
+    margin: var(--space-02) 0;
   }
-);
-Label.displayName = "Label";
-
-// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components27 = __toESM(require("styled-components"));
-var import_type_guards15 = require("@wistia/type-guards");
-var import_jsx_runtime170 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components27.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components27.default.div({
-  "&:not(:focus-within)": visuallyHiddenStyle
-});
-var ScreenReaderOnly = ({
-  text,
+`;
+var MenuContent = (0, import_styled_components29.default)(import_react_dropdown_menu.DropdownMenuContent)`
+  ${menuContentCss}
+`;
+var Menu = ({
+  align = "start",
   children,
-  focusable = false,
-  ...otherProps
+  trigger,
+  label,
+  isOpen,
+  triggerProps = {},
+  onOpenChange,
+  onInteractOutside,
+  ...props
 }) => {
-  const accessibleText = (0, import_type_guards15.isNotNil)(text) ? text : children;
-  if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
+    import_react_dropdown_menu.DropdownMenu,
+    {
+      modal: false,
+      ...(0, import_type_guards17.isNotNil)(onOpenChange) && (0, import_type_guards17.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {},
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards17.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+          Button,
+          {
+            "aria-expanded": isOpen,
+            forceState: isOpen ? "active" : void 0,
+            rightIcon: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(Icon, { type: "caret-down" }),
+            ...triggerProps,
+            children: label
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(import_react_dropdown_menu.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+          MenuContent,
+          {
+            ...props,
+            align,
+            onFocusOutside: (event) => {
+              event.preventDefault();
+            },
+            sideOffset: 6,
+            children
+          }
+        ) })
+      ]
+    }
+  );
 };
-ScreenReaderOnly.displayName = "ScreenReaderOnly";
+Menu.displayName = "Menu";
 
-// src/components/Stack/Stack.tsx
-var import_react13 = require("react");
-var import_styled_components28 = __toESM(require("styled-components"));
-var import_jsx_runtime171 = require("react/jsx-runtime");
-var DEFAULT_ELEMENT2 = "div";
-var StyledStack = import_styled_components28.default.div`
-  display: flex;
-  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
-  gap: ${({ $gap }) => `var(--${$gap})`};
-
-  > * {
-    flex: 1;
-  }
-`;
-var StackComponent = (0, import_react13.forwardRef)(
-  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
-    const responsiveGap = useResponsiveProp(gap);
-    const responsiveDirection = useResponsiveProp(direction);
-    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
-      StyledStack,
-      {
-        ref,
-        $direction: responsiveDirection,
-        $gap: responsiveGap,
-        as: renderAs ?? DEFAULT_ELEMENT2,
-        ...props
-      }
-    );
-  }
-);
-StackComponent.displayName = "Stack";
-var Stack = makePolymorphic(StackComponent);
+// src/components/Menu/MenuLabel.tsx
+var import_styled_components31 = __toESM(require("styled-components"));
+var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
 
 // src/components/Text/Text.tsx
 var import_react14 = require("react");
-var import_styled_components29 = __toESM(require("styled-components"));
-var import_jsx_runtime172 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components29.css`
+var import_styled_components30 = __toESM(require("styled-components"));
+var import_jsx_runtime173 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components30.css`
   > strong,
   b {
     font-weight: var(--typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components29.css`
+var labelBoldStyles = import_styled_components30.css`
   > strong,
   b {
     font-weight: var(--typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components29.css`
+var body1TextStyle = import_styled_components30.css`
   --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 = import_styled_components29.css`
+var body2TextStyle = import_styled_components30.css`
   --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 = import_styled_components29.css`
+var body3TextStyle = import_styled_components30.css`
   --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 = import_styled_components29.css`
+var body4TextStyle = import_styled_components30.css`
   --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 = import_styled_components29.css`
+var label1TextStyle = import_styled_components30.css`
   --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 = import_styled_components29.css`
+var label2TextStyle = import_styled_components30.css`
   --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 = import_styled_components29.css`
+var label3TextStyle = import_styled_components30.css`
   --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 = import_styled_components29.css`
+var label4TextStyle = import_styled_components30.css`
   --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 = import_styled_components29.css`
+var body1MonoTextStyle = import_styled_components30.css`
   ${body1TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components29.css`
+var body2MonoTextStyle = import_styled_components30.css`
   ${body2TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components29.css`
+var body3MonoTextStyle = import_styled_components30.css`
   ${body3TextStyle};
   --font-family: var(--typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components29.css`
+var body4MonoTextStyle = import_styled_components30.css`
   ${body4TextStyle};
   --font-family: var(--typography-family-mono);
 `;
@@ -6304,13 +6538,13 @@ var variantStyleMap2 = {
   label3: label3TextStyle,
   label4: label4TextStyle
 };
-var highContrastProminenceStyle = import_styled_components29.css`
+var highContrastProminenceStyle = import_styled_components30.css`
   --text-color: var(--color-text-high-contrast);
 `;
-var vibrantProminenceStyle = import_styled_components29.css`
+var vibrantProminenceStyle = import_styled_components30.css`
   --text-color: var(--color-text);
 `;
-var secondaryProminenceStyle = import_styled_components29.css`
+var secondaryProminenceStyle = import_styled_components30.css`
   --text-color: var(--color-text-secondary);
 `;
 var prominenceMap = {
@@ -6318,7 +6552,7 @@ var prominenceMap = {
   vibrant: vibrantProminenceStyle,
   secondary: secondaryProminenceStyle
 };
-var StyledText = import_styled_components29.default.div`
+var StyledText = import_styled_components30.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -6330,23 +6564,23 @@ var StyledText = import_styled_components29.default.div`
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $prominence }) => prominenceMap[$prominence]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components29.css`
+  ${({ $inline }) => $inline && import_styled_components30.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components29.css`
+  ${({ $disabled }) => $disabled && import_styled_components30.css`
       --text-color: var(--color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components29.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components30.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components29.css`
+  ${({ $align }) => import_styled_components30.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components29.css`
+  ${({ as }) => as === "p" && import_styled_components30.css`
       display: block;
     `}
 `;
-var DEFAULT_ELEMENT3 = "div";
+var DEFAULT_ELEMENT2 = "div";
 var TextComponent = (0, import_react14.forwardRef)(
   ({
     align = "left",
@@ -6360,7 +6594,7 @@ var TextComponent = (0, import_react14.forwardRef)(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
       StyledText,
       {
         ref,
@@ -6372,7 +6606,7 @@ var TextComponent = (0, import_react14.forwardRef)(
         $preventUserSelect: preventUserSelect,
         $prominence: prominence,
         $variant: variant,
-        as: renderAs ?? DEFAULT_ELEMENT3,
+        as: renderAs ?? DEFAULT_ELEMENT2,
         ...otherProps
       }
     );
@@ -6381,21 +6615,393 @@ var TextComponent = (0, import_react14.forwardRef)(
 TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
+// src/components/Menu/MenuLabel.tsx
+var import_jsx_runtime174 = require("react/jsx-runtime");
+var StyledMenuLabel = (0, import_styled_components31.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+  padding: var(--space-02);
+`;
+var MenuLabel = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+    StyledMenuLabel,
+    {
+      asChild: true,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+        Text,
+        {
+          variant: "label3",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+};
+MenuLabel.displayName = "MenuLabel";
+
+// src/components/Menu/SubMenu.tsx
+var import_react16 = require("react");
+var import_styled_components34 = __toESM(require("styled-components"));
+var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
+
+// src/components/Menu/MenuItemButton.tsx
+var import_react15 = require("react");
+var import_styled_components32 = __toESM(require("styled-components"));
+var import_type_guards18 = require("@wistia/type-guards");
+var import_jsx_runtime175 = require("react/jsx-runtime");
+var StyledButton3 = (0, import_styled_components32.default)(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 }) => (0, import_type_guards18.isNotUndefined)($isGated) && $isGated ? `color: var(--color-text);` : ""}
+`;
+var StyledMenuContent = import_styled_components32.default.div`
+  display: grid;
+  grid-template-areas:
+    'label badge'
+    'description badge';
+  grid-template-columns: 1fr auto;
+  position: relative;
+  align-content: center;
+`;
+var StyledBadgeContainer = import_styled_components32.default.div`
+  grid-area: badge;
+  align-self: start;
+  justify-self: end;
+  margin-left: var(--menu-item-inner-gap);
+`;
+var MenuItemButton = (0, import_react15.forwardRef)(({ children, appearance, command, ...props }, ref) => {
+  let { colorScheme, badge } = props;
+  if (appearance === "dangerous") {
+    if ((0, import_type_guards18.isNotUndefined)(colorScheme)) {
+      console.warn("colorScheme prop is ignored when appearance is dangerous");
+    }
+    colorScheme = "error";
+  }
+  if (appearance === "gated") {
+    if ((0, import_type_guards18.isNotUndefined)(colorScheme)) {
+      console.warn("colorScheme prop is ignored when appearance is gated");
+    }
+    colorScheme = "purple";
+    badge = /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Icon, { type: "sparkle" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
+    StyledButton3,
+    {
+      ...props,
+      ref,
+      $isGated: appearance === "gated",
+      colorScheme: colorScheme ?? "default",
+      fullWidth: true,
+      variant: "ghost",
+      children: /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(StyledMenuContent, { children: [
+        children,
+        (0, import_type_guards18.isNotNil)(badge) || (0, import_type_guards18.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null
+      ] })
+    }
+  );
+});
+MenuItemButton.displayName = "MenuItemButton";
+
+// src/components/Menu/MenuItemLabelDescription.tsx
+var import_styled_components33 = __toESM(require("styled-components"));
+var import_jsx_runtime176 = require("react/jsx-runtime");
+var StyledMenuItemLabel = (0, import_styled_components33.default)(Text).attrs({ variant: "label3" })`
+  grid-area: label;
+`;
+var StyledMenuItemDescription = (0, import_styled_components33.default)(Text).attrs({
+  variant: "label4",
+  prominence: "secondary"
+})`
+  margin-top: var(--menu-item-gap);
+  grid-area: description;
+`;
+var MenuItemLabel = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(StyledMenuItemLabel, { children });
+};
+var MenuItemDescription = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(StyledMenuItemDescription, { children });
+};
+
+// src/components/Menu/SubMenu.tsx
+var import_jsx_runtime177 = require("react/jsx-runtime");
+var SubMenuContent = (0, import_styled_components34.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+  ${menuContentCss}
+  width: 298px;
+
+  ${mq.smAndDown} {
+    transform: translateX(-100%) !important;
+  }
+`;
+var StyledMobileSubMenuItems = import_styled_components34.default.div`
+  margin-left: var(--space-04);
+`;
+var StyledSubTrigger = (0, import_styled_components34.default)(import_react_dropdown_menu3.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 : import_react_dropdown_menu3.DropdownMenuItem;
+  return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Trigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
+    MenuItemButton,
+    {
+      ...props,
+      rightIcon: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Icon, { type: "caret-right" })
+    }
+  ) });
+};
+var SubMenu = ({
+  label,
+  description,
+  children,
+  onOpenChange = () => null,
+  ...props
+}) => {
+  const { isSmAndUp } = useMq();
+  const [isExpanded, setIsExpanded] = (0, import_react16.useState)(false);
+  return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(SubMenuTrigger, { ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(MenuItemLabel, { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(MenuItemDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(SubMenuContent, { children }) })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(
+      SubMenuTrigger,
+      {
+        ...props,
+        onClick: (event) => {
+          event.preventDefault();
+          setIsExpanded((prev) => !prev);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(MenuItemLabel, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(MenuItemDescription, { children: description })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
+  ] });
+};
+SubMenu.displayName = "SubMenu";
+
+// src/components/Menu/MenuItem.tsx
+var import_react17 = require("react");
+var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
+var import_jsx_runtime178 = require("react/jsx-runtime");
+var MenuItem = (0, import_react17.forwardRef)(
+  ({ onSelect = () => null, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+      import_react_dropdown_menu4.DropdownMenuItem,
+      {
+        asChild: true,
+        onSelect,
+        children: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+          MenuItemButton,
+          {
+            ...props,
+            ref,
+            leftIcon: props.icon
+          }
+        )
+      }
+    );
+  }
+);
+MenuItem.displayName = "MenuItem";
+
+// src/components/Menu/MenuRadioGroup.tsx
+var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
+var import_jsx_runtime179 = require("react/jsx-runtime");
+var MenuRadioGroup = ({ children, label, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(MenuLabel, { children: label }),
+    children
+  ] });
+};
+MenuRadioGroup.displayName = "MenuRadioGroup";
+
+// src/components/Menu/RadioMenuItem.tsx
+var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
+var import_jsx_runtime180 = require("react/jsx-runtime");
+var RadioMenuItem = ({
+  onSelect,
+  value,
+  indicator = /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+    Icon,
+    {
+      size: "sm",
+      type: "checkmark"
+    }
+  ),
+  ...props
+}) => {
+  const extraProps = onSelect ? { onSelect } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+    import_react_dropdown_menu6.DropdownMenuRadioItem,
+    {
+      ...extraProps,
+      value,
+      children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+        MenuItemButton,
+        {
+          ...props,
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_react_dropdown_menu6.DropdownMenuItemIndicator, { children: indicator })
+        }
+      )
+    }
+  );
+};
+RadioMenuItem.displayName = "RadioMenuItem";
+
+// src/components/Menu/CheckboxMenuItem.tsx
+var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
+var import_jsx_runtime181 = require("react/jsx-runtime");
+var CheckboxMenuItem = ({
+  onSelect,
+  checked,
+  onCheckedChange,
+  indicator = /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+    Icon,
+    {
+      size: "sm",
+      type: "checkmark"
+    }
+  ),
+  ...props
+}) => {
+  let extraProps = {};
+  if (onSelect) {
+    extraProps = {
+      ...extraProps,
+      onCheckedChange,
+      onSelect
+    };
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+    import_react_dropdown_menu7.DropdownMenuCheckboxItem,
+    {
+      ...extraProps,
+      checked,
+      children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+        MenuItemButton,
+        {
+          ...props,
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(import_react_dropdown_menu7.DropdownMenuItemIndicator, { children: indicator })
+        }
+      )
+    }
+  );
+};
+CheckboxMenuItem.displayName = "CheckboxMenuItem";
+
+// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+var import_styled_components35 = __toESM(require("styled-components"));
+var import_type_guards19 = require("@wistia/type-guards");
+var import_jsx_runtime182 = require("react/jsx-runtime");
+var VisuallyHidden = import_styled_components35.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components35.default.div({
+  "&:not(:focus-within)": visuallyHiddenStyle
+});
+var ScreenReaderOnly = ({
+  text,
+  children,
+  focusable = false,
+  ...otherProps
+}) => {
+  const accessibleText = (0, import_type_guards19.isNotNil)(text) ? text : children;
+  if (focusable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+};
+ScreenReaderOnly.displayName = "ScreenReaderOnly";
+
+// src/components/Stack/Stack.tsx
+var import_react18 = require("react");
+var import_styled_components36 = __toESM(require("styled-components"));
+var import_jsx_runtime183 = require("react/jsx-runtime");
+var DEFAULT_ELEMENT3 = "div";
+var StyledStack = import_styled_components36.default.div`
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
+  gap: ${({ $gap }) => `var(--${$gap})`};
+
+  > * {
+    flex: 1;
+  }
+`;
+var StackComponent = (0, import_react18.forwardRef)(
+  ({ renderAs, direction = "vertical", gap = "space-02", ...props }, ref) => {
+    const responsiveGap = useResponsiveProp(gap);
+    const responsiveDirection = useResponsiveProp(direction);
+    return /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
+      StyledStack,
+      {
+        ref,
+        $direction: responsiveDirection,
+        $gap: responsiveGap,
+        as: renderAs ?? DEFAULT_ELEMENT3,
+        ...props
+      }
+    );
+  }
+);
+StackComponent.displayName = "Stack";
+var Stack = makePolymorphic(StackComponent);
+
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components30 = __toESM(require("styled-components"));
-var import_type_guards16 = require("@wistia/type-guards");
-var import_jsx_runtime173 = require("react/jsx-runtime");
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_type_guards20 = require("@wistia/type-guards");
+var import_jsx_runtime184 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+      "g",
+      {
+        "data-testid": "ui-wistia-logo-brandmark",
+        fill: brandmarkColor,
+        children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("g", { fill: brandmarkColor, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+    "g",
+    {
+      "data-testid": "ui-wistia-logo-brandmark",
+      fill: brandmarkColor,
+      children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" })
+    }
+  );
 };
 var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("g", { fill: logotypeColor, children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+    "g",
+    {
+      "data-testid": "ui-wistia-logo-logotype",
+      fill: logotypeColor,
+      children: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" })
+    }
+  );
 };
 var computedViewBox = (iconOnly) => {
   if (iconOnly) {
@@ -6403,7 +7009,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components30.default.svg`
+var WistiaLogoComponent = import_styled_components37.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -6445,7 +7051,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ (0, import_jsx_runtime173.jsxs)(
+  const Logo = /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -6455,14 +7061,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("title", { children: title }),
-        (0, import_type_guards16.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("desc", { children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("title", { children: title }),
+        (0, import_type_guards20.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
 // Annotate the CommonJS export names for ESM import in node:
@@ -6472,6 +7078,8 @@ WistiaLogo.displayName = "WistiaLogo";
   Box,
   Button,
   ButtonGroup,
+  Checkbox,
+  CheckboxMenuItem,
   ColorSchemeWrapper,
   Divider,
   Ellipsis,
@@ -6480,8 +7088,16 @@ WistiaLogo.displayName = "WistiaLogo";
   IconButton,
   Label,
   Link,
+  Menu,
+  MenuItem,
+  MenuItemDescription,
+  MenuItemLabel,
+  MenuLabel,
+  MenuRadioGroup,
+  RadioMenuItem,
   ScreenReaderOnly,
   Stack,
+  SubMenu,
   Text,
   Tooltip,
   UIProvider,