pixelize-design-library 2.4.2-beta.3 → 2.4.2-beta.5

package/dist/esm/Theme/chakra/createBrandTheme.js

@@ -3,6 +3,7 @@ import common from "./common.web.js";
 import fonts from "./fonts.web.js";
 import { componentStyles } from "./componentStyles.js";
 import { onFilled } from "../tokens/builders/accentText.js";
+import { globalScrollbarStyles } from "../tokens/builders/scrollbar.js";
 /**
  * Builds a Chakra theme from a pure brand palette.
  *
@@ -83,22 +84,8 @@ export const createBrandTheme = (palette, options = {}) => {
                             color: onFilled(palette.primary[500], palette.white, palette.black),
                         },
                         // `color-scheme: dark` gives WebKit/Blink a dark scrollbar by default, but it's the
-                        // OS's generic dark gray, not brand-aware — style it explicitly so it matches the
-                        // canvas instead of floating as a mismatched gray bar.
-                        "::-webkit-scrollbar": {
-                            width: "10px",
-                            height: "10px",
-                        },
-                        "::-webkit-scrollbar-track": {
-                            background: palette.backgroundColor.main,
-                        },
-                        "::-webkit-scrollbar-thumb": {
-                            background: palette.gray[600],
-                            borderRadius: "6px",
-                        },
-                        "::-webkit-scrollbar-thumb:hover": {
-                            background: palette.gray[500],
-                        },
+                        // OS's generic dark gray, not brand-aware.
+                        ...globalScrollbarStyles(palette),
                         // Chrome/Edge autofill paints its own opaque yellow/white fill behind the input
                         // text via `-webkit-box-shadow` (not `background`), so a plain `bg` override never
                         // reaches it — a bright light box survives on every dark autofilled field unless

package/dist/esm/Theme/tokens/builders/gradientInk.js

@@ -0,0 +1,22 @@
+import { onGradient } from "./accentText.js";
+import { resolveAvatarFill } from "./statusTone.js";
+/**
+ * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient
+ * otherwise flips `onGradient` to black ink, so the same element reads white-on-colour in one
+ * brand and black-on-pastel in the next.
+ */
+export const inkSafeGradient = (gradient) => ({
+    from: resolveAvatarFill(gradient.from),
+    to: resolveAvatarFill(gradient.to),
+});
+/**
+ * The only correct way to paint text on a gradient: returns the stops to draw AND the ink for
+ * them. Calling `onGradient` on raw stops is the black-text bug — it picks ink for a backdrop
+ * that is then painted differently.
+ */
+export const resolveGradient = (gradient, white, black) => {
+    const { from, to } = inkSafeGradient(gradient);
+    return { from, to, ink: onGradient(from, to, white, black) };
+};
+/** `linear-gradient(...)` for a resolved pair — one spelling of the CSS everywhere. */
+export const gradientCss = (g, angle = "135deg") => `linear-gradient(${angle}, ${g.from} 0%, ${g.to} 100%)`;

package/dist/esm/Theme/tokens/builders/index.js

@@ -3,3 +3,5 @@ export * from "./buildBrandTokens.js";
 export * from "./buildDarkPalette.js";
 export * from "./chartColorsFromTheme.js";
 export * from "./color.js";
+export * from "./scrollbar.js";
+export * from "./gradientInk.js";

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

@@ -30,6 +30,24 @@ export function liftToContrast(hex, backdrop, target = AA_NON_TEXT) {
     const ends = [withLightness(hex, 100, s), withLightness(hex, 0, s)];
     return contrastRatio(ends[0], backdrop) >= contrastRatio(ends[1], backdrop) ? ends[0] : ends[1];
 }
+/**
+ * Mirror of `liftToContrast`: walks ink TOWARD the backdrop, stopping at the last step that
+ * still clears `target`. For ink that must stay legible without reading as body copy.
+ */
+export function softenToContrast(hex, backdrop, target) {
+    if (contrastRatio(hex, backdrop) <= target)
+        return hex;
+    const { s, l: start } = hexToHsl(hex);
+    const toward = relativeLuminance(backdrop) < 0.5 ? -1 : 1;
+    let softest = hex;
+    for (let l = start; l > 0 && l < 100; l += toward) {
+        const next = withLightness(hex, l, s);
+        if (contrastRatio(next, backdrop) < target)
+            break;
+        softest = next;
+    }
+    return softest;
+}
 /**
  * `boxborder[500]` is the rung every control outline reads (Checkbox, SearchSelect, the date
  * pickers, the editor's inputs). It was authored as a decorative value — measured 1.30-2.56:1

package/dist/esm/Theme/tokens/builders/scrollbar.js

@@ -0,0 +1,52 @@
+/** One width everywhere. The 3px, 4px, 5px and 10px bars in use were all accidents. */
+export const SCROLLBAR_WIDTH = "6px";
+const RADIUS = "6px";
+/**
+ * The single source of scrollbar chrome. `overlay` drops the track for bars that float over a
+ * card; `hover` keeps the thumb invisible until the region is hovered.
+ */
+export function scrollbarStyles(palette, variant = "default") {
+    const { gray } = palette;
+    const track = variant === "default" ? gray[100] : "transparent";
+    const thumb = variant === "hover" ? "transparent" : gray[400];
+    return {
+        scrollbarWidth: "thin",
+        scrollbarColor: `${thumb} ${track}`,
+        "&::-webkit-scrollbar": {
+            width: SCROLLBAR_WIDTH,
+            height: SCROLLBAR_WIDTH,
+        },
+        "&::-webkit-scrollbar-track": {
+            background: track,
+            borderRadius: RADIUS,
+        },
+        "&::-webkit-scrollbar-thumb": {
+            background: thumb,
+            borderRadius: RADIUS,
+            transition: "background 0.2s ease",
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+            background: gray[500],
+        },
+        "&::-webkit-scrollbar-corner": {
+            background: track,
+        },
+        ...(variant === "hover"
+            ? {
+                "&:hover": { scrollbarColor: `${gray[400]} ${track}` },
+                "&:hover::-webkit-scrollbar-thumb": { background: gray[400] },
+            }
+            : {}),
+    };
+}
+/** The same chrome for the document itself, where `&` selectors do not apply. */
+export function globalScrollbarStyles(palette) {
+    const { gray } = palette;
+    return {
+        "::-webkit-scrollbar": { width: SCROLLBAR_WIDTH, height: SCROLLBAR_WIDTH },
+        "::-webkit-scrollbar-track": { background: gray[100] },
+        "::-webkit-scrollbar-thumb": { background: gray[400], borderRadius: RADIUS },
+        "::-webkit-scrollbar-thumb:hover": { background: gray[500] },
+        "::-webkit-scrollbar-corner": { background: gray[100] },
+    };
+}

package/dist/esm/Theme/tokens/builders/surfaceRungs.js

@@ -1,7 +1,9 @@
 import { contrastRatio } from "./color.js";
-import { liftToContrast, AA_NON_TEXT } from "./outlineRung.js";
+import { liftToContrast, softenToContrast, AA_NON_TEXT } from "./outlineRung.js";
 import { AA_NORMAL_TEXT, pickAccentText } from "./accentText.js";
 import { SEMANTIC_TONES } from "./semanticText.js";
+/** Clear of the 4.5 gate, but well under body text so a hint never reads as a value. */
+export const PLACEHOLDER_TEXT = 5;
 export const namedSurfaces = (palette) => [
     ...Object.values(palette.backgroundColor),
     palette.background[50],
@@ -13,6 +15,7 @@ export const hardestSurface = (ink, surfaces) => surfaces.reduce((worst, s) => c
 export function withSurfaceRungs(palette) {
     const surfaces = namedSurfaces(palette);
     const lift = (ink, target) => liftToContrast(ink, hardestSurface(ink, surfaces), target);
+    const soften = (ink, target) => softenToContrast(ink, hardestSurface(ink, surfaces), target);
     const semanticText = SEMANTIC_TONES.reduce((acc, tone) => {
         acc[tone] = lift(palette.semanticText[tone], AA_NORMAL_TEXT);
         return acc;
@@ -24,9 +27,11 @@ export function withSurfaceRungs(palette) {
         semanticText,
         text: { ...palette.text, 500: lift(palette.text[500], AA_NORMAL_TEXT) },
         header: { ...palette.header, 500: lift(palette.header[500], AA_NORMAL_TEXT) },
+        // Placeholder must stay legible without reading as a filled value: the ramp delivered
+        // 6.85:1, level with `textMuted`, so it is settled back down to just clear of AA.
         placeholder: {
             ...palette.placeholder,
-            500: lift(palette.placeholder[500], AA_NORMAL_TEXT),
+            500: soften(lift(palette.placeholder[500], AA_NORMAL_TEXT), PLACEHOLDER_TEXT),
         },
         boxborder: { ...palette.boxborder, 500: lift(palette.boxborder[500], AA_NON_TEXT) },
     };

package/dist/esm/index.js

@@ -42,6 +42,7 @@ import SearchSelect from "./Components/SearchSelect/SearchSelect.js";
 import SelectSearch from "./Components/SelectSearch/SelectSearch.js";
 import SideBar from "./Components/SideBar/SideBar.js";
 import Slider from "./Components/Slider/Slider.js";
+import ScrollbarBox from "./Components/ScrollbarBox/ScrollbarBox.js";
 import Skeletons from "./Components/Skeletons/Skeletons.js";
 import Switch from "./Components/Switch/Switch.js";
 import Table from "./Components/Table/Table.js";
@@ -96,7 +97,7 @@ import SignInActivityTable from "./Components/SignInActivityTable/SignInActivity
 import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails.js";
 export { 
 // components
-Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, 
+Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, ScrollbarBox, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, 
 // hooks
 useSidebarPrefs, useIsTruncated, 
 // themes
@@ -135,3 +136,5 @@ export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText,
 // primitives; `compositeOver` flattens a translucent color onto a backdrop first (an alpha
 // color has no defined luminance on its own, so measure the composited result, not the tint).
 export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color.js";
+export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar.js";
+export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk.js";

package/dist/index.d.ts

@@ -40,6 +40,7 @@ import SearchSelect from "./Components/SearchSelect/SearchSelect";
 import SelectSearch from "./Components/SelectSearch/SelectSearch";
 import SideBar from "./Components/SideBar/SideBar";
 import Slider from "./Components/Slider/Slider";
+import ScrollbarBox from "./Components/ScrollbarBox/ScrollbarBox";
 import Skeletons from "./Components/Skeletons/Skeletons";
 import Switch from "./Components/Switch/Switch";
 import Table from "./Components/Table/Table";
@@ -91,7 +92,7 @@ import RolesPermission from "./Components/RolesPermission/RolesPermission";
 import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
 import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
 import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
+export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, ScrollbarBox, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
 export default withTheme;
 export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
 export type { WorkspaceWindowProps, WorkspaceWindowState, WorkspaceTrayProps, WorkspaceTrayItem, WorkspaceTrayPreviewProps, } from "./Components/WorkspaceWindow/WorkspaceWindowProps";
@@ -156,3 +157,8 @@ export type { FileUploaderProps, MimeExtension } from "./Components/FileUpload/F
 export type { SidebarProps, SidebarUser, SecondaryBarProps, OtherAppsProps, MenuProps as SidebarMenuProps, } from "./Components/SideBar/SideBarProps";
 export type { NavbarProps, MenuProps as NavbarMenuProps } from "./Components/NavigationBar/NavigationBarProps";
 export type { HeaderProps } from "./Components/Header/HeaderProps";
+export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar";
+export type { ScrollbarVariant, ScrollbarStyle, } from "./Theme/tokens/builders/scrollbar";
+export type { ScrollbarBoxProps } from "./Components/ScrollbarBox/ScrollbarBox";
+export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk";
+export type { Gradient, ResolvedGradient, } from "./Theme/tokens/builders/gradientInk";

package/dist/index.js

@@ -38,9 +38,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 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.ApexRadialChart = exports.ApexAreaChart = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-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 = exports.CustomModulesTable = exports.RolesPermission = void 0;
-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.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = 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 = exports.VerifyEmailOtp = exports.useToaster = void 0;
-exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = void 0;
+exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.ScrollbarBox = 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 = exports.CustomModulesTable = exports.RolesPermission = void 0;
+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.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = 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 = exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = void 0;
+exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -136,6 +136,8 @@ const SideBar_1 = __importDefault(require("./Components/SideBar/SideBar"));
 exports.SideBar = SideBar_1.default;
 const Slider_1 = __importDefault(require("./Components/Slider/Slider"));
 exports.Slider = Slider_1.default;
+const ScrollbarBox_1 = __importDefault(require("./Components/ScrollbarBox/ScrollbarBox"));
+exports.ScrollbarBox = ScrollbarBox_1.default;
 const Skeletons_1 = __importDefault(require("./Components/Skeletons/Skeletons"));
 exports.Skeletons = Skeletons_1.default;
 const Switch_1 = __importDefault(require("./Components/Switch/Switch"));
@@ -324,3 +326,11 @@ Object.defineProperty(exports, "withLightness", { enumerable: true, get: functio
 Object.defineProperty(exports, "mix", { enumerable: true, get: function () { return color_1.mix; } });
 Object.defineProperty(exports, "relativeLuminance", { enumerable: true, get: function () { return color_1.relativeLuminance; } });
 Object.defineProperty(exports, "contrastRatio", { enumerable: true, get: function () { return color_1.contrastRatio; } });
+var scrollbar_1 = require("./Theme/tokens/builders/scrollbar");
+Object.defineProperty(exports, "scrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.scrollbarStyles; } });
+Object.defineProperty(exports, "globalScrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.globalScrollbarStyles; } });
+Object.defineProperty(exports, "SCROLLBAR_WIDTH", { enumerable: true, get: function () { return scrollbar_1.SCROLLBAR_WIDTH; } });
+var gradientInk_1 = require("./Theme/tokens/builders/gradientInk");
+Object.defineProperty(exports, "resolveGradient", { enumerable: true, get: function () { return gradientInk_1.resolveGradient; } });
+Object.defineProperty(exports, "gradientCss", { enumerable: true, get: function () { return gradientInk_1.gradientCss; } });
+Object.defineProperty(exports, "inkSafeGradientToken", { enumerable: true, get: function () { return gradientInk_1.inkSafeGradient; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.3",
+  "version": "2.4.2-beta.5",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",