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

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.6
+ * @license @wistia/ui v0.4.7-beta.5aa0e9cf.7fbd46e
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -5959,17 +5959,17 @@ var Avatar = ({
   onImageLoad,
   ...otherProps
 }) => {
-  const [imageLoadState, setImageLoadState] = (0, import_react14.useState)(null);
+  const [imageLoadState, setImageLoadState] = (0, import_react14.useState)("loading");
   (0, import_react14.useEffect)(() => {
-    setImageLoadState(null);
+    setImageLoadState("loading");
   }, [imageUrl]);
   const handleImageLoad = () => {
     setImageLoadState("loaded");
-    onImageLoad?.("image");
+    onImageLoad?.({ state: "loaded", type: "image" });
   };
   const handleImageLoadError = () => {
     setImageLoadState("error");
-    onImageLoad?.("initials");
+    onImageLoad?.({ state: "error", type: "initials" });
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
   const avatarColor = (0, import_react14.useMemo)(() => chooseColorScheme(name), [name]);
@@ -7483,6 +7483,14 @@ Input.displayName = "Input";
 var import_styled_components39 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_type_guards23 = require("@wistia/type-guards");
+var import_react31 = require("react");
+
+// src/components/Menu/MenuContext.tsx
+var import_react30 = require("react");
+var MenuContext = (0, import_react30.createContext)({ compact: false });
+var useMenuContext = () => (0, import_react30.useContext)(MenuContext);
+
+// src/components/Menu/Menu.tsx
 var import_jsx_runtime187 = require("react/jsx-runtime");
 var open = import_styled_components39.keyframes`
   from {
@@ -7504,6 +7512,28 @@ var close = import_styled_components39.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
+var menuItemCss = import_styled_components39.css`
+  --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 = import_styled_components39.css`
+  --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 = import_styled_components39.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
@@ -7513,6 +7543,8 @@ var menuContentCss = import_styled_components39.css`
   --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);
@@ -7543,31 +7575,8 @@ var menuContentCss = import_styled_components39.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var menuItemCss = import_styled_components39.css`
-  --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 = import_styled_components39.css`
-  --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 = (0, import_styled_components39.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
-  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
 var Menu = ({
   align = "start",
@@ -7582,6 +7591,7 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
+  const contextValue = (0, import_react31.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
     ...(0, import_type_guards23.isNotNil)(onOpenChange) && (0, import_type_guards23.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
@@ -7591,7 +7601,7 @@ var Menu = ({
       onOpenChange: () => null
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(MenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
     import_react_dropdown_menu.DropdownMenu,
     {
       modal: false,
@@ -7623,7 +7633,7 @@ var Menu = ({
         ) })
       ]
     }
-  );
+  ) });
 };
 Menu.displayName = "Menu";
 
@@ -7655,13 +7665,13 @@ var MenuLabel = ({ children, ...props }) => {
 MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
-var import_react31 = require("react");
+var import_react33 = require("react");
 var import_styled_components43 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_type_guards25 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
-var import_react30 = require("react");
+var import_react32 = require("react");
 var import_styled_components41 = __toESM(require("styled-components"));
 var import_type_guards24 = require("@wistia/type-guards");
 var import_jsx_runtime189 = require("react/jsx-runtime");
@@ -7733,7 +7743,7 @@ var StyledBadgeContainer = import_styled_components41.default.div`
   font-size: var(--wui-typography-label-4-size);
   color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = (0, import_react30.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
+var MenuItemButton = (0, import_react32.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if ((0, import_type_guards24.isNotUndefined)(colorScheme)) {
@@ -7793,7 +7803,6 @@ var MenuItemDescription = ({ children }) => {
 var import_jsx_runtime191 = require("react/jsx-runtime");
 var SubMenuContent = (0, import_styled_components43.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
-  width: 298px;
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
@@ -7829,13 +7838,14 @@ var SubMenu = ({
   ...props
 }) => {
   const { isSmAndUp } = useMq();
-  const [isExpanded, setIsExpanded] = (0, import_react31.useState)(false);
+  const [isExpanded, setIsExpanded] = (0, import_react33.useState)(false);
+  const { compact } = useMenuContext();
   return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemLabel, { children: label }),
       (0, import_type_guards25.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(SubMenuContent, { children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(
       SubMenuTrigger,
@@ -7857,10 +7867,10 @@ var SubMenu = ({
 SubMenu.displayName = "SubMenu";
 
 // src/components/Menu/MenuItem.tsx
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_react_dropdown_menu4 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime192 = require("react/jsx-runtime");
-var MenuItem = (0, import_react32.forwardRef)(
+var MenuItem = (0, import_react34.forwardRef)(
   ({ onSelect = () => null, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
       import_react_dropdown_menu4.DropdownMenuItem,
@@ -8010,7 +8020,7 @@ var CheckboxMenuItem = ({
 CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_styled_components49 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
 var import_type_guards28 = require("@wistia/type-guards");
@@ -8093,19 +8103,19 @@ var ModalHeader = ({
 };
 
 // src/components/Modal/ModalContent.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-var import_react33 = require("react");
+var import_react35 = require("react");
 var import_type_guards27 = require("@wistia/type-guards");
 var useFocusRestore = () => {
-  const previouslyFocusedRef = (0, import_react33.useRef)(null);
-  (0, import_react33.useEffect)(() => {
+  const previouslyFocusedRef = (0, import_react35.useRef)(null);
+  (0, import_react35.useEffect)(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     return () => {
       if ((0, import_type_guards27.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
@@ -8158,7 +8168,7 @@ var StyledModalContent = (0, import_styled_components47.default)(import_react_di
     }
   }
 `;
-var ModalContent = (0, import_react34.forwardRef)(
+var ModalContent = (0, import_react36.forwardRef)(
   ({ fullHeight, width, children, ...otherProps }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
@@ -8175,7 +8185,7 @@ var ModalContent = (0, import_react34.forwardRef)(
 );
 
 // src/private/components/Backdrop/Backdrop.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_styled_components48 = __toESM(require("styled-components"));
 var import_jsx_runtime200 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
@@ -8213,7 +8223,7 @@ var BackdropComponent = import_styled_components48.default.div`
     }
   }
 `;
-var Backdrop = (0, import_react35.forwardRef)(
+var Backdrop = (0, import_react37.forwardRef)(
   ({ alignHorizontal = "center", alignVertical = "center", children, ...otherProps }, ref) => /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
     BackdropComponent,
     {
@@ -8234,7 +8244,7 @@ var ModalBody = import_styled_components49.default.div`
   display: flex;
   order: 2;
 `;
-var Modal = (0, import_react36.forwardRef)(
+var Modal = (0, import_react38.forwardRef)(
   ({
     children,
     fullHeight = false,
@@ -8295,7 +8305,7 @@ var Modal = (0, import_react36.forwardRef)(
 Modal.displayName = "Modal";
 
 // src/components/Radio/Radio.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 var import_styled_components50 = __toESM(require("styled-components"));
 var import_type_guards29 = require("@wistia/type-guards");
 var import_jsx_runtime202 = require("react/jsx-runtime");
@@ -8369,7 +8379,7 @@ var StyledRadioWrapper = import_styled_components50.default.div`
 
   ${({ disabled }) => disabled && disabledStyle2};
 `;
-var Radio = (0, import_react37.forwardRef)(
+var Radio = (0, import_react39.forwardRef)(
   ({
     checked,
     disabled = false,
@@ -8382,7 +8392,7 @@ var Radio = (0, import_react37.forwardRef)(
     value = "false",
     ...otherProps
   }, ref) => {
-    const generatedId = (0, import_react37.useId)();
+    const generatedId = (0, import_react39.useId)();
     const computedId = (0, import_type_guards29.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
       StyledRadioWrapper,
@@ -8425,7 +8435,7 @@ var Radio = (0, import_react37.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/Tag/Tag.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_styled_components51 = __toESM(require("styled-components"));
 var import_type_guards30 = require("@wistia/type-guards");
 var import_jsx_runtime203 = require("react/jsx-runtime");
@@ -8531,7 +8541,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
     )
   ] });
 };
-var Tag = (0, import_react38.forwardRef)(
+var Tag = (0, import_react40.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
     const labelProps = (0, import_type_guards30.isNotNil)(href) && (0, import_type_guards30.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime203.jsxs)(