@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/components/Markdown.es.js

@@ -0,0 +1,88 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import { loadChunk } from "../util/lazy_chunk.es.js";
+import React, { useEffect, useMemo, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+import { deepEqual } from "fast-equals";
+//#region src/components/Markdown.tsx
+var proseClasses = {
+	small: "prose prose-sm typography-body2",
+	medium: "prose typography-body1",
+	large: "prose prose-lg",
+	xl: "prose prose-xl",
+	"2xl": "prose prose-2xl"
+};
+/**
+* Tailwind typography-plugin weight overrides.
+* The plugin defaults to very heavy weights (h1: 800, h2: 700, h3/h4: 600,
+* strong: 600, code: 600) which clash with the Rebase design-system that uses
+* font-light (300) / font-normal (400) for headings.
+* We reset them here so rendered markdown matches the rest of the UI.
+*/
+var proseWeightOverrides = [
+	"prose-headings:font-normal",
+	"prose-strong:font-semibold",
+	"prose-code:font-normal",
+	"prose-blockquote:font-normal",
+	"prose-a:font-normal"
+].join(" ");
+/**
+* The parser, fetched the first time a `Markdown` mounts and shared after that.
+*
+* markdown-it and its dependencies are ~100 kB minified (44 kB gzipped), and
+* every admin evaluates this module on boot — the login screen included —
+* while only markdown cells and previews ever render one. A static import put
+* all of it in the chunk the login screen preloads. So it is imported on
+* demand; until it lands, `Markdown` shows its source as plain text in the
+* same container. Once loaded it is reused for the session, and every later
+* render is synchronous.
+*
+* Read through `useSyncExternalStore` with an empty server snapshot, so a
+* server render and the hydration that follows it both show the plain text,
+* whatever the server process had loaded before.
+*/
+var md;
+var loading;
+var parserListeners = /* @__PURE__ */ new Set();
+function loadParser() {
+	loading ??= loadChunk(() => import("markdown-it")).then(({ default: MarkdownItParser }) => {
+		md = new MarkdownItParser({ html: false });
+		parserListeners.forEach((listener) => listener());
+		return md;
+	}, (error) => {
+		loading = void 0;
+		throw error;
+	});
+	return loading;
+}
+function subscribeToParser(listener) {
+	parserListeners.add(listener);
+	return () => parserListeners.delete(listener);
+}
+var loadedParser = () => md;
+var noParserOnTheServer = () => void 0;
+/**
+* @group Preview components
+*/
+var Markdown = React.memo(function Markdown({ source, className, size = "medium" }) {
+	const parser = useSyncExternalStore(subscribeToParser, loadedParser, noParserOnTheServer);
+	const text = typeof source === "string" ? source : "";
+	useEffect(() => {
+		if (parser) return;
+		loadParser().catch((error) => console.error("[rebase] could not load the markdown renderer", error));
+	}, [parser]);
+	const html = useMemo(() => parser?.render(text), [parser, text]);
+	const classes = cls(proseClasses[size], "dark:prose-invert prose-headings:font-title", proseWeightOverrides, className);
+	if (html === void 0) return /* @__PURE__ */ jsx("div", {
+		className: cls(classes, "whitespace-pre-line"),
+		children: text
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: classes,
+		dangerouslySetInnerHTML: { __html: html }
+	});
+}, deepEqual);
+//#endregion
+export { Markdown };
+
+//# sourceMappingURL=Markdown.es.js.map

package/dist/components/Markdown.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Markdown.es.js","names":[],"sources":["../../src/components/Markdown.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useMemo, useSyncExternalStore } from \"react\";\nimport { deepEqual as equal } from \"fast-equals\"\n\nimport type MarkdownIt from \"markdown-it\";\nimport { cls } from \"../util\";\nimport { loadChunk } from \"../util/lazy_chunk\";\n\nexport interface MarkdownProps {\n    source: string,\n    size?: \"small\" | \"medium\" | \"large\" | \"xl\" | \"2xl\";\n    className?: string\n}\n\nconst proseClasses = {\n    small: \"prose prose-sm typography-body2\",\n    medium: \"prose typography-body1\",\n    large: \"prose prose-lg\",\n    xl: \"prose prose-xl\",\n    \"2xl\": \"prose prose-2xl\"\n};\n\n/**\n * Tailwind typography-plugin weight overrides.\n * The plugin defaults to very heavy weights (h1: 800, h2: 700, h3/h4: 600,\n * strong: 600, code: 600) which clash with the Rebase design-system that uses\n * font-light (300) / font-normal (400) for headings.\n * We reset them here so rendered markdown matches the rest of the UI.\n */\nconst proseWeightOverrides = [\n    \"prose-headings:font-normal\",\n    \"prose-strong:font-semibold\",\n    \"prose-code:font-normal\",\n    \"prose-blockquote:font-normal\",\n    \"prose-a:font-normal\"\n].join(\" \");\n\n/**\n * The parser, fetched the first time a `Markdown` mounts and shared after that.\n *\n * markdown-it and its dependencies are ~100 kB minified (44 kB gzipped), and\n * every admin evaluates this module on boot — the login screen included —\n * while only markdown cells and previews ever render one. A static import put\n * all of it in the chunk the login screen preloads. So it is imported on\n * demand; until it lands, `Markdown` shows its source as plain text in the\n * same container. Once loaded it is reused for the session, and every later\n * render is synchronous.\n *\n * Read through `useSyncExternalStore` with an empty server snapshot, so a\n * server render and the hydration that follows it both show the plain text,\n * whatever the server process had loaded before.\n */\nlet md: MarkdownIt | undefined;\nlet loading: Promise<MarkdownIt> | undefined;\nconst parserListeners = new Set<() => void>();\n\nfunction loadParser(): Promise<MarkdownIt> {\n    loading ??= loadChunk(() => import(\"markdown-it\")).then(({ default: MarkdownItParser }) => {\n        md = new MarkdownItParser({ html: false });\n        parserListeners.forEach(listener => listener());\n        return md;\n    }, (error: unknown) => {\n        // The next `Markdown` to mount tries again; this one stays plain text.\n        loading = undefined;\n        throw error;\n    });\n    return loading;\n}\n\nfunction subscribeToParser(listener: () => void): () => void {\n    parserListeners.add(listener);\n    return () => parserListeners.delete(listener);\n}\n\nconst loadedParser = () => md;\nconst noParserOnTheServer = () => undefined;\n\n/**\n * @group Preview components\n */\nexport const Markdown = React.memo<MarkdownProps>(function Markdown({\n                                                                        source,\n                                                                        className,\n                                                                        size = \"medium\"\n                                                                    }: MarkdownProps) {\n        const parser = useSyncExternalStore(subscribeToParser, loadedParser, noParserOnTheServer);\n        const text = typeof source === \"string\" ? source : \"\";\n\n        useEffect(() => {\n            if (parser) return;\n            loadParser().catch(error => console.error(\"[rebase] could not load the markdown renderer\", error));\n        }, [parser]);\n\n        const html = useMemo(() => parser?.render(text), [parser, text]);\n        const classes = cls(proseClasses[size], \"dark:prose-invert prose-headings:font-title\", proseWeightOverrides, className);\n\n        if (html === undefined) {\n            // Until the parser arrives: the source as text, line breaks kept,\n            // in the same box, so the space the rendered markdown takes is\n            // roughly held and nothing is hidden.\n            return <div className={cls(classes, \"whitespace-pre-line\")}>{text}</div>;\n        }\n\n        return <div\n            className={classes}\n            dangerouslySetInnerHTML={{ __html: html }}\n        />;\n    }\n    , equal) as React.FunctionComponent<MarkdownProps>;\n"],"mappings":";;;;;;;AAcA,IAAM,eAAe;CACjB,OAAO;CACP,QAAQ;CACR,OAAO;CACP,IAAI;CACJ,OAAO;AACX;;;;;;;;AASA,IAAM,uBAAuB;CACzB;CACA;CACA;CACA;CACA;AACJ,CAAC,CAAC,KAAK,GAAG;;;;;;;;;;;;;;;;AAiBV,IAAI;AACJ,IAAI;AACJ,IAAM,kCAAkB,IAAI,IAAgB;AAE5C,SAAS,aAAkC;CACvC,YAAY,gBAAgB,OAAO,cAAc,CAAC,CAAC,MAAM,EAAE,SAAS,uBAAuB;EACvF,KAAK,IAAI,iBAAiB,EAAE,MAAM,MAAM,CAAC;EACzC,gBAAgB,SAAQ,aAAY,SAAS,CAAC;EAC9C,OAAO;CACX,IAAI,UAAmB;EAEnB,UAAU,KAAA;EACV,MAAM;CACV,CAAC;CACD,OAAO;AACX;AAEA,SAAS,kBAAkB,UAAkC;CACzD,gBAAgB,IAAI,QAAQ;CAC5B,aAAa,gBAAgB,OAAO,QAAQ;AAChD;AAEA,IAAM,qBAAqB;AAC3B,IAAM,4BAA4B,KAAA;;;;AAKlC,IAAa,WAAW,MAAM,KAAoB,SAAS,SAAS,EACI,QACA,WACA,OAAO,YACO;CAC9E,MAAM,SAAS,qBAAqB,mBAAmB,cAAc,mBAAmB;CACxF,MAAM,OAAO,OAAO,WAAW,WAAW,SAAS;CAEnD,gBAAgB;EACZ,IAAI,QAAQ;EACZ,WAAW,CAAC,CAAC,OAAM,UAAS,QAAQ,MAAM,iDAAiD,KAAK,CAAC;CACrG,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,OAAO,cAAc,QAAQ,OAAO,IAAI,GAAG,CAAC,QAAQ,IAAI,CAAC;CAC/D,MAAM,UAAU,IAAI,aAAa,OAAO,+CAA+C,sBAAsB,SAAS;CAEtH,IAAI,SAAS,KAAA,GAIT,OAAO,oBAAC,OAAD;EAAK,WAAW,IAAI,SAAS,qBAAqB;YAAI;CAAU,CAAA;CAG3E,OAAO,oBAAC,OAAD;EACH,WAAW;EACX,yBAAyB,EAAE,QAAQ,KAAK;CAC3C,CAAA;AACL,GACE,SAAK"}

package/dist/components/Menu.es.js

@@ -0,0 +1,46 @@
+"use client";
+import { focusedDisabled, paperMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { usePortalContainer } from "../hooks/PortalContainerContext.es.js";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+//#region src/components/Menu.tsx
+var Menu = React.forwardRef(({ children, trigger, open, defaultOpen, side, align, onOpenChange, portalContainer, sideOffset = 4, className }, ref) => {
+	const contextContainer = usePortalContainer();
+	const finalContainer = portalContainer ?? contextContainer ?? void 0;
+	return /* @__PURE__ */ jsxs(DropdownMenu.Root, {
+		open,
+		defaultOpen,
+		onOpenChange,
+		children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, {
+			ref,
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(DropdownMenu.Portal, {
+			container: finalContainer,
+			children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
+				side,
+				sideOffset,
+				align,
+				className: cls(paperMixin, focusedDisabled, "py-2 z-50", className),
+				children
+			})
+		})]
+	});
+});
+Menu.displayName = "Menu";
+var MenuItem = React.memo(({ children, dense = false, disabled = false, onClick, className }) => {
+	const classNames = cls(onClick && !disabled && "cursor-pointer", disabled && "opacity-50 cursor-not-allowed", "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4 transition-colors duration-150", !disabled && "hover:bg-surface-hover", dense ? "px-4 py-1.5" : "px-4 py-2", className);
+	return /* @__PURE__ */ jsx(DropdownMenu.Item, {
+		className: classNames,
+		disabled,
+		onClick: disabled ? void 0 : onClick,
+		children
+	});
+});
+MenuItem.displayName = "MenuItem";
+//#endregion
+export { Menu, MenuItem };
+
+//# sourceMappingURL=Menu.es.js.map

package/dist/components/Menu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.es.js","names":[],"sources":["../../src/components/Menu.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\nimport * as DropdownMenu from \"@radix-ui/react-dropdown-menu\";\nimport { focusedDisabled, paperMixin } from \"../styles\";\nimport { cls } from \"../util\";\nimport { usePortalContainer } from \"../hooks/PortalContainerContext\";\n\nexport type MenuProps = {\n    children: React.ReactNode;\n    trigger: React.ReactNode;\n\n    open?: boolean;\n    defaultOpen?: boolean;\n    onOpenChange?(open: boolean): void;\n\n    portalContainer?: HTMLElement | null;\n    side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n    align?: \"start\" | \"center\" | \"end\";\n\n    sideOffset?: number;\n    className?: string;\n}\n\nconst Menu = React.forwardRef<\n    React.ElementRef<typeof DropdownMenu.Trigger>,\n    MenuProps\n>(({\n       children,\n       trigger,\n       open,\n       defaultOpen,\n       side,\n       align,\n       onOpenChange,\n       portalContainer,\n       sideOffset = 4,\n       className\n   }, ref) => {\n    // Get the portal container from context\n    const contextContainer = usePortalContainer();\n\n    // Prioritize manual prop, fallback to context container\n    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;\n\n    return (\n        <DropdownMenu.Root\n            open={open}\n            defaultOpen={defaultOpen}\n            onOpenChange={onOpenChange}>\n            <DropdownMenu.Trigger\n                ref={ref}\n                asChild>\n                {trigger}\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Portal container={finalContainer}>\n                <DropdownMenu.Content\n                    side={side}\n                    sideOffset={sideOffset}\n                    align={align}\n                    // `z-50` is the floating layer — the tier `Dialog`, `Sheet`,\n                    // `Select` and `Tooltip` all sit on. Radix copies this value\n                    // onto the popper wrapper it portals next to them, so at any\n                    // lower value the menu opens *behind* the dialog or sheet it\n                    // was opened from: visible in the DOM, painted under the\n                    // overlay, and unclickable. Peers on this tier stack by mount\n                    // order, which is what puts a menu above the dialog holding\n                    // its trigger, and a dialog that menu opens above them both.\n                    className={cls(paperMixin, focusedDisabled, \"py-2 z-50\", className)}>\n                    {children}\n                </DropdownMenu.Content>\n            </DropdownMenu.Portal>\n        </DropdownMenu.Root>\n    );\n})\nMenu.displayName = \"Menu\"\n\nexport { Menu }\n\nexport type MenuItemProps = {\n    children: React.ReactNode;\n    dense?: boolean;\n    disabled?: boolean;\n    onClick?: (event: React.MouseEvent) => void;\n    className?: string;\n};\n\nexport const MenuItem = React.memo(({\n                                        children,\n                                        dense = false, // Default value is false if not provided\n                                        disabled = false,\n                                        onClick,\n                                        className\n                                    }: MenuItemProps) => {\n    // Dynamically adjusting the class based on the \"dense\" prop\n    const classNames = cls(\n        onClick && !disabled && \"cursor-pointer\",\n        disabled && \"opacity-50 cursor-not-allowed\",\n        \"rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 flex items-center gap-4 transition-colors duration-150\",\n        !disabled && \"hover:bg-surface-hover\",\n        dense ? \"px-4 py-1.5\" : \"px-4 py-2\",\n        className\n    );\n\n    return (\n        <DropdownMenu.Item\n            className={classNames}\n            disabled={disabled}\n            onClick={disabled ? undefined : onClick}>\n            {children}\n        </DropdownMenu.Item>\n    );\n});\n\nMenuItem.displayName = \"MenuItem\";\n"],"mappings":";;;;;;;;AAuBA,IAAM,OAAO,MAAM,YAGhB,EACI,UACA,SACA,MACA,aACA,MACA,OACA,cACA,iBACA,aAAa,GACb,aACD,QAAQ;CAEV,MAAM,mBAAmB,mBAAmB;CAG5C,MAAM,iBAAkB,mBAAmB,oBAAoB,KAAA;CAE/D,OACI,qBAAC,aAAa,MAAd;EACU;EACO;EACC;YAHlB,CAII,oBAAC,aAAa,SAAd;GACS;GACL,SAAA;aACC;EACiB,CAAA,GACtB,oBAAC,aAAa,QAAd;GAAqB,WAAW;aAC5B,oBAAC,aAAa,SAAd;IACU;IACM;IACL;IASP,WAAW,IAAI,YAAY,iBAAiB,aAAa,SAAS;IACjE;GACiB,CAAA;EACL,CAAA,CACN;;AAE3B,CAAC;AACD,KAAK,cAAc;AAYnB,IAAa,WAAW,MAAM,MAAM,EACI,UACA,QAAQ,OACR,WAAW,OACX,SACA,gBACiB;CAErD,MAAM,aAAa,IACf,WAAW,CAAC,YAAY,kBACxB,YAAY,iCACZ,8IACA,CAAC,YAAY,0BACb,QAAQ,gBAAgB,aACxB,SACJ;CAEA,OACI,oBAAC,aAAa,MAAd;EACI,WAAW;EACD;EACV,SAAS,WAAW,KAAA,IAAY;EAC/B;CACc,CAAA;AAE3B,CAAC;AAED,SAAS,cAAc"}

package/dist/components/Menubar.es.js

@@ -0,0 +1,142 @@
+import { cls } from "../util/cls.es.js";
+import { usePortalContainer } from "../hooks/PortalContainerContext.es.js";
+import { iconSize } from "../icons/Icon.es.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+//#region src/components/Menubar.tsx
+function Menubar({ children, onSelect, value, defaultValue, onValueChange, className }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
+		onSelect,
+		value,
+		defaultValue,
+		onValueChange,
+		className: cls("z-10 flex bg-surface-card p-[3px] rounded-lg shadow-sm", className),
+		children
+	});
+}
+function MenubarMenu({ children, value }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.Menu, {
+		value,
+		children
+	});
+}
+function MenubarTrigger({ children, onSelect, className }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
+		onSelect,
+		className: cls("py-2 px-3 outline-none select-none font-medium leading-none rounded-md text-text-primary dark:text-text-primary-dark text-sm transition-colors duration-150 flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-hover data-[state=open]:bg-surface-active hover:bg-surface-hover", className),
+		children
+	});
+}
+function MenubarPortal({ children, portalContainer }) {
+	const contextContainer = usePortalContainer();
+	const finalContainer = portalContainer ?? contextContainer ?? void 0;
+	return /* @__PURE__ */ jsx(MenubarPrimitive.Portal, {
+		container: finalContainer,
+		children
+	});
+}
+function MenubarContent({ children, className, align, sideOffset, alignOffset, onSelect, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
+		onSelect,
+		className: cls("z-50 min-w-[220px] bg-surface-card rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className),
+		align: align ?? "start",
+		sideOffset: sideOffset ?? 5,
+		alignOffset: alignOffset ?? -3,
+		...rest,
+		children
+	});
+}
+function MenubarItem({ children, leftPadding, className, disabled, onSelect, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
+		onSelect,
+		className: cls("group text-sm leading-none rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-active data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-hover  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", leftPadding ? "pl-5" : "", disabled ? "pointer-events-none text-text-secondary dark:text-text-secondary-dark" : "text-text-primary dark:text-text-primary-dark", className),
+		disabled,
+		...rest,
+		children
+	});
+}
+function MenubarSeparator({ children, className, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
+		className: cls("h-[1px] bg-hairline m-[5px]", className),
+		...rest,
+		children
+	});
+}
+function MenubarSub({ children, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.Sub, {
+		...rest,
+		children
+	});
+}
+function MenubarSubTrigger({ children, className, onSelect, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.SubTrigger, {
+		onSelect,
+		className: cls("group text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-active data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-hover  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
+		...rest,
+		children
+	});
+}
+function MenubarSubContent({ children, alignOffset, className, onSelect, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
+		onSelect,
+		alignOffset: alignOffset ?? -5,
+		className: cls("min-w-[220px] bg-surface-card rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]", className),
+		...rest,
+		children
+	});
+}
+function MenubarCheckboxItem({ children, checked, onCheckedChange, className, onSelect, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.CheckboxItem, {
+		onSelect,
+		className: cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-hover data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
+		checked,
+		onCheckedChange,
+		...rest,
+		children
+	});
+}
+function MenubarItemIndicator({ children, className, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.ItemIndicator, {
+		className: cls("absolute left-0 w-4 inline-flex items-center justify-center", className),
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, { size: iconSize.smallest })
+	});
+}
+function MenubarRadioGroup({ children, className, value, onValueChange, onSelect, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.RadioGroup, {
+		className: cls(className),
+		value,
+		onValueChange,
+		onSelect,
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, { size: iconSize.small })
+	});
+}
+function MenubarRadioItem({ children, className, value, onSelect, ...rest }) {
+	return /* @__PURE__ */ jsx(MenubarPrimitive.RadioItem, {
+		onSelect,
+		className: cls("text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-hover data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none", className),
+		value,
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(CheckIcon, { size: iconSize.small })
+	});
+}
+function MenubarShortcut({ children, className, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("ml-auto pl-5 group-data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark", className),
+		...rest,
+		children
+	});
+}
+function MenubarSubTriggerIndicator() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "ml-auto pl-5 ",
+		children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: iconSize.small })
+	});
+}
+//#endregion
+export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarItemIndicator, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarSubTriggerIndicator, MenubarTrigger };
+
+//# sourceMappingURL=Menubar.es.js.map

package/dist/components/Menubar.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.es.js","names":[],"sources":["../../src/components/Menubar.tsx"],"sourcesContent":["\nimport * as React from \"react\";\n\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\";\nimport { cls } from \"../util\";\nimport { CheckIcon, ChevronRightIcon } from \"lucide-react\";\nimport { iconSize } from \"../icons/Icon\";\nimport { usePortalContainer } from \"../hooks/PortalContainerContext\";\n\nexport function Menubar({\n                            children,\n                            onSelect,\n                            value,\n                            defaultValue,\n                            onValueChange,\n                            className\n                        }: {\n    children: React.ReactNode,\n    onSelect?: (event: React.SyntheticEvent) => void,\n    /** Value of the open menu, controlled. Pair with `onValueChange`. */\n    value?: string,\n    /** Value of the menu open on mount, uncontrolled. */\n    defaultValue?: string,\n    onValueChange?: (value: string) => void,\n    className?: string\n}) {\n    return (\n        <MenubarPrimitive.Root\n            onSelect={onSelect}\n            value={value}\n            defaultValue={defaultValue}\n            onValueChange={onValueChange}\n            className={cls(\"z-10 flex bg-surface-card p-[3px] rounded-lg shadow-sm\", className)}>\n            {children}\n        </MenubarPrimitive.Root>\n    )\n}\n\nexport function MenubarMenu({\n                                children,\n                                value\n                            }: {\n    children: React.ReactNode,\n    /** Identifies this menu to the parent Menubar's `value`/`defaultValue`. */\n    value?: string\n}) {\n    return (\n        <MenubarPrimitive.Menu value={value}>\n            {children}\n        </MenubarPrimitive.Menu>\n    )\n}\n\nexport function MenubarTrigger({\n                                   children,\n                                   onSelect,\n                                   className\n                               }: {\n    children: React.ReactNode,\n    onSelect?: (event: React.SyntheticEvent) => void,\n    className?: string\n}) {\n    return (\n        <MenubarPrimitive.Trigger\n            onSelect={onSelect}\n            className={cls(\"py-2 px-3 outline-none select-none font-medium leading-none rounded-md text-text-primary dark:text-text-primary-dark text-sm transition-colors duration-150 flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-hover data-[state=open]:bg-surface-active hover:bg-surface-hover\",\n                className)}>\n            {children}\n        </MenubarPrimitive.Trigger>\n    )\n}\n\nexport function MenubarPortal({\n                                  children,\n                                  portalContainer\n                              }: {\n    children: React.ReactNode;\n    portalContainer?: HTMLElement | null;\n}) {\n    // Get the portal container from context\n    const contextContainer = usePortalContainer();\n\n    // Prioritize manual prop, fallback to context container\n    const finalContainer = (portalContainer ?? contextContainer ?? undefined) as HTMLElement | undefined;\n\n    return (\n        <MenubarPrimitive.Portal container={finalContainer}>\n            {children}\n        </MenubarPrimitive.Portal>\n    )\n}\n\nexport function MenubarContent({\n                                   children,\n                                   className,\n                                   align,\n                                   sideOffset,\n                                   alignOffset,\n                                   onSelect,\n                                   ...rest\n                               }: {\n    children: React.ReactNode,\n    className?: string,\n    onSelect?: (event: React.SyntheticEvent) => void,\n    align?: \"start\" | \"center\" | \"end\",\n    sideOffset?: number,\n    alignOffset?: number\n}) {\n    return (\n        <MenubarPrimitive.Content\n            onSelect={onSelect}\n            // `z-50`, the floating layer — see the note in `Menu`. This carried\n            // no z-index at all, so the wrapper Radix portals out to the body\n            // got `auto` and the menu opened underneath any dialog or panel it\n            // was hosted in.\n            className={cls(\"z-50 min-w-[220px] bg-surface-card rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]\", className)}\n            align={align ?? \"start\"}\n            sideOffset={sideOffset ?? 5}\n            alignOffset={alignOffset ?? -3}\n            {...rest}\n        >\n            {children}\n        </MenubarPrimitive.Content>\n    )\n}\n\nexport function MenubarItem({\n                                children,\n                                leftPadding,\n                                className,\n                                disabled,\n                                onSelect,\n                                ...rest\n                            }: {\n    children: React.ReactNode,\n    onSelect?: (event: Event) => void;\n    leftPadding?: boolean,\n    className?: string,\n    disabled?: boolean\n}) {\n    return (\n        <MenubarPrimitive.Item\n            onSelect={onSelect}\n            className={cls(\"group text-sm leading-none rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-active data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-hover  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none\",\n                leftPadding ? \"pl-5\" : \"\",\n                disabled ? \"pointer-events-none text-text-secondary dark:text-text-secondary-dark\" : \"text-text-primary dark:text-text-primary-dark\",\n                className)}\n            disabled={disabled}\n            {...rest}\n        >\n            {children}\n        </MenubarPrimitive.Item>\n    )\n}\n\nexport function MenubarSeparator({\n                                     children,\n                                     className,\n                                     ...rest\n                                 }: {\n    children?: React.ReactNode,\n    className?: string,\n}) {\n    return (\n        <MenubarPrimitive.Separator\n            className={cls(\"h-[1px] bg-hairline m-[5px]\", className)}\n            {...rest}\n        >\n            {children}\n        </MenubarPrimitive.Separator>\n    )\n}\n\nexport function MenubarSub({\n                               children,\n                               ...rest\n                           }: {\n    children?: React.ReactNode,\n}) {\n    return (\n        <MenubarPrimitive.Sub\n            {...rest}\n        >\n            {children}\n        </MenubarPrimitive.Sub>\n    )\n}\n\nexport function MenubarSubTrigger({\n                                      children,\n                                      className,\n                                      onSelect,\n                                      ...rest\n                                  }: {\n    children?: React.ReactNode,\n    onSelect?: (event: React.SyntheticEvent) => void,\n    className?: string,\n}) {\n    return (\n        <MenubarPrimitive.SubTrigger\n            onSelect={onSelect}\n            className={cls(\"group text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 outline-none data-[state=open]:bg-surface-active data-[state=open]:text-text-primary data-[state=open]:dark:text-text-primary-dark data-[highlighted]:bg-surface-hover  data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none\",\n                className)}\n            {...rest}\n        >\n            {children}\n        </MenubarPrimitive.SubTrigger>\n    )\n}\n\nexport function MenubarSubContent({\n                                      children,\n                                      alignOffset,\n                                      className,\n                                      onSelect,\n                                      ...rest\n                                  }: {\n    children?: React.ReactNode,\n    onSelect?: (event: React.SyntheticEvent) => void,\n    alignOffset?: number,\n    className?: string,\n}) {\n    return (\n        <MenubarPrimitive.SubContent\n            onSelect={onSelect}\n            alignOffset={alignOffset ?? -5}\n            className={cls(\"min-w-[220px] bg-surface-card rounded-md p-[6px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]\",\n                className)}\n            {...rest}\n        >\n            {children}\n        </MenubarPrimitive.SubContent>\n    )\n}\n\nexport function MenubarCheckboxItem({\n                                        children,\n                                        checked,\n                                        onCheckedChange,\n                                        className,\n                                        onSelect,\n                                        ...rest\n                                    }: {\n    children?: React.ReactNode,\n    onSelect?: (event: Event) => void;\n    checked?: boolean,\n    onCheckedChange?: () => void,\n    className?: string,\n}) {\n    return (\n        <MenubarPrimitive.CheckboxItem\n            onSelect={onSelect}\n            className={cls(\"text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-hover data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none\",\n                className)}\n            checked={checked}\n            onCheckedChange={onCheckedChange}\n            {...rest}\n        >\n            {children}\n        </MenubarPrimitive.CheckboxItem>\n    )\n}\n\nexport function MenubarItemIndicator({\n                                         children,\n                                         className,\n                                         ...rest\n                                     }: {\n    children?: React.ReactNode,\n    className?: string,\n}) {\n    return (\n        <MenubarPrimitive.ItemIndicator\n            className={cls(\"absolute left-0 w-4 inline-flex items-center justify-center\", className)}\n            {...rest}>\n            {children ?? <CheckIcon size={iconSize.smallest}/>}\n        </MenubarPrimitive.ItemIndicator>\n    )\n}\n\nexport function MenubarRadioGroup({\n                                      children,\n                                      className,\n                                      value,\n                                      onValueChange,\n                                      onSelect,\n                                      ...rest\n                                  }: {\n    children?: React.ReactNode,\n    onSelect?: (event: React.SyntheticEvent) => void,\n    value?: string,\n    onValueChange?: (value: string) => void,\n    className?: string,\n}) {\n    return (\n        <MenubarPrimitive.RadioGroup\n            className={cls(className)}\n            value={value}\n            onValueChange={onValueChange}\n            onSelect={onSelect}\n            {...rest}>\n            {children ?? <CheckIcon size={iconSize.small}/>}\n        </MenubarPrimitive.RadioGroup>\n    )\n}\n\nexport function MenubarRadioItem({\n                                     children,\n                                     className,\n                                     value,\n                                     onSelect,\n                                     ...rest\n                                 }: {\n    children?: React.ReactNode,\n    onSelect?: (event: Event) => void;\n    value: string,\n    className?: string,\n}) {\n    return (\n        <MenubarPrimitive.RadioItem\n            onSelect={onSelect}\n            className={cls(\"text-sm leading-none text-text-primary dark:text-text-primary-dark rounded-md flex items-center h-[32px] px-[10px] py-[2px] relative select-none transition-colors duration-150 pl-5 outline-none data-[highlighted]:bg-surface-hover data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark data-[disabled]:pointer-events-none\",\n                className)}\n            value={value}\n            {...rest}>\n            {children ?? <CheckIcon size={iconSize.small}/>}\n        </MenubarPrimitive.RadioItem>\n    )\n}\n\nexport function MenubarShortcut({\n                                    children,\n                                    className,\n                                    ...rest\n                                }: {\n    children?: React.ReactNode,\n    className?: string,\n}) {\n    return (\n        <div\n            className={cls(\"ml-auto pl-5 group-data-[disabled]:text-text-disabled data-[disabled]:dark:text-text-disabled-dark\",\n                className)}\n            {...rest}>\n            {children}\n        </div>\n    )\n}\n\nexport function MenubarSubTriggerIndicator() {\n    return (\n        <div className=\"ml-auto pl-5 \">\n            <ChevronRightIcon size={iconSize.small}/>\n        </div>\n    )\n}\n"],"mappings":"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"}

package/dist/components/MultiSelect.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { ChangeEvent } from "react";
 export type MultiSelectValue = string | number | boolean;
 interface MultiSelectContextProps<T extends MultiSelectValue = string> {
     fieldValue?: T[];
@@ -13,12 +12,11 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
     modalPopover?: boolean;
     className?: string;
     open?: boolean;
-    name?: string;
+    /** Put on the trigger button, so a `<label htmlFor>` can name it. */
     id?: string;
     onOpenChange?: (open: boolean) => void;
     value?: T[];
     inputClassName?: string;
-    onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
     onValueChange?: (updatedValue: T[]) => void;
     placeholder?: React.ReactNode;
     size?: "smallest" | "small" | "medium" | "large";
@@ -26,13 +24,9 @@ interface MultiSelectProps<T extends MultiSelectValue = string> {
     label?: React.ReactNode | string;
     disabled?: boolean;
     error?: boolean;
-    position?: "item-aligned" | "popper";
-    endAdornment?: React.ReactNode;
-    multiple?: boolean;
     includeSelectAll?: boolean;
     includeClear?: boolean;
     inputRef?: React.Ref<HTMLButtonElement>;
-    padding?: boolean;
     invisible?: boolean;
     /**
      * Whether the trigger draws its own chevron. A table cell turns it off:

package/dist/components/MultiSelect.es.js

@@ -0,0 +1,271 @@
+"use client";
+import { defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedDisabled } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { usePortalContainer } from "../hooks/PortalContainerContext.es.js";
+import { useInjectStyles } from "../hooks/useInjectStyles.es.js";
+import { iconSize } from "../icons/Icon.es.js";
+import { Chip } from "./Chip.es.js";
+import { Separator } from "./Separator.es.js";
+import { SelectInputLabel } from "./common/SelectInputLabel.es.js";
+import * as React$1 from "react";
+import { Children, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Command } from "cmdk";
+//#region src/components/MultiSelect.tsx
+var MultiSelectContext = React$1.createContext(null);
+/**
+* The popover's trigger, or — given an anchor — a plain child beside a
+* `Popover.Anchor` on that element. Not both: Radix's trigger registers itself
+* as the anchor through a ref callback, which under StrictMode runs again
+* after the custom anchor's effect and wins, leaving the list anchored to a
+* trigger the custom anchor then unmounts. The button toggles the list itself.
+*/
+function MultiSelectTrigger({ anchorRef, children }) {
+	if (!anchorRef) return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
+		asChild: true,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { virtualRef: anchorRef }), children] });
+}
+var MultiSelect = React$1.forwardRef(({ value, id, size = "large", label, error, onValueChange, invisible, chevron = true, anchorRef, triggerContent, disabled, placeholder, modalPopover = true, includeClear = true, includeSelectAll = true, useChips = true, className, inputClassName, inputRef, children, renderValues, open, onOpenChange, portalContainer, "aria-label": ariaLabel }, ref) => {
+	const [isMounted, setIsMounted] = useState(false);
+	const [isPopoverOpen, setIsPopoverOpen] = useState(open ?? false);
+	const [selectedValues, setSelectedValues] = useState(value ?? []);
+	const contextContainer = usePortalContainer();
+	const finalContainer = portalContainer ?? contextContainer ?? void 0;
+	useEffect(() => {
+		setIsMounted(true);
+	}, []);
+	const onPopoverOpenChange = (open) => {
+		setIsPopoverOpen(open);
+		onOpenChange?.(open);
+	};
+	useEffect(() => {
+		setIsPopoverOpen(open ?? false);
+	}, [open]);
+	const allValues = React$1.useMemo(() => {
+		const values = [];
+		Children.forEach(children, (child) => {
+			if (React$1.isValidElement(child) && child.props.value !== void 0 && child.props.value !== null) values.push(String(child.props.value));
+		});
+		return values;
+	}, [children]);
+	const allSelected = allValues.length > 0 && allValues.every((v) => selectedValues.some((s) => String(s) === v));
+	const optionsMap = React$1.useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		Children.forEach(children, (child) => {
+			if (React$1.isValidElement(child)) map.set(String(child.props.value), child.props.children);
+		});
+		return map;
+	}, [children]);
+	React$1.useEffect(() => {
+		setSelectedValues(value ?? []);
+	}, [value]);
+	const updateValues = React$1.useCallback((values) => {
+		if (disabled) return;
+		setSelectedValues(values);
+		onValueChange?.(values);
+	}, [onValueChange, disabled]);
+	const onItemClick = React$1.useCallback((newValue) => {
+		let newSelectedValues;
+		if (selectedValues.some((v) => String(v) === String(newValue))) newSelectedValues = selectedValues.filter((v) => String(v) !== String(newValue));
+		else newSelectedValues = [...selectedValues, String(newValue)];
+		updateValues(newSelectedValues);
+	}, [selectedValues, updateValues]);
+	const handleInputKeyDown = (event) => {
+		if (event.key === "Enter") onPopoverOpenChange(true);
+		else if (event.key === "Backspace" && !event.currentTarget.value) {
+			const newSelectedValues = [...selectedValues];
+			newSelectedValues.pop();
+			updateValues(newSelectedValues);
+		}
+	};
+	const toggleOption = (value) => {
+		const newSelectedValues = selectedValues.some((v) => String(v) === String(value)) ? selectedValues.filter((v) => String(v) !== String(value)) : [...selectedValues, value];
+		updateValues(newSelectedValues);
+	};
+	const handleClear = () => {
+		updateValues([]);
+	};
+	const handleTogglePopover = () => {
+		onPopoverOpenChange(!isPopoverOpen);
+	};
+	const toggleAll = () => {
+		if (allSelected) handleClear();
+		else updateValues(allValues);
+		onPopoverOpenChange(false);
+	};
+	useInjectStyles("MultiSelect", `
+[data-multi-select-content] [cmdk-group] {
+  max-height: 45vh;
+  overflow-y: auto;
+} `);
+	const contextValue = React$1.useMemo(() => ({
+		fieldValue: selectedValues,
+		onItemClick
+	}), [selectedValues, onItemClick]);
+	const bare = triggerContent !== void 0;
+	return /* @__PURE__ */ jsxs(MultiSelectContext.Provider, {
+		value: contextValue,
+		children: [typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, {
+			error,
+			children: label
+		}) : label, /* @__PURE__ */ jsxs(PopoverPrimitive.Root, {
+			open: isMounted && isPopoverOpen,
+			onOpenChange: onPopoverOpenChange,
+			modal: modalPopover,
+			children: [/* @__PURE__ */ jsx(MultiSelectTrigger, {
+				anchorRef,
+				children: /* @__PURE__ */ jsx("button", {
+					ref: inputRef ?? ref,
+					id,
+					disabled,
+					"aria-invalid": error || void 0,
+					"aria-label": ariaLabel ?? (typeof label === "string" ? label : void 0),
+					onClick: handleTogglePopover,
+					className: bare ? cls("relative flex items-center w-full text-start select-none outline-none focus:outline-none focus-visible:outline-none", className, inputClassName) : cls(invisible ? {
+						smallest: "min-h-[28px]",
+						small: "min-h-[32px]",
+						medium: "min-h-[40px]",
+						large: "min-h-[48px]"
+					}[size] : {
+						smallest: "min-h-[30px]",
+						small: "min-h-[34px]",
+						medium: "min-h-[42px]",
+						large: "min-h-[50px]"
+					}[size], {
+						"py-0": size === "smallest",
+						"py-0.5": size === "small",
+						"py-1": size === "medium" || size === "large"
+					}, {
+						"px-2": size === "small" || size === "smallest",
+						"px-4": size === "medium" || size === "large"
+					}, "select-none rounded-lg text-sm", "outline-none focus:outline-none focus-visible:outline-none", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : invisible ? "" : fieldBackgroundHoverMixin, "relative flex items-center", className, inputClassName),
+					children: bare ? triggerContent : selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", {
+						className: "flex justify-between items-center w-full",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-1.5 text-start",
+							children: [renderValues && renderValues(selectedValues), !renderValues && selectedValues.map((value) => {
+								const optionChildren = optionsMap.get(String(value));
+								if (!useChips) return optionChildren;
+								return /* @__PURE__ */ jsxs(Chip, {
+									size: size === "smallest" || size === "small" ? "smallest" : "small",
+									className: cls("flex flex-row items-center p-1"),
+									children: [optionChildren, /* @__PURE__ */ jsx(XIcon, {
+										size: iconSize.smallest,
+										onClick: (event) => {
+											event.stopPropagation();
+											toggleOption(value);
+										}
+									})]
+								}, String(value));
+							})]
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center justify-between",
+							children: [includeClear && /* @__PURE__ */ jsx(XIcon, {
+								className: "ml-4",
+								size: iconSize.small,
+								onClick: (event) => {
+									event.stopPropagation();
+									handleClear();
+								}
+							}), chevron && /* @__PURE__ */ jsx("div", {
+								className: cls("px-2 h-full flex items-center"),
+								children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+									size: size === "large" ? iconSize.medium : iconSize.small,
+									className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+								})
+							})]
+						})]
+					}) : /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between w-full mx-auto",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "text-sm",
+							children: placeholder
+						}), chevron && /* @__PURE__ */ jsx("div", {
+							className: cls("px-2 h-full flex items-center"),
+							children: /* @__PURE__ */ jsx(ChevronDownIcon, {
+								size: size === "large" ? iconSize.medium : iconSize.small,
+								className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+							})
+						})]
+					})
+				})
+			}), /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
+				container: finalContainer,
+				children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+					"data-multi-select-content": true,
+					className: cls("z-50 overflow-hidden border bg-surface-card rounded-lg w-[400px]", defaultBorderMixin),
+					align: "start",
+					sideOffset: 8,
+					onEscapeKeyDown: () => onPopoverOpenChange(false),
+					children: /* @__PURE__ */ jsxs(Command, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-row items-center",
+							children: [/* @__PURE__ */ jsx(Command.Input, {
+								className: cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow text-surface-accent-900 dark:text-white"),
+								placeholder: "Search...",
+								onKeyDown: handleInputKeyDown
+							}), selectedValues.length > 0 && /* @__PURE__ */ jsx("div", {
+								onClick: handleClear,
+								className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark",
+								children: "Clear"
+							})]
+						}),
+						/* @__PURE__ */ jsx(Separator, {
+							orientation: "horizontal",
+							className: "my-0"
+						}),
+						/* @__PURE__ */ jsxs(Command.List, { children: [/* @__PURE__ */ jsx(Command.Empty, {
+							className: "px-4 py-2 text-sm text-text-secondary dark:text-text-secondary-dark",
+							children: "No results found."
+						}), /* @__PURE__ */ jsxs(Command.Group, { children: [includeSelectAll && /* @__PURE__ */ jsxs(Command.Item, {
+							onSelect: toggleAll,
+							className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-active", "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-active"),
+							children: [/* @__PURE__ */ jsx(InnerCheckBox, { checked: allSelected }), /* @__PURE__ */ jsx("span", {
+								className: "text-sm text-text-secondary dark:text-text-secondary-dark",
+								children: "(Select All)"
+							})]
+						}, "all"), children] })] })
+					] })
+				})
+			})]
+		})]
+	});
+});
+MultiSelect.displayName = "MultiSelect";
+var MultiSelectItem = React$1.memo(function MultiSelectItem({ children, value, className }) {
+	const context = React$1.useContext(MultiSelectContext);
+	if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
+	const { fieldValue, onItemClick } = context;
+	const isSelected = (fieldValue ?? []).some((v) => String(v) === String(value));
+	return /* @__PURE__ */ jsxs(Command.Item, {
+		onMouseDown: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+		},
+		onSelect: (_) => {
+			onItemClick(value);
+		},
+		className: cls("flex flex-row items-center gap-1.5", isSelected ? "bg-surface-active" : "", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded-md aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-primary/75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-active", "cursor-pointer p-2 rounded-md aria-[selected=true]:bg-surface-active", "text-surface-accent-700 dark:text-surface-accent-300", className),
+		children: [/* @__PURE__ */ jsx(InnerCheckBox, { checked: isSelected }), children]
+	});
+});
+var InnerCheckBox = React$1.memo(function InnerCheckBox({ checked }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("p-2", "w-8 h-8", "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: cls("border-2 relative transition-colors ease-in-out duration-150", "w-4 h-4 rounded-sm flex items-center justify-center", checked ? "bg-primary" : "bg-surface-card", checked ? "text-surface-accent-100 dark:text-surface-accent-900" : "", checked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200"),
+			children: checked && /* @__PURE__ */ jsx(CheckIcon, {
+				size: iconSize.smallest,
+				className: "absolute"
+			})
+		})
+	});
+});
+//#endregion
+export { MultiSelect, MultiSelectContext, MultiSelectItem };
+
+//# sourceMappingURL=MultiSelect.es.js.map