pixelize-design-library 2.4.1-beta.11 → 2.4.1-beta.13

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

@@ -0,0 +1,85 @@
+export const NumberInput = {
+    baseStyle: {
+        field: {
+            fontWeight: 500,
+            fontSize: "0.875rem",
+            letterSpacing: "0.044rem",
+            pt: "0.813rem",
+            pb: "0.813rem",
+            borderRadius: "0.5rem",
+            transition: "border-color 0.2s, box-shadow 0.2s",
+            _placeholder: {
+                fontStyle: "italic",
+            },
+        },
+    },
+    sizes: {
+        md: {
+            field: {
+                h: "2.75rem",
+                fontSize: "0.875rem",
+            },
+        },
+    },
+    variants: {
+        outline: (props) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+            const { theme } = props;
+            const errorColor = (_c = (_b = (_a = theme.colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]) !== null && _c !== void 0 ? _c : "red.500";
+            // [800], not [500]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
+            // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
+            // [800] clears all named surfaces with margin (3.44-3.90).
+            const borderColor = (_e = (_d = theme.colors.boxborder) === null || _d === void 0 ? void 0 : _d[800]) !== null && _e !== void 0 ? _e : "gray.400";
+            const shadowPrimary = (_g = (_f = theme.colors.boxShadow) === null || _f === void 0 ? void 0 : _f.primary) !== null && _g !== void 0 ? _g : "blue.100";
+            const shadowError = (_j = (_h = theme.colors.boxShadow) === null || _h === void 0 ? void 0 : _h.error) !== null && _j !== void 0 ? _j : "red.100";
+            const primary = (_l = (_k = theme.colors.primary) === null || _k === void 0 ? void 0 : _k[500]) !== null && _l !== void 0 ? _l : "blue.500";
+            return {
+                field: {
+                    bg: (_o = (_m = theme.colors.gray) === null || _m === void 0 ? void 0 : _m[50]) !== null && _o !== void 0 ? _o : "gray.50",
+                    border: "0.063rem solid",
+                    borderColor,
+                    _hover: {
+                        borderColor: primary,
+                        // boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        outline: "0"
+                    },
+                    _focus: {
+                        borderColor: primary,
+                        boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+                        outline: "0"
+                    },
+                    _invalid: {
+                        borderColor: errorColor,
+                        boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                        _hover: {
+                            borderColor: errorColor,
+                            // boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
+                        },
+                        _focus: {
+                            borderColor: errorColor,
+                            boxShadow: `0 0 0 0.125rem ${shadowError}`,
+                            outline: "0"
+                        },
+                    },
+                    _readOnly: {
+                        boxShadow: 'inherit',
+                    },
+                    _disabled: {
+                        bg: (_q = (_p = theme.colors.gray) === null || _p === void 0 ? void 0 : _p[100]) !== null && _q !== void 0 ? _q : "gray.100",
+                        opacity: 1,
+                        cursor: "not-allowed",
+                        _hover: {
+                            border: "0.063rem solid",
+                            borderColor,
+                        },
+                    },
+                },
+            };
+        },
+    },
+    defaultProps: {
+        variant: "outline",
+        size: "md",
+    },
+};

package/dist/esm/Components/NumberInput/NumberInputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/OrgSwitcher/OrgSwitcher.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, Flex, Image, Input, InputGroup, InputLeftElement, Popover, PopoverBody, PopoverContent, PopoverTrigger, Spinner, Text, useDisclosure, } from "@chakra-ui/react";
+import { Building2, Check, ChevronsUpDown, Search } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { onFilled } from "../../Theme/tokens/builders/accentText";
+import { resolveHoverTint } from "../../Theme/tokens/builders/outlineRung";
+import { avatarColor, orgInitial, } from "./OrgSwitcherProps";
+const sizeMap = {
+    sm: { h: "32px", avatar: "22px", font: "0.8rem", sub: "0.65rem", px: 2 },
+    md: { h: "40px", avatar: "28px", font: "0.9rem", sub: "0.7rem", px: 3 },
+    lg: { h: "48px", avatar: "34px", font: "1rem", sub: "0.78rem", px: 4 },
+};
+const Avatar = ({ org, boxSize, fontSize, }) => {
+    if (org.logoUrl) {
+        return (_jsx(Image, { src: org.logoUrl, alt: org.name, boxSize: boxSize, borderRadius: "8px", objectFit: "cover", flexShrink: 0 }));
+    }
+    // `AVATAR_COLORS` is a fixed 8-swatch palette hashed from the org name (not theme-derived, so
+    // it can't lean on a per-brand text rung). Two of the eight — amber `#F59E0B`, teal `#14B8A6` —
+    // measure 2.15:1 / 2.49:1 against hardcoded white, well under AA. `onFilled` is provably >=4.5
+    // against ANY fill, so it's the correct ink for an arbitrary, theme-independent swatch.
+    const fill = avatarColor(org.name);
+    return (_jsx(Flex, { align: "center", justify: "center", boxSize: boxSize, borderRadius: "8px", flexShrink: 0, bg: fill, color: onFilled(fill, "#ffffff", "#000000"), fontSize: fontSize, fontWeight: 700, children: orgInitial(org.name) }));
+};
+const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSearchable, searchThreshold = 6, triggerVariant = "ghost", size = "md", maxWidth = "200px", menuMinWidth = "280px", placeholder = "Select organization", ariaLabel = "Switch organization", showRole = true, }) => {
+    var _a, _b, _c;
+    const theme = useCustomTheme();
+    const s = sizeMap[size];
+    const { isOpen, onOpen, onClose } = useDisclosure();
+    const [query, setQuery] = useState("");
+    const searchRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const optionRefs = useRef([]);
+    const firstOptionRef = useRef(null);
+    const selected = useMemo(() => organizations.find((o) => o.id === value), [organizations, value]);
+    const showSearch = isSearchable !== null && isSearchable !== void 0 ? isSearchable : organizations.length >= searchThreshold;
+    const filtered = useMemo(() => {
+        if (!query.trim())
+            return organizations;
+        const q = query.toLowerCase();
+        return organizations.filter((o) => o.name.toLowerCase().includes(q));
+    }, [organizations, query]);
+    useEffect(() => setActiveIndex(0), [query, isOpen]);
+    const focusOption = useCallback((next) => {
+        var _a;
+        setActiveIndex(next);
+        (_a = optionRefs.current[next]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    // Roving tabindex: only the active row is a tab stop, arrow keys move focus between
+    // options — mirrors CompactSelect's established listbox keyboard pattern in this repo.
+    const handleListKeyDown = useCallback((e) => {
+        if (filtered.length === 0)
+            return;
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+            e.preventDefault();
+            const step = e.key === "ArrowDown" ? 1 : -1;
+            focusOption((activeIndex + step + filtered.length) % filtered.length);
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            focusOption(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            focusOption(filtered.length - 1);
+        }
+    }, [activeIndex, filtered.length, focusOption]);
+    // boxborder[800], not raw gray[200]: this styles a real `<button>` (Flex as="button" below),
+    // so its border is a control boundary — WCAG 1.4.11 needs >=3.0 against any named surface up
+    // to `muted` (lightest); gray[200] fails there in dark mode.
+    const triggerStyles = triggerVariant === "outline"
+        ? { border: "1px solid", borderColor: (_b = (_a = theme.colors.boxborder) === null || _a === void 0 ? void 0 : _a[800]) !== null && _b !== void 0 ? _b : theme.colors.gray[200], bg: theme.colors.background[50] }
+        : triggerVariant === "subtle"
+            ? { bg: theme.colors.gray[50] }
+            : { bg: "transparent" };
+    // `gray[100]` hover on a "transparent" trigger reads against whatever's actually behind it —
+    // this control lives in a navbar-like shell, so `backgroundColor.light` is that surface. For a
+    // near-neutral brand (zinc) the two measured near-1.0: an invisible hover, same bug shape as
+    // NavigationBar's menu items.
+    const triggerHoverBg = resolveHoverTint(theme.colors.gray[100], theme.colors.backgroundColor.light);
+    const handleSelect = (org) => {
+        onClose();
+        setQuery("");
+        if (org.id !== value)
+            onChange(org.id, org);
+    };
+    return (_jsxs(Popover, { isOpen: isOpen, onOpen: onOpen, onClose: () => {
+            onClose();
+            setQuery("");
+        }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [_jsx(PopoverTrigger, { children: _jsxs(Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "10px", cursor: isLoading ? "default" : "pointer", opacity: isLoading ? 0.6 : 1, pointerEvents: isLoading ? "none" : "auto", transition: "background 0.15s ease", _hover: { bg: triggerVariant === "ghost" ? triggerHoverBg : undefined }, ...triggerStyles, children: [selected ? (_jsx(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : (_jsx(Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "8px", bg: theme.colors.gray[100], color: theme.colors.gray[400], flexShrink: 0, children: _jsx(Building2, { size: 14 }) })), _jsx(Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_c = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _c !== void 0 ? _c : placeholder }), isLoading ? (_jsx(Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.primary[500], flexShrink: 0 })) : (_jsx(Box, { as: ChevronsUpDown, size: 16, color: theme.colors.gray[400], flexShrink: 0 }))] }) }), _jsx(PopoverContent, { minW: menuMinWidth, w: "auto", 
+                // Chakra's PopoverContent baseStyle defaults bg to var(--popper-bg), which is hardcoded
+                // to colors.white and only repointed under Chakra's own `_dark` — dead code here since
+                // this app toggles dark mode by swapping the palette, not Chakra's colorMode. Without an
+                // explicit bg the panel always rendered white regardless of the active theme.
+                bg: theme.colors.backgroundColor.light, borderRadius: "12px", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: _jsxs(PopoverBody, { p: 0, children: [showSearch && (_jsx(Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: _jsxs(InputGroup, { size: "sm", children: [_jsx(InputLeftElement, { pointerEvents: "none", children: _jsx(Search, { size: 15, color: theme.colors.gray[400] }) }), _jsx(Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                                            if (e.key === "ArrowDown" && filtered.length > 0) {
+                                                e.preventDefault();
+                                                focusOption(0);
+                                            }
+                                        }, borderRadius: "8px" })] }) })), _jsxs(Box, { role: "listbox", "aria-label": "Organizations", maxH: "320px", overflowY: "auto", py: 1, onKeyDown: handleListKeyDown, children: [filtered.map((org, idx) => {
+                                    const isActive = org.id === value;
+                                    // Active row's hover repeated its own resting `primary[50]` fill — a zero-delta
+                                    // hover, invisible by construction. `resolveHoverTint` walks a fill away from a
+                                    // backdrop until distinguishable, so handing it its own resting bg as the backdrop
+                                    // is enough to make hover read as a real state change on both active and inactive rows.
+                                    const rowHoverBg = isActive
+                                        ? resolveHoverTint(theme.colors.primary[50], theme.colors.primary[50])
+                                        : resolveHoverTint(theme.colors.gray[50], theme.colors.backgroundColor.light);
+                                    return (_jsxs(Flex, { as: "button", type: "button", role: "option", "aria-selected": isActive, ref: (el) => {
+                                            optionRefs.current[idx] = el;
+                                            if (idx === 0)
+                                                firstOptionRef.current = el;
+                                        }, tabIndex: idx === activeIndex ? 0 : -1, align: "center", gap: "10px", w: "100%", textAlign: "left", border: "none", fontFamily: "inherit", px: 3, py: 2, cursor: "pointer", bg: isActive ? theme.colors.primary[50] : "transparent", transition: "background 0.12s ease", _hover: { bg: rowHoverBg }, onClick: () => handleSelect(org), children: [_jsx(Avatar, { org: org, boxSize: s.avatar, fontSize: s.sub }), _jsxs(Box, { flex: "1", minW: 0, children: [_jsx(Text, { fontSize: s.font, fontWeight: isActive ? 600 : 500, color: theme.colors.text[900], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.name }), showRole && org.role && (_jsx(Text, { fontSize: s.sub, color: theme.colors.text[500], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: org.role }))] }), isActive && (_jsx(Box, { as: Check, size: 16, color: theme.colors.primary[500], flexShrink: 0 }))] }, org.id));
+                                }), filtered.length === 0 && (_jsx(Text, { fontSize: "sm", color: theme.colors.gray[500], textAlign: "center", py: 6, children: "No organizations found" }))] })] }) })] }));
+};
+export default OrgSwitcher;

package/dist/esm/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -0,0 +1,34 @@
+export const AVATAR_COLORS = [
+    "#6366F1",
+    "#0EA5E9",
+    "#10B981",
+    "#F59E0B",
+    "#EF4444",
+    "#EC4899",
+    "#8B5CF6",
+    "#14B8A6",
+];
+/** Deterministically pick an avatar color from an org name. */
+export const avatarColor = (seed) => {
+    let hash = 0;
+    for (let i = 0; i < seed.length; i += 1) {
+        hash = seed.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
+};
+/**
+ * Fallback-avatar initials, up to 2 characters. A single letter reads well for one
+ * org but collides constantly across a real list — two orgs both starting with
+ * "P" render the identical circle, distinguishable only by the hashed color.
+ * A multi-word name takes one letter each word ("pixelize default" -> "PD"); a
+ * single word takes its own first two letters ("Default1" -> "DE") so a
+ * one-word org still gets a distinct-looking mark instead of falling back to one.
+ */
+export const orgInitial = (name) => {
+    const words = (name !== null && name !== void 0 ? name : "").trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return "?";
+    if (words.length === 1)
+        return words[0].slice(0, 2).toUpperCase();
+    return (words[0][0] + words[1][0]).toUpperCase();
+};

package/dist/esm/Components/OrganizationDetails/CreateOrgModal.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, HStack, VStack, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import Button from "../Button/Button";
+import TextInput from "../Input/TextInput";
+const EMPTY = {
+    company_name: "",
+    company_address: "",
+    phone: "",
+};
+const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
+    var _a, _b, _c;
+    const { colors } = useCustomTheme();
+    const [values, setValues] = useState(EMPTY);
+    const [errors, setErrors] = useState({});
+    useEffect(() => {
+        if (isOpen) {
+            setValues(EMPTY);
+            setErrors({});
+        }
+    }, [isOpen]);
+    const setField = (key, value) => {
+        setValues((prev) => ({ ...prev, [key]: value }));
+        if (errors[key])
+            setErrors((prev) => ({ ...prev, [key]: undefined }));
+    };
+    const validate = () => {
+        var _a, _b;
+        const next = {};
+        if (!values.company_name.trim())
+            next.company_name = labels.requiredField;
+        if (!values.company_address.trim())
+            next.company_address = labels.requiredField;
+        const digits = (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.replace(/\D/g, "");
+        if (!((_b = values === null || values === void 0 ? void 0 : values.phone) === null || _b === void 0 ? void 0 : _b.trim())) {
+            next.phone = labels.requiredField;
+        }
+        else if (digits && (digits === null || digits === void 0 ? void 0 : digits.length) < 8) {
+            next.phone = labels.invalidPhone;
+        }
+        setErrors(next);
+        return Object.keys(next).length === 0;
+    };
+    const handleSubmit = () => {
+        var _a;
+        if (!validate())
+            return;
+        onSubmit({
+            company_name: values.company_name.trim(),
+            company_address: values.company_address.trim(),
+            phone: (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.trim(),
+        });
+    };
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [_jsx(ModalHeader, { borderBottom: "1px solid", borderColor: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsxs(VStack, { spacing: 4, align: "stretch", children: [_jsx(TextInput, { label: labels.companyName, value: values.company_name, onChange: (e) => setField("company_name", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Name", error: !!errors.company_name, errorMessage: errors.company_name }), _jsx(TextInput, { label: labels.companyAddress, value: values.company_address, onChange: (e) => setField("company_address", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Company Address", error: !!errors.company_address, errorMessage: errors.company_address }), _jsx(TextInput, { label: labels.phone, value: values.phone, onChange: (e) => setField("phone", e.target.value), isRequired: true, width: "100%", placeholder: "Enter Phone Number", error: !!errors.phone, errorMessage: errors.phone })] }), _jsxs(HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), _jsx(Button, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+};
+export default CreateOrgModal;

package/dist/esm/Components/OrganizationDetails/DeleteOrgModal.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, Flex, HStack, Text, } from "@chakra-ui/react";
+import { AlertTriangle, Trash2 } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import Button from "../Button/Button";
+const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const { colors } = useCustomTheme();
+    return (_jsxs(Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [_jsx(ModalOverlay, { backdropFilter: "blur(4px)" }), _jsxs(ModalContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], borderRadius: "2xl", overflow: "hidden", children: [_jsxs(ModalHeader, { borderBottom: "1px solid", borderColor: (_c = (_b = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _b === void 0 ? void 0 : _b[200]) !== null && _c !== void 0 ? _c : (_d = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _d === void 0 ? void 0 : _d[200], display: "flex", alignItems: "center", gap: 3, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.red) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : "#FEF2F2", color: (_h = (_g = colors === null || colors === void 0 ? void 0 : colors.red) === null || _g === void 0 ? void 0 : _g[500]) !== null && _h !== void 0 ? _h : "#EF4444", children: _jsx(AlertTriangle, { size: 18 }) }), _jsx(Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), _jsx(ModalCloseButton, {}), _jsxs(ModalBody, { py: 6, children: [_jsx(Text, { color: (_j = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _j === void 0 ? void 0 : _j[600], fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), _jsxs(HStack, { justifyContent: "flex-end", spacing: 3, children: [_jsx(Button, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), _jsx(Button, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: _jsx(Trash2, { size: 15 }) })] })] })] })] }));
+};
+export default DeleteOrgModal;

package/dist/esm/Components/OrganizationDetails/OrganizationDetails.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Avatar, Badge, Box, Flex, Heading, HStack, IconButton, Input, Skeleton, SkeletonText, Spinner, Text, Tooltip, VStack, } from "@chakra-ui/react";
+import { ArrowLeft, Building2, Check, CheckCircle2, Crown, Globe, Mail, Pencil, Plus, Trash2, Users, X, } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import Button from "../Button/Button";
+import EmptyState from "../EmptyState/EmptyState";
+import Tag from "../Tag/Tag";
+import CreateOrgModal from "./CreateOrgModal";
+import DeleteOrgModal from "./DeleteOrgModal";
+const DEFAULT_LABELS = {
+    greeting: "Hello, User!",
+    manageSubtitle: "Manage your organizations",
+    organizationDetails: "Organization Details",
+    createNewOrganization: "Create New Organization",
+    createOrganization: "Create Organization",
+    activeOrganizations: "Active Organizations",
+    invitedOrganizations: "Invited Organizations",
+    setAsDefault: "Set as Default",
+    settingDefault: "Setting...",
+    default: "Default",
+    owner: "Owner",
+    pending: "Pending",
+    accept: "Accept",
+    accepting: "Accepting...",
+    decline: "Decline",
+    deleteOrganization: "Delete Organization",
+    protectedOrganization: "Protected organization",
+    delete: "Delete",
+    editOrganization: "Edit organization name",
+    save: "Save",
+    saving: "Saving...",
+    emptyNameError: "Organization name cannot be empty",
+    noOrganizationsTitle: "No organizations found",
+    noOrganizationsDescription: "Get started by creating your first organization or wait for an invitation",
+    companyName: "Company Name",
+    companyAddress: "Company Address",
+    phone: "Phone",
+    cancel: "Cancel",
+    submit: "Submit",
+    requiredField: "This field is required",
+    invalidPhone: "Phone number must be at least 8 digits",
+    confirmDeletion: "Confirm Deletion",
+    deleteConfirmText: "Are you sure you want to delete this Organization?",
+    copyright: "Pixelize Corp. All rights reserved.",
+    termsOfService: "Terms of Service",
+};
+const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoading = false, switchingOrgIds = [], respondingOrgIds = [], editingOrgIds = [], isCreating = false, userName, userAvatarUrl, onSetDefault, onAcceptInvite, onDeclineInvite, onDeleteOrganization, onDeleteRequest, onCreateOrganization, onEditOrganization, onBack, footerSlot, labels: labelOverrides, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    const { colors } = useCustomTheme();
+    const labels = useMemo(() => ({ ...DEFAULT_LABELS, ...labelOverrides }), [labelOverrides]);
+    const [isCreateOpen, setCreateOpen] = useState(false);
+    const [deleteOrgId, setDeleteOrgId] = useState(null);
+    // --- Inline "edit organization name" state ---
+    const [editingOrgId, setEditingOrgId] = useState(null);
+    const [editValue, setEditValue] = useState("");
+    const [editError, setEditError] = useState("");
+    const border = (_d = (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.boxborder) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _c === void 0 ? void 0 : _c[200]) !== null && _d !== void 0 ? _d : "#E2E8F0";
+    const surface = (_g = (_f = (_e = colors === null || colors === void 0 ? void 0 : colors.background) === null || _e === void 0 ? void 0 : _e[50]) !== null && _f !== void 0 ? _f : colors === null || colors === void 0 ? void 0 : colors.white) !== null && _g !== void 0 ? _g : "#FFFFFF";
+    const muted = (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _h === void 0 ? void 0 : _h[500]) !== null && _j !== void 0 ? _j : "#64748B";
+    const subtle = (_l = (_k = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : "#475569";
+    const heading = (_o = (_m = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _m === void 0 ? void 0 : _m[800]) !== null && _o !== void 0 ? _o : "#1E293B";
+    const pageBg = (_q = (_p = colors === null || colors === void 0 ? void 0 : colors.gray) === null || _p === void 0 ? void 0 : _p[50]) !== null && _q !== void 0 ? _q : "#F8FAFC";
+    const primary50 = (_s = (_r = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : "#EEF2FF";
+    const primary100 = (_u = (_t = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _t === void 0 ? void 0 : _t[100]) !== null && _u !== void 0 ? _u : "#E0E7FF";
+    const primary500 = (_w = (_v = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _v === void 0 ? void 0 : _v[500]) !== null && _w !== void 0 ? _w : "#6366F1";
+    const primary600 = (_y = (_x = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _x === void 0 ? void 0 : _x[600]) !== null && _y !== void 0 ? _y : "#4F46E5";
+    const cardSx = {
+        backgroundColor: surface,
+        borderRadius: "xl",
+        border: "1px solid",
+        borderColor: border,
+        boxShadow: "0 1px 2px rgba(16,24,40,0.05)",
+    };
+    const sectionBadge = (count, scheme) => (_jsx(Badge, { colorScheme: scheme, variant: "subtle", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.65rem", children: count }));
+    const startEditing = (item) => {
+        setEditingOrgId(item.orgId);
+        setEditValue(item.company_name);
+        setEditError("");
+    };
+    const cancelEditing = () => {
+        setEditingOrgId(null);
+        setEditValue("");
+        setEditError("");
+    };
+    const submitEditing = async (item) => {
+        const trimmed = editValue.trim();
+        if (!trimmed) {
+            setEditError(labels.emptyNameError);
+            return;
+        }
+        if (trimmed === item.company_name) {
+            cancelEditing();
+            return;
+        }
+        await (onEditOrganization === null || onEditOrganization === void 0 ? void 0 : onEditOrganization(item.orgId, trimmed));
+        setEditingOrgId(null);
+        setEditValue("");
+        setEditError("");
+    };
+    const renderActiveCard = (item) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        const isSwitching = switchingOrgIds.includes(item.orgId);
+        // Role name is a display value, not a permission — apps pass the real rule.
+        const canEdit = (_a = item.canRename) !== null && _a !== void 0 ? _a : item.roleName === "Super Admin";
+        const canProtect = !((_b = item.canDelete) !== null && _b !== void 0 ? _b : item.roleName === "Super Admin");
+        const isProtected = item.defaultOrg === 1 || canProtect;
+        const isEditingThis = canEdit && editingOrgId === item.orgId;
+        const isSavingThis = editingOrgIds.includes(item.orgId);
+        const roleLabel = (_c = item.roleName) === null || _c === void 0 ? void 0 : _c.trim();
+        const deleteButton = (_jsx(IconButton, { "aria-label": labels.deleteOrganization, icon: _jsx(Trash2, { size: 12 }), size: "xs", variant: "ghost", borderRadius: "full", color: muted, isDisabled: isProtected, _hover: {
+                bg: (_e = (_d = colors === null || colors === void 0 ? void 0 : colors.red) === null || _d === void 0 ? void 0 : _d[50]) !== null && _e !== void 0 ? _e : "#FEF2F2",
+                color: (_g = (_f = colors === null || colors === void 0 ? void 0 : colors.red) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : "#DC2626",
+            }, onClick: () => onDeleteRequest
+                ? onDeleteRequest(item.orgId)
+                : setDeleteOrgId(item.orgId) }));
+        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+                borderColor: (_j = (_h = colors === null || colors === void 0 ? void 0 : colors.primary) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : "#A5B4FC",
+                boxShadow: "0 8px 24px rgba(16,24,40,0.10)",
+                transform: "translateY(-3px)",
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: primary600, children: _jsx(Building2, { size: 18 }) }), _jsxs(HStack, { spacing: 1, children: [item.default === 1 ? (_jsxs(Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [_jsx(CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? (_jsxs(Flex, { align: "center", gap: 2, color: primary500, children: [_jsx(Spinner, { size: "sm" }), _jsx(Text, { fontSize: "xs", children: labels.settingDefault })] })) : (_jsxs(Flex, { align: "center", gap: 1, fontSize: "xs", color: primary600, fontWeight: 600, cursor: "pointer", _hover: { color: primary500, gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [_jsx(CheckCircle2, { size: 12 }), _jsx(Text, { children: labels.setAsDefault })] })), canEdit && (_jsx(Tooltip, { label: labels.editOrganization, hasArrow: true, children: _jsx(IconButton, { "aria-label": labels.editOrganization, icon: _jsx(Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: primary600, bg: primary50 }, onClick: () => startEditing(item) }) })), _jsx(Tooltip, { label: isProtected
+                                        ? ((_k = item.deleteDisabledReason) !== null && _k !== void 0 ? _k : labels.protectedOrganization)
+                                        : labels.deleteOrganization, hasArrow: true, children: isProtected ? (_jsx(Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? (_jsxs(Box, { children: [_jsxs(HStack, { spacing: 1, children: [_jsx(Input, { value: editValue, onChange: (e) => {
+                                        setEditValue(e.target.value);
+                                        if (editError)
+                                            setEditError("");
+                                    }, size: "sm", fontSize: "sm", fontWeight: 700, autoFocus: true, isDisabled: isSavingThis, onKeyDown: (e) => {
+                                        if (e.key === "Enter")
+                                            submitEditing(item);
+                                        if (e.key === "Escape")
+                                            cancelEditing();
+                                    } }), _jsx(IconButton, { "aria-label": labels.save, icon: isSavingThis ? _jsx(Spinner, { size: "xs" }) : _jsx(Check, { size: 14 }), size: "xs", colorScheme: "green", isDisabled: isSavingThis, onClick: () => submitEditing(item), variant: "ghost" }), _jsx(IconButton, { "aria-label": labels.cancel, icon: _jsx(X, { size: 14 }), size: "xs", variant: "ghost", isDisabled: isSavingThis, onClick: cancelEditing })] }), editError && (_jsx(Text, { fontSize: "0.7rem", color: (_m = (_l = colors === null || colors === void 0 ? void 0 : colors.red) === null || _l === void 0 ? void 0 : _l[600]) !== null && _m !== void 0 ? _m : "#DC2626", mt: 1, children: editError }))] })) : (_jsxs(Box, { children: [_jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, children: item.company_name }), (item.isOwner || roleLabel) && (_jsxs(HStack, { spacing: 1, mt: 1, children: [item.isOwner && (_jsx(Tag, { label: labels.owner, icon: Crown, colorScheme: "primary", variant: "subtle", size: "xs" })), roleLabel && (_jsx(Tag, { label: roleLabel, colorScheme: "gray", variant: "subtle", size: "xs" }))] }))] }))] }, item.orgId));
+    };
+    const renderInvitedCard = (item) => {
+        var _a, _b, _c, _d;
+        const isResponding = respondingOrgIds.includes(item.orgId);
+        return (_jsxs(Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+                boxShadow: "0 8px 24px rgba(16,24,40,0.10)",
+                transform: "translateY(-3px)",
+            }, children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [_jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: (_b = (_a = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _a === void 0 ? void 0 : _a[100]) !== null && _b !== void 0 ? _b : "#FEF9C3", color: (_d = (_c = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _c === void 0 ? void 0 : _c[600]) !== null && _d !== void 0 ? _d : "#CA8A04", children: _jsx(Building2, { size: 18 }) }), _jsx(Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), _jsx(Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && (_jsxs(Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [_jsx(Globe, { size: 13 }), _jsx(Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), _jsxs(HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [_jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.accept, colorScheme: "green", size: "sm", width: "100%", isLoading: isResponding, loadingText: labels.accepting, onClick: () => onAcceptInvite === null || onAcceptInvite === void 0 ? void 0 : onAcceptInvite(item.orgId) }) }), _jsx(Box, { flex: 1, children: _jsx(Button, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));
+    };
+    const gridSx = {
+        display: "grid",
+        gridTemplateColumns: {
+            base: "1fr",
+            md: "repeat(2, 1fr)",
+            lg: "repeat(3, 1fr)",
+        },
+        gap: 3,
+        width: "100%",
+    };
+    const hasOrganizations = activeOrganizations.length > 0 || invitedOrganizations.length > 0;
+    return (_jsxs(Box, { backgroundColor: pageBg, minHeight: "100%", p: { base: 2, md: 3 }, children: [_jsxs(Flex, { ...cardSx, px: 3, py: 2.5, mb: 3, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 3, bgGradient: `linear(135deg, ${primary50} 0%, ${primary100} 100%)`, children: [_jsxs(Flex, { alignItems: "center", gap: 3, children: [onBack && (_jsx(IconButton, { "aria-label": "Go back", icon: _jsx(ArrowLeft, { size: 18 }), variant: "ghost", size: "sm", color: subtle, onClick: onBack })), _jsx(Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: primary500, color: "white", children: _jsx(Building2, { size: 18 }) }), _jsxs(Box, { children: [_jsxs(HStack, { spacing: 2, children: [_jsx(Heading, { size: "sm", color: heading, fontWeight: 700, children: userName
+                                                    ? `${labels.greeting.replace(/User!?/, "")}${userName}!`.trim()
+                                                    : labels.greeting }), _jsx(Avatar, { size: "xs", name: userName, src: userAvatarUrl })] }), _jsx(Text, { fontSize: "xs", color: subtle, mt: 0.5, children: labels.manageSubtitle })] })] }), _jsx(Button, { label: labels.createNewOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" })] }), isLoading ? (_jsx(Box, { ...gridSx, children: Array.from({ length: 6 }).map((_, idx) => (_jsxs(Box, { ...cardSx, p: 3, children: [_jsx(Skeleton, { boxSize: "36px", borderRadius: "lg", mb: 2 }), _jsx(SkeletonText, { noOfLines: 2, spacing: 2 })] }, idx))) })) : !hasOrganizations ? (_jsx(EmptyState, { icon: Building2, title: labels.noOrganizationsTitle, description: labels.noOrganizationsDescription, minH: "40vh", action: _jsx(Button, { label: labels.createOrganization, onClick: () => setCreateOpen(true), leftIcon: _jsx(Plus, { size: 16 }), colorScheme: "primary", size: "sm" }) })) : (_jsxs(VStack, { align: "stretch", spacing: 4, children: [activeOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Users, { size: 16, color: primary500 }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.activeOrganizations }), sectionBadge(activeOrganizations.length, "blue")] }), _jsx(Box, { ...gridSx, children: activeOrganizations.map(renderActiveCard) })] })), invitedOrganizations.length > 0 && (_jsxs(Box, { children: [_jsxs(Flex, { align: "center", gap: 2, mb: 2, children: [_jsx(Mail, { size: 16, color: (_0 = (_z = colors === null || colors === void 0 ? void 0 : colors.yellow) === null || _z === void 0 ? void 0 : _z[500]) !== null && _0 !== void 0 ? _0 : "#EAB308" }), _jsx(Heading, { size: "sm", color: heading, fontWeight: 600, children: labels.invitedOrganizations }), sectionBadge(invitedOrganizations.length, "yellow")] }), _jsx(Box, { ...gridSx, children: invitedOrganizations.map(renderInvitedCard) })] }))] })), footerSlot, _jsx(CreateOrgModal, { isOpen: isCreateOpen, onClose: () => setCreateOpen(false), isLoading: isCreating, onSubmit: async (values) => {
+                    await (onCreateOrganization === null || onCreateOrganization === void 0 ? void 0 : onCreateOrganization(values));
+                    setCreateOpen(false);
+                }, labels: labels }), _jsx(DeleteOrgModal, { isOpen: deleteOrgId !== null, onClose: () => setDeleteOrgId(null), onConfirm: async () => {
+                    if (deleteOrgId !== null) {
+                        await (onDeleteOrganization === null || onDeleteOrganization === void 0 ? void 0 : onDeleteOrganization(deleteOrgId));
+                    }
+                    setDeleteOrgId(null);
+                }, labels: labels })] }));
+};
+export default OrganizationDetails;

package/dist/esm/Components/OrganizationDetails/OrganizationDetailsProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/PdfViewer/PdfViewer.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { Download, ExternalLink, FileText } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import ToolTip from "../ToolTip/ToolTip";
+const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showToolbar = true, borderRadius = "12px", }) => {
+    const theme = useCustomTheme();
+    return (_jsxs(Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && (_jsxs(Flex, { align: "center", justify: "space-between", px: 4, py: 2.5, borderBottom: "1px solid", borderColor: theme.colors.gray[100], bg: theme.colors.gray[50], children: [_jsxs(Flex, { align: "center", gap: 2, minW: 0, children: [_jsx(FileText, { size: 18, color: theme.colors.primary[500] }), _jsx(Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), _jsxs(Flex, { align: "center", gap: 1, children: [_jsx(ToolTip, { label: "Open in new tab", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "8px", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(ExternalLink, { size: 16 }) }) }), _jsx(ToolTip, { label: "Download", placement: "top", children: _jsx(Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "8px", color: theme.colors.gray[600], _hover: { bg: theme.colors.primary[50], color: theme.colors.primary[500] }, children: _jsx(Download, { size: 16 }) }) })] })] })), _jsx(Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+};
+export default PdfViewer;

package/dist/esm/Components/PinInput/PinInput.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { HStack, PinInput, PinInputField } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { TextLabel } from "../Common/FormLabel";
+export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, }) {
+    const theme = useCustomTheme();
+    return (_jsxs(_Fragment, { children: [label && (_jsx(TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), _jsx(HStack, { children: _jsx(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, children: Array.from({ length: pins }).map((_, index) => (_jsx(PinInputField, { backgroundColor: theme.colors.background[100], 
+                        // [800], not [300]/[700]: WCAG 1.4.11 needs >=3.0 for a control boundary, measured
+                        // against the parent surface — up to `muted` (lightest). [700] fails there (2.41-2.72);
+                        // [800] clears all named surfaces with margin (3.44-3.90).
+                        borderColor: theme.colors.boxborder[800], _focus: {
+                            borderColor: theme.colors.primary[500],
+                            boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
+                        } }, index))) }) })] }));
+}

package/dist/esm/Components/PinInput/PinInput.stories.js

@@ -0,0 +1,5 @@
+// import React from 'react';
+// import { StoryFn, Meta } from '@storybook/react';
+// import PinInput from './PinInput';
+// import { ChakraPinInputProps } from './PinInputProps';
+export {};

package/dist/esm/Components/PinInput/PinInputProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/PinInputs/PinInputs.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Box, HStack, Input, useTheme } from "@chakra-ui/react";
+import Label from "../Common/Label";
+import ErrorComponent from "../Common/ErrorComponent";
+const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
+    var _a, _b, _c, _d, _e;
+    const theme = useTheme();
+    const { colors } = theme;
+    const [values, setValues] = useState(Array(length).fill(""));
+    const inputsRef = useRef([]);
+    // [800], not [500]: WCAG 1.4.11 needs >=3.0 for a control boundary against any named surface
+    // up to `muted` (lightest); [500] fails there, [800] clears all with margin.
+    const borderColor = error
+        ? (_b = (_a = colors.semantic) === null || _a === void 0 ? void 0 : _a.error) === null || _b === void 0 ? void 0 : _b[500]
+        : (_c = colors.boxborder) === null || _c === void 0 ? void 0 : _c[800];
+    const focusRing = error ? (_d = colors.boxShadow) === null || _d === void 0 ? void 0 : _d.error : (_e = colors.boxShadow) === null || _e === void 0 ? void 0 : _e.primary;
+    const focusShadow = focusRing
+        ? `0 0 0 0.125rem ${focusRing}`
+        : undefined;
+    const handleChange = (index, value) => {
+        var _a;
+        if (!/^[0-9]?$/.test(value))
+            return;
+        const newValues = [...values];
+        newValues[index] = value;
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(""));
+        if (value && index < length - 1) {
+            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (newValues.every((v) => v !== "")) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValues.join(""));
+        }
+    };
+    const handleKeyDown = (e, index) => {
+        var _a;
+        if (e.key === "Backspace" && !values[index] && index > 0) {
+            (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    return (_jsxs(Box, { children: [label && _jsx(Label, { label: label }), _jsx(HStack, { spacing: 2, children: Array.from({ length }).map((_, index) => (_jsx(Input, { ref: (el) => {
+                        inputsRef.current[index] = el;
+                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: focusShadow
+                        ? { boxShadow: focusShadow, outline: "none" }
+                        : { outline: "none" } }, index))) }), error && _jsx(ErrorComponent, { error: error })] }));
+};
+export default PinInputs;

package/dist/esm/Components/PinInputs/PinInputsProps.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/Components/PlanBadge/PlanBadge.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { resolvePlanBadge } from "../../Utils/planBadge";
+import PlanPill from "../PlanPill/PlanPill";
+/**
+ * The top-bar plan badge: resolves an org's plan state into a `PlanPill`, or
+ * renders nothing when there is nothing to say (or nobody who can act on it).
+ *
+ * Use this when the app has the plan state to hand; drop to `PlanPill` directly
+ * for a badge whose copy is decided elsewhere.
+ */
+const PlanBadge = ({ input, maxLabelWidth, ariaLabel, onClick, }) => {
+    const { visible, label, mobileLabel, subtitle, tone } = resolvePlanBadge(input);
+    if (!visible)
+        return null;
+    return (_jsx(PlanPill, { label: label, mobileLabel: mobileLabel, status: subtitle, tone: tone, maxLabelWidth: maxLabelWidth, ariaLabel: ariaLabel, onClick: onClick }));
+};
+export default PlanBadge;

package/dist/esm/Components/PlanBadge/PlanBadgeProps.js

@@ -0,0 +1 @@
+export {};