pixelize-design-library 2.4.1 → 2.4.2-beta.0

package/dist/Utils/accountHandoff.js

@@ -0,0 +1,144 @@
+"use strict";
+/**
+ * Cross-app "Account handoff": deep-link from a product app (CRM, Tickets, HRMS)
+ * into the Account app carrying the token, so the user lands signed in. Consuming
+ * apps once copy-pasted this per repo; it lives here so they share one contract.
+ *
+ * Query-param contract (must stay in sync across every caller):
+ * `sourceApp`, `returnUrl`, `orgId`, `api_key` (+ `userId` on the users page).
+ *
+ * The library is pre-bundled, so it must not read `import.meta.env` — that would
+ * bake in the library's own build env. Env-derived values are injected as config.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isAllowedReturnUrl = isAllowedReturnUrl;
+exports.resolveReturnUrl = resolveReturnUrl;
+exports.createAccountHandoff = createAccountHandoff;
+const ALLOWED_RETURN_HOST_PATTERNS = [
+    /^localhost$/,
+    /^127\.0\.0\.1$/,
+    /\.pixelizetech\.com$/i,
+];
+const DEFAULT_ACCOUNT_PORT = "3000";
+function isAllowedReturnUrl(url) {
+    try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== "https:" && parsed.protocol !== "http:") {
+            return false;
+        }
+        return ALLOWED_RETURN_HOST_PATTERNS.some((pattern) => pattern.test(parsed.hostname));
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Receiver side (Account). Returns the `returnUrl` param only when it passes the
+ * allowlist, else the caller's `defaultReturnUrl` when that is allowed, else null.
+ * `fallbackOrgId` is accepted for caller symmetry; the app owns any org-derived
+ * fallback via `opts.defaultReturnUrl`.
+ */
+function resolveReturnUrl(searchParams, fallbackOrgId, opts) {
+    void fallbackOrgId;
+    const returnUrl = searchParams.get("returnUrl");
+    if (returnUrl && isAllowedReturnUrl(returnUrl)) {
+        return returnUrl;
+    }
+    const fallback = opts === null || opts === void 0 ? void 0 : opts.defaultReturnUrl;
+    if (fallback && isAllowedReturnUrl(fallback)) {
+        return fallback;
+    }
+    return null;
+}
+function isLocalDevHost(hostname) {
+    return /^(localhost|127\.0\.0\.1)$/i.test(hostname);
+}
+function currentPagePort() {
+    return (window.location.port ||
+        (window.location.protocol === "https:" ? "443" : "80"));
+}
+function createAccountHandoff(config) {
+    var _a;
+    /** Account origin for local dev. Never this app's own port — a same-origin URL would keep the user here. */
+    function localAccountBase(hostname) {
+        const pagePort = currentPagePort();
+        let port = String(config.accountLocalPort || DEFAULT_ACCOUNT_PORT).trim() ||
+            DEFAULT_ACCOUNT_PORT;
+        if (port === pagePort || port === config.appLocalPort) {
+            port = DEFAULT_ACCOUNT_PORT;
+        }
+        if (port === pagePort) {
+            port = pagePort === "3000" ? "3001" : DEFAULT_ACCOUNT_PORT;
+        }
+        return `http://${hostname}:${port}`;
+    }
+    function resolveAccountUiBase() {
+        const hostname = window.location.hostname;
+        const configured = String(config.accountUiBase || "")
+            .trim()
+            .replace(/\/$/, "");
+        if (!config.forceRemote && isLocalDevHost(hostname)) {
+            return localAccountBase(hostname);
+        }
+        if (!configured) {
+            return localAccountBase(hostname);
+        }
+        try {
+            if (new URL(configured).origin === window.location.origin) {
+                return localAccountBase(hostname);
+            }
+        }
+        catch {
+            return localAccountBase(hostname);
+        }
+        return configured;
+    }
+    const buildReturnUrl = (_a = config.buildReturnUrl) !== null && _a !== void 0 ? _a : (() => window.location.origin.replace(/\/$/, ""));
+    function buildParams(options) {
+        var _a, _b;
+        const params = new URLSearchParams();
+        params.set("sourceApp", (_a = options.sourceApp) !== null && _a !== void 0 ? _a : config.sourceApp);
+        const returnUrl = (_b = options.returnUrl) !== null && _b !== void 0 ? _b : buildReturnUrl(options.orgId);
+        if (returnUrl && isAllowedReturnUrl(returnUrl)) {
+            params.set("returnUrl", returnUrl);
+        }
+        if (options.orgId) {
+            params.set("orgId", String(options.orgId));
+        }
+        if (options.token) {
+            params.set("api_key", options.token);
+        }
+        return params;
+    }
+    function buildUsersPageUrl(options = {}) {
+        const params = buildParams(options);
+        if (options.userId != null && options.userId !== "") {
+            params.set("userId", String(options.userId));
+        }
+        return `${resolveAccountUiBase()}/users?${params.toString()}`;
+    }
+    function navigateToUsersPage(options = {}) {
+        const url = buildUsersPageUrl(options);
+        if (!/^https?:\/\//i.test(url)) {
+            return;
+        }
+        window.location.assign(url);
+    }
+    function buildOrganizationPageUrl(options = {}) {
+        return `${resolveAccountUiBase()}/organization?${buildParams(options).toString()}`;
+    }
+    function navigateToOrganizationPage(options = {}) {
+        const url = buildOrganizationPageUrl(options);
+        if (!/^https?:\/\//i.test(url)) {
+            return;
+        }
+        window.location.assign(url);
+    }
+    return {
+        resolveAccountUiBase,
+        buildUsersPageUrl,
+        navigateToUsersPage,
+        buildOrganizationPageUrl,
+        navigateToOrganizationPage,
+    };
+}

package/dist/Utils/functions.d.ts

@@ -1,2 +1 @@
 export declare function toWords(str: string): string;
-//# sourceMappingURL=functions.d.ts.map

package/dist/Utils/mergeRefs.d.ts

@@ -8,4 +8,3 @@ export declare function setRef<T>(ref: React.Ref<T> | undefined, value: T | null
  */
 export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | undefined>): (value: T | null) => void;
 export default mergeRefs;
-//# sourceMappingURL=mergeRefs.d.ts.map

package/dist/Utils/planBadge.d.ts

@@ -0,0 +1,38 @@
+import { PlanPillTone } from "../Components/PlanPill/PlanPillProps";
+import { PlanExpiryInput } from "./planExpiry";
+export type PlanBadgeInput = {
+    /**
+     * Whether the org is on any plan at all. Defaults to true, so a caller that
+     * only knows the plan's name/code can omit it.
+     */
+    hasPlan?: boolean;
+    planName?: string | null;
+    /** Plan code, e.g. `"free"`. Used to detect the free plan when `isFreePlan` is omitted. */
+    planCode?: string | null;
+    /** Legacy numeric plan id, where `1` is the free plan. */
+    planId?: number | null;
+    /** Explicit free-plan flag. Overrides detection from `planCode`/`planId`/`planName`. */
+    isFreePlan?: boolean;
+    isTrial?: boolean;
+    isExpired?: boolean;
+    expiryDate?: PlanExpiryInput;
+    /** The badge is hidden entirely for anyone who cannot act on it. */
+    canManageBilling?: boolean;
+    /** Injectable clock, for tests. */
+    now?: Date;
+};
+export type PlanBadgeResult = {
+    visible: boolean;
+    label: string;
+    mobileLabel: string;
+    subtitle: string;
+    tone: PlanPillTone;
+};
+/**
+ * Turns an org's plan state into the label, urgency tone and inset-chip text for
+ * a `PlanPill` — the "Upgrade your plan" badge in an app's top bar.
+ *
+ * Copy and thresholds are centralized here so every app shows the same badge for
+ * the same org.
+ */
+export declare function resolvePlanBadge(input: PlanBadgeInput): PlanBadgeResult;

package/dist/Utils/planBadge.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolvePlanBadge = resolvePlanBadge;
+const planExpiry_1 = require("./planExpiry");
+const UPGRADE_LABEL = "Upgrade your plan";
+const UPGRADE_MOBILE_LABEL = "Upgrade";
+const EXPIRED_MOBILE_LABEL = "Expired";
+const TRIAL_LABEL = "Trial";
+const GENERIC_PLAN_NAME = "Plan";
+const LEGACY_FREE_PLAN_ID = 1;
+const TRIAL_DANGER_DAYS = 3;
+const ACTIVE_WARNING_DAYS = 15;
+const HIDDEN = {
+    visible: false,
+    label: "",
+    mobileLabel: "",
+    subtitle: "",
+    tone: "normal",
+};
+const upgrade = (subtitle, tone = "normal") => ({
+    visible: true,
+    label: UPGRADE_LABEL,
+    mobileLabel: UPGRADE_MOBILE_LABEL,
+    subtitle,
+    tone,
+});
+const normalize = (value) => String(value !== null && value !== void 0 ? value : "")
+    .trim()
+    .toLowerCase();
+function isFreePlan(input, planName) {
+    if (input.isFreePlan !== undefined)
+        return input.isFreePlan;
+    if (normalize(input.planCode) === "free")
+        return true;
+    if (input.planId !== null && input.planId !== undefined) {
+        return Number(input.planId) === LEGACY_FREE_PLAN_ID;
+    }
+    return normalize(planName) === "free";
+}
+/** Whole days from today to the expiry day; null when there is no usable date. */
+function daysUntil(expiryDate, now) {
+    if (expiryDate === null || expiryDate === undefined || expiryDate === "") {
+        return null;
+    }
+    const expiry = expiryDate instanceof Date ? expiryDate : new Date(expiryDate);
+    if (isNaN(expiry.getTime()))
+        return null;
+    const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    return Math.round((startOfDay(expiry).getTime() - startOfDay(now).getTime()) / 86400000);
+}
+/**
+ * Turns an org's plan state into the label, urgency tone and inset-chip text for
+ * a `PlanPill` — the "Upgrade your plan" badge in an app's top bar.
+ *
+ * Copy and thresholds are centralized here so every app shows the same badge for
+ * the same org.
+ */
+function resolvePlanBadge(input) {
+    var _a, _b;
+    if (!input.canManageBilling)
+        return HIDDEN;
+    const now = (_a = input.now) !== null && _a !== void 0 ? _a : new Date();
+    const planName = ((_b = input.planName) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+    const daysLeft = daysUntil(input.expiryDate, now);
+    const remaining = (0, planExpiry_1.formatPlanRemaining)(input.expiryDate, now);
+    const elapsed = (0, planExpiry_1.formatPlanElapsed)(input.expiryDate, now);
+    // Checked before the expiry branch: a lapsed org is downgraded to free, and
+    // "Free expired" is not a state worth shouting about.
+    if (isFreePlan(input, planName))
+        return upgrade("");
+    if (input.isExpired || elapsed !== "") {
+        // "<plan> expired" as the label with the elapsed time in the inset chip —
+        // folding both behind "Upgrade your plan" made the pill wide enough to
+        // crowd the header.
+        return {
+            visible: true,
+            label: `${planName || GENERIC_PLAN_NAME} expired`,
+            mobileLabel: EXPIRED_MOBILE_LABEL,
+            subtitle: elapsed,
+            tone: "danger",
+        };
+    }
+    if (input.hasPlan === false)
+        return upgrade("");
+    if (input.isTrial) {
+        return {
+            visible: true,
+            label: TRIAL_LABEL,
+            mobileLabel: TRIAL_LABEL,
+            subtitle: remaining,
+            tone: daysLeft !== null && daysLeft <= TRIAL_DANGER_DAYS
+                ? "danger"
+                : "warning",
+        };
+    }
+    const tone = daysLeft !== null && daysLeft < ACTIVE_WARNING_DAYS ? "warning" : "normal";
+    // An active paid plan names itself — falling through to "Upgrade your plan"
+    // told users with years remaining that they were on nothing.
+    if (!planName)
+        return upgrade(remaining, tone);
+    return {
+        visible: true,
+        label: planName,
+        mobileLabel: planName,
+        subtitle: remaining,
+        tone,
+    };
+}

package/dist/Utils/planExpiry.d.ts

@@ -0,0 +1,34 @@
+export type PlanExpiryInput = string | number | Date | null | undefined;
+/**
+ * Calendar months + leftover days between two dates.
+ * Anchoring on a real month boundary keeps "1 month" honest across 28/30/31-day
+ * months, so Jan 31 → Feb 28 reads as 28 days rather than a whole month.
+ */
+export declare function splitMonthsAndDays(from: Date, to: Date): {
+    months: number;
+    days: number;
+};
+/**
+ * Time left on a plan, compactly: `"3mo left"` once a whole month remains,
+ * `"18d left"` below that. Intended for `UpgradeButton`'s `subtitle`, so it
+ * stays one short line. Returns `""` when there is no usable date or the plan
+ * has already lapsed — an expired plan is a different message, which the
+ * consuming app owns.
+ */
+export declare function formatPlanExpiry(expiryDate: PlanExpiryInput, now?: Date): string;
+/**
+ * Time left on a plan, to the minute in the final day: `"3mo left"`, `"18d left"`,
+ * then `"23h 45m left"` down to `"1m left"`. `""` once lapsed.
+ *
+ * Differs from `formatPlanExpiry` only in that last day: a calendar-day count
+ * reads as "Expires today" for the whole day, which goes stale next to a live
+ * countdown. Prefer this for a badge that sits on screen; `formatPlanExpiry`
+ * stays the cheaper day-granular option.
+ */
+export declare function formatPlanRemaining(expiryDate: PlanExpiryInput, now?: Date): string;
+/**
+ * How long ago a plan lapsed: `"1h 10m ago"` under a day, `"2d ago"` / `"1mo ago"`
+ * beyond it. `""` while the plan is still live — so a badge can say how stale a
+ * lapse is rather than a bare "expired".
+ */
+export declare function formatPlanElapsed(expiryDate: PlanExpiryInput, now?: Date): string;

package/dist/Utils/planExpiry.js

@@ -0,0 +1,115 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitMonthsAndDays = splitMonthsAndDays;
+exports.formatPlanExpiry = formatPlanExpiry;
+exports.formatPlanRemaining = formatPlanRemaining;
+exports.formatPlanElapsed = formatPlanElapsed;
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+function toDate(value) {
+    if (value === null || value === undefined || value === "")
+        return null;
+    const date = value instanceof Date ? new Date(value.getTime()) : new Date(value);
+    return isNaN(date.getTime()) ? null : date;
+}
+function startOfDay(date) {
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+function addCalendarMonths(date, months) {
+    const lastDayOfTarget = new Date(date.getFullYear(), date.getMonth() + months + 1, 0).getDate();
+    return new Date(date.getFullYear(), date.getMonth() + months, Math.min(date.getDate(), lastDayOfTarget));
+}
+function daysBetween(from, to) {
+    return Math.round((to.getTime() - from.getTime()) / MS_PER_DAY);
+}
+/** Compact units (`2mo`, `5d`) — this reads inside a badge subtitle, where
+ * "2 months 5 days left" wraps. */
+function unit(count, suffix) {
+    return `${count}${suffix}`;
+}
+/**
+ * Calendar months + leftover days between two dates.
+ * Anchoring on a real month boundary keeps "1 month" honest across 28/30/31-day
+ * months, so Jan 31 → Feb 28 reads as 28 days rather than a whole month.
+ */
+function splitMonthsAndDays(from, to) {
+    let months = (to.getFullYear() - from.getFullYear()) * 12 +
+        (to.getMonth() - from.getMonth());
+    if (to.getDate() < from.getDate())
+        months -= 1;
+    if (months < 0)
+        months = 0;
+    return { months, days: daysBetween(addCalendarMonths(from, months), to) };
+}
+/**
+ * Time left on a plan, compactly: `"3mo left"` once a whole month remains,
+ * `"18d left"` below that. Intended for `UpgradeButton`'s `subtitle`, so it
+ * stays one short line. Returns `""` when there is no usable date or the plan
+ * has already lapsed — an expired plan is a different message, which the
+ * consuming app owns.
+ */
+function formatPlanExpiry(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const expiryDay = startOfDay(expiry);
+    const today = startOfDay(now !== null && now !== void 0 ? now : new Date());
+    const daysLeft = daysBetween(today, expiryDay);
+    if (daysLeft < 0)
+        return "";
+    if (daysLeft === 0)
+        return "Expires today";
+    const { months, days } = splitMonthsAndDays(today, expiryDay);
+    return months > 0 ? `${unit(months, "mo")} left` : `${unit(days, "d")} left`;
+}
+/** Never reports `0m`; the final stretch reads `1m`. */
+function formatHoursMinutes(ms, suffix) {
+    const totalMinutes = Math.floor(ms / 60000);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return hours > 0
+        ? `${unit(hours, "h")} ${unit(minutes, "m")} ${suffix}`
+        : `${unit(Math.max(minutes, 1), "m")} ${suffix}`;
+}
+/**
+ * Time left on a plan, to the minute in the final day: `"3mo left"`, `"18d left"`,
+ * then `"23h 45m left"` down to `"1m left"`. `""` once lapsed.
+ *
+ * Differs from `formatPlanExpiry` only in that last day: a calendar-day count
+ * reads as "Expires today" for the whole day, which goes stale next to a live
+ * countdown. Prefer this for a badge that sits on screen; `formatPlanExpiry`
+ * stays the cheaper day-granular option.
+ */
+function formatPlanRemaining(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const referenceNow = now !== null && now !== void 0 ? now : new Date();
+    const msLeft = expiry.getTime() - referenceNow.getTime();
+    if (msLeft < 0)
+        return "";
+    if (msLeft < MS_PER_DAY) {
+        return msLeft === 0 ? "Expires today" : formatHoursMinutes(msLeft, "left");
+    }
+    const { months, days } = splitMonthsAndDays(startOfDay(referenceNow), startOfDay(expiry));
+    return months > 0 ? `${unit(months, "mo")} left` : `${unit(days, "d")} left`;
+}
+/**
+ * How long ago a plan lapsed: `"1h 10m ago"` under a day, `"2d ago"` / `"1mo ago"`
+ * beyond it. `""` while the plan is still live — so a badge can say how stale a
+ * lapse is rather than a bare "expired".
+ */
+function formatPlanElapsed(expiryDate, now) {
+    const expiry = toDate(expiryDate);
+    if (!expiry)
+        return "";
+    const referenceNow = now !== null && now !== void 0 ? now : new Date();
+    const msAgo = referenceNow.getTime() - expiry.getTime();
+    if (msAgo <= 0)
+        return "";
+    if (msAgo < MS_PER_DAY)
+        return formatHoursMinutes(msAgo, "ago");
+    const { months, days } = splitMonthsAndDays(startOfDay(expiry), startOfDay(referenceNow));
+    return months > 0
+        ? `${unit(months, "mo")} ago`
+        : `${unit(Math.max(days, 1), "d")} ago`;
+}

package/dist/Utils/rafThrottle.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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

@@ -0,0 +1,34 @@
+"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.
+ */
+const rafThrottle = (fn) => {
+    let frame = null;
+    let latest;
+    const throttled = (...args) => {
+        latest = args;
+        if (frame !== null)
+            return;
+        frame = requestAnimationFrame(() => {
+            frame = null;
+            fn(...latest);
+        });
+    };
+    throttled.cancel = () => {
+        if (frame !== null)
+            cancelAnimationFrame(frame);
+        frame = null;
+    };
+    return throttled;
+};
+exports.rafThrottle = rafThrottle;

package/dist/Utils/table.d.ts

@@ -75,4 +75,3 @@ export declare const TableCellCalculation: ({ isFrozen, columnWidths, headerInde
  */
 export declare function globalSearchFilter<T extends Record<string, unknown>>(data: T[], query: string): T[];
 export {};
-//# sourceMappingURL=table.d.ts.map

package/dist/Utils/table.js

@@ -45,6 +45,13 @@ exports.useDebounce = useDebounce;
 exports.globalSearchFilter = globalSearchFilter;
 const react_1 = __importStar(require("react"));
 const accentText_1 = require("../Theme/tokens/builders/accentText");
+// 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 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.
@@ -67,11 +74,15 @@ function compareValues(aRaw, bRaw, direction) {
     const bn = Number(b);
     if (!Number.isNaN(an) && !Number.isNaN(bn))
         return (an - bn) * dir;
-    const ad = Date.parse(a);
-    const bd = Date.parse(b);
-    if (!Number.isNaN(ad) && !Number.isNaN(bd))
-        return (ad - bd) * dir;
-    return a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }) * 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.
+    if (HAS_DIGIT.test(a) && HAS_DIGIT.test(b)) {
+        const ad = Date.parse(a);
+        const bd = Date.parse(b);
+        if (!Number.isNaN(ad) && !Number.isNaN(bd))
+            return (ad - bd) * dir;
+    }
+    return COLLATOR.compare(a, b) * dir;
 }
 function SortMultiColumnData(data, sortConfig) {
     const active = sortConfig.filter((s) => s.direction !== "none");

package/dist/esm/Assets/defaultLogo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DefaultLogo = () => {
+    return (_jsxs("svg", { width: "12.09", height: "15.95", viewBox: "0 0 31 29", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M30.4999 6.26137V7.81058H15.9761H14.8787V22.8508V28.8862H12.5226C9.6824 28.8862 7.32632 26.4656 7.06812 23.3995C7.06812 23.2381 7.06812 23.0444 7.06812 22.8508V18.3323C7.06812 18.2677 7.06812 18.2032 7.06812 18.1063V15.5889V6.2291C7.06812 2.80793 9.84378 -5.72205e-06 13.2972 -5.72205e-06H24.8517C28.0147 0.355021 30.4676 3.00158 30.4676 6.2291L30.4999 6.26137Z", fill: "currentColor" }), _jsx("path", { d: "M7.10053 23.3672H7.03598C5.16402 23.2381 3.48571 22.4635 2.25926 21.3338C0.871428 20.0428 0 18.2677 0 16.3312V15.6211H7.06825V18.1386C7.06825 18.2032 7.06825 18.2677 7.06825 18.3645V22.883C7.06825 23.0767 7.06825 23.2381 7.06825 23.4317L7.10053 23.3672Z", fill: "currentColor" }), _jsx("path", { d: "M30.4678 12.0063V15.6211V17.1703C30.4678 20.6238 26.272 23.3994 21.0757 23.3994H14.8789V22.8508V15.6211H22.6572V7.81056C22.6895 7.81056 30.5001 7.81056 30.5001 7.81056V11.5868C30.5001 11.7159 30.5001 11.8772 30.5001 12.0063H30.4678Z", fill: "currentColor" })] }));
+};
+export default DefaultLogo;

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Accordion as ChakraAccordian, AccordionItem, AccordionButton, AccordionPanel, Box, Flex, } from "@chakra-ui/react";
+import { ChevronDown } from "lucide-react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { DEFAULT_CANVAS, isDarkCanvas } from "../../Theme/tokens/builders/accentText.js";
+import { getAccordionHoverColors } from "./accordionColors.js";
+const Accordion = ({ allowMultiple, allowToggle, index, onChange, reduceMotion, items, ...rest }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const theme = useCustomTheme();
+    const c = (_a = theme.colors) !== null && _a !== void 0 ? _a : {};
+    const isDark = isDarkCanvas((_c = (_b = c.backgroundColor) === null || _b === void 0 ? void 0 : _b.main) !== null && _c !== void 0 ? _c : DEFAULT_CANVAS);
+    const border = (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[300]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[200];
+    const headingColor = (_h = (_g = c.text) === null || _g === void 0 ? void 0 : _g[800]) !== null && _h !== void 0 ? _h : (_j = c.gray) === null || _j === void 0 ? void 0 : _j[800];
+    const bodyColor = (_l = (_k = c.text) === null || _k === void 0 ? void 0 : _k[600]) !== null && _l !== void 0 ? _l : (_m = c.gray) === null || _m === void 0 ? void 0 : _m[600];
+    const { expandedBg, softHover } = useMemo(() => { var _a; return getAccordionHoverColors((_a = theme.colors) !== null && _a !== void 0 ? _a : {}, isDark); }, [theme.colors, isDark]);
+    return (_jsx(ChakraAccordian, { allowMultiple: allowMultiple, allowToggle: allowToggle, index: index, onChange: onChange, reduceMotion: reduceMotion, ...rest, children: items.map((item, idx) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            return (_jsx(AccordionItem, { border: `0.063rem solid ${border}`, borderRadius: "xl", bg: (_b = (_a = c.background) === null || _a === void 0 ? void 0 : _a[50]) !== null && _b !== void 0 ? _b : (_c = c.backgroundColor) === null || _c === void 0 ? void 0 : _c.light, mb: 3, overflow: "hidden", transition: "border-color 0.15s ease, box-shadow 0.15s ease", _last: { mb: 0 }, _hover: { borderColor: (_e = (_d = c.boxborder) === null || _d === void 0 ? void 0 : _d[400]) !== null && _e !== void 0 ? _e : (_f = c.gray) === null || _f === void 0 ? void 0 : _f[300] }, ...item.itemProps, sx: (_g = item.customStyles) === null || _g === void 0 ? void 0 : _g.itemStyle, children: ({ isExpanded }) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+                    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 ${(_b = (_a = c.primary) === null || _a === void 0 ? void 0 : _a[300]) !== null && _b !== void 0 ? _b : (_c = c.gray) === null || _c === void 0 ? void 0 : _c[300]}`,
+                                        outlineOffset: "-0.125rem",
+                                    }, ...item.buttonProps, sx: {
+                                        ...(_d = item.customStyles) === null || _d === void 0 ? void 0 : _d.buttonStyle,
+                                        "&:hover": {
+                                            ...(_e = item.customStyles) === null || _e === void 0 ? void 0 : _e.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 ? ((_g = (_f = c.primary) === null || _f === void 0 ? void 0 : _f[600]) !== null && _g !== void 0 ? _g : headingColor) : (_h = c.gray) === null || _h === void 0 ? void 0 : _h[500], bg: isExpanded ? ((_l = (_k = (_j = c.primary) === null || _j === void 0 ? void 0 : _j.opacity) === null || _k === void 0 ? void 0 : _k[16]) !== null && _l !== void 0 ? _l : "transparent") : "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: (_m = item.customStyles) === null || _m === void 0 ? void 0 : _m.panelStyle, children: item.content })] }));
+                } }, idx));
+        }) }));
+};
+export default Accordion;

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

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

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

@@ -0,0 +1,30 @@
+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".
+ */
+const MIN_HOVER_STEP = 1.15;
+export const getAccordionHoverColors = (colors, isDark) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    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: (_d = (_b = (_a = colors.gray) === null || _a === void 0 ? void 0 : _a[200]) !== null && _b !== void 0 ? _b : (_c = colors.gray) === null || _c === void 0 ? void 0 : _c[300]) !== null && _d !== void 0 ? _d : (_e = colors.gray) === null || _e === void 0 ? void 0 : _e[50],
+            softHover: (_j = (_g = (_f = colors.gray) === null || _f === void 0 ? void 0 : _f[200]) !== null && _g !== void 0 ? _g : (_h = colors.gray) === null || _h === void 0 ? void 0 : _h[300]) !== null && _j !== void 0 ? _j : (_k = colors.gray) === null || _k === void 0 ? void 0 : _k[50],
+        };
+    }
+    const rest = (_m = (_l = colors.background) === null || _l === void 0 ? void 0 : _l[50]) !== null && _m !== void 0 ? _m : (_o = colors.backgroundColor) === null || _o === void 0 ? void 0 : _o.light;
+    const expandedTint = ((_q = (_p = colors.primary) === null || _p === void 0 ? void 0 : _p.opacity) === null || _q === void 0 ? void 0 : _q[8])
+        ? compositeOver(colors.primary.opacity[8], rest)
+        : ((_s = (_r = colors.gray) === null || _r === void 0 ? void 0 : _r[50]) !== null && _s !== void 0 ? _s : rest);
+    return {
+        expandedBg: liftToContrast(expandedTint, rest, "light", MIN_HOVER_STEP),
+        softHover: liftToContrast((_v = (_u = (_t = colors.table) === null || _t === void 0 ? void 0 : _t.hover) === null || _u === void 0 ? void 0 : _u[100]) !== null && _v !== void 0 ? _v : (_w = colors.gray) === null || _w === void 0 ? void 0 : _w[50], rest, "light", MIN_HOVER_STEP),
+    };
+};

package/dist/esm/Components/AlertDialog/AlertDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as ChakraAlertDialog, AlertDialogBody, AlertDialogCloseButton, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, Button, } from "@chakra-ui/react";
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+const AlertDialog = ({ isOpen, onClose, leastDestructiveRef, content, title, confirmButtonText = "Yes", cancelButtonText = "No", isConfirmLoading, onConfirm, ContentStyle, headerStyle, bodyStyle, footerStyle, closeButtonStyle, button1Style, button2Style, isCentered, key, }) => {
+    var _a;
+    const { colors } = useCustomTheme();
+    return (_jsxs(ChakraAlertDialog, { motionPreset: "slideInBottom", leastDestructiveRef: leastDestructiveRef, onClose: onClose, isOpen: isOpen, isCentered: isCentered, children: [_jsx(AlertDialogOverlay, {}), _jsxs(AlertDialogContent, { bg: (_a = colors === null || colors === void 0 ? void 0 : colors.background) === null || _a === void 0 ? void 0 : _a[50], sx: ContentStyle, children: [_jsx(AlertDialogHeader, { sx: headerStyle, children: title }), _jsx(AlertDialogCloseButton, { sx: closeButtonStyle }), _jsx(AlertDialogBody, { sx: bodyStyle, children: content }), _jsxs(AlertDialogFooter, { sx: footerStyle, children: [_jsx(Button, { ref: leastDestructiveRef, onClick: onClose, variant: "outline", colorScheme: "red", size: "sm", sx: button1Style, children: cancelButtonText }), _jsx(Button, { colorScheme: "primary", onClick: onConfirm, isLoading: isConfirmLoading, ml: 3, size: "sm", sx: button2Style, children: confirmButtonText })] })] })] }, key));
+};
+export default AlertDialog;

package/dist/esm/Components/AlertDialog/AlertDialogProps.js

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