@wistia/ui 0.4.7-beta.5aa0e9cf.7fbd46e → 0.4.7

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.7-beta.5aa0e9cf.7fbd46e
+ * @license @wistia/ui v0.4.7
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7397,14 +7397,6 @@ import {
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
-import { useMemo as useMemo7 } from "react";
-
-// src/components/Menu/MenuContext.tsx
-import { createContext as createContext5, useContext as useContext4 } from "react";
-var MenuContext = createContext5({ compact: false });
-var useMenuContext = () => useContext4(MenuContext);
-
-// src/components/Menu/Menu.tsx
 import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
 var open = keyframes`
   from {
@@ -7426,28 +7418,6 @@ var close = keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-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);
-  --menu-divider-margin: var(--wui-space-02);
-`;
-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);
-  --menu-divider-margin: var(--wui-space-01);
-`;
 var menuContentCss = css20`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
@@ -7457,8 +7427,6 @@ var menuContentCss = css20`
   --menu-min-width: 120px;
   --menu-max-width: 284px;
 
-  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss};
-
   animation: ${open}; /* TODO - need easing tokens */
   font-family: var(--menu-font-family);
   background: var(--menu-bg);
@@ -7489,8 +7457,31 @@ var menuContentCss = css20`
     margin: var(--menu-divider-margin) 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);
+  --menu-divider-margin: var(--wui-space-02);
+`;
+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);
+  --menu-divider-margin: var(--wui-space-01);
+`;
 var MenuContent = styled26(DropdownMenuContent)`
   ${menuContentCss}
+  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
 var Menu = ({
   align = "start",
@@ -7505,7 +7496,6 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
-  const contextValue = useMemo7(() => ({ compact }), [compact]);
   let controlProps = {
     ...isNotNil10(onOpenChange) && isNotNil10(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
@@ -7515,7 +7505,7 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ jsx187(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs14(
     DropdownMenu,
     {
       modal: false,
@@ -7547,7 +7537,7 @@ var Menu = ({
         ) })
       ]
     }
-  ) });
+  );
 };
 Menu.displayName = "Menu";
 
@@ -7724,6 +7714,7 @@ var MenuItemDescription = ({ children }) => {
 import { jsx as jsx191, jsxs as jsxs16 } from "react/jsx-runtime";
 var SubMenuContent = styled30(DropdownMenuSubContent)`
   ${menuContentCss}
+  width: 298px;
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
@@ -7760,13 +7751,12 @@ var SubMenu = ({
 }) => {
   const { isSmAndUp } = useMq();
   const [isExpanded, setIsExpanded] = useState7(false);
-  const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ jsxs16(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs16(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
       isNotNil12(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { $compact: compact, children }) })
+    /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { children }) })
   ] }) : /* @__PURE__ */ jsxs16(DropdownMenuGroup, { children: [
     /* @__PURE__ */ jsxs16(
       SubMenuTrigger,