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

package/dist/Components/ProductDetails/ProductDetails.js

@@ -34,6 +34,7 @@ const ReviewList_1 = __importDefault(require("../ReviewList/ReviewList"));
 const commerceVariants_1 = require("../Commerce/commerceVariants");
 const productDetailsModel_1 = require("./productDetailsModel");
 const useInViewport_1 = require("./useInViewport");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
 const DESKTOP_QUERY = "(min-width: 1024px)";
 const DESKTOP_MIN_WIDTH = 960;
 const DEFAULT_ADDED_MS = 1600;
@@ -211,7 +212,7 @@ const ProductDetails = ({ product, selection: selectionProp, defaultSelection, o
     const badgeSlot = product.badges && product.badges.length > 0 ? (0, jsx_runtime_1.jsx)(ProductBadges_1.default, { badges: product.badges, max: 2, variant: "glass", size: "md" }) : undefined;
     const gallery = mediaSlot !== null && mediaSlot !== void 0 ? mediaSlot : ((0, jsx_runtime_1.jsx)(MediaGallery_1.default, { media: product.media, layout: desktop ? "thumbs-left" : "swipe", aspectRatio: "4/5", activeMediaIds: activeIds, sticky: desktop, stickyTop: 24, badges: badgeSlot, actions: desktop ? undefined : wishlist, isLoading: isLoading, "aria-label": product.title }));
     const primaryButton = ((0, jsx_runtime_1.jsx)(Button_1.default, { size: controlSize, width: "100%", variant: notifyMode ? "outline" : "solid", label: primaryLabel, leftIcon: bag === "added" ? (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, "aria-hidden": true }) : notifyMode ? (0, jsx_runtime_1.jsx)(lucide_react_1.BellRing, { size: 18, "aria-hidden": true }) : undefined, isLoading: bag === "adding", onClick: notifyMode ? handleNotify : handleAdd, fontWeight: 600 }));
-    const buyPanel = isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2rem", width: "90%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2.5rem", width: "45%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : ((0, jsx_runtime_1.jsx)("span", {})), onShare ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: colors.background[100] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 20, "aria-hidden": true }) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: (0, productDetailsModel_1.packUnitPrice)(product, selection, price), ...fmt }), state ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? (0, jsx_runtime_1.jsx)(OffersList_1.default, { offers: offers, ...offersProps }) : null, axes.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: selectorRef, children: (0, jsx_runtime_1.jsx)(VariantSelector_1.default, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, ref: ctaRef, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [showStepper ? ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: controlSize, value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? (0, jsx_runtime_1.jsx)(Button_1.default, { size: controlSize, width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? (0, jsx_runtime_1.jsx)(PincodeChecker_1.default, { ...pincode }) : null, trustItems && trustItems.length > 0 ? (0, jsx_runtime_1.jsx)(TrustBadges_1.default, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
+    const buyPanel = isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 4, "aria-busy": "true", children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "1rem", width: "30%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2rem", width: "90%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "2.5rem", width: "45%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: "3rem", width: "100%" })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", gap: 3, minH: product.brand || onShare ? "2.75rem" : undefined, children: [product.brand ? ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", fontSize: "sm", fontWeight: 600, color: colors.textMuted, children: product.brand })) : ((0, jsx_runtime_1.jsx)("span", {})), onShare ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": labels.share, onClick: onShare, display: "inline-flex", alignItems: "center", justifyContent: "center", boxSize: "2.75rem", mr: "-0.625rem", borderRadius: "full", color: colors.header[900], transition: (0, motion_1.transitionFor)(["background-color"]), _hover: { bg: (0, tonalHover_1.tonalHover)(colors, colors.background[50], colors.background[100]) }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_2.reducedMotionSx)() }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Share2, { size: 20, "aria-hidden": true }) })) : null] }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "h1", fontSize: desktop ? "1.75rem" : "1.375rem", lineHeight: 1.25, fontWeight: 700, letterSpacing: "-0.02em", color: colors.header[900], children: product.title }), product.rating !== undefined && showReviews ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: jumpToReviews, "aria-label": labels.jumpToReviews(ratingText), alignSelf: "flex-start", display: "inline-flex", alignItems: "center", minH: "2.75rem", borderRadius: "md", sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: (0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", "aria-label": ratingText, locale: locale }) })) : product.rating !== undefined ? ((0, jsx_runtime_1.jsx)(Rating_1.default, { value: product.rating, count: product.ratingCount, size: "sm", locale: locale })) : null] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(PriceBlock_1.default, { size: "lg", price: price, mrp: mrp, priceRange: showRange ? range : undefined, showSavings: true, taxNote: labels.taxNote, unitPrice: (0, productDetailsModel_1.packUnitPrice)(product, selection, price), ...fmt }), state ? (0, jsx_runtime_1.jsx)(StockStatus_1.default, { status: state, count: variant === null || variant === void 0 ? void 0 : variant.stock }) : null, metaSlot] }), offers && offers.length > 0 ? (0, jsx_runtime_1.jsx)(OffersList_1.default, { offers: offers, ...offersProps }) : null, axes.length > 0 ? ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: selectorRef, children: (0, jsx_runtime_1.jsx)(VariantSelector_1.default, { axes: axes, variants: variants, value: selection, onValueChange: handleSelection, error: showSelectError && !complete ? selectPrompt : undefined, showSelectedLabel: true, showLowStock: true, onGuideClick: onGuideClick }) })) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: 3, ref: ctaRef, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 3, children: [showStepper ? ((0, jsx_runtime_1.jsx)(QuantityStepper_1.default, { size: controlSize, value: quantity, onValueChange: handleQuantity, min: 1, max: ceiling, itemLabel: product.title })) : null, (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, minW: 0, children: primaryButton }), desktop ? wishlist : null] }), showBuyNow ? (0, jsx_runtime_1.jsx)(Button_1.default, { size: controlSize, width: "100%", variant: "outline", label: labels.buyNow, onClick: handleBuyNow }) : null, addFailed ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { role: "alert", align: "center", gap: 1.5, color: colors.semanticText.error, fontSize: "sm", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { size: 14, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", children: labels.addFailed })] })) : null] }), pincode ? (0, jsx_runtime_1.jsx)(PincodeChecker_1.default, { ...pincode }) : null, trustItems && trustItems.length > 0 ? (0, jsx_runtime_1.jsx)(TrustBadges_1.default, { items: trustItems, layout: desktop ? "grid" : "row" }) : null, infoSlot] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ref: rootRef, "data-testid": testId, "data-layout": desktop ? "desktop" : "mobile", w: "100%", maxW: "82rem", mx: "auto", px: desktop ? 6 : 0, children: [(0, jsx_runtime_1.jsx)(react_2.VisuallyHidden, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }), breadcrumbs ? (0, jsx_runtime_1.jsx)(react_2.Box, { px: desktop ? 0 : gutter, py: 3, children: breadcrumbs }) : null, (0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: desktop ? "row" : "column", align: desktop ? "flex-start" : "stretch", gap: desktop ? 12 : 5, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: desktop ? "1.63 1 0" : undefined, minW: 0, w: desktop ? undefined : "100%", children: gallery }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: desktop ? "1 1 0" : undefined, minW: 0, px: desktop ? 0 : gutter, children: buyPanel })] }), !isLoading ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", gap: sectionGap, mt: sectionGap, px: desktop ? 0 : gutter, children: [(0, jsx_runtime_1.jsx)(DetailSections_1.default, { description: product.description, highlights: product.highlights, specs: product.specs, care: care, shipping: product.returnsNote, legal: hasLegal
                             ? {
                                 netQuantity: product.netQuantity,

package/dist/Components/ProfileCard/ProfileCard.d.ts

@@ -3,4 +3,5 @@ import { ProfileCardProps, ProfileCardHeaderSlotProps, ProfileCardBodySlotProps,
 export declare const ProfileCardHeader: React.FC<ProfileCardHeaderSlotProps>;
 export declare const ProfileCardBody: React.FC<ProfileCardBodySlotProps>;
 export declare const ProfileCardFooter: React.FC<ProfileCardFooterSlotProps>;
+/** Card built from ProfileCardHeader, Body and Footer slots; other children are dropped. */
 export default function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize, dividervariant, CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/ProfileCard/ProfileCard.js

@@ -1,14 +1,12 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = void 0;
 exports.default = ProfileCard;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@chakra-ui/react");
+const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const warnDroppedSlotChildren_1 = require("../Modal/warnDroppedSlotChildren");
+const findSlot_1 = require("../Common/findSlot");
 const ProfileCardHeader = ({ children, }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
@@ -21,39 +19,27 @@ const ProfileCardFooter = ({ children, }) => {
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
 };
 exports.ProfileCardFooter = ProfileCardFooter;
-const isReactElement = (child) => child !== null && typeof child === "object" && "type" in child;
-// Matches by type one Fragment deep, so `<>{cond && <ProfileCardFooter>...</ProfileCardFooter>}</>` isn't dropped.
-const findSlot = (children, slot) => {
-    for (const child of react_1.default.Children.toArray(children)) {
-        if (!isReactElement(child))
-            continue;
-        if (child.type === slot)
-            return child;
-        if (child.type === react_1.default.Fragment) {
-            const nested = findSlot(child.props.children, slot);
-            if (nested)
-                return nested;
-        }
-    }
-    return undefined;
-};
+const SLOTS = [exports.ProfileCardHeader, exports.ProfileCardBody, exports.ProfileCardFooter];
+const DROPPED_ADVICE = "Render it outside the card.";
+/** Card built from ProfileCardHeader, Body and Footer slots; other children are dropped. */
 function ProfileCard({ maxW, align, variant, direction, justify, children, size, color, overflow, dividercolor, dividersize = "1px", dividervariant = "solid", CardStyle, CardHeaderStyle, CardBodyStyle, borderTopColor, borderLeftColor, }) {
     var _a;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const resolvedDividerColor = dividercolor !== null && dividercolor !== void 0 ? dividercolor : colors.boxborder[200];
     const accentBorder = `2px solid ${colors.primary[500]}`;
-    const header = findSlot(children, exports.ProfileCardHeader);
-    const body = findSlot(children, exports.ProfileCardBody);
-    const footer = findSlot(children, exports.ProfileCardFooter);
+    const header = (0, findSlot_1.findSlot)(children, exports.ProfileCardHeader);
+    const body = (0, findSlot_1.findSlot)(children, exports.ProfileCardBody);
+    const footer = (0, findSlot_1.findSlot)(children, exports.ProfileCardFooter);
+    (0, warnDroppedSlotChildren_1.warnDroppedSlotChildren)("ProfileCard", children, SLOTS, DROPPED_ADVICE);
     const StylesWithBorder = borderLeftColor
         ? { ...CardStyle, borderLeft: accentBorder }
         : borderTopColor
             ? { ...CardStyle, borderTop: accentBorder }
             : { ...CardStyle };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Card, { maxW: maxW, align: align, variant: variant === "outlein" ? "outline" : variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.CardHeader, { sx: CardHeaderStyle, ...header.props, children: header }), (0, jsx_runtime_1.jsx)(react_2.Divider, { opacity: 1, style: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.Card, { maxW: maxW, align: align, variant: variant === "outlein" ? "outline" : variant, direction: direction, justify: justify, size: size, overflow: overflow, colorScheme: color, style: StylesWithBorder, children: [header && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.CardHeader, { sx: CardHeaderStyle, ...header.props, children: header }), (0, jsx_runtime_1.jsx)(react_1.Divider, { opacity: 1, style: {
                             borderColor: resolvedDividerColor,
                             borderWidth: 0,
                             borderBottomWidth: dividersize,
                             borderStyle: dividervariant,
-                        } })] })), (0, jsx_runtime_1.jsx)(react_2.CardBody, { sx: CardBodyStyle, ...((_a = body === null || body === void 0 ? void 0 : body.props) !== null && _a !== void 0 ? _a : {}), children: body }), footer && (0, jsx_runtime_1.jsx)(react_2.CardFooter, { ...footer.props, children: footer })] }));
+                        } })] })), (0, jsx_runtime_1.jsx)(react_1.CardBody, { sx: CardBodyStyle, ...((_a = body === null || body === void 0 ? void 0 : body.props) !== null && _a !== void 0 ? _a : {}), children: body }), footer && (0, jsx_runtime_1.jsx)(react_1.CardFooter, { ...footer.props, children: footer })] }));
 }

package/dist/Components/ProfilePhotoViewer/ProfilePhotoViewer.js

@@ -9,6 +9,7 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const color_1 = require("../../Theme/tokens/builders/color");
 const RING_TRANSITION = (0, motion_1.transitionFor)(["box-shadow"], "base");
@@ -49,6 +50,7 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
         (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
     };
     const isPdf = photo === null || photo === void 0 ? void 0 : photo.endsWith(".pdf");
+    const viewHoverBg = (0, planeStep_1.bandOn)(c.gray[50], c.background[50]);
     // NOTE: [800] not [300] — the edit IconButton's border is a control boundary, WCAG 1.4.11 needs >=3:1.
     const border = c.boxborder[500];
     const hoverScrim = (opacity) => {
@@ -85,8 +87,8 @@ function ProfilePhotoViewer({ photoUrl, onPhotoChange, imageWidth = "100px", ima
                                         bg: editFill.activeFill,
                                         color: editFill.activeColor,
                                     } }) })), isView && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: "View", "aria-label": "View", hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Eye, { size: 14 }), isRound: isRound, size: editIconSize, onClick: handleIsView, "aria-label": "View photo", bg: c.background[50], color: c.text[700], border: `${borderWidths_1.BORDER_WIDTHS.hairline} solid ${border}`, boxShadow: (_d = theme.shadows) === null || _d === void 0 ? void 0 : _d.md, style: style, transition: ACTION_TRANSITION, _hover: {
-                                        bg: c.gray[50],
-                                        color: (0, accentText_1.accentTextOnCanvas)(c.primary, c.gray[50]),
+                                        bg: viewHoverBg,
+                                        color: (0, accentText_1.accentTextOnCanvas)(c.primary, viewHoverBg),
                                         transform: "scale(1.1)",
                                         boxShadow: (_e = theme.shadows) === null || _e === void 0 ? void 0 : _e.lg,
                                     }, _active: { bg: c.gray[100] } }) }))] }), isEditable && ((0, jsx_runtime_1.jsx)(react_2.Input, { type: "file", accept: "image/*", onChange: handlePhotoChange, hidden: true, ref: fileInputRef }))] }))] }));

package/dist/Components/ProgressBar/ProgressBar.js

@@ -5,13 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const paletteScale_1 = require("../../Theme/tokens/builders/paletteScale");
 // whiteAlpha/blackAlpha keep Chakra's own fill; contrast math can't resolve alpha scales.
 const NAMED_SCALES = new Set([
     "gray", "red", "orange", "yellow", "green", "teal", "blue", "cyan", "purple", "pink",
     "primary", "secondary",
 ]);
 const scaleFor = (colors, scheme) => NAMED_SCALES.has(scheme)
-    ? colors[scheme]
+    ? (0, paletteScale_1.scaleNamed)(colors, scheme)
     : undefined;
 /** Percentage/quantity fill bar (isAnimated needs hasStripe=true or it's a no-op) — for a named pipeline tracker use StageProgress instead. */
 function ProgressBar({ colorScheme, color, variant, isIndeterminate, ...rest }) {

package/dist/Components/QuantityStepper/QuantityStepper.js

@@ -8,8 +8,10 @@ const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const typography_1 = require("../../Theme/tokens/primitives/typography");
 const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
 const motion_1 = require("../../Theme/tokens/primitives/motion");
+const borderWidths_1 = require("../../Theme/tokens/primitives/borderWidths");
 const motion_2 = require("../../Theme/chakra/motion");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const tonalHover_1 = require("../CheckoutKit/tonalHover");
 const MIN_HIT = "2.75rem";
 const LIMIT_OPACITY = 0.4;
 const clamp = (n, min, max) => Math.max(min, max === undefined ? n : Math.min(max, n));
@@ -32,8 +34,9 @@ const QuantityStepper = ({ value, defaultValue, onValueChange, min = 1, max, ste
         onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
     };
     const surface = variant === "outline"
-        ? { bg: "transparent", boxShadow: `inset 0 0 0 1px ${colors.boxborder[500]}` }
+        ? { bg: "transparent", boxShadow: `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${colors.boxborder[500]}` }
         : { bg: colors.background[100], boxShadow: "none" };
+    const hoverFill = (0, tonalHover_1.tonalHover)(colors, variant === "outline" ? colors.background[50] : colors.background[100]);
     const button = (kind) => {
         const limited = kind === "dec" ? atMin && !trash : atMax;
         const Icon = kind === "inc" ? lucide_react_1.Plus : trash ? lucide_react_1.Trash2 : lucide_react_1.Minus;
@@ -45,7 +48,7 @@ const QuantityStepper = ({ value, defaultValue, onValueChange, min = 1, max, ste
                     onRemove === null || onRemove === void 0 ? void 0 : onRemove();
                 else
                     change(kind === "inc" ? 1 : -1);
-            }, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, boxSize: spec.height, borderRadius: "full", color: colors.header[900], opacity: limited || disabled ? LIMIT_OPACITY : 1, cursor: limited || disabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["background-color", "transform", "opacity"]), _hover: limited || disabled ? undefined : { bg: colors.background[200] }, _active: limited || disabled ? undefined : { transform: "scale(0.96)" }, sx: {
+            }, position: "relative", display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, boxSize: spec.height, borderRadius: "full", color: colors.header[900], opacity: limited || disabled ? LIMIT_OPACITY : 1, cursor: limited || disabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["background-color", "transform", "opacity"]), _hover: limited || disabled ? undefined : { bg: hoverFill }, _active: limited || disabled ? undefined : { transform: "scale(0.96)" }, sx: {
                 ...(0, focusRing_styles_1.focusVisibleStyles)(colors),
                 ...(0, motion_2.reducedMotionSx)({ "&:active": { transform: "none" } }),
                 "&::before": {

package/dist/Components/QueryState/QueryStateBoundary.d.ts

@@ -1,4 +1,4 @@
 import type { QueryStateBoundaryProps } from "./QueryStateProps";
 /** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
-declare const QueryStateBoundary: ({ isLoading, isForbidden, forbidden, hasData, error, isEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH, children, }: QueryStateBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+declare const QueryStateBoundary: ({ isLoading, isForbidden, forbidden, hasData, error, isEmpty, isFiltered, filteredEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH, children, }: QueryStateBoundaryProps) => import("react/jsx-runtime").JSX.Element;
 export default QueryStateBoundary;

package/dist/Components/QueryState/QueryStateBoundary.js

@@ -7,12 +7,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const FilteredEmptyState_1 = __importDefault(require("../EmptyState/FilteredEmptyState"));
 const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
 const ErrorState_1 = __importDefault(require("./ErrorState"));
 const DefaultLoading = () => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { role: "status", direction: "column", gap: 4, w: "100%", py: 2, children: [(0, jsx_runtime_1.jsx)(react_1.VisuallyHidden, { children: "Loading" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 4, width: "40%" }), Array.from({ length: 4 }, (_, i) => ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 2, children: [(0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "100%" }), (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: 2.5, width: "70%" })] }, i)))] }));
 const hasError = (error) => error !== undefined && error !== null && error !== false;
 /** Renders one of loading / forbidden / error / empty / children for a content region; agnostic of the fetching library. */
-const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden, hasData = false, error, isEmpty = false, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
+const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden, hasData = false, error, isEmpty = false, isFiltered = false, filteredEmpty, loadingFallback, emptyFallback, empty, errorTitle, errorDescription, onRetry, isRetrying, minH = "24rem", children, }) => {
     var _a, _b, _c;
     if (isLoading && !hasData)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingFallback !== null && loadingFallback !== void 0 ? loadingFallback : (0, jsx_runtime_1.jsx)(DefaultLoading, {}) });
@@ -24,6 +25,9 @@ const QueryStateBoundary = ({ isLoading = false, isForbidden = false, forbidden,
         const description = typeof errorDescription === "function" ? errorDescription(error) : errorDescription;
         return ((0, jsx_runtime_1.jsx)(ErrorState_1.default, { title: errorTitle, description: description, onRetry: onRetry, isRetrying: isRetrying, minH: minH }));
     }
+    if (isEmpty && isFiltered) {
+        return ((0, jsx_runtime_1.jsx)(FilteredEmptyState_1.default, { minH: (filteredEmpty === null || filteredEmpty === void 0 ? void 0 : filteredEmpty.scale) === "card" ? undefined : minH, ...filteredEmpty }));
+    }
     if (isEmpty)
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: emptyFallback !== null && emptyFallback !== void 0 ? emptyFallback : (0, jsx_runtime_1.jsx)(EmptyState_1.default, { minH: minH, ...empty }) });
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: typeof children === "function" ? children() : children });

package/dist/Components/QueryState/QueryStateProps.d.ts

@@ -1,5 +1,5 @@
 import type { ElementType, ReactNode } from "react";
-import type { EmptyStateProps } from "../EmptyState/EmptyStateProps";
+import type { EmptyStateProps, FilteredEmptyStateProps } from "../EmptyState/EmptyStateProps";
 /** Failed-load panel (`role="alert"`); `onRetry` adds an outline Retry button, `action` adds more. */
 export interface ErrorStateProps {
     /** Defaults to "Couldn't load this". */
@@ -45,6 +45,10 @@ export interface QueryStateBoundaryProps {
     error?: unknown;
     /** Checked only after loading and error are ruled out. */
     isEmpty?: boolean;
+    /** With `isEmpty`, shows FilteredEmptyState instead of `empty`/`emptyFallback`: the list is empty because of the filters, not first-run. */
+    isFiltered?: boolean;
+    /** Props for the FilteredEmptyState shown when `isEmpty` and `isFiltered`; `scale="card"` drops the boundary's `minH`. */
+    filteredEmpty?: FilteredEmptyStateProps;
     /** Replaces the default skeleton rows. */
     loadingFallback?: ReactNode;
     /** Replaces the default EmptyState entirely; `empty` is then ignored. */
@@ -59,7 +63,7 @@ export interface QueryStateBoundaryProps {
     onRetry?: () => void;
     /** Shows the Retry button spinner; no effect without `onRetry`. */
     isRetrying?: boolean;
-    /** Min height of the error and default empty states, not loading; defaults to "24rem". */
+    /** Min height of the error and empty states, not loading; defaults to "24rem". */
     minH?: EmptyStateProps["minH"];
     children: ReactNode | (() => ReactNode);
 }

package/dist/Components/RadioButton/RadioButton.js

@@ -14,12 +14,11 @@ const useFieldIds_1 = require("../Common/useFieldIds");
 const fieldStyles_1 = require("../Common/fieldStyles");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
 const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const paletteFromTheme_1 = require("../../Theme/chakra/paletteFromTheme");
 /** One themed radio; `ref` is its native `<input type="radio">`. */
 const RadioButton = (0, react_1.forwardRef)(function RadioButton({ label, description, content, colorScheme, isChecked, onChange, isDisabled, size, value, defaultChecked, labelFontSize = "0.875rem", labelClampLines = 2, showLabelTooltip = (label || "").length > 18, labelTooltip = label, ...rest }, ref) {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    // colorScheme is any Chakra scheme name; only some resolve to a real scale.
-    const scales = colors;
-    const palette = (colorScheme && scales[colorScheme]) || colors.primary;
+    const palette = colorScheme ? (0, paletteFromTheme_1.scaleFor)(colors, colorScheme, colors.primary) : colors.primary;
     const filled = (0, filledSurface_1.resolveFilledSurface)(palette, colors);
     return ((0, jsx_runtime_1.jsx)(react_2.Radio, { ...rest, ref: ref, colorScheme: colorScheme, isChecked: isChecked, onChange: onChange, isDisabled: isDisabled, size: size, value: value, defaultChecked: defaultChecked, borderColor: (0, fieldStyles_1.fieldHoverBorder)(colors), borderWidth: "1px", _hover: {
             borderColor: filled.fill,

package/dist/Components/RolesPermission/RolesPermission.js

@@ -9,10 +9,13 @@ const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const Button_1 = __importDefault(require("../Button/Button"));
 const TextInput_1 = __importDefault(require("../Input/TextInput"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const DeleteRoleModal_1 = __importDefault(require("./DeleteRoleModal"));
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const DEFAULT_LABELS = {
     title: "Roles & Permissions",
     totalRoles: "Total Roles",
@@ -66,7 +69,8 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
     const muted = colors.textMuted;
     const heading = colors.text[900];
     const rowBackgrounds = (0, rowStates_1.listRowBackgrounds)(colors);
-    const headBg = colors.background[100];
+    const headBg = (0, planeStep_1.bandOn)(colors.background[100], surface);
+    const innerRule = (0, planeStep_1.cardRule)(colors);
     const rowHover = rowBackgrounds.active;
     const isViewMode = mode === "view";
     const columnLabels = {
@@ -90,33 +94,33 @@ const RolesPermission = ({ view, mode = "create", roles, isRolesLoading = false,
         px: 4,
         py: 3,
         borderBottom: "1px solid",
-        borderColor: border,
+        borderColor: innerRule,
     };
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: innerRule,
         py: 3,
     };
     const renderGrantedCheck = () => checkIcon !== null && checkIcon !== void 0 ? checkIcon : ((0, jsx_runtime_1.jsx)(react_2.Box, { color: colors.semanticText.success, display: "inline-flex", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, strokeWidth: 3 }) }));
     const renderListView = () => ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, children: [onBack && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onBack })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }), !isRolesLoading && ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "blue", variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", textTransform: "none", children: [labels.totalRoles, ": ", roles.length] }))] }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.newRole, onClick: onNewRole, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15 }) })] }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isRolesLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 6 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : roles.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.ShieldCheck, title: labels.noRoles, size: "sm", minH: "200px" })) : ((0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, width: "56px", children: labels.sNo }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.roleNameColumn }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.createdBy }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.createdTime }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "right", children: labels.actions })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: roles.map((role, index) => {
                                         var _a;
-                                        return ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: rowHover }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, color: muted, fontSize: "sm", children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: role.createdBy }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: role.created_at }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.view, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.edit, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.delete, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }), "aria-label": labels.delete, variant: "ghost", size: "xs", colorScheme: "red", color: colors.semanticText.error, onClick: () => setDeleteId(Number(role.roles_id)) }) })] }) })] }, (_a = role.roles_id) !== null && _a !== void 0 ? _a : role.roleName));
+                                        return ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: rowHover }, transition: BACKGROUND_TRANSITION, children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, color: muted, fontSize: "sm", children: index + 1 }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontSize: "sm", fontWeight: 600, color: heading, children: role.roleName }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, fontSize: "sm", color: muted, children: role.createdBy }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, fontSize: "sm", color: muted, children: role.created_at }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, children: (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.view, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.SquareArrowOutUpRight, { size: 15 }), "aria-label": labels.view, variant: "ghost", size: "xs", color: muted, onClick: () => onViewRole === null || onViewRole === void 0 ? void 0 : onViewRole(role) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.edit, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15 }), "aria-label": labels.edit, variant: "ghost", size: "xs", color: muted, onClick: () => onEditRole === null || onEditRole === void 0 ? void 0 : onEditRole(role) }) }), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.delete, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }), "aria-label": labels.delete, variant: "ghost", size: "xs", colorScheme: "red", color: colors.semanticText.error, onClick: () => setDeleteId(Number(role.roles_id)) }) })] }) })] }, (_a = role.roles_id) !== null && _a !== void 0 ? _a : role.roleName));
                                     }) })] })) })] }), footerSlot] }));
-    const renderFormView = () => ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", gap: 2, children: [onCancelForm && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.roleInformation })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { maxW: "320px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode, children: (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.roleName, value: roleName, placeholder: labels.roleNamePlaceholder, error: !!roleNameError, errorMessage: roleNameError, onChange: (e) => onRoleNameChange === null || onRoleNameChange === void 0 ? void 0 : onRoleNameChange(e.target.value), isRequired: true, width: "100%", isDisabled: isViewMode }) }) }) }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 3, mt: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.enableAllPermissions }) }), (0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.trackLocation }) }), (0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.showAllUserRecords }) })] })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.permissionSettings }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), permissionKeys.map((key) => ((0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "center", children: columnLabels[key] }, key)))] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: permissions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Tr, { children: (0, jsx_runtime_1.jsx)(react_2.Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: border, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: muted, fontSize: "sm", py: 4, children: labels.noPermissions }) }) })) : (permissions.map((perm) => {
+    const renderFormView = () => ((0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 4, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", gap: 2, children: [onCancelForm && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": "Go back", icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { size: 16 }), variant: "ghost", size: "xs", color: muted, onClick: onCancelForm })), (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.roleInformation })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { p: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { maxW: "320px", children: (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isViewMode ? labels.readOnly : "", isDisabled: !isViewMode, children: (0, jsx_runtime_1.jsx)(react_2.Box, { children: (0, jsx_runtime_1.jsx)(TextInput_1.default, { label: labels.roleName, value: roleName, placeholder: labels.roleNamePlaceholder, error: !!roleNameError, errorMessage: roleNameError, onChange: (e) => onRoleNameChange === null || onRoleNameChange === void 0 ? void 0 : onRoleNameChange(e.target.value), isRequired: true, width: "100%", isDisabled: isViewMode }) }) }) }), (0, jsx_runtime_1.jsxs)(react_2.VStack, { align: "stretch", spacing: 3, mt: 4, children: [(0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isSuperAdmin, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleSuperAdmin === null || onToggleSuperAdmin === void 0 ? void 0 : onToggleSuperAdmin(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.enableAllPermissions }) }), (0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isTrackLocation, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleTrackLocation === null || onToggleTrackLocation === void 0 ? void 0 : onToggleTrackLocation(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.trackLocation }) }), (0, jsx_runtime_1.jsx)(react_2.Checkbox, { isChecked: isShowRecords, isDisabled: isViewMode, size: "sm", onChange: (e) => onToggleShowRecords === null || onToggleShowRecords === void 0 ? void 0 : onToggleShowRecords(e.target.checked), children: (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", color: heading, children: labels.showAllUserRecords }) })] })] })] }), (0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { ...cardHeaderSx, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.permissionSettings }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: (0, jsx_runtime_1.jsxs)(react_2.Table, { variant: "simple", size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.Thead, { bg: headBg, children: (0, jsx_runtime_1.jsxs)(react_2.Tr, { children: [(0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.moduleName }), permissionKeys.map((key) => ((0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, textAlign: "center", children: columnLabels[key] }, key)))] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: permissions.length === 0 ? ((0, jsx_runtime_1.jsx)(react_2.Tr, { children: (0, jsx_runtime_1.jsx)(react_2.Td, { colSpan: permissionKeys.length + 1, textAlign: "center", borderColor: innerRule, children: (0, jsx_runtime_1.jsx)(react_2.Text, { color: muted, fontSize: "sm", py: 4, children: labels.noPermissions }) }) })) : (permissions.map((perm) => {
                                         var _a;
                                         const isAutomationModule = ((_a = perm.module) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "automation";
-                                        return ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: rowHover }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
+                                        return ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: rowHover }, transition: BACKGROUND_TRANSITION, children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: innerRule, color: heading, fontSize: "sm", fontWeight: 500, maxW: "160px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", children: perm.module }), permissionKeys.map((key) => {
                                                     const isRead = key === "read";
-                                                    return ((0, jsx_runtime_1.jsx)(react_2.Td, { textAlign: "center", borderColor: border, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
+                                                    return ((0, jsx_runtime_1.jsx)(react_2.Td, { textAlign: "center", borderColor: innerRule, children: (0, jsx_runtime_1.jsx)(react_2.Flex, { justify: "center", children: isViewMode ? (isAutomationModule ? (isRead &&
                                                                 perm.automation &&
                                                                 renderGrantedCheck()) : (perm[key] && renderGrantedCheck())) : isAutomationModule && !isRead ? null : ((0, jsx_runtime_1.jsx)(react_2.Checkbox, { size: "sm", "aria-label": `${perm.module}: ${columnLabels[key]}`, isChecked: isAutomationModule
                                                                     ? perm.automation
                                                                     : perm[key], isDisabled: isAutomationModule && !isRead, onChange: () => onPermissionChange === null || onPermissionChange === void 0 ? void 0 : onPermissionChange(perm.module, isAutomationModule ? "automation" : key) })) }) }, key));
                                                 })] }, perm.module));
-                                    })) })] }) }), !isViewMode && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: border }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
+                                    })) })] }) }), !isViewMode && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Divider, { borderColor: innerRule }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "flex-end", gap: 3, p: 4, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onCancelForm, size: "sm", sx: { fontSize: "xs" }, label: labels.cancel, colorScheme: "red", variant: "outline" }), (0, jsx_runtime_1.jsx)(Button_1.default, { onClick: onSave, size: "sm", sx: { fontSize: "xs" }, colorScheme: "primary", isLoading: isSaving, label: isEditing ? labels.updateChanges : labels.saveChanges })] })] }))] })] }));
     return ((0, jsx_runtime_1.jsxs)(react_2.Box, { p: padding, backgroundColor: colors.backgroundColor.main, minHeight: "100%", children: [view === "list" ? renderListView() : renderFormView(), (0, jsx_runtime_1.jsx)(DeleteRoleModal_1.default, { isOpen: deleteId !== null, onClose: () => setDeleteId(null), onConfirm: () => {
                     if (deleteId !== null)
                         onDeleteRole === null || onDeleteRole === void 0 ? void 0 : onDeleteRole(deleteId);

package/dist/Components/ScrollToTop/ScrollToTop.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+/** Wraps content and shows a back-to-top button once the parent scrolls. */
 export interface ScrollToTopProps {
     /** Content to wrap. Watches this element's direct parentElement only — not a scroll-search up the tree. */
     children: React.ReactNode;

package/dist/Components/ScrollbarBox/ScrollbarBox.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { ScrollbarVariant } from "../../Theme/tokens/builders/scrollbar";
+/** Scrollable box with themed scrollbars and a keyboard focus stop when it overflows. */
 export interface ScrollbarBoxProps {
     children: ReactNode;
     /** Fixed box height; omit to let content size the box instead of scrolling it. */
@@ -14,7 +15,9 @@ export interface ScrollbarBoxProps {
     variant?: ScrollbarVariant;
     /** Forwarded to the underlying Box so a consumer can read/scroll the container from outside. */
     scrollContainerRef?: React.Ref<HTMLDivElement> | null;
+    /** Names the box as a region while it scrolls and takes keyboard focus; without it that focus stop has no name. */
+    "aria-label"?: string;
 }
-/** Scrollable Box with themed scrollbar chrome (scrollbarStyles) applied via variant. */
+/** Scrollable Box with themed scrollbar chrome; a keyboard stop, ringed on :focus-visible, while it scrolls with nothing focusable inside. */
 declare const ScrollbarBox: React.FC<ScrollbarBoxProps>;
 export default ScrollbarBox;

package/dist/Components/ScrollbarBox/ScrollbarBox.js

@@ -1,12 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("@chakra-ui/react");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const scrollbar_1 = require("../../Theme/tokens/builders/scrollbar");
-/** Scrollable Box with themed scrollbar chrome (scrollbarStyles) applied via variant. */
-const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, }) => {
+const useScrollableRegion_1 = require("../../Hooks/useScrollableRegion");
+const mergeRefs_1 = require("../../Utils/mergeRefs");
+/** Scrollable Box with themed scrollbar chrome; a keyboard stop, ringed on :focus-visible, while it scrolls with nothing focusable inside. */
+const ScrollbarBox = ({ children, height, maxHeight, overflowX, overflowY = "auto", variant = "default", scrollContainerRef, "aria-label": ariaLabel, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Box, { ref: scrollContainerRef, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...(0, scrollbar_1.scrollbarStyles)(colors, variant) }, children: children }));
+    const { ref, props: regionProps } = (0, useScrollableRegion_1.useScrollableRegion)({ label: ariaLabel });
+    const mergedRef = (0, react_1.useMemo)(() => (0, mergeRefs_1.mergeRefs)(scrollContainerRef, ref), [scrollContainerRef, ref]);
+    return ((0, jsx_runtime_1.jsx)(react_2.Box, { ref: mergedRef, ...regionProps, height: height, maxHeight: maxHeight, position: "relative", sx: { overflowX, overflowY, ...(0, scrollbar_1.scrollbarStyles)(colors, variant), ...(0, focusRing_styles_1.focusVisibleStyles)(colors) }, children: children }));
 };
 exports.default = ScrollbarBox;

package/dist/Components/SearchSelect/SearchSelect.d.ts

@@ -1,5 +1,5 @@
 import { SearchSelectProps } from "./SearchSelectProps";
 /** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
-/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see COMPONENT-GOTCHAS.md ("Which select component"). */
 declare const SearchSelect: ({ id, label, options, onChange, onSelect, onSearch, isOptionLoading, isLoading, loadingText, placeholder, value, searchQuery, isMultiple, isRequired, error, errorMessage, helperText, width, height, size, isDisabled, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll, pagination, insideSelect, isRemoveAllIcon, "aria-label": ariaLabel, }: SearchSelectProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchSelect;

package/dist/Components/SearchSelect/SearchSelect.js

@@ -44,6 +44,7 @@ const FormLabel_1 = require("../Common/FormLabel");
 const Tag_1 = __importDefault(require("../Tag/Tag"));
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const surfaceRaised_1 = require("../../Theme/tokens/builders/surfaceRaised");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
 const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
 const optionRowSizes_1 = require("../../Theme/tokens/primitives/optionRowSizes");
 const optionRowInk_1 = require("../Select/optionRowInk");
@@ -62,6 +63,7 @@ const searchSelectSize_1 = require("./searchSelectSize");
 const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
 const rafThrottle_1 = require("../../Utils/rafThrottle");
 const searchSelectNav_1 = require("./searchSelectNav");
+const activationKey_1 = require("../Common/activationKey");
 const SEGMENT_TRANSITION = (0, motion_1.transitionFor)(["background-color", "box-shadow"]);
 const CHEVRON_TRANSITION = (0, motion_1.transitionFor)(["transform", "color"], "base");
 const normalizeSingleValue = (val) => {
@@ -84,7 +86,7 @@ const OptionRow = react_1.default.memo(function OptionRow({ option, index, optio
         fontSize: spec.fontSize, fontWeight: (0, optionRowInk_1.optionRowWeight)(singleSelected), children: [isMultiple && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { isChecked: isSelected, sx: DECORATIVE_CHECKBOX_SX, size: checkboxSize })), option.view ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: option.view })) : ((0, jsx_runtime_1.jsx)(react_2.Text, { flex: 1, minW: 0, isTruncated: true, children: option.label })), singleSelected && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.Check, size: spec.iconSize, color: colors.accentText, flexShrink: 0 }))] }));
 });
 /** Full-featured combobox: search, chips, select-all, paginated infinite scroll — not DOM-virtualized despite the `virtualization` prop. */
-/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see COMPONENT-GOTCHAS.md ("Which select component"). */
 const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOptionLoading = false, isLoading = false, loadingText = "Loading...", placeholder = "Select", value, searchQuery = "", isMultiple = false, isRequired = false, error = false, errorMessage, helperText, width = "100%", height, size = "sm", isDisabled = false, chip, information, isInformation, informationMessage, rightIcon, addNew, isSelectAll = false, pagination, insideSelect, isRemoveAllIcon, "aria-label": ariaLabel, }) => {
     var _a, _b, _c, _d, _e, _f;
     const s = (0, searchSelectSize_1.getSearchSelectSizeStyles)(size);
@@ -208,7 +210,8 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
         const updated = selectedValues.filter((v) => v.id !== id);
         emitChange === null || emitChange === void 0 ? void 0 : emitChange(updated);
     };
-    const handleClearAll = () => {
+    const handleClearAll = (e) => {
+        e.stopPropagation();
         emitChange === null || emitChange === void 0 ? void 0 : emitChange(isMultiple ? [] : undefined);
         setInputValue("");
     };
@@ -483,7 +486,7 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
             setCustomSelectOpen(false);
             return;
         }
-        if (e.key !== "Enter" && e.key !== " ")
+        if (!(0, activationKey_1.isActivationKey)(e))
             return;
         e.preventDefault();
         focusInsideOnOpenRef.current = !customSelectOpen;
@@ -638,10 +641,10 @@ const SearchSelect = ({ id, label, options, onChange, onSelect, onSearch, isOpti
                             var _a, _b, _c;
                             const insideLabel = (_a = insideSelect.value) === null || _a === void 0 ? void 0 : _a.label;
                             const insidePlaceholder = (_b = insideSelect.placeholder) !== null && _b !== void 0 ? _b : "Select";
-                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", ref: customSelectRef, role: "button", tabIndex: isDisabled ? undefined : 0, "aria-haspopup": "listbox", "aria-expanded": customSelectOpen, "aria-controls": customSelectOpen ? insideSelectPortalId : undefined, "aria-disabled": isDisabled || undefined, onKeyDown: handleInsideTriggerKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, _focusVisible: insideFocusRing, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: theme.colors.boxborder[200], bg: customSelectOpen
+                            return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", ref: customSelectRef, role: "button", tabIndex: isDisabled ? undefined : 0, "aria-haspopup": "listbox", "aria-expanded": customSelectOpen, "aria-controls": customSelectOpen ? insideSelectPortalId : undefined, "aria-disabled": isDisabled || undefined, onKeyDown: handleInsideTriggerKeyDown, onFocus: stopFocusBubbling, onBlur: stopFocusBubbling, _focusVisible: insideFocusRing, flexShrink: 0, ml: s.insideSelectMarginLeft, h: "-webkit-fill-available", borderRight: `${borderWidths_1.BORDER_WIDTHS.hairline} solid`, borderColor: (0, planeStep_1.ruleOn)(theme.colors, theme.colors.background[400]), bg: customSelectOpen
                                     ? rowBackgrounds.active
                                     : theme.colors.background[400], borderLeftRadius: "md", borderRightRadius: 0, transition: SEGMENT_TRANSITION, boxShadow: customSelectOpen
-                                    ? `inset 0 0 0 0.063rem ${theme.colors.primary[500]}`
+                                    ? `inset 0 0 0 ${borderWidths_1.BORDER_WIDTHS.hairline} ${theme.colors.primary[500]}`
                                     : "none", onClick: (e) => {
                                     e.stopPropagation();
                                     toggleCustomSelect();

package/dist/Components/SearchSelect/SearchSelectProps.d.ts

@@ -1,5 +1,5 @@
 /** value's shape must match isMultiple (array vs single object) — a mismatch normalizes to no selection, not an error. */
-/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see COMPONENT-GOTCHAS.md ("Which select component"). */
 export type SearchSelectProps = {
     id?: string;
     label?: string;
@@ -90,7 +90,7 @@ export type SearchSelectProps = {
         /** Total row count; when set, hasMore is derived as options.length < totalRecords instead of the limit heuristic. */
         totalRecords?: number;
     };
-    /** Not implemented — the option list always renders unvirtualized; use `pagination` to page in large datasets instead. */
+    /** @deprecated Not implemented — the option list never virtualizes; page large datasets with `pagination` instead. */
     virtualization?: boolean;
     insideSelect?: {
         /** Fires with the picked nested option; the nested picker is controlled via `insideSelect.value`. */
@@ -106,7 +106,7 @@ export type SearchSelectProps = {
     };
 };
 /** One selectable option; view, when set, fully replaces the default label rendering for that option's row. */
-/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see select-absorption-spec.md. */
+/** Prefer `Select` with `native={false}` for new work — not yet a drop-in; see COMPONENT-GOTCHAS.md ("Which select component"). */
 export type Options = {
     id: string | number;
     label: string;

package/dist/Components/SegmentedControl/SegmentedControl.d.ts

@@ -4,6 +4,6 @@ type SegmentedControlComponent = {
     <T extends string = string>(props: SegmentedControlProps<T> & RefAttributes<HTMLDivElement>): ReactElement | null;
     displayName?: string;
 };
-/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle (see MODULE.md); `ref` is the radiogroup. */
+/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle; `ref` is the radiogroup. */
 declare const SegmentedControl: SegmentedControlComponent;
 export default SegmentedControl;

package/dist/Components/SegmentedControl/SegmentedControl.js

@@ -118,7 +118,7 @@ function SegmentedControlInner({ options, value, onChange, size = "sm", isFullWi
                             : restInk, fontSize: control.fontSize, fontWeight: isSelected ? 600 : 500, whiteSpace: "nowrap", opacity: option.isDisabled ? 0.5 : 1, cursor: option.isDisabled ? "not-allowed" : "pointer", transition: (0, motion_1.transitionFor)(["color"]), _hover: option.isDisabled || isSelected ? undefined : { color: hoverInk }, sx: { ...segmentFocus, ...(0, motion_2.reducedMotionSx)() }, children: [option.icon, displayLabel, option.count != null && ((0, jsx_runtime_1.jsx)(Tag_1.default, { label: formatCount(option.count), size: COUNT_TAG_SIZE[size], variant: "subtle", colorScheme: "gray" }))] }, option.value));
             })] }));
 }
-/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle (see MODULE.md); `ref` is the radiogroup. */
+/** role="radiogroup" of role="radio" buttons with roving tabindex; shares variant with Toggle/TableToggle; `ref` is the radiogroup. */
 const SegmentedControl = (0, react_1.forwardRef)(SegmentedControlInner);
 SegmentedControl.displayName = "SegmentedControl";
 exports.default = SegmentedControl;

package/dist/Components/Select/Select.js

@@ -17,6 +17,12 @@ const NATIVE_INERT_PROPS = [
     "onClear",
     "isLoading",
     "loadingText",
+    "isFieldLoading",
+    "rightIcon",
+    "searchFields",
+    "filterOption",
+    "createWhen",
+    "footerAction",
     "onLoadMore",
     "renderOption",
     "renderValue",

package/dist/Components/Select/SelectNative.d.ts

@@ -38,11 +38,21 @@ declare const SelectNative: React.ForwardRefExoticComponent<{
     defaultSearchValue?: string;
     onSearchChange?: (query: string) => void;
     searchDebounceMs?: number;
+    searchFields?: ("label" | "description")[];
+    filterOption?: (option: OptionProp, query: string) => boolean;
     filterOptions?: boolean;
     isClearable?: boolean;
     onClear?: () => void;
     isLoading?: boolean;
     loadingText?: string;
+    isFieldLoading?: boolean;
+    rightIcon?: {
+        icon: React.ReactNode;
+    } | {
+        icon: React.ReactNode;
+        onClick: () => void;
+        ariaLabel: string;
+    };
     noOptionsMessage?: React.ReactNode;
     onLoadMore?: () => void;
     hasMore?: boolean;
@@ -53,6 +63,12 @@ declare const SelectNative: React.ForwardRefExoticComponent<{
     renderValue?: (selected: OptionProp[]) => React.ReactNode;
     onCreate?: (label: string) => void;
     createLabel?: (query: string) => React.ReactNode;
+    createWhen?: "no-options" | "no-exact-match";
+    footerAction?: {
+        label: React.ReactNode;
+        onSelect: (query: string) => void;
+        icon?: React.ReactNode;
+    };
     maxMenuHeight?: string;
     defaultOpen?: boolean;
     virtualizeAfter?: number;