pixelize-design-library 2.4.1-beta.2 → 2.4.1-beta.4

package/dist/Components/Accordion/accordionColors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordionColors.d.ts","sourceRoot":"","sources":["../../../src/Components/Accordion/accordionColors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,eAAO,MAAM,uBAAuB,GAClC,QAAQ,YAAY,EACpB,QAAQ,OAAO,KACd;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAczC,CAAC"}
+{"version":3,"file":"accordionColors.d.ts","sourceRoot":"","sources":["../../../src/Components/Accordion/accordionColors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAW7D,eAAO,MAAM,uBAAuB,GAClC,QAAQ,YAAY,EACpB,QAAQ,OAAO,KACd;IAAE,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAuBzC,CAAC"}

package/dist/Components/Accordion/accordionColors.js

@@ -1,8 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAccordionHoverColors = void 0;
+const color_1 = require("../../Theme/tokens/builders/color");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+/**
+ * Same perceptibility floor the SideBar ladder uses — a state a user cannot see is not a state.
+ * Light mode `softHover` measured 1.042-1.105 across all 9 brands (invisible) while dark sat at
+ * 1.58-1.85; `expandedBg` (`primary.opacity[8]`, an 8%-alpha tint) is the same bug class — an
+ * 8% tint composited over a near-white canvas is itself near-white. Both are resolved against
+ * the rest surface so light and dark actually agree on "you can see this".
+ */
+const MIN_HOVER_STEP = 1.15;
 const getAccordionHoverColors = (colors, isDark) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     if (isDark) {
         // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
         // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
@@ -12,9 +22,13 @@ const getAccordionHoverColors = (colors, isDark) => {
             softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
         };
     }
+    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : "#ffffff";
+    const expandedTint = ((_p = (_o = colors.primary) === null || _o === void 0 ? void 0 : _o.opacity) === null || _p === void 0 ? void 0 : _p[8])
+        ? (0, color_1.compositeOver)(colors.primary.opacity[8], rest)
+        : ((_r = (_q = colors.gray) === null || _q === void 0 ? void 0 : _q[50]) !== null && _r !== void 0 ? _r : rest);
     return {
-        expandedBg: (_o = (_m = (_l = colors.primary) === null || _l === void 0 ? void 0 : _l.opacity) === null || _m === void 0 ? void 0 : _m[8]) !== null && _o !== void 0 ? _o : (_p = colors.gray) === null || _p === void 0 ? void 0 : _p[50],
-        softHover: (_s = (_r = (_q = colors.table) === null || _q === void 0 ? void 0 : _q.hover) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : (_t = colors.gray) === null || _t === void 0 ? void 0 : _t[50],
+        expandedBg: (0, outlineRung_1.liftToContrast)(expandedTint, rest, "light", MIN_HOVER_STEP),
+        softHover: (0, outlineRung_1.liftToContrast)((_u = (_t = (_s = colors.table) === null || _s === void 0 ? void 0 : _s.hover) === null || _t === void 0 ? void 0 : _t[100]) !== null && _u !== void 0 ? _u : (_v = colors.gray) === null || _v === void 0 ? void 0 : _v[50], rest, "light", MIN_HOVER_STEP),
     };
 };
 exports.getAccordionHoverColors = getAccordionHoverColors;

package/dist/Components/Checkbox/Checkbox.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAExD,eAAO,MAAM,QAAQ,EAAE,oBA4DtB,CAAC"}
+{"version":3,"file":"Checkbox.styles.d.ts","sourceRoot":"","sources":["../../../src/Components/Checkbox/Checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGxD,eAAO,MAAM,QAAQ,EAAE,oBAsEtB,CAAC"}

package/dist/Components/Checkbox/Checkbox.styles.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 exports.Checkbox = {
     baseStyle: ({ theme, colorScheme = "primary" }) => {
         var _a;
         const palette = (_a = theme.colors[colorScheme]) !== null && _a !== void 0 ? _a : theme.colors.primary;
+        // A browser probe found the checked checkbox's hover repeating its own resting `[600]` fill.
+        // Chakra's stock control also carries a checked-hover at `_checked._hover` (this override
+        // nests the other way, `_hover._checked`) — two different key paths landing on the same
+        // selector, so whichever one the cascade picks must still differ from resting. Setting both
+        // paths to the same lifted value removes that ambiguity outright.
+        const hoverChecked = (0, outlineRung_1.resolveHoverTint)(palette[600], palette[600]);
         return {
             control: {
                 width: "1.25rem",
@@ -27,13 +34,17 @@ exports.Checkbox = {
                 _checked: {
                     bg: palette[600],
                     borderColor: palette[600],
+                    _hover: {
+                        bg: hoverChecked,
+                        borderColor: hoverChecked,
+                    },
                 },
                 _hover: {
                     bg: theme.colors.background[100],
                     borderColor: palette[400],
                     _checked: {
-                        bg: palette[600],
-                        borderColor: palette[600],
+                        bg: hoverChecked,
+                        borderColor: hoverChecked,
                     },
                     _indeterminate: {
                         bg: "none",

package/dist/Components/CustomModulesTable/EditModuleModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditModuleModal.d.ts","sourceRoot":"","sources":["../../../src/Components/CustomModulesTable/EditModuleModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAcnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+DnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"EditModuleModal.d.ts","sourceRoot":"","sources":["../../../src/Components/CustomModulesTable/EditModuleModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAcnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAEjE,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkEnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/Components/CustomModulesTable/EditModuleModal.js

@@ -16,6 +16,10 @@ const EditModuleModal = ({ isOpen, onClose, initialName, isLoading, onSubmit, la
         if (isOpen)
             setName(initialName);
     }, [isOpen, initialName]);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, borderColor: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _e === void 0 ? void 0 : _e[200]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[200], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { borderRadius: "2xl", overflow: "hidden", bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], fontSize: "1.05rem", fontWeight: 600, children: labels.editModuleTitle }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: name, onChange: (e) => setName(e.target.value), placeholder: labels.moduleNamePlaceholder, 
+                                // [200] is the decorative divider rung (~1.2:1, correct for the ModalHeader border
+                                // above) — a real control's resting outline needs 1.4.11's 3:1, which is what every
+                                // other input in this library (TextInput, NumberInput, DatePicker) reads from [800].
+                                borderColor: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _e === void 0 ? void 0 : _e[800]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _g === void 0 ? void 0 : _g[400], mb: 5 }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.update, onClick: () => onSubmit(name.trim()), colorScheme: "primary", size: "sm", isLoading: isLoading, isDisabled: !name.trim() })] })] })] })] }));
 };
 exports.default = EditModuleModal;

package/dist/Components/DatePicker/CalendarPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarPanel.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/CalendarPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,IAAI,CAAC;IACnB,eAAe,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC;IACzD,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAsRtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CalendarPanel.d.ts","sourceRoot":"","sources":["../../../src/Components/DatePicker/CalendarPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,YAAY,EAAE,IAAI,CAAC;IACnB,eAAe,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,KAAK,IAAI,CAAC;IACzD,KAAK,EAAE,IAAI,CAAC;IACZ,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAC;IACtB,cAAc,EAAE,IAAI,GAAG,IAAI,CAAC;IAC5B,YAAY,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACzC,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACxC,OAAO,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO,CAAC;IACvC,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK,IAAI,CAAC;IAE/B,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAwRtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/Components/DatePicker/CalendarPanel.js

@@ -27,7 +27,9 @@ const CalendarPanel = ({ currentMonth, setCurrentMonth, today, isRange, tempDate
     const hasRange = !!(rangeStart && rangeEnd && !isSameDay(rangeStart, rangeEnd));
     const selectStyles = {
         border: "1px solid",
-        borderColor: (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[300],
+        // boxborder[500] is the control-outline rung the sibling pickers already use; boxborder[300]
+        // is decorative and measured 1.85:1 on the dark canvas — the select read as borderless.
+        borderColor: (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[500],
         borderRadius: "md",
         px: 2,
         py: 1,

package/dist/Components/Editor/joditThemeVars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"joditThemeVars.d.ts","sourceRoot":"","sources":["../../../src/Components/Editor/joditThemeVars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,GAAI,QAAQ,YAAY,EAAE,QAAQ,OAAO,KAAG,aAkDzE,CAAC"}
+{"version":3,"file":"joditThemeVars.d.ts","sourceRoot":"","sources":["../../../src/Components/Editor/joditThemeVars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB,GAAI,QAAQ,YAAY,EAAE,QAAQ,OAAO,KAAG,aA2DzE,CAAC"}

package/dist/Components/Editor/joditThemeVars.js

@@ -40,6 +40,15 @@ const getJoditThemeVars = (colors, isDark) => {
     if (isDark) {
         return {
             ...shared,
+            // `.jodit-workplace`'s own background rule in jodit.css (`.jodit-container:not(.jodit_inline)
+            // .jodit-workplace { background-color: var(--jd-color-background-default) }`) is NOT scoped
+            // under `.jodit_theme_dark` — that scope only re-themes the *border* on this selector, never
+            // the background. `--jd-color-background-default` itself is declared once, at `:root`, as
+            // `var(--jd-color-white)`, and our `--jd-color-white` override lives on this instance's wrapper
+            // (a descendant), so it never reaches `:root`'s own computed value. Left unset here, the
+            // workplace canvas fell back to Jodit's own white default even with `.jodit_theme_dark` active
+            // — this is the reported "canvas renders white in dark mode" bug.
+            "--jd-color-background-default": colors.backgroundColor.main, // .jodit-workplace canvas bg
             "--jd-dark-background-color": colors.backgroundColor.main, // canvas / toolbar-box / wysiwyg bg
             "--jd-dark-toolbar-color": colors.backgroundColor.secondary, // toolbar + status-bar bg
             "--jd-dark-text-color": colors.text[900], // body/button/status-bar ink

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

@@ -1 +1 @@
-{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../src/Components/FilePreview/FilePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAyBxC,OAAO,EAEL,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,oBAAoB,CAAC;AA6B5B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyKlD,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAuEhE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"FilePreview.d.ts","sourceRoot":"","sources":["../../../src/Components/FilePreview/FilePreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAyBxC,OAAO,EAEL,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,oBAAoB,CAAC;AA6B5B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAyKlD,CAAC;AAEF,kFAAkF;AAClF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAwEhE,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/FilePreview/FilePreview.js

@@ -77,9 +77,11 @@ const FilePreview = ({ isOpen, onClose, fileUrl, fileName, fileType, hideDownloa
 exports.FilePreview = FilePreview;
 /** Thumbnail with a hover "preview" affordance that opens {@link FilePreview}. */
 const FilePreviewTrigger = ({ fileUrl, fileName, fileType, thumbWidth = "100px", thumbHeight = "60px", hideDownload = false, }) => {
+    var _a, _b;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
     const { isOpen, onOpen, onClose } = (0, react_2.useDisclosure)();
     const kind = fileType || inferKind(fileUrl, fileName);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "8px", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "8px" })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: "gray.100", borderRadius: "8px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })), (0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: "blackAlpha.500", color: "white", opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", role: "group", maxW: thumbWidth, minW: "40px", minH: thumbHeight, borderRadius: "8px", overflow: "hidden", cursor: "pointer", onClick: onOpen, children: [kind === "image" ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: fileUrl, alt: fileName || "file", maxH: thumbHeight, maxW: thumbWidth, objectFit: "contain", borderRadius: "8px" })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: thumbHeight, bg: (_b = (_a = theme.colors.gray) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#EDF2F7", borderRadius: "8px", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })), (0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", inset: 0, align: "center", justify: "center", bg: "blackAlpha.500", color: "white", opacity: 0, transition: "opacity 0.15s ease", _groupHover: { opacity: 1 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 18 }) })] }), (0, jsx_runtime_1.jsx)(exports.FilePreview, { isOpen: isOpen, onClose: onClose, fileUrl: fileUrl, fileName: fileName, fileType: fileType, hideDownload: hideDownload })] }));
 };
 exports.FilePreviewTrigger = FilePreviewTrigger;
 exports.default = exports.FilePreview;

package/dist/Components/FileUploader/FileUploader.js

@@ -73,8 +73,8 @@ const FileUploader = ({ maxFiles = 10, maxTotalSize = 20, onFilesChange, acceptT
     // ✅ Convert ["png","pdf","zip"] → ".png,.pdf,.zip" for input accept
     const acceptString = acceptTypes.map((ext) => `.${ext}`).join(",");
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { maxW: "500px", mx: "auto", p: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "sm", color: "gray.600", mb: 4, children: ["Files Uploaded:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", color: accentColor, children: [uploadedFiles.length, " / ", maxFiles] }), " ", "| Total size:", " ", (0, jsx_runtime_1.jsxs)(react_2.Text, { as: "span", fontWeight: "medium", children: [formatFileSize(totalSize), " / ", maxTotalSize, " MB"] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px dashed", borderColor: "gray.300", borderRadius: "md", p: 1, mt: 1, mb: 1, children: [uploadedFiles.length > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(react_2.Grid, { templateColumns: "repeat(2, 1fr)", gap: 3, children: uploadedFiles.map((file) => {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: "gray.200", borderRadius: "md", pl: 1, bg: "gray.50", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: "gray.200", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: "gray.600", children: (_a = file.name.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toUpperCase() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.600", children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
+                                var _a, _b, _c, _d, _e, _f, _g;
+                                return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", border: "1px solid", borderColor: "gray.200", borderRadius: "md", pl: 1, bg: colors.backgroundColor.secondary, children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 3, flex: "1", minW: "0", children: [file.previewUrl ? ((0, jsx_runtime_1.jsx)(react_2.Image, { src: file.previewUrl, alt: file.name, boxSize: "28px", borderRadius: "sm", objectFit: "cover" })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { boxSize: "28px", borderRadius: "sm", bg: (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : "#e5e7eb", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "xs", color: (_d = (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#4A5568", children: (_e = file.name.split(".").pop()) === null || _e === void 0 ? void 0 : _e.toUpperCase() })), (0, jsx_runtime_1.jsxs)(react_2.Box, { minW: "0", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", noOfLines: 1, children: file.name }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#4A5568", children: ["(", formatFileSize(file.size), ")"] })] })] }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 1, children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "Remove", children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Remove", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }), size: "xs", variant: "ghost", colorScheme: "red", onClick: () => removeFile(file.id) }) }) })] }, file.id));
                             }) }) })), (0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, accept: acceptString, onChange: handleFileInput, style: { display: "none" } }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: uploadedFiles.length ? 0 : 5, mb: 2, textAlign: uploadedFiles.length ? "left" : "center", pt: uploadedFiles.length ? 5 : 5, transition: "all 0.2s", onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, cursor: "pointer", onClick: handleBrowseClick, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsxs)(react_2.Text, { fontWeight: "medium", fontSize: "md", children: ["Drag and drop the files here, or", (0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", color: accentColor, ml: 1, children: "Click here" })] }) }), (0, jsx_runtime_1.jsxs)(react_2.Text, { fontSize: "xs", color: "gray.500", children: ["Supported formats: ", acceptTypes.map((t) => t.toUpperCase()).join(", "), "."] })] })] })] }));
 };
 exports.default = FileUploader;

package/dist/Components/FilterSidebar/FilterSidebar.js

@@ -126,7 +126,7 @@ panelPadding = 3, clearAllButton = true, onClearAllHandler,
                         border: none;
                         cursor: pointer;
                       }
-                    ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: "gray.200", borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), (0, jsx_runtime_1.jsx)("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
+                    ` }), (0, jsx_runtime_1.jsxs)(react_2.Box, { w: "full", position: "relative", h: { base: "24px", md: "30px" }, display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: "0", right: "0", height: "6px", bg: theme.colors.gray[200], borderRadius: "full" }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, width: `${maxPercent - minPercent}%`, height: "6px", style: { background: `linear-gradient(to right, ${primaryColor}, ${secondaryColor})` }, borderRadius: "full", boxShadow: `0 0 8px ${primaryGlowColor}` }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${minPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: primaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, transform: "translate(-50%, 0)", w: { base: "16px", md: "20px" }, h: { base: "16px", md: "20px" }, borderRadius: "full", bg: theme.colors.background[50], border: "3px solid", borderColor: secondaryColor, boxShadow: thumbShadow, zIndex: 2 }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${minPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMin, range.unit ? ` ${range.unit}` : ""] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { position: "absolute", left: `${maxPercent}%`, top: { base: "-18px", md: "-22px" }, transform: "translate(-50%, -100%)", px: 2, py: 1, bg: theme.colors.background[50], border: `1px solid ${theme.colors.gray[200]}`, borderRadius: "6px", fontSize: "10px", color: theme.colors.gray[700], boxShadow: "sm", zIndex: 3, children: [currentMax, range.unit ? ` ${range.unit}` : ""] }), [0, 25, 50, 75, 100].map((p) => ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", left: `${p}%`, bottom: "-8px", transform: "translateX(-50%)", w: "1px", h: "8px", bg: theme.colors.gray[300] }, `tick-${p}`))), (0, jsx_runtime_1.jsx)("input", { type: "range", min: range.min, max: range.max, step: step, value: currentMin, className: "custom-range-slider", onChange: (e) => {
                                             const min = Math.min(Number(e.target.value), currentMax - (step || 1));
                                             const nextVal = [min, currentMax];
                                             setInternalSelected((prev) => { const next = { ...prev, [section.id]: nextVal }; onChange === null || onChange === void 0 ? void 0 : onChange(next); return next; });

package/dist/Components/LimitReachedModal/LimitReachedModal.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { LimitReachedModalProps } from "./LimitReachedModalProps";
+declare const LimitReachedModal: React.FC<LimitReachedModalProps>;
+export default LimitReachedModal;
+//# sourceMappingURL=LimitReachedModal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LimitReachedModal.d.ts","sourceRoot":"","sources":["../../../src/Components/LimitReachedModal/LimitReachedModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAyB3C,OAAO,EAAa,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAW7E,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuHvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/Components/LimitReachedModal/LimitReachedModal.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const Button_1 = __importDefault(require("../Button/Button"));
+const UpgradeButton_1 = __importDefault(require("../UpgradeButton/UpgradeButton"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const limitReachedCopy_1 = require("./limitReachedCopy");
+const KIND_ICON = {
+    record: lucide_react_1.Crown,
+    automation: lucide_react_1.Crown,
+    custom_modules: lucide_react_1.Crown,
+    user: lucide_react_1.Users,
+    projects: lucide_react_1.Crown,
+    tickets: lucide_react_1.Crown,
+};
+const LimitReachedModal = ({ isOpen, onClose, kind, limit = null, used = null, canManageBilling, onUpgrade, title, message, features, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const copy = (0, limitReachedCopy_1.resolveLimitCopy)(kind, canManageBilling);
+    const usage = (0, limitReachedCopy_1.formatLimitUsage)(kind, used, limit);
+    const KindIcon = KIND_ICON[kind];
+    const gradient = (_a = colors === null || colors === void 0 ? void 0 : colors.gradient) !== null && _a !== void 0 ? _a : {
+        from: colors.primary[500],
+        to: colors.primary[700],
+    };
+    // Header banner uses the brand gradient (not a fixed blue/purple) so it reads correctly
+    // across all 9 brand themes, with ink picked for AA against whichever stop is lighter.
+    const ink = (0, accentText_1.onGradient)(gradient.from, gradient.to, colors.white, colors.black);
+    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, size: "lg", motionPreset: "slideInBottom", children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(5px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { borderRadius: "xl", overflow: "hidden", boxShadow: "2xl", mx: 4, bg: (_b = colors === null || colors === void 0 ? void 0 : colors.background) === null || _b === void 0 ? void 0 : _b[50], children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { bgGradient: `linear(to-r, ${gradient.from}, ${gradient.to})`, color: ink, children: [(0, jsx_runtime_1.jsx)(react_1.ModalHeader, { pb: 4, children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Icon, { as: KindIcon, boxSize: "24px", mr: "12px" }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "xl", fontWeight: "bold", children: title !== null && title !== void 0 ? title : copy.title })] }) }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, { "aria-label": "Dismiss", color: ink, _hover: { opacity: 0.7 } })] }), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "md", fontWeight: 600, color: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[700]) !== null && _d !== void 0 ? _d : (_e = colors === null || colors === void 0 ? void 0 : colors.text) === null || _e === void 0 ? void 0 : _e[700], children: message !== null && message !== void 0 ? message : copy.message }), usage && ((0, jsx_runtime_1.jsx)(react_1.Text, { textAlign: "center", fontSize: "sm", color: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _f === void 0 ? void 0 : _f[500]) !== null && _g !== void 0 ? _g : (_h = colors === null || colors === void 0 ? void 0 : colors.text) === null || _h === void 0 ? void 0 : _h[500], mt: 2, children: usage })), features && features.length > 0 && ((0, jsx_runtime_1.jsx)(react_1.List, { spacing: 2, mt: 5, children: features.map((feature) => {
+                                    var _a, _b, _c, _d, _e, _f, _g;
+                                    return ((0, jsx_runtime_1.jsxs)(react_1.ListItem, { display: "flex", alignItems: "center", fontSize: "sm", color: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _a === void 0 ? void 0 : _a[600]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.text) === null || _c === void 0 ? void 0 : _c[600], children: [(0, jsx_runtime_1.jsx)(react_1.ListIcon, { as: lucide_react_1.CheckCircle, color: (_f = (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.semantic) === null || _d === void 0 ? void 0 : _d.success) === null || _e === void 0 ? void 0 : _e[500]) !== null && _f !== void 0 ? _f : (_g = colors === null || colors === void 0 ? void 0 : colors.green) === null || _g === void 0 ? void 0 : _g[500] }), feature] }, feature));
+                                }) }))] }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.ModalFooter, { children: (0, jsx_runtime_1.jsxs)(react_1.HStack, { spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: canManageBilling ? "Maybe later" : "Close", variant: "outline", colorScheme: "gray", size: "md", onClick: onClose }), canManageBilling && ((0, jsx_runtime_1.jsx)(UpgradeButton_1.default, { label: "Upgrade plan", size: "md", onClick: () => onUpgrade === null || onUpgrade === void 0 ? void 0 : onUpgrade() }))] }) })] })] }));
+};
+exports.default = LimitReachedModal;

package/dist/Components/LimitReachedModal/LimitReachedModalProps.d.ts

@@ -0,0 +1,16 @@
+export type LimitKind = "record" | "automation" | "custom_modules" | "user" | "projects" | "tickets";
+export interface LimitReachedModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    kind: LimitKind;
+    /** Plan limit for `kind`. Pass with `used` to show an inline usage line. */
+    limit?: number | null;
+    used?: number | null;
+    /** false hides the upgrade CTA and swaps in "contact your administrator" copy. */
+    canManageBilling: boolean;
+    onUpgrade?: () => void;
+    title?: string;
+    message?: string;
+    features?: string[];
+}
+//# sourceMappingURL=LimitReachedModalProps.d.ts.map

package/dist/Components/LimitReachedModal/LimitReachedModalProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LimitReachedModalProps.d.ts","sourceRoot":"","sources":["../../../src/Components/LimitReachedModal/LimitReachedModalProps.tsx"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,YAAY,GACZ,gBAAgB,GAChB,MAAM,GACN,UAAU,GACV,SAAS,CAAC;AAEd,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,SAAS,CAAC;IAChB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,kFAAkF;IAClF,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB"}

package/dist/Components/LimitReachedModal/LimitReachedModalProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/LimitReachedModal/limitReachedCopy.d.ts

@@ -0,0 +1,7 @@
+import { LimitKind } from "./LimitReachedModalProps";
+export declare function resolveLimitCopy(kind: LimitKind, canManageBilling: boolean): {
+    title: string;
+    message: string;
+};
+export declare function formatLimitUsage(kind: LimitKind, used?: number | null, limit?: number | null): string | null;
+//# sourceMappingURL=limitReachedCopy.d.ts.map

package/dist/Components/LimitReachedModal/limitReachedCopy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"limitReachedCopy.d.ts","sourceRoot":"","sources":["../../../src/Components/LimitReachedModal/limitReachedCopy.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AA0DrD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,SAAS,EACf,gBAAgB,EAAE,OAAO,GACxB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAGpC;AAED,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,SAAS,EACf,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,EACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GACpB,MAAM,GAAG,IAAI,CAGf"}

package/dist/Components/LimitReachedModal/limitReachedCopy.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveLimitCopy = resolveLimitCopy;
+exports.formatLimitUsage = formatLimitUsage;
+// Canonical strings ported from crm-frontend's orgPlanLimits.ts / orgRecordLimit.ts and
+// account-frontend's useSeatLimitGate.ts, kept verbatim so the promoted modal reads exactly
+// like the copies it replaces. `projects`/`tickets` are new — matched to the same voice.
+const COPY = {
+    record: {
+        title: "Record limit reached",
+        unit: "records",
+        admin: "You have reached your plan record limit. Upgrade to add more records.",
+        member: "Your organization has reached its record limit. Contact your organization administrator to upgrade the plan.",
+    },
+    automation: {
+        title: "Automation limit reached",
+        unit: "automations",
+        admin: "You have reached your plan automation limit. Upgrade to create more workflows and cadences.",
+        member: "Your organization has reached its automation limit. Contact your organization administrator to upgrade the plan.",
+    },
+    custom_modules: {
+        title: "Custom module limit reached",
+        unit: "custom modules",
+        admin: "You have reached your plan custom module limit. Upgrade to add more custom modules.",
+        member: "Your organization has reached its custom module limit. Contact your organization administrator to upgrade the plan.",
+    },
+    user: {
+        title: "Seat limit reached",
+        unit: "users",
+        admin: "You have reached the number of users included on your plan. Upgrade to add more.",
+        member: "Your organization has reached its user limit. Contact your organization administrator to upgrade the plan.",
+    },
+    projects: {
+        title: "Project limit reached",
+        unit: "projects",
+        admin: "You have reached your plan project limit. Upgrade to create more projects.",
+        member: "Your organization has reached its project limit. Contact your organization administrator to upgrade the plan.",
+    },
+    tickets: {
+        title: "Ticket limit reached",
+        unit: "tickets",
+        admin: "You have reached your plan ticket limit. Upgrade to create more tickets.",
+        member: "Your organization has reached its ticket limit. Contact your organization administrator to upgrade the plan.",
+    },
+};
+function resolveLimitCopy(kind, canManageBilling) {
+    const c = COPY[kind];
+    return { title: c.title, message: canManageBilling ? c.admin : c.member };
+}
+function formatLimitUsage(kind, used, limit) {
+    if (used == null || limit == null)
+        return null;
+    return `${used} of ${limit} ${COPY[kind].unit} used`;
+}

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../../src/Components/NavigationBar/NavigationBar.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAa,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAU9D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,kBAA0B,GAC1B,EAAE,WAAW,2CAwKb"}
+{"version":3,"file":"NavigationBar.d.ts","sourceRoot":"","sources":["../../../src/Components/NavigationBar/NavigationBar.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAa,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAW9D,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,kBAA0B,GAC1B,EAAE,WAAW,2CA+Kb"}

package/dist/Components/NavigationBar/NavigationBar.js

@@ -5,9 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const lucide_react_1 = require("lucide-react");
 function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavOnClick, handleLogout, logoutText, navigationBarText, sideBarToggole, onSideBarToggole, forceSideBarToggle = false, }) {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
     // Shared rounded pill affordance for the bar's icon controls.
     const iconButtonStyle = {
@@ -20,6 +21,9 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         transition: "background 0.15s",
         _hover: { bg: "blackAlpha.50" },
     };
+    // For a near-neutral brand (e.g. zinc), `primary[50]` is itself a pale near-white tint — on
+    // the menu's own near-white surface that measured as low as ~1.02:1, an invisible hover.
+    const menuHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.primary[50], (_d = (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.light) !== null && _b !== void 0 ? _b : (_c = theme.colors.background) === null || _c === void 0 ? void 0 : _c[50]) !== null && _d !== void 0 ? _d : "#ffffff");
     // Light elevated pill item.
     const menuItemStyle = {
         bg: "transparent",
@@ -32,16 +36,16 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         color: "gray.700",
         gap: theme.space["2"],
         transition: "background 0.12s",
-        _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
-        _focus: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
-        _active: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },
+        _hover: { bg: menuHoverBg, color: theme.colors.primary[700] },
+        _focus: { bg: menuHoverBg, color: theme.colors.primary[700] },
+        _active: { bg: menuHoverBg, color: theme.colors.primary[700] },
     };
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", ...iconButtonStyle, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)((_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.secondary, (_e = (_d = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _d === void 0 ? void 0 : _d.backgroundColor) === null || _e === void 0 ? void 0 : _e.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, 
+    return ((0, jsx_runtime_1.jsx)(react_1.Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: (0, jsx_runtime_1.jsxs)(react_1.Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", gap: 1.5, alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_1.Box, { onClick: () => onSideBarToggole === null || onSideBarToggole === void 0 ? void 0 : onSideBarToggole(), display: forceSideBarToggle ? "flex" : { base: "flex", lg: "none" }, "aria-label": sideBarToggole ? "Close navigation menu" : "Open navigation menu", ...iconButtonStyle, children: sideBarToggole ? ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelLeftClose, { size: "1.25rem" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && ((0, jsx_runtime_1.jsx)(react_1.Box, { ...iconButtonStyle, display: "flex", onClick: () => { var _a; return (_a = navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) === null || _a === void 0 ? void 0 : _a.call(navigationBarText); }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.CircleArrowLeft, { size: "1.25rem", color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f[500] }) })), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text) && ((0, jsx_runtime_1.jsx)(react_1.Text, { color: (0, accentText_1.accentTextOnCanvas)((_g = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _g === void 0 ? void 0 : _g.secondary, (_j = (_h = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _h === void 0 ? void 0 : _h.backgroundColor) === null || _j === void 0 ? void 0 : _j.light), fontSize: "1.25rem", fontWeight: 600, fontFamily: "open-sans, sans-serif", letterSpacing: "-0.013rem", children: navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.text }))] }), (0, jsx_runtime_1.jsx)(react_1.Flex, { minW: 0, flexShrink: 1, children: (0, jsx_runtime_1.jsxs)(react_1.Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), (0, jsx_runtime_1.jsxs)(react_1.Menu, { children: [(0, jsx_runtime_1.jsx)(react_1.MenuButton, { as: react_1.Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "sm", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsx)(react_1.MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, 
                                         // Chakra's MenuItem renders `background: var(--menu-bg)` at rest; its MenuList
                                         // baseStyle hardcodes that var to "#fff" (gated behind `_dark`, which this theme-swap
                                         // app never triggers). The `bg` prop above only recolors the list itself, not the
                                         // inherited var, so items fall back to white until hover/focus — set the var too.
-                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: "gray.700", overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: "gray.800", isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: "gray.500", isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                        sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "0.75rem", boxShadow: "lg", color: theme.colors.text[900], overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(react_1.Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [(0, jsx_runtime_1.jsx)(react_1.Center, { pt: 4, pb: 2, children: (0, jsx_runtime_1.jsx)(react_1.Avatar, { size: "xl", name: userName, src: userAvathar }) }), (0, jsx_runtime_1.jsxs)(react_1.Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsx)(react_1.Box, { flex: 1, overflowY: "auto", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
                                                         var _a, _b, _c;
                                                         return ((0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && ((0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), (0, jsx_runtime_1.jsx)(react_1.Box, { children: menu.title })] }, `${String((_c = (_b = (_a = menu.id) !== null && _a !== void 0 ? _a : menu.url) !== null && _b !== void 0 ? _b : menu.title) !== null && _c !== void 0 ? _c : idx)}-${idx}`));
                                                     }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {

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

@@ -1 +1 @@
-{"version":3,"file":"OrgSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Components/OrgSwitcher/OrgSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAkBzD,OAAO,EAGL,gBAAgB,EAGjB,MAAM,oBAAoB,CAAC;AA6C5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4M3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"OrgSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Components/OrgSwitcher/OrgSwitcher.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAoBzD,OAAO,EAGL,gBAAgB,EAGjB,MAAM,oBAAoB,CAAC;AAkD5B,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA4N3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -5,6 +5,8 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const OrgSwitcherProps_1 = require("./OrgSwitcherProps");
 const sizeMap = {
     sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
@@ -15,7 +17,12 @@ const Avatar = ({ org, boxSize, fontSize, }) => {
     if (org.logoUrl) {
         return ((0, jsx_runtime_1.jsx)(react_2.Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "8px", objectFit: "cover", flexShrink: 0 }));
     }
-    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "8px", flexShrink: 0, bg: (0, OrgSwitcherProps_1.avatarColor)(org.name), color: "white", fontSize: fontSize, fontWeight: 700, children: (0, OrgSwitcherProps_1.orgInitial)(org.name) }));
+    // `AVATAR_COLORS` is a fixed 8-swatch palette hashed from the org name (not theme-derived, so
+    // it can't lean on a per-brand text rung). Two of the eight — amber `#F59E0B`, teal `#14B8A6` —
+    // measure 2.15:1 / 2.49:1 against hardcoded white, well under AA. `onFilled` is provably >=4.5
+    // against ANY fill, so it's the correct ink for an arbitrary, theme-independent swatch.
+    const fill = (0, OrgSwitcherProps_1.avatarColor)(org.name);
+    return ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "8px", flexShrink: 0, bg: fill, color: (0, accentText_1.onFilled)(fill, "#ffffff", "#000000"), fontSize: fontSize, fontWeight: 700, children: (0, OrgSwitcherProps_1.orgInitial)(org.name) }));
 };
 const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, }) => {
     var _a, _b, _c;
@@ -40,6 +47,11 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
         : triggerVariant === "subtle"
             ? { bg: theme.colors.gray[50] }
             : { bg: "transparent" };
+    // `gray[100]` hover on a "transparent" trigger reads against whatever's actually behind it —
+    // this control lives in a navbar-like shell, so `backgroundColor.light` is that surface. For a
+    // near-neutral brand (zinc) the two measured near-1.0: an invisible hover, same bug shape as
+    // NavigationBar's menu items.
+    const triggerHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.backgroundColor.light);
     const handleSelect = (org) => {
         onClose();
         setQuery("");
@@ -49,14 +61,21 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
     return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
             onClose();
             setQuery("");
-        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? theme.colors.gray[100] : undefined }, ...triggerStyles, children: [selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "8px", bg: theme.colors.gray[100], color: theme.colors.gray[400], flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.gray[400], flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", 
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "8px", bg: theme.colors.gray[100], color: theme.colors.gray[400], flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.gray[400], flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { minW: menuMinWidth, w: "auto", 
                 // Chakra's PopoverContent baseStyle defaults bg to var(--popper-bg), which is hardcoded
                 // to colors.white and only repointed under Chakra's own `_dark` — dead code here since
                 // this app toggles dark mode by swapping the palette, not Chakra's colorMode. Without an
                 // explicit bg the panel always rendered white regardless of the active theme.
                 bg: theme.colors.backgroundColor.light, borderRadius: "12px", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.gray[400] }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), borderRadius: "8px" })] }) })), (0, jsx_runtime_1.jsxs)(react_2.Box, { maxH: "320px", overflowY: "auto", py: 1, children: [filtered.map((org) => {
                                     const isActive = org.id === value;
-                                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "10px", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: isActive ? theme.colors.primary[50] : theme.colors.gray[50] }, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))] }, org.id));
+                                    // Active row's hover repeated its own resting `primary[50]` fill — a zero-delta
+                                    // hover, invisible by construction. `resolveHoverTint` walks a fill away from a
+                                    // backdrop until distinguishable, so handing it its own resting bg as the backdrop
+                                    // is enough to make hover read as a real state change on both active and inactive rows.
+                                    const rowHoverBg = isActive
+                                        ? (0, outlineRung_1.resolveHoverTint)(theme.colors.primary[50], theme.colors.primary[50])
+                                        : (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[50], theme.colors.backgroundColor.light);
+                                    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "10px", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [(0, jsx_runtime_1.jsx)(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))] }, org.id));
                                 }), filtered.length === 0 && ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
 };
 exports.default = OrgSwitcher;

package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts

@@ -35,6 +35,7 @@ export interface OrgSwitcherProps {
     /** Show the role subtitle inside the dropdown rows. Default true. */
     showRole?: boolean;
 }
+export declare const AVATAR_COLORS: string[];
 /** Deterministically pick an avatar color from an org name. */
 export declare const avatarColor: (seed: string) => string;
 /** First letter (uppercased) of an org name, for the fallback avatar. */

package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OrgSwitcherProps.d.ts","sourceRoot":"","sources":["../../../src/Components/OrgSwitcher/OrgSwitcherProps.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qDAAqD;IACrD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACxD,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6EAA6E;IAC7E,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAChD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAaD,+DAA+D;AAC/D,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,MAM1C,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,KAAG,MACA,CAAC"}
+{"version":3,"file":"OrgSwitcherProps.d.ts","sourceRoot":"","sources":["../../../src/Components/OrgSwitcher/OrgSwitcherProps.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,iCAAiC;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,MAAM,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEjD,MAAM,WAAW,gBAAgB;IAC/B,oCAAoC;IACpC,aAAa,EAAE,SAAS,EAAE,CAAC;IAC3B,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qDAAqD;IACrD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,EAAE,SAAS,KAAK,IAAI,CAAC;IACxD,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+DAA+D;IAC/D,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6EAA6E;IAC7E,cAAc,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IAChD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,UASzB,CAAC;AAEF,+DAA+D;AAC/D,eAAO,MAAM,WAAW,GAAI,MAAM,MAAM,KAAG,MAM1C,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,UAAU,GAAI,MAAM,MAAM,KAAG,MACA,CAAC"}

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.orgInitial = exports.avatarColor = void 0;
-const AVATAR_COLORS = [
+exports.orgInitial = exports.avatarColor = exports.AVATAR_COLORS = void 0;
+exports.AVATAR_COLORS = [
     "#6366F1",
     "#0EA5E9",
     "#10B981",
@@ -17,7 +17,7 @@ const avatarColor = (seed) => {
     for (let i = 0; i < seed.length; i += 1) {
         hash = seed.charCodeAt(i) + ((hash << 5) - hash);
     }
-    return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+    return exports.AVATAR_COLORS[Math.abs(hash) % exports.AVATAR_COLORS.length];
 };
 exports.avatarColor = avatarColor;
 /** First letter (uppercased) of an org name, for the fallback avatar. */