pixelize-design-library 3.0.1-beta.1 → 3.1.1

package/dist/Components/PageHeader/PageHeaderProps.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from "react";
+/** Page title block per DESIGN-GUIDE §6; other `<div>` attributes (id, className, style, data-*, aria-*) land on the root. */
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title" | "color" | "children" | "dangerouslySetInnerHTML"> {
+    /** Rendered as the page's h1. */
+    title: ReactNode;
+    /** Muted small line under the title. */
+    subtitle?: ReactNode;
+    /** Right-aligned button row; wraps under the title on narrow screens. */
+    actions?: ReactNode;
+    /** Rendered above the title; a descendant with aria-current="page" gets the stronger text colour. */
+    breadcrumbs?: ReactNode;
+    /** Avatar or icon left of the title; `titleAddon` sits inline after it (status Tag). */
+    leading?: ReactNode;
+    /** Rendered inline right after the h1, e.g. a status Tag; wraps under a long title. */
+    titleAddon?: ReactNode;
+    /** Wrapping row of muted xs items under the subtitle (owner, updated-at, etc.). */
+    meta?: ReactNode;
+    /** Rendered full-width below the whole header, e.g. a Tabs list. */
+    tabs?: ReactNode;
+    /** "md" = 18px/600 (default); "lg" = 24px/700; "xl" = 24px, 30px from `md`, 700, tighter tracking. */
+    titleSize?: PageHeaderTitleSize;
+    /** "auto" (default) wraps actions below the title whenever they don't fit beside it; "stacked" always stacks; "inline" never wraps from `md` up. */
+    actionsLayout?: PageHeaderActionsLayout;
+    "data-testid"?: string;
+}
+/** Title ramp step. */
+export type PageHeaderTitleSize = "md" | "lg" | "xl";
+/** How the actions row sits against the title block. */
+export type PageHeaderActionsLayout = "auto" | "stacked" | "inline";

package/dist/Components/PageHeader/PageHeaderProps.js

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

package/dist/Components/Pagination/Pagination.d.ts

@@ -0,0 +1,5 @@
+import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+import { type PaginationProps } from "./PaginationProps";
+export declare const PICKER_SIZE: Readonly<Record<ControlSize, ControlSize>>;
+declare const _default: import("react").MemoExoticComponent<(props: PaginationProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/dist/Components/Pagination/Pagination.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PICKER_SIZE = 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 Button_1 = __importDefault(require("../Button/Button"));
+const Select_1 = __importDefault(require("../Select/Select"));
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const typography_1 = require("../../Theme/tokens/primitives/typography");
+const pageWindow_1 = require("./pageWindow");
+const PaginationProps_1 = require("./PaginationProps");
+exports.PICKER_SIZE = { xs: "xs", sm: "xs", md: "md", lg: "lg" };
+const PICKER_WIDTH = { xs: "3.75rem", sm: "3.75rem", md: "4.5rem", lg: "5.25rem" };
+const Pagination = (props) => {
+    const { page, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, siblingCount = 1, size = "sm", isDisabled = false, labels, "aria-label": ariaLabel = "Pagination", "data-testid": testId, } = props;
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const gapInk = (0, react_1.useMemo)(() => (0, accentText_1.accentTextOnCanvas)(colors.gray, colors.backgroundColor.main), [colors]);
+    const copy = { ...PaginationProps_1.defaultPaginationLabels, ...labels };
+    const pageCount = props.totalItems === undefined ? Math.max(1, props.pageCount) : (0, pageWindow_1.pageCountFor)(props.totalItems, props.pageSize);
+    const current = (0, pageWindow_1.clampPage)(page, pageCount);
+    const items = (0, react_1.useMemo)(() => (0, pageWindow_1.pageWindow)(current, pageCount, siblingCount), [current, pageCount, siblingCount]);
+    const { height, fontSize, iconSize } = controlSizes_1.BUTTON_SIZES[size];
+    const previousRef = (0, react_1.useRef)(null);
+    const nextRef = (0, react_1.useRef)(null);
+    const currentRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        var _a;
+        const stranded = [previousRef.current, nextRef.current].some((step) => step !== null && step.disabled && step === document.activeElement);
+        if (stranded)
+            (_a = currentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [current]);
+    const sizeOptions = (0, react_1.useMemo)(() => pageSizeOptions && pageSize !== undefined
+        ? [...new Set([...pageSizeOptions, pageSize])].sort((a, b) => a - b).map((n) => ({ id: n, label: n }))
+        : [], [pageSizeOptions, pageSize]);
+    const go = (target) => {
+        if (target !== current)
+            onPageChange(target);
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "nav", "aria-label": ariaLabel, "data-testid": testId, align: "center", gap: 3, wrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "ul", listStyleType: "none", m: 0, p: 0, align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsx)(Button_1.default, { ref: previousRef, size: size, variant: "ghost", colorScheme: "gray", "aria-label": copy.previous, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { size: iconSize }), isDisabled: isDisabled || current <= 1, onClick: () => go(current - 1) }) }), items.map((item) => typeof item === "number" ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsx)(Button_1.default, { ref: item === current ? currentRef : undefined, size: size, variant: item === current ? "solid" : "ghost", colorScheme: item === current ? "primary" : "gray", "aria-label": copy.page(item), "aria-current": item === current ? "page" : undefined, isDisabled: isDisabled, onClick: () => go(item), sx: typography_1.NUMERIC_TEXT, children: item }) }, item)) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", display: "inline-flex", alignItems: "center", justifyContent: "center", minW: height, h: height, fontSize: fontSize, color: gapInk, children: "\u2026" }) }, item))), (0, jsx_runtime_1.jsx)(react_2.Box, { as: "li", children: (0, jsx_runtime_1.jsx)(Button_1.default, { ref: nextRef, size: size, variant: "ghost", colorScheme: "gray", "aria-label": copy.next, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { size: iconSize }), isDisabled: isDisabled || current >= pageCount, onClick: () => go(current + 1) }) })] }), onPageSizeChange && sizeOptions.length > 0 && ((0, jsx_runtime_1.jsx)(Select_1.default, { native: false, isSearchable: false, "aria-label": copy.pageSize, size: exports.PICKER_SIZE[size], width: PICKER_WIDTH[size], isDisabled: isDisabled, value: pageSize, options: sizeOptions, onChange: (option) => option && onPageSizeChange(Number(option.id)) }))] }));
+};
+exports.default = (0, react_1.memo)(Pagination);

package/dist/Components/Pagination/PaginationProps.d.ts

@@ -0,0 +1,50 @@
+import type { ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+/** Screen-reader names, merged over `defaultPaginationLabels`; override them all for another language. */
+export interface PaginationLabels {
+    /** Accessible name of the previous-page button. */
+    previous: string;
+    /** Accessible name of the next-page button. */
+    next: string;
+    /** Names a numbered button from its 1-based page, e.g. (3) => "Page 3". */
+    page: (page: number) => string;
+    /** Names the rows-per-page picker. */
+    pageSize: string;
+}
+export declare const defaultPaginationLabels: PaginationLabels;
+type PaginationCount = {
+    /** Total pages; anything below 1 renders a single page. */
+    pageCount: number;
+    totalItems?: undefined;
+    /** Rows per page; only the rows-per-page picker reads it here. */
+    pageSize?: number;
+} | {
+    /** Total rows; pages are derived as ceil(totalItems / pageSize), at least 1. */
+    totalItems: number;
+    /** Rows per page; also the picker's current value. */
+    pageSize: number;
+    pageCount?: undefined;
+};
+/** Controlled page navigation: numbered pages, ellipses, previous/next and an optional rows-per-page picker. */
+export type PaginationProps = PaginationCount & {
+    /** Current page, 1-based. Out-of-range values are clamped for display, never reported back. */
+    page: number;
+    /** Fires with the chosen 1-based page; never for the page already shown. */
+    onPageChange: (page: number) => void;
+    /** Rows-per-page choices; the picker needs this, `pageSize` and `onPageSizeChange`. */
+    pageSizeOptions?: number[];
+    /** Fires with the chosen page size; resetting `page` is the caller's call. */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Pages kept either side of the current one; defaults to 1. First and last always show. */
+    siblingCount?: number;
+    /** Same size names as Button; defaults to "sm". */
+    size?: ControlSize;
+    /** Disables every control, e.g. while the next page loads. */
+    isDisabled?: boolean;
+    /** Names the nav landmark; defaults to "Pagination". Give each pager on a screen its own. */
+    "aria-label"?: string;
+    /** Overrides the default English names; unset keys keep their default. */
+    labels?: Partial<PaginationLabels>;
+    /** Test id on the nav element. */
+    "data-testid"?: string;
+};
+export {};

package/dist/Components/Pagination/PaginationProps.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultPaginationLabels = void 0;
+exports.defaultPaginationLabels = {
+    previous: "Previous page",
+    next: "Next page",
+    page: (page) => `Page ${page}`,
+    pageSize: "Rows per page",
+};

package/dist/Components/Pagination/pageWindow.d.ts

@@ -0,0 +1,4 @@
+export type PageItem = number | "start-ellipsis" | "end-ellipsis";
+export declare const pageCountFor: (totalItems: number, pageSize: number) => number;
+export declare const clampPage: (page: number, pageCount: number) => number;
+export declare const pageWindow: (page: number, pageCount: number, siblingCount?: number) => PageItem[];

package/dist/Components/Pagination/pageWindow.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pageWindow = exports.clampPage = exports.pageCountFor = void 0;
+const range = (from, to) => Array.from({ length: Math.max(0, to - from + 1) }, (_, i) => from + i);
+const pageCountFor = (totalItems, pageSize) => pageSize > 0 ? Math.max(1, Math.ceil(totalItems / pageSize)) : 1;
+exports.pageCountFor = pageCountFor;
+const clampPage = (page, pageCount) => Math.min(Math.max(1, page), Math.max(1, pageCount));
+exports.clampPage = clampPage;
+const pageWindow = (page, pageCount, siblingCount = 1) => {
+    const count = Math.max(1, pageCount);
+    const siblings = Math.max(0, siblingCount);
+    const current = (0, exports.clampPage)(page, count);
+    const edgeRun = 2 * siblings + 3;
+    if (count <= edgeRun + 2)
+        return range(1, count);
+    if (current - siblings <= 3)
+        return [...range(1, edgeRun), "end-ellipsis", count];
+    if (current + siblings >= count - 2)
+        return [1, "start-ellipsis", ...range(count - edgeRun + 1, count)];
+    return [1, "start-ellipsis", ...range(current - siblings, current + siblings), "end-ellipsis", count];
+};
+exports.pageWindow = pageWindow;

package/dist/Components/PaymentOption/PaymentOption.d.ts

@@ -0,0 +1,4 @@
+import type { PaymentOptionProps } from "./PaymentOptionProps";
+/** Tonal payment-method row: icon well, title, subtitle, offer tag, and an area that opens when it is chosen. */
+declare const PaymentOption: ({ value, title, subtitle, icon, offer, selected, onSelect, disabled, children, "data-testid": testId, }: PaymentOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default PaymentOption;

package/dist/Components/PaymentOption/PaymentOption.js

@@ -0,0 +1,24 @@
+"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 useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const selectable_1 = require("../CheckoutKit/selectable");
+const Tag_1 = __importDefault(require("../Tag/Tag"));
+/** Tonal payment-method row: icon well, title, subtitle, offer tag, and an area that opens when it is chosen. */
+const PaymentOption = ({ value, title, subtitle, icon, offer, selected, onSelect, disabled = false, children, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const uid = (0, react_1.useId)();
+    const titleId = `${uid}-title`;
+    const subtitleId = `${uid}-subtitle`;
+    const regionId = `${uid}-region`;
+    const { isSelected, interactive, inGroup, ringed, props } = (0, selectable_1.useSelectable)({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    const expanded = isSelected && !!children;
+    return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...(0, selectable_1.selectableSurface)(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? titleId : undefined, "aria-describedby": props.role && subtitle ? subtitleId : undefined, "aria-controls": expanded && props.role === "radio" ? regionId : undefined, align: "center", gap: 3, p: 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", children: [selectable && (0, jsx_runtime_1.jsx)(selectable_1.RadioIndicator, { selected: isSelected }), icon && ((0, jsx_runtime_1.jsx)(react_2.Flex, { as: "span", "aria-hidden": true, align: "center", justify: "center", boxSize: 10, flexShrink: 0, borderRadius: "xl", bg: colors.background[50], color: colors.header[900], children: icon })), (0, jsx_runtime_1.jsxs)(react_2.Box, { flex: 1, minW: 0, children: [(0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: titleId, display: "block", fontSize: "sm", fontWeight: 600, lineHeight: 1.4, color: colors.header[900], children: title }), subtitle && ((0, jsx_runtime_1.jsx)(react_2.Text, { as: "span", id: subtitleId, display: "block", fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: subtitle }))] }), offer && (0, jsx_runtime_1.jsx)(Tag_1.default, { label: offer, size: "xs", tone: "success" })] }), expanded && ((0, jsx_runtime_1.jsx)(react_2.Box, { id: regionId, role: "group", "aria-labelledby": titleId, px: 4, pb: 4, pl: selectable ? "3.25rem" : 4, children: children }))] }));
+};
+exports.default = PaymentOption;

package/dist/Components/PaymentOption/PaymentOptionGroup.d.ts

@@ -0,0 +1,4 @@
+import type { PaymentOptionGroupProps } from "./PaymentOptionProps";
+/** Radiogroup wrapper for `PaymentOption`s. */
+declare const PaymentOptionGroup: (props: PaymentOptionGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default PaymentOptionGroup;

package/dist/Components/PaymentOption/PaymentOptionGroup.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const selectable_1 = require("../CheckoutKit/selectable");
+/** Radiogroup wrapper for `PaymentOption`s. */
+const PaymentOptionGroup = (props) => (0, jsx_runtime_1.jsx)(selectable_1.SelectableGroup, { ...props });
+exports.default = PaymentOptionGroup;

package/dist/Components/PaymentOption/PaymentOptionProps.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+/** A payment-method row. Inside a `PaymentOptionGroup` it is a radio keyed by `value`; alone, `onSelect` makes it a toggle button. */
+export interface PaymentOptionProps {
+    /** Identifies the option inside a `PaymentOptionGroup`; required there. */
+    value?: string;
+    /** Method name; also the row's accessible name when selectable. */
+    title: string;
+    /** Muted line under the title, e.g. "Pay on delivery · ₹50 handling fee". */
+    subtitle?: string;
+    /** Slot for a method icon or logo, shown in a 40px well. */
+    icon?: ReactNode;
+    /** Short offer tag, e.g. "5% cashback". */
+    offer?: string;
+    /** Standalone selection state; ignored inside a group, where the group's value decides. */
+    selected?: boolean;
+    /** Called when the row is chosen; also fires inside a group, after the group updates. */
+    onSelect?: () => void;
+    /** Dims the row and drops it from the tab order, e.g. COD above the order limit; say why in `subtitle`. */
+    disabled?: boolean;
+    /** Revealed under the row only while it is selected, e.g. a UPI id input. Interactive content here sits outside the radio. */
+    children?: ReactNode;
+    /** Test id on the row's outer element. */
+    "data-testid"?: string;
+}
+/** Radiogroup of `PaymentOption`s with a roving tab stop; arrow keys move focus and selection together. */
+export interface PaymentOptionGroupProps {
+    /** Selected option's `value`; controls the group when set. */
+    value?: string;
+    /** Initially selected `value` when the group is uncontrolled. */
+    defaultValue?: string;
+    /** Called with the new `value` when selection changes by click or arrow key. */
+    onValueChange?: (value: string) => void;
+    /** Direct `PaymentOption` children; wrapping them in another component hides their `value` from the roving tab stop. */
+    children: ReactNode;
+    /** Accessible name of the radiogroup; give this or `aria-labelledby`. */
+    "aria-label"?: string;
+    /** Id of the element that names the radiogroup. */
+    "aria-labelledby"?: string;
+    /** Test id on the radiogroup element. */
+    "data-testid"?: string;
+}

package/dist/Components/PaymentOption/PaymentOptionProps.js

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

package/dist/Components/PdfViewer/PdfViewer.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+/** Visible strings; every key falls back to its English default. */
+export type PdfViewerLabels = Partial<{
+    open: string;
+    download: string;
+    unsupported: string;
+    failed: string;
+}>;
+/** Inline PDF viewer fed by a URL or an authed blob getter. */
+export interface PdfViewerProps {
+    /** URL of the PDF, rendered via a native browser <embed>; pass exactly one of `pdfUrl` / `getBlob`. */
+    pdfUrl?: string;
+    /** Source as a blob getter instead of a URL — for authed files; the viewer makes and revokes the object URL. */
+    getBlob?: () => Promise<Blob>;
+    /** File name shown in the toolbar and used as the download name. */
+    fileName?: string;
+    /** Height of the embed. */
+    height?: string;
+    /** Show the toolbar (name + open + download); set false when the caller renders its own file actions. */
+    showToolbar?: boolean;
+    /** Border radius of the frame. */
+    borderRadius?: string;
+    /** What shows when inline PDF is unsupported or loading failed. Default: message + Open + Download. */
+    fallback?: React.ReactNode;
+    /** Fires when the embed loads; in blob mode, when the file bytes are ready (<embed> has no reliable load event). */
+    onLoad?: () => void;
+    /** Fires when `getBlob` rejects or an on-demand Open/Download fetch fails. */
+    onError?: (error: unknown) => void;
+    labels?: PdfViewerLabels;
+    "data-testid"?: string;
+}
+/** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
+declare const PdfViewer: React.FC<PdfViewerProps>;
+export default PdfViewer;

package/dist/Components/PdfViewer/PdfViewer.js

@@ -0,0 +1,142 @@
+"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 lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const accentText_1 = require("../../Theme/tokens/builders/accentText");
+const rowStates_1 = require("../../Theme/tokens/builders/rowStates");
+const Button_1 = __importDefault(require("../Button/Button"));
+const Skeletons_1 = __importDefault(require("../Skeletons/Skeletons"));
+const ToolTip_1 = __importDefault(require("../ToolTip/ToolTip"));
+const DEFAULT_LABELS = {
+    open: "Open in new tab",
+    download: "Download",
+    unsupported: "This browser can't display PDFs inline. Open or download the file instead.",
+    failed: "The document could not be loaded.",
+};
+const canEmbedPdf = () => typeof navigator === "undefined" || navigator.pdfViewerEnabled !== false;
+const asPdf = (blob) => (blob.type ? blob : new Blob([blob], { type: "application/pdf" }));
+/** Always-inline PDF embed panel (never a modal) — for a modal previewer of images/video/other too, use FilePreview. */
+const PdfViewer = ({ pdfUrl, getBlob, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "xl", fallback, onLoad, onError, labels, "data-testid": testId, }) => {
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const text = { ...DEFAULT_LABELS, ...labels };
+    const toolbarSurface = theme.colors.background[50];
+    const iconHoverInk = (0, accentText_1.accentTextOnCanvas)(theme.colors.primary, toolbarSurface);
+    const iconHoverBg = (0, rowStates_1.listRowBackgrounds)(theme.colors).active;
+    const supported = canEmbedPdf();
+    const isBlobMode = Boolean(getBlob);
+    const getBlobRef = (0, react_1.useRef)(getBlob);
+    const onLoadRef = (0, react_1.useRef)(onLoad);
+    const onErrorRef = (0, react_1.useRef)(onError);
+    getBlobRef.current = getBlob;
+    onLoadRef.current = onLoad;
+    onErrorRef.current = onError;
+    const [status, setStatus] = (0, react_1.useState)(isBlobMode && supported ? "loading" : "idle");
+    const [objectUrl, setObjectUrl] = (0, react_1.useState)(null);
+    const tempUrls = (0, react_1.useRef)([]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!isBlobMode || !supported)
+            return undefined;
+        let cancelled = false;
+        let created = null;
+        setStatus("loading");
+        setObjectUrl(null);
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            var _a;
+            if (cancelled)
+                return;
+            created = URL.createObjectURL(asPdf(blob));
+            setObjectUrl(created);
+            setStatus("ready");
+            (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef);
+        }, (error) => {
+            var _a;
+            if (cancelled)
+                return;
+            setStatus("error");
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+        return () => {
+            cancelled = true;
+            if (created)
+                URL.revokeObjectURL(created);
+        };
+    }, [isBlobMode, supported]);
+    (0, react_1.useEffect)(() => () => {
+        tempUrls.current.forEach((url) => URL.revokeObjectURL(url));
+        tempUrls.current = [];
+    }, []);
+    const makeTempUrl = (0, react_1.useCallback)((blob) => {
+        const url = URL.createObjectURL(asPdf(blob));
+        tempUrls.current.push(url);
+        return url;
+    }, []);
+    const openBlob = () => {
+        var _a;
+        if (objectUrl) {
+            window.open(objectUrl, "_blank", "noopener");
+            return;
+        }
+        const tab = window.open("", "_blank");
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const url = makeTempUrl(blob);
+            if (tab)
+                tab.location.href = url;
+            else
+                window.location.assign(url);
+        }, (error) => {
+            var _a;
+            tab === null || tab === void 0 ? void 0 : tab.close();
+            (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error);
+        });
+    };
+    const downloadBlob = () => {
+        var _a;
+        (_a = getBlobRef.current) === null || _a === void 0 ? void 0 : _a.call(getBlobRef).then((blob) => {
+            const link = document.createElement("a");
+            link.href = makeTempUrl(blob);
+            link.download = fileName;
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+        }, (error) => { var _a; return (_a = onErrorRef.current) === null || _a === void 0 ? void 0 : _a.call(onErrorRef, error); });
+    };
+    const toolbarLabel = (kind) => {
+        if (labels === null || labels === void 0 ? void 0 : labels[kind])
+            return `${labels[kind]} ${fileName}`;
+        return kind === "open" ? `Open ${fileName} in a new tab` : `Download ${fileName}`;
+    };
+    const actionStyle = {
+        p: 2,
+        borderRadius: "lg",
+        color: theme.colors.gray[600],
+        _hover: { bg: iconHoverBg, color: iconHoverInk },
+    };
+    const openAction = isBlobMode ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: openBlob, "aria-label": toolbarLabel("open"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, "aria-hidden": "true" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": toolbarLabel("open"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, "aria-hidden": "true" }) }));
+    const downloadAction = isBlobMode && !objectUrl ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "button", type: "button", onClick: downloadBlob, "aria-label": toolbarLabel("download"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": "true" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "a", href: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, download: fileName, "aria-label": toolbarLabel("download"), ...actionStyle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": "true" }) }));
+    const showFallback = !supported || status === "error";
+    const isLoading = isBlobMode && supported && status === "loading";
+    const renderFallback = () => {
+        if (fallback !== undefined)
+            return fallback;
+        return ((0, jsx_runtime_1.jsxs)(react_2.Flex, { direction: "column", align: "flex-start", gap: 3, p: 4, "data-testid": "pdf-fallback", children: [(0, jsx_runtime_1.jsx)(react_2.Text, { role: "status", fontSize: "sm", color: theme.colors.textMuted, children: supported ? text.failed : text.unsupported }), !showToolbar && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16, "aria-hidden": "true" }), label: text.open, onClick: isBlobMode ? openBlob : () => window.open(pdfUrl, "_blank", "noopener"), "data-testid": "pdf-open" }), (0, jsx_runtime_1.jsx)(Button_1.default, { variant: "outline", colorScheme: "gray", leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16, "aria-hidden": "true" }), label: text.download, onClick: isBlobMode ? downloadBlob : directDownload(pdfUrl, fileName), "data-testid": "pdf-download" })] }))] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], "data-testid": testId, children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.background[50], children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText, "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.open, placement: "top", children: openAction }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: text.download, placement: "top", children: downloadAction })] })] })), showFallback ? (renderFallback()) : isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Box, { "aria-busy": "true", "data-testid": "pdf-loading", children: (0, jsx_runtime_1.jsx)(Skeletons_1.default, { type: "skeleton", height: height, width: "100%", borderRadius: "0" }) })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "embed", src: objectUrl !== null && objectUrl !== void 0 ? objectUrl : pdfUrl, type: "application/pdf", title: fileName, onLoad: isBlobMode ? undefined : () => { var _a; return (_a = onLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(onLoadRef); }, width: "100%", height: height, display: "block" }))] }));
+};
+const directDownload = (url, fileName) => () => {
+    if (!url)
+        return;
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = fileName;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+};
+exports.default = PdfViewer;

package/dist/Components/PersonChip/PersonChip.d.ts

@@ -0,0 +1,3 @@
+import type { PersonChipProps } from "./PersonChipProps";
+declare const PersonChip: ({ name, imageUrl, secondary, size, orientation, status, onClick, onRemove, removeLabel, isTruncated, maxW, "data-testid": testId, }: PersonChipProps) => import("react/jsx-runtime").JSX.Element;
+export default PersonChip;

package/dist/Components/PersonChip/PersonChip.js

@@ -0,0 +1,47 @@
+"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("@chakra-ui/react");
+const lucide_react_1 = require("lucide-react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const motion_1 = require("../../Theme/chakra/motion");
+const motion_2 = require("../../Theme/tokens/primitives/motion");
+const Avatar_1 = __importDefault(require("../Avatar/Avatar"));
+const NAME_SIZE = {
+    sm: "xs-plus", md: "sm", lg: "md", xl: "lg",
+};
+const SECONDARY_SIZE = {
+    sm: "xs", md: "xs", lg: "xs-plus", xl: "sm",
+};
+const REMOVE_ICON_SIZE = {
+    sm: 12, md: 14, lg: 14, xl: 16,
+};
+// The remove button is a sibling of the clickable region, never nested in it — a <button> can't contain another.
+const PersonChip = ({ name, imageUrl, secondary, size = "md", orientation = "horizontal", status, onClick, onRemove, removeLabel, isTruncated = true, maxW, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    const isInteractive = Boolean(onClick);
+    const isVertical = orientation === "vertical";
+    const removeButton = onRemove ? ((0, jsx_runtime_1.jsx)(react_1.Box, { as: "button", type: "button", "aria-label": removeLabel !== null && removeLabel !== void 0 ? removeLabel : `Remove ${name}`, display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0, borderRadius: "full", p: 1, color: colors.textMuted, transition: (0, motion_2.transitionFor)(["opacity", "color"]), _hover: { opacity: 0.8, color: colors.header[900] }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_1.reducedMotionSx)() }, onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+        }, children: (0, jsx_runtime_1.jsx)(react_1.Icon, { as: lucide_react_1.X, boxSize: `${REMOVE_ICON_SIZE[size]}px` }) })) : null;
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Avatar_1.default, { name: name, src: imageUrl, size: size, status: status }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, maxW: maxW, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: NAME_SIZE[size], fontWeight: 600, color: colors.header[900], isTruncated: isTruncated, children: name }), secondary ? ((0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: SECONDARY_SIZE[size], color: colors.textMuted, isTruncated: isTruncated, children: secondary })) : null] })] }));
+    const identityStyle = {
+        direction: isVertical ? "column" : "row",
+        align: "center",
+        gap: isVertical ? 1.5 : 2.5,
+        minW: 0,
+        flex: isVertical ? undefined : "1",
+        textAlign: isVertical ? "center" : "left",
+        borderRadius: "lg",
+    };
+    const identity = isInteractive ? ((0, jsx_runtime_1.jsx)(react_1.Flex, { as: "button", type: "button", onClick: onClick, ...identityStyle, cursor: "pointer", transition: (0, motion_2.transitionFor)(["background-color"]), _hover: { bg: colors.backgroundColor.secondary }, sx: { ...(0, focusRing_styles_1.focusVisibleStyles)(colors), ...(0, motion_1.reducedMotionSx)() }, "data-testid": onRemove ? undefined : testId, children: content })) : ((0, jsx_runtime_1.jsx)(react_1.Flex, { ...identityStyle, "data-testid": onRemove ? undefined : testId, children: content }));
+    if (!removeButton)
+        return identity;
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: isVertical ? "column" : "row", align: "center", gap: isVertical ? 1 : 0, minW: 0, "data-testid": testId, children: [identity, removeButton] }));
+};
+exports.default = PersonChip;

package/dist/Components/PersonChip/PersonChipProps.d.ts

@@ -0,0 +1,33 @@
+import type { ReactNode } from "react";
+import type { AvatarStatus } from "../Avatar/AvatarProps";
+/** Chip size; also sets the inner Avatar's size (sm→sm, md→md, lg→lg, xl→xl). */
+export type PersonChipSize = "sm" | "md" | "lg" | "xl";
+/** "horizontal" (default): avatar left, text right. "vertical": avatar above, text centered below. */
+export type PersonChipOrientation = "horizontal" | "vertical";
+/** Avatar + name (+ optional secondary line, presence dot, remove action) — the library's one way to show a person. */
+export interface PersonChipProps {
+    /** Used for initials, alt text and the deterministic avatar fill. */
+    name: string;
+    /** Avatar image URL; falls back to initials. */
+    imageUrl?: string;
+    /** Role, email, or any other line under the name. */
+    secondary?: ReactNode;
+    /** Default "md". */
+    size?: PersonChipSize;
+    /** Default "horizontal". */
+    orientation?: PersonChipOrientation;
+    /** Presence dot on the avatar; omitted entirely when unset. */
+    status?: AvatarStatus;
+    /** Renders the whole chip as a real, keyboard-reachable button. */
+    onClick?: () => void;
+    /** Renders a trailing remove button; its click never triggers `onClick`. */
+    onRemove?: () => void;
+    /** Accessible label for the remove button. Defaults to `Remove ${name}`. */
+    removeLabel?: string;
+    /** Clips name/secondary with an ellipsis instead of wrapping. Default true. */
+    isTruncated?: boolean;
+    /** Caps the chip's text column width; only meaningful with `isTruncated`. */
+    maxW?: string;
+    /** Test hook on the root. */
+    "data-testid"?: string;
+}

package/dist/Components/PersonChip/PersonChipProps.js

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

package/dist/Components/PinInput/PinInput.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
 import { ChakraPinInputProps } from "./PinInputProps";
-export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, }: ChakraPinInputProps): React.JSX.Element;
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. */
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, id, isRequired, isInformation, informationMessage, size, error, errorMessage, helperText, isDisabled, }: ChakraPinInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/PinInput/PinInput.js

@@ -4,17 +4,32 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = PinInputs;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("@chakra-ui/react");
-var useCustomTheme_1 = require("../../Theme/useCustomTheme");
-function PinInputs(_a) {
-    var otp = _a.otp, mask = _a.mask, defaultValue = _a.defaultValue, placeholder = _a.placeholder, manageFocus = _a.manageFocus, errorBorderColor = _a.errorBorderColor, focusBorderColor = _a.focusBorderColor, onChange = _a.onChange, onComplete = _a.onComplete, type = _a.type, _b = _a.color, color = _b === void 0 ? "primary" : _b, variant = _a.variant, _c = _a.pins, pins = _c === void 0 ? 3 : _c, label = _a.label;
-    var theme = (0, useCustomTheme_1.useCustomTheme)();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        label && (react_1.default.createElement(react_2.Text, { fontWeight: "bold", marginBottom: "8px" }, label)),
-        react_1.default.createElement(react_2.HStack, null,
-            react_1.default.createElement(react_2.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant }, Array.from({ length: pins }).map(function (_, index) { return (react_1.default.createElement(react_2.PinInputField, { key: index, backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[300], _focus: {
-                    borderColor: theme.colors.primary[500],
-                    boxShadow: "0 0 0 0.063rem ".concat(theme.colors.primary[500]),
-                } })); })))));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+const FormLabel_1 = require("../Common/FormLabel");
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const pinInputCellSize_1 = require("./pinInputCellSize");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
+const FieldMessage_1 = __importDefault(require("../Common/FieldMessage"));
+const useFieldIds_1 = require("../Common/useFieldIds");
+/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. */
+function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, size = controlSizes_1.DEFAULT_CONTROL_SIZE, error, errorMessage, helperText, isDisabled, }) {
+    var _a;
+    const theme = (0, useCustomTheme_1.useCustomTheme)();
+    const ids = (0, useFieldIds_1.useFieldIds)(id, { error, errorMessage, helperText });
+    const invalidCell = error
+        ? {
+            _invalid: {
+                borderColor: theme.colors.semanticText.error,
+                boxShadow: "none",
+                _focus: { borderColor: theme.colors.semanticText.error, ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) },
+            },
+        }
+        : {};
+    const fieldName = (_a = label !== null && label !== void 0 ? label : id) !== null && _a !== void 0 ? _a : "One-time code";
+    // Square cells at the same heights every other field uses — Chakra's own PinInput size
+    // scale doesn't line up with the library's, so cells are sized directly.
+    const cell = (0, pinInputCellSize_1.pinInputCellSize)(size);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { role: "group", "aria-label": fieldName, children: (0, jsx_runtime_1.jsx)(react_1.PinInput, { otp: otp, mask: mask, defaultValue: defaultValue, placeholder: placeholder, manageFocus: manageFocus, errorBorderColor: errorBorderColor, focusBorderColor: focusBorderColor, onChange: onChange, onComplete: onComplete, type: type, colorScheme: color, variant: variant, isInvalid: error, isDisabled: isDisabled, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, "aria-describedby": ids.describedBy, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: { borderColor: theme.colors.primary[500], ...(0, focusRing_styles_1.fieldFocusVisible)(theme.colors) }, ...invalidCell }, index))) }) }), (0, jsx_runtime_1.jsx)(FieldMessage_1.default, { error: error, errorMessage: errorMessage, helperText: helperText, helperId: ids.helperId, errorId: ids.errorId })] }));
 }