@wistia/ui 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.2.0
+ * @license @wistia/ui v0.3.0
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -5881,9 +5881,11 @@ var propsForFlexChildren = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow"
 var getGapStyle = (gap) => {
   if (isNotNil6(gap)) {
     if (isRecord2(gap)) {
-      return Object.entries(gap).map(([key, value]) => `${key}-gap: ${value};`).join("");
+      return Object.entries(gap).map(([key, value]) => {
+        return `${key}-gap: var(--wui-${value})};`;
+      }).join("");
     }
-    return `gap: ${gap.toString()};`;
+    return `gap: var(--wui-${gap.toString()})};`;
   }
   return void 0;
 };
@@ -7215,10 +7217,10 @@ var close = keyframes`
 `;
 var menuContentCss = css20`
   --menu-font-family: var(--wui-typography-family-default);
-  --menu-bg: var(--wui-color-bg-fill-white); /* TODO - Not sure what token to use for this */
+  --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: 0 0 64px 0 rgba(0 0 0 / 8%); /* TODO - Need a box-shadow token */
-  --menu-border-radius: var(--wui-border-radius-01);
-  --menu-padding: var(--wui-space-03);
+  --menu-border-radius: var(--wui-border-radius-02);
+  --menu-padding: var(--wui-space-02);
   --menu-min-width: 120px;
   --menu-max-width: 284px;
 
@@ -7234,6 +7236,7 @@ var menuContentCss = css20`
   padding: var(--menu-padding);
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
   z-index: var(--wui-zindex-menu);
+  border: 1px solid var(--wui-color-border);
 
   &[data-state='closed'] {
     animation: ${close}; /* TODO - need easing tokens */
@@ -7251,12 +7254,35 @@ var menuContentCss = css20`
     margin: var(--wui-space-02) 0;
   }
 `;
+var menuItemCss = css20`
+  --menu-label-description-gap: var(--wui-space-01);
+  --menu-item-inner-gap: var(--wui-space-03);
+  --menu-item-left-icon-size: 24px;
+  --menu-item-right-icon-size: 16px;
+  --menu-item-padding: var(--wui-space-02);
+  --menu-label-font-size: var(--wui-typography-label-3-size);
+  --menu-label-font-weight: var(--wui-typography-label-3-weight);
+  --menu-label-line-height: var(--wui-typography-label-3-line-height);
+`;
+var compactMenuItemCss = css20`
+  --menu-label-description-gap: 0;
+  --menu-item-inner-gap: var(--wui-space-02);
+  --menu-item-left-icon-size: 16px;
+  --menu-item-right-icon-size: 12px;
+  --menu-item-padding: 6px;
+  --menu-label-font-size: var(--wui-typography-label-4-size);
+  --menu-label-font-weight: var(--wui-typography-label-4-weight);
+  --menu-label-line-height: var(--wui-typography-label-4-line-height);
+`;
 var MenuContent = styled24(DropdownMenuContent)`
   ${menuContentCss}
+  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
 var Menu = ({
   align = "start",
   children,
+  disabled = false,
+  compact = false,
   trigger,
   label,
   isOpen,
@@ -7265,16 +7291,26 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
+  let controlProps = {
+    ...isNotNil9(onOpenChange) && isNotNil9(isOpen) ? { open: isOpen, onOpenChange } : {}
+  };
+  if (disabled) {
+    controlProps = {
+      open: false,
+      onOpenChange: () => null
+    };
+  }
   return /* @__PURE__ */ jsxs13(
     DropdownMenu,
     {
       modal: false,
-      ...isNotNil9(onOpenChange) && isNotNil9(isOpen) ? { open: isOpen, onOpenChange } : {},
+      ...controlProps,
       children: [
         /* @__PURE__ */ jsx184(DropdownMenuTrigger, { asChild: true, children: isNotUndefined7(trigger) ? trigger : /* @__PURE__ */ jsx184(
           Button,
           {
             "aria-expanded": isOpen,
+            disabled,
             forceState: isOpen ? "active" : void 0,
             rightIcon: /* @__PURE__ */ jsx184(Icon, { type: "caret-down" }),
             ...triggerProps,
@@ -7285,11 +7321,12 @@ var Menu = ({
           MenuContent,
           {
             ...props,
+            $compact: compact,
             align,
+            sideOffset: 6,
             onFocusOutside: (event) => {
               event.preventDefault();
             },
-            sideOffset: 6,
             children
           }
         ) })
@@ -7313,9 +7350,10 @@ var MenuLabel = ({ children, ...props }) => {
       asChild: true,
       ...props,
       children: /* @__PURE__ */ jsx185(
-        Text,
+        Heading,
         {
-          variant: "label3",
+          renderAs: "span",
+          variant: "heading6",
           ...props,
           children
         }
@@ -7336,6 +7374,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
+import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef12 } from "react";
@@ -7343,38 +7382,74 @@ import styled26 from "styled-components";
 import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { jsx as jsx186, jsxs as jsxs14 } from "react/jsx-runtime";
 var StyledButton3 = styled26(Button)`
-  --menu-item-border-radius: var(--wui-border-radius-01);
-  --menu-item-gap: var(--wui-space-01);
-  --menu-item-inner-gap: var(--wui-space-04);
-  --menu-item-disabled-bg: var(--wui-color-white);
+  ${({ colorScheme }) => getColorScheme(colorScheme)};
 
-  text-align: left;
-  align-items: left;
-  border-radius: var(--menu-item-border-radius);
   display: flex;
+  flex-direction: row;
+  gap: var(--menu-item-inner-gap);
+  padding: var(--menu-item-padding);
+  border-radius: var(--wui-border-radius-01);
+  text-align: left;
+  color: var(--wui-color-text);
+  font-size: var(--menu-label-font-size);
+  font-weight: var(--menu-label-font-weight);
+  line-height: var(--menu-label-line-height);
+
+  :active {
+    background-color: var(--wui-color-bg-surface-active);
+  }
+
+  &[data-highlighted] {
+    outline: none;
+    ${({ $isGated }) => $isGated && getColorScheme("purple")};
+    background-color: var(--wui-color-bg-surface-hover);
+  }
 
   &[aria-disabled='true'] {
-    background-color: var(--menu-item-disabled-bg);
+    --wui-color-text: var(--wui-color-text-disabled);
+    --wui-color-text-secondary: var(--wui-color-text-disabled);
+    --wui-color-icon: var(--wui-color-icon-disabled);
+
+    &[data-highlighted] {
+      background-color: transparent;
+    }
   }
 
-  ${({ $isGated }) => isNotUndefined8($isGated) && $isGated ? `color: var(--wui-color-text);` : ""}
+  &[role='menuitemradio'] {
+    padding-left: var(--wui-space-04);
+  }
 `;
-var StyledMenuContent = styled26.div`
-  display: grid;
-  grid-template-areas:
-    'label badge'
-    'description badge';
-  grid-template-columns: 1fr auto;
-  position: relative;
-  align-content: center;
+var StyledLeftIconContainer = styled26.div`
+  height: var(--menu-item-left-icon-size);
+  width: var(--menu-item-left-icon-size);
+
+  svg {
+    height: var(--menu-item-left-icon-size);
+    width: var(--menu-item-left-icon-size);
+  }
+`;
+var StyledRightIconContainer = styled26.div`
+  height: var(--menu-item-right-icon-size);
+  width: var(--menu-item-right-icon-size);
+
+  svg {
+    height: var(--menu-item-right-icon-size);
+    width: var(--menu-item-right-icon-size);
+  }
+`;
+var StyledLabelAndDescriptionContainer = styled26.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-label-description-gap);
+  flex-basis: 100%;
 `;
 var StyledBadgeContainer = styled26.div`
-  grid-area: badge;
   align-self: start;
   justify-self: end;
-  margin-left: var(--menu-item-inner-gap);
+  font-size: var(--wui-typography-label-4-size);
+  color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = forwardRef12(({ children, appearance, command, ...props }, ref) => {
+var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if (isNotUndefined8(colorScheme)) {
@@ -7383,13 +7458,19 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, ...props },
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    if (isNotUndefined8(colorScheme)) {
-      console.warn("colorScheme prop is ignored when appearance is gated");
-    }
-    colorScheme = "purple";
-    badge = /* @__PURE__ */ jsx186(Icon, { type: "sparkle" });
+    badge = /* @__PURE__ */ jsx186(
+      Icon,
+      {
+        colorScheme: "purple",
+        style: {
+          height: "16px",
+          width: "16px"
+        },
+        type: "sparkle"
+      }
+    );
   }
-  return /* @__PURE__ */ jsx186(
+  return /* @__PURE__ */ jsxs14(
     StyledButton3,
     {
       ...props,
@@ -7397,11 +7478,13 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, ...props },
       $isGated: appearance === "gated",
       colorScheme: colorScheme ?? "default",
       fullWidth: true,
-      variant: "ghost",
-      children: /* @__PURE__ */ jsxs14(StyledMenuContent, { children: [
-        children,
-        isNotNil10(badge) || isNotNil10(command) ? /* @__PURE__ */ jsx186(StyledBadgeContainer, { children: badge ?? command }) : null
-      ] })
+      unstyled: true,
+      children: [
+        props.leftIcon ? /* @__PURE__ */ jsx186(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ jsx186(StyledLabelAndDescriptionContainer, { children }),
+        isNotNil10(badge) || isNotNil10(command) ? /* @__PURE__ */ jsx186(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ jsx186(StyledRightIconContainer, { children: props.rightIcon }) : null
+      ]
     }
   );
 });
@@ -7410,16 +7493,11 @@ MenuItemButton.displayName = "MenuItemButton";
 // src/components/Menu/MenuItemLabelDescription.tsx
 import styled27 from "styled-components";
 import { jsx as jsx187 } from "react/jsx-runtime";
-var StyledMenuItemLabel = styled27(Text).attrs({ variant: "label3" })`
-  grid-area: label;
-`;
+var StyledMenuItemLabel = styled27.span``;
 var StyledMenuItemDescription = styled27(Text).attrs({
-  variant: "label4",
+  variant: "body4",
   prominence: "secondary"
-})`
-  margin-top: var(--menu-item-gap);
-  grid-area: description;
-`;
+})``;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ jsx187(StyledMenuItemLabel, { children });
 };
@@ -7445,7 +7523,7 @@ var StyledSubTrigger = styled28(DropdownMenuSubTrigger)`
 
   &[data-state='open'],
   &[data-highlighted] {
-    background-color: var(--button-color-bg-hover);
+    background-color: var(--wui-color-bg-surface-hover);
   }
 `;
 var SubMenuTrigger = (props) => {
@@ -7471,7 +7549,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ jsxs15(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs15(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx188(MenuItemLabel, { children: label }),
-      /* @__PURE__ */ jsx188(MenuItemDescription, { children: description })
+      isNotNil11(description) ? /* @__PURE__ */ jsx188(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx188(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx188(SubMenuContent, { children }) })
   ] }) : /* @__PURE__ */ jsxs15(DropdownMenuGroup, { children: [
@@ -7555,6 +7633,7 @@ var RadioMenuItem = ({
     DropdownMenuRadioItem,
     {
       ...extraProps,
+      asChild: true,
       value,
       children: /* @__PURE__ */ jsx191(
         MenuItemButton,
@@ -7579,30 +7658,23 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
     {
       ...props,
       fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
         /* @__PURE__ */ jsx192(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            fill: "#2949E5"
-          }
-        ),
-        /* @__PURE__ */ jsx192(
-          "path",
-          {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            stroke: "#D9D9DE"
+            d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
+            fill: "#2949e5"
           }
         ),
         /* @__PURE__ */ jsx192(
           "path",
           {
-            d: "M6.47275 11.1931L3.3775 8.08009C3.19155 7.89306 3.19155 7.58982 3.3775 7.40278L4.05092 6.72547C4.23688 6.53842 4.53841 6.53842 4.72436 6.72547L6.80947 8.82254L11.2755 4.33082C11.4615 4.1438 11.763 4.1438 11.949 4.33082L12.6224 5.00813C12.8083 5.19516 12.8083 5.4984 12.6224 5.68544L7.14618 11.1931C6.96021 11.3802 6.6587 11.3802 6.47275 11.1931Z",
-            fill: "white"
+            d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
+            fill: "#fff"
           }
         )
       ]
@@ -7612,23 +7684,23 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
     {
       ...props,
       fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
         /* @__PURE__ */ jsx192(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            fill: "#FCFCFD"
+            d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
+            fill: "#fcfcfd"
           }
         ),
         /* @__PURE__ */ jsx192(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            stroke: "#D9D9DE"
+            d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
+            stroke: "#bbbbc4"
           }
         )
       ]
@@ -7644,6 +7716,7 @@ var CheckboxMenuItem = ({
   return /* @__PURE__ */ jsx192(
     DropdownMenuCheckboxItem,
     {
+      asChild: true,
       checked,
       onCheckedChange,
       onSelect,
@@ -7663,7 +7736,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 import { forwardRef as forwardRef16 } from "react";
 import styled34 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil13 } from "@wistia/type-guards";
+import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled31 from "styled-components";
@@ -7690,7 +7763,7 @@ var ModalCloseButton = () => {
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 import styled30 from "styled-components";
-import { isNotNil as isNotNil11 } from "@wistia/type-guards";
+import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 import { jsx as jsx194 } from "react/jsx-runtime";
 var VisuallyHidden = styled30.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = styled30.div({
@@ -7702,7 +7775,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = isNotNil11(text) ? text : children;
+  const accessibleText = isNotNil12(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ jsx194(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -7749,7 +7822,7 @@ import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef5, useEffect as useEffect2 } from "react";
-import { isNotNil as isNotNil12 } from "@wistia/type-guards";
+import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef5(null);
   useEffect2(() => {
@@ -7757,7 +7830,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect2(() => {
     return () => {
-      if (isNotNil12(previouslyFocusedRef.current)) {
+      if (isNotNil13(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -7901,7 +7974,7 @@ var Modal = forwardRef16(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil13(onRequestClose)) {
+          if (!open2 && isNotNil14(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -7915,7 +7988,7 @@ var Modal = forwardRef16(
               "aria-describedby": void 0,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil13(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil14(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -8077,7 +8150,7 @@ Radio.displayName = "Radio";
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef18 } from "react";
 import styled36 from "styled-components";
-import { isNil as isNil11, isNotNil as isNotNil14, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { isNil as isNil11, isNotNil as isNotNil15, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { Fragment as Fragment2, jsx as jsx200, jsxs as jsxs21 } from "react/jsx-runtime";
 var TagLabel = styled36.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -8183,7 +8256,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = forwardRef18(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil14(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    const labelProps = isNotNil15(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs21(
       StyledTag,
       {
@@ -8327,7 +8400,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled38 from "styled-components";
-import { isNotNil as isNotNil15 } from "@wistia/type-guards";
+import { isNotNil as isNotNil16 } from "@wistia/type-guards";
 import { jsx as jsx202, jsxs as jsxs23 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -8421,7 +8494,7 @@ var WistiaLogo = ({
       ...otherProps,
       children: [
         /* @__PURE__ */ jsx202("title", { children: title }),
-        isNotNil15(description) ? /* @__PURE__ */ jsx202("desc", { children: description }) : null,
+        isNotNil16(description) ? /* @__PURE__ */ jsx202("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]