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

package/dist/Utils/rafThrottle.d.ts

@@ -1,14 +1,3 @@
-/**
- * Coalesces bursts of calls into one per animation frame.
- *
- * Every use in this library is a listener that reads layout (`getBoundingClientRect`) and then
- * writes position state. Unthrottled, a capture-phase `scroll` listener runs once per scrollable
- * ancestor per scroll event — on a low-end device that is a forced reflow several times per frame,
- * which is what makes menus judder while the page moves. One frame is also the fastest rate the
- * screen can show a change, so nothing is lost by dropping the rest.
- *
- * The trailing call wins: the last arguments before the frame fires are the current ones.
- */
 export declare const rafThrottle: <A extends unknown[]>(fn: (...args: A) => void) => ((...args: A) => void) & {
     cancel: () => void;
 };

package/dist/Utils/rafThrottle.js

@@ -1,17 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.rafThrottle = void 0;
-/**
- * Coalesces bursts of calls into one per animation frame.
- *
- * Every use in this library is a listener that reads layout (`getBoundingClientRect`) and then
- * writes position state. Unthrottled, a capture-phase `scroll` listener runs once per scrollable
- * ancestor per scroll event — on a low-end device that is a forced reflow several times per frame,
- * which is what makes menus judder while the page moves. One frame is also the fastest rate the
- * screen can show a change, so nothing is lost by dropping the rest.
- *
- * The trailing call wins: the last arguments before the frame fires are the current ones.
- */
+// NOTE: coalesces bursts into one call per animation frame — the trailing call's args win.
 const rafThrottle = (fn) => {
     let frame = null;
     let latest;

package/dist/Utils/table.d.ts

@@ -1,10 +1,7 @@
+import { useDebouncedCallback } from "../Hooks/useDebounce";
 import React from "react";
 import { DataObject, TableHeaderProps } from "../Components/Table/TableProps";
 import type { CustomThemeProps } from "../Theme/themeProps";
-/**
- * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
- * back to a numeric-aware locale string compare. Empty/null values sort last.
- */
 export declare function compareValues(aRaw: unknown, bRaw: unknown, direction: "asc" | "desc" | "none"): number;
 export declare function SortMultiColumnData(data: DataObject[], sortConfig: {
     column: string | number;
@@ -16,6 +13,9 @@ export type TablePaletteColor = {
     text: string;
     onSolid?: string;
 };
+export type SemanticStatusTone = "info" | "warning" | "success" | "error" | "neutral";
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+export declare function buildSemanticStatusPalette(toneByValue: Record<string, SemanticStatusTone>, theme: CustomThemeProps): Record<string, TablePaletteColor>;
 /** Deterministic, theme-aware color palette for groups + status pills. */
 export declare function buildTablePalette(theme: CustomThemeProps): TablePaletteColor[];
 /** Pick a deterministic palette color for a value, with optional consumer override hex. */
@@ -25,22 +25,12 @@ export type TableGroup = {
     label: string;
     rows: DataObject[];
 };
-/**
- * Partition rows by a column, preserving first-seen group order. The group key is
- * a normalized string so object/array values (e.g. a `user` field that is an object
- * or an array of users) group together by their readable text instead of by object
- * identity.
- */
 export declare function groupRows(data: DataObject[], groupBy: string | number): TableGroup[];
 export declare const calculateLeftOffset: (columns: number[], index: number) => number;
-/**
- * When a column has no `node`, raw cell values are rendered; plain objects
- * (e.g. relation/user fields) must not be passed as React children.
- */
 export declare function normalizeTableCellValue(value: unknown): React.ReactNode;
 export declare const searchAndSortData: (data: DataObject[], searchValues: Record<string, string>) => DataObject[];
 export declare function debounce<T extends (...args: never[]) => void>(func: T, delay: number): (...args: Parameters<T>) => void;
-export declare function useDebounce<T extends (...args: never[]) => void>(callback: T, delay: number): (...args: Parameters<T>) => void;
+export declare const useDebounce: typeof useDebouncedCallback;
 export declare const pageSizeCalculation: (records: number) => number[];
 type TableCellCalculationProps = {
     isFrozen?: boolean;
@@ -60,12 +50,5 @@ export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerInde
     cellTextColor: string | undefined;
     rowTextColor: string | undefined;
 };
-/**
- * Filters array of objects by checking all property values against the search query.
- *
- * @param data - Array of objects
- * @param query - Search string
- * @returns Filtered data
- */
 export declare function globalSearchFilter<T extends Record<string, unknown>>(data: T[], query: string): T[];
 export {};

package/dist/Utils/table.js

@@ -1,62 +1,33 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableCellCalculation = exports.pageSizeCalculation = exports.searchAndSortData = exports.calculateLeftOffset = void 0;
+exports.TableCellCalculation = exports.pageSizeCalculation = exports.useDebounce = exports.searchAndSortData = exports.calculateLeftOffset = void 0;
 exports.compareValues = compareValues;
 exports.SortMultiColumnData = SortMultiColumnData;
+exports.buildSemanticStatusPalette = buildSemanticStatusPalette;
 exports.buildTablePalette = buildTablePalette;
 exports.pickTableColor = pickTableColor;
 exports.groupRows = groupRows;
 exports.normalizeTableCellValue = normalizeTableCellValue;
 exports.debounce = debounce;
-exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
-const react_1 = __importStar(require("react"));
+const useDebounce_1 = require("../Hooks/useDebounce");
+const react_1 = __importDefault(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+const color_1 = require("../Theme/tokens/builders/color");
+const outlineRung_1 = require("../Theme/tokens/builders/outlineRung");
+const filledSurface_1 = require("../Theme/tokens/builders/filledSurface");
 const statusTone_1 = require("../Theme/tokens/builders/statusTone");
-// Built once, not per comparison: sorting 10k rows runs this ~130k times, and constructing a
-// collator is orders of magnitude dearer than using one.
+const tone_1 = require("../Theme/tokens/builders/tone");
+// NOTE: built once — sorting 10k rows runs this ~130k times and a Collator is costly to construct.
 const COLLATOR = new Intl.Collator(undefined, {
     numeric: true,
     sensitivity: "base",
 });
 const HAS_DIGIT = /\d/;
-/**
- * Type-aware, null-safe comparison. Detects numbers and dates; otherwise falls
- * back to a numeric-aware locale string compare. Empty/null values sort last.
- */
+// Type-aware, null-safe comparison: numbers and dates detected, else numeric-aware locale compare.
 function compareValues(aRaw, bRaw, direction) {
     if (direction === "none")
         return 0;
@@ -75,8 +46,7 @@ function compareValues(aRaw, bRaw, direction) {
     const bn = Number(b);
     if (!Number.isNaN(an) && !Number.isNaN(bn))
         return (an - bn) * dir;
-    // No digit means no date, so this skips two Date.parse calls per comparison on the common
-    // text columns (names, emails, statuses) without changing which strings parse as dates.
+    // NOTE: skips Date.parse on text columns with no digits — cheap and safe, since no digit means no date.
     if (HAS_DIGIT.test(a) && HAS_DIGIT.test(b)) {
         const ad = Date.parse(a);
         const bd = Date.parse(b);
@@ -98,11 +68,47 @@ function SortMultiColumnData(data, sortConfig) {
         return 0;
     });
 }
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+function buildSemanticStatusPalette(toneByValue, theme) {
+    const c = theme.colors;
+    const scales = {
+        info: c.semantic.info,
+        warning: c.semantic.warning,
+        success: c.semantic.success,
+        error: c.semantic.error,
+        neutral: c.gray,
+    };
+    return Object.fromEntries(Object.entries(toneByValue).map(([value, key]) => {
+        const scale = scales[key];
+        const tone = (0, tone_1.resolveSoftTone)(c, scale);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white, c.backgroundColor.main);
+        const solid = scale[solidRung];
+        return [
+            value,
+            {
+                solid,
+                soft: tone.bg,
+                text: tone.fg,
+                onSolid: (0, filledSurface_1.labelOnFill)(solid, c.white, c.black),
+            },
+        ];
+    }));
+}
 const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
+/** Consumer `statusColors` values are fill seeds — derive bleed + pill ink from them. */
+const resolveStatusOverride = (fill, white, black, surface) => {
+    const soft = withAlpha(fill, "22");
+    const solid = (0, statusTone_1.resolveAvatarFill)(fill);
+    return {
+        solid,
+        soft,
+        text: (0, outlineRung_1.liftToContrast)(fill, (0, color_1.compositeOver)(soft, surface), accentText_1.AA_NORMAL_TEXT),
+        onSolid: (0, accentText_1.onFilled)(solid, white, black),
+    };
+};
 /** Deterministic, theme-aware color palette for groups + status pills. */
 function buildTablePalette(theme) {
     const c = theme.colors;
-    const mode = (0, accentText_1.isDarkCanvas)(c.backgroundColor.main) ? "dark" : "light";
     const scales = [
         c.primary,
         c.semantic.success,
@@ -116,12 +122,14 @@ function buildTablePalette(theme) {
         c.purple,
     ];
     return scales.map((scale) => {
-        const tone = (0, statusTone_1.resolveStatusTone)(scale, mode);
+        const tone = (0, tone_1.resolveSoftTone)(c, scale);
+        const solidRung = (0, filledSurface_1.solidFillRung)(scale, c.white, c.backgroundColor.main);
+        const solid = scale[solidRung];
         return {
-            solid: scale[500],
+            solid,
             soft: tone.bg,
             text: tone.fg,
-            onSolid: (0, accentText_1.onFilled)(scale[500], c.white, c.black),
+            onSolid: (0, filledSurface_1.labelOnFill)(solid, c.white, c.black),
         };
     });
 }
@@ -134,22 +142,19 @@ const hashKey = (value) => {
 };
 /** Pick a deterministic palette color for a value, with optional consumer override hex. */
 function pickTableColor(value, palette, override, theme) {
+    var _a;
     const white = theme ? theme.colors.white : accentText_1.DEFAULT_WHITE;
     const black = theme ? theme.colors.black : accentText_1.DEFAULT_BLACK;
     if (override) {
-        return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: (0, accentText_1.onFilled)(override, white, black) };
+        const surface = (_a = theme === null || theme === void 0 ? void 0 : theme.colors.background[50]) !== null && _a !== void 0 ? _a : accentText_1.DEFAULT_WHITE;
+        return resolveStatusOverride(override, white, black, surface);
     }
     if (!palette.length) {
         throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");
     }
     return palette[hashKey(value) % palette.length];
 }
-/**
- * Partition rows by a column, preserving first-seen group order. The group key is
- * a normalized string so object/array values (e.g. a `user` field that is an object
- * or an array of users) group together by their readable text instead of by object
- * identity.
- */
+// Partitions rows by a column, preserving first-seen group order; groups by readable text, not object identity.
 function groupRows(data, groupBy) {
     const order = [];
     const map = new Map();
@@ -205,11 +210,7 @@ const objectToText = (o) => {
         return String(o.value);
     return "";
 };
-/**
- * Readable string for any cell value. Handles primitives, React elements, entity
- * objects (e.g. `user`: `{ name }` / `{ first_name, last_name }`), and arrays of
- * any of those (e.g. a multi-user field) by joining their texts.
- */
+// Readable string for any cell value: primitives, React elements, entity objects, or arrays of those.
 const getStringValue = (value) => {
     if (value === null || value === undefined)
         return "";
@@ -227,10 +228,7 @@ const getStringValue = (value) => {
     }
     return "";
 };
-/**
- * When a column has no `node`, raw cell values are rendered; plain objects
- * (e.g. relation/user fields) must not be passed as React children.
- */
+// When a column has no `node`, plain objects (relation/user fields) can't be passed as React children.
 function normalizeTableCellValue(value) {
     if (value === null || value === undefined)
         return "";
@@ -242,7 +240,6 @@ function normalizeTableCellValue(value) {
     if (react_1.default.isValidElement(value)) {
         return value;
     }
-    // Objects (relation/user) and arrays (multi-user / multi-select) → readable text.
     return getStringValue(value);
 }
 const searchAndSortData = (data, searchValues) => {
@@ -282,22 +279,7 @@ function debounce(func, delay) {
         }, delay);
     };
 }
-function useDebounce(callback, delay) {
-    const callbackRef = (0, react_1.useRef)(callback);
-    const timerRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        callbackRef.current = callback;
-    }, [callback]);
-    const debouncedFn = (0, react_1.useCallback)((...args) => {
-        if (timerRef.current) {
-            clearTimeout(timerRef.current);
-        }
-        timerRef.current = setTimeout(() => {
-            callbackRef.current(...args);
-        }, delay);
-    }, [delay]);
-    return debouncedFn;
-}
+exports.useDebounce = useDebounce_1.useDebouncedCallback;
 const pageSizeCalculation = (records) => {
     const pageSize = [5, 10];
     if (records > 100) {
@@ -339,13 +321,7 @@ const TableCellCalculation = ({ isFrozen, columnWidths, headerIndex, isCheckbox,
     return { leftOffset, cellBgColor, rowBgColor, cellTextColor, rowTextColor };
 };
 exports.TableCellCalculation = TableCellCalculation;
-/**
- * Filters array of objects by checking all property values against the search query.
- *
- * @param data - Array of objects
- * @param query - Search string
- * @returns Filtered data
- */
+// Filters an array of objects by checking all property values against the search query.
 function globalSearchFilter(data, query) {
     if (!query.trim())
         return data;

package/dist/Utils/tabular.d.ts

@@ -0,0 +1,30 @@
+/** One spreadsheet cell; `null` and `undefined` write an empty cell. */
+export type TabularCell = string | number | boolean | null | undefined;
+interface TabularColumnBase<Row, K extends keyof Row> {
+    /** Row field the cell reads, the same `key` a table column uses. */
+    readonly key: K;
+    /** Text of the header line. */
+    readonly header: string;
+    /** Turns the field into a cell; required when the field is not a scalar. */
+    readonly format?: (value: Row[K], row: Row) => TabularCell;
+    /** Default true: formula-like text gets a leading `'` so it is shown, not run. */
+    readonly escapeFormulas?: boolean;
+}
+/** One exported column; `format` is required when the field is not a scalar. */
+export type TabularColumn<Row> = {
+    [K in keyof Row & string]: Row[K] extends TabularCell ? TabularColumnBase<Row, K> : TabularColumnBase<Row, K> & {
+        readonly format: (value: Row[K], row: Row) => TabularCell;
+    };
+}[keyof Row & string];
+/** Options for `toCsv`. */
+export interface ToCsvOptions {
+    /** Prepends a UTF-8 byte-order mark so Excel reads non-ASCII. Default false. */
+    readonly bom?: boolean;
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+export declare function toCsv<Row extends object>(rows: readonly Row[], columns: readonly TabularColumn<Row>[], { bom }?: ToCsvOptions): string;
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+export declare function safeFileName(fileName: string): string;
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+export declare function downloadBlob(blob: Blob, fileName: string): void;
+export {};

package/dist/Utils/tabular.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toCsv = toCsv;
+exports.safeFileName = safeFileName;
+exports.downloadBlob = downloadBlob;
+const NEEDS_QUOTES = /[",\r\n]/;
+const FORMULA_TRIGGER = /^[=+\-@\t\r]/;
+const PLAIN_NUMBER = /^[+-]?(?:\d[\d,]*(?:\.\d*)?|\.\d+)%?$/;
+const BOM = "";
+const RESERVED_FILE_CHARS = /[\\/:*?"<>|\p{Cc}]/gu;
+const MAX_FILE_NAME = 80;
+const REVOKE_DELAY_MS = 1000;
+const quote = (text) => (NEEDS_QUOTES.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+const looksLikeFormula = (text) => FORMULA_TRIGGER.test(text) && !PLAIN_NUMBER.test(text);
+function cellText(value, escapeFormulas) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "number")
+        return Number.isFinite(value) ? String(value) : "";
+    const text = String(value);
+    if (typeof value !== "string" || !escapeFormulas)
+        return text;
+    return looksLikeFormula(text) ? `'${text}` : text;
+}
+function readCell(row, column) {
+    const field = row[column.key];
+    const format = column.format;
+    return format === undefined ? field : format(field, row);
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+function toCsv(rows, columns, { bom = false } = {}) {
+    if (columns.length === 0)
+        return "";
+    const lines = [columns.map((column) => quote(column.header)).join(",")];
+    for (const row of rows) {
+        lines.push(columns.map((column) => quote(cellText(readCell(row, column), column.escapeFormulas !== false))).join(","));
+    }
+    return (bom ? BOM : "") + lines.join("\r\n");
+}
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+function safeFileName(fileName) {
+    const cleaned = fileName.replace(RESERVED_FILE_CHARS, "-").trim().replace(/^[.\s]+/, "");
+    if (cleaned === "")
+        return "export";
+    if (cleaned.length <= MAX_FILE_NAME)
+        return cleaned;
+    const dot = cleaned.lastIndexOf(".");
+    const extension = dot > 0 && cleaned.length - dot <= 8 ? cleaned.slice(dot) : "";
+    return cleaned.slice(0, MAX_FILE_NAME - extension.length).replace(/[\uD800-\uDBFF]$/, "") + extension;
+}
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+function downloadBlob(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = safeFileName(fileName);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
+}

package/dist/Utils/validation.d.ts

@@ -0,0 +1,13 @@
+export declare const EMAIL_REGEX: RegExp;
+export type ValidationCode = "email_required" | "email_invalid" | "password_required" | "password_min" | "required" | "positive_number" | "file_type" | "file_too_large" | "video_type" | "youtube_required" | "youtube_invalid";
+export declare const defaultValidationMessages: Record<ValidationCode, string>;
+export declare function validateEmail(value: string): ValidationCode | undefined;
+export declare function validatePassword(value: string, minLength?: number): ValidationCode | undefined;
+export declare function validateRequired(value: string): ValidationCode | undefined;
+export declare function validatePositiveNumber(value: string): ValidationCode | undefined;
+export declare function validateFileType(file: File, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateFileSize(file: File, maxMB: number): ValidationCode | undefined;
+export declare function validateFile(file: File, maxMB: number, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateVideoFileType(file: File, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateVideoFile(file: File, maxMB: number, allowed?: Set<string>): ValidationCode | undefined;
+export declare function validateYoutubeUrl(value: string): ValidationCode | undefined;

package/dist/Utils/validation.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultValidationMessages = exports.EMAIL_REGEX = void 0;
+exports.validateEmail = validateEmail;
+exports.validatePassword = validatePassword;
+exports.validateRequired = validateRequired;
+exports.validatePositiveNumber = validatePositiveNumber;
+exports.validateFileType = validateFileType;
+exports.validateFileSize = validateFileSize;
+exports.validateFile = validateFile;
+exports.validateVideoFileType = validateVideoFileType;
+exports.validateVideoFile = validateVideoFile;
+exports.validateYoutubeUrl = validateYoutubeUrl;
+exports.EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+exports.defaultValidationMessages = {
+    email_required: "Email is required",
+    email_invalid: "Enter a valid email address",
+    password_required: "Password is required",
+    password_min: "Password must be at least {min} characters",
+    required: "{label} is required",
+    positive_number: "{label} must be a positive number",
+    file_type: "Unsupported file type",
+    file_too_large: "File must be smaller than {max}MB",
+    video_type: "Unsupported video type",
+    youtube_required: "YouTube URL is required",
+    youtube_invalid: "Enter a valid YouTube URL",
+};
+function validateEmail(value) {
+    if (!value.trim())
+        return "email_required";
+    if (!exports.EMAIL_REGEX.test(value.trim()))
+        return "email_invalid";
+    return undefined;
+}
+function validatePassword(value, minLength = 6) {
+    if (!value)
+        return "password_required";
+    if (value.length < minLength)
+        return "password_min";
+    return undefined;
+}
+function validateRequired(value) {
+    if (!value.trim())
+        return "required";
+    return undefined;
+}
+function validatePositiveNumber(value) {
+    if (!value.trim())
+        return "required";
+    const n = Number(value);
+    if (Number.isNaN(n) || n <= 0)
+        return "positive_number";
+    return undefined;
+}
+const DEFAULT_FILE_TYPES = new Set(["application/pdf", "image/jpeg", "image/png", "image/jpg"]);
+function validateFileType(file, allowed = DEFAULT_FILE_TYPES) {
+    return allowed.has(file.type) ? undefined : "file_type";
+}
+function validateFileSize(file, maxMB) {
+    return file.size > maxMB * 1024 * 1024 ? "file_too_large" : undefined;
+}
+function validateFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const DEFAULT_VIDEO_TYPES = new Set(["video/mp4", "video/quicktime"]);
+function validateVideoFileType(file, allowed = DEFAULT_VIDEO_TYPES) {
+    return allowed.has(file.type) ? undefined : "video_type";
+}
+function validateVideoFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateVideoFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const YOUTUBE_HOSTS = new Set(["youtube.com", "www.youtube.com", "m.youtube.com", "youtu.be"]);
+function validateYoutubeUrl(value) {
+    if (!value.trim())
+        return "youtube_required";
+    let url;
+    try {
+        url = new URL(value.trim());
+    }
+    catch {
+        return "youtube_invalid";
+    }
+    return YOUTUBE_HOSTS.has(url.hostname.toLowerCase()) ? undefined : "youtube_invalid";
+}

package/dist/esm/Components/Accordion/Accordion.js

@@ -4,7 +4,11 @@ import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, Accordion
 import { ChevronDown } from "lucide-react";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
 import { isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
-import { getAccordionHoverColors } from "./accordionColors.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { accordionFocusRing, getAccordionHoverColors } from "./accordionColors.js";
+const HEADER_ACTION_RIGHT = "3.25rem";
+/** Chakra Accordion wrapper for header/content pairs; FilterSidebar composes this directly for its collapsible filter sections. */
 const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
     const { colors } = useCustomTheme();
     const isDark = isDarkCanvas(colors.backgroundColor.main);
@@ -12,20 +16,20 @@ const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion,
     const headingColor = colors.text[800];
     const bodyColor = colors.text[600];
     const { expandedBg, softHover } = useMemo(() => getAccordionHoverColors(colors, isDark), [colors, isDark]);
+    const focusRing = useMemo(() => accordionFocusRing(colors), [colors]);
     return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
             var _a;
-            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: colors.background[50], mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: colors.boxborder[200] }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
-                    var _a, _b, _c;
-                    return (_jsxs(_Fragment, { children: [_jsx("h2", { children: _jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "0.875rem", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: "background 0.15s ease", _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: {
-                                        boxShadow: "none",
-                                        outline: `0.125rem solid ${colors.primary[300]}`,
-                                        outlineOffset: "-0.125rem",
-                                    }, ...item.buttonProps, sx: {
-                                        ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.buttonStyle,
-                                        "&:hover": {
-                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.hoverbuttonStyle,
-                                        },
-                                    }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "md", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s ease, color 0.2s ease, background 0.2s ease", children: _jsx(ChevronDown, { size: 16 }) })] }) }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "0.875rem", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.panelStyle, children: item.content })] }));
+            return (_jsx(AccordionItem, { border: "1px solid", borderColor: border, borderRadius: "xl", bg: colors.background[50], boxShadow: "none", mb: 3, overflow: "hidden", _last: { mb: 0 }, ...item.itemProps, sx: (_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c, _d, _e;
+                    return (_jsxs(_Fragment, { children: [_jsxs(Box, { as: "h2", position: item.headerAction ? "relative" : undefined, sx: item.headerAction
+                                    ? { "&:hover > button": { background: isExpanded ? expandedBg : softHover, ...(_a = item.customStyles) === null || _a === void 0 ? void 0 : _a.hoverbuttonStyle } }
+                                    : undefined, children: [_jsxs(AccordionButton, { px: 4, py: 3, gap: 3, fontSize: "sm", fontWeight: 600, color: headingColor, bg: isExpanded ? expandedBg : "transparent", transition: transitionFor(["background-color"]), _hover: { bg: isExpanded ? expandedBg : softHover }, _focusVisible: focusRing, ...item.buttonProps, sx: {
+                                            ...reducedMotionSx(),
+                                            ...(_b = item.customStyles) === null || _b === void 0 ? void 0 : _b.buttonStyle,
+                                            "&:hover": {
+                                                ...(_c = item.customStyles) === null || _c === void 0 ? void 0 : _c.hoverbuttonStyle,
+                                            },
+                                        }, children: [_jsx(Box, { as: "span", flex: "1", textAlign: "left", children: item.header }), _jsx(Flex, { align: "center", justify: "center", boxSize: "1.5rem", flexShrink: 0, borderRadius: "lg", color: isExpanded ? colors.accentText : colors.textMuted, bg: isExpanded ? colors.primary.opacity[16] : "transparent", transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)", transition: transitionFor(["transform", "color", "background-color"], "base"), sx: reducedMotionSx(), children: _jsx(ChevronDown, { size: 16 }) })] }), item.headerAction && (_jsx(Flex, { position: "absolute", top: "50%", right: HEADER_ACTION_RIGHT, transform: "translateY(-50%)", align: "center", sx: (_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.headerActionStyle, children: item.headerAction }))] }), _jsx(AccordionPanel, { px: 4, pt: 1, pb: 4, fontSize: "sm", lineHeight: "1.5", color: bodyColor, ...item.panelProps, sx: (_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.panelStyle, children: item.content })] }));
                 } }, idx));
         }) }));
 };

package/dist/esm/Components/Accordion/accordionColors.js

@@ -1,18 +1,10 @@
 import { compositeOver } from "../../Theme/tokens/builders/color.js";
 import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
-/**
- * Same perceptibility floor the SideBar ladder uses — a state a user cannot see is not a state.
- * Light mode `softHover` measured 1.042-1.105 across all 9 brands (invisible) while dark sat at
- * 1.58-1.85; `expandedBg` (`primary.opacity[8]`, an 8%-alpha tint) is the same bug class — an
- * 8% tint composited over a near-white canvas is itself near-white. Both are resolved against
- * the rest surface so light and dark actually agree on "you can see this".
- */
+import { insetFocusRingShadow } from "../../Theme/chakra/focusRing.styles.js";
+// NOTE: light softHover measured 1.04-1.11 (invisible) unresolved — both modes now resolve against the rest surface.
 const MIN_HOVER_STEP = 1.15;
 export const getAccordionHoverColors = (colors, isDark) => {
     if (isDark) {
-        // primary.opacity[8] composited over the dark canvas collapses to ~1.07:1 (near-black on
-        // near-black) — gray[200] is an opaque rung that stays visibly above canvas (~1.6:1) without
-        // being as loud as the gray[300] hover fill FilterSidebar/Table already use.
         return {
             expandedBg: colors.gray[200],
             softHover: colors.gray[200],
@@ -25,3 +17,9 @@ export const getAccordionHoverColors = (colors, isDark) => {
         softHover: liftToContrast(colors.table.hover[100], rest, MIN_HOVER_STEP),
     };
 };
+/** The Button's two-tone `focusRing`, drawn inset because the item clips overflow. */
+export const accordionFocusRing = (colors) => ({
+    outline: "2px solid transparent",
+    outlineOffset: "-2px",
+    boxShadow: insetFocusRingShadow(colors),
+});

package/dist/esm/Components/AddressCard/AddressCard.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { NUMERIC_TEXT } from "../../Theme/tokens/primitives/typography.js";
+import { RadioIndicator, selectableSurface, useSelectable } from "../CheckoutKit/selectable.js";
+import Button from "../Button/Button.js";
+import Tag from "../Tag/Tag.js";
+const DEFAULT_LABELS = { default: "Default", edit: "Edit", remove: "Remove" };
+/** Tonal delivery-address card: name, tags, lines and calm Edit/Remove actions; selection is a ring plus a check. */
+const AddressCard = ({ value, name, phone, lines, tag, isDefault = false, note, selected, onSelect, onEdit, onRemove, disabled = false, labels, "data-testid": testId, }) => {
+    const { colors } = useCustomTheme();
+    const uid = useId();
+    const nameId = `${uid}-name`;
+    const bodyId = `${uid}-body`;
+    const copy = { ...DEFAULT_LABELS, ...labels };
+    const { isSelected, interactive, inGroup, ringed, props } = useSelectable({ value, selected, disabled, onSelect });
+    const selectable = inGroup || !!onSelect;
+    return (_jsxs(Flex, { direction: "column", "data-testid": testId, "data-selected": isSelected || undefined, ...selectableSurface(colors, { selected: isSelected && selectable, disabled, interactive, ringed }), children: [_jsxs(Flex, { ...props, "data-radio": true, "aria-disabled": selectable && disabled ? true : undefined, "aria-labelledby": props.role ? nameId : undefined, "aria-describedby": props.role ? bodyId : undefined, gap: 3, p: 4, pb: onEdit || onRemove ? 2 : 4, borderRadius: "2xl", cursor: interactive ? "pointer" : "default", outline: "none", align: "flex-start", children: [selectable && (_jsx(Box, { mt: 0.5, children: _jsx(RadioIndicator, { selected: isSelected }) })), _jsxs(Flex, { direction: "column", gap: 1, flex: 1, minW: 0, children: [_jsxs(Flex, { align: "center", gap: 2, wrap: "wrap", children: [_jsx(Text, { as: "span", id: nameId, fontSize: "sm", fontWeight: 700, lineHeight: 1.4, color: colors.header[900], children: name }), tag && _jsx(Tag, { label: tag, size: "xs", tone: "neutral" }), isDefault && _jsx(Tag, { label: copy.default, size: "xs", tone: "neutral" })] }), _jsxs(Box, { id: bodyId, children: [lines.map((line) => (_jsx(Text, { as: "span", display: "block", fontSize: "sm", lineHeight: 1.5, color: colors.text[800], children: line }, line))), phone && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, sx: NUMERIC_TEXT, children: phone })), note && (_jsx(Text, { as: "span", display: "block", mt: 1, fontSize: "xs", lineHeight: 1.4, color: colors.textMuted, children: note }))] })] })] }), (onEdit || onRemove) && (_jsxs(Flex, { gap: 1, pl: selectable ? "2.75rem" : 1, pr: 2, pb: 2, children: [onEdit && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onEdit, "aria-label": `${copy.edit} address: ${name}`, children: copy.edit })), onRemove && (_jsx(Button, { variant: "ghost", colorScheme: "gray", size: "sm", onClick: onRemove, "aria-label": `${copy.remove} address: ${name}`, children: copy.remove }))] }))] }));
+};
+export default AddressCard;