pixelize-design-library 2.4.2-beta.65 → 2.4.2-beta.67

package/README.md

@@ -45,14 +45,17 @@ tracks Chakra 2.8.
 
 Two dist-tags are published: `latest` (stable) and `beta` (the active feature line).
 
-**On a `beta` version, pin the exact version — never a caret range.** `^2.4.2-beta.43` is
-satisfied by the stable `2.4.2` the moment it publishes, so a routine `npm install` silently
+**On a `beta` version, pin the exact version — never a caret range.** `^X.Y.Z-beta.N` is
+satisfied by the stable `X.Y.Z` as soon as it exists, so a routine `npm install` silently
 swaps a newer prerelease for an older stable build with no warning.
 
 ```json
-"pixelize-design-library": "2.4.2-beta.43"
+"pixelize-design-library": "X.Y.Z-beta.N"
 ```
 
+`X.Y.Z-beta.N` is whatever `npm view pixelize-design-library dist-tags` prints as `beta`.
+`npm install pixelize-design-library@beta` saves a caret range, so add `--save-exact`.
+
 What changed in each release, and what is staged to break in the next major:
 [CHANGELOG.md](CHANGELOG.md).
 
@@ -158,6 +161,9 @@ Full rules for app developers and AI assistants: [`src/Theme/THEME-CONTRACT.md`]
 ### Editor
 - **Editor** - Rich text editor component
 
+The lists above are the common components. Every export, including the helpers, hooks and tokens, is
+in the [Exports index](#exports-index).
+
 ## Usage Examples
 
 ### Basic Button Usage
@@ -379,6 +385,34 @@ transpiled by your bundler rather than imported by bare Node. In Next.js:
 module.exports = { transpilePackages: ['pixelize-design-library'] };
 ```
 
+## Exports index
+
+Every value the package root exports, so an export is never invisible to a developer or an LLM that
+only has this package. For how to use a component see [DESIGN-GUIDE.md](./DESIGN-GUIDE.md) and
+[COMPONENT-GOTCHAS.md](./COMPONENT-GOTCHAS.md); props are documented in the `*Props` types. This
+block is generated: after adding or removing an export run
+`UPDATE_README_EXPORTS=1 npx jest src/readmeExportsIndex.test.ts --coverage=false`.
+
+<!-- exports-index:start -->
+
+**Components and primitives (256)**
+
+`Accordian`, `Accordion`, `AddressCard`, `AddressCardGroup`, `Alert`, `AlertDescription`, `AlertDialog`, `AlertIcon`, `AlertTitle`, `ApexAreaChart`, `ApexBarChart`, `ApexLineChart`, `ApexPieChart`, `ApexPolarChart`, `ApexRadialChart`, `AppSwitcher`, `AppearanceSettings`, `AudioRecorder`, `Avatar`, `AvatarGroup`, `Backdrop`, `Badge`, `BagBar`, `Box`, `Breadcrumbs`, `BulkSelectionBar`, `Button`, `ButtonGroupIcon`, `CalendarGrid`, `Card`, `CartItem`, `Center`, `ChakraProvider`, `Checkbox`, `ChoiceCard`, `ChoiceCardGroup`, `CircularProgress`, `Collapse`, `ConfirmDialog`, `ContactForm`, `Container`, `CopyButton`, `CouponField`, `CustomModulesTable`, `DatePicker`, `DescriptionList`, `DetailSections`, `Divider`, `Drawer`, `DrawerBody`, `DrawerFooter`, `DrawerHeader`, `Dropdown`, `Editor`, `EmptyState`, `ErrorState`, `FeedbackForm`, `FieldMessage`, `FieldSelectModal`, `FilePreview`, `FilePreviewTrigger`, `FileUpload`, `FileUploader`, `FilterBar`, `FilterSidebar`, `FilteredEmptyState`, `Flex`, `FormControl`, `FormDrawer`, `FormErrorMessage`, `FormField`, `FormHelperText`, `FormLabel`, `FormWrapper`, `Grid`, `GridItem`, `Header`, `HeaderActions`, `Heading`, `Hide`, `Icon`, `IconButton`, `Image`, `InputSwitch`, `InputTextArea`, `KanbanActions`, `KanbanBoard`, `Kbd`, `KbdShortcut`, `LauncherSearchEngine`, `LauncherTrigger`, `LazyWrapper`, `LimitReachedModal`, `Link`, `List`, `ListIcon`, `ListItem`, `Loading`, `MediaAudioPlayer`, `MediaDocumentStage`, `MediaGallery`, `MediaImageViewer`, `MediaLightbox`, `MediaScrubber`, `MediaStatusPanel`, `MediaVideoPlayer`, `MediaViewer`, `Menu`, `MenuButton`, `MenuDivider`, `MenuGroup`, `MenuItem`, `MenuItemOption`, `MenuList`, `MenuOptionGroup`, `Modal`, `ModalBody`, `ModalFooter`, `ModalHeader`, `MoreItems`, `MultiSelect`, `NavLauncher`, `NavigationBar`, `NewTabLink`, `NoteTextArea`, `Notification`, `NotificationBell`, `NotificationItem`, `NotificationList`, `NotificationPanel`, `NumberInput`, `OffersList`, `OptionChip`, `OrderStatusTimeline`, `OrderSummary`, `OrderedList`, `OrgSwitcher`, `OrganizationDetails`, `OverflowToolTip`, `PageHeader`, `Pagination`, `PaymentCard`, `PaymentOption`, `PaymentOptionGroup`, `PdfViewer`, `PersonChip`, `PhoneNumberInput`, `PinInput`, `PinToggle`, `PincodeChecker`, `PixelizeThemeProvider`, `PlanBadge`, `PlanPill`, `Popover`, `PopoverArrow`, `PopoverBody`, `PopoverCloseButton`, `PopoverContent`, `PopoverFooter`, `PopoverHeader`, `PopoverTrigger`, `Portal`, `PriceBlock`, `ProductBadges`, `ProductCard`, `ProductCardGrid`, `ProductCardSkeleton`, `ProductDetails`, `ProfileCard`, `ProfileCardBody`, `ProfileCardFooter`, `ProfileCardHeader`, `ProfilePhotoViewer`, `ProgressBar`, `QuantityStepper`, `QueryStateBoundary`, `QuickAddSheet`, `RadioButton`, `RadioButtonGroup`, `RangeSlider`, `Rating`, `Reorder`, `ReviewList`, `ReviewSummary`, `RolesPermission`, `SaveBar`, `ScrollToTop`, `ScrollbarBox`, `Search`, `SearchSelect`, `SectionRail`, `SegmentedControl`, `Select`, `SelectSearch`, `SelectV2`, `SettingRow`, `SettingsSection`, `Show`, `SideBar`, `SignInActivityTable`, `SimpleGrid`, `Skeletons`, `SkipLink`, `Slider`, `Spacer`, `SpecTable`, `Spinner`, `Stack`, `StageItem`, `StageProgress`, `StatCard`, `StatusTag`, `StickyBuyBar`, `StockStatus`, `Switch`, `Tab`, `TabList`, `TabPanel`, `TabPanels`, `Table`, `TableContainer`, `TableRoot`, `TableToggle`, `Tabs`, `Tag`, `TagInput`, `Tbody`, `Td`, `Text`, `TextInput`, `Tfoot`, `Th`, `Thead`, `ThemeSwitcher`, `ThemesList`, `TimePicker`, `Timeline`, `Toaster`, `ToggleSwitch`, `ToolTip`, `Tr`, `TrustBadges`, `UnorderedList`, `UpgradeButton`, `UserDetails`, `VariantSelector`, `VerifyEmailOtp`, `VisuallyHidden`, `WishlistToggle`, `Wizard`, `WizardDialog`, `WorkspaceTray`, `WorkspaceTrayPreview`, `WorkspaceWindow`, `Wrap`, `WrapItem`
+
+**Hooks (18)**
+
+`useAnchoredPanelHeight`, `useAppSwitcherShortcut`, `useBreakpointValue`, `useChartTheme`, `useCustomTheme`, `useDebouncedCallback`, `useDebouncedValue`, `useDisclosure`, `useFieldIds`, `useFileViewer`, `useFontSizeSync`, `useIsTruncated`, `useMediaQuery`, `usePrefersReducedMotion`, `useSidebarPrefs`, `useThemeMode`, `useToaster`, `useToken`
+
+**Constants (45)**
+
+`AA_NON_TEXT`, `AA_NORMAL_TEXT`, `ACCENT_GRADIENT`, `AVATAR_SEEDS`, `BORDER_WIDTHS`, `CALENDAR_DAY_CLASS`, `CATEGORICAL_SERIES`, `CONTROL_SIZES`, `CONTROL_SIZE_NAMES`, `DARK_CANVAS_LUMINANCE`, `DAY_STATE_KEYS`, `DEFAULT_CONTROL_SIZE`, `DEFAULT_DATE_FALLBACK`, `DEFAULT_FONT_SIZE`, `DISABLED_OPACITY`, `EMAIL_REGEX`, `FOCUS_HALO_WIDTH`, `FOCUS_RING_WIDTH`, `FOCUS_VISIBLE_OVER_STATE`, `FONT_SIZE_OPTIONS`, `LOW_STOCK_THRESHOLD`, `MAX_ZOOM`, `MIN_ZOOM`, `MOTION_BEZIER`, `MOTION_EASE`, `MOTION_EASE_IN`, `MOTION_EASE_OUT`, `MOTION_KEEP_CLASS`, `MOTION_LOOP_MS`, `MOTION_MS`, `MOTION_PRESS_SCALE`, `NUMERIC_TEXT`, `OVERLAY_BLUR`, `PIXELIZE_SUITE`, `PLAYBACK_SPEEDS`, `RADIUS_ROLE`, `RAISED_OVERLAY`, `REDUCED_MOTION_QUERY`, `SCRIM_OPACITY`, `SCROLLBAR_WIDTH`, `SEEK_STEP_SECONDS`, `STATUS_INK`, `TEXT_STYLES`, `TONES`, `ZOOM_STEP`
+
+**Helpers and tokens (185)**
+
+`HStack`, `VStack`, `accentTextOnCanvas`, `accentTextOnPlanes`, `appInitials`, `avatarFillFor`, `avatarScaleKeyFor`, `bandOn`, `brandThemes`, `buildDarkPalette`, `buildFileItems`, `buildFocusRing`, `buildMediaItems`, `buildSuiteApps`, `buildSurfaceRaised`, `cardRule`, `chartAxisLabelColor`, `chartInk`, `chartMode`, `chipBorder`, `chipFill`, `chipHtml`, `chipify`, `clearChunkReloadGuard`, `compositeOver`, `contrastRatio`, `controlSizeStyles`, `countMedia`, `createAccountHandoff`, `createEnumLabelResolver`, `darkPalettes`, `darkerFillRung`, `debounce`, `default`, `defaultMediaAudioPlayerLabels`, `defaultMediaDocumentStageLabels`, `defaultMediaGalleryLabels`, `defaultMediaImageViewerLabels`, `defaultMediaLightboxLabels`, `defaultMediaVideoPlayerLabels`, `defaultMediaViewerLabels`, `defaultPaginationLabels`, `defaultValidationMessages`, `describeDayStates`, `discountAmount`, `discountPercent`, `downloadBlob`, `extendTheme`, `extractTokens`, `fieldControlStyles`, `fieldLabelStyles`, `fieldMessageStyles`, `fieldSurfaces`, `fieldToken`, `fileKind`, `filterApps`, `findVariant`, `firstAvailableSelection`, `firstInvalidStep`, `flattenScreens`, `focusRingShadow`, `focusVisibleRing`, `focusVisibleStyles`, `formatCount`, `formatDate`, `formatDateRange`, `formatDateTime`, `formatPlanElapsed`, `formatPlanExpiry`, `formatPlanRemaining`, `formatPrice`, `formatRelativeTime`, `formatShortcut`, `getApiErrorMessage`, `getApiErrorStatus`, `getCategoricalSeriesColors`, `getDefaultSeriesColors`, `globalScrollbarStyles`, `gradientCss`, `groupConsecutive`, `hexToHsl`, `hexToRgb`, `hexToRgba`, `highlightSegments`, `hslToHex`, `hslToRgb`, `humanize`, `initialsFor`, `inkSafeGradient`, `inkSafeGradientToken`, `installPreloadErrorReload`, `isAllowedReturnUrl`, `isChunkLoadError`, `isControlSize`, `isDarkCanvas`, `isDayStateKey`, `isFontSize`, `isOptionAvailable`, `isTone`, `labelOnFill`, `labelOnSeries`, `lazyWithRetry`, `liftToContrast`, `lightPalettes`, `listRowBackgrounds`, `matchesShortcut`, `meetsBodyText`, `mergeRefs`, `mix`, `motionTransition`, `onFilled`, `onGradient`, `optionRowCursorSx`, `optionRowDescriptionInk`, `optionRowFill`, `optionRowInk`, `optionRowWeight`, `overlayScrim`, `overlayScrimStyles`, `palettes`, `pickAccentText`, `placeholderInk`, `placeholderInkOn`, `planPreview`, `priceRange`, `rafThrottle`, `raisedRule`, `recessOn`, `reducedMotionSx`, `relativeLuminance`, `remainingStock`, `resolveAvatarColorway`, `resolveAvatarFill`, `resolveDayStateVisual`, `resolveFilledSurface`, `resolveFontSize`, `resolveGradient`, `resolveMediaUrl`, `resolvePlanBadge`, `resolveReturnUrl`, `resolveSoftTone`, `resolveStatusTone`, `resolveSuiteApps`, `rgbToHex`, `rgbToHsl`, `ruleOn`, `safeFileName`, `scrollbarStyles`, `searchLauncher`, `searchLauncherSections`, `sectionizeByDay`, `selectionComplete`, `serializeChips`, `setRef`, `settleBetween`, `shadowsFor`, `solidFillRung`, `splitMonthsAndDays`, `statusGradient`, `stockState`, `themeNames`, `toCsv`, `toWords`, `toneInk`, `toneScale`, `toneToColorScheme`, `toneToSemantic`, `tooltipSurface`, `transitionFor`, `unitPrice`, `unknownTokens`, `validateEmail`, `validateFile`, `validateFileSize`, `validateFileType`, `validatePassword`, `validatePositiveNumber`, `validateRequired`, `validateVideoFile`, `validateVideoFileType`, `validateYoutubeUrl`, `withFocusRing`, `withLightness`, `withOutlineRung`, `wizardTransition`
+
+<!-- exports-index:end -->
+
 ## Demo app
 
 `npm start` runs a local component explorer on `http://localhost:5173` — every exported

package/dist/Components/Accordion/Accordion.js

@@ -9,6 +9,7 @@ const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const motion_2 = require("../../Theme/chakra/motion");
 const accordionColors_1 = require("./accordionColors");
+const HEADER_ACTION_RIGHT = "3.25rem";
 /** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
@@ -21,14 +22,16 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     return ((0, jsx_runtime_1.jsx)(react_2.Accordion, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
             return ((0, jsx_runtime_1.jsx)(react_2.AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c;
-                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", { children: (0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
-                                        ...(0, motion_2.reducedMotionSx)(),
-                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
-                                        "&:hover": {
-                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
-                                        },
-                                    }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform", "color", "background-color"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }) }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+                    var _a, _b, _c, _d, _e;
+                    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { as: "h2", position: item.headerAction ? "relative" : undefined, sx: item.headerAction
+                                    ? { "&:hover > button": { background: isExpanded ? expandedBg : softHover, ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.hoverbuttonStyle } }
+                                    : undefined, children: [(0, jsx_runtime_1.jsxs)(react_2.AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                            ...(0, motion_2.reducedMotionSx)(),
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle,
+                                            "&:hover": {
+                                                ...(_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.hoverbuttonStyle,
+                                            },
+                                        }, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), (0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: (0, motion_1.transitionFor)(["transform", "color", "background-color"], "base"), sx: (0, motion_2.reducedMotionSx)(), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 16 }) })] }), item.headerAction && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", top: "50%", right: HEADER_ACTION_RIGHT, transform: "translateY(-50%)", align: "center", sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.headerActionStyle, children: item.headerAction }))] }), (0, jsx_runtime_1.jsx)(react_2.AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/Components/Accordion/AccordionProps.d.ts

@@ -6,11 +6,15 @@ export type AccordionProps = ChakraAccordionProps & {
         content: React.ReactNode;
         /** Spread after the built-in style props (incl. `_hover`) — `bg`/`_hover` here replace, not merge, the expanded/hover highlight. */
         buttonProps?: AccordionButtonProps;
+        /** A control over the header's trailing edge, beside the button (a button inside a button is invalid); the header hover stays lit while the pointer is on it. Reserve its width in `header`. */
+        headerAction?: React.ReactNode;
         panelProps?: AccordionPanelProps;
         itemProps?: AccordionItemProps;
         customStyles?: {
             buttonStyle?: React.CSSProperties;
             hoverbuttonStyle?: React.CSSProperties;
+            /** Overrides the action's default `right` (button padding + chevron slot); set it when `buttonStyle` changes the button padding. */
+            headerActionStyle?: React.CSSProperties;
             panelStyle?: React.CSSProperties;
             itemStyle?: React.CSSProperties;
         };

package/dist/Components/Accordion/accordionColors.js

@@ -25,7 +25,6 @@ exports.getAccordionHoverColors = getAccordionHoverColors;
 const accordionFocusRing = (colors) => ({
     outline: "2px solid transparent",
     outlineOffset: "-2px",
-    boxShadow: `inset 0 0 0 ${focusRing_styles_1.FOCUS_RING_WIDTH - focusRing_styles_1.FOCUS_HALO_WIDTH}px ${colors.focusRing.ring}, ` +
-        `inset 0 0 0 ${focusRing_styles_1.FOCUS_RING_WIDTH}px ${colors.focusRing.halo}`,
+    boxShadow: (0, focusRing_styles_1.insetFocusRingShadow)(colors),
 });
 exports.accordionFocusRing = accordionFocusRing;

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChart.js

@@ -97,6 +97,7 @@ const ApexLineChart = ({ data, labels, title, height, width, lineColors, titlePo
             zoom: { enabled: !isSmall },
             toolbar: { show: showToolbar },
         }),
+        theme: { mode: (0, chartColorsFromTheme_1.chartMode)(palette) },
         stroke: { curve: "smooth", width: 2, lineCap: "round" },
         colors: resolvedLineColors,
         xaxis: {

package/dist/Components/Apexcharts/ApexLineChart/ApexLineChartProps.d.ts

@@ -1,6 +1,6 @@
 /** Renders exactly one line from `data`; not a substitute for ApexBarChart/ApexPieChart when comparing multiple series side by side. */
 export type ApexLineChartProps = {
-    /** "realtime" doesn't animate your data — after mount it overwrites the series with Math.random() values every second instead. */
+    /** @deprecated "realtime" does not animate your data: it appends Math.random() values every second. Removed in the next major. */
     variant?: LineChartVariant;
     /** Read only at mount — later prop updates are silently ignored unless this component remounts (new `key`). */
     data: number[];
@@ -32,5 +32,5 @@ export type ApexLineChartProps = {
     };
     toolbarBreakpointPct?: number;
 };
-/** Chart mode: "basic" plots `data` as given; "realtime" instead free-runs on random values — see `variant` below. */
+/** Chart mode: "basic" plots `data` as given; "realtime" instead free-runs on random values — see `variant`. */
 export type LineChartVariant = "basic" | "realtime";

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChart.d.ts

@@ -1,4 +1,4 @@
 import { ApexPieChartProps } from "./ApexPieChartProps";
 /** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
-declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, showDataLabels, minLabelPercent, surfaceColor, donutSize, totalLabel, labelPlacement, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
+declare const ApexPieChart: ({ data, labels, title, height, width, donutColors, chartColor, titlePosition, titleStyle, legendPosition, legendStyle, variant, showDataLabels, minLabelPercent, surfaceColor, donutSize, totalLabel, labelPlacement, images, }: ApexPieChartProps) => import("react/jsx-runtime").JSX.Element;
 export default ApexPieChart;

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

@@ -10,6 +10,7 @@ const chartColorsFromTheme_1 = require("../../../Theme/tokens/builders/chartColo
 const chartBase_1 = require("../chartBase");
 const LazyReactApexChart_1 = __importDefault(require("../LazyReactApexChart"));
 const ApexChartFallback_1 = __importDefault(require("../ApexChartFallback"));
+const pieImageTexture_1 = require("./pieImageTexture");
 const getValidLegendPosition = (position) => {
     const validPositions = ["left", "right", "top", "bottom"];
     if (validPositions.includes(position)) {
@@ -19,7 +20,7 @@ const getValidLegendPosition = (position) => {
     return "bottom";
 };
 /** Pie/donut chart wrapper around react-apexcharts, themed via chartColorsFromTheme + chartBase. */
-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", }) => {
+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", images, }) => {
     var _a;
     const { colors: palette } = (0, useCustomTheme_1.useCustomTheme)();
     const ink = (0, chartColorsFromTheme_1.chartInk)(palette);
@@ -36,6 +37,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
             ? "outside"
             : "none"
         : labelPlacement;
+    const sliceCount = data.length;
     const labelsOn = showDataLabels && placement !== "none";
     const outside = placement === "outside";
     const validLegendPosition = getValidLegendPosition(legendPosition);
@@ -92,10 +94,7 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
                     fill: {
                         type: "image",
                         image: {
-                            src: [
-                                "https://i.imgur.com/UM3mrju.jpg",
-                                "https://i.imgur.com/NpPOqQq.jpg",
-                            ],
+                            src: images !== null && images !== void 0 ? images : Array.from({ length: sliceCount }, (_, i) => (0, pieImageTexture_1.pieImageTexture)(seriesColors[i % seriesColors.length], gap)),
                         },
                     },
                 };
@@ -185,6 +184,8 @@ const ApexPieChart = ({ data, labels, title, height = 400, width = 500, donutCol
         totalLabel,
         ink.muted,
         ink.text,
+        images,
+        sliceCount,
     ]);
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ApexChartFallback_1.default, { height: height, width: width }), children: (0, jsx_runtime_1.jsx)(LazyReactApexChart_1.default, { options: options, series: data, type: (_a = options.chart) === null || _a === void 0 ? void 0 : _a.type, height: height, width: width }) }) }));
 };

package/dist/Components/Apexcharts/ApexPieChart/ApexPieChartProps.d.ts

@@ -26,6 +26,8 @@ export type ApexPieChartProps = {
     donutSize?: string;
     totalLabel?: string;
     labelPlacement?: "auto" | "inside" | "outside" | "none";
+    /** Only for `variant="pie-with-image"`: one image source per slice (the first repeats past the end). Omitted, each slice gets a themed striped texture in its own colour. */
+    images?: string[];
     legendStyle?: {
         colors?: string | string[];
         useSeriesColors?: boolean;
@@ -36,5 +38,5 @@ export type ApexPieChartProps = {
         markerOffsetY?: number;
     };
 };
-/** Visual preset for the pie/donut fill; "pie-with-image" is fixed to two placeholder images, not configurable via props. */
+/** Visual preset for the pie/donut fill; "pie-with-image" fills slices from the `images` prop, or from inline striped textures when it is omitted. */
 export type DonutPieVariant = "pie" | "donut" | "update-donut" | "monochrome-pie" | "gradient-donut" | "semi-donut" | "donut-with-pattern" | "pie-with-image";

package/dist/Components/Apexcharts/ApexPieChart/pieImageTexture.d.ts

@@ -0,0 +1,2 @@
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+export declare function pieImageTexture(color: string, stripe: string): string;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pieImageTexture = pieImageTexture;
+const SIZE = 400;
+/** A diagonal-stripe SVG data URI: `color` ground with translucent `stripe` bands, no network. */
+function pieImageTexture(color, stripe) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${SIZE}" height="${SIZE}" viewBox="0 0 ${SIZE} ${SIZE}">` +
+        `<defs><pattern id="s" width="24" height="24" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">` +
+        `<rect width="10" height="24" fill="${stripe}" fill-opacity="0.28"/></pattern></defs>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="${color}"/>` +
+        `<rect width="${SIZE}" height="${SIZE}" fill="url(#s)"/></svg>`;
+    return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}

package/dist/Components/AppSwitcher/AppSwitcher.js

@@ -50,6 +50,9 @@ const Kbd_1 = __importDefault(require("../Kbd/Kbd"));
 const AppMark_1 = __importStar(require("./AppMark"));
 const AppSwitcherProps_1 = require("./AppSwitcherProps");
 const useAppSwitcherShortcut_1 = require("./useAppSwitcherShortcut");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_BORDER_COLOR_TRANSITION = (0, motion_1.transitionFor)(["background", "border-color"]);
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const COLUMNS = 2;
 const HEADING = "Your apps";
 const s = { trigger: "36px", mark: "32px", icon: 17, name: "0.875rem", sub: "0.75rem", row: "52px" };
@@ -220,7 +223,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
     const currentSub = (0, outlineRung_1.liftToContrast)(theme.colors.textMuted, currentBg, accentText_1.AA_NORMAL_TEXT);
     const width = panelWidth !== null && panelWidth !== void 0 ? panelWidth : "28rem";
     const hint = shortcut && showShortcutHint ? (0, AppSwitcherProps_1.formatShortcut)(shortcut) : null;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: "background 0.15s ease, border-color 0.15s ease", _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.Popover, { isOpen: isOpen, onOpen: () => setOpen(true), onClose: () => { setOpen(false); setQuery(""); }, placement: "bottom-end", initialFocusRef: showSearch ? searchRef : undefined, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsx)(react_2.Flex, { ref: triggerRef, as: "button", type: "button", "aria-label": ariaLabel, align: "center", justify: "center", boxSize: s.trigger, borderRadius: "lg", border: "1px solid", borderColor: isOpen ? theme.colors.boxborder[500] : theme.colors.boxborder[200], bg: isOpen ? theme.colors.backgroundColor.tertiary : "transparent", color: isOpen ? theme.colors.text[900] : theme.colors.textMuted, cursor: "pointer", transition: BACKGROUND_BORDER_COLOR_TRANSITION, _hover: { bg: rowHoverBg, color: theme.colors.text[900] }, onKeyDown: (e) => {
                         if (!isOpen) {
                             if (e.key === "ArrowDown") {
                                 e.preventDefault();
@@ -229,7 +232,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                             return;
                         }
                         handlePanelKeyDown(e);
-                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1" }), hint && (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: hint })] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
+                    }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Grip, { size: s.icon + 1 }) }) }), (0, jsx_runtime_1.jsx)(react_2.PopoverContent, { w: width, maxW: "calc(100vw - 1.5rem)", textAlign: "start", onKeyDown: handlePanelKeyDown, bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: "float", _focus: { outline: "none", boxShadow: "float" }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, px: 3, pt: 3, pb: showSearch ? 2 : 1, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs-minus", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: theme.colors.textMuted, children: HEADING }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: "1" }), hint && (0, jsx_runtime_1.jsx)(Kbd_1.default, { size: "xs", children: hint })] }), showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { px: 3, pb: 2, children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Search apps", borderRadius: "lg", "aria-label": "Search apps", onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && visible.length > 0) {
                                                 e.preventDefault();
                                                 focusItem(0);
@@ -267,7 +270,7 @@ const AppSwitcher = ({ apps, currentAppId, onSelect, onOpenChange, isSearchable,
                                                     borderEndStartRadius: "lg",
                                                     bg: currentBar,
                                                 }
-                                                : undefined, transition: "background 0.12s ease", _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.name, fontWeight: 600, color: app.locked
+                                                : undefined, transition: BACKGROUND_TRANSITION, _hover: interactive ? { bg: rowHoverBg } : undefined, onClick: (e) => handleSelect(app, e), onKeyDown: (e) => handleItemKeyDown(e, app), children: [(0, jsx_runtime_1.jsx)(AppMark_1.default, { app: app, hue: hues[apps.indexOf(app)], boxSize: s.mark, iconSize: s.icon, muted: app.locked }), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: "1", minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1.5, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.name, fontWeight: 600, color: app.locked
                                                                         ? theme.colors.textMuted
                                                                         : isCurrent
                                                                             ? currentName

package/dist/Components/AppSwitcher/AppSwitcherProps.d.ts

@@ -64,9 +64,11 @@ export interface SuiteAppSource extends Omit<AppOption, "url"> {
 export interface SuiteUrlOptions {
     baseUrl: string;
     baseSubdomain: string;
+    /** Opt-in for hosts with no `baseSubdomain` label (plain `localhost`): other apps derive from this labelled URL instead of throwing, and the app owning `baseSubdomain` keeps `baseUrl`. */
+    devFallbackBaseUrl?: string;
 }
 /**
  * Derives every app's origin from the host the consumer is already served on, so one deployment
  * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
  */
-export declare const buildSuiteApps: (apps: SuiteAppSource[], { baseUrl, baseSubdomain }: SuiteUrlOptions) => AppOption[];
+export declare const buildSuiteApps: (apps: SuiteAppSource[], { baseUrl, baseSubdomain, devFallbackBaseUrl }: SuiteUrlOptions) => AppOption[];

package/dist/Components/AppSwitcher/AppSwitcherProps.js

@@ -58,30 +58,37 @@ const shortcutKeys = (shortcut, isApple = isAppleNow()) => {
 exports.shortcutKeys = shortcutKeys;
 const formatShortcut = (shortcut, isApple = isAppleNow()) => (0, exports.shortcutKeys)(shortcut, isApple).join(isApple ? "" : "+");
 exports.formatShortcut = formatShortcut;
-/**
- * Derives every app's origin from the host the consumer is already served on, so one deployment
- * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
- */
-const buildSuiteApps = (apps, { baseUrl, baseSubdomain }) => {
-    let base;
+const parseAbsolute = (option, raw) => {
     try {
-        base = new URL(baseUrl.trim());
+        return new URL(raw.trim());
     }
     catch {
-        throw new Error(`[AppSwitcher] buildSuiteApps: baseUrl ${JSON.stringify(baseUrl)} is not an absolute URL.`);
+        throw new Error(`[AppSwitcher] buildSuiteApps: ${option} ${JSON.stringify(raw)} is not an absolute URL.`);
     }
-    const labels = base.hostname.split(".");
+};
+/**
+ * Derives every app's origin from the host the consumer is already served on, so one deployment
+ * variable keeps dev, test and prod in step. An app may still carry its own `url`, which wins.
+ */
+const buildSuiteApps = (apps, { baseUrl, baseSubdomain, devFallbackBaseUrl }) => {
+    const base = parseAbsolute("baseUrl", baseUrl);
+    const hostHasLabel = base.hostname.split(".").includes(baseSubdomain);
+    const useFallback = !hostHasLabel && devFallbackBaseUrl !== undefined;
+    const source = useFallback ? parseAbsolute("devFallbackBaseUrl", devFallbackBaseUrl) : base;
+    const labels = source.hostname.split(".");
     const at = labels.indexOf(baseSubdomain);
     return apps.map(({ subdomain, url, ...app }) => {
         if (url)
             return { ...app, url: url.trim() };
+        if (useFallback && subdomain === baseSubdomain)
+            return { ...app, url: base.origin };
         // Without the label there is nothing to swap, and every app would silently share one origin.
         if (at === -1) {
             throw new Error(`[AppSwitcher] buildSuiteApps: ${JSON.stringify(baseSubdomain)} is not a label in ` +
-                `"${base.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
+                `"${source.hostname}", so ${JSON.stringify(app.name)} has no derivable url. ` +
                 `Give that app an explicit url, or pass a baseUrl that contains the label.`);
         }
-        const next = new URL(base.toString());
+        const next = new URL(source.toString());
         next.hostname = labels.map((l, i) => (i === at ? subdomain : l)).join(".");
         return { ...app, url: next.origin };
     });

package/dist/Components/AppSwitcher/pixelizeSuite.d.ts

@@ -0,0 +1,24 @@
+import { type AppOption, type SuiteAppSource, type SuiteUrlOptions } from "./AppSwitcherProps";
+/** Every app in the Pixelize suite. */
+export type SuiteAppId = "crm" | "account" | "tickets" | "billing" | "hrms" | "social";
+/** One catalogue entry: switcher copy plus whether the app is hidden from production lists. */
+export interface PixelizeSuiteApp extends SuiteAppSource {
+    id: SuiteAppId;
+    /** Hidden from production lists (except as the current app) until a deployment overrides it to false. */
+    preRelease?: boolean;
+}
+/** The default Pixelize app list; `resolveSuiteApps` `overrides` change a single app without forking it. */
+export declare const PIXELIZE_SUITE: readonly PixelizeSuiteApp[];
+/** Options for `resolveSuiteApps`; the URL fields are `buildSuiteApps`'s. */
+export interface ResolveSuiteAppsOptions extends SuiteUrlOptions {
+    /** The app this UI runs inside; always listed, even while pre-release. */
+    currentAppId: SuiteAppId;
+    /** Production drops pre-release apps so customers are never linked to a dead host. */
+    isProduction: boolean;
+    /** Explicit origin per app (e.g. Account's own deployment variable); wins over derivation. An undefined value falls back to derivation. */
+    urls?: Partial<Record<SuiteAppId, string>>;
+    /** Per-app changes to the catalogue entry, e.g. `{ hrms: { preRelease: false } }` once it ships. */
+    overrides?: Partial<Record<SuiteAppId, Partial<Omit<PixelizeSuiteApp, "id">>>>;
+}
+/** The catalogue as a ready `AppSwitcher` list: pre-release filtering, per-app `urls` and `overrides`, then `buildSuiteApps`. */
+export declare const resolveSuiteApps: ({ currentAppId, isProduction, urls, overrides, ...urlOptions }: ResolveSuiteAppsOptions) => AppOption[];

package/dist/Components/AppSwitcher/pixelizeSuite.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveSuiteApps = exports.PIXELIZE_SUITE = void 0;
+const lucide_react_1 = require("lucide-react");
+const AppSwitcherProps_1 = require("./AppSwitcherProps");
+/** The default Pixelize app list; `resolveSuiteApps` `overrides` change a single app without forking it. */
+exports.PIXELIZE_SUITE = [
+    {
+        id: "crm",
+        subdomain: "crm",
+        name: "CRM",
+        description: "Leads, deals and pipeline",
+        icon: lucide_react_1.LayoutGrid,
+        keywords: ["leads", "deals", "pipeline", "contacts", "sales"],
+    },
+    {
+        id: "account",
+        subdomain: "account",
+        name: "Account",
+        description: "Organization and members",
+        icon: lucide_react_1.Building2,
+        keywords: ["organization", "members", "roles", "settings", "profile"],
+    },
+    {
+        id: "tickets",
+        subdomain: "tickets",
+        name: "Tickets",
+        description: "Support requests and queues",
+        icon: lucide_react_1.Headphones,
+        keywords: ["support", "helpdesk", "issues", "sla"],
+    },
+    {
+        id: "billing",
+        subdomain: "billing",
+        name: "Billing",
+        description: "Invoices and plans",
+        icon: lucide_react_1.Receipt,
+        keywords: ["invoices", "plans", "payments", "subscription"],
+        preRelease: true,
+    },
+    {
+        id: "hrms",
+        subdomain: "hrms",
+        name: "HRMS",
+        description: "People, leave and payroll",
+        icon: lucide_react_1.Users,
+        keywords: ["people", "employees", "leave", "attendance", "payroll"],
+        preRelease: true,
+    },
+    {
+        id: "social",
+        subdomain: "social",
+        name: "Social",
+        description: "Campaigns and inbox",
+        icon: lucide_react_1.Megaphone,
+        keywords: ["campaigns", "posts", "inbox", "marketing"],
+        preRelease: true,
+    },
+];
+/** The catalogue as a ready `AppSwitcher` list: pre-release filtering, per-app `urls` and `overrides`, then `buildSuiteApps`. */
+const resolveSuiteApps = ({ currentAppId, isProduction, urls, overrides, ...urlOptions }) => {
+    const sources = exports.PIXELIZE_SUITE.flatMap((entry) => {
+        const { preRelease, ...app } = { ...entry, ...overrides === null || overrides === void 0 ? void 0 : overrides[entry.id] };
+        if (isProduction && preRelease && app.id !== currentAppId)
+            return [];
+        const url = urls === null || urls === void 0 ? void 0 : urls[app.id];
+        return [url ? { ...app, url } : app];
+    });
+    return (0, AppSwitcherProps_1.buildSuiteApps)(sources, urlOptions);
+};
+exports.resolveSuiteApps = resolveSuiteApps;

package/dist/Components/AppearanceSettings/AppearanceSettings.js

@@ -13,7 +13,7 @@ const fontSize_1 = require("../../Theme/provider/fontSize");
 const brands_1 = require("../../Theme/tokens/brands");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const SelectV2_1 = __importDefault(require("../SelectV2/SelectV2"));
+const Select_1 = __importDefault(require("../Select/Select"));
 const FieldLabel = ({ children }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     return ((0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, color: colors.textMuted, mb: 2, children: children }));
@@ -30,11 +30,11 @@ const AppearanceSettings = ({ brand, fontSize, onBrandChange, onFontSizeChange,
     const themeLabel = (_a = labels === null || labels === void 0 ? void 0 : labels.theme) !== null && _a !== void 0 ? _a : "Theme";
     const colorModeLabel = (_b = labels === null || labels === void 0 ? void 0 : labels.colorMode) !== null && _b !== void 0 ? _b : "Color mode";
     const fontSizeLabel = (_c = labels === null || labels === void 0 ? void 0 : labels.fontSize) !== null && _c !== void 0 ? _c : "Font Size";
-    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [showBrand && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: themeLabel }), (0, jsx_runtime_1.jsx)(SelectV2_1.default, { options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [showBrand && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: themeLabel }), (0, jsx_runtime_1.jsx)(Select_1.default, { native: false, options: brandOptions, value: brand, isSearchable: false, size: size, "aria-label": themeLabel, "data-testid": "appearance-brand-select", onChange: (option) => {
                             if (!option)
                                 return;
                             onBrandChange === null || onBrandChange === void 0 ? void 0 : onBrandChange(String(option.id));
-                        } })] })), showColorMode && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: colorModeLabel }), (0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "appearance-mode-switcher", children: (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: fontSizeLabel }), (0, jsx_runtime_1.jsx)(SelectV2_1.default, { options: fontSize_1.FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
+                        } })] })), showColorMode && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: colorModeLabel }), (0, jsx_runtime_1.jsx)(react_2.Box, { "data-testid": "appearance-mode-switcher", children: (0, jsx_runtime_1.jsx)(provider_1.ThemeSwitcher, { variant: "segmented", showBrandPicker: false, size: size, "aria-label": colorModeLabel }) })] })), showFontSize && ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsx)(FieldLabel, { children: fontSizeLabel }), (0, jsx_runtime_1.jsx)(Select_1.default, { native: false, options: fontSize_1.FONT_SIZE_OPTIONS, value: fontSize, isSearchable: false, size: size, "aria-label": fontSizeLabel, "data-testid": "appearance-font-size-select", 
                         // Each row previews the size it sets, so the list is self-explaining.
                         renderOption: (option) => ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", style: { fontSize: String(option.id) }, children: option.label })), onChange: (option) => {
                             if (!option)

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

@@ -1,4 +1,4 @@
-import type { SelectV2Size } from "../SelectV2/SelectV2Props";
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
 /** i18n overrides for this panel's field labels; any key left out keeps the library's English default. */
 export type AppearanceSettingsLabels = {
     theme?: string;
@@ -14,7 +14,7 @@ export type AppearanceSettingsProps = {
     showBrand?: boolean;
     showColorMode?: boolean;
     showFontSize?: boolean;
-    size?: SelectV2Size;
+    size?: Extract<ControlSize, "sm" | "md" | "lg">;
     /** Pass translated strings; the library ships English defaults. */
     labels?: AppearanceSettingsLabels;
 };

package/dist/Components/Avatar/avatarColorway.d.ts

@@ -1,11 +1,11 @@
 import type { PaletteProps } from "../../Theme/tokens/types";
-declare const AVATAR_SCALE_KEYS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink"];
+export declare const AVATAR_SCALE_KEYS: readonly ["red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink"];
 export type AvatarScaleKey = (typeof AVATAR_SCALE_KEYS)[number];
 export declare const avatarScaleKeyFor: (seed: string) => AvatarScaleKey;
 export type AvatarColorway = {
     bg: string;
     color: string;
 };
+export declare const avatarColorwayFor: (key: AvatarScaleKey, colors: PaletteProps) => AvatarColorway;
 export declare const resolveAvatarColorway: (seed: string, colors: PaletteProps) => AvatarColorway;
 export declare const initialsFor: (name: string) => string;
-export {};

package/dist/Components/Avatar/avatarColorway.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.initialsFor = exports.resolveAvatarColorway = exports.avatarScaleKeyFor = void 0;
+exports.initialsFor = exports.resolveAvatarColorway = exports.avatarColorwayFor = exports.avatarScaleKeyFor = exports.AVATAR_SCALE_KEYS = void 0;
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
-const AVATAR_SCALE_KEYS = [
+exports.AVATAR_SCALE_KEYS = [
     "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
 ];
 const hashSeed = (seed) => {
@@ -11,14 +11,15 @@ const hashSeed = (seed) => {
         hash = (hash * 31 + seed.charCodeAt(i)) >>> 0;
     return hash;
 };
-const avatarScaleKeyFor = (seed) => AVATAR_SCALE_KEYS[hashSeed(seed) % AVATAR_SCALE_KEYS.length];
+const avatarScaleKeyFor = (seed) => exports.AVATAR_SCALE_KEYS[hashSeed(seed) % exports.AVATAR_SCALE_KEYS.length];
 exports.avatarScaleKeyFor = avatarScaleKeyFor;
 // Always via resolveFilledSurface, never scale[500] + a guessed ink.
-const resolveAvatarColorway = (seed, colors) => {
-    const scale = colors[(0, exports.avatarScaleKeyFor)(seed)];
-    const { fill, color } = (0, filledSurface_1.resolveFilledSurface)(scale, colors);
+const avatarColorwayFor = (key, colors) => {
+    const { fill, color } = (0, filledSurface_1.resolveFilledSurface)(colors[key], colors);
     return { bg: fill, color };
 };
+exports.avatarColorwayFor = avatarColorwayFor;
+const resolveAvatarColorway = (seed, colors) => (0, exports.avatarColorwayFor)((0, exports.avatarScaleKeyFor)(seed), colors);
 exports.resolveAvatarColorway = resolveAvatarColorway;
 const initialsFor = (name) => {
     const words = name.trim().split(/\s+/).filter(Boolean);

package/dist/Components/Breadcrumbs/BreadcrumbsProps.d.ts

@@ -2,7 +2,7 @@ import { BreadcrumbProps } from "@chakra-ui/react";
 /** `isCurrentPage` marks only the last item in `items`; `handleClick` fully replaces the link's default navigation. */
 export type BreadcrumbsProps = Pick<BreadcrumbProps, "spacing" | "separator" | "fontWeight" | "fontSize"> & {
     isCurrentPage?: boolean;
-    /** Accepted but never read by Breadcrumbs — has no effect at all. */
+    /** @deprecated Never read by Breadcrumbs — has no effect at all. */
     isLastChild?: boolean;
     /** Called with a crumb's path; never called for a label-only crumb (no `path`). */
     handleClick: (path: string) => void;

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

@@ -8,6 +8,8 @@ const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const motion_1 = require("../../Theme/chakra/motion");
 const primitives_1 = require("../../Theme/tokens/primitives");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
+const states_1 = require("../../Theme/tokens/primitives/states");
 const BUTTON_TRANSITION = [
     (0, primitives_1.transitionFor)(["background-color", "border-color", "color", "box-shadow", "filter"]),
     (0, primitives_1.transitionFor)(["transform"], "fast", "out"),
@@ -27,6 +29,7 @@ const controlSize = (size) => {
 // NOTE: a bare button sits on the canvas, a card or an overlay; dark overlays are the hardest plane.
 const onCanvasText = (theme, colorScheme) => (0, accentText_1.accentTextOnPlanes)(theme.colors[colorScheme], [
     theme.colors.backgroundColor.main,
+    theme.colors.backgroundColor.base,
     theme.colors.background[50],
     theme.colors.surfaceRaised,
 ]);
@@ -75,7 +78,7 @@ exports.Button = {
         transition: BUTTON_TRANSITION,
         ...(0, motion_1.reducedMotionSx)(),
         _disabled: {
-            opacity: 0.6,
+            opacity: states_1.DISABLED_OPACITY,
             cursor: "not-allowed",
         },
         ...focusRing(theme),
@@ -114,7 +117,7 @@ exports.Button = {
         outline: ({ theme, colorScheme = "primary" }) => {
             const ink = onCanvasText(theme, colorScheme);
             return {
-                border: "0.0625rem solid",
+                border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`,
                 borderColor: ink,
                 color: ink,
                 bg: "transparent",