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

package/dist/Theme/provider/PixelizeThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PixelizeThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/PixelizeThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU/E,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AA2BF,eAAO,MAAM,gBAAgB,kDAE5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,GAAI,8EAMnC,0BAA0B,4CA0D5B,CAAC"}
+{"version":3,"file":"PixelizeThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/PixelizeThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAU/E,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,iBAAiB,CAAC;IAChC,OAAO,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;;;OAQG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC1C,CAAC;AA2BF,eAAO,MAAM,gBAAgB,kDAE5B,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,GAAI,8FAOnC,0BAA0B,4CA8F5B,CAAC"}

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -48,7 +48,7 @@ exports.ThemeModeContext = (0, react_1.createContext)(undefined);
  * whatever the active palette says. Read the mode from `useThemeMode()` instead. Existing apps are
  * unaffected: they are light-only, where that argument was always the one returned anyway.
  */
-const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, defaultMode = DEFAULT_MODE, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, }) => {
+const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, defaultMode = DEFAULT_MODE, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
     const [mode, setModeState] = (0, react_1.useState)(defaultMode);
     const [brand, setBrandState] = (0, react_1.useState)(brandProp);
     // Deterministic on the server and on the first client render — the real OS value lands in
@@ -67,6 +67,22 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, def
         if (stored.brand)
             setBrandState(stored.brand);
     }, [disablePersistence, storageKey]);
+    // `brandProp` only seeds initial state above, so a consumer that re-renders with a new
+    // `brand` prop after mount (e.g. persisting the pick through its own store, like tickets'
+    // Settings page dispatching Redux instead of calling `setBrand`) would otherwise never see
+    // it applied — the same gap `colorMode` has, which callers work around with an effect
+    // mirroring `mode`. Sync it here instead so every consumer gets it for free.
+    const isFirstBrandPropRun = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(() => {
+        if (isFirstBrandPropRun.current) {
+            isFirstBrandPropRun.current = false;
+            return;
+        }
+        setBrandState(brandProp);
+        // Only re-sync when the prop itself changes — not on every local `setBrand` call (that
+        // would fight the user's own in-session brand picking, e.g. via ThemeSwitcher).
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [brandProp]);
     // Skipping the mount run keeps the defaults from being written over a stored value before
     // the rehydrate effect above has applied it.
     const isFirstPersistRun = (0, react_1.useRef)(true);
@@ -80,12 +96,29 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, def
         (0, colorModeStorage_1.writeStoredTheme)(storageKey, { mode, brand });
     }, [mode, brand, disablePersistence, storageKey]);
     const resolvedMode = mode === "system" ? systemMode : mode;
+    /**
+     * Native browser UI (the `<select>` dropdown popup chrome, the `<input type="date">` calendar
+     * picker) is painted by the browser's own UA stylesheet keyed off the CSS `color-scheme`
+     * property, entirely separate from Chakra/React theming — no component style or palette swap
+     * above can reach it. Without this, that chrome always renders light, even on an otherwise dark
+     * page. Scoped to this provider (not a global stylesheet) so `withTheme` consumers — deliberately
+     * light-only, see the module doc's "Key rules" — are untouched.
+     */
+    (0, react_1.useEffect)(() => {
+        document.documentElement.style.colorScheme = resolvedMode;
+    }, [resolvedMode]);
     const setMode = (0, react_1.useCallback)((next) => setModeState(next), []);
     const setBrand = (0, react_1.useCallback)((next) => setBrandState(next), []);
     // From "system", flip to the opposite of what the OS currently gives, so a click always
     // visibly changes the UI.
     const toggle = (0, react_1.useCallback)(() => setModeState(resolvedMode === "dark" ? "light" : "dark"), [resolvedMode]);
     const value = (0, react_1.useMemo)(() => ({ mode, resolvedMode, setMode, toggle, brand, setBrand }), [mode, resolvedMode, setMode, toggle, brand, setBrand]);
-    return ((0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: index_1.brandThemes[brand][resolvedMode], colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) }) }));
+    const resolvedTheme = (0, react_1.useMemo)(() => {
+        const base = index_1.brandThemes[brand][resolvedMode];
+        return themeOverrides
+            ? (0, react_2.extendTheme)(base, themeOverrides)
+            : base;
+    }, [brand, resolvedMode, themeOverrides]);
+    return ((0, jsx_runtime_1.jsx)(exports.ThemeModeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(react_2.ChakraProvider, { theme: resolvedTheme, colorModeManager: forcedLightColorModeManager, children: (0, jsx_runtime_1.jsx)(Toaster_1.default, { children: children }) }) }));
 };
 exports.PixelizeThemeProvider = PixelizeThemeProvider;

package/dist/Theme/provider/ThemeSwitcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/ThemeSwitcher.tsx"],"names":[],"mappings":"AAoBA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAgQF,eAAO,MAAM,aAAa,GAAI,8DAK3B,kBAAkB,4CAuBpB,CAAC"}
+{"version":3,"file":"ThemeSwitcher.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/ThemeSwitcher.tsx"],"names":[],"mappings":"AAqBA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAkSF,eAAO,MAAM,aAAa,GAAI,8DAK3B,kBAAkB,4CAuBpB,CAAC"}

package/dist/Theme/provider/ThemeSwitcher.js

@@ -19,13 +19,24 @@ const SIZES = {
     lg: { control: "lg", icon: 18 },
 };
 const toBrandLabel = (brand) => brand.charAt(0).toUpperCase() + brand.slice(1);
+/**
+ * Same swatch each brand's own theme carries at `colors.primary[500]` (the
+ * anchor a filled button reads) — resolved per brand from its OWN palette so
+ * the dot always matches what selecting that brand actually looks like,
+ * regardless of which brand/mode is currently active.
+ */
+const brandSwatchColor = (brand) => {
+    var _a, _b, _c, _d, _e;
+    return (_e = (_d = (_c = (_b = (_a = index_1.brandThemes[brand]) === null || _a === void 0 ? void 0 : _a.light) === null || _b === void 0 ? void 0 : _b.colors) === null || _c === void 0 ? void 0 : _c.primary) === null || _d === void 0 ? void 0 : _d[500]) !== null && _e !== void 0 ? _e : "gray.400";
+};
+const BrandSwatch = ({ brand }) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-block", w: "0.625rem", h: "0.625rem", borderRadius: "full", bg: brandSwatchColor(brand), border: "1px solid", borderColor: "whiteAlpha.300", flexShrink: 0 }));
 /**
  * Palette values already differ per color mode (`brandThemes[brand].light|dark`), so tokens
  * are read straight from the active theme — no `useColorModeValue` pairing needed here.
  * Fallbacks are Chakra token names, never literal colors, for themes without a brand palette.
  */
 const useSwitcherColors = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     const colors = (0, useCustomTheme_1.useCustomTheme)().colors;
     return {
         trackBg: (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.secondary) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[100]) !== null && _d !== void 0 ? _d : "gray.100",
@@ -34,19 +45,20 @@ const useSwitcherColors = () => {
         mutedColor: (_q = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.text) === null || _m === void 0 ? void 0 : _m[600]) !== null && _o !== void 0 ? _o : (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[600]) !== null && _q !== void 0 ? _q : "gray.600",
         hoverBg: (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _r === void 0 ? void 0 : _r[100]) !== null && _s !== void 0 ? _s : "gray.100",
         borderColor: (_w = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.border) === null || _t === void 0 ? void 0 : _t[200]) !== null && _u !== void 0 ? _u : (_v = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _v === void 0 ? void 0 : _v[200]) !== null && _w !== void 0 ? _w : "gray.200",
-        // Chakra's MenuList baseStyle hardcodes `--menu-bg` to "#fff" (gated behind `_dark`,
-        // which this theme-swap app never triggers) — same bug class already fixed in
-        // NavigationBar/ButtonGroupIcon. `bg` alone only recolors the list's own box, not the
-        // var other pseudo-states read, so both must be set.
-        menuBg: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.backgroundColor) === null || _x === void 0 ? void 0 : _x.light) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.background) === null || _z === void 0 ? void 0 : _z[50]) !== null && _0 !== void 0 ? _0 : "white",
-        menuColor: (_4 = (_2 = (_1 = colors === null || colors === void 0 ? void 0 : colors.text) === null || _1 === void 0 ? void 0 : _1[900]) !== null && _2 !== void 0 ? _2 : (_3 = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _3 === void 0 ? void 0 : _3[900]) !== null && _4 !== void 0 ? _4 : "gray.900",
+        // `--menu-bg` (and its hover/focus/active states) is now fixed centrally in the theme's
+        // Menu component style (Theme/chakra/Menu.styles.ts) — every MenuList gets it from there.
+        // Re-deriving it here too and pushing it back via `sx` on every render caused a redundant
+        // Emotion style recompute per render, which showed up as flicker while hovering/scrolling
+        // this list. Keep menuColor (Menu.styles.ts doesn't set list `color` per this component's
+        // needs) but stop duplicating menuBg.
+        menuColor: (_0 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.text) === null || _x === void 0 ? void 0 : _x[900]) !== null && _y !== void 0 ? _y : (_z = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _z === void 0 ? void 0 : _z[900]) !== null && _0 !== void 0 ? _0 : "gray.900",
     };
 };
 const BrandMenu = ({ size }) => {
     const { brand, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, menuBg, menuColor } = useSwitcherColors();
+    const { mutedColor, menuColor } = useSwitcherColors();
     const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: toBrandLabel(brand) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", bg: menuBg, sx: { "--menu-bg": menuBg }, color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: toBrandLabel(option) }, option))) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.Button, size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", fontWeight: 500, "aria-label": `Brand theme, current ${toBrandLabel(brand)}`, _focusVisible: { boxShadow: "outline" }, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: brand }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(brand) })] }) }), (0, jsx_runtime_1.jsx)(react_2.MenuList, { minW: "9rem", color: menuColor, children: (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) }) })] }));
 };
 const IconVariant = ({ size, label, }) => {
     const { resolvedMode, toggle } = (0, useThemeMode_1.useThemeMode)();
@@ -82,10 +94,10 @@ const SegmentedVariant = ({ size, label, showBrandPicker, }) => {
 const MenuVariant = ({ size, label, showBrandPicker, }) => {
     var _a;
     const { mode, brand, setMode, setBrand } = (0, useThemeMode_1.useThemeMode)();
-    const { mutedColor, hoverBg, menuBg, menuColor } = useSwitcherColors();
+    const { mutedColor, hoverBg, menuColor } = useSwitcherColors();
     const active = (_a = MODE_OPTIONS.find((option) => option.value === mode)) !== null && _a !== void 0 ? _a : MODE_OPTIONS[0];
     const brands = Object.keys(index_1.brandThemes);
-    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", bg: menuBg, sx: { "--menu-bg": menuBg }, color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: toBrandLabel(option) }, option))) })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Menu, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuButton, { as: react_2.IconButton, "aria-label": label !== null && label !== void 0 ? label : `Color mode, current ${active.label}`, icon: (0, jsx_runtime_1.jsx)(active.Icon, { size: SIZES[size].icon, "aria-hidden": true }), size: SIZES[size].control, variant: "ghost", color: mutedColor, borderRadius: "full", _hover: { bg: hoverBg }, _focusVisible: { boxShadow: "outline" } }), (0, jsx_runtime_1.jsxs)(react_2.MenuList, { minW: "10rem", color: menuColor, children: [(0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Appearance", type: "radio", value: mode, onChange: (value) => setMode(value), children: MODE_OPTIONS.map(({ value, label: optionLabel, Icon }) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: value, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(Icon, { size: SIZES[size].icon, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: optionLabel })] }) }, value))) }), showBrandPicker && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.MenuDivider, {}), (0, jsx_runtime_1.jsx)(react_2.MenuOptionGroup, { title: "Brand", type: "radio", value: brand, onChange: (value) => setBrand(value), children: brands.map((option) => ((0, jsx_runtime_1.jsx)(react_2.MenuItemOption, { value: option, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [(0, jsx_runtime_1.jsx)(BrandSwatch, { brand: option }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: toBrandLabel(option) })] }) }, option))) })] }))] })] }));
 };
 const ThemeSwitcher = ({ variant = "icon", showBrandPicker = false, size = "md", "aria-label": ariaLabel, }) => {
     if (variant === "segmented") {

package/dist/Theme/tokens/brands/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/brands/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAe3E,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAC1F,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,GACT,CAAC;AAEF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUzD,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUxD,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAU/E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAiC,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/brands/index.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,IAAI,MAAM,sBAAsB,CAAC;AAExC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,UAAU,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,cAAc,MAAM,2BAA2B,CAAC;AACvD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAgB3E,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC;AAC1F,OAAO,EACL,YAAY,EACZ,UAAU,EACV,WAAW,EACX,WAAW,EACX,SAAS,EACT,WAAW,EACX,YAAY,EACZ,cAAc,EACd,QAAQ,GACT,CAAC;AAKF,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUzD,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,SAAS,EAAE,YAAY,CAUxD,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAU/E,CAAC;AAEF,eAAO,MAAM,UAAU,EAAiC,SAAS,EAAE,CAAC"}

package/dist/Theme/tokens/brands/index.js

@@ -41,6 +41,7 @@ exports.storefrontDark = palette_dark_8.default;
 const palette_dark_9 = __importDefault(require("./zinc/palette.dark"));
 exports.zincDark = palette_dark_9.default;
 const accentText_1 = require("../builders/accentText");
+const outlineRung_1 = require("../builders/outlineRung");
 /**
  * Derived here rather than hand-written into each brand's literal: it must track that brand's
  * own primary scale and canvas, and a stale hand-copied hex would silently fail AA.
@@ -53,29 +54,30 @@ const withAccentText = (palette) => {
         accentText: (_a = palette.accentText) !== null && _a !== void 0 ? _a : (0, accentText_1.pickAccentText)(palette.primary, palette.backgroundColor.main, "light"),
     });
 };
+const lightBrand = (palette) => (0, outlineRung_1.withOutlineRung)(withAccentText(palette), "light");
 /** Light palette per brand. `lavender` is the base the other six extend. */
 exports.lightPalettes = {
-    lavender: withAccentText(palette_light_1.default),
-    meadow: withAccentText(palette_light_2.default),
-    radiant: withAccentText(palette_light_3.default),
-    skyline: withAccentText(palette_light_4.default),
-    slate: withAccentText(palette_light_5.default),
-    emerald: withAccentText(palette_light_6.default),
-    rosewood: withAccentText(palette_light_7.default),
-    storefront: withAccentText(palette_light_8.default),
-    zinc: withAccentText(palette_light_9.default),
+    lavender: lightBrand(palette_light_1.default),
+    meadow: lightBrand(palette_light_2.default),
+    radiant: lightBrand(palette_light_3.default),
+    skyline: lightBrand(palette_light_4.default),
+    slate: lightBrand(palette_light_5.default),
+    emerald: lightBrand(palette_light_6.default),
+    rosewood: lightBrand(palette_light_7.default),
+    storefront: lightBrand(palette_light_8.default),
+    zinc: lightBrand(palette_light_9.default),
 };
 /** Dark palette per brand, derived from the matching light palette. */
 exports.darkPalettes = {
-    lavender: palette_dark_1.default,
-    meadow: palette_dark_2.default,
-    radiant: palette_dark_3.default,
-    skyline: palette_dark_4.default,
-    slate: palette_dark_5.default,
-    emerald: palette_dark_6.default,
-    rosewood: palette_dark_7.default,
-    storefront: palette_dark_8.default,
-    zinc: palette_dark_9.default,
+    lavender: (0, outlineRung_1.withOutlineRung)(palette_dark_1.default, "dark"),
+    meadow: (0, outlineRung_1.withOutlineRung)(palette_dark_2.default, "dark"),
+    radiant: (0, outlineRung_1.withOutlineRung)(palette_dark_3.default, "dark"),
+    skyline: (0, outlineRung_1.withOutlineRung)(palette_dark_4.default, "dark"),
+    slate: (0, outlineRung_1.withOutlineRung)(palette_dark_5.default, "dark"),
+    emerald: (0, outlineRung_1.withOutlineRung)(palette_dark_6.default, "dark"),
+    rosewood: (0, outlineRung_1.withOutlineRung)(palette_dark_7.default, "dark"),
+    storefront: (0, outlineRung_1.withOutlineRung)(palette_dark_8.default, "dark"),
+    zinc: (0, outlineRung_1.withOutlineRung)(palette_dark_9.default, "dark"),
 };
 // Built from lightPalettes/darkPalettes (not the raw literals) so accentText can never be
 // present on one map and missing on the other.

package/dist/Theme/tokens/brands/zinc/palette.dark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.dark.ts"],"names":[],"mappings":"AAqLA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"palette.dark.d.ts","sourceRoot":"","sources":["../../../../../src/Theme/tokens/brands/zinc/palette.dark.ts"],"names":[],"mappings":"AAuLA,QAAA,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BZ,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/Theme/tokens/brands/zinc/palette.dark.js

@@ -93,13 +93,15 @@ const header = {
     900: "#ffffff",
 };
 // muted-foreground = gray[500] = #a1a1aa (5.81:1 on the #27272a muted surface); it also serves
-// as the focus ring on the #09090b canvas (7.76:1). gray[400] = the #6b6b75 interactive border.
+// as the focus ring on the #09090b canvas (7.76:1). gray[400] = the interactive border/icon rung:
+// #6b6b75 (matching border[500]) measured 2.95:1 on the LIGHTEST named surface, just under the 3:1
+// non-text bar it is used at, so it is one step lighter than border[500] here.
 const gray = {
     50: "#18181b",
     100: "#27272a",
     200: "#3f3f46",
     300: "#52525b",
-    400: "#6b6b75",
+    400: "#71717a",
     500: "#a1a1aa",
     600: "#b4b4bb",
     700: "#d4d4d8",

package/dist/Theme/tokens/builders/outlineRung.d.ts

@@ -0,0 +1,35 @@
+import type { PaletteProps, ResolvedColorMode } from "../types";
+/**
+ * The floor a hover/active state's step off its own resting surface must clear to be seen at
+ * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
+ * A "hover" a user cannot perceive is not a hover.
+ */
+export declare const MIN_PERCEPTIBLE_STEP = 1.15;
+/** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
+export declare const AA_NON_TEXT = 3;
+/**
+ * Walks a hex toward `target` contrast against `backdrop`, keeping its hue and saturation so the
+ * result still reads as the same colour. Darkens when `mode` is light, lightens when dark, and
+ * stops at the FIRST passing step so nothing overshoots to black or white.
+ */
+export declare function liftToContrast(hex: string, backdrop: string, mode: ResolvedColorMode, target?: number): string;
+/**
+ * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
+ * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
+ * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
+ * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
+ *
+ * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
+ * and outside 1.4.11.
+ */
+export declare function withOutlineRung(palette: PaletteProps, mode: ResolvedColorMode): PaletteProps;
+/**
+ * A hover/active tint resolved against the surface it actually sits on, guaranteed to clear
+ * `MIN_PERCEPTIBLE_STEP`. Written for the recurring shape found across NavigationBar, UserDetails
+ * and Accordion: a pale `primary[50]`/`gray[50]` tint that measures near-1.0 on a near-white
+ * surface — invisible — with no dark-mode branch, so the same call site is wrong in both modes at
+ * once. `restSurface` is required rather than assumed white/black: a menu item's hover sits on
+ * its OWN list background, not necessarily the page canvas.
+ */
+export declare function resolveHoverTint(seed: string, restSurface: string): string;
+//# sourceMappingURL=outlineRung.d.ts.map

package/dist/Theme/tokens/builders/outlineRung.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlineRung.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/outlineRung.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAEhE;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAEzC,+EAA+E;AAC/E,eAAO,MAAM,WAAW,IAAI,CAAC;AAE7B;;;;GAIG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,iBAAiB,EACvB,MAAM,GAAE,MAAoB,GAC3B,MAAM,CAaR;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,iBAAiB,GAAG,YAAY,CAc5F;AAED;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAG1E"}

package/dist/Theme/tokens/builders/outlineRung.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AA_NON_TEXT = exports.MIN_PERCEPTIBLE_STEP = void 0;
+exports.liftToContrast = liftToContrast;
+exports.withOutlineRung = withOutlineRung;
+exports.resolveHoverTint = resolveHoverTint;
+const color_1 = require("./color");
+const accentText_1 = require("./accentText");
+/**
+ * The floor a hover/active state's step off its own resting surface must clear to be seen at
+ * all — same value the SideBar ladder, Accordion, and NavigationBar hover states are held to.
+ * A "hover" a user cannot perceive is not a hover.
+ */
+exports.MIN_PERCEPTIBLE_STEP = 1.15;
+/** WCAG 1.4.11 — a control outline is a UI component boundary, held to 3:1. */
+exports.AA_NON_TEXT = 3;
+/**
+ * Walks a hex toward `target` contrast against `backdrop`, keeping its hue and saturation so the
+ * result still reads as the same colour. Darkens when `mode` is light, lightens when dark, and
+ * stops at the FIRST passing step so nothing overshoots to black or white.
+ */
+function liftToContrast(hex, backdrop, mode, target = exports.AA_NON_TEXT) {
+    if ((0, color_1.contrastRatio)(hex, backdrop) >= target)
+        return hex;
+    const { s } = (0, color_1.hexToHsl)(hex);
+    const step = mode === "dark" ? 1 : -1;
+    let { l } = (0, color_1.hexToHsl)(hex);
+    while (l > 0 && l < 100) {
+        l += step;
+        const next = (0, color_1.withLightness)(hex, l, s);
+        if ((0, color_1.contrastRatio)(next, backdrop) >= target)
+            return next;
+    }
+    return (0, color_1.withLightness)(hex, mode === "dark" ? 100 : 0, s);
+}
+/**
+ * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
+ * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1
+ * across brands, so those controls rendered effectively borderless in BOTH modes. Resolved here
+ * rather than hand-pinned per brand: a copied hex goes stale the moment a canvas moves.
+ *
+ * `border[*]` is deliberately untouched — that ramp draws table gridlines, which are decorative
+ * and outside 1.4.11.
+ */
+function withOutlineRung(palette, mode) {
+    const current = palette.boxborder[500];
+    // The border sits between the control's fill and the surface behind it; hold it to the
+    // harder of the two.
+    const backdrop = (0, color_1.contrastRatio)(current, palette.backgroundColor.main) <=
+        (0, color_1.contrastRatio)(current, palette.background[50])
+        ? palette.backgroundColor.main
+        : palette.background[50];
+    const resolved = liftToContrast(current, backdrop, mode);
+    if (resolved === current)
+        return palette;
+    return { ...palette, boxborder: { ...palette.boxborder, 500: resolved } };
+}
+/**
+ * A hover/active tint resolved against the surface it actually sits on, guaranteed to clear
+ * `MIN_PERCEPTIBLE_STEP`. Written for the recurring shape found across NavigationBar, UserDetails
+ * and Accordion: a pale `primary[50]`/`gray[50]` tint that measures near-1.0 on a near-white
+ * surface — invisible — with no dark-mode branch, so the same call site is wrong in both modes at
+ * once. `restSurface` is required rather than assumed white/black: a menu item's hover sits on
+ * its OWN list background, not necessarily the page canvas.
+ */
+function resolveHoverTint(seed, restSurface) {
+    const mode = (0, accentText_1.isDarkCanvas)(restSurface) ? "dark" : "light";
+    return liftToContrast(seed, restSurface, mode, exports.MIN_PERCEPTIBLE_STEP);
+}

package/dist/Theme/tokens/builders/statusTone.d.ts

@@ -0,0 +1,35 @@
+import type { ColorScale, ResolvedColorMode } from "../types";
+export type StatusTone = {
+    /** Chip fill. */
+    bg: string;
+    /** Label ink, guaranteed >= 4.5:1 on `bg`. */
+    fg: string;
+    /** Chip outline, guaranteed >= 3:1 on `bg`. */
+    border: string;
+};
+/**
+ * Status chips (open / in-progress / resolved …) were authored as `X.500` text on an `X.100`
+ * tint, which measures 3.3-4.4:1 — under the 4.5:1 body-text bar in BOTH modes. The ink is
+ * resolved from the scale's own hue instead of pinned, so every brand and both modes land on the
+ * lightest ink that still passes rather than a hand-copied hex that goes stale.
+ *
+ * `reverseScale` flips the utility ramps in dark, so `X.100` is already a dark tint there and the
+ * ink walks lighter instead of darker — hence the mode argument.
+ */
+export declare function resolveStatusTone(scale: ColorScale, mode: ResolvedColorMode): StatusTone;
+/**
+ * Avatar initials are drawn white on a generated fill. The seed hues in use measured 1.92:1
+ * (`#eab308`), 2.54:1 (`#10b981`) and 3.76:1 (`#ef4444`) — failing in light mode too, not just
+ * dark. Darkening the fill keeps the intended hue and the white-initials look while clearing AA.
+ */
+export declare function resolveAvatarFill(hex: string, target?: number): string;
+/**
+ * Hue set for generated avatars. Values are seeds, not final fills — always pass them through
+ * `resolveAvatarFill` so the white initials stay legible.
+ */
+export declare const AVATAR_SEEDS: readonly ["#ef4444", "#f97316", "#eab308", "#22c55e", "#10b981", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899"];
+/** Stable per-name avatar fill: same name always yields the same accessible colour. */
+export declare function avatarFillFor(seedText: string): string;
+/** True when `fg` clears the body-text bar on `bg` — exported for consumer assertions. */
+export declare const meetsBodyText: (fg: string, bg: string) => boolean;
+//# sourceMappingURL=statusTone.d.ts.map

package/dist/Theme/tokens/builders/statusTone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"statusTone.d.ts","sourceRoot":"","sources":["../../../../src/Theme/tokens/builders/statusTone.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG;IACvB,iBAAiB;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,EAAE,EAAE,MAAM,CAAC;IACX,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,iBAAiB,GAAG,UAAU,CAUxF;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,GAAE,MAAuB,GAAG,MAAM,CAGtF;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,8GAUf,CAAC;AAEX,uFAAuF;AACvF,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAMtD;AAED,0FAA0F;AAC1F,eAAO,MAAM,aAAa,GAAI,IAAI,MAAM,EAAE,IAAI,MAAM,KAAG,OACd,CAAC"}

package/dist/Theme/tokens/builders/statusTone.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.meetsBodyText = exports.AVATAR_SEEDS = void 0;
+exports.resolveStatusTone = resolveStatusTone;
+exports.resolveAvatarFill = resolveAvatarFill;
+exports.avatarFillFor = avatarFillFor;
+const color_1 = require("./color");
+const accentText_1 = require("./accentText");
+const outlineRung_1 = require("./outlineRung");
+/**
+ * Status chips (open / in-progress / resolved …) were authored as `X.500` text on an `X.100`
+ * tint, which measures 3.3-4.4:1 — under the 4.5:1 body-text bar in BOTH modes. The ink is
+ * resolved from the scale's own hue instead of pinned, so every brand and both modes land on the
+ * lightest ink that still passes rather than a hand-copied hex that goes stale.
+ *
+ * `reverseScale` flips the utility ramps in dark, so `X.100` is already a dark tint there and the
+ * ink walks lighter instead of darker — hence the mode argument.
+ */
+function resolveStatusTone(scale, mode) {
+    const bg = scale[100];
+    const inkSeed = mode === "dark" ? scale[300] : scale[700];
+    const edgeSeed = mode === "dark" ? scale[400] : scale[300];
+    return {
+        bg,
+        fg: (0, outlineRung_1.liftToContrast)(inkSeed, bg, mode, accentText_1.AA_NORMAL_TEXT),
+        border: (0, outlineRung_1.liftToContrast)(edgeSeed, bg, mode, outlineRung_1.AA_NON_TEXT),
+    };
+}
+/**
+ * Avatar initials are drawn white on a generated fill. The seed hues in use measured 1.92:1
+ * (`#eab308`), 2.54:1 (`#10b981`) and 3.76:1 (`#ef4444`) — failing in light mode too, not just
+ * dark. Darkening the fill keeps the intended hue and the white-initials look while clearing AA.
+ */
+function resolveAvatarFill(hex, target = accentText_1.AA_NORMAL_TEXT) {
+    // "light" walks downward in lightness — i.e. darken until white ink clears the bar.
+    return (0, outlineRung_1.liftToContrast)(hex, "#ffffff", "light", target);
+}
+/**
+ * Hue set for generated avatars. Values are seeds, not final fills — always pass them through
+ * `resolveAvatarFill` so the white initials stay legible.
+ */
+exports.AVATAR_SEEDS = [
+    "#ef4444",
+    "#f97316",
+    "#eab308",
+    "#22c55e",
+    "#10b981",
+    "#06b6d4",
+    "#3b82f6",
+    "#8b5cf6",
+    "#ec4899",
+];
+/** Stable per-name avatar fill: same name always yields the same accessible colour. */
+function avatarFillFor(seedText) {
+    let hash = 0;
+    for (let i = 0; i < seedText.length; i++) {
+        hash = (hash * 31 + seedText.charCodeAt(i)) >>> 0;
+    }
+    return resolveAvatarFill(exports.AVATAR_SEEDS[hash % exports.AVATAR_SEEDS.length]);
+}
+/** True when `fg` clears the body-text bar on `bg` — exported for consumer assertions. */
+const meetsBodyText = (fg, bg) => (0, color_1.contrastRatio)(fg, bg) >= accentText_1.AA_NORMAL_TEXT;
+exports.meetsBodyText = meetsBodyText;

package/dist/Utils/planExpiry.d.ts

@@ -0,0 +1,19 @@
+export type PlanExpiryInput = string | number | Date | null | undefined;
+/**
+ * Calendar months + leftover days between two dates.
+ * Anchoring on a real month boundary keeps "1 month" honest across 28/30/31-day
+ * months, so Jan 31 → Feb 28 reads as 28 days rather than a whole month.
+ */
+export declare function splitMonthsAndDays(from: Date, to: Date): {
+    months: number;
+    days: number;
+};
+/**
+ * Time left on a plan, compactly: `"3mo left"` once a whole month remains,
+ * `"18d left"` below that. Intended for `UpgradeButton`'s `subtitle`, so it
+ * stays one short line. Returns `""` when there is no usable date or the plan
+ * has already lapsed — an expired plan is a different message, which the
+ * consuming app owns.
+ */
+export declare function formatPlanExpiry(expiryDate: PlanExpiryInput, now?: Date): string;
+//# sourceMappingURL=planExpiry.d.ts.map

package/dist/Utils/planExpiry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"planExpiry.d.ts","sourceRoot":"","sources":["../../src/Utils/planExpiry.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;AAoCxE;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,IAAI,GACP;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAOlC;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,eAAe,EAC3B,GAAG,CAAC,EAAE,IAAI,GACT,MAAM,CAaR"}

package/dist/Utils/planExpiry.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitMonthsAndDays = splitMonthsAndDays;
+exports.formatPlanExpiry = formatPlanExpiry;
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+function toDate(value) {
+    if (value === null || value === undefined || value === "")
+        return null;
+    const date = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+    return isNaN(date.getTime()) ? null : date;
+}
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addCalendarMonths(date, months) {
+    const lastDayOfTarget = new Date(date.getFullYear(), date.getMonth() + months + 1, 0).getDate();
+    return new Date(date.getFullYear(), date.getMonth() + months, Math.min(date.getDate(), lastDayOfTarget));
+}
+function daysBetween(from, to) {
+    return Math.round((to.getTime() - from.getTime()) / MS_PER_DAY);
+}
+/** Compact units (`2mo`, `5d`) — this reads inside a badge subtitle, where
+ * "2 months 5 days left" wraps. */
+function unit(count, suffix) {
+    return `${count}${suffix}`;
+}
+/**
+ * Calendar months + leftover days between two dates.
+ * Anchoring on a real month boundary keeps "1 month" honest across 28/30/31-day
+ * months, so Jan 31 → Feb 28 reads as 28 days rather than a whole month.
+ */
+function splitMonthsAndDays(from, to) {
+    let months = (to.getFullYear() - from.getFullYear()) * 12 +
+        (to.getMonth() - from.getMonth());
+    if (to.getDate() < from.getDate())
+        months -= 1;
+    if (months < 0)
+        months = 0;
+    return { months, days: daysBetween(addCalendarMonths(from, months), to) };
+}
+/**
+ * Time left on a plan, compactly: `"3mo left"` once a whole month remains,
+ * `"18d left"` below that. Intended for `UpgradeButton`'s `subtitle`, so it
+ * stays one short line. Returns `""` when there is no usable date or the plan
+ * has already lapsed — an expired plan is a different message, which the
+ * consuming app owns.
+ */
+function formatPlanExpiry(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const expiryDay = startOfDay(expiry);
+    const today = startOfDay(now !== null && now !== void 0 ? now : new Date());
+    const daysLeft = daysBetween(today, expiryDay);
+    if (daysLeft < 0)
+        return "";
+    if (daysLeft === 0)
+        return "Expires today";
+    const { months, days } = splitMonthsAndDays(today, expiryDay);
+    return months > 0 ? `${unit(months, "mo")} left` : `${unit(days, "d")} left`;
+}

package/dist/index.d.ts

@@ -33,6 +33,7 @@ import { RadioButton, RadioButtonGroup } from "./Components/RadioButton/RadioBut
 import Reorder from "./Components/Reorder/Reorder";
 import Search from "./Components/Search/Search";
 import Select from "./Components/Select/Select";
+import SelectV2 from "./Components/SelectV2/SelectV2";
 import SearchSelect from "./Components/SearchSelect/SearchSelect";
 import SelectSearch from "./Components/SelectSearch/SelectSearch";
 import SideBar from "./Components/SideBar/SideBar";
@@ -77,12 +78,14 @@ import StageProgress from "./Components/StageProgress/StageProgress";
 import StageItem from "./Components/StageProgress/StageItem";
 import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher";
 import UpgradeButton from "./Components/UpgradeButton/UpgradeButton";
+import PlanPill from "./Components/PlanPill/PlanPill";
+import { formatPlanExpiry, splitMonthsAndDays } from "./Utils/planExpiry";
 import UserDetails from "./Components/UserDetails/UserDetails";
 import RolesPermission from "./Components/RolesPermission/RolesPermission";
 import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
 import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
 import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, UpgradeButton, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, UpgradeButton, PlanPill, formatPlanExpiry, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, };
 export default withTheme;
 export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
 export type { WorkspaceWindowProps, WorkspaceWindowState, WorkspaceTrayProps, WorkspaceTrayItem, WorkspaceTrayPreviewProps, } from "./Components/WorkspaceWindow/WorkspaceWindowProps";
@@ -97,8 +100,13 @@ export type { PixelizeThemeProviderProps, ThemeModeContextValue, ThemeSwitcherPr
 export { brandThemes } from "./Theme";
 export { lightPalettes, darkPalettes, palettes, themeNames, } from "./Theme/tokens/brands";
 export { buildDarkPalette } from "./Theme/tokens/builders/buildDarkPalette";
+export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/builders/outlineRung";
+export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveStatusTone, } from "./Theme/tokens/builders/statusTone";
+export type { StatusTone } from "./Theme/tokens/builders/statusTone";
 export type { ColorMode, ResolvedColorMode, ThemeName, PaletteProps, ColorScale, BrandScale, SemanticColors, NamedSurfaces, } from "./Theme/tokens/types";
 export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText";
 export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color";
 export type { Rgb, Hsl } from "./Theme/tokens/builders/color";
+export type { SelectV2Props, SelectV2Size, OptionProp as SelectV2Option } from "./Components/SelectV2/SelectV2Props";
+export type { PlanPillProps, PlanPillTone } from "./Components/PlanPill/PlanPillProps";
 //# sourceMappingURL=index.d.ts.map