pixelize-design-library 2.4.1-beta.1 → 2.4.1-beta.3

package/dist/Components/WorkspaceWindow/WorkspaceTrayPreview.js

@@ -25,6 +25,7 @@ const PLACEMENT_STYLE = {
  * `onOpenChange`.
  */
 function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs = 350, closeDelayMs = 200, placement = "top-end", onOpenChange, width = "340px", testId = "workspace-tray-preview", }) {
+    var _a, _b, _c, _d;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     const [open, setOpen] = (0, react_1.useState)(false);
     const openTimer = (0, react_1.useRef)(null);
@@ -79,7 +80,7 @@ function WorkspaceTrayPreview({ children, preview, enabled = true, openDelayMs =
                 e.stopPropagation();
                 closeNow();
             }
-        }, children: [children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.background[50], borderWidth: "1px", borderColor: "gray.200", borderRadius: "lg", boxShadow: "xl", zIndex: 1500, pointerEvents: "auto", p: 3, textAlign: "left", color: "gray.800", cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
+        }, children: [children, open && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", ...PLACEMENT_STYLE[placement], w: typeof width === "number" ? `${width}px` : width, maxW: "min(360px, calc(100vw - 2rem))", bg: theme.colors.background[50], borderWidth: "1px", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : theme.colors.gray[200], borderRadius: "lg", boxShadow: "xl", zIndex: 1500, pointerEvents: "auto", p: 3, textAlign: "left", color: (_d = (_c = theme.colors.text) === null || _c === void 0 ? void 0 : _c[700]) !== null && _d !== void 0 ? _d : theme.colors.gray[800], cursor: "default", onMouseEnter: clearCloseTimer, onMouseLeave: scheduleClose, "data-testid": testId, children: typeof preview === "function"
                     ? preview({ close: closeNow })
                     : preview }))] }));
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts

@@ -6,10 +6,10 @@ import type { WorkspaceTrayProps, WorkspaceWindowProps } from "./WorkspaceWindow
  * management: the parent owns the window state and passes callbacks. Render
  * minimized windows with the companion WorkspaceTray.
  */
-export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, headerActions, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
+export default function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId, }: WorkspaceWindowProps): import("react/jsx-runtime").JSX.Element | null;
 /**
  * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —
  * the parent supplies the minimized items and restore/close handlers.
  */
-export declare function WorkspaceTray({ items, onRestore, onClose, testId, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function WorkspaceTray({ items, onRestore, onClose, testId, renderItem, }: WorkspaceTrayProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=WorkspaceWindow.d.ts.map

package/dist/Components/WorkspaceWindow/WorkspaceWindow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceWindow.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceWindow.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,wBAAwB,CAAC;AAOhC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,EACP,cAAc,EACd,aAAa,EACb,MAA2B,GAC5B,EAAE,oBAAoB,kDAyGtB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,OAAO,EACP,MAAyB,GAC1B,EAAE,kBAAkB,kDAkEpB"}
+{"version":3,"file":"WorkspaceWindow.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceWindow.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACrB,MAAM,wBAAwB,CAAC;AAOhC;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACd,aAAa,EACb,MAA2B,GAC5B,EAAE,oBAAoB,kDAkHtB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,SAAS,EACT,OAAO,EACP,MAAyB,EACzB,UAAU,GACX,EAAE,kBAAkB,kDA6EpB"}

package/dist/Components/WorkspaceWindow/WorkspaceWindow.js

@@ -17,7 +17,8 @@ const WINDOW_SIZE = { maxW: "88rem", h: "92vh" };
  * management: the parent owns the window state and passes callbacks. Render
  * minimized windows with the companion WorkspaceTray.
  */
-function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, headerActions, testId = "workspace-window", }) {
+function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFullPage, onOverlayClick, headerActions, testId = "workspace-window", }) {
+    var _a, _b, _c, _d, _e, _f;
     // Must run before the early return: a minimized render would otherwise skip the hook
     // and change hook order when the window reopens.
     const theme = (0, useCustomTheme_1.useCustomTheme)();
@@ -27,18 +28,38 @@ function WorkspaceWindow({ title, state, children, onMinimize, onClose, onOpenFu
     return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: true, onClose: () => onClose === null || onClose === void 0 ? void 0 : onClose(), size: "full", isCentered: true, scrollBehavior: "inside", 
         // Don't discard unsaved work on an accidental overlay click / Esc — the
         // parent decides via the explicit Close control.
-        closeOnOverlayClick: false, closeOnEsc: false, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "0.75rem", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: "gray.100", bg: "gray.50", flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: "gray.700", noOfLines: 1, "data-testid": `${testId}-title`, children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
+        closeOnOverlayClick: false, closeOnEsc: false, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(3px)" }), (0, jsx_runtime_1.jsx)(react_1.ModalContent, { bg: "transparent", boxShadow: "none", m: 0, display: "flex", alignItems: "center", justifyContent: "center", 
+                // With size="full" the transparent ModalContent covers the whole
+                // viewport, so Chakra's own closeOnOverlayClick never fires (the
+                // ModalOverlay sits behind it). Detect "clicked the blurred area
+                // around the window" ourselves: only when the click lands on this
+                // wrapper, not on the window Box or its children.
+                onMouseDown: (e) => {
+                    if (e.target === e.currentTarget)
+                        onOverlayClick === null || onOverlayClick === void 0 ? void 0 : onOverlayClick();
+                }, "data-testid": `${testId}-backdrop`, children: (0, jsx_runtime_1.jsxs)(react_1.Box, { bg: theme.colors.background[50], borderRadius: "0.75rem", boxShadow: "2xl", overflow: "hidden", w: "100%", maxW: size.maxW, h: size.h, display: "flex", flexDirection: "column", "data-testid": testId, "data-window-state": state, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", justify: "space-between", px: 3, py: 2, borderBottomWidth: "1px", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : theme.colors.gray[100], bg: (_d = (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : theme.colors.gray[50], flexShrink: 0, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 600, color: (_f = (_e = theme.colors.text) === null || _e === void 0 ? void 0 : _e[700]) !== null && _f !== void 0 ? _f : theme.colors.gray[700], noOfLines: 1, "data-testid": `${testId}-title`, children: title }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, children: [headerActions, onOpenFullPage ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Open full page", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 14 }), onClick: onOpenFullPage, "data-testid": `${testId}-fullpage` })) : null, onMinimize ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Minimize", size: "xs", variant: "ghost", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Minus, { size: 15 }), onClick: onMinimize, "data-testid": `${testId}-minimize` })) : null, onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", colorScheme: "red", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 15 }), onClick: onClose, "data-testid": `${testId}-close` })) : null] })] }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: "1", overflow: "auto", px: { base: 3, md: 5 }, py: 4, children: children })] }) })] }));
 }
 /**
  * Bottom tray of restore pills for minimized WorkspaceWindows. Presentational —
  * the parent supplies the minimized items and restore/close handlers.
  */
-function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", }) {
+function WorkspaceTray({ items, onRestore, onClose, testId = "workspace-tray", renderItem, }) {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     if (!items.length)
         return null;
     return (
     // Floating bottom-right cluster (Gmail/Jira minimized-window pattern) rather
     // than a full-width docked bar, so it never covers the bottom strip of page
     // content and needs no reserved page gutter. Pills wrap upward.
-    (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "fixed", bottom: 4, right: 4, zIndex: 1400, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: "blue.100", color: "blue.700", boxShadow: "md", borderWidth: "1px", borderColor: "blue.200", "data-testid": `${testId}-pill`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id), "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: () => onClose(item.id), "data-testid": `${testId}-close` })) : null] }, item.id))) }));
+    (0, jsx_runtime_1.jsx)(react_1.Flex, { position: "fixed", bottom: 4, right: 4, zIndex: 1400, direction: "row-reverse", wrap: "wrap-reverse", justify: "flex-start", gap: 2, maxW: { base: "calc(100vw - 2rem)", md: "36rem" }, "data-testid": testId, children: items.map((item) => {
+            var _a, _b, _c, _d, _e, _f;
+            const api = {
+                restore: () => onRestore === null || onRestore === void 0 ? void 0 : onRestore(item.id),
+                close: () => onClose === null || onClose === void 0 ? void 0 : onClose(item.id),
+            };
+            if (renderItem) {
+                return (0, jsx_runtime_1.jsx)(react_1.Box, { children: renderItem(item, api) }, item.id);
+            }
+            return ((0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 1, pl: 3, pr: 1, py: 1, borderRadius: "full", bg: (_b = (_a = theme.colors.primary) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "blue.100", color: (_d = (_c = theme.colors.primary) === null || _c === void 0 ? void 0 : _c[700]) !== null && _d !== void 0 ? _d : "blue.700", boxShadow: "md", borderWidth: "1px", borderColor: (_f = (_e = theme.colors.primary) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : "blue.200", "data-testid": `${testId}-pill`, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", fontSize: "sm", onClick: api.restore, "data-testid": `${testId}-restore`, maxW: "16rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: item.title }), onClose ? ((0, jsx_runtime_1.jsx)(react_1.IconButton, { "aria-label": "Close", size: "xs", variant: "ghost", borderRadius: "full", minW: "auto", h: "auto", p: 1, color: "inherit", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 13 }), onClick: api.close, "data-testid": `${testId}-close` })) : null] }, item.id));
+        }) }));
 }

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts

@@ -19,6 +19,13 @@ export interface WorkspaceWindowProps {
     onClose?: () => void;
     /** Optional "pop out to full page" affordance; hidden when omitted. */
     onOpenFullPage?: () => void;
+    /**
+     * Fires when the blurred area around the window is clicked. With
+     * `size="full"` the transparent ModalContent covers the whole viewport, so
+     * Chakra's own `closeOnOverlayClick` never fires — the parent handles this
+     * itself (e.g. minimize-on-backdrop-click) via this callback.
+     */
+    onOverlayClick?: () => void;
     /** Extra controls rendered in the control bar, left of the window buttons. */
     headerActions?: ReactNode;
     /** data-testid for the window container. */
@@ -34,6 +41,17 @@ export interface WorkspaceTrayProps {
     onRestore?: (id: string) => void;
     onClose?: (id: string) => void;
     testId?: string;
+    /**
+     * Full override for a single item's pill markup — e.g. to wrap it in an
+     * app-specific hover preview, or to show extra state (a dirty dot) the
+     * generic pill doesn't know about. Receives the item plus ready-bound
+     * restore/close callbacks; when provided, the built-in pill is skipped for
+     * that item and this renders in its place inside the same positioned tray.
+     */
+    renderItem?: (item: WorkspaceTrayItem, api: {
+        restore: () => void;
+        close: () => void;
+    }) => ReactNode;
 }
 export interface WorkspaceTrayPreviewProps {
     /**

package/dist/Components/WorkspaceWindow/WorkspaceWindowProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkspaceWindowProps.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceWindowProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC;AAExE,MAAM,WAAW,oBAAoB;IACnC,+CAA+C;IAC/C,KAAK,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,KAAK,EAAE,oBAAoB,CAAC;IAC5B,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,OAAO,EAAE,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACjE,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;IACpE,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"WorkspaceWindowProps.d.ts","sourceRoot":"","sources":["../../../src/Components/WorkspaceWindow/WorkspaceWindowProps.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,WAAW,GAAG,WAAW,CAAC;AAExE,MAAM,WAAW,oBAAoB;IACnC,+CAA+C;IAC/C,KAAK,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,KAAK,EAAE,oBAAoB,CAAC;IAC5B,mBAAmB;IACnB,QAAQ,EAAE,SAAS,CAAC;IAEpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,kBAAkB;IACjC,kEAAkE;IAClE,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CACX,IAAI,EAAE,iBAAiB,EACvB,GAAG,EAAE;QAAE,OAAO,EAAE,MAAM,IAAI,CAAC;QAAC,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAC5C,SAAS,CAAC;CAChB;AAED,MAAM,WAAW,yBAAyB;IACxC;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,OAAO,EAAE,SAAS,GAAG,CAAC,CAAC,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,SAAS,CAAC,CAAC;IACjE,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;IACpE,8EAA8E;IAC9E,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/Theme/chakra/Avatar.styles.d.ts

@@ -0,0 +1,33 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $badgeBorder: {
+    variable: string;
+    reference: string;
+};
+export declare const Avatar: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        badge: {
+            [$badgeBorder.variable]: any;
+        };
+        container: {
+            [$badgeBorder.variable]: any;
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("container" | "label" | "group" | "badge" | "excessLabel")[];
+};
+export {};
+//# sourceMappingURL=Avatar.styles.d.ts.map

package/dist/Theme/chakra/Avatar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Avatar.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,YAAY;;;CAAgC,CAAC;AAoBnD,eAAO,MAAM,MAAM;6BAZ4B,kBAAkB;;YAI3D,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAQ;;;YAG/B,CAAC,YAAY,CAAC,QAAQ,CAAC,MAAQ;;;;;;;;;;;;;;;;;;;CAOnC,CAAC"}

package/dist/Theme/chakra/Avatar.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.avatarAnatomy.keys);
+const $badgeBorder = (0, react_1.cssVar)("avatar-border-color");
+/**
+ * Same bug class as Menu/Modal/Popover: Chakra's own Avatar baseStyle hardcodes the badge/
+ * container border color to `colors.white` outside `_dark` (it's a cutout ring meant to match
+ * the surface the avatar sits on), gated behind `_dark`, which this theme-swap app never
+ * triggers. Every bare `<Avatar>`/`<AvatarBadge>` renders a white ring on the dark canvas.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const border = (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff";
+    return {
+        badge: {
+            [$badgeBorder.variable]: border,
+        },
+        container: {
+            [$badgeBorder.variable]: border,
+        },
+    };
+});
+exports.Avatar = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/Theme/chakra/Drawer.styles.d.ts

@@ -0,0 +1,32 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $bg: {
+    variable: string;
+    reference: string;
+};
+export declare const Drawer: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        dialog: {
+            [$bg.variable]: any;
+            bg: string;
+            color: any;
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+};
+export {};
+//# sourceMappingURL=Drawer.styles.d.ts.map

package/dist/Theme/chakra/Drawer.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Drawer.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAsB,CAAC;AAgBhC,eAAO,MAAM,MAAM;6BAR4B,kBAAkB;;YAE7D,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;;;;;;;;;;;CAQlG,CAAC"}

package/dist/Theme/chakra/Drawer.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.drawerAnatomy.keys);
+const $bg = (0, react_1.cssVar)("drawer-bg");
+/**
+ * Chakra's own Drawer baseStyle hardcodes `--drawer-bg` to "colors.white" (gated behind `_dark`,
+ * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * `<DrawerContent>` in every consuming app renders a white panel on the dark canvas — the same
+ * bug class `Menu.styles.ts`/`Modal.styles.ts` already fix.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return ({
+        dialog: {
+            [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $bg.reference,
+            color: (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[900]) !== null && _j !== void 0 ? _j : "inherit",
+        },
+    });
+});
+exports.Drawer = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/Theme/chakra/Menu.styles.d.ts

@@ -0,0 +1,70 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $bg: {
+    variable: string;
+    reference: string;
+};
+/**
+ * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
+ * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
+ * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
+ * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
+ * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
+ * ThemeSwitcher's BrandMenu/MenuVariant).
+ *
+ * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
+ * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
+ * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
+ * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
+ * the list fix.
+ */
+declare const $itemBg: {
+    variable: string;
+    reference: string;
+};
+export declare const Menu: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        list: {
+            [$bg.variable]: any;
+            bg: string;
+            color: any;
+        };
+        item: {
+            bg: string;
+            _focus: {
+                [$itemBg.variable]: any;
+                bg: string;
+            };
+            _hover: {
+                [$itemBg.variable]: any;
+                bg: string;
+            };
+            _active: {
+                [$itemBg.variable]: any;
+                bg: string;
+            };
+            _expanded: {
+                [$itemBg.variable]: any;
+                bg: string;
+            };
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("button" | "list" | "icon" | "item" | "groupTitle" | "command" | "divider")[];
+};
+export {};
+//# sourceMappingURL=Menu.styles.d.ts.map

package/dist/Theme/chakra/Menu.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Menu.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAoB,CAAC;AAE9B;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO;;;CAAyB,CAAC;AA4BvC,eAAO,MAAM,IAAI;6BA1B8B,kBAAkB;;YAO3D,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;gBAWtF,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAS;;;;gBAC3B,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAS;;;;gBAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAU;;;;gBAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAS;;;;;;;;;;;;;;;;;;;;;CAO5C,CAAC"}

package/dist/Theme/chakra/Menu.styles.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.menuAnatomy.keys);
+const $bg = (0, react_1.cssVar)("menu-bg");
+/**
+ * Chakra's own MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`, which
+ * this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * bare `<MenuList>` in every consuming app renders a white dropdown on the dark canvas. A `bg`
+ * prop set by a call site only recolors the list's own box, not this var — which `MenuItem`'s
+ * `_focus`/`_active`/`_expanded` states read — so both must come from the theme, not per call
+ * site (already duplicated at every fix-it-locally call site: NavigationBar, ButtonGroupIcon,
+ * ThemeSwitcher's BrandMenu/MenuVariant).
+ *
+ * Chakra's own MenuItem baseStyle then RE-hardcodes the same `--menu-bg` var on `_focus`/
+ * `_active`/`_expanded` (to `colors.gray.100`/`.200`, also `_dark`-gated) — so even with `list`
+ * fixed above, hovering/focusing an item snaps the var back to a near-white literal. Override
+ * `item` here too, to a theme-driven hover tint, or every hover state stays white regardless of
+ * the list fix.
+ */
+const $itemBg = (0, react_1.cssVar)("menu-item-bg");
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    const hoverBg = (_g = (_d = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b.opacity) === null || _c === void 0 ? void 0 : _c[8]) !== null && _d !== void 0 ? _d : (_f = (_e = theme.colors) === null || _e === void 0 ? void 0 : _e.gray) === null || _f === void 0 ? void 0 : _f[100]) !== null && _g !== void 0 ? _g : "#f7fafc";
+    const activeBg = (_p = (_l = (_k = (_j = (_h = theme.colors) === null || _h === void 0 ? void 0 : _h.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : (_o = (_m = theme.colors) === null || _m === void 0 ? void 0 : _m.gray) === null || _o === void 0 ? void 0 : _o[200]) !== null && _p !== void 0 ? _p : "#edf2f7";
+    return {
+        list: {
+            [$bg.variable]: (_v = (_s = (_r = (_q = theme.colors) === null || _q === void 0 ? void 0 : _q.backgroundColor) === null || _r === void 0 ? void 0 : _r.light) !== null && _s !== void 0 ? _s : (_u = (_t = theme.colors) === null || _t === void 0 ? void 0 : _t.background) === null || _u === void 0 ? void 0 : _u[50]) !== null && _v !== void 0 ? _v : "#fff",
+            bg: $bg.reference,
+            color: (_y = (_x = (_w = theme.colors) === null || _w === void 0 ? void 0 : _w.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : "inherit",
+        },
+        // Own CSS var (`--menu-item-bg`), NOT the list's `--menu-bg` — Chakra's stock item
+        // baseStyle rewrites `--menu-bg` itself on hover/focus, so reusing that same var name
+        // here for the item's resting bg risked the two colliding under the same custom
+        // property. A dedicated var keeps the item's hover/focus tint fully independent of the
+        // list's background var.
+        item: {
+            bg: "transparent",
+            _focus: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            _hover: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+            _active: { [$itemBg.variable]: activeBg, bg: $itemBg.reference },
+            _expanded: { [$itemBg.variable]: hoverBg, bg: $itemBg.reference },
+        },
+    };
+});
+exports.Menu = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/Theme/chakra/Modal.styles.d.ts

@@ -0,0 +1,32 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $bg: {
+    variable: string;
+    reference: string;
+};
+export declare const Modal: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        dialog: {
+            [$bg.variable]: any;
+            bg: string;
+            color: any;
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("overlay" | "body" | "dialog" | "footer" | "header" | "closeButton" | "dialogContainer")[];
+};
+export {};
+//# sourceMappingURL=Modal.styles.d.ts.map

package/dist/Theme/chakra/Modal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Modal.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,GAAG;;;CAAqB,CAAC;AAgB/B,eAAO,MAAM,KAAK;6BAR6B,kBAAkB;;YAE7D,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;;;;;;;;;;;CAQlG,CAAC"}

package/dist/Theme/chakra/Modal.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.modalAnatomy.keys);
+const $bg = (0, react_1.cssVar)("modal-bg");
+/**
+ * Chakra's own Modal baseStyle hardcodes `--modal-bg` to "colors.white" (gated behind `_dark`,
+ * which this theme-swap app never triggers — see createBrandTheme's colorMode comment), so every
+ * `<ModalContent>` in every consuming app renders a white dialog on the dark canvas — the same
+ * bug class `Menu.styles.ts` already fixes for dropdowns.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return ({
+        dialog: {
+            [$bg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $bg.reference,
+            color: (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.text) === null || _h === void 0 ? void 0 : _h[900]) !== null && _j !== void 0 ? _j : "inherit",
+        },
+    });
+});
+exports.Modal = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/Theme/chakra/Popover.styles.d.ts

@@ -0,0 +1,37 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $popperBg: {
+    variable: string;
+    reference: string;
+};
+declare const $arrowShadowColor: {
+    variable: string;
+    reference: string;
+};
+export declare const Popover: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        content: {
+            [$popperBg.variable]: any;
+            [$arrowShadowColor.variable]: any;
+            bg: string;
+            color: any;
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("content" | "body" | "footer" | "header" | "closeButton" | "popper" | "arrow")[];
+};
+export {};
+//# sourceMappingURL=Popover.styles.d.ts.map

package/dist/Theme/chakra/Popover.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Popover.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,SAAS;;;CAAsB,CAAC;AACtC,QAAA,MAAM,iBAAiB;;;CAAsC,CAAC;AAmB9D,eAAO,MAAM,OAAO;6BAT2B,kBAAkB;;YAE7D,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAkF;YAEtG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,MAAuE;;;;;;;;;;;;;;;;;;;;;CAOrG,CAAC"}

package/dist/Theme/chakra/Popover.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.popoverAnatomy.keys);
+const $popperBg = (0, react_1.cssVar)("popper-bg");
+const $arrowShadowColor = (0, react_1.cssVar)("popper-arrow-shadow-color");
+/**
+ * Same bug class as Menu (Wave G): Chakra's own Popover baseStyle hardcodes `--popper-bg` to
+ * "#fff" and `--popper-arrow-shadow-color` to `colors.gray.200`, both gated behind `_dark`, which
+ * this theme-swap app never triggers (see Menu.styles.ts / createBrandTheme's colorMode comment).
+ * Every bare `<PopoverContent>` renders a white card with a light arrow shadow on the dark canvas.
+ * `--popper-arrow-bg` is left alone — Chakra's own baseStyle already points it at `$popperBg`, so
+ * fixing `$popperBg` here fixes the arrow fill too.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    return ({
+        content: {
+            [$popperBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $popperBg.reference,
+            [$arrowShadowColor.variable]: (_m = (_j = (_h = (_g = theme.colors) === null || _g === void 0 ? void 0 : _g.border) === null || _h === void 0 ? void 0 : _h[200]) !== null && _j !== void 0 ? _j : (_l = (_k = theme.colors) === null || _k === void 0 ? void 0 : _k.gray) === null || _l === void 0 ? void 0 : _l[200]) !== null && _m !== void 0 ? _m : "#e2e8f0",
+            color: (_q = (_p = (_o = theme.colors) === null || _o === void 0 ? void 0 : _o.text) === null || _p === void 0 ? void 0 : _p[900]) !== null && _q !== void 0 ? _q : "inherit",
+        },
+    });
+});
+exports.Popover = defineMultiStyleConfig({
+    baseStyle,
+});

package/dist/Theme/chakra/Slider.styles.d.ts

@@ -0,0 +1,31 @@
+import type { StyleFunctionProps } from "@chakra-ui/react";
+declare const $thumbBg: {
+    variable: string;
+    reference: string;
+};
+export declare const Slider: {
+    baseStyle?: (({ theme }: StyleFunctionProps) => {
+        thumb: {
+            [$thumbBg.variable]: any;
+            bg: string;
+        };
+    }) | undefined;
+    sizes?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+        }>;
+    } | undefined;
+    variants?: {
+        [key: string]: import("@chakra-ui/react").PartsStyleInterpolation<{
+            keys: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+        }>;
+    } | undefined;
+    defaultProps?: {
+        size?: string | number | undefined;
+        variant?: string | number | undefined;
+        colorScheme?: string | undefined;
+    } | undefined;
+    parts: ("container" | "mark" | "track" | "filledTrack" | "thumb")[];
+};
+export {};
+//# sourceMappingURL=Slider.styles.d.ts.map

package/dist/Theme/chakra/Slider.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.styles.d.ts","sourceRoot":"","sources":["../../../src/Theme/chakra/Slider.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAK3D,QAAA,MAAM,QAAQ;;;CAA4B,CAAC;AAe3C,eAAO,MAAM,MAAM;6BAP4B,kBAAkB;;YAE7D,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAkF;;;;;;;;;;;;;;;;;;;;CAOvG,CAAC"}

package/dist/Theme/chakra/Slider.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Slider = void 0;
+const react_1 = require("@chakra-ui/react");
+const anatomy_1 = require("@chakra-ui/anatomy");
+const { defineMultiStyleConfig, definePartsStyle } = (0, react_1.createMultiStyleConfigHelpers)(anatomy_1.sliderAnatomy.keys);
+const $thumbBg = (0, react_1.cssVar)("slider-thumb-bg");
+/**
+ * Chakra's own Slider thumb baseStyle hardcodes `bg: "white"` with no `_dark` gate at all (unlike
+ * track/filledTrack, which at least have one Chakra's own colorMode never triggers here) — so
+ * every bare `<SliderThumb>` renders a literal white circle on the dark canvas regardless of mode,
+ * same bug class as Menu/Modal but without even the dead `_dark` branch.
+ */
+const baseStyle = definePartsStyle(({ theme }) => {
+    var _a, _b, _c, _d, _e, _f;
+    return ({
+        thumb: {
+            [$thumbBg.variable]: (_f = (_c = (_b = (_a = theme.colors) === null || _a === void 0 ? void 0 : _a.backgroundColor) === null || _b === void 0 ? void 0 : _b.light) !== null && _c !== void 0 ? _c : (_e = (_d = theme.colors) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#fff",
+            bg: $thumbBg.reference,
+        },
+    });
+});
+exports.Slider = defineMultiStyleConfig({
+    baseStyle,
+});