pixelize-design-library 2.4.2-beta.9 → 3.0.0

package/dist/Components/SideBar/components/PinnedSection.js

@@ -0,0 +1,101 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PINNED_LIMIT = exports.DEFAULT_PINNED_LABEL = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../../Theme/useCustomTheme");
+const sidebarFocus_1 = require("../sidebarFocus");
+const tone_1 = require("../../../Theme/tokens/builders/tone");
+const sidebarAccent_1 = require("../../../Theme/tokens/builders/sidebarAccent");
+const paletteFromTheme_1 = require("../../../Theme/chakra/paletteFromTheme");
+const sidebarAccentColors_1 = require("../sidebarAccentColors");
+const sidebarId_1 = require("../sidebarId");
+const sidebarScale_1 = require("../sidebarScale");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+const TextTruncation_1 = __importDefault(require("./TextTruncation"));
+const MenuItemBox_1 = require("./MenuItemBox");
+const motion_1 = require("../../../Theme/tokens/primitives/motion");
+const sidebarMotion_1 = require("../sidebarMotion");
+exports.DEFAULT_PINNED_LABEL = "Pinned";
+exports.DEFAULT_PINNED_LIMIT = 5;
+const DEFAULT_LABELS = {
+    showMore: "Show {count} more",
+    showLess: "Show less",
+    unpin: "Unpin {title}",
+};
+const UNPIN_SIZE = "24px";
+const UNPIN_TRANSITION = (0, motion_1.transitionFor)(["opacity", "background"]);
+const LADDER = { hover: "whiteAlpha.200", active: "whiteAlpha.300", activeHover: "whiteAlpha.400" };
+const VISUALLY_HIDDEN = {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: 0,
+};
+const readBadge = (badge) => {
+    var _a;
+    const cfg = typeof badge === "object" && badge !== null ? badge : null;
+    const value = (_a = cfg === null || cfg === void 0 ? void 0 : cfg.count) !== null && _a !== void 0 ? _a : (typeof badge !== "object" ? badge : undefined);
+    return { cfg, value };
+};
+const PinnedSection = ({ items, label = exports.DEFAULT_PINNED_LABEL, limit = exports.DEFAULT_PINNED_LIMIT, toggle, overlay, activeId, labels, onItemClick, onUnpin, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const activeAccent = (0, sidebarAccentColors_1.getSidebarActiveAccent)(theme.colors);
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const headingId = `pinned-${(0, sidebarId_1.sanitizeId)((0, react_1.useId)())}`;
+    const cap = Math.max(1, limit);
+    const rowHeight = overlay ? sidebarScale_1.SIDEBAR_ROW.overlayHeight : sidebarScale_1.SIDEBAR_ROW.height;
+    const activeIndex = activeId == null ? -1 : items.findIndex((i) => String(i.id) === String(activeId));
+    const [showAll, setShowAll] = (0, react_1.useState)(activeIndex >= cap);
+    (0, react_1.useEffect)(() => {
+        if (activeIndex >= cap)
+            setShowAll(true);
+    }, [activeIndex, cap]);
+    if (items.length === 0)
+        return null;
+    const hiddenCount = Math.max(0, items.length - cap);
+    const visible = showAll ? items : items.slice(0, cap);
+    const badgeSurface = (0, sidebarAccent_1.sidebarRowPeak)(theme.colors.sidebar.background[500]);
+    const unpinReplacesBadge = !!onUnpin && !overlay;
+    const renderBadge = (badge) => {
+        var _a, _b, _c;
+        const { cfg, value } = readBadge(badge);
+        if (value == null)
+            return null;
+        const tone = (0, tone_1.resolveSoftTone)(theme.colors, (0, paletteFromTheme_1.scaleFor)(theme.colors, (_a = cfg === null || cfg === void 0 ? void 0 : cfg.color) !== null && _a !== void 0 ? _a : "teal"), badgeSurface);
+        return ((0, jsx_runtime_1.jsx)(react_2.Badge, { bg: tone.bg, color: tone.fg, fontSize: "xs", variant: (_b = cfg === null || cfg === void 0 ? void 0 : cfg.variant) !== null && _b !== void 0 ? _b : "subtle", borderRadius: (_c = cfg === null || cfg === void 0 ? void 0 : cfg.radius) !== null && _c !== void 0 ? _c : "full", ...(unpinReplacesBadge
+                ? { _groupHover: { opacity: 0 }, _groupFocusWithin: { opacity: 0 } }
+                : {}), children: value }));
+    };
+    const renderRow = (item) => {
+        const isActive = activeIndex >= 0 && String(item.id) === String(activeId);
+        const anchor = ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: item.url, "data-group": "", "data-pinned-id": String(item.id), "aria-label": toggle ? item.title : undefined, "aria-current": isActive ? "page" : undefined, display: "flex", alignItems: "center", textAlign: "left", textDecoration: "none", w: "100%", h: rowHeight, borderRadius: "lg", pl: "10px", pr: !toggle && onUnpin ? `calc(10px + ${UNPIN_SIZE})` : "10px", fontWeight: 500, borderLeft: "2px solid", borderLeftColor: isActive ? theme.colors.sidebar.activeIcon : "transparent", backgroundColor: isActive ? LADDER.active : "transparent", color: theme.colors.sidebar.mutedIcon, _hover: { backgroundColor: isActive ? LADDER.activeHover : LADDER.hover }, cursor: "pointer", transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), onClick: (e) => {
+                if (item.url && (0, MenuItemBox_1.isBrowserNavigationGesture)(e))
+                    return;
+                e.preventDefault();
+                onItemClick(item);
+            }, children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", justify: toggle ? "center" : "space-between", w: "100%", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: "9px", overflow: "hidden", flex: toggle ? undefined : 1, minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: item.icon, fontSize: "md", color: isActive ? activeAccent.icon : theme.colors.sidebar.mutedIcon, _groupHover: isActive ? undefined : { color: theme.colors.white }, transition: sidebarMotion_1.SIDEBAR_INK_TRANSITION }), toggle && readBadge(item.badge).value != null && ((0, jsx_runtime_1.jsx)(react_2.Box, { position: "absolute", top: "0", right: "0", w: "0.375rem", h: "0.375rem", borderRadius: "full", bg: theme.colors.sidebar.semanticText.error }))] }), !toggle && ((0, jsx_runtime_1.jsx)(TextTruncation_1.default, { fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, lineHeight: "1", flex: "1", color: isActive ? activeAccent.label : theme.colors.white, fontWeight: isActive ? 600 : 500, _groupHover: isActive ? undefined : { color: theme.colors.white }, children: item.title }))] }), !toggle && renderBadge(item.badge)] }) }));
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "li", listStyleType: "none", position: "relative", "data-group": "", children: [toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: item.title, placement: "right", children: anchor })) : (anchor), onUnpin && !toggle && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", "aria-label": text.unpin.replace("{title}", item.title), onClick: () => onUnpin(item), position: "absolute", top: "50%", right: "6px", transform: "translateY(-50%)", w: UNPIN_SIZE, h: UNPIN_SIZE, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: "lg", border: "none", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedIcon, opacity: overlay ? 1 : 0, _groupHover: { opacity: 1 }, _groupFocusWithin: { opacity: 1 }, _hover: {
+                        bg: LADDER.active,
+                        color: theme.colors.white,
+                    }, transition: UNPIN_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: (0, jsx_runtime_1.jsx)(react_2.Icon, { as: lucide_react_1.PinOff, fontSize: "sm" }) }))] }, String(item.id)));
+    };
+    const disclosureLabel = showAll
+        ? text.showLess
+        : text.showMore.replace("{count}", String(hiddenCount));
+    const disclosureButton = ((0, jsx_runtime_1.jsxs)(react_2.Box, { as: "button", type: "button", "aria-expanded": showAll, "aria-label": toggle ? disclosureLabel : undefined, onClick: () => setShowAll((v) => !v), display: "flex", alignItems: "center", justifyContent: toggle ? "center" : "flex-start", gap: "9px", w: "100%", h: rowHeight, px: "10px", borderRadius: "lg", border: "none", borderLeft: "2px solid transparent", bg: "transparent", cursor: "pointer", color: theme.colors.sidebar.mutedLabel, fontSize: sidebarScale_1.SIDEBAR_ROW.fontSize, fontWeight: 500, _hover: {
+            backgroundColor: LADDER.hover,
+            color: theme.colors.white,
+        }, transition: sidebarMotion_1.SIDEBAR_BG_TRANSITION, sx: (0, sidebarFocus_1.sidebarFocusStyles)(theme.colors), children: [(0, jsx_runtime_1.jsx)(react_2.Icon, { as: showAll ? lucide_react_1.ChevronUp : lucide_react_1.ChevronDown, fontSize: "md", flexShrink: 0 }), !toggle && (0, jsx_runtime_1.jsx)("span", { children: disclosureLabel })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mb: toggle ? "5px" : "3px", "data-testid": "sidebar-pinned", children: [(0, jsx_runtime_1.jsx)(react_2.Box, { id: headingId, as: "h2", px: "10px", pt: overlay ? "6px" : "10px", pb: "3px", fontSize: "xs-minus", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.1em", color: theme.colors.sidebar.mutedLabel, whiteSpace: "nowrap", overflow: "hidden", sx: toggle ? VISUALLY_HIDDEN : undefined, children: label }), (0, jsx_runtime_1.jsxs)(react_2.Box, { as: "ul", "aria-labelledby": headingId, display: "flex", flexDirection: "column", gap: "2px", m: 0, p: 0, children: [visible.map(renderRow), hiddenCount > 0 && ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", listStyleType: "none", children: toggle ? ((0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: disclosureLabel, placement: "right", children: disclosureButton })) : (disclosureButton) }))] }), (0, jsx_runtime_1.jsx)(react_2.Box, { h: "1px", bg: theme.colors.sidebar.divider, mx: 2, mt: overlay ? "6px" : "8px", mb: overlay ? "3px" : "5px" })] }));
+};
+exports.default = PinnedSection;

package/dist/Components/SideBar/components/TextTruncation.js

@@ -1,8 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
+const sharedResizeObserver_1 = require("../../../Hooks/sharedResizeObserver");
+const ToolTip_1 = __importDefault(require("../../ToolTip/ToolTip"));
+// NOTE: an explicit preventOverflow opts out of ToolTip's 8px edge padding, keeping Chakra's placement.
+const CHAKRA_DEFAULT_OVERFLOW = [{ name: "preventOverflow", options: {} }];
 const TruncatedTextWithTooltip = ({ children, ...props }) => {
     const textRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
@@ -18,12 +25,12 @@ const TruncatedTextWithTooltip = ({ children, ...props }) => {
             }
         };
         checkTruncation();
-        const resizeObserver = new ResizeObserver(checkTruncation);
-        if (textRef.current) {
-            resizeObserver.observe(textRef.current);
-        }
-        return () => resizeObserver.disconnect();
+        if (!textRef.current)
+            return;
+        return (0, sharedResizeObserver_1.observeResize)(textRef.current, checkTruncation);
     }, [children]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: children, isDisabled: !isTruncated, hasArrow: true, placement: "right", openDelay: 0, closeOnClick: true, modifiers: CHAKRA_DEFAULT_OVERFLOW, children: (0, jsx_runtime_1.jsx)(react_2.Text, { ref: textRef, isTruncated: true, whiteSpace: "nowrap", overflow: "hidden", 
+                    // NOTE: padding lifts descenders out of the clip box; margin keeps the label's height.
+                    py: "0.35em", my: "-0.35em", textOverflow: "ellipsis", maxW: "100%", ...props, children: children }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: shadowRef, position: "fixed", top: "-9999px", left: "-9999px", visibility: "hidden", whiteSpace: "nowrap", fontSize: props.fontSize, fontWeight: props.fontWeight, fontFamily: props.fontFamily, lineHeight: props.lineHeight, px: props.px, py: props.py, children: children })] }));
 };
 exports.default = TruncatedTextWithTooltip;

package/dist/Components/SideBar/menuDisabled.d.ts

@@ -0,0 +1,5 @@
+import { MenuProps } from "./SideBarProps";
+type DisableableMenu = Pick<MenuProps, "isDisabled" | "disabled">;
+/** Resolves the canonical `isDisabled` over the deprecated `disabled`, in one place. */
+export declare const menuDisabled: (menu: DisableableMenu) => boolean;
+export default menuDisabled;

package/dist/Components/SideBar/menuDisabled.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.menuDisabled = void 0;
+/** Resolves the canonical `isDisabled` over the deprecated `disabled`, in one place. */
+const menuDisabled = (menu) => { var _a, _b; return (_b = (_a = menu.isDisabled) !== null && _a !== void 0 ? _a : menu.disabled) !== null && _b !== void 0 ? _b : false; };
+exports.menuDisabled = menuDisabled;
+exports.default = exports.menuDisabled;

package/dist/Components/SideBar/sidebarAccentColors.d.ts

@@ -1,6 +1,8 @@
 import type { PaletteProps } from "../../Theme/tokens/types";
 export type SidebarActiveAccent = {
+    /** Colour of the active row's icon. */
     icon: string;
+    /** Colour of the active row's label. */
     label: string;
 };
 /** Resolved per brand at palette-build time, so the rail needs no mode or brand lookup. */

package/dist/Components/SideBar/sidebarFocus.d.ts

@@ -0,0 +1,23 @@
+import type { PaletteProps } from "../../Theme/tokens/types";
+type RailColors = Pick<PaletteProps, "focusRing" | "sidebar">;
+/** The ring is derived for the canvas; the rail is near-black in both modes, so it is re-settled against the rail. */
+export declare const sidebarFocusRing: (colors: RailColors, surface?: string) => {
+    focusRing: {
+        ring: string;
+        halo: string;
+    };
+};
+/** `focusVisibleStyles` for a control sitting on the rail (or on `surface`, e.g. the flyout). */
+export declare const sidebarFocusStyles: (colors: RailColors, surface?: string) => {
+    _focusVisible: {
+        outline: string;
+        outlineOffset: string;
+        boxShadow: string;
+    };
+    "&:hover:focus-visible, &:active:focus-visible, &[data-active]:focus-visible": {
+        outline: string;
+        outlineOffset: string;
+        boxShadow: string;
+    };
+};
+export {};

package/dist/Components/SideBar/sidebarFocus.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sidebarFocusStyles = exports.sidebarFocusRing = void 0;
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const cache = new Map();
+/** The ring is derived for the canvas; the rail is near-black in both modes, so it is re-settled against the rail. */
+const sidebarFocusRing = (colors, surface = colors.sidebar.background[500]) => {
+    const key = `${colors.focusRing.ring}|${surface}`;
+    let tokens = cache.get(key);
+    if (!tokens) {
+        tokens = { ring: (0, outlineRung_1.liftToContrast)(colors.focusRing.ring, surface, outlineRung_1.AA_NON_TEXT), halo: surface };
+        cache.set(key, tokens);
+    }
+    return { focusRing: tokens };
+};
+exports.sidebarFocusRing = sidebarFocusRing;
+/** `focusVisibleStyles` for a control sitting on the rail (or on `surface`, e.g. the flyout). */
+const sidebarFocusStyles = (colors, surface) => (0, focusRing_styles_1.focusVisibleStyles)((0, exports.sidebarFocusRing)(colors, surface));
+exports.sidebarFocusStyles = sidebarFocusStyles;

package/dist/Components/SideBar/sidebarId.d.ts

@@ -0,0 +1,2 @@
+/** React's `useId()` wraps its value in colons (":r0:") — strip them for a plain DOM id token. */
+export declare const sanitizeId: (id: string) => string;

package/dist/Components/SideBar/sidebarId.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeId = void 0;
+/** React's `useId()` wraps its value in colons (":r0:") — strip them for a plain DOM id token. */
+const sanitizeId = (id) => id.replace(/:/g, "");
+exports.sanitizeId = sanitizeId;

package/dist/Components/SideBar/sidebarMotion.d.ts

@@ -0,0 +1,2 @@
+export declare const SIDEBAR_BG_TRANSITION: string;
+export declare const SIDEBAR_INK_TRANSITION: string;

package/dist/Components/SideBar/sidebarMotion.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_INK_TRANSITION = exports.SIDEBAR_BG_TRANSITION = void 0;
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+exports.SIDEBAR_BG_TRANSITION = (0, motion_1.transitionFor)(["background"]);
+exports.SIDEBAR_INK_TRANSITION = (0, motion_1.transitionFor)(["color"]);

package/dist/Components/SideBar/sidebarScale.d.ts

@@ -0,0 +1,15 @@
+/** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
+export declare const SIDEBAR_ROW: {
+    readonly height: "32px";
+    /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
+    readonly overlayHeight: "44px";
+    readonly subHeight: "28px";
+    readonly fontSize: string;
+    readonly iconSize: "1rem";
+};
+/** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */
+export declare const SIDEBAR_CHROME: {
+    readonly titleFontSize: string;
+    readonly labelFontSize: string;
+    readonly metaFontSize: "10px";
+};

package/dist/Components/SideBar/sidebarScale.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIDEBAR_CHROME = exports.SIDEBAR_ROW = void 0;
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+/** One type and row scale for the whole sidebar — rail, submenu, flyout, secondary bar and chrome. */
+exports.SIDEBAR_ROW = {
+    height: "32px",
+    /** Rail row in the mobile overlay — the WCAG 2.5.5 touch target. */
+    overlayHeight: "44px",
+    subHeight: "28px",
+    fontSize: typography_1.fontSizes["xs-plus"],
+    iconSize: "1rem",
+};
+/** Header/footer text around the rows; every row itself uses SIDEBAR_ROW.fontSize. */
+exports.SIDEBAR_CHROME = {
+    titleFontSize: typography_1.fontSizes["xs-plus"],
+    labelFontSize: typography_1.fontSizes["xs-minus"],
+    metaFontSize: "10px",
+};

package/dist/Components/SignInActivityTable/SignInActivityTable.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
 import { SignInActivityTableProps } from "./SignInActivityTableProps";
+/** Card listing recent sign-in devices (browser, device, activity) with loading and empty states. */
 declare const SignInActivityTable: React.FC<SignInActivityTableProps>;
 export default SignInActivityTable;

package/dist/Components/SignInActivityTable/SignInActivityTable.js

@@ -8,7 +8,12 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const planeStep_1 = require("../../Theme/tokens/builders/planeStep");
+const useScrollableRegion_1 = require("../../Hooks/useScrollableRegion");
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
+const scrollRegionRing_1 = require("./scrollRegionRing");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const BACKGROUND_TRANSITION = (0, motion_1.transitionFor)(["background"]);
 const DEFAULT_LABELS = {
     title: "Recent Sign-in Devices",
     browser: "Browser",
@@ -16,23 +21,26 @@ const DEFAULT_LABELS = {
     recentActivity: "Recent Activity",
     noActivity: "No recent sign-in activity",
 };
+/** Card listing recent sign-in devices (browser, device, activity) with loading and empty states. */
 const SignInActivityTable = ({ devices, isLoading = false, labels: labelOverrides, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const titleId = (0, react_1.useId)();
+    const { ref: scrollRef, props: scrollProps } = (0, useScrollableRegion_1.useScrollableRegion)({ labelledBy: titleId });
     const labels = (0, react_1.useMemo)(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
-    const border = colors.boxborder[200];
+    const edge = colors.boxborder[200];
     const surface = colors.background[50];
+    const rule = (0, planeStep_1.cardRule)(colors);
     const muted = colors.textMuted;
     const heading = colors.header[500];
-    const headBg = colors.backgroundColor.tableHeader;
-    const shadow = colors.boxShadow.default;
+    const headBg = (0, planeStep_1.bandOn)(colors.backgroundColor.tableHeader, surface);
     const thStyle = {
         fontSize: "0.7rem",
         textTransform: "uppercase",
         letterSpacing: "0.04em",
         color: muted,
-        borderColor: border,
+        borderColor: rule,
         py: 3,
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: border, boxShadow: `0 1px 2px ${shadow}`, overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: border, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { overflowX: "auto", children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : ((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.browser }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.device }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.recentActivity })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: devices.map((device, index) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: "background 0.15s ease", children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: device.device }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: border, fontSize: "sm", color: muted, children: (0, jsx_runtime_1.jsx)(react_2.Text, { children: device.activity }) })] }, index))) })] })) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { mt: 4, backgroundColor: surface, borderRadius: "xl", border: "1px solid", borderColor: edge, boxShadow: "sm", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { px: 4, py: 3, borderBottom: "1px solid", borderColor: rule, alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.Heading, { id: titleId, size: "sm", fontWeight: 600, color: heading, children: labels.title }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { ref: scrollRef, ...scrollProps, overflowX: "auto", sx: { _focusVisible: (0, scrollRegionRing_1.scrollRegionFocusRing)(colors, headBg) }, children: isLoading ? ((0, jsx_runtime_1.jsx)(react_2.VStack, { spacing: 3, p: 4, align: "stretch", children: Array.from({ length: 4 }).map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Skeleton, { height: "18px", borderRadius: "md" }, idx))) })) : devices.length === 0 ? ((0, jsx_runtime_1.jsx)(EmptyState_1.default, { icon: lucide_react_1.MonitorSmartphone, title: labels.noActivity, size: "sm", minH: "160px" })) : ((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.browser }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.device }), (0, jsx_runtime_1.jsx)(react_2.Th, { ...thStyle, children: labels.recentActivity })] }) }), (0, jsx_runtime_1.jsx)(react_2.Tbody, { children: devices.map((device, index) => ((0, jsx_runtime_1.jsxs)(react_2.Tr, { _hover: { bg: headBg }, transition: BACKGROUND_TRANSITION, children: [(0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", fontWeight: 500, color: heading, children: device.browser || "—" }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: device.device }), (0, jsx_runtime_1.jsx)(react_2.Td, { borderColor: rule, fontSize: "sm", color: muted, children: (0, jsx_runtime_1.jsx)(react_2.Text, { children: device.activity }) })] }, index))) })] })) })] }));
 };
 exports.default = SignInActivityTable;

package/dist/Components/SignInActivityTable/SignInActivityTableProps.d.ts

@@ -1,6 +1,10 @@
+/** One row of sign-in device history rendered by SignInActivityTable. */
 export type SignInDevice = {
+    /** Falls back to "—" when falsy; device and activity below don't — a blank one renders as an empty cell, not a dash. */
     browser: string;
+    /** Free text such as "MacBook Pro"; a blank value renders an empty cell. */
     device: string;
+    /** Shown verbatim, e.g. "2 hours ago"; the component never formats dates. */
     activity: string;
 };
 /**
@@ -8,14 +12,23 @@ export type SignInDevice = {
  * key has a sensible English default so the component works standalone.
  */
 export type SignInActivityLabels = {
+    /** Card heading, also the accessible name of the scroll area while it overflows; defaults to "Recent Sign-in Devices". */
     title?: string;
+    /** First column header; defaults to "Browser". */
     browser?: string;
+    /** Second column header; defaults to "Device". */
     device?: string;
+    /** Third column header; defaults to "Recent Activity". */
     recentActivity?: string;
+    /** Empty-state title shown when `devices` is empty. */
     noActivity?: string;
 };
+/** Read-only 3-column device list (browser, device, activity) on raw Chakra table parts, not the library Table — no row actions, closed props, no ref/...rest passthrough. */
 export interface SignInActivityTableProps {
+    /** Rendered in array order and keyed by index; an empty array shows the empty state. */
     devices: SignInDevice[];
+    /** Replaces the table with four skeleton bars; the heading stays. */
     isLoading?: boolean;
+    /** Partial overrides merged over the English defaults, per key. */
     labels?: SignInActivityLabels;
 }

package/dist/Components/SignInActivityTable/scrollRegionRing.d.ts

@@ -0,0 +1,10 @@
+import type { FocusRingTokens } from "../../Theme/tokens/types";
+type WithFocusRing = {
+    focusRing: FocusRingTokens;
+};
+export declare const scrollRegionRingColor: (colors: WithFocusRing, band: string) => string;
+export declare const scrollRegionFocusRing: (colors: WithFocusRing, band: string) => {
+    outline: string;
+    outlineOffset: string;
+};
+export {};

package/dist/Components/SignInActivityTable/scrollRegionRing.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scrollRegionFocusRing = exports.scrollRegionRingColor = void 0;
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const BAND = focusRing_styles_1.FOCUS_RING_WIDTH - focusRing_styles_1.FOCUS_HALO_WIDTH;
+const scrollRegionRingColor = (colors, band) => (0, outlineRung_1.liftToContrast)(colors.focusRing.ring, band, outlineRung_1.AA_NON_TEXT);
+exports.scrollRegionRingColor = scrollRegionRingColor;
+// NOTE: an outline, not a box-shadow — an inset shadow is hidden under the opaque header band.
+const scrollRegionFocusRing = (colors, band) => ({
+    outline: `${BAND}px solid ${(0, exports.scrollRegionRingColor)(colors, band)}`,
+    outlineOffset: `-${BAND}px`,
+});
+exports.scrollRegionFocusRing = scrollRegionFocusRing;

package/dist/Components/Skeletons/SkeletonProps.d.ts

@@ -1,4 +1,15 @@
+import type { HTMLAttributes } from "react";
 import { SkeletonProps as ChakraSkeleton, SkeletonTextProps } from "@chakra-ui/react";
-export type SkeletonProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
+type SkeletonOwnProps = Pick<ChakraSkeleton, "startColor" | "endColor" | "height" | "isLoaded" | "bg" | "color" | "fadeDuration" | "children" | "speed" | "size" | "mt" | "noOfLines" | "width"> & {
+    /** isLoaded, children, bg, color, fadeDuration only apply to type="skeleton" — circle/text accept but silently ignore them. */
     type: "skeleton" | "circle" | "text";
+    /** Corner radius for type="skeleton" (theme default when unset); circle/text ignore it. */
+    borderRadius?: ChakraSkeleton["borderRadius"];
+    /** @deprecated Never applied; wrap the skeleton in an element that sets it. */
+    alignSelf?: ChakraSkeleton["alignSelf"];
+    /** @deprecated Never applied; wrap the skeleton in an element that sets it. */
+    flexShrink?: ChakraSkeleton["flexShrink"];
 } & Partial<Pick<SkeletonTextProps, "spacing" | "skeletonHeight">>;
+/** Closed style-prop list (no margin beyond `mt` on text); plain HTML attributes (id, className, data-*, aria-*) land on the rendered root. */
+export type SkeletonProps = SkeletonOwnProps & Omit<HTMLAttributes<HTMLDivElement>, keyof SkeletonOwnProps | "dangerouslySetInnerHTML">;
+export {};

package/dist/Components/Skeletons/Skeletons.d.ts

@@ -1,2 +1,3 @@
 import { SkeletonProps } from "./SkeletonProps";
-export default function Skeletons({ startColor, endColor, height, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+/** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
+export default function Skeletons({ startColor, endColor, height, borderRadius, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, alignSelf, flexShrink, ...rest }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/Skeletons/Skeletons.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Skeletons;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@chakra-ui/react");
-function Skeletons({ startColor, endColor, height = "20px", isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, }) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type === "skeleton" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, children: children })), type === "circle" && (0, jsx_runtime_1.jsx)(react_1.SkeletonCircle, { size: size, speed: speed }), type === "text" && ((0, jsx_runtime_1.jsx)(react_1.SkeletonText, { mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
+/** Renders exactly one of Skeleton/SkeletonCircle/SkeletonText per `type` — not a layout wrapper combining all three. */
+function Skeletons({ startColor, endColor, height = "1.25rem", borderRadius, isLoaded, bg, color, fadeDuration, children, type, speed, size, mt, noOfLines, spacing, skeletonHeight, width, alignSelf, flexShrink, ...rest }) {
+    void alignSelf;
+    void flexShrink;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [type === "skeleton" && ((0, jsx_runtime_1.jsx)(react_1.Skeleton, { ...rest, height: height, isLoaded: isLoaded, bg: bg, color: color, fadeDuration: fadeDuration, startColor: startColor, endColor: endColor, speed: speed, width: width, borderRadius: borderRadius, children: children })), type === "circle" && (0, jsx_runtime_1.jsx)(react_1.SkeletonCircle, { ...rest, size: size, speed: speed }), type === "text" && ((0, jsx_runtime_1.jsx)(react_1.SkeletonText, { ...rest, mt: mt, noOfLines: noOfLines, spacing: spacing, skeletonHeight: skeletonHeight }))] }));
 }

package/dist/Components/SkipLink/SkipLink.d.ts

@@ -0,0 +1,4 @@
+import type { SkipLinkProps } from "./SkipLinkProps";
+export declare const missingTargetWarning: (targetId: string) => string;
+declare const SkipLink: import("react").ForwardRefExoticComponent<SkipLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+export default SkipLink;

package/dist/Components/SkipLink/SkipLink.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.missingTargetWarning = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 radii_1 = require("../../Theme/tokens/primitives/radii");
+const VisuallyHidden_1 = require("../VisuallyHidden/VisuallyHidden");
+const FOCUSABLE = "a[href], area[href], button, input, select, textarea, iframe, summary, [tabindex], [contenteditable='true']";
+const missingTargetWarning = (targetId) => `[pixelize-design-library] SkipLink: no element with id "${targetId}" to skip to.`;
+exports.missingTargetWarning = missingTargetWarning;
+const SkipLink = (0, react_1.forwardRef)(function SkipLink({ targetId = "main-content", children = "Skip to main content", onClick, ...rest }, ref) {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const handleClick = (event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.defaultPrevented)
+            return;
+        const target = document.getElementById(targetId);
+        if (!target) {
+            if (process.env.NODE_ENV !== "production")
+                console.warn((0, exports.missingTargetWarning)(targetId));
+            return;
+        }
+        event.preventDefault();
+        if (!target.matches(FOCUSABLE))
+            target.setAttribute("tabindex", "-1");
+        target.focus();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_2.chakra.a, { ...rest, ref: ref, href: `#${targetId}`, onClick: handleClick, sx: {
+            ...VisuallyHidden_1.visuallyHiddenStyle,
+            _focusVisible: {
+                clip: "auto",
+                width: "auto",
+                height: "auto",
+                margin: 0,
+                overflow: "visible",
+                top: 4,
+                left: 4,
+                px: 4,
+                py: 2,
+                zIndex: "skipLink",
+                borderRadius: radii_1.RADIUS_ROLE.control,
+                bg: colors.surfaceRaised,
+                color: colors.accentText,
+                fontSize: "sm",
+                fontWeight: 600,
+                textDecoration: "none",
+                ...(0, focusRing_styles_1.focusVisibleRing)(colors),
+            },
+        }, children: children }));
+});
+exports.default = SkipLink;

package/dist/Components/SkipLink/SkipLinkProps.d.ts

@@ -0,0 +1,8 @@
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+/** A "skip to content" link, invisible until keyboard focus; other `<a>` attributes land on the anchor. */
+export interface SkipLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "color" | "children" | "dangerouslySetInnerHTML"> {
+    /** Id of the element to jump to, without `#`; it receives focus (gaining `tabindex="-1"` if it is not focusable). Defaults to "main-content". */
+    targetId?: string;
+    /** The link text; defaults to "Skip to main content". */
+    children?: ReactNode;
+}

package/dist/Components/SkipLink/SkipLinkProps.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/Components/Slider/Slider.d.ts

@@ -1,8 +1,11 @@
 import React from "react";
 type ImageSliderProps = {
     images: SliderImage[];
+    /** ms between slides; <= 0 disables auto-advance (no timer). Also paused while hovered or focused, and off under reduced motion. */
     interval?: number;
     isArrow?: boolean;
+    /** Adds a play/pause button (WCAG 2.2.2) while auto-advance is running; off by default. Hidden when `interval` <= 0, with one slide, or under reduced motion. */
+    showPauseControl?: boolean;
     mobileImages?: SliderImage[];
 };
 type SliderImage = {
@@ -11,7 +14,9 @@ type SliderImage = {
     previewUrl: string;
     /** Optional URL used on small viewports when provided via `mobileImages`. */
     mobilePreviewUrl?: string;
+    /** Sorts the main track, but pagination dots follow the array's original order — pass images pre-sorted by order to keep dots in sync. */
     order: number;
 };
+/** Auto-advancing image/content carousel (pauses on hover/focus, never auto-advances under reduced motion) — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
 declare const Slider: React.FC<ImageSliderProps>;
 export default Slider;

package/dist/Components/Slider/Slider.js

@@ -5,10 +5,19 @@ const react_1 = require("react");
 const react_2 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) => {
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const outlineRung_1 = require("../../Theme/tokens/builders/outlineRung");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
+/** Auto-advancing image/content carousel (pauses on hover/focus, never auto-advances under reduced motion) — NOT a numeric range input; for that use Chakra's Slider via the Primitives barrel (exported as RangeSlider). */
+const Slider = ({ images, interval = 5000, isArrow = false, showPauseControl = false, mobileImages, }) => {
     var _a, _b;
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    const [userPaused, setUserPaused] = (0, react_1.useState)(false);
+    const reducedMotion = (0, motion_2.usePrefersReducedMotion)();
     const timeoutRef = (0, react_1.useRef)(null);
     const isMobile = (_a = (0, react_2.useBreakpointValue)({ base: true, md: false })) !== null && _a !== void 0 ? _a : false;
     const slides = (isMobile && mobileImages && mobileImages.length > 0) ? mobileImages : images;
@@ -19,14 +28,14 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);
     }, [slides.length]);
     (0, react_1.useEffect)(() => {
-        if (interval > 0) {
+        if (interval > 0 && !hovered && !focused && !userPaused && !reducedMotion) {
             timeoutRef.current = setTimeout(nextSlide, interval);
         }
         return () => {
             if (timeoutRef.current)
                 clearTimeout(timeoutRef.current);
         };
-    }, [currentIndex, interval, nextSlide]);
+    }, [currentIndex, interval, nextSlide, hovered, focused, userPaused, reducedMotion]);
     (0, react_1.useEffect)(() => {
         if (currentIndex >= slides.length) {
             setCurrentIndex(0);
@@ -34,10 +43,18 @@ const Slider = ({ images, interval = 5000, isArrow = false, mobileImages, }) =>
         // eslint-disable-next-line
     }, [slides.length]);
     const ratio = (_b = (0, react_2.useBreakpointValue)({ base: 16 / 9, md: 21 / 9, lg: 21 / 9 })) !== null && _b !== void 0 ? _b : 16 / 9;
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: "transform 0.5s ease", children: [...slides]
+    const chipBg = colors.background[50];
+    const chipInk = (0, accentText_1.onFilled)(chipBg, colors.white, colors.black);
+    const chipHoverBg = (0, outlineRung_1.resolveHoverTint)(colors.gray[200], chipBg);
+    const chipHoverInk = (0, accentText_1.onFilled)(chipHoverBg, colors.white, colors.black);
+    const dotInactiveInk = (0, outlineRung_1.liftToContrast)(colors.gray[400], chipBg, outlineRung_1.AA_NON_TEXT);
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { position: "relative", w: "100%", h: "auto", overflow: "hidden", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), onFocus: () => setFocused(true), onBlur: (e) => {
+            if (!e.currentTarget.contains(e.relatedTarget))
+                setFocused(false);
+        }, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { w: `${slides.length * 100}%`, transform: `translateX(-${(currentIndex * 100) / slides.length}%)`, transition: reducedMotion ? "none" : "transform 0.5s ease", children: [...slides]
                     .sort((a, b) => a.order - b.order)
                     .map((image, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: `${100 / slides.length}%`, h: "auto", flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center", children: (0, jsx_runtime_1.jsx)(react_2.AspectRatio, { ratio: ratio, w: "100%", children: (0, jsx_runtime_1.jsx)(react_2.Image, { src: isMobile && image.mobilePreviewUrl
                                 ? image.mobilePreviewUrl
-                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { color: colors.gray[800] }), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { color: colors.gray[800] }), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", _hover: { bg: colors.gray[200] } })] })), slides.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, bg: idx === currentIndex ? "white" : "whiteAlpha.600", borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), transition: "all 0.3s" }, idx))) }))] }));
+                                : image.previewUrl, alt: `Slide ${idx + 1}`, objectFit: "cover", w: "100%", h: "100%", loading: "lazy" }) }) }, image.id))) }), isArrow && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, {}), "aria-label": "Previous Slide", onClick: prevSlide, position: "absolute", top: "50%", left: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } }), (0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, {}), "aria-label": "Next Slide", onClick: nextSlide, position: "absolute", top: "50%", right: "1rem", transform: "translateY(-50%)", zIndex: 2, variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })] })), showPauseControl && interval > 0 && slides.length > 1 && !reducedMotion && ((0, jsx_runtime_1.jsx)(react_2.IconButton, { icon: userPaused ? (0, jsx_runtime_1.jsx)(lucide_react_1.Play, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_react_1.Pause, { size: 16 }), "aria-label": userPaused ? "Play slideshow" : "Pause slideshow", onClick: () => setUserPaused((paused) => !paused), position: "absolute", bottom: "1rem", right: "1rem", zIndex: 2, size: "sm", variant: "ghost", borderRadius: "full", bg: chipBg, color: chipInk, _hover: { bg: chipHoverBg, color: chipHoverInk } })), slides.length > 1 && ((0, jsx_runtime_1.jsx)(react_2.Flex, { position: "absolute", bottom: "1rem", left: "50%", transform: "translateX(-50%)", gap: "0.5rem", zIndex: 2, bg: chipBg, px: "0.6rem", py: "0.4rem", borderRadius: "full", children: slides.map((_, idx) => ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", w: { base: "0.5rem", md: "0.8rem" }, h: { base: "0.5rem", md: "0.8rem" }, border: "none", p: 0, bg: idx === currentIndex ? chipInk : dotInactiveInk, borderRadius: "full", cursor: "pointer", onClick: () => setCurrentIndex(idx), "aria-label": `Go to slide ${idx + 1}`, "aria-current": idx === currentIndex, transition: (0, motion_1.transitionFor)(["background-color"], "base"), _focusVisible: { outline: `2px solid ${chipInk}`, outlineOffset: "2px" } }, idx))) }))] }));
 };
 exports.default = Slider;