pixelize-design-library 2.4.1-beta.13 → 2.4.1-beta.15

package/dist/Components/AppearanceSettings/AppearanceSettings.d.ts

@@ -0,0 +1,4 @@
+import type { AppearanceSettingsProps } from "./AppearanceSettingsProps";
+export declare const AppearanceSettings: ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand, showColorMode, showFontSize, size, labels, }: AppearanceSettingsProps) => import("react/jsx-runtime").JSX.Element;
+export default AppearanceSettings;
+//# sourceMappingURL=AppearanceSettings.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceSettings.d.ts","sourceRoot":"","sources":["../../../src/Components/AppearanceSettings/AppearanceSettings.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAwBzE,eAAO,MAAM,kBAAkB,GAAI,6GAUhC,uBAAuB,4CA0EzB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/Components/AppearanceSettings/AppearanceSettings.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppearanceSettings = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const Theme_1 = require("../../Theme");
+const provider_1 = require("../../Theme/provider");
+const fontSize_1 = require("../../Theme/provider/fontSize");
+const SelectV2_1 = __importDefault(require("../SelectV2/SelectV2"));
+const FieldLabel = ({ children }) => ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: "medium", color: "gray.600", mb: 2, children: children }));
+const brandSwatch = (name) => {
+    var _a, _b, _c;
+    const brand = Theme_1.ThemesList[name];
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { w: "14px", h: "14px", borderRadius: "full", bg: (_c = (_b = (_a = brand === null || brand === void 0 ? void 0 : brand.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "gray.300", border: "1px solid", borderColor: "whiteAlpha.300" }));
+};
+const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
+    var _a, _b, _c;
+    const brandOptions = (0, react_1.useMemo)(() => Object.keys(Theme_1.ThemesList).map((name) => ({
+        id: name,
+        label: name.charAt(0).toUpperCase() + name.slice(1),
+        icon: brandSwatch(name),
+    })), []);
+    const themeLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.theme) !== null && _a !== void 0 ? _a : "Theme";
+    const colorModeLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.colorMode) !== null && _b !== void 0 ? _b : "Color mode";
+    const fontSizeLabel = (_c = labels === null || labels === void 0 ? void 0 : labels.fontSize) !== null && _c !== void 0 ? _c : "Font Size";
+    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [showBrand && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: themeLabel }), (0, jsx_runtime_1.jsx)(SelectV2_1.default, { options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
+                            if (!option)
+                                return;
+                            onBrandChange === null || onBrandChange === void 0 ? void 0 : onBrandChange(String(option.id));
+                        } })] })), showColorMode && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: colorModeLabel }), (0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "appearance-mode-switcher", children: (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: fontSizeLabel }), (0, jsx_runtime_1.jsx)(SelectV2_1.default, { options: fontSize_1.FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
+                        // Each row previews the size it sets, so the list is self-explaining.
+                        renderOption: (option) => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", style: { fontSize: String(option.id) }, children: option.label })), onChange: (option) => {
+                            if (!option)
+                                return;
+                            onFontSizeChange === null || onFontSizeChange === void 0 ? void 0 : onFontSizeChange(String(option.id));
+                        } })] }))] }));
+};
+exports.AppearanceSettings = AppearanceSettings;
+exports.default = exports.AppearanceSettings;

package/dist/Components/AppearanceSettings/AppearanceSettingsProps.d.ts

@@ -0,0 +1,19 @@
+import type { SelectV2Size } from "../SelectV2/SelectV2Props";
+export type AppearanceSettingsLabels = {
+    theme?: string;
+    colorMode?: string;
+    fontSize?: string;
+};
+export type AppearanceSettingsProps = {
+    brand?: string;
+    fontSize?: string;
+    onBrandChange?: (brand: string) => void;
+    onFontSizeChange?: (fontSize: string) => void;
+    showBrand?: boolean;
+    showColorMode?: boolean;
+    showFontSize?: boolean;
+    size?: SelectV2Size;
+    /** Pass translated strings; the library ships English defaults. */
+    labels?: AppearanceSettingsLabels;
+};
+//# sourceMappingURL=AppearanceSettingsProps.d.ts.map

package/dist/Components/AppearanceSettings/AppearanceSettingsProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppearanceSettingsProps.d.ts","sourceRoot":"","sources":["../../../src/Components/AppearanceSettings/AppearanceSettingsProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,wBAAwB,CAAC;CACnC,CAAC"}

package/dist/Components/AppearanceSettings/AppearanceSettingsProps.js

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

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;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,2CAuLb"}
+{"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+Lb"}

package/dist/Components/NavigationBar/NavigationBar.js

@@ -30,6 +30,8 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
     const menuItemStyle = {
         bg: "transparent",
         borderRadius: "7px",
+        // Chakra's MenuItem is width:100%, so mx added 12px and forced a horizontal scrollbar.
+        w: "calc(100% - 0.75rem)",
         mx: "0.375rem",
         px: "0.625rem",
         py: "0.5rem",
@@ -42,19 +44,21 @@ function NavBar({ userAvathar, userName, userRole, navMenu, moreIcon, handleNavO
         _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, { as: "button", type: "button", 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", "aria-expanded": !!sideBarToggole, ...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, as: "button", type: "button", "aria-label": "Go back", 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, 
+    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, { as: "button", type: "button", 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", "aria-expanded": !!sideBarToggole, ...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, as: "button", type: "button", "aria-label": "Go back", 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", 
+                                        // Without a cap one long title stretches the whole dropdown; titles truncate instead.
+                                        maxW: "18rem", 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: 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}`));
+                                        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", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                                        var _a, _b, _c, _d;
+                                                        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, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
                                                     }) }), (0, jsx_runtime_1.jsx)(react_1.MenuDivider, { borderColor: "blackAlpha.100" }), (0, jsx_runtime_1.jsxs)(react_1.MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
                                                         color: "red.500",
                                                         _hover: { bg: "red.50", color: "red.600" },
                                                         _focus: { bg: "red.50", color: "red.600" },
                                                         _active: { bg: "red.50", color: "red.600" },
-                                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { children: logoutText })] })] }) })] })] }) })] }) }));
+                                                    }, children: [(0, jsx_runtime_1.jsx)(react_1.Box, { display: "flex", alignItems: "center", flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { size: 16 }) }), (0, jsx_runtime_1.jsx)(react_1.Box, { minW: 0, isTruncated: true, title: String(logoutText !== null && logoutText !== void 0 ? logoutText : ""), children: logoutText })] })] }) })] })] }) })] }) }));
 }

package/dist/Theme/provider/PixelizeThemeProvider.js

@@ -51,9 +51,9 @@ exports.ThemeModeContext = (0, react_1.createContext)(undefined);
 const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, 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
-    // the effect below, so hydration always matches.
-    const [systemMode, setSystemMode] = (0, react_1.useState)("light");
+    // Read synchronously: seeding "light" made every `system` user on a dark OS paint a light
+    // frame before the effect corrected it. SSR-safe — returns "light" with no window.
+    const [systemMode, setSystemMode] = (0, react_1.useState)(colorModeStorage_1.getSystemColorMode);
     (0, react_1.useEffect)(() => {
         setSystemMode((0, colorModeStorage_1.getSystemColorMode)());
         return (0, colorModeStorage_1.subscribeToSystemColorMode)(setSystemMode);
@@ -112,7 +112,7 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
      * 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)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
     // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
@@ -159,7 +159,7 @@ const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onB
      * unchanged (so a light-only app is byte-identical to before). Also mirror the mode to
      * `data-mode` for consumers that want to hook their own dark CSS.
      */
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         var _a, _b, _c, _d, _e, _f, _g;
         const root = document.documentElement;
         root.dataset.mode = resolvedMode;

package/dist/Theme/provider/fontSize.d.ts

@@ -0,0 +1,10 @@
+export type FontSizeOption = {
+    id: string;
+    label: string;
+};
+export declare const DEFAULT_FONT_SIZE = "100%";
+export declare const FONT_SIZE_OPTIONS: FontSizeOption[];
+export declare const isFontSize: (value: string | null | undefined) => value is string;
+export declare const resolveFontSize: (value: string | null | undefined) => string;
+export declare const useFontSizeSync: (fontSize: string | null | undefined) => void;
+//# sourceMappingURL=fontSize.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fontSize.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/fontSize.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,iBAAiB,SAAS,CAAC;AAExC,eAAO,MAAM,iBAAiB,EAAE,cAAc,EAO7C,CAAC;AAGF,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,GAAG,IAAI,GAAG,SAAS,KAAG,KAAK,IAAI,MACH,CAAC;AAErE,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,GAAG,IAAI,GAAG,SAAS,WACjB,CAAC;AAEhD,eAAO,MAAM,eAAe,GAAI,UAAU,MAAM,GAAG,IAAI,GAAG,SAAS,SAIlE,CAAC"}

package/dist/Theme/provider/fontSize.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = void 0;
+const react_1 = require("react");
+exports.DEFAULT_FONT_SIZE = "100%";
+exports.FONT_SIZE_OPTIONS = [
+    { id: "80%", label: "Small" },
+    { id: "90%", label: "Medium Small" },
+    { id: exports.DEFAULT_FONT_SIZE, label: "Default" },
+    { id: "110%", label: "Medium Large" },
+    { id: "120%", label: "Large" },
+    { id: "130%", label: "Extra Large" },
+];
+// The value lands on html { font-size }, so a junk stored value must not reach it.
+const isFontSize = (value) => !!value && exports.FONT_SIZE_OPTIONS.some((option) => option.id === value);
+exports.isFontSize = isFontSize;
+const resolveFontSize = (value) => (0, exports.isFontSize)(value) ? value : exports.DEFAULT_FONT_SIZE;
+exports.resolveFontSize = resolveFontSize;
+const useFontSizeSync = (fontSize) => {
+    (0, react_1.useEffect)(() => {
+        document.documentElement.style.fontSize = (0, exports.resolveFontSize)(fontSize);
+    }, [fontSize]);
+};
+exports.useFontSizeSync = useFontSizeSync;

package/dist/Theme/provider/index.d.ts

@@ -3,4 +3,6 @@ export type { PixelizeThemeProviderProps, ThemeModeContextValue, } from "./Pixel
 export { useThemeMode } from "./useThemeMode";
 export { ThemeSwitcher } from "./ThemeSwitcher";
 export type { ThemeSwitcherProps } from "./ThemeSwitcher";
+export { DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./fontSize";
+export type { FontSizeOption } from "./fontSize";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Theme/provider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,YAAY,EACV,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EACV,eAAe,EACf,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/Theme/provider/index.js

@@ -1,9 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = void 0;
+exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = void 0;
 var PixelizeThemeProvider_1 = require("./PixelizeThemeProvider");
 Object.defineProperty(exports, "PixelizeThemeProvider", { enumerable: true, get: function () { return PixelizeThemeProvider_1.PixelizeThemeProvider; } });
 var useThemeMode_1 = require("./useThemeMode");
 Object.defineProperty(exports, "useThemeMode", { enumerable: true, get: function () { return useThemeMode_1.useThemeMode; } });
 var ThemeSwitcher_1 = require("./ThemeSwitcher");
 Object.defineProperty(exports, "ThemeSwitcher", { enumerable: true, get: function () { return ThemeSwitcher_1.ThemeSwitcher; } });
+var fontSize_1 = require("./fontSize");
+Object.defineProperty(exports, "DEFAULT_FONT_SIZE", { enumerable: true, get: function () { return fontSize_1.DEFAULT_FONT_SIZE; } });
+Object.defineProperty(exports, "FONT_SIZE_OPTIONS", { enumerable: true, get: function () { return fontSize_1.FONT_SIZE_OPTIONS; } });
+Object.defineProperty(exports, "isFontSize", { enumerable: true, get: function () { return fontSize_1.isFontSize; } });
+Object.defineProperty(exports, "resolveFontSize", { enumerable: true, get: function () { return fontSize_1.resolveFontSize; } });
+Object.defineProperty(exports, "useFontSizeSync", { enumerable: true, get: function () { return fontSize_1.useFontSizeSync; } });

package/dist/esm/Components/AppearanceSettings/AppearanceSettings.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, Text, VStack } from "@chakra-ui/react";
+import { ThemesList } from "../../Theme";
+import { ThemeSwitcher } from "../../Theme/provider";
+import { FONT_SIZE_OPTIONS } from "../../Theme/provider/fontSize";
+import SelectV2 from "../SelectV2/SelectV2";
+const FieldLabel = ({ children }) => (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: "gray.600", mb: 2, children: children }));
+const brandSwatch = (name) => {
+    var _a, _b, _c;
+    const brand = ThemesList[name];
+    return (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: (_c = (_b = (_a = brand === null || brand === void 0 ? void 0 : brand.colors) === null || _a === void 0 ? void 0 : _a.primary) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "gray.300", border: "1px solid", borderColor: "whiteAlpha.300" }));
+};
+export const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
+    var _a, _b, _c;
+    const brandOptions = useMemo(() => Object.keys(ThemesList).map((name) => ({
+        id: name,
+        label: name.charAt(0).toUpperCase() + name.slice(1),
+        icon: brandSwatch(name),
+    })), []);
+    const themeLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.theme) !== null && _a !== void 0 ? _a : "Theme";
+    const colorModeLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.colorMode) !== null && _b !== void 0 ? _b : "Color mode";
+    const fontSizeLabel = (_c = labels === null || labels === void 0 ? void 0 : labels.fontSize) !== null && _c !== void 0 ? _c : "Font Size";
+    return (_jsxs(VStack, { align: "stretch", spacing: 4, children: [showBrand && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: themeLabel }), _jsx(SelectV2, { options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
+                            if (!option)
+                                return;
+                            onBrandChange === null || onBrandChange === void 0 ? void 0 : onBrandChange(String(option.id));
+                        } })] })), showColorMode && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: colorModeLabel }), _jsx(Box, { "data-testid": "appearance-mode-switcher", children: _jsx(ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && (_jsxs(Box, { children: [_jsx(FieldLabel, { children: fontSizeLabel }), _jsx(SelectV2, { options: FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
+                        // Each row previews the size it sets, so the list is self-explaining.
+                        renderOption: (option) => (_jsx(Text, { as: "span", style: { fontSize: String(option.id) }, children: option.label })), onChange: (option) => {
+                            if (!option)
+                                return;
+                            onFontSizeChange === null || onFontSizeChange === void 0 ? void 0 : onFontSizeChange(String(option.id));
+                        } })] }))] }));
+};
+export default AppearanceSettings;

package/dist/esm/Components/AppearanceSettings/AppearanceSettingsProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/NavigationBar/NavigationBar.js

@@ -27,6 +27,8 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
     const menuItemStyle = {
         bg: "transparent",
         borderRadius: "7px",
+        // Chakra's MenuItem is width:100%, so mx added 12px and forced a horizontal scrollbar.
+        w: "calc(100% - 0.75rem)",
         mx: "0.375rem",
         px: "0.625rem",
         py: "0.5rem",
@@ -39,19 +41,21 @@ export default function NavBar({ userAvathar, userName, userRole, navMenu, moreI
         _focus: { bg: menuHoverBg, color: theme.colors.primary[700] },
         _active: { bg: menuHoverBg, color: theme.colors.primary[700] },
     };
-    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(Box, { as: "button", type: "button", 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", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", 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: _jsx(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) && (_jsx(Text, { color: 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 }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", bg: theme.colors.backgroundColor.light, 
+    return (_jsx(Box, { bg: theme.colors.backgroundColor.light, px: 4, borderBottom: "1px solid", borderColor: "blackAlpha.100", children: _jsxs(Flex, { h: 16, alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", gap: 1.5, alignItems: "center", children: [_jsx(Box, { as: "button", type: "button", 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", "aria-expanded": !!sideBarToggole, ...iconButtonStyle, children: sideBarToggole ? (_jsx(PanelLeftClose, { size: "1.25rem" })) : (_jsx(PanelRightClose, { size: "1.25rem" })) }), (navigationBarText === null || navigationBarText === void 0 ? void 0 : navigationBarText.onIconClick) && (_jsx(Box, { ...iconButtonStyle, as: "button", type: "button", "aria-label": "Go back", 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: _jsx(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) && (_jsx(Text, { color: 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 }))] }), _jsx(Flex, { minW: 0, flexShrink: 1, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 4, minW: 0, children: [moreIcon && (_jsx(Box, { display: "flex", alignItems: "center", minW: 0, children: moreIcon })), _jsxs(Menu, { children: [_jsx(MenuButton, { as: Button, rounded: "full", variant: "link", cursor: "pointer", minW: 0, flexShrink: 0, children: _jsx(Avatar, { size: "sm", name: userName, src: userAvathar }) }), _jsx(MenuList, { alignItems: "center", zIndex: 5, p: 0, py: "0.375rem", 
+                                        // Without a cap one long title stretches the whole dropdown; titles truncate instead.
+                                        maxW: "18rem", 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: theme.colors.text[900], overflow: "hidden", children: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Center, { pt: 4, pb: 2, children: _jsx(Avatar, { size: "xl", name: userName, src: userAvathar }) }), _jsxs(Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && (_jsx(Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), _jsx(MenuDivider, { borderColor: "blackAlpha.100" }), _jsx(Box, { flex: 1, overflowY: "auto", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
-                                                        var _a, _b, _c;
-                                                        return (_jsxs(MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), _jsx(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}`));
+                                        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: _jsxs(Box, { display: "flex", flexDirection: "column", maxH: "90vh", children: [_jsx(Center, { pt: 4, pb: 2, children: _jsx(Avatar, { size: "xl", name: userName, src: userAvathar }) }), _jsxs(Center, { flexDirection: "column", gap: "0.125rem", pb: 2, px: 4, children: [_jsx(Text, { fontWeight: 600, fontSize: "14px", color: theme.colors.text[900], isTruncated: true, maxW: "100%", children: userName }), userRole && (_jsx(Text, { fontSize: "11px", color: theme.colors.text[500], isTruncated: true, maxW: "100%", children: userRole }))] }), _jsx(MenuDivider, { borderColor: "blackAlpha.100" }), _jsx(Box, { flex: 1, overflowY: "auto", overflowX: "hidden", children: navMenu === null || navMenu === void 0 ? void 0 : navMenu.map((menu, idx) => {
+                                                        var _a, _b, _c, _d;
+                                                        return (_jsxs(MenuItem, { onClick: () => handleNavOnClick(menu.url), sx: menuItemStyle, children: [menu.icon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, sx: { "& svg": { width: "16px", height: "16px" } }, children: menu === null || menu === void 0 ? void 0 : menu.icon })), _jsx(Box, { minW: 0, isTruncated: true, title: String((_a = menu.title) !== null && _a !== void 0 ? _a : ""), children: menu.title })] }, `${String((_d = (_c = (_b = menu.id) !== null && _b !== void 0 ? _b : menu.url) !== null && _c !== void 0 ? _c : menu.title) !== null && _d !== void 0 ? _d : idx)}-${idx}`));
                                                     }) }), _jsx(MenuDivider, { borderColor: "blackAlpha.100" }), _jsxs(MenuItem, { onClick: handleLogout, sx: {
                                                         ...menuItemStyle,
                                                         color: "red.500",
                                                         _hover: { bg: "red.50", color: "red.600" },
                                                         _focus: { bg: "red.50", color: "red.600" },
                                                         _active: { bg: "red.50", color: "red.600" },
-                                                    }, children: [_jsx(Box, { display: "flex", alignItems: "center", children: _jsx(LogOut, { size: 16 }) }), _jsx(Box, { children: logoutText })] })] }) })] })] }) })] }) }));
+                                                    }, children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: _jsx(LogOut, { size: 16 }) }), _jsx(Box, { minW: 0, isTruncated: true, title: String(logoutText !== null && logoutText !== void 0 ? logoutText : ""), children: logoutText })] })] }) })] })] }) })] }) }));
 }

package/dist/esm/Theme/provider/PixelizeThemeProvider.js

@@ -45,9 +45,9 @@ export const ThemeModeContext = createContext(undefined);
 export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRAND, onBrandChange, defaultMode = DEFAULT_MODE, onModeChange, storageKey = DEFAULT_STORAGE_KEY, disablePersistence = false, themeOverrides, }) => {
     const [mode, setModeState] = useState(defaultMode);
     const [brand, setBrandState] = useState(brandProp);
-    // Deterministic on the server and on the first client render — the real OS value lands in
-    // the effect below, so hydration always matches.
-    const [systemMode, setSystemMode] = useState("light");
+    // Read synchronously: seeding "light" made every `system` user on a dark OS paint a light
+    // frame before the effect corrected it. SSR-safe — returns "light" with no window.
+    const [systemMode, setSystemMode] = useState(getSystemColorMode);
     useEffect(() => {
         setSystemMode(getSystemColorMode());
         return subscribeToSystemColorMode(setSystemMode);
@@ -106,7 +106,7 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
      * page. Scoped to this provider (not a global stylesheet) so `withTheme` consumers — deliberately
      * light-only, see the module doc's "Key rules" — are untouched.
      */
-    useEffect(() => {
+    useLayoutEffect(() => {
         document.documentElement.style.colorScheme = resolvedMode;
     }, [resolvedMode]);
     // Held in refs so a caller's inline arrow never re-creates `setMode`/`setBrand`, which would
@@ -153,7 +153,7 @@ export const PixelizeThemeProvider = ({ children, brand: brandProp = DEFAULT_BRA
      * unchanged (so a light-only app is byte-identical to before). Also mirror the mode to
      * `data-mode` for consumers that want to hook their own dark CSS.
      */
-    useEffect(() => {
+    useLayoutEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g;
         const root = document.documentElement;
         root.dataset.mode = resolvedMode;

package/dist/esm/Theme/provider/fontSize.js

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+export const DEFAULT_FONT_SIZE = "100%";
+export const FONT_SIZE_OPTIONS = [
+    { id: "80%", label: "Small" },
+    { id: "90%", label: "Medium Small" },
+    { id: DEFAULT_FONT_SIZE, label: "Default" },
+    { id: "110%", label: "Medium Large" },
+    { id: "120%", label: "Large" },
+    { id: "130%", label: "Extra Large" },
+];
+// The value lands on html { font-size }, so a junk stored value must not reach it.
+export const isFontSize = (value) => !!value && FONT_SIZE_OPTIONS.some((option) => option.id === value);
+export const resolveFontSize = (value) => isFontSize(value) ? value : DEFAULT_FONT_SIZE;
+export const useFontSizeSync = (fontSize) => {
+    useEffect(() => {
+        document.documentElement.style.fontSize = resolveFontSize(fontSize);
+    }, [fontSize]);
+};

package/dist/esm/Theme/provider/index.js

@@ -1,3 +1,4 @@
 export { PixelizeThemeProvider } from "./PixelizeThemeProvider";
 export { useThemeMode } from "./useThemeMode";
 export { ThemeSwitcher } from "./ThemeSwitcher";
+export { DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./fontSize";

package/dist/esm/index.js

@@ -110,7 +110,8 @@ export default withTheme;
 // Opt-in: `withTheme` is unchanged and stays light-only, so existing apps render
 // exactly as before. Wrap an app in `PixelizeThemeProvider` to get light/dark/system.
 // ---------------------------------------------------------------------------
-export { PixelizeThemeProvider, useThemeMode, ThemeSwitcher, } from "./Theme/provider";
+export { PixelizeThemeProvider, useThemeMode, ThemeSwitcher, DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./Theme/provider";
+export { AppearanceSettings } from "./Components/AppearanceSettings/AppearanceSettings";
 /** Light + dark Chakra theme per brand. `ThemesList` remains the light-only list. */
 export { brandThemes } from "./Theme";
 // Pure, platform-agnostic tokens — also consumed by the Pixelize mobile design library.

package/dist/index.d.ts

@@ -98,8 +98,10 @@ export type { CustomModulesTableProps, CustomModulesTableLabels, ModuleItem, Upd
 export type { SignInActivityTableProps, SignInActivityLabels, SignInDevice, } from "./Components/SignInActivityTable/SignInActivityTableProps";
 export type { OrganizationDetailsProps, OrganizationDetailsLabels, OrganizationItem, CreateOrgFormValues, } from "./Components/OrganizationDetails/OrganizationDetailsProps";
 export type { SidebarPrefs, UseSidebarPrefsOptions, UseSidebarPrefsResult, } from "./Hooks/useSidebarPrefs";
-export { PixelizeThemeProvider, useThemeMode, ThemeSwitcher, } from "./Theme/provider";
-export type { PixelizeThemeProviderProps, ThemeModeContextValue, ThemeSwitcherProps, } from "./Theme/provider";
+export { PixelizeThemeProvider, useThemeMode, ThemeSwitcher, DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./Theme/provider";
+export type { PixelizeThemeProviderProps, ThemeModeContextValue, ThemeSwitcherProps, FontSizeOption, } from "./Theme/provider";
+export { AppearanceSettings } from "./Components/AppearanceSettings/AppearanceSettings";
+export type { AppearanceSettingsProps, AppearanceSettingsLabels, } from "./Components/AppearanceSettings/AppearanceSettingsProps";
 /** Light + dark Chakra theme per brand. `ThemesList` remains the light-only list. */
 export { brandThemes } from "./Theme";
 export { lightPalettes, darkPalettes, palettes, themeNames, } from "./Theme/tokens/brands";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomModulesTable = exports.RolesPermission = exports.UserDetails = exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
 exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = void 0;
-exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = void 0;
+exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -252,6 +252,13 @@ var provider_1 = require("./Theme/provider");
 Object.defineProperty(exports, "PixelizeThemeProvider", { enumerable: true, get: function () { return provider_1.PixelizeThemeProvider; } });
 Object.defineProperty(exports, "useThemeMode", { enumerable: true, get: function () { return provider_1.useThemeMode; } });
 Object.defineProperty(exports, "ThemeSwitcher", { enumerable: true, get: function () { return provider_1.ThemeSwitcher; } });
+Object.defineProperty(exports, "DEFAULT_FONT_SIZE", { enumerable: true, get: function () { return provider_1.DEFAULT_FONT_SIZE; } });
+Object.defineProperty(exports, "FONT_SIZE_OPTIONS", { enumerable: true, get: function () { return provider_1.FONT_SIZE_OPTIONS; } });
+Object.defineProperty(exports, "isFontSize", { enumerable: true, get: function () { return provider_1.isFontSize; } });
+Object.defineProperty(exports, "resolveFontSize", { enumerable: true, get: function () { return provider_1.resolveFontSize; } });
+Object.defineProperty(exports, "useFontSizeSync", { enumerable: true, get: function () { return provider_1.useFontSizeSync; } });
+var AppearanceSettings_1 = require("./Components/AppearanceSettings/AppearanceSettings");
+Object.defineProperty(exports, "AppearanceSettings", { enumerable: true, get: function () { return AppearanceSettings_1.AppearanceSettings; } });
 /** Light + dark Chakra theme per brand. `ThemesList` remains the light-only list. */
 var Theme_2 = require("./Theme");
 Object.defineProperty(exports, "brandThemes", { enumerable: true, get: function () { return Theme_2.brandThemes; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.1-beta.13",
+  "version": "2.4.1-beta.15",
   "private": false,
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/App.d.ts

@@ -1,4 +0,0 @@
-import "./global.css";
-declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;
-//# sourceMappingURL=App.d.ts.map