@sanity/ui 4.0.7 → 4.1.1

package/dist/layer-BfwisMR6.js

@@ -0,0 +1,61 @@
+import { s as EMPTY_RECORD } from "./helpers-C8xxXAQC.js";
+import { a as isHTMLElement, n as containsOrEqualsElement } from "./element-BYgCE_iK.js";
+import { n as LayerProvider, t as useLayer } from "./useLayer-D1usxIE0.js";
+import { c } from "react/compiler-runtime";
+import { clsx } from "clsx/lite";
+import { useEffect, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var layer = "_1xz6t3i0";
+function LayerChildren(props) {
+	let $ = c(29), children, className, forwardedRef, onActivate, onFocus, restProps, t0, t1;
+	$[0] === props ? (children = $[1], className = $[2], forwardedRef = $[3], onActivate = $[4], onFocus = $[5], restProps = $[6], t0 = $[7], t1 = $[8]) : ({as: t0, children, className, onActivate, onFocus, ref: forwardedRef, style: t1, ...restProps} = props, $[0] = props, $[1] = children, $[2] = className, $[3] = forwardedRef, $[4] = onActivate, $[5] = onFocus, $[6] = restProps, $[7] = t0, $[8] = t1);
+	let as = t0 === void 0 ? "div" : t0, style = t1 === void 0 ? EMPTY_RECORD : t1, { zIndex, isTopLayer } = useLayer(), lastFocusedRef = useRef(null), ref = useRef(null), isTopLayerRef = useRef(isTopLayer), t2;
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => ref.current, $[9] = t2) : t2 = $[9], useImperativeHandle(forwardedRef, t2);
+	let t3, t4;
+	$[10] !== isTopLayer || $[11] !== onActivate ? (t3 = () => {
+		isTopLayerRef.current !== isTopLayer && isTopLayer && onActivate?.({ activeElement: lastFocusedRef.current }), isTopLayerRef.current = isTopLayer;
+	}, t4 = [isTopLayer, onActivate], $[10] = isTopLayer, $[11] = onActivate, $[12] = t3, $[13] = t4) : (t3 = $[12], t4 = $[13]), useEffect(t3, t4);
+	let t5;
+	$[14] !== isTopLayer || $[15] !== onFocus ? (t5 = (event) => {
+		onFocus?.(event);
+		let rootElement = ref.current, target = document.activeElement;
+		isTopLayer && rootElement && target && isHTMLElement(target) && containsOrEqualsElement(rootElement, target) && (lastFocusedRef.current = target);
+	}, $[14] = isTopLayer, $[15] = onFocus, $[16] = t5) : t5 = $[16];
+	let handleFocus = t5, Component = as, t6;
+	$[17] === className ? t6 = $[18] : (t6 = clsx(layer, className), $[17] = className, $[18] = t6);
+	let t7;
+	$[19] !== style || $[20] !== zIndex ? (t7 = {
+		...style,
+		zIndex
+	}, $[19] = style, $[20] = zIndex, $[21] = t7) : t7 = $[21];
+	let t8;
+	return $[22] !== Component || $[23] !== children || $[24] !== handleFocus || $[25] !== restProps || $[26] !== t6 || $[27] !== t7 ? (t8 = /* @__PURE__ */ jsx(Component, {
+		...restProps,
+		className: t6,
+		"data-ui": "Layer",
+		onFocus: handleFocus,
+		ref,
+		style: t7,
+		children
+	}), $[22] = Component, $[23] = children, $[24] = handleFocus, $[25] = restProps, $[26] = t6, $[27] = t7, $[28] = t8) : t8 = $[28], t8;
+}
+/**
+* @public
+*/
+function Layer(props) {
+	let $ = c(10), children, restProps, t0;
+	$[0] === props ? (children = $[1], restProps = $[2], t0 = $[3]) : ({children, zOffset: t0, ...restProps} = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0);
+	let zOffset = t0 === void 0 ? 1 : t0, t1;
+	$[4] !== children || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(LayerChildren, {
+		...restProps,
+		children
+	}), $[4] = children, $[5] = restProps, $[6] = t1) : t1 = $[6];
+	let t2;
+	return $[7] !== t1 || $[8] !== zOffset ? (t2 = /* @__PURE__ */ jsx(LayerProvider, {
+		zOffset,
+		children: t1
+	}), $[7] = t1, $[8] = zOffset, $[9] = t2) : t2 = $[9], t2;
+}
+export { Layer as t };
+
+//# sourceMappingURL=layer-BfwisMR6.js.map

package/dist/layer-BfwisMR6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layer-BfwisMR6.js","names":["as = 'div'","style = EMPTY_RECORD","() => ref.current","() => {\n    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer\n\n    if (becameTopLayer) {\n      onActivate?.({activeElement: lastFocusedRef.current})\n    }\n\n    isTopLayerRef.current = isTopLayer\n  }","[isTopLayer, onActivate]","(event: FocusEvent<HTMLDivElement, Element>) => {\n      // Call the user-provided onFocus handler if any\n      onFocus?.(event)\n\n      const rootElement = ref.current\n      const target = document.activeElement\n\n      if (!isTopLayer || !rootElement || !target) return\n\n      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {\n        lastFocusedRef.current = target\n      }\n    }","useCallback(\n    // oxlint-disable-next-line no-unnecessary-type-arguments\n    (event: FocusEvent<HTMLDivElement, Element>) => {\n      // Call the user-provided onFocus handler if any\n      onFocus?.(event)\n\n      const rootElement = ref.current\n      const target = document.activeElement\n\n      if (!isTopLayer || !rootElement || !target) return\n\n      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {\n        lastFocusedRef.current = target\n      }\n    },\n    [isTopLayer, onFocus],\n  )","clsx(layer, className)","{...style, zIndex}","<Component\n      {...restProps}\n      className={clsx(layer, className)}\n      data-ui=\"Layer\"\n      onFocus={handleFocus}\n      ref={ref}\n      style={{...style, zIndex}}\n    >\n      {children}\n    </Component>","zOffset = 1","<LayerChildren {...restProps}>{children}</LayerChildren>","<LayerProvider zOffset={zOffset}>\n      <LayerChildren {...restProps}>{children}</LayerChildren>\n    </LayerProvider>"],"sources":["../src/core/utils/layer/layer.css.ts","../src/core/utils/layer/layer.tsx"],"sourcesContent":["import {style} from '@vanilla-extract/css'\n\nexport const layer = style({\n  position: 'relative',\n})\n","import {clsx} from 'clsx/lite'\nimport {FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} from 'react'\n\nimport {EMPTY_RECORD} from '../../constants'\nimport {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'\nimport {LayerProvider} from './layerProvider'\nimport {useLayer} from './useLayer'\n\nimport {layer} from './layer.css'\n\n/**\n * @public\n */\nexport interface LayerProps {\n  as?: React.ElementType | keyof React.JSX.IntrinsicElements\n  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */\n  onActivate?: (props: {activeElement: HTMLElement | null}) => void\n  zOffset?: number | number[]\n}\n\ninterface LayerChildrenProps {\n  as?: React.ElementType | keyof React.JSX.IntrinsicElements\n  onActivate?: LayerProps['onActivate']\n}\n\nfunction LayerChildren(props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>) {\n  const {\n    as = 'div',\n    children,\n    className,\n    onActivate,\n    onFocus,\n    ref: forwardedRef,\n    style = EMPTY_RECORD,\n    ...restProps\n  } = props\n  const {zIndex, isTopLayer} = useLayer()\n  const lastFocusedRef = useRef<HTMLElement | null>(null)\n  const ref = useRef<HTMLDivElement | null>(null)\n  const isTopLayerRef = useRef<boolean>(isTopLayer)\n\n  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)\n\n  // When the layer very first mounts, it will be the top layer, but we don't want to fire\n  // the callback in that case. We use a ref to track the previous value of isTopLayer to\n  // determine if the layer has become the top layer since the last render.\n  useEffect(() => {\n    const becameTopLayer = isTopLayerRef.current !== isTopLayer && isTopLayer\n\n    if (becameTopLayer) {\n      onActivate?.({activeElement: lastFocusedRef.current})\n    }\n\n    isTopLayerRef.current = isTopLayer\n  }, [isTopLayer, onActivate])\n\n  const handleFocus = useCallback(\n    // oxlint-disable-next-line no-unnecessary-type-arguments\n    (event: FocusEvent<HTMLDivElement, Element>) => {\n      // Call the user-provided onFocus handler if any\n      onFocus?.(event)\n\n      const rootElement = ref.current\n      const target = document.activeElement\n\n      if (!isTopLayer || !rootElement || !target) return\n\n      if (isHTMLElement(target) && containsOrEqualsElement(rootElement, target)) {\n        lastFocusedRef.current = target\n      }\n    },\n    [isTopLayer, onFocus],\n  )\n\n  // Rendering the polymorphic `as` needs one concrete element type for JSX to\n  // type-check the div-flavored props (the same widening styled-components'\n  // `as` prop performed here before).\n  // oxlint-disable-next-line no-unsafe-type-assertion\n  const Component = as as 'div'\n\n  return (\n    <Component\n      {...restProps}\n      className={clsx(layer, className)}\n      data-ui=\"Layer\"\n      onFocus={handleFocus}\n      ref={ref}\n      style={{...style, zIndex}}\n    >\n      {children}\n    </Component>\n  )\n}\n\n/**\n * @public\n */\nexport function Layer(props: LayerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>) {\n  const {children, zOffset = 1, ...restProps} = props\n\n  return (\n    <LayerProvider zOffset={zOffset}>\n      <LayerChildren {...restProps}>{children}</LayerChildren>\n    </LayerProvider>\n  )\n}\n"],"mappings":";;;;;;;;ACyBA,SAAS,cAAc,OAAyE;gBAG5F,UACA,WAGK,cAFL,YACA,SAGG,WAPHA,IAMAC;CAEE,AAAA,EAAA,OAAA,+IATE,CACJ,IAAA,IACA,UACA,WACA,YACA,SACA,KAAK,cACL,OAAA,IACA,GAAA,aACE;CARF,IAAA,KAAA,OAAA,KAAA,IAAK,QAALD,IAMA,QAAA,OAAA,KAAA,IAAQ,eAARC,IAGI,EAAC,QAAQ,eAAc,SAAS,GAChC,iBAAiB,OAA2B,IAAI,GAChD,MAAM,OAA8B,IAAI,GACxC,gBAAgB,OAAgB,UAAU,GAEgCC;CAAhF,oDAAsF,WAAA,IAAI,iCAA1F,oBAAkE,cAAcA,EAAiB;CAKvFC,IAAAA,IAQPC;CARH,AACmD,EAAA,QAAA,cAAA,EAAA,QAG/C,cAJM,WAAM;EAOd,AANuB,cAAc,YAAY,cAAc,cAG7D,aAAa,EAAC,eAAe,eAAe,QAAO,CAAC,GAGtD,cAAc,UAAU;CAC1B,GAAG,KAAA,CAAC,YAAY,UAAU,GAPyB,EAAA,MAAA,YAG/C,EAAA,MAAA,gEAJJ,UAAUD,IAQPC,EAAwB;CAIzBC,IAAAA;CAOO,AAAA,EAAA,QAAA,cAAA,EAAA,QALL,WAFF,MAAC,UAA+C;EAE9C,UAAU,KAAK;EAEf,IAAM,cAAc,IAAI,SAClB,SAAS,SAAS;EAEpB,AAAC,cAAe,eAAgB,UAEhC,cAAc,MAAM,KAAK,wBAAwB,aAAa,MAAM,MACtE,eAAe,UAAU;CAE7B,GALO,EAAA,MAAA,YALL,EAAA,MAAA;CAJJ,IAAM,cAAcC,IAsBd,YAAY,IAKHC;CAAY,AAAA,EAAA,QAAA,0BAAZ,KAAA,KAAK,OAAO,SAAS,GAAT,EAAA,MAAA;CAIhBC,IAAAA;CAAI,AAAA,EAAA,QAAA,SAAA,EAAA,QAAO,UAAX,KAAA;EAAC,GAAG;EAAO;CAAM,GAAb,EAAA,MAAA,OAAO,EAAA,MAAA;CANpBC,IAAAA;CADF,OACG,EAAA,QAAA,aAAA,EAAA,QAQE,YAAA,EAAA,QAJQ,eAAA,EAAA,QAHL,aAAA,EAAA,QACOF,MAAAA,EAAAA,QAIJC,MANT,KAAA,oBAAC,WAAD;EACE,GAAI;EACJ,WAAWD;EACX,WAAQ;EACR,SAAS;EACJ;EACL,OAAOC;EAEN;CACQ,CAAA,GATV,EAAA,MAAA,WAQE,EAAA,MAAA,UAJQ,EAAA,MAAA,aAHL,EAAA,MAAA,WACOD,EAAAA,MAAAA,IAIJC,EAAAA,MAAAA,8BANTC;AAWJ;;;;AAKA,SAAgB,MAAM,OAAiE;gBAC9E,UAA0B,WAAhBC;CAA6B,AAAA,EAAA,OAAA,0DAAxC,CAAC,UAAU,SAAA,IAAa,GAAA,aAAgB;CAA7B,IAAA,UAAA,OAAA,KAAA,IAAU,IAAVA,IAIbC;CAA+B,AAAA,EAAA,OAAA,YAAA,EAAA,OAAZ,aAAnB,KAAA,oBAAC,eAAD;EAAe,GAAI;EAAY;CAAwB,CAAA,GAAxB,EAAA,KAAA,UAAZ,EAAA,KAAA;CADrBC,IAAAA;CADF,OAEID,EAAAA,OAAAA,MAAAA,EAAAA,OADsB,WAAxB,KAAA,oBAAC,eAAD;EAAwB;EACtBA,UAAAA;CACa,CAAA,GADbA,EAAAA,KAAAA,IADsB,EAAA,KAAA,iCAAxBC;AAIJ"}

package/dist/layer-ChlP9Ik6.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layer-ChlP9Ik6.d.ts","names":[],"sources":["../src/core/types/box.ts","../src/core/types/flex.ts","../src/core/types/grid.ts","../src/core/types/gridItem.ts","../src/core/types/radius.ts","../src/core/primitives/types.ts","../src/core/types/placement.ts","../src/core/utils/layer/layer.tsx"],"mappings":"AAGA;;;KAAY;;;;KAKA;;;;KAKA;;;;KAKA;;;;KCfA;;;;KAKA;;;;KAKA;;;;KAWA;;;;KAKA;;;;KC1BA;;;;KAKA;;;;KAKA;;;;KCVA;;;;KAKA;;;;KAKA;;;;KAKA;;;;KAKA;;;;KAKA;;;;KCzBA;;;;UCaK;EACf;EACA;EACA;EACA;EACA;;;;;UAMe;EACf,UAAU,aAAa;EACvB,SAAS,YAAY;EACrB,WAAW,cAAc;EACzB,SAAS,YAAY;;;;;UAMN;EACf,QAAQ,YAAY;EACpB,YAAY,gBAAgB;EAC5B,UAAU,cAAc;EACxB,OAAO,WAAW;;;;;UAMH;;EAEf,OAAO,YAAY;;;;;UAMJ;EACf,WAAW,eAAe;EAC1B,WAAW,eAAe;EAC1B,WAAW,eAAe;;;;EAK1B;EACA;EACA;EACA;EACA;;;;EAIA;EACA;;;;;UAMe;EACf,aAAa,iBAAiB;;;;EAI9B;EACA,kBAAkB,sBAAsB;;;;EAIxC;EACA,gBAAgB,oBAAoB;;;;EAIpC;EACA,UAAU,cAAc;;;;EAIxB;EACA,eAAe,mBAAmB;;;;EAIlC;EACA,aAAa,iBAAiB;;;;EAI9B;;;;;UAMe;;EAEf;;EAEA;;EAEA;EACA;EACA;EACA;EACA;;;;;UAMe;EACf;EACA;EACA;EACA;EACA;EACA;EACA;;;;;UAMe;EACf,SAAS,SAAS;;;;;UAMH;EACf;;;;;UAMe;EACf;;;;;KAMU,iBAER;EACE;EACA;;;;;;;KCnKM;;;;UCMK;EACf,KAAK,MAAM,oBAAoB,MAAM,IAAI;;EAEzC,cAAc;IAAQ,eAAe;;EACrC;;;;;iBAyEc,MAAM,OAAO,aAAa,KAAK,MAAM,UAAU,yCAAsB,IAAA"}
+{"version":3,"file":"layer-ChlP9Ik6.d.ts","names":[],"sources":["../src/core/types/box.ts","../src/core/types/flex.ts","../src/core/types/grid.ts","../src/core/types/gridItem.ts","../src/core/types/radius.ts","../src/core/primitives/types.ts","../src/core/types/placement.ts","../src/core/utils/layer/layer.tsx"],"mappings":"AAGA;;;KAAY;;;;KAKA;;;;KAKA;;;;KAKA;;;;KCfA;;;;KAKA;;;;KAKA;;;;KAWA;;;;KAKA;;;;KC1BA;;;;KAKA;;;;KAKA;;;;KCVA;;;;KAKA;;;;KAKA;;;;KAKA;;;;KAKA;;;;KAKA;;;;KCzBA;;;;UCaK;EACf;EACA;EACA;EACA;EACA;;;;;UAMe;EACf,UAAU,aAAa;EACvB,SAAS,YAAY;EACrB,WAAW,cAAc;EACzB,SAAS,YAAY;;;;;UAMN;EACf,QAAQ,YAAY;EACpB,YAAY,gBAAgB;EAC5B,UAAU,cAAc;EACxB,OAAO,WAAW;;;;;UAMH;;EAEf,OAAO,YAAY;;;;;UAMJ;EACf,WAAW,eAAe;EAC1B,WAAW,eAAe;EAC1B,WAAW,eAAe;;;;EAK1B;EACA;EACA;EACA;EACA;;;;EAIA;EACA;;;;;UAMe;EACf,aAAa,iBAAiB;;;;EAI9B;EACA,kBAAkB,sBAAsB;;;;EAIxC;EACA,gBAAgB,oBAAoB;;;;EAIpC;EACA,UAAU,cAAc;;;;EAIxB;EACA,eAAe,mBAAmB;;;;EAIlC;EACA,aAAa,iBAAiB;;;;EAI9B;;;;;UAMe;;EAEf;;EAEA;;EAEA;EACA;EACA;EACA;EACA;;;;;UAMe;EACf;EACA;EACA;EACA;EACA;EACA;EACA;;;;;UAMe;EACf,SAAS,SAAS;;;;;UAMH;EACf;;;;;UAMe;EACf;;;;;KAMU,iBAER;EACE;EACA;;;;;;;KCnKM;;;;UCQK;EACf,KAAK,MAAM,oBAAoB,MAAM,IAAI;;EAEzC,cAAc;IAAQ,eAAe;;EACrC;;;;;iBAgFc,MAAM,OAAO,aAAa,KAAK,MAAM,UAAU,yCAAsB,IAAA"}

package/dist/menu.d.ts

@@ -34,7 +34,7 @@ interface MenuProps extends ResponsivePaddingProps {
  *
  * @public
  */
-declare function Menu(props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>): import("react").JSX.Element;
+export declare function Menu(props: MenuProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'role' | 'tabIndex'>): import("react").JSX.Element;
 /**
  * @public
  */
@@ -81,7 +81,7 @@ interface MenuButtonProps {
  *
  * @public
  */
-declare function MenuButton(props: MenuButtonProps): import("react").JSX.Element;
+export declare function MenuButton(props: MenuButtonProps): import("react").JSX.Element;
 /**
  * @public
  */
@@ -89,7 +89,7 @@ type MenuDividerProps<E extends ElementType = 'hr'> = Props<EmptyProps, E>;
 /**
  * @public
  */
-declare const MenuDivider: <E extends ElementType = 'hr'>(props: MenuDividerProps<E>) => React.JSX.Element;
+export declare const MenuDivider: <E extends ElementType = 'hr'>(props: MenuDividerProps<E>) => React.JSX.Element;
 /**
  * @public
  */
@@ -115,7 +115,7 @@ type MenuGroupProps<E extends ElementType = 'button'> = Props<MenuGroupOwnProps,
 /**
  * @public
  */
-declare const MenuGroup: <E extends ElementType = 'button'>(props: MenuGroupProps<E>) => React.JSX.Element;
+export declare const MenuGroup: <E extends ElementType = 'button'>(props: MenuGroupProps<E>) => React.JSX.Element;
 /**
  * @public
  */
@@ -141,6 +141,6 @@ type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E
 /**
  * @public
  */
-declare const MenuItem: <E extends ElementType = 'button'>(props: MenuItemProps<E>) => React.JSX.Element;
-export { Menu, MenuButton, type MenuButtonProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupOwnProps, type MenuGroupProps, MenuItem, type MenuItemOwnProps, type MenuItemProps, type MenuProps };
+export declare const MenuItem: <E extends ElementType = 'button'>(props: MenuItemProps<E>) => React.JSX.Element;
+export type { MenuButtonProps, MenuDividerProps, MenuGroupOwnProps, MenuGroupProps, MenuItemOwnProps, MenuItemProps, MenuProps };
 //# sourceMappingURL=menu.d.ts.map

package/dist/menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"menu.d.ts","names":[],"sources":["../src/core/components/menu/menu.tsx","../src/core/components/menu/menuButton.tsx","../src/core/components/menu/menuDivider.ts","../src/core/components/menu/menuGroup.tsx","../src/core/components/menu/menuItem.tsx"],"mappings":";;;;;;;UAeiB,kBAAkB;;;;EAIjC;;;;EAIA;EACA,oBAAoB,OAAO;EAC3B;EACA;EACA,kBAAkB;EAClB,kBAAkB;EAClB,qBAAqB,IAAI;EACzB;EACA;;;;EAIA;EACA;EACA,mBAAmB,OAAO;;;;;;;iBAaZ,KACd,OAAO,YAAY,KAAK,MAAM,UAAU,0EAAuD,IAAA;;;;UCnChF;;;;EAIf;;;;EAIA;EACA,QAAQ,MAAM,IAAI;EAClB;EACA,OAAO,MAAM,IAAI;EACjB;EACA;;;;EAIA;EACA,UAAU,KAAK;;;;EAIf;;;;EAIA;;;;;EAKA;;;;EAIA;EACA,MAAM,MAAM,IAAI;;;;;;;iBAQF,WAAW,OAAO,kCAAe,IAAA;;;;KCrDrC,iBAAiB,UAAU,sBAAsB,MAAM,YAAY;;;;cAMlE,cAKI,UAAU,oBAAoB,OAAO,iBAAiB,OAAO,MAAM,IAAI;;;;UCEvE;EACf;EAEA,OAAO,MAAM,cAAc,MAAM;EACjC,OAAO,KACL;EAUF;EACA,UAAU,KAAK;EACf,SAAS,SAAS;EAClB;;;;EAIA;EACA,MAAM,MAAM;EACZ,OAAO;;;;;KAMG,eAAe,UAAU,0BAA0B,MAAM,mBAAmB;;;;cAwL3E,YAA8C,UAAU,wBACnE,OAAO,eAAe,OACnB,MAAM,IAAI;;;;UClNE,yBAAyB,wBAAwB;EAChE;EACA;EAEA,OAAO,MAAM,cAAc,MAAM;EAEjC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA;EACA;;;;EAIA;EACA,OAAO,MAAM;EACb,OAAO;;;;;KAMG,cAAc,UAAU,0BAA0B,MAAM,kBAAkB;;;;cAoJzE,WAA4C,UAAU,wBACjE,OAAO,cAAc,OAClB,MAAM,IAAI"}
+{"version":3,"file":"menu.d.ts","names":[],"sources":["../src/core/components/menu/menu.tsx","../src/core/components/menu/menuButton.tsx","../src/core/components/menu/menuDivider.tsx","../src/core/components/menu/menuGroup.tsx","../src/core/components/menu/menuItem.tsx"],"mappings":";;;;;;;UAiBiB,kBAAkB;;;;EAIjC;;;;EAIA;EACA,oBAAoB,OAAO;EAC3B;EACA;EACA,kBAAkB;EAClB,kBAAkB;EAClB,qBAAqB,IAAI;EACzB;EACA;;;;EAIA;EACA;EACA,mBAAmB,OAAO;;;;;;;wBAQZ,KACd,OAAO,YAAY,KAAK,MAAM,UAAU,0EAAuD,IAAA;;;;UChChF;;;;EAIf;;;;EAIA;EACA,QAAQ,MAAM,IAAI;EAClB;EACA,OAAO,MAAM,IAAI;EACjB;EACA;;;;EAIA;EACA,UAAU,KAAK;;;;EAIf;;;;EAIA;;;;;EAKA;;;;EAIA;EACA,MAAM,MAAM,IAAI;;;;;;;wBAQF,WAAW,OAAO,kCAAe,IAAA;;;;KCnDrC,iBAAiB,UAAU,sBAAsB,MAAM,YAAY;;;;qBA0BlE,cAAkD,UAAU,oBACvE,OAAO,iBAAiB,OACrB,MAAM,IAAI;;;;UCjBE;EACf;EAEA,OAAO,MAAM,cAAc,MAAM;EACjC,OAAO,KACL;EAUF;EACA,UAAU,KAAK;EACf,SAAS,SAAS;EAClB;;;;EAIA;EACA,MAAM,MAAM;EACZ,OAAO;;;;;KAMG,eAAe,UAAU,0BAA0B,MAAM,mBAAmB;;;;qBAwL3E,YAA8C,UAAU,wBACnE,OAAO,eAAe,OACnB,MAAM,IAAI;;;;UClNE,yBAAyB,wBAAwB;EAChE;EACA;EAEA,OAAO,MAAM,cAAc,MAAM;EAEjC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA;EACA;;;;EAIA;EACA,OAAO,MAAM;EACb,OAAO;;;;;KAMG,cAAc,UAAU,0BAA0B,MAAM,kBAAkB;;;;qBAoJzE,WAA4C,UAAU,wBACjE,OAAO,cAAc,OAClB,MAAM,IAAI"}

package/dist/menu.js

@@ -2,13 +2,14 @@
 import { n as _getArrayProp } from "./helpers-C8xxXAQC.js";
 import { i as isHTMLButtonElement, r as isHTMLAnchorElement } from "./element-BYgCE_iK.js";
 import { t as getTheme_v2 } from "./getTheme_v2-y09KqtEb.js";
-import { d as createGlobalScopedContext, h as _cardColorStyle, l as useRootTheme, r as isRecord, t as useLayer, v as responsiveRadiusStyle, y as Box } from "./useLayer-jUJIz8mh.js";
-import { t as Flex } from "./flex-CySCBzQm.js";
-import { n as Text, t as Stack } from "./stack-BGFEokua.js";
-import { t as Popover } from "./popover-CEbjxiPx.js";
+import { d as createGlobalScopedContext, h as _cardColorStyle, l as useRootTheme, r as isRecord, t as useLayer, v as responsiveRadiusStyle, y as Box } from "./useLayer-D1usxIE0.js";
+import { t as Flex } from "./flex-DmbDG2ks.js";
+import { n as Text, t as Stack } from "./stack-rsNFPq2-.js";
+import { t as Popover } from "./popover-myCXZV_F.js";
 import { t as useClickOutsideEvent } from "./useClickOutsideEvent-wGLGWBZN.js";
-import { i as useGlobalKeyDown, t as Hotkeys } from "./hotkeys-BPlacpG8.js";
+import { i as useGlobalKeyDown, t as Hotkeys } from "./hotkeys-uSArGPzR.js";
 import { c } from "react/compiler-runtime";
+import { clsx } from "clsx/lite";
 import { cloneElement, isValidElement, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
 import { css, styled } from "styled-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -176,43 +177,40 @@ function useMenuController(props) {
 	}, $[17] = activeElement, $[18] = activeIndex, $[19] = handleItemMouseLeave, $[20] = handleKeyDown, $[21] = mount, $[22] = t10) : t10 = $[22], t10;
 }
 function _temp$2() {}
-const StyledMenu = styled(Box).withConfig({
-	displayName: "StyledMenu",
-	componentId: "sc-co76mp-0"
-})`outline:none;overflow:auto;`;
+var menu = "_196sf460";
 /**
 * The `Menu` component is a building block for application menus.
 *
 * @public
 */
 function Menu(props) {
-	let $ = c(50), children, forwardedRef, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1, t2;
-	$[0] === props ? (children = $[1], forwardedRef = $[2], onClickOutside = $[3], onEscape = $[4], onItemClick = $[5], onItemSelect = $[6], onKeyDown = $[7], originElement = $[8], registerElement = $[9], restProps = $[10], t0 = $[11], t1 = $[12], t2 = $[13]) : ({children, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, padding: t0, ref: forwardedRef, registerElement, shouldFocus: t1, gap: t2, ...restProps} = props, $[0] = props, $[1] = children, $[2] = forwardedRef, $[3] = onClickOutside, $[4] = onEscape, $[5] = onItemClick, $[6] = onItemSelect, $[7] = onKeyDown, $[8] = originElement, $[9] = registerElement, $[10] = restProps, $[11] = t0, $[12] = t1, $[13] = t2);
+	let $ = c(54), children, className, forwardedRef, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, registerElement, restProps, t0, t1, t2;
+	$[0] === props ? (children = $[1], className = $[2], forwardedRef = $[3], onClickOutside = $[4], onEscape = $[5], onItemClick = $[6], onItemSelect = $[7], onKeyDown = $[8], originElement = $[9], registerElement = $[10], restProps = $[11], t0 = $[12], t1 = $[13], t2 = $[14]) : ({children, className, onClickOutside, onEscape, onItemClick, onItemSelect, onKeyDown, originElement, padding: t0, ref: forwardedRef, registerElement, shouldFocus: t1, gap: t2, ...restProps} = props, $[0] = props, $[1] = children, $[2] = className, $[3] = forwardedRef, $[4] = onClickOutside, $[5] = onEscape, $[6] = onItemClick, $[7] = onItemSelect, $[8] = onKeyDown, $[9] = originElement, $[10] = registerElement, $[11] = restProps, $[12] = t0, $[13] = t1, $[14] = t2);
 	let padding = t0 === void 0 ? 1 : t0, shouldFocus = t1 === void 0 ? null : t1, gap = t2 === void 0 ? 1 : t2, ref = useRef(null), t3;
-	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => ref.current, $[14] = t3) : t3 = $[14], useImperativeHandle(forwardedRef, t3);
+	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => ref.current, $[15] = t3) : t3 = $[15], useImperativeHandle(forwardedRef, t3);
 	let { isTopLayer } = useLayer(), t4;
-	$[15] !== onKeyDown || $[16] !== originElement || $[17] !== shouldFocus ? (t4 = {
+	$[16] !== onKeyDown || $[17] !== originElement || $[18] !== shouldFocus ? (t4 = {
 		onKeyDown,
 		originElement,
 		shouldFocus,
 		rootElementRef: ref
-	}, $[15] = onKeyDown, $[16] = originElement, $[17] = shouldFocus, $[18] = t4) : t4 = $[18];
+	}, $[16] = onKeyDown, $[17] = originElement, $[18] = shouldFocus, $[19] = t4) : t4 = $[19];
 	let { activeElement, activeIndex, handleItemMouseEnter, handleItemMouseLeave, handleKeyDown, mount } = useMenuController(t4), unregisterElementRef = useRef(null), t5;
-	$[19] === registerElement ? t5 = $[20] : (t5 = (el) => {
+	$[20] === registerElement ? t5 = $[21] : (t5 = (el) => {
 		unregisterElementRef.current &&= (unregisterElementRef.current(), null), ref.current = el, ref.current && registerElement && (unregisterElementRef.current = registerElement(ref.current));
-	}, $[19] = registerElement, $[20] = t5);
+	}, $[20] = registerElement, $[21] = t5);
 	let handleRefChange = t5, t6, t7;
-	$[21] !== activeIndex || $[22] !== onItemSelect ? (t6 = () => {
+	$[22] !== activeIndex || $[23] !== onItemSelect ? (t6 = () => {
 		onItemSelect && onItemSelect(activeIndex);
-	}, t7 = [activeIndex, onItemSelect], $[21] = activeIndex, $[22] = onItemSelect, $[23] = t6, $[24] = t7) : (t6 = $[23], t7 = $[24]), useEffect(t6, t7);
+	}, t7 = [activeIndex, onItemSelect], $[22] = activeIndex, $[23] = onItemSelect, $[24] = t6, $[25] = t7) : (t6 = $[24], t7 = $[25]), useEffect(t6, t7);
 	let t8;
-	$[25] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => [ref.current], $[25] = t8) : t8 = $[25], useClickOutsideEvent(isTopLayer && onClickOutside, t8);
+	$[26] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => [ref.current], $[26] = t8) : t8 = $[26], useClickOutsideEvent(isTopLayer && onClickOutside, t8);
 	let t9;
-	$[26] !== isTopLayer || $[27] !== onEscape ? (t9 = (event) => {
+	$[27] !== isTopLayer || $[28] !== onEscape ? (t9 = (event) => {
 		isTopLayer && event.key === "Escape" && (event.stopPropagation(), onEscape && onEscape());
-	}, $[26] = isTopLayer, $[27] = onEscape, $[28] = t9) : t9 = $[28], useGlobalKeyDown(t9);
+	}, $[27] = isTopLayer, $[28] = onEscape, $[29] = t9) : t9 = $[29], useGlobalKeyDown(t9);
 	let t10;
-	$[29] !== activeElement || $[30] !== handleItemMouseEnter || $[31] !== handleItemMouseLeave || $[32] !== mount || $[33] !== onClickOutside || $[34] !== onEscape || $[35] !== onItemClick || $[36] !== registerElement ? (t10 = {
+	$[30] !== activeElement || $[31] !== handleItemMouseEnter || $[32] !== handleItemMouseLeave || $[33] !== mount || $[34] !== onClickOutside || $[35] !== onEscape || $[36] !== onItemClick || $[37] !== registerElement ? (t10 = {
 		version: 2,
 		activeElement,
 		mount,
@@ -222,14 +220,17 @@ function Menu(props) {
 		onItemMouseEnter: handleItemMouseEnter,
 		onItemMouseLeave: handleItemMouseLeave,
 		registerElement
-	}, $[29] = activeElement, $[30] = handleItemMouseEnter, $[31] = handleItemMouseLeave, $[32] = mount, $[33] = onClickOutside, $[34] = onEscape, $[35] = onItemClick, $[36] = registerElement, $[37] = t10) : t10 = $[37];
+	}, $[30] = activeElement, $[31] = handleItemMouseEnter, $[32] = handleItemMouseLeave, $[33] = mount, $[34] = onClickOutside, $[35] = onEscape, $[36] = onItemClick, $[37] = registerElement, $[38] = t10) : t10 = $[38];
 	let value = t10, t11;
-	$[38] !== children || $[39] !== gap ? (t11 = /* @__PURE__ */ jsx(Stack, {
+	$[39] === className ? t11 = $[40] : (t11 = clsx(menu, className), $[39] = className, $[40] = t11);
+	let t12;
+	$[41] !== children || $[42] !== gap ? (t12 = /* @__PURE__ */ jsx(Stack, {
 		gap,
 		children
-	}), $[38] = children, $[39] = gap, $[40] = t11) : t11 = $[40];
-	let t12;
-	$[41] !== handleKeyDown || $[42] !== handleRefChange || $[43] !== padding || $[44] !== restProps || $[45] !== t11 ? (t12 = /* @__PURE__ */ jsx(StyledMenu, {
+	}), $[41] = children, $[42] = gap, $[43] = t12) : t12 = $[43];
+	let t13;
+	$[44] !== handleKeyDown || $[45] !== handleRefChange || $[46] !== padding || $[47] !== restProps || $[48] !== t11 || $[49] !== t12 ? (t13 = /* @__PURE__ */ jsx(Box, {
+		className: t11,
 		"data-ui": "Menu",
 		...restProps,
 		onKeyDown: handleKeyDown,
@@ -237,13 +238,13 @@ function Menu(props) {
 		ref: handleRefChange,
 		role: "menu",
 		tabIndex: -1,
-		children: t11
-	}), $[41] = handleKeyDown, $[42] = handleRefChange, $[43] = padding, $[44] = restProps, $[45] = t11, $[46] = t12) : t12 = $[46];
-	let t13;
-	return $[47] !== t12 || $[48] !== value ? (t13 = /* @__PURE__ */ jsx(MenuContext.Provider, {
-		value,
 		children: t12
-	}), $[47] = t12, $[48] = value, $[49] = t13) : t13 = $[49], t13;
+	}), $[44] = handleKeyDown, $[45] = handleRefChange, $[46] = padding, $[47] = restProps, $[48] = t11, $[49] = t12, $[50] = t13) : t13 = $[50];
+	let t14;
+	return $[51] !== t13 || $[52] !== value ? (t14 = /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value,
+		children: t13
+	}), $[51] = t13, $[52] = value, $[53] = t14) : t14 = $[53], t14;
 }
 /**
 * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
@@ -287,7 +288,7 @@ function MenuButton(props) {
 	let handleButtonKeyDown = t10, t11;
 	$[16] !== buttonElement || $[17] !== menuElements ? (t11 = (event_1) => {
 		let target = event_1.target;
-		if (target instanceof Node && !(buttonElement && (target === buttonElement || buttonElement.contains(target)))) {
+		if (target instanceof Node && (!buttonElement || target !== buttonElement && !buttonElement.contains(target))) {
 			for (let el of menuElements) if (target === el || el.contains(target)) return;
 			setOpen(!1);
 		}
@@ -357,13 +358,24 @@ function MenuButton(props) {
 function _temp$1(v) {
 	return !v;
 }
+var menuDivider = "_17s3sc10";
+function MenuDividerComponent(props) {
+	let $ = c(12), className, ref, restProps, t0;
+	$[0] === props ? (className = $[1], ref = $[2], restProps = $[3], t0 = $[4]) : ({as: t0, className, ref, ...restProps} = props, $[0] = props, $[1] = className, $[2] = ref, $[3] = restProps, $[4] = t0);
+	let Component = t0 === void 0 ? "hr" : t0, t1;
+	$[5] === className ? t1 = $[6] : (t1 = clsx(menuDivider, className), $[5] = className, $[6] = t1);
+	let t2;
+	return $[7] !== Component || $[8] !== ref || $[9] !== restProps || $[10] !== t1 ? (t2 = /* @__PURE__ */ jsx(Component, {
+		"data-ui": "MenuDivider",
+		className: t1,
+		ref,
+		...restProps
+	}), $[7] = Component, $[8] = ref, $[9] = restProps, $[10] = t1, $[11] = t2) : t2 = $[11], t2;
+}
 /**
 * @public
 */
-const MenuDivider = styled.hr.withConfig({
-	displayName: "MenuDivider",
-	componentId: "sc-qxs7nk-0"
-})`height:1px;border:0;background:var(--card-hairline-soft-color);margin:0;`;
+const MenuDivider = MenuDividerComponent;
 function selectableBaseStyle() {
 	return css`background-color:inherit;color:inherit;&[data-as='button']{-webkit-font-smoothing:inherit;appearance:none;outline:none;font:inherit;text-align:inherit;border:0;width:-moz-available;width:-webkit-fill-available;width:stretch;}&[data-as='a']{text-decoration:none;}`;
 }