pixelize-design-library 2.4.2-beta.43 → 2.4.2-beta.44

package/dist/Components/NumberInput/NumberInputProps.d.ts

@@ -1,20 +1,39 @@
 import { NumberInputProps as chakraNumbetInpurProps } from "@chakra-ui/react";
 /** Picks a safe subset of Chakra's NumberInput props and adds label/stepper-color props of its own. */
-export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel" | "onBlur" | "name"> & {
+export type NumberInputProps = Pick<chakraNumbetInpurProps, "defaultValue" | "min" | "max" | "precision" | "step" | "clampValueOnBlur" | "keepWithinRange" | "value" | "onChange" | "size" | "maxW" | "allowMouseWheel" | "onBlur" | "name" | "isDisabled" | "isReadOnly"> & {
     /** NumberIncrementStepperChildren/NumberDecrementStepperChildren accept only a string, not an icon — omit them to keep Chakra's default chevrons. */
     NumberIncrementStepperBg?: string;
+    /** Background of the increment button while pressed. */
     NumberIncrementStepperActive?: ActiveStyle;
+    /** Replaces the increment chevron with this text. */
     NumberIncrementStepperChildren?: string;
+    /** Background of the decrement button; defaults to Chakra's stepper style. */
     NumberDecrementStepperBg?: string;
+    /** Replaces the decrement chevron with this text. */
     NumberDecrementStepperChildren?: string;
+    /** Background of the decrement button while pressed. */
     NumberDecrementStepperActive?: ActiveStyle;
     label?: string;
+    /** Shows an info icon beside the label; needs both `label` and `informationMessage` to render. */
     isInformation?: boolean;
+    /** Tooltip text for the info icon; ignored unless `isInformation` is true. */
     informationMessage?: string;
+    /** Shows the label asterisk and sets native `required` via FormControl. */
     isRequired?: boolean;
     id?: string;
+    /** Marks the field invalid (error border + `aria-invalid`) and swaps the helper for `errorMessage`. */
+    error?: boolean;
+    /** Shown under the field while `error` is true; falls back to "Error". */
+    errorMessage?: string;
+    /** Shown under the field when there is no error; linked via `aria-describedby`. */
+    helperText?: string;
+    /** Hint text inside the empty field. */
+    placeholder?: string;
+    /** Width of the whole field; defaults to `"100%"`. */
     width?: string;
+    /** Applied to the whole field wrapper. */
     minW?: string;
+    /** Applied to both the field wrapper and the number input. */
     maxW?: string;
 };
 /** Background applied to a stepper button's `_active` (pressed) state. */

package/dist/Components/OrgSwitcher/OrgSwitcher.js

@@ -73,18 +73,13 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
             focusOption(filtered.length - 1);
         }
     }, [activeIndex, filtered.length, focusOption]);
-    // boxborder[500], 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.
+    // NOTE: boxborder[500] not gray[200] — this styles a real button, WCAG 1.4.11 needs >=3:1; gray[200] fails in dark.
     const triggerStyles = triggerVariant === "outline"
         ? { border: "1px solid", borderColor: theme.colors.boxborder[500], bg: theme.colors.background[50] }
         : triggerVariant === "subtle"
             ? { bg: theme.colors.background[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.
+    // NOTE: hover reads against backgroundColor.light (the navbar shell) — for zinc the two measured near-1.0, invisible.
     const triggerHoverBg = (0, outlineRung_1.resolveHoverTint)(theme.colors.gray[100], theme.colors.backgroundColor.light);
     const handleSelect = (org) => {
         onClose();
@@ -96,11 +91,8 @@ const OrgSwitcher = ({ organizations, value, onChange, isLoading = false, isSear
             onClose();
             setQuery("");
         }, placement: "bottom-start", initialFocusRef: showSearch ? searchRef : firstOptionRef, isLazy: true, children: [(0, jsx_runtime_1.jsx)(react_2.PopoverTrigger, { children: (0, jsx_runtime_1.jsxs)(react_2.Flex, { as: "button", type: "button", "aria-label": ariaLabel, align: "center", gap: s.px === 2 ? "8px" : "10px", h: s.h, px: s.px, borderRadius: "lg", 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 ? ((0, jsx_runtime_1.jsx)(Avatar, { org: selected, boxSize: s.avatar, fontSize: s.sub })) : ((0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: s.avatar, borderRadius: "lg", bg: theme.colors.gray[100], color: (0, accentText_1.accentTextOnCanvas)(theme.colors.gray, theme.colors.gray[100]), flexShrink: 0, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 14 }) })), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: s.font, fontWeight: 600, color: theme.colors.gray[700], maxW: maxWidth, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", textAlign: "left", children: (_a = selected === null || selected === void 0 ? void 0 : selected.name) !== null && _a !== void 0 ? _a : placeholder }), isLoading ? ((0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "xs", thickness: "1.5px", color: theme.colors.accentText, flexShrink: 0 })) : ((0, jsx_runtime_1.jsx)(react_2.Box, { as: lucide_react_1.ChevronsUpDown, size: 16, color: theme.colors.textMuted, flexShrink: 0 }))] }) }), (0, jsx_runtime_1.jsx)(react_2.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: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
+                // NOTE: Chakra's --popper-bg is hardcoded white via dead _dark — without an explicit bg the panel stayed white.
+                bg: theme.colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}`, _focus: { outline: "none", boxShadow: `0 10px 30px ${theme.colors.boxShadow.default}` }, children: (0, jsx_runtime_1.jsxs)(react_2.PopoverBody, { p: 0, children: [showSearch && ((0, jsx_runtime_1.jsx)(react_2.Box, { p: 2, borderBottom: "1px solid", borderColor: theme.colors.gray[100], children: (0, jsx_runtime_1.jsxs)(react_2.InputGroup, { size: "sm", children: [(0, jsx_runtime_1.jsx)(react_2.InputLeftElement, { pointerEvents: "none", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, color: theme.colors.textMuted }) }), (0, jsx_runtime_1.jsx)(react_2.Input, { ref: searchRef, placeholder: "Search organizations", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: (e) => {
                                             if (e.key === "ArrowDown" && filtered.length > 0) {
                                                 e.preventDefault();
                                                 focusOption(0);

package/dist/Components/OrgSwitcher/OrgSwitcherProps.d.ts

@@ -42,7 +42,7 @@ export interface OrgSwitcherProps {
 }
 export declare const AVATAR_COLORS: readonly string[];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
-export declare const AVATAR_INK = "#ffffff";
+export declare const AVATAR_INK: string;
 /** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 export declare const avatarColor: (seed: string, mode?: ChartMode) => string;
 /**

package/dist/Components/OrgSwitcher/OrgSwitcherProps.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.orgInitial = exports.avatarColor = exports.AVATAR_INK = exports.AVATAR_COLORS = void 0;
 const chartColorsFromTheme_1 = require("../../Theme/tokens/builders/chartColorsFromTheme");
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
 exports.AVATAR_COLORS = [
     ...chartColorsFromTheme_1.CATEGORICAL_SERIES.light,
     ...chartColorsFromTheme_1.CATEGORICAL_SERIES.dark,
 ];
 /** Chart hues are tuned to sit apart from each other, not to carry a label. */
-exports.AVATAR_INK = "#ffffff";
+exports.AVATAR_INK = neutrals_1.neutralTokens.white;
 /** Deterministic hash of the name, not random or brand-derived — same org name always gets the same fixed-palette color. */
 const avatarColor = (seed, mode = "light") => {
     let hash = 0;

package/dist/Components/OrganizationDetails/CreateOrgModal.js

@@ -56,6 +56,6 @@ const CreateOrgModal = ({ isOpen, onClose, isLoading, onSubmit, labels, }) => {
             phone: (_a = values === null || values === void 0 ? void 0 : values.phone) === null || _a === void 0 ? void 0 : _a.trim(),
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, autoFocus: false, children: [(0, jsx_runtime_1.jsx)(react_2.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_2.ModalContent, { bg: colors.surfaceRaised, borderRadius: "xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(react_2.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], fontSize: "1.05rem", fontWeight: 600, children: labels.createOrganization }), (0, jsx_runtime_1.jsx)(react_2.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_2.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsxs)(react_2.VStack, { spacing: 4, align: "stretch", children: [(0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 }), (0, jsx_runtime_1.jsx)(TextInput_1.default, { 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 })] }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { justifyContent: "center", spacing: 4, mt: 6, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.submit, onClick: handleSubmit, colorScheme: "primary", size: "sm", isLoading: isLoading })] })] })] })] }));
 };
 exports.default = CreateOrgModal;

package/dist/Components/OrganizationDetails/DeleteOrgModal.js

@@ -7,13 +7,11 @@ 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 accentText_1 = require("../../Theme/tokens/builders/accentText");
-const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
-const Button_1 = __importDefault(require("../Button/Button"));
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const ConfirmDialog_1 = __importDefault(require("../ConfirmDialog/ConfirmDialog"));
 const DeleteOrgModal = ({ isOpen, onClose, isLoading, onConfirm, labels, }) => {
     const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
-    return ((0, jsx_runtime_1.jsxs)(react_1.Modal, { isOpen: isOpen, onClose: onClose, isCentered: true, children: [(0, jsx_runtime_1.jsx)(react_1.ModalOverlay, { backdropFilter: "blur(4px)" }), (0, jsx_runtime_1.jsxs)(react_1.ModalContent, { bg: colors.background[50], borderRadius: "2xl", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.ModalHeader, { borderBottom: "1px solid", borderColor: colors.boxborder[200], display: "flex", alignItems: "center", gap: 3, children: [(0, jsx_runtime_1.jsx)(react_1.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "full", bg: errorTone.bg, color: errorTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.AlertTriangle, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "1.05rem", fontWeight: 600, children: labels.confirmDeletion })] }), (0, jsx_runtime_1.jsx)(react_1.ModalCloseButton, {}), (0, jsx_runtime_1.jsxs)(react_1.ModalBody, { py: 6, children: [(0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteConfirmText }), (0, jsx_runtime_1.jsxs)(react_1.HStack, { justifyContent: "flex-end", spacing: 3, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.cancel, onClick: onClose, variant: "outline", colorScheme: "gray", size: "sm" }), (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.delete, onClick: onConfirm, colorScheme: "red", size: "sm", isLoading: isLoading, leftIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }) })] })] })] })] }));
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    return ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { isOpen: isOpen, onClose: onClose, onConfirm: onConfirm, title: labels.confirmDeletion, iconBg: errorTone.bg, iconColor: errorTone.fg, cancelLabel: labels.cancel, confirmLabel: labels.delete, confirmIcon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15 }), isConfirmLoading: isLoading, disableCancelWhilePending: false, focusCancelOnOpen: false, children: (0, jsx_runtime_1.jsx)(react_1.Text, { color: colors.textMuted, fontSize: "sm", mb: 5, children: labels.deleteConfirmText }) }));
 };
 exports.default = DeleteOrgModal;

package/dist/Components/OrganizationDetails/OrganizationDetails.js

@@ -10,7 +10,9 @@ const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const accentText_1 = require("../../Theme/tokens/builders/accentText");
 const filledSurface_1 = require("../../Theme/tokens/builders/filledSurface");
-const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
+const tone_1 = require("../../Theme/tokens/builders/tone");
+const motion_1 = require("../../Theme/tokens/primitives/motion");
+const motion_2 = require("../../Theme/chakra/motion");
 const Button_1 = __importDefault(require("../Button/Button"));
 const EmptyState_1 = __importDefault(require("../EmptyState/EmptyState"));
 const Tag_1 = __importDefault(require("../Tag/Tag"));
@@ -63,9 +65,8 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     const [editingOrgId, setEditingOrgId] = (0, react_1.useState)(null);
     const [editValue, setEditValue] = (0, react_1.useState)("");
     const [editError, setEditError] = (0, react_1.useState)("");
-    const mode = (0, accentText_1.isDarkCanvas)(colors.backgroundColor.main) ? "dark" : "light";
-    const errorTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.error, mode);
-    const warningTone = (0, statusTone_1.resolveStatusTone)(colors.semantic.warning, mode);
+    const errorTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.error);
+    const warningTone = (0, tone_1.resolveSoftTone)(colors, colors.semantic.warning);
     const border = colors.boxborder[200];
     const surface = colors.background[50];
     const muted = colors.textMuted;
@@ -125,11 +126,11 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
             }, onClick: () => onDeleteRequest
                 ? onDeleteRequest(item.orgId)
                 : setDeleteOrgId(item.orgId) }));
-        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: (0, motion_1.transitionFor)(["border-color", "box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)(), _hover: {
                 borderColor: colors.primary[300],
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
-            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: "all 0.2s ease", onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
+            }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "center", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: primary50, color: onPrimary50, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [item.default === 1 ? ((0, jsx_runtime_1.jsxs)(react_2.Badge, { colorScheme: "green", borderRadius: "full", px: 2, py: 0.5, display: "flex", alignItems: "center", gap: 1, fontSize: "0.7rem", fontWeight: 600, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), labels.default] })) : isSwitching ? ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: colors.accentText, children: [(0, jsx_runtime_1.jsx)(react_2.Spinner, { size: "sm" }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "xs", children: labels.settingDefault })] })) : ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 1, fontSize: "xs", color: colors.accentText, fontWeight: 600, cursor: "pointer", _hover: { color: colors.primary[700], gap: 2 }, transition: (0, motion_1.transitionFor)(["color", "gap"]), sx: (0, motion_2.reducedMotionSx)(), onClick: () => onSetDefault === null || onSetDefault === void 0 ? void 0 : onSetDefault(item.orgId), children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CheckCircle2, { size: 12 }), (0, jsx_runtime_1.jsx)(react_2.Text, { children: labels.setAsDefault })] })), canEdit && ((0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: labels.editOrganization, hasArrow: true, children: (0, jsx_runtime_1.jsx)(react_2.IconButton, { "aria-label": labels.editOrganization, icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 12 }), size: "xs", variant: "ghost", color: muted, borderRadius: "full", _hover: { color: onPrimary50, bg: primary50 }, onClick: () => startEditing(item) }) })), (0, jsx_runtime_1.jsx)(react_2.Tooltip, { label: isProtected
                                         ? ((_d = item.deleteDisabledReason) !== null && _d !== void 0 ? _d : labels.protectedOrganization)
                                         : labels.deleteOrganization, hasArrow: true, children: isProtected ? ((0, jsx_runtime_1.jsx)(react_2.Box, { as: "span", display: "inline-flex", children: deleteButton })) : (deleteButton) })] })] }), isEditingThis ? ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [(0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 1, children: [(0, jsx_runtime_1.jsx)(react_2.Input, { value: editValue, onChange: (e) => {
                                         setEditValue(e.target.value);
@@ -144,7 +145,7 @@ const OrganizationDetails = ({ activeOrganizations, invitedOrganizations, isLoad
     };
     const renderInvitedCard = (item) => {
         const isResponding = respondingOrgIds.includes(item.orgId);
-        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: "all 0.2s ease", _hover: {
+        return ((0, jsx_runtime_1.jsxs)(react_2.Box, { ...cardSx, p: 3, position: "relative", transition: (0, motion_1.transitionFor)(["box-shadow", "transform"]), sx: (0, motion_2.reducedMotionSx)(), _hover: {
                 boxShadow: "lg",
                 transform: "translateY(-3px)",
             }, children: [(0, jsx_runtime_1.jsxs)(react_2.Flex, { justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [(0, jsx_runtime_1.jsx)(react_2.Flex, { align: "center", justify: "center", boxSize: "36px", borderRadius: "lg", bg: warningTone.bg, color: warningTone.fg, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Building2, { size: 18 }) }), (0, jsx_runtime_1.jsx)(react_2.Badge, { colorScheme: "yellow", borderRadius: "full", px: 2, py: 0.5, fontSize: "0.7rem", fontWeight: 600, children: labels.pending })] }), (0, jsx_runtime_1.jsx)(react_2.Text, { fontSize: "sm", fontWeight: 700, color: heading, noOfLines: 1, mb: 1, children: item.company_name }), item.company_url && ((0, jsx_runtime_1.jsxs)(react_2.Flex, { align: "center", gap: 2, color: subtle, fontSize: "xs", mb: 2, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Globe, { size: 13 }), (0, jsx_runtime_1.jsx)(react_2.Text, { noOfLines: 1, title: item.company_url, children: item.company_url })] })), (0, jsx_runtime_1.jsxs)(react_2.HStack, { spacing: 2, pt: 2, borderTop: "1px solid", borderColor: border, children: [(0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { 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) }) }), (0, jsx_runtime_1.jsx)(react_2.Box, { flex: 1, children: (0, jsx_runtime_1.jsx)(Button_1.default, { label: labels.decline, colorScheme: "red", size: "sm", width: "100%", onClick: () => onDeclineInvite === null || onDeclineInvite === void 0 ? void 0 : onDeclineInvite(item.orgId) }) })] })] }, item.orgId));

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

@@ -0,0 +1,4 @@
+import type { PageHeaderProps } from "./PageHeaderProps";
+/** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
+declare const PageHeader: ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, "data-testid": testId, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default PageHeader;

package/dist/Components/PageHeader/PageHeader.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@chakra-ui/react");
+const useCustomTheme_1 = require("../../Theme/useCustomTheme");
+/** Page header: h1 title, muted subtitle, right-aligned actions that wrap under on narrow screens. */
+const PageHeader = ({ title, subtitle, actions, breadcrumbs, leading, titleAddon, meta, tabs, "data-testid": testId, }) => {
+    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
+    return ((0, jsx_runtime_1.jsxs)(react_1.Flex, { direction: "column", gap: 3, "data-testid": testId, children: [breadcrumbs && ((0, jsx_runtime_1.jsx)(react_1.Box, { fontSize: "sm", color: colors.textMuted, sx: { "[aria-current=page]": { color: colors.text[800] } }, children: breadcrumbs })), (0, jsx_runtime_1.jsxs)(react_1.Flex, { justify: "space-between", align: { base: "flex-start", md: "center" }, direction: { base: "column", md: "row" }, gap: 3, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { gap: 3, align: "center", minW: 0, children: [leading && (0, jsx_runtime_1.jsx)(react_1.Box, { flexShrink: 0, children: leading }), (0, jsx_runtime_1.jsxs)(react_1.Box, { minW: 0, children: [(0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 2, wrap: "wrap", children: [(0, jsx_runtime_1.jsx)(react_1.Heading, { as: "h1", fontSize: "lg", fontWeight: 600, letterSpacing: "-0.01em", color: colors.header[900], children: title }), titleAddon] }), subtitle && ((0, jsx_runtime_1.jsx)(react_1.Text, { mt: 0.5, fontSize: "sm", color: colors.textMuted, children: subtitle })), meta && ((0, jsx_runtime_1.jsx)(react_1.Flex, { mt: 1, columnGap: 4, rowGap: 1, wrap: "wrap", align: "center", fontSize: "xs", color: colors.textMuted, children: meta }))] })] }), actions && ((0, jsx_runtime_1.jsx)(react_1.Flex, { gap: 2, wrap: "wrap", align: "center", flexShrink: 0, children: actions }))] }), tabs && (0, jsx_runtime_1.jsx)(react_1.Box, { children: tabs })] }));
+};
+exports.default = PageHeader;

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+/** Page title block per DESIGN-GUIDE §6; keep at most one solid button in `actions`. */
+export interface PageHeaderProps {
+    /** 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;
+    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;
+    "data-testid"?: string;
+}

package/dist/Components/PageHeader/PageHeaderProps.js

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

package/dist/Components/PdfViewer/PdfViewer.js

@@ -16,6 +16,6 @@ const PdfViewer = ({ pdfUrl, fileName = "Document.pdf", height = "480px", showTo
     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;
-    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.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_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, download: fileName, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.Box, { border: "1px solid", borderColor: theme.colors.gray[200], borderRadius: borderRadius, overflow: "hidden", bg: theme.colors.background[50], children: [showToolbar && ((0, jsx_runtime_1.jsxs)(react_1.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_1.Flex, { align: "center", gap: 2, minW: 0, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FileText, { size: 18, color: theme.colors.accentText }), (0, jsx_runtime_1.jsx)(react_1.Text, { fontSize: "sm", fontWeight: 500, color: theme.colors.gray[700], overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: fileName })] }), (0, jsx_runtime_1.jsxs)(react_1.Flex, { align: "center", gap: 1, children: [(0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Open in new tab", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, target: "_blank", rel: "noopener noreferrer", "aria-label": `Open ${fileName} in a new tab`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ExternalLink, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(ToolTip_1.default, { label: "Download", placement: "top", children: (0, jsx_runtime_1.jsx)(react_1.Box, { as: "a", href: pdfUrl, download: fileName, "aria-label": `Download ${fileName}`, p: 2, borderRadius: "lg", color: theme.colors.gray[600], _hover: { bg: iconHoverBg, color: iconHoverInk }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Download, { size: 16 }) }) })] })] })), (0, jsx_runtime_1.jsx)(react_1.Box, { as: "embed", src: pdfUrl, type: "application/pdf", width: "100%", height: height, display: "block" })] }));
 };
 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: "0.8125rem", md: "0.875rem", lg: "1rem", xl: "1.125rem",
+};
+const SECONDARY_SIZE = {
+    sm: "0.75rem", md: "0.75rem", lg: "0.8125rem", xl: "0.875rem",
+};
+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 { ChakraPinInputProps } from "./PinInputProps";
-/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. Not to be confused with the unexported `PinInputs/PinInputs.tsx`. */
-export default function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color, variant, pins, label, id, isRequired, isInformation, informationMessage, }: ChakraPinInputProps): import("react/jsx-runtime").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, }: ChakraPinInputProps): import("react/jsx-runtime").JSX.Element;

package/dist/Components/PinInput/PinInput.js

@@ -5,14 +5,17 @@ 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");
-/** The real, published OTP input (exported as `PinInput` from index.ts) — Chakra-native boxes, paste support, `type: "alphanumeric" | "number"`. Not to be confused with the unexported `PinInputs/PinInputs.tsx`. */
-function PinInputs({ otp, mask, defaultValue, placeholder, manageFocus, errorBorderColor, focusBorderColor, onChange, onComplete, type, color = "primary", variant, pins = 3, label, id, isRequired, isInformation, informationMessage, }) {
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+const pinInputCellSize_1 = require("./pinInputCellSize");
+/** 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, }) {
+    var _a;
     const theme = (0, useCustomTheme_1.useCustomTheme)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.TextLabel, { label: label, id: id, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage })), (0, jsx_runtime_1.jsx)(react_1.HStack, { 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, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.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[500], _focus: {
+    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, children: Array.from({ length: pins }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_1.PinInputField, { "aria-label": `${fieldName}, digit ${index + 1} of ${pins}`, boxSize: cell.boxSize, fontSize: cell.fontSize, borderRadius: "lg", backgroundColor: theme.colors.background[100], borderColor: theme.colors.boxborder[500], _focus: {
                             borderColor: theme.colors.primary[500],
                             boxShadow: `0 0 0 0.063rem ${theme.colors.primary[500]}`,
                         } }, index))) }) })] }));

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

@@ -1,13 +1,14 @@
 import { PinInputProps } from "@chakra-ui/react";
-/** The only pin/OTP component exported from the package — the similarly-named PinInputs in Components/PinInputs/ is dead code, not exported; do not deep-import it. */
+/** The only pin/OTP component exported from the package. */
 export type ChakraPinInputProps = Pick<PinInputProps, "otp" | "mask" | "defaultValue" | "placeholder" | "manageFocus" | "errorBorderColor" | "focusBorderColor" | "onChange" | "onComplete"> & {
     type?: "alphanumeric" | "number";
+    /** Square cell size, aligned to CONTROL_SIZES heights (xs 24 · sm 32 · md 40 · lg 48). Defaults to "sm". */
     size?: "xs" | "sm" | "md" | "lg";
     variant?: "flushed" | "outline" | "filled" | "unstyled";
     color?: "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "whiteAlpha" | "blackAlpha" | "primary";
     pins: number;
     label?: string;
-    /** Only feeds the visible label's htmlFor — no PinInputField ever receives this id, so the association points at nothing. */
+    /** Used as a fallback accessible name (with `label`) for the field group and each digit; never rendered. */
     id?: string;
     isRequired?: boolean;
     isInformation?: boolean;

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

@@ -0,0 +1,7 @@
+import { type ControlSize } from "../../Theme/tokens/primitives/controlSizes";
+export type PinInputCellSize = {
+    boxSize: string;
+    fontSize: string;
+};
+/** Square OTP cell dimensions for a size, aligned to the shared CONTROL_SIZES heights. */
+export declare const pinInputCellSize: (size: ControlSize) => PinInputCellSize;

package/dist/Components/PinInput/pinInputCellSize.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.pinInputCellSize = void 0;
+const controlSizes_1 = require("../../Theme/tokens/primitives/controlSizes");
+/** Square OTP cell dimensions for a size, aligned to the shared CONTROL_SIZES heights. */
+const pinInputCellSize = (size) => {
+    const spec = controlSizes_1.CONTROL_SIZES[size];
+    return { boxSize: spec.height, fontSize: spec.fontSize };
+};
+exports.pinInputCellSize = pinInputCellSize;

package/dist/Components/PlanBadge/PlanBadge.d.ts

@@ -1,11 +1,4 @@
 import React from "react";
 import { PlanBadgeProps } from "./PlanBadgeProps";
-/**
- * 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.
- */
 declare const PlanBadge: React.FC<PlanBadgeProps>;
 export default PlanBadge;

package/dist/Components/PlanBadge/PlanBadge.js

@@ -6,13 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const planBadge_1 = require("../../Utils/planBadge");
 const PlanPill_1 = __importDefault(require("../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.
- */
+// Top-bar plan badge — resolves an org's plan state into a PlanPill, or renders nothing.
 const PlanBadge = ({ input, maxLabelWidth, ariaLabel, onClick, }) => {
     const { visible, label, mobileLabel, subtitle, tone } = (0, planBadge_1.resolvePlanBadge)(input);
     if (!visible)

package/dist/Components/PlanPill/PlanPill.js

@@ -5,6 +5,7 @@ const react_1 = require("@chakra-ui/react");
 const lucide_react_1 = require("lucide-react");
 const useCustomTheme_1 = require("../../Theme/useCustomTheme");
 const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
+const focusRing_styles_1 = require("../../Theme/chakra/focusRing.styles");
 const planPillGradient_1 = require("./planPillGradient");
 const TONE_ICON = {
     normal: lucide_react_1.Sparkles,
@@ -26,10 +27,8 @@ const PlanPill = ({ label, mobileLabel, status, tone = "normal", icon, gradient,
     return ((0, jsx_runtime_1.jsxs)(react_1.Box, { as: "button", type: "button", "aria-label": ariaLabel || (status ? `${label} — ${status}` : label), onClick: onClick, display: "inline-flex", alignItems: "center", gap: "7px", pl: "12px", pr: status ? "5px" : "12px", py: "3px", bgImage: (0, gradientInk_1.gradientCss)(resolved), color: ink, borderRadius: "full", whiteSpace: "nowrap", cursor: "pointer", transition: "transform 0.2s ease, box-shadow 0.2s ease", _hover: {
             transform: "translateY(-1px)",
             boxShadow: `0 6px 18px ${resolved.from}59`,
-        }, _focusVisible: {
-            outline: "none",
-            boxShadow: `0 0 0 3px ${resolved.from}55`,
         }, sx: {
+            ...(0, focusRing_styles_1.focusVisibleStyles)(c),
             "@media (prefers-reduced-motion: reduce)": {
                 transition: "none",
                 _hover: { transform: "none" },

package/dist/Components/PlanPill/planPillGradient.d.ts

@@ -1,28 +1,12 @@
+import { inkSafeGradient, type Gradient } from "../../Theme/tokens/builders/gradientInk";
 import type { ColorScale } from "../../Theme/tokens/types";
-export type Gradient = {
-    from: string;
-    to: string;
-};
-export declare const STATUS_INK = "#ffffff";
-/**
- * Opt-in accent for consumers who want a fixed badge colour instead of the brand `gradient`.
- * One hue, like every brand gradient — a second hue reads as a status change, not a style.
- */
+export { inkSafeGradient };
+export type { Gradient };
+/** @deprecated Use `colors.white` from `useCustomTheme()` directly. */
+export declare const STATUS_INK: string;
 export declare const ACCENT_GRADIENT: Gradient;
-/**
- * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
- * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the
- * same badge reads white-on-colour in one brand and black-on-pastel in the next.
- */
-export declare const inkSafeGradient: (gradient: Gradient) => Gradient;
-/** Status tones are semantic scales, not designed as label backdrops. */
 export declare const statusGradient: (scale: ColorScale) => Gradient;
 export declare const darkerStop: (g: Gradient) => string;
-/**
- * Solid inset chip in the pill's own hue. A translucent scrim was a guessed alpha that
- * composited into a muddy dark lozenge on every mid-tone gradient; a derived rung reads as
- * one step down from the pill in every brand and both modes.
- */
 export declare const chipFill: (g: Gradient) => string;
 /** The pill's lighter stop — guaranteed lighter than `chipFill`, so it draws the inset edge. */
 export declare const chipBorder: (g: Gradient) => string;

package/dist/Components/PlanPill/planPillGradient.js

@@ -1,35 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.chipBorder = exports.chipFill = exports.darkerStop = exports.statusGradient = exports.inkSafeGradient = exports.ACCENT_GRADIENT = exports.STATUS_INK = void 0;
+exports.chipBorder = exports.chipFill = exports.darkerStop = exports.statusGradient = exports.ACCENT_GRADIENT = exports.STATUS_INK = exports.inkSafeGradient = void 0;
 const statusTone_1 = require("../../Theme/tokens/builders/statusTone");
 const color_1 = require("../../Theme/tokens/builders/color");
-exports.STATUS_INK = "#ffffff";
-/**
- * Opt-in accent for consumers who want a fixed badge colour instead of the brand `gradient`.
- * One hue, like every brand gradient — a second hue reads as a status change, not a style.
- */
+const neutrals_1 = require("../../Theme/tokens/brands/neutrals");
+const gradientInk_1 = require("../../Theme/tokens/builders/gradientInk");
+Object.defineProperty(exports, "inkSafeGradient", { enumerable: true, get: function () { return gradientInk_1.inkSafeGradient; } });
+/** @deprecated Use `colors.white` from `useCustomTheme()` directly. */
+exports.STATUS_INK = neutrals_1.neutralTokens.white;
 exports.ACCENT_GRADIENT = { from: "#8b3fc8", to: "#762d9d" };
-/**
- * Sinks both stops until WHITE ink clears AA, keeping each stop's hue. Any mid-tone gradient —
- * a brand `gradient` token, a status scale — otherwise flips `onGradient` to black ink, so the
- * same badge reads white-on-colour in one brand and black-on-pastel in the next.
- */
-const inkSafeGradient = (gradient) => ({
-    from: (0, statusTone_1.resolveAvatarFill)(gradient.from),
-    to: (0, statusTone_1.resolveAvatarFill)(gradient.to),
-});
-exports.inkSafeGradient = inkSafeGradient;
-/** Status tones are semantic scales, not designed as label backdrops. */
-const statusGradient = (scale) => (0, exports.inkSafeGradient)({ from: scale[400], to: scale[600] });
+const statusGradient = (scale) => (0, gradientInk_1.inkSafeGradient)({ from: scale[400], to: scale[600] });
 exports.statusGradient = statusGradient;
 const CHIP_INK_CONTRAST = 7;
 const darkerStop = (g) => (0, color_1.relativeLuminance)(g.from) <= (0, color_1.relativeLuminance)(g.to) ? g.from : g.to;
 exports.darkerStop = darkerStop;
-/**
- * Solid inset chip in the pill's own hue. A translucent scrim was a guessed alpha that
- * composited into a muddy dark lozenge on every mid-tone gradient; a derived rung reads as
- * one step down from the pill in every brand and both modes.
- */
+// NOTE: derived rung, not a translucent scrim — a guessed alpha muddied every mid-tone gradient.
 const chipFill = (g) => (0, statusTone_1.resolveAvatarFill)((0, exports.darkerStop)(g), CHIP_INK_CONTRAST);
 exports.chipFill = chipFill;
 /** The pill's lighter stop — guaranteed lighter than `chipFill`, so it draws the inset edge. */