pixelize-design-library 2.4.2-beta.20 → 2.4.2-beta.22

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Button = void 0;
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const color_1 = require("../../Theme/tokens/builders/color");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
 /**
  * Outline/ghost/link text sits ON the canvas, so it needs a rung that stays readable there —
@@ -30,9 +31,34 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
  * ~3.2 contrast.
  */
 const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const AA_NORMAL_TEXT = 4.5;
+// Semantic scales (red/green) carry no opacity ramp; brand scales do and keep their own [500].
+const solidRung = (theme, colorScheme) => {
+    const scale = theme.colors[colorScheme];
+    const white = theme.colors.white;
+    if ("opacity" in scale)
+        return 500;
+    if ((0, color_1.contrastRatio)(scale[500], white) >= AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && (0, color_1.contrastRatio)(scale[r], white) >= AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => (0, color_1.contrastRatio)(scale[a], white) <= (0, color_1.contrastRatio)(scale[b], white) ? a : b);
+};
+const steppedRung = (theme, base, step) => {
+    const dir = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
 const darkerFill = (theme, colorScheme, step) => {
-    const mode = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light";
-    return theme.colors[colorScheme][FILL_STEP_RUNGS[mode][step]];
+    var _a;
+    const scale = theme.colors[colorScheme];
+    const base = solidRung(theme, colorScheme);
+    if (base === 500) {
+        const mode = (0, accentText_1.isDarkCanvas)(theme.colors.backgroundColor.main) ? "dark" : "light";
+        return scale[FILL_STEP_RUNGS[mode][step]];
+    }
+    return (_a = scale[steppedRung(theme, base, step === 0 ? 1 : 2)]) !== null && _a !== void 0 ? _a : scale[base];
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => (0, accentText_1.onFilled)(fill, theme.colors.white, theme.colors.black);
@@ -49,7 +75,7 @@ exports.Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][500];
+            const fill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
             const hoverFill = darkerFill(theme, colorScheme, 0);
             const activeFill = darkerFill(theme, colorScheme, 1);
             const hoverLabel = labelFor(theme, hoverFill);

package/dist/Components/Primitives/Primitives.d.ts

@@ -0,0 +1,6 @@
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Avatar, AvatarGroup, Badge, Spinner, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Tabs, TabList, Tab, TabPanels, TabPanel, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+export { Table as TableRoot, Slider as RangeSlider } from "@chakra-ui/react";
+export type { BoxProps, FlexProps, StackProps, TextProps, HeadingProps, GridProps, GridItemProps, SimpleGridProps, AvatarProps, BadgeProps, IconProps, LinkProps, ImageProps, SpinnerProps, DividerProps, ContainerProps, IconButtonProps, FormControlProps, FormLabelProps, TabsProps, PopoverProps, ListProps, AlertProps, MenuProps, AccordionProps, } from "@chakra-ui/react";
+export { Input, Textarea, Progress, Radio, RadioGroup, Skeleton, ModalOverlay, ModalContent, ModalCloseButton, CardBody, } from "@chakra-ui/react";
+export { Card as ChakraCard, Select as ChakraSelect, Modal as ChakraModal, ModalBody as ChakraModalBody, ModalHeader as ChakraModalHeader, ModalFooter as ChakraModalFooter, } from "@chakra-ui/react";
+export type { InputProps, TextareaProps, ProgressProps, RadioProps, SkeletonProps as ChakraSkeletonProps, SelectProps as ChakraSelectProps, ModalProps as ChakraModalProps, CardProps as ChakraCardProps, } from "@chakra-ui/react";

package/dist/Components/Primitives/Primitives.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormControl = exports.PopoverCloseButton = exports.PopoverArrow = exports.PopoverFooter = exports.PopoverHeader = exports.PopoverBody = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.UnorderedList = exports.OrderedList = exports.ListIcon = exports.ListItem = exports.List = exports.Hide = exports.Show = exports.Collapse = exports.Portal = exports.AlertDescription = exports.AlertTitle = exports.AlertIcon = exports.Alert = exports.Spinner = exports.Badge = exports.AvatarGroup = exports.Avatar = exports.Icon = exports.Image = exports.Link = exports.Heading = exports.Text = exports.Divider = exports.Container = exports.Spacer = exports.Center = exports.WrapItem = exports.Wrap = exports.SimpleGrid = exports.GridItem = exports.Grid = exports.HStack = exports.VStack = exports.Stack = exports.Flex = exports.Box = void 0;
+exports.ChakraModalBody = exports.ChakraModal = exports.ChakraSelect = exports.ChakraCard = exports.CardBody = exports.ModalCloseButton = exports.ModalContent = exports.ModalOverlay = exports.Skeleton = exports.RadioGroup = exports.Radio = exports.Progress = exports.Textarea = exports.Input = exports.RangeSlider = exports.TableRoot = exports.useBreakpointValue = exports.useToken = exports.useMediaQuery = exports.useDisclosure = exports.extendTheme = exports.ChakraProvider = exports.SliderMark = exports.SliderThumb = exports.SliderFilledTrack = exports.SliderTrack = exports.AccordionIcon = exports.AccordionPanel = exports.AccordionButton = exports.AccordionItem = exports.Accordion = exports.MenuItemOption = exports.MenuOptionGroup = exports.MenuDivider = exports.MenuGroup = exports.MenuItem = exports.MenuList = exports.MenuButton = exports.Menu = exports.Td = exports.Th = exports.Tr = exports.Tfoot = exports.Tbody = exports.Thead = exports.TableContainer = exports.IconButton = exports.FormHelperText = exports.FormErrorMessage = exports.FormLabel = void 0;
+exports.ChakraModalFooter = exports.ChakraModalHeader = void 0;
+var react_1 = require("@chakra-ui/react");
+Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return react_1.Box; } });
+Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return react_1.Flex; } });
+Object.defineProperty(exports, "Stack", { enumerable: true, get: function () { return react_1.Stack; } });
+Object.defineProperty(exports, "VStack", { enumerable: true, get: function () { return react_1.VStack; } });
+Object.defineProperty(exports, "HStack", { enumerable: true, get: function () { return react_1.HStack; } });
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return react_1.Grid; } });
+Object.defineProperty(exports, "GridItem", { enumerable: true, get: function () { return react_1.GridItem; } });
+Object.defineProperty(exports, "SimpleGrid", { enumerable: true, get: function () { return react_1.SimpleGrid; } });
+Object.defineProperty(exports, "Wrap", { enumerable: true, get: function () { return react_1.Wrap; } });
+Object.defineProperty(exports, "WrapItem", { enumerable: true, get: function () { return react_1.WrapItem; } });
+Object.defineProperty(exports, "Center", { enumerable: true, get: function () { return react_1.Center; } });
+Object.defineProperty(exports, "Spacer", { enumerable: true, get: function () { return react_1.Spacer; } });
+Object.defineProperty(exports, "Container", { enumerable: true, get: function () { return react_1.Container; } });
+Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return react_1.Divider; } });
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return react_1.Text; } });
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return react_1.Heading; } });
+Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return react_1.Link; } });
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return react_1.Image; } });
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return react_1.Icon; } });
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return react_1.Avatar; } });
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return react_1.AvatarGroup; } });
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return react_1.Badge; } });
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return react_1.Spinner; } });
+Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return react_1.Alert; } });
+Object.defineProperty(exports, "AlertIcon", { enumerable: true, get: function () { return react_1.AlertIcon; } });
+Object.defineProperty(exports, "AlertTitle", { enumerable: true, get: function () { return react_1.AlertTitle; } });
+Object.defineProperty(exports, "AlertDescription", { enumerable: true, get: function () { return react_1.AlertDescription; } });
+Object.defineProperty(exports, "Portal", { enumerable: true, get: function () { return react_1.Portal; } });
+Object.defineProperty(exports, "Collapse", { enumerable: true, get: function () { return react_1.Collapse; } });
+Object.defineProperty(exports, "Show", { enumerable: true, get: function () { return react_1.Show; } });
+Object.defineProperty(exports, "Hide", { enumerable: true, get: function () { return react_1.Hide; } });
+Object.defineProperty(exports, "List", { enumerable: true, get: function () { return react_1.List; } });
+Object.defineProperty(exports, "ListItem", { enumerable: true, get: function () { return react_1.ListItem; } });
+Object.defineProperty(exports, "ListIcon", { enumerable: true, get: function () { return react_1.ListIcon; } });
+Object.defineProperty(exports, "OrderedList", { enumerable: true, get: function () { return react_1.OrderedList; } });
+Object.defineProperty(exports, "UnorderedList", { enumerable: true, get: function () { return react_1.UnorderedList; } });
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return react_1.Tabs; } });
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return react_1.TabList; } });
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return react_1.Tab; } });
+Object.defineProperty(exports, "TabPanels", { enumerable: true, get: function () { return react_1.TabPanels; } });
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return react_1.TabPanel; } });
+Object.defineProperty(exports, "Popover", { enumerable: true, get: function () { return react_1.Popover; } });
+Object.defineProperty(exports, "PopoverTrigger", { enumerable: true, get: function () { return react_1.PopoverTrigger; } });
+Object.defineProperty(exports, "PopoverContent", { enumerable: true, get: function () { return react_1.PopoverContent; } });
+Object.defineProperty(exports, "PopoverBody", { enumerable: true, get: function () { return react_1.PopoverBody; } });
+Object.defineProperty(exports, "PopoverHeader", { enumerable: true, get: function () { return react_1.PopoverHeader; } });
+Object.defineProperty(exports, "PopoverFooter", { enumerable: true, get: function () { return react_1.PopoverFooter; } });
+Object.defineProperty(exports, "PopoverArrow", { enumerable: true, get: function () { return react_1.PopoverArrow; } });
+Object.defineProperty(exports, "PopoverCloseButton", { enumerable: true, get: function () { return react_1.PopoverCloseButton; } });
+Object.defineProperty(exports, "FormControl", { enumerable: true, get: function () { return react_1.FormControl; } });
+Object.defineProperty(exports, "FormLabel", { enumerable: true, get: function () { return react_1.FormLabel; } });
+Object.defineProperty(exports, "FormErrorMessage", { enumerable: true, get: function () { return react_1.FormErrorMessage; } });
+Object.defineProperty(exports, "FormHelperText", { enumerable: true, get: function () { return react_1.FormHelperText; } });
+Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return react_1.IconButton; } });
+Object.defineProperty(exports, "TableContainer", { enumerable: true, get: function () { return react_1.TableContainer; } });
+Object.defineProperty(exports, "Thead", { enumerable: true, get: function () { return react_1.Thead; } });
+Object.defineProperty(exports, "Tbody", { enumerable: true, get: function () { return react_1.Tbody; } });
+Object.defineProperty(exports, "Tfoot", { enumerable: true, get: function () { return react_1.Tfoot; } });
+Object.defineProperty(exports, "Tr", { enumerable: true, get: function () { return react_1.Tr; } });
+Object.defineProperty(exports, "Th", { enumerable: true, get: function () { return react_1.Th; } });
+Object.defineProperty(exports, "Td", { enumerable: true, get: function () { return react_1.Td; } });
+Object.defineProperty(exports, "Menu", { enumerable: true, get: function () { return react_1.Menu; } });
+Object.defineProperty(exports, "MenuButton", { enumerable: true, get: function () { return react_1.MenuButton; } });
+Object.defineProperty(exports, "MenuList", { enumerable: true, get: function () { return react_1.MenuList; } });
+Object.defineProperty(exports, "MenuItem", { enumerable: true, get: function () { return react_1.MenuItem; } });
+Object.defineProperty(exports, "MenuGroup", { enumerable: true, get: function () { return react_1.MenuGroup; } });
+Object.defineProperty(exports, "MenuDivider", { enumerable: true, get: function () { return react_1.MenuDivider; } });
+Object.defineProperty(exports, "MenuOptionGroup", { enumerable: true, get: function () { return react_1.MenuOptionGroup; } });
+Object.defineProperty(exports, "MenuItemOption", { enumerable: true, get: function () { return react_1.MenuItemOption; } });
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return react_1.Accordion; } });
+Object.defineProperty(exports, "AccordionItem", { enumerable: true, get: function () { return react_1.AccordionItem; } });
+Object.defineProperty(exports, "AccordionButton", { enumerable: true, get: function () { return react_1.AccordionButton; } });
+Object.defineProperty(exports, "AccordionPanel", { enumerable: true, get: function () { return react_1.AccordionPanel; } });
+Object.defineProperty(exports, "AccordionIcon", { enumerable: true, get: function () { return react_1.AccordionIcon; } });
+Object.defineProperty(exports, "SliderTrack", { enumerable: true, get: function () { return react_1.SliderTrack; } });
+Object.defineProperty(exports, "SliderFilledTrack", { enumerable: true, get: function () { return react_1.SliderFilledTrack; } });
+Object.defineProperty(exports, "SliderThumb", { enumerable: true, get: function () { return react_1.SliderThumb; } });
+Object.defineProperty(exports, "SliderMark", { enumerable: true, get: function () { return react_1.SliderMark; } });
+Object.defineProperty(exports, "ChakraProvider", { enumerable: true, get: function () { return react_1.ChakraProvider; } });
+Object.defineProperty(exports, "extendTheme", { enumerable: true, get: function () { return react_1.extendTheme; } });
+Object.defineProperty(exports, "useDisclosure", { enumerable: true, get: function () { return react_1.useDisclosure; } });
+Object.defineProperty(exports, "useMediaQuery", { enumerable: true, get: function () { return react_1.useMediaQuery; } });
+Object.defineProperty(exports, "useToken", { enumerable: true, get: function () { return react_1.useToken; } });
+Object.defineProperty(exports, "useBreakpointValue", { enumerable: true, get: function () { return react_1.useBreakpointValue; } });
+// Renamed: the library's own Table and Slider own these names.
+var react_2 = require("@chakra-ui/react");
+Object.defineProperty(exports, "TableRoot", { enumerable: true, get: function () { return react_2.Table; } });
+Object.defineProperty(exports, "RangeSlider", { enumerable: true, get: function () { return react_2.Slider; } });
+var react_3 = require("@chakra-ui/react");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return react_3.Input; } });
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return react_3.Textarea; } });
+Object.defineProperty(exports, "Progress", { enumerable: true, get: function () { return react_3.Progress; } });
+Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return react_3.Radio; } });
+Object.defineProperty(exports, "RadioGroup", { enumerable: true, get: function () { return react_3.RadioGroup; } });
+Object.defineProperty(exports, "Skeleton", { enumerable: true, get: function () { return react_3.Skeleton; } });
+Object.defineProperty(exports, "ModalOverlay", { enumerable: true, get: function () { return react_3.ModalOverlay; } });
+Object.defineProperty(exports, "ModalContent", { enumerable: true, get: function () { return react_3.ModalContent; } });
+Object.defineProperty(exports, "ModalCloseButton", { enumerable: true, get: function () { return react_3.ModalCloseButton; } });
+Object.defineProperty(exports, "CardBody", { enumerable: true, get: function () { return react_3.CardBody; } });
+// Prefixed because the library ships its own component under each of these names.
+var react_4 = require("@chakra-ui/react");
+Object.defineProperty(exports, "ChakraCard", { enumerable: true, get: function () { return react_4.Card; } });
+Object.defineProperty(exports, "ChakraSelect", { enumerable: true, get: function () { return react_4.Select; } });
+Object.defineProperty(exports, "ChakraModal", { enumerable: true, get: function () { return react_4.Modal; } });
+Object.defineProperty(exports, "ChakraModalBody", { enumerable: true, get: function () { return react_4.ModalBody; } });
+Object.defineProperty(exports, "ChakraModalHeader", { enumerable: true, get: function () { return react_4.ModalHeader; } });
+Object.defineProperty(exports, "ChakraModalFooter", { enumerable: true, get: function () { return react_4.ModalFooter; } });

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

@@ -1,4 +1,5 @@
 import { accentTextOnCanvas, isDarkCanvas, onFilled } from "../../Theme/tokens/builders/accentText.js";
+import { contrastRatio } from "../../Theme/tokens/builders/color.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 —
@@ -27,9 +28,34 @@ const onCanvasHoverBg = (theme, colorScheme, step) => {
  * ~3.2 contrast.
  */
 const FILL_STEP_RUNGS = { light: [600, 700], dark: [400, 300] };
+const RUNGS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const AA_NORMAL_TEXT = 4.5;
+// Semantic scales (red/green) carry no opacity ramp; brand scales do and keep their own [500].
+const solidRung = (theme, colorScheme) => {
+    const scale = theme.colors[colorScheme];
+    const white = theme.colors.white;
+    if ("opacity" in scale)
+        return 500;
+    if (contrastRatio(scale[500], white) >= AA_NORMAL_TEXT)
+        return 500;
+    const passing = RUNGS.filter((r) => scale[r] && contrastRatio(scale[r], white) >= AA_NORMAL_TEXT);
+    if (!passing.length)
+        return 500;
+    return passing.reduce((a, b) => contrastRatio(scale[a], white) <= contrastRatio(scale[b], white) ? a : b);
+};
+const steppedRung = (theme, base, step) => {
+    const dir = isDarkCanvas(theme.colors.backgroundColor.main) ? -100 : 100;
+    return Math.min(900, Math.max(50, base + dir * step));
+};
 const darkerFill = (theme, colorScheme, step) => {
-    const mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
-    return theme.colors[colorScheme][FILL_STEP_RUNGS[mode][step]];
+    var _a;
+    const scale = theme.colors[colorScheme];
+    const base = solidRung(theme, colorScheme);
+    if (base === 500) {
+        const mode = isDarkCanvas(theme.colors.backgroundColor.main) ? "dark" : "light";
+        return scale[FILL_STEP_RUNGS[mode][step]];
+    }
+    return (_a = scale[steppedRung(theme, base, step === 0 ? 1 : 2)]) !== null && _a !== void 0 ? _a : scale[base];
 };
 /** Label for the solid variant's filled bg — derived from THAT fill, since hover/active swap it. */
 const labelFor = (theme, fill) => onFilled(fill, theme.colors.white, theme.colors.black);
@@ -46,7 +72,7 @@ export const Button = {
     }),
     variants: {
         solid: ({ theme, colorScheme = "primary" }) => {
-            const fill = theme.colors[colorScheme][500];
+            const fill = theme.colors[colorScheme][solidRung(theme, colorScheme)];
             const hoverFill = darkerFill(theme, colorScheme, 0);
             const activeFill = darkerFill(theme, colorScheme, 1);
             const hoverLabel = labelFor(theme, hoverFill);

package/dist/esm/Components/Primitives/Primitives.js

@@ -0,0 +1,6 @@
+export { Box, Flex, Stack, VStack, HStack, Grid, GridItem, SimpleGrid, Wrap, WrapItem, Center, Spacer, Container, Divider, Text, Heading, Link, Image, Icon, Avatar, AvatarGroup, Badge, Spinner, Alert, AlertIcon, AlertTitle, AlertDescription, Portal, Collapse, Show, Hide, List, ListItem, ListIcon, OrderedList, UnorderedList, Tabs, TabList, Tab, TabPanels, TabPanel, Popover, PopoverTrigger, PopoverContent, PopoverBody, PopoverHeader, PopoverFooter, PopoverArrow, PopoverCloseButton, FormControl, FormLabel, FormErrorMessage, FormHelperText, IconButton, TableContainer, Thead, Tbody, Tfoot, Tr, Th, Td, Menu, MenuButton, MenuList, MenuItem, MenuGroup, MenuDivider, MenuOptionGroup, MenuItemOption, Accordion, AccordionItem, AccordionButton, AccordionPanel, AccordionIcon, SliderTrack, SliderFilledTrack, SliderThumb, SliderMark, ChakraProvider, extendTheme, useDisclosure, useMediaQuery, useToken, useBreakpointValue, } from "@chakra-ui/react";
+// Renamed: the library's own Table and Slider own these names.
+export { Table as TableRoot, Slider as RangeSlider } from "@chakra-ui/react";
+export { Input, Textarea, Progress, Radio, RadioGroup, Skeleton, ModalOverlay, ModalContent, ModalCloseButton, CardBody, } from "@chakra-ui/react";
+// Prefixed because the library ships its own component under each of these names.
+export { Card as ChakraCard, Select as ChakraSelect, Modal as ChakraModal, ModalBody as ChakraModalBody, ModalHeader as ChakraModalHeader, ModalFooter as ChakraModalFooter, } from "@chakra-ui/react";

package/dist/esm/index.js

@@ -139,3 +139,4 @@ export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexTo
 export { scrollbarStyles, globalScrollbarStyles, SCROLLBAR_WIDTH, } from "./Theme/tokens/builders/scrollbar.js";
 export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/builders/placeholderInk.js";
 export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk.js";
+export * from "./Components/Primitives/Primitives.js";

package/dist/index.d.ts

@@ -164,3 +164,4 @@ export { placeholderInk, placeholderInkOn, fieldSurfaces } from "./Theme/tokens/
 export type { FieldSurfaces } from "./Theme/tokens/builders/placeholderInk";
 export { resolveGradient, gradientCss, inkSafeGradient as inkSafeGradientToken, } from "./Theme/tokens/builders/gradientInk";
 export type { Gradient, ResolvedGradient, } from "./Theme/tokens/builders/gradientInk";
+export * from "./Components/Primitives/Primitives";

package/dist/index.js

@@ -33,6 +33,9 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -338,3 +341,4 @@ 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; } });
+__exportStar(require("./Components/Primitives/Primitives"), exports);

package/package.json

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