pixelize-design-library 2.4.2-beta.0 → 2.4.2-beta.10

package/dist/Theme/tokens/types.d.ts

@@ -30,12 +30,10 @@ export type OpacityScale = {
 export type BrandScale = ColorScale & {
     opacity: OpacityScale;
 };
-export type SemanticColors = {
-    success: ColorScale;
-    error: ColorScale;
-    warning: ColorScale;
-    info: ColorScale;
-};
+export type SemanticTone = "success" | "error" | "warning" | "info";
+export type SemanticColors = Record<SemanticTone, ColorScale>;
+/** Each tone as TEXT on the canvas, resolved to 4.5:1. The `[500]` rung is a fill, never ink. */
+export type SemanticTextTokens = Record<SemanticTone, string>;
 /** Named (non-numeric) surface keys. Elevation order inverts between light and dark. */
 export type NamedSurfaces = {
     main: string;
@@ -51,6 +49,22 @@ export type NamedSurfaces = {
     base: string;
     tableHeader: string;
 };
+/** The permanently-dark rail. Accents are derived from the light primary, never hand-written. */
+export type SidebarTokens = {
+    background: ColorScale;
+    /** Icon on the active surface, resolved to 3:1. */
+    activeIcon: string;
+    /** Label on the active surface, resolved to 4.5:1. */
+    activeLabel: string;
+    /** Flyout/menu surface raised off the rail. `background[200]` is a mid-grey on 6 of 9 brands. */
+    elevated: string;
+    /** Secondary icon on the rail, resolved to 3:1. Replaces an opacity guess at the call site. */
+    mutedIcon: string;
+    /** Secondary label on the rail, resolved to 4.5:1. `textMuted` is canvas-relative, not rail. */
+    mutedLabel: string;
+    /** Status ink resolved against the RAIL. `semanticText` is canvas-relative, not rail. */
+    semanticText: SemanticTextTokens;
+};
 export type BoxShadowTokens = {
     primary: string;
     error: string;
@@ -88,9 +102,7 @@ export type PaletteProps = {
     header: ColorScale;
     placeholder: ColorScale;
     boxShadow: BoxShadowTokens;
-    sidebar: {
-        background: ColorScale;
-    };
+    sidebar: SidebarTokens;
     boxborder: ColorScale;
     border: ColorScale;
     table: {
@@ -101,12 +113,28 @@ export type PaletteProps = {
      * Accent color for accent-COLORED TEXT on the canvas. Distinct from `primary[500]`, which
      * must stay dark enough to carry a white label on a filled button and therefore cannot also
      * be light enough to read as text on a dark canvas. Derived per brand (see `pickAccentText`).
-     *
-     * Optional so that a consumer who hand-builds a palette object against this type keeps
-     * compiling; every shipped brand palette always populates it.
      */
-    accentText?: string;
+    accentText: string;
+    semanticText: SemanticTextTokens;
+    /** Secondary text on the canvas, resolved to 4.5:1 in both modes. */
+    textMuted: string;
+    /** Ink for a `primary[500]`-FILLED surface — never an ink on the canvas. */
+    onPrimary: string;
+    /** Ink for a `semantic[tone][500]`-FILLED surface — never an ink on the canvas. */
+    onSemantic: SemanticTextTokens;
+};
+/** What a brand writes by hand; every token required, so a gap is a compile error. */
+/** Derived tokens are excluded — `finalizeLightPalette` resolves them per brand. */
+export type BrandPaletteSource = Omit<PaletteProps, "accentText" | "textMuted" | "semanticText" | "sidebar" | "onPrimary" | "onSemantic"> & {
+    sidebar: {
+        background: ColorScale;
+    };
 };
+/** Utility scales carrying no brand identity. The only tokens a brand may inherit. */
+export type NeutralPaletteKey = "transparent" | "black" | "white" | "semantic" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink";
+export type NeutralPaletteTokens = Pick<BrandPaletteSource, NeutralPaletteKey>;
+/** Everything a brand must state itself — never by spreading another brand. */
+export type BrandIdentityTokens = Omit<BrandPaletteSource, NeutralPaletteKey>;
 /** Brand identities shipped by the library. */
 export type ThemeName = "lavender" | "meadow" | "radiant" | "skyline" | "slate" | "emerald" | "rosewood" | "storefront" | "zinc";
 /** User-selectable color mode. `system` follows the OS setting. */

package/dist/Theme/useCustomTheme.js

@@ -2,7 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCustomTheme = void 0;
 const react_1 = require("@chakra-ui/react");
+const assertPalette_1 = require("./assertPalette");
 const useCustomTheme = () => {
-    return (0, react_1.useTheme)();
+    const theme = (0, react_1.useTheme)();
+    (0, assertPalette_1.assertPixelizePalette)(theme);
+    return theme;
 };
 exports.useCustomTheme = useCustomTheme;

package/dist/Utils/table.d.ts

@@ -18,13 +18,7 @@ export type TablePaletteColor = {
 };
 /** Deterministic, theme-aware color palette for groups + status pills. */
 export declare function buildTablePalette(theme: CustomThemeProps): TablePaletteColor[];
-/**
- * Pick a deterministic palette color for a value, with optional override hex.
- *
- * `theme` is optional so existing callers that don't have it keep compiling — when omitted,
- * `onSolid` falls back to the mode-stable absolutes ("#FFFFFF"/"#000000", same value
- * `theme.colors.white`/`black` resolve to for every brand) instead of going undefined.
- */
+/** Pick a deterministic palette color for a value, with optional consumer override hex. */
 export declare function pickTableColor(value: string | number, palette: TablePaletteColor[], override?: string, theme?: CustomThemeProps): TablePaletteColor;
 export type TableGroup = {
     value: string | number;

package/dist/Utils/table.js

@@ -45,6 +45,7 @@ exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+const statusTone_1 = require("../Theme/tokens/builders/statusTone");
 // Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
 // collator is orders of magnitude dearer than using one.
 const COLLATOR = new Intl.Collator(undefined, {
@@ -98,33 +99,31 @@ function SortMultiColumnData(data, sortConfig) {
     });
 }
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
-const FALLBACK_SOLID = "#8B3FC8";
 /** Deterministic, theme-aware color palette for groups + status pills. */
 function buildTablePalette(theme) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const c = (_a = theme === null || theme === void 0 ? void 0 : theme.colors) !== null && _a !== void 0 ? _a : {};
-    const white = c.white || "#FFFFFF";
-    const black = c.black || "#000000";
-    const bases = [
-        (_b = c.primary) === null || _b === void 0 ? void 0 : _b[500],
-        (_d = (_c = c.semantic) === null || _c === void 0 ? void 0 : _c.success) === null || _d === void 0 ? void 0 : _d[500],
-        (_f = (_e = c.semantic) === null || _e === void 0 ? void 0 : _e.info) === null || _f === void 0 ? void 0 : _f[500],
-        (_h = (_g = c.semantic) === null || _g === void 0 ? void 0 : _g.warning) === null || _h === void 0 ? void 0 : _h[500],
-        (_j = c.teal) === null || _j === void 0 ? void 0 : _j[500],
-        (_k = c.blue) === null || _k === void 0 ? void 0 : _k[500],
-        (_l = c.pink) === null || _l === void 0 ? void 0 : _l[500],
-        (_o = (_m = c.semantic) === null || _m === void 0 ? void 0 : _m.error) === null || _o === void 0 ? void 0 : _o[500],
-        (_p = c.orange) === null || _p === void 0 ? void 0 : _p[500],
-        (_q = c.purple) === null || _q === void 0 ? void 0 : _q[500],
+    const c = theme.colors;
+    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
+    const scales = [
+        c.primary,
+        c.semantic.success,
+        c.semantic.info,
+        c.semantic.warning,
+        c.teal,
+        c.blue,
+        c.pink,
+        c.semantic.error,
+        c.orange,
+        c.purple,
     ];
-    const list = bases.filter(Boolean);
-    const fallback = [FALLBACK_SOLID];
-    return (list.length ? list : fallback).map((solid) => ({
-        solid,
-        soft: withAlpha(solid, "22"),
-        text: solid,
-        onSolid: (0, accentText_1.onFilled)(solid, white, black),
-    }));
+    return scales.map((scale) => {
+        const tone = (0, statusTone_1.resolveStatusTone)(scale, mode);
+        return {
+            solid: scale[500],
+            soft: tone.bg,
+            text: tone.fg,
+            onSolid: (0, accentText_1.onFilled)(scale[500], c.white, c.black),
+        };
+    });
 }
 const hashKey = (value) => {
     const s = String(value);
@@ -133,22 +132,15 @@ const hashKey = (value) => {
         h = (h * 31 + s.charCodeAt(i)) >>> 0;
     return h;
 };
-/**
- * Pick a deterministic palette color for a value, with optional override hex.
- *
- * `theme` is optional so existing callers that don't have it keep compiling — when omitted,
- * `onSolid` falls back to the mode-stable absolutes ("#FFFFFF"/"#000000", same value
- * `theme.colors.white`/`black` resolve to for every brand) instead of going undefined.
- */
+/** Pick a deterministic palette color for a value, with optional consumer override hex. */
 function pickTableColor(value, palette, override, theme) {
-    var _a, _b;
-    const white = ((_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.white) || "#FFFFFF";
-    const black = ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.black) || "#000000";
+    const white = theme ? theme.colors.white : accentText_1.DEFAULT_WHITE;
+    const black = theme ? theme.colors.black : accentText_1.DEFAULT_BLACK;
     if (override) {
         return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: (0, accentText_1.onFilled)(override, white, black) };
     }
     if (!palette.length) {
-        return { solid: FALLBACK_SOLID, soft: withAlpha(FALLBACK_SOLID, "22"), text: FALLBACK_SOLID, onSolid: (0, accentText_1.onFilled)(FALLBACK_SOLID, white, black) };
+        throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");
     }
     return palette[hashKey(value) % palette.length];
 }

package/dist/esm/Components/Accordion/Accordion.js

@@ -3,31 +3,29 @@ import { useMemo } from "react";
 import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, AccordionPanel, Box, Flex, } from "@chakra-ui/react";
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_CANVAS, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { getAccordionHoverColors } from "./accordionColors.js";
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const theme = useCustomTheme();
-    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
-    const isDark = isDarkCanvas((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : DEFAULT_CANVAS);
-    const border = (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[200];
-    const headingColor = (_h = (_g = c.text) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[800];
-    const bodyColor = (_l = (_k = c.text) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : (_m = c.gray) === null || _m === void 0 ? void 0 : _m[600];
-    const { expandedBg, softHover } = useMemo(() => { var _a; return getAccordionHoverColors((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
+    const { colors } = useCustomTheme();
+    const isDark = isDarkCanvas(colors.backgroundColor.main);
+    const border = colors.boxborder[200];
+    const headingColor = colors.text[800];
+    const bodyColor = colors.text[600];
+    const { expandedBg, softHover } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
-            var _a, _b, _c, _d, _e, _f, _g;
-            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : (_c = c.backgroundColor) === null || _c === void 0 ? void 0 : _c.light, mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[400]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[300] }, ...item.itemProps, sx: (_g = item.customStyles) === null || _g === void 0 ? void 0 : _g.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+            var _a;
+            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[200] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c;
                     return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
                                         boxShadow: "none",
-                                        outline: `0.125rem solid ${(_b = (_a = c.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = c.gray) === null || _c === void 0 ? void 0 : _c[300]}`,
+                                        outline: `0.125rem solid ${colors.primary[300]}`,
                                         outlineOffset: "-0.125rem",
                                     }, ...item.buttonProps, sx: {
-                                        ...(_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.buttonStyle,
+                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
                                         "&:hover": {
-                                            ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.hoverbuttonStyle,
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
                                         },
-                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
+                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/esm/Components/Accordion/accordionColors.js

@@ -9,22 +9,19 @@ import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
  */
 const MIN_HOVER_STEP = 1.15;
 export const getAccordionHoverColors = (colors, isDark) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
     if (isDark) {
         // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
         // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
         // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
         return {
-            expandedBg: (_d = (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50],
-            softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+            expandedBg: colors.gray[200],
+            softHover: colors.gray[200],
         };
     }
-    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : (_o = colors.backgroundColor) === null || _o === void 0 ? void 0 : _o.light;
-    const expandedTint = ((_q = (_p = colors.primary) === null || _p === void 0 ? void 0 : _p.opacity) === null || _q === void 0 ? void 0 : _q[8])
-        ? compositeOver(colors.primary.opacity[8], rest)
-        : ((_s = (_r = colors.gray) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : rest);
+    const rest = colors.background[50];
+    const expandedTint = compositeOver(colors.primary.opacity[8], rest);
     return {
-        expandedBg: liftToContrast(expandedTint, rest, "light", MIN_HOVER_STEP),
-        softHover: liftToContrast((_v = (_u = (_t = colors.table) === null || _t === void 0 ? void 0 : _t.hover) === null || _u === void 0 ? void 0 : _u[100]) !== null && _v !== void 0 ? _v : (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[50], rest, "light", MIN_HOVER_STEP),
+        expandedBg: liftToContrast(expandedTint, rest, MIN_HOVER_STEP),
+        softHover: liftToContrast(colors.table.hover[100], rest, MIN_HOVER_STEP),
     };
 };

package/dist/esm/Components/AlertDialog/AlertDialog.js

@@ -2,8 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
-    var _a;
     const { colors } = useCustomTheme();
-    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
+    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: colors.background[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
 };
 export default AlertDialog;

package/dist/esm/Components/Apexcharts/ApexAreaChart/ApexAreaChart.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import ReactApexChart from "react-apexcharts";
-import { useTheme } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseAxisLabels, baseChart, baseGrid, baseLegend, baseTooltip } from "../chartBase.js";
 const ApexAreaChart = ({ variant = "basic", data, series, labels, title, titlePosition = "left", height = 320, width = "100%", colors, showLegend = true, legendPosition = "bottom", yAxisFormatter, }) => {
-    const theme = useTheme();
-    const palette = theme.colors;
+    const { colors: palette } = useCustomTheme();
     const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
     const resolvedSeries = useMemo(() => series !== null && series !== void 0 ? series : [{ name: title !== null && title !== void 0 ? title : "Series 1", data: data !== null && data !== void 0 ? data : [] }], [series, data, title]);
     const isSpark = variant === "sparkline";

package/dist/esm/Components/Apexcharts/ApexPieChart/ApexPieChart.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import ReactApexChart from "react-apexcharts";
-import { useTheme } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, chartMode, getDefaultSeriesColors, labelOnSeries, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend, baseTooltip } from "../chartBase.js";
 const getValidLegendPosition = (position) => {
@@ -14,8 +14,7 @@ const getValidLegendPosition = (position) => {
 };
 const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutColors, chartColor, titlePosition = "center", titleStyle, legendPosition = "bottom", legendStyle, variant = "pie", showDataLabels = true, minLabelPercent = 8, surfaceColor, donutSize = "68%", totalLabel = "Total", labelPlacement = "auto", }) => {
     var _a;
-    const theme = useTheme();
-    const palette = theme.colors;
+    const { colors: palette } = useCustomTheme();
     const ink = chartInk(palette);
     const gap = surfaceColor !== null && surfaceColor !== void 0 ? surfaceColor : ink.surface;
     const mergedTitleStyle = useMemo(() => mergeChartTitleStyle(palette, titleStyle), [palette, titleStyle]);

package/dist/esm/Components/Apexcharts/ApexRadialChart/ApexRadialChart.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import ReactApexChart from "react-apexcharts";
-import { useTheme } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
 import { chartInk, getDefaultSeriesColors, mergeChartTitleStyle, } from "../../../Theme/tokens/builders/chartColorsFromTheme.js";
 import { baseChart, baseLegend } from "../chartBase.js";
 const ApexRadialChart = ({ variant = "gauge", data, labels, title, titlePosition = "left", height = 320, width = "100%", colors, totalLabel = "Total", trackColor, hollowSize = "62%", }) => {
-    const theme = useTheme();
-    const palette = theme.colors;
+    const { colors: palette } = useCustomTheme();
     const ink = chartInk(palette);
     const seriesColors = useMemo(() => colors !== null && colors !== void 0 ? colors : getDefaultSeriesColors(palette), [colors, palette]);
     const options = useMemo(() => ({

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

@@ -4,20 +4,22 @@ import { Box, Text, VStack } from "@chakra-ui/react";
 import { ThemesList } from "../../Theme/index.js";
 import { ThemeSwitcher } from "../../Theme/provider/index.js";
 import { FONT_SIZE_OPTIONS } from "../../Theme/provider/fontSize.js";
+import { lightPalettes } from "../../Theme/tokens/brands/index.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import SelectV2 from "../SelectV2/SelectV2.js";
-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" }));
+const FieldLabel = ({ children }) => {
+    const { colors } = useCustomTheme();
+    return (_jsx(Text, { fontSize: "sm", fontWeight: "medium", color: colors.textMuted, mb: 2, children: children }));
 };
+const brandSwatch = (name, colors) => (_jsx(Box, { w: "14px", h: "14px", borderRadius: "full", bg: lightPalettes[name].primary[500], border: "1px solid", borderColor: colors.boxborder[500] }));
 export const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange, showBrand = true, showColorMode = true, showFontSize = true, size = "sm", labels, }) => {
     var _a, _b, _c;
+    const { colors } = useCustomTheme();
     const brandOptions = useMemo(() => Object.keys(ThemesList).map((name) => ({
         id: name,
         label: name.charAt(0).toUpperCase() + name.slice(1),
-        icon: brandSwatch(name),
-    })), []);
+        icon: brandSwatch(name, colors),
+    })), [colors]);
     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";

package/dist/esm/Components/Button/Button.styles.js

@@ -1,4 +1,5 @@
-import { accentTextOnCanvas, isDarkCanvas, onFilled, onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
 /**
  * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
  * `[500]` is pinned dark enough to carry a white label on the solid variant and measures only
@@ -13,9 +14,8 @@ const onCanvasText = (theme, colorScheme) => accentTextOnCanvas(theme.colors[col
  * `[50]`.
  */
 const onCanvasHoverBg = (theme, colorScheme, step) => {
-    var _a, _b;
     const scale = theme.colors[colorScheme];
-    return (_b = (_a = scale.opacity) === null || _a === void 0 ? void 0 : _a[step]) !== null && _b !== void 0 ? _b : scale[50];
+    return "opacity" in scale ? scale.opacity[step] : scale[50];
 };
 /**
  * The rung one/two steps DARKER than the accent — what a filled button's hover/active needs so its
@@ -136,19 +136,14 @@ export const Button = {
                 bg: "transparent",
             },
         }),
-        // Theme-based two-tone gradient: each theme defines its own `gradient`
-        // {from,to} pair (see palettes); falls back to the primary scale. Ignores
-        // colorScheme. Hover/active shift brightness so it works for any pair.
+        // Theme-based two-tone gradient: each theme defines its own `gradient` {from,to} pair.
+        // Ignores colorScheme; hover/active shift brightness so it works for any pair.
         gradient: ({ theme }) => {
-            var _a;
-            const g = (_a = theme.colors.gradient) !== null && _a !== void 0 ? _a : {
-                from: theme.colors.primary[400],
-                to: theme.colors.primary[700],
-            };
-            const bg = `linear-gradient(135deg, ${g.from} 0%, ${g.to} 100%)`;
+            const g = resolveGradient(theme.colors.gradient, theme.colors.white, theme.colors.black);
+            const bg = gradientCss(g);
             return {
                 bgImage: bg,
-                color: onGradient(g.from, g.to, theme.colors.white, theme.colors.black),
+                color: g.ink,
                 border: "none",
                 _hover: {
                     bgImage: bg,

package/dist/esm/Components/ButtonGroupIcon/ButtonGroupIcon.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import { Box, Button, ButtonGroup, IconButton, Menu, MenuButton, MenuItem, MenuList, Tooltip, } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { onGradient } from "../../Theme/tokens/builders/accentText.js";
+import { resolveGradient, gradientCss } from "../../Theme/tokens/builders/gradientInk.js";
+import { hexToRgb } from "../../Theme/tokens/builders/color.js";
 import { rafThrottle } from "../../Utils/rafThrottle.js";
 export default function ButtonGroupIcon({ leftIcon, rightIcon, onLeftIconClick, onRightIconClick, buttonText, onButtonClick, onButtongroupClick, size, variant, color, buttonGroupStyle, buttonGroupLeftIconStyle, buttonGroupRightIconStyle, buttonStyle, onBlurLeftIcon, onBlurRightIcon, dropdownOptions, // New prop for dropdown options
 onDropdownOptionClick, // New prop to handle option clicks
 rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, leftIconLoading, RightIconLoading, }) {
-    var _a;
     const theme = useCustomTheme();
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const textRef = useRef(null);
@@ -46,31 +46,30 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
     // keep the segments transparent (so it doesn't restart per button/icon), with a
     // translucent-white hover overlay for per-segment feedback.
     const isGradient = variant === "gradient";
-    const gradientStops = (_a = theme.colors.gradient) !== null && _a !== void 0 ? _a : {
-        from: theme.colors.primary[400],
-        to: theme.colors.primary[700],
-    };
-    const gradientBg = `linear-gradient(135deg, ${gradientStops.from} 0%, ${gradientStops.to} 100%)`;
-    const gradientInk = onGradient(gradientStops.from, gradientStops.to, theme.colors.white, theme.colors.black);
+    const gradientStops = resolveGradient(theme.colors.gradient, theme.colors.white, theme.colors.black);
+    const gradientBg = gradientCss(gradientStops);
+    const gradientInk = gradientStops.ink;
+    const whiteRgb = hexToRgb(theme.colors.white);
+    const whiteOverlay = (alpha) => `rgba(${whiteRgb.r}, ${whiteRgb.g}, ${whiteRgb.b}, ${alpha})`;
     const gradientItemSx = isGradient
         ? {
             color: gradientInk,
             bg: "transparent",
             bgImage: "none",
             boxShadow: "none",
-            _hover: { bg: "whiteAlpha.200", boxShadow: "none" },
-            _active: { bg: "whiteAlpha.300" },
+            _hover: { bg: whiteOverlay(0.08), boxShadow: "none" },
+            _active: { bg: whiteOverlay(0.16) },
         }
         : undefined;
     return (_jsxs(ButtonGroup, { size: size, isAttached: true, variant: isGradient ? "solid" : variant, onClick: onButtongroupClick, colorScheme: color, style: buttonGroupStyle, sx: isGradient
             ? { bgImage: gradientBg, color: gradientInk, borderRadius: "lg", overflow: "hidden" }
-            : undefined, children: [leftIcon && (_jsx(IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), _jsx(Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: _jsx(Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: "whiteAlpha.400", maxW: "200px", sx: gradientItemSx, children: _jsx(Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? (_jsxs(Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [_jsx(MenuButton, { as: IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), _jsx(Box, { sx: { zIndex: 99 }, children: _jsx(MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, 
+            : undefined, children: [leftIcon && (_jsx(IconButton, { "aria-label": "Left icon button", icon: leftIcon, isLoading: leftIconLoading, onClick: onLeftIconClick, onBlur: onBlurLeftIcon, style: buttonGroupLeftIconStyle, sx: gradientItemSx })), _jsx(Tooltip, { label: buttonText, isDisabled: !buttonText || !isTextTruncated, children: _jsx(Button, { onClick: onButtonClick, style: buttonStyle, isLoading: isLoading, borderLeft: "1px solid", borderRight: "1px solid", borderColor: whiteOverlay(0.24), maxW: "200px", sx: gradientItemSx, children: _jsx(Box, { ref: textRef, as: "span", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block", width: "100%", children: buttonText }) }) }), rightIcon && rightIconDropdown ? (_jsxs(Menu, { isOpen: isDropdownOpen, onClose: () => setIsDropdownOpen(false), children: [_jsx(MenuButton, { as: IconButton, "aria-label": "Right icon button", icon: rightIcon, isLoading: RightIconLoading, onClick: handleRightIconClick, onBlur: onBlurRightIcon, style: buttonGroupRightIconStyle, sx: gradientItemSx }), _jsx(Box, { sx: { zIndex: 99 }, children: _jsx(MenuList, { style: menulistStyle, bg: theme.colors.backgroundColor.light, 
                             // Chakra's own MenuItem renders `background: var(--menu-bg)` at rest, and its
                             // MenuList baseStyle sets that var to a hardcoded "#fff" (never our `_dark`, which
                             // this theme-swap app never triggers) — our `bg` prop above only recolors the list
                             // itself, not the inherited var, so items fell back to white until hover/focus (which
                             // our own sx already overrides). Setting the var here fixes the rest state too.
-                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, border: "1px solid", borderColor: "blackAlpha.100", borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => (_jsxs(MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
+                            sx: { "--menu-bg": theme.colors.backgroundColor.light }, borderRadius: "xl", boxShadow: "lg", py: "0.375rem", minW: "12rem", overflow: "hidden", children: dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => (_jsxs(MenuItem, { onClick: (event) => handleMenuClick(event, option), style: menuItemStyle, sx: {
                                     display: "flex",
                                     alignItems: "center",
                                     gap: "0.5rem",
@@ -88,7 +87,7 @@ rightIconDropdown, menulistStyle, menuItemStyle, isLoading, divider = true, left
                                             mx: 0,
                                             borderRadius: "none",
                                             borderBottom: "1px solid",
-                                            borderColor: "blackAlpha.100",
+                                            borderColor: theme.colors.boxborder[200],
                                         }
                                         : {}),
                                     _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[700] },

package/dist/esm/Components/Checkbox/Checkbox.js

@@ -21,7 +21,7 @@ export default function CheckBox({ label, labelFontSize, showLabelTooltip, label
             ...labelSx,
         }
         : { ...labelSx };
-    return (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.gray[500], display: "flex", alignItems: "center", sx: {
+    return (_jsxs(_Fragment, { children: [_jsx(ChakraCheckbox, { ...aria, onClick: onClick, spacing: spacing !== null && spacing !== void 0 ? spacing : "0.5rem", isInvalid: isInvalid, colorScheme: color, iconColor: iconColor, iconSize: iconSize, isChecked: isChecked, isIndeterminate: isIndeterminate, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: theme.colors.boxborder[500], display: "flex", alignItems: "center", sx: {
                     ...sx,
                     ".chakra-checkbox__control": { w: controlSize, h: controlSize },
                 }, children: label && (showLabelTooltip ? (_jsx(ToolTip, { label: labelTooltip !== null && labelTooltip !== void 0 ? labelTooltip : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, fontSize: labelFontSize !== null && labelFontSize !== void 0 ? labelFontSize : "0.8125rem", color: theme.colors.text[700], fontWeight: 500, ml: 0, children: label }))) }), error && _jsx(ErrorMessage, { errorMessage: errorMessage }), helperText && !error && _jsx(HelperText, { helperText: helperText })] }));

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

@@ -15,6 +15,8 @@ export const Checkbox = {
                 height: "1.25rem",
                 borderWidth: "1.6px",
                 borderRadius: "base",
+                // Without a resting colour Chakra falls back to its own gray.500.
+                borderColor: theme.colors.boxborder[500],
                 transition: "background 0.15s, border-color 0.15s, box-shadow 0.15s",
                 _disabled: {
                     bg: theme.colors.background[50],

package/dist/esm/Components/Common/ErrorComponent.js

@@ -1,15 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { HStack, Text } from "@chakra-ui/react";
-import { useTheme } from "@chakra-ui/react";
-import { DEFAULT_CANVAS, accentTextOnCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { onFilled } from "../../Theme/tokens/builders/accentText.js";
 const ErrorComponent = ({ error, errorClassName, }) => {
-    var _a, _b, _c, _d;
-    const theme = useTheme();
-    // [500] alone fails AA on the page canvas in every brand — step to a darker rung instead.
-    const errorFill = accentTextOnCanvas((_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) !== null && _b !== void 0 ? _b : theme.colors.red, (_d = (_c = theme.colors.backgroundColor) === null || _c === void 0 ? void 0 : _c.main) !== null && _d !== void 0 ? _d : DEFAULT_CANVAS);
-    // errorFill is tuned for text-on-page-canvas, not for carrying a white mark on top of itself —
-    // pick the mark ink structurally (onFilled) instead of assuming white always clears AA on it.
-    const markInk = onFilled(errorFill, theme.colors.white, theme.colors.black);
+    const { colors } = useCustomTheme();
+    const errorFill = colors.semanticText.error;
+    // errorFill is ink, not a fill tuned to carry a mark — pick the mark's ink structurally.
+    const markInk = onFilled(errorFill, colors.white, colors.black);
     return (_jsxs(HStack, { as: "p", align: "flex-start", spacing: 1, mt: 1, fontSize: "sm", color: errorFill, className: errorClassName, children: [_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": true, children: [_jsx("circle", { cx: "50", cy: "50", r: "50", fill: errorFill }), _jsx("rect", { x: "46", y: "40", width: "8", height: "30", rx: "2", fill: markInk }), _jsx("circle", { cx: "50", cy: "28", r: "4", fill: markInk })] }), _jsx(Text, { as: "span", children: error })] }));
 };
 export default ErrorComponent;

package/dist/esm/Components/Common/ErrorMessage.js

@@ -2,16 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex, Text, } from "@chakra-ui/react";
 import { Info } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 // `id` lets a field point `aria-describedby` here so the message is part of the control's
 // description on every focus. `role="alert"` alone announces once, when it first renders.
 const ErrorMessage = ({ errorMessage, id }) => {
-    var _a, _b;
-    const theme = useCustomTheme();
-    // red[500] alone fails AA on the page canvas (~3.4:1 vs the ~4.5 bar) in every brand — step
-    // to a darker rung of the same scale instead of hardcoding one, since a manual retune of a
-    // vivid-alert red collides with its own darker rungs before it clears AA (see red/error
-    // scale comments in each brand's palette.light.ts).
-    return (_jsxs(Flex, { id: id, align: "center", color: accentTextOnCanvas(theme.colors.red, (_b = (_a = theme.colors.backgroundColor) === null || _a === void 0 ? void 0 : _a.main) !== null && _b !== void 0 ? _b : DEFAULT_CANVAS), fontSize: "0.875rem", role: "alert", children: [_jsx(Info, { width: "0.875rem" }), _jsx(Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
+    const { colors } = useCustomTheme();
+    return (_jsxs(Flex, { id: id, align: "center", color: colors.semanticText.error, fontSize: "0.875rem", role: "alert", children: [_jsx(Info, { width: "0.875rem" }), _jsx(Text, { ml: "0.188rem", children: errorMessage !== null && errorMessage !== void 0 ? errorMessage : "Error" })] }));
 };
 export default ErrorMessage;

package/dist/esm/Components/Common/FormLabel.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Icon } from "@chakra-ui/react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
-import { DEFAULT_CANVAS, accentTextOnCanvas } from "../../Theme/tokens/builders/accentText.js";
 import { InfoIcon } from "lucide-react";
 import ToolTip from "../ToolTip/ToolTip.js";
 export const TextLabel = ({ label, id, isRequired = false, isInformation = false, informationMessage = "", fontSize, showTooltip, tooltipLabel, clampLines, inline = false, }) => {
-    var _a, _b, _c;
     const theme = useCustomTheme();
     const clampStyles = clampLines ? {
         display: "-webkit-box",
@@ -24,7 +22,7 @@ export const TextLabel = ({ label, id, isRequired = false, isInformation = false
         fontSize: fontSize !== null && fontSize !== void 0 ? fontSize : "0.8125rem",
         lineHeight: "1.2",
     };
-    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: accentTextOnCanvas((_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error, (_c = (_b = theme.colors.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : DEFAULT_CANVAS), marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
+    const content = (_jsxs(Box, { as: "span", display: "inline-flex", alignItems: "center", gap: "0.35rem", children: [showTooltip ? (_jsx(ToolTip, { label: tooltipLabel !== null && tooltipLabel !== void 0 ? tooltipLabel : label, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Box, { as: "span", sx: clampStyles, children: label }) })) : (_jsx(Box, { as: "span", sx: clampStyles, children: label })), isRequired && (_jsx("span", { style: { color: theme.colors.semanticText.error, marginLeft: "0.125rem" }, children: "*" })), isInformation && informationMessage && (_jsx(ToolTip, { label: informationMessage, hasArrow: true, placement: "top", fontSize: "0.75rem", children: _jsx(Icon, { as: InfoIcon, color: theme.colors.text[700], boxSize: 3.5 }) }))] }));
     // A real <label> only when there is a control id to point at. Without one it would name
     // nothing, and TextLabel also renders `inline` inside controls that are themselves a <label>
     // (Checkbox/Radio) — nesting labels there would be invalid markup.