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

package/dist/esm/Utils/planExpiry.js

@@ -0,0 +1,109 @@
+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.
+ */
+export 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.
+ */
+export 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.
+ */
+export 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".
+ */
+export 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/esm/Utils/rafThrottle.js

@@ -0,0 +1,30 @@
+/**
+ * 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 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;
+};

package/dist/esm/Utils/table.js

@@ -0,0 +1,313 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { DEFAULT_BLACK, DEFAULT_WHITE, isDarkCanvas, onFilled, } from "../Theme/tokens/builders/accentText.js";
+import { resolveStatusTone } from "../Theme/tokens/builders/statusTone.js";
+// 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.
+ */
+export function compareValues(aRaw, bRaw, direction) {
+    if (direction === "none")
+        return 0;
+    const dir = direction === "asc" ? 1 : -1;
+    const a = getStringValue(aRaw);
+    const b = getStringValue(bRaw);
+    const aEmpty = a === "";
+    const bEmpty = b === "";
+    if (aEmpty && bEmpty)
+        return 0;
+    if (aEmpty)
+        return 1; // nulls/empties always last
+    if (bEmpty)
+        return -1;
+    const an = Number(a);
+    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.
+    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;
+}
+export function SortMultiColumnData(data, sortConfig) {
+    const active = sortConfig.filter((s) => s.direction !== "none");
+    if (!active.length)
+        return data;
+    return [...data].sort((a, b) => {
+        for (const { column, direction } of active) {
+            const r = compareValues(a[column], b[column], direction);
+            if (r !== 0)
+                return r;
+        }
+        return 0;
+    });
+}
+const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
+/** Deterministic, theme-aware color palette for groups + status pills. */
+export function buildTablePalette(theme) {
+    const c = theme.colors;
+    const mode = isDarkCanvas(c.backgroundColor.main) ? "dark" : "light";
+    const scales = [
+        c.primary,
+        c.semantic.success,
+        c.semantic.info,
+        c.semantic.warning,
+        c.teal,
+        c.blue,
+        c.pink,
+        c.semantic.error,
+        c.orange,
+        c.purple,
+    ];
+    return scales.map((scale) => {
+        const tone = resolveStatusTone(scale, mode);
+        return {
+            solid: scale[500],
+            soft: tone.bg,
+            text: tone.fg,
+            onSolid: onFilled(scale[500], c.white, c.black),
+        };
+    });
+}
+const hashKey = (value) => {
+    const s = String(value);
+    let h = 0;
+    for (let i = 0; i < s.length; i++)
+        h = (h * 31 + s.charCodeAt(i)) >>> 0;
+    return h;
+};
+/** Pick a deterministic palette color for a value, with optional consumer override hex. */
+export function pickTableColor(value, palette, override, theme) {
+    const white = theme ? theme.colors.white : DEFAULT_WHITE;
+    const black = theme ? theme.colors.black : DEFAULT_BLACK;
+    if (override) {
+        return { solid: override, soft: withAlpha(override, "22"), text: override, onSolid: onFilled(override, white, black) };
+    }
+    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.
+ */
+export function groupRows(data, groupBy) {
+    const order = [];
+    const map = new Map();
+    for (const row of data) {
+        const text = getStringValue(row[groupBy]);
+        const key = text === "" ? "—" : text;
+        if (!map.has(key)) {
+            map.set(key, []);
+            order.push(key);
+        }
+        map.get(key).push(row);
+    }
+    return order.map((value) => ({ value, label: String(value), rows: map.get(value) }));
+}
+export const calculateLeftOffset = (columns, index) => {
+    return columns.slice(0, index).reduce((sum, width) => sum + width, 0);
+};
+const extractTextFromReactNode = (node) => {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(extractTextFromReactNode).join(" ");
+    }
+    if (React.isValidElement(node)) {
+        const element = node;
+        return extractTextFromReactNode(element.props.children);
+    }
+    return "";
+};
+/** Best-effort readable text for an entity object (user/relation/option/etc.). */
+const objectToText = (o) => {
+    var _a, _b;
+    if (typeof o.label === "string" || typeof o.label === "number")
+        return String(o.label);
+    if (typeof o.name === "string" || typeof o.name === "number")
+        return String(o.name);
+    const first = (_a = o.first_name) !== null && _a !== void 0 ? _a : o.firstName;
+    const last = (_b = o.last_name) !== null && _b !== void 0 ? _b : o.lastName;
+    if (typeof first === "string" || typeof last === "string") {
+        return `${first !== null && first !== void 0 ? first : ""} ${last !== null && last !== void 0 ? last : ""}`.trim();
+    }
+    if (typeof o.full_name === "string")
+        return o.full_name;
+    if (typeof o.title === "string")
+        return o.title;
+    if (typeof o.company_name === "string")
+        return o.company_name;
+    if (typeof o.email === "string")
+        return o.email;
+    if (typeof o.value === "string" || typeof o.value === "number")
+        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.
+ */
+const getStringValue = (value) => {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+    }
+    if (React.isValidElement(value)) {
+        return extractTextFromReactNode(value);
+    }
+    if (Array.isArray(value)) {
+        return value.map(getStringValue).filter((s) => s !== "").join(", ");
+    }
+    if (typeof value === "object") {
+        return objectToText(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.
+ */
+export function normalizeTableCellValue(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean") {
+        return value;
+    }
+    if (React.isValidElement(value)) {
+        return value;
+    }
+    // Objects (relation/user) and arrays (multi-user / multi-select) → readable text.
+    return getStringValue(value);
+}
+export const searchAndSortData = (data, searchValues) => {
+    const filteredData = data.filter((item) => {
+        return Object.keys(searchValues).every((key) => {
+            const searchValue = searchValues[key].toLowerCase();
+            const itemValue = getStringValue(item[key]).toLowerCase();
+            return itemValue.includes(searchValue);
+        });
+    });
+    return filteredData.sort((a, b) => {
+        let aMatchCount = 0;
+        let bMatchCount = 0;
+        Object.keys(searchValues).forEach((key) => {
+            const searchValue = searchValues[key].toLowerCase();
+            const aValue = getStringValue(a[key]).toLowerCase();
+            const bValue = getStringValue(b[key]).toLowerCase();
+            if (aValue === searchValue)
+                aMatchCount++;
+            if (bValue === searchValue)
+                bMatchCount++;
+            if (aValue.includes(searchValue))
+                aMatchCount += 0.5;
+            if (bValue.includes(searchValue))
+                bMatchCount += 0.5;
+        });
+        return bMatchCount - aMatchCount;
+    });
+};
+export function debounce(func, delay) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+}
+export function useDebounce(callback, delay) {
+    const callbackRef = useRef(callback);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    const debouncedFn = useCallback((...args) => {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(() => {
+            callbackRef.current(...args);
+        }, delay);
+    }, [delay]);
+    return debouncedFn;
+}
+export const pageSizeCalculation = (records) => {
+    const pageSize = [5, 10];
+    if (records > 100) {
+        return [25, 50, 100];
+    }
+    else if (records > 50) {
+        return [5, 10, 20];
+    }
+    return pageSize;
+};
+export const TableCellCalculation = ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, theme, }) => {
+    var _a, _b, _c, _d;
+    const leftOffset = isFrozen
+        ? calculateLeftOffset(columnWidths, headerIndex) + (isCheckbox ? 50 : 0)
+        : 0;
+    const cellStyles = row.cellStyle;
+    const rowStyle = row.rowStyle;
+    let cellBgColor = undefined;
+    let cellTextColor = undefined;
+    if (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) {
+        cellBgColor =
+            (_b = (_a = cellStyles[header.id]) === null || _a === void 0 ? void 0 : _a.bg) !== null && _b !== void 0 ? _b : theme.colors.backgroundColor.light;
+        cellTextColor = (_d = (_c = cellStyles[header.id]) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : undefined;
+    }
+    else if (isFrozen) {
+        cellBgColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+        cellTextColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+    }
+    else if (index % 2 === 1) {
+        cellBgColor = theme.colors.backgroundColor.light;
+    }
+    let rowBgColor = undefined;
+    let rowTextColor = undefined;
+    if (rowStyle) {
+        rowBgColor = rowStyle.bg;
+        rowTextColor = rowStyle.color;
+    }
+    return { leftOffset, cellBgColor, rowBgColor, cellTextColor, rowTextColor };
+};
+/**
+ * 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 function globalSearchFilter(data, query) {
+    if (!query.trim())
+        return data;
+    const lowerQuery = query.toLowerCase();
+    return data.filter((item) => Object.values(item).some((val) => {
+        if (val === null ||
+            val === undefined ||
+            typeof val === "object" ||
+            typeof val === "function") {
+            return false;
+        }
+        return String(val).toLowerCase().includes(lowerQuery);
+    }));
+}

package/dist/esm/index.js

@@ -0,0 +1,137 @@
+// import "./bootstrap";
+import Accordian from "./Components/Accordion/Accordion.js";
+import AlertDialog from "./Components/AlertDialog/AlertDialog.js";
+import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart.js";
+import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart.js";
+import ApexPolarChart from "./Components/Apexcharts/ApexPolarCharts/ApexPolarCharts.js";
+import ApexAreaChart from "./Components/Apexcharts/ApexAreaChart/ApexAreaChart.js";
+import ApexRadialChart from "./Components/Apexcharts/ApexRadialChart/ApexRadialChart.js";
+import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs.js";
+import Button from "./Components/Button/Button.js";
+import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon.js";
+import Card from "./Components/Card/Card.js";
+import Checkbox from "./Components/Checkbox/Checkbox.js";
+import ContactForm from "./Components/ContactForm/ContactForm.js";
+// import DatePicker from "./Components/DatePicker/DatePicker.js";
+import Drawer, { DrawerHeader, DrawerBody, DrawerFooter, } from "./Components/Drawer/Drawer.js";
+import Dropdown from "./Components/Dropdown/DropDown.js";
+import Editor from "./Components/Editor/Editor.js";
+import FileUpload from "./Components/FileUpload/FileUpload.js";
+import FileUploader from "./Components/FileUploader/FileUploader.js";
+import FormWrapper from "./Components/Form/FormWrapper.js";
+import Header from "./Components/Header/Header.js";
+import HeaderActions from "./Components/Header/HeaderActions.js";
+import InputTextArea from "./Components/InputTextArea/InputTextArea.js";
+import KanbanBoard from "./Components/KanbanBoard/KanbanBoard.js";
+import Loading from "./Components/Loading/Loading.js";
+import Modal, { ModalHeader, ModalBody, ModalFooter, } from "./Components/Modal/Modal.js";
+import MultiSelect from "./Components/MultiSelect/MultiSelect.js";
+import NavigationBar from "./Components/NavigationBar/NavigationBar.js";
+import NoteTextArea from "./Components/NoteTextArea/NoteTextArea.js";
+import NumberInput from "./Components/NumberInput/NumberInput.js";
+import PinInput from "./Components/PinInput/PinInput.js";
+import ProfileCard, { ProfileCardHeader, ProfileCardBody, ProfileCardFooter, } from "./Components/ProfileCard/ProfileCard.js";
+import ProfilePhotoViewer from "./Components/ProfilePhotoViewer/ProfilePhotoViewer.js";
+import ProgressBar from "./Components/ProgressBar/ProgressBar.js";
+import { RadioButton, RadioButtonGroup, } from "./Components/RadioButton/RadioButton.js";
+import Reorder from "./Components/Reorder/Reorder.js";
+import Search from "./Components/Search/Search.js";
+import Select from "./Components/Select/Select.js";
+import SelectV2 from "./Components/SelectV2/SelectV2.js";
+import SearchSelect from "./Components/SearchSelect/SearchSelect.js";
+import SelectSearch from "./Components/SelectSearch/SelectSearch.js";
+import SideBar from "./Components/SideBar/SideBar.js";
+import Slider from "./Components/Slider/Slider.js";
+import Skeletons from "./Components/Skeletons/Skeletons.js";
+import Switch from "./Components/Switch/Switch.js";
+import Table from "./Components/Table/Table.js";
+import Tag from "./Components/Tag/Tag.js";
+import TextInput from "./Components/Input/TextInput.js";
+import Timeline from "./Components/Timeline/Timeline.js";
+import Toaster, { useToaster } from "./Components/Toaster/Toaster.js";
+import ToolTip from "./Components/ToolTip/ToolTip.js";
+import OverflowToolTip from "./Components/ToolTip/OverflowToolTip.js";
+import VerifyEmailOtp from "./Components/EmailCards/VerifyEmailOtp/VerifyEmailOtp.js";
+import TableToggle from "./Components/Toggle/TableToggle.js";
+import withTheme from "./withTheme.js";
+import { useCustomTheme } from "./Theme/useCustomTheme.js";
+import { useSidebarPrefs } from "./Hooks/useSidebarPrefs.js";
+import { useIsTruncated } from "./Hooks/useIsTruncated.js";
+import { ThemesList } from "./Theme/index.js";
+import { debounce } from "./Utils/table.js";
+// Cross-app Account handoff — shared deep-link contract so apps stop copy-pasting it.
+import { isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, } from "./Utils/accountHandoff.js";
+import ProductCard from "./Components/ProductCard/ProductCard.js";
+import ProductDetails from "./Components/ProductDetails/ProductDetails.js";
+import PhoneNumberInput from "./Components/Input/PhoneNumberInput.js";
+import { InputSwitch } from "./Components/Input/Switch/InputSwitch.js";
+import PaymentCard from "./Components/Card/PaymentCard/PaymentCard.js";
+import ApexLineChart from "./Components/Apexcharts/ApexLineChart/ApexLineChart.js";
+import Notification from "./Components/Notification/Notification.js";
+import DatePicker from "./Components/DatePicker/ThemeDatePicker.js";
+import FilterSidebar from "./Components/FilterSidebar/FilterSidebar.js";
+import EmptyState from "./Components/EmptyState/EmptyState.js";
+import WorkspaceWindow, { WorkspaceTray, } from "./Components/WorkspaceWindow/WorkspaceWindow.js";
+import WorkspaceTrayPreview from "./Components/WorkspaceWindow/WorkspaceTrayPreview.js";
+import MoreItems from "./Components/MoreItems/MoreItems.js";
+import ScrollToTop from "./Components/ScrollToTop/ScrollToTop.js";
+import CopyButton from "./Components/CopyButton/CopyButton.js";
+import FieldSelectModal from "./Components/FieldSelectModal/FieldSelectModal.js";
+import PdfViewer from "./Components/PdfViewer/PdfViewer.js";
+import LazyWrapper from "./Components/LazyWrapper/LazyWrapper.js";
+import FilePreview, { FilePreviewTrigger, } from "./Components/FilePreview/FilePreview.js";
+import StageProgress from "./Components/StageProgress/StageProgress.js";
+import StageItem from "./Components/StageProgress/StageItem.js";
+import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher.js";
+import UpgradeButton from "./Components/UpgradeButton/UpgradeButton.js";
+import PlanPill from "./Components/PlanPill/PlanPill.js";
+import PlanBadge from "./Components/PlanBadge/PlanBadge.js";
+import LimitReachedModal from "./Components/LimitReachedModal/LimitReachedModal.js";
+import { formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, splitMonthsAndDays, } from "./Utils/planExpiry.js";
+import { resolvePlanBadge } from "./Utils/planBadge.js";
+import UserDetails from "./Components/UserDetails/UserDetails.js";
+import RolesPermission from "./Components/RolesPermission/RolesPermission.js";
+import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable.js";
+import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable.js";
+import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails.js";
+export { 
+// components
+Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, ApexAreaChart, ApexRadialChart, Breadcrumbs, Button, ButtonGroupIcon, Card, Checkbox, ContactForm, DatePicker, Drawer, DrawerHeader, DrawerBody, DrawerFooter, Dropdown, Editor, EmptyState, WorkspaceWindow, WorkspaceTray, WorkspaceTrayPreview, FieldSelectModal, FilePreview, FilePreviewTrigger, FileUpload, FileUploader, FilterSidebar, FormWrapper, LazyWrapper, MoreItems, PdfViewer, ScrollToTop, CopyButton, StageProgress, StageItem, OrgSwitcher, LimitReachedModal, UpgradeButton, PlanPill, PlanBadge, formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, resolvePlanBadge, splitMonthsAndDays, UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, Header, HeaderActions, InputTextArea, InputSwitch, KanbanBoard, Loading, Modal, ModalHeader, ModalBody, ModalFooter, NavigationBar, Notification, NoteTextArea, MultiSelect, NumberInput, PaymentCard, PhoneNumberInput, PinInput, ProductCard, ProductDetails, ProfileCard, ProfileCardHeader, ProfileCardBody, ProfileCardFooter, ProfilePhotoViewer, ProgressBar, RadioButton, RadioButtonGroup, Reorder, Search, Select, SelectV2, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, 
+// hooks
+useSidebarPrefs, useIsTruncated, 
+// themes
+useCustomTheme, ThemesList, 
+// functions
+debounce, 
+// account handoff
+isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
+export default withTheme;
+// ---------------------------------------------------------------------------
+// Theme switching (added in 2.4.0) — additive only.
+//
+// Opt-in: `withTheme` is unchanged and stays light-only, so existing apps render
+// exactly as before. Wrap an app in `PixelizeThemeProvider` to get light/dark/system.
+// ---------------------------------------------------------------------------
+export { PixelizeThemeProvider, useThemeMode, ThemeSwitcher, DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./Theme/provider/index.js";
+export { AppearanceSettings } from "./Components/AppearanceSettings/AppearanceSettings.js";
+/** Light + dark Chakra theme per brand. `ThemesList` remains the light-only list. */
+export { brandThemes } from "./Theme/index.js";
+// Pure, platform-agnostic tokens — also consumed by the Pixelize mobile design library.
+export { lightPalettes, darkPalettes, palettes, themeNames, } from "./Theme/tokens/brands/index.js";
+export { buildDarkPalette } from "./Theme/tokens/builders/buildDarkPalette.js";
+// Contrast-resolved recipes for the two surfaces apps kept hand-rolling (and failing AA on):
+// status chips and generated avatars. Consumers pass a scale/seed and get tokens that already
+// clear the bar, instead of pinning hexes that go stale when a palette moves.
+export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/builders/outlineRung.js";
+export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveStatusTone, } from "./Theme/tokens/builders/statusTone.js";
+// WCAG contrast + accent-picking helpers this library uses internally to keep text readable
+// against any canvas/fill a palette produces. Pure and dependency-free — consumers building
+// custom components against `ColorScale`/`PaletteProps` tokens can reuse the same logic instead
+// of re-deriving contrast math themselves.
+export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient.js";
+export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText.js";
+// Pure color math backing the helpers above (and `buildDarkPalette`) — no Chakra/React/DOM
+// dependency, safe for the mobile port. `relativeLuminance`/`contrastRatio` are the WCAG 2.1
+// primitives; `compositeOver` flattens a translucent color onto a backdrop first (an alpha
+// color has no defined luminance on its own, so measure the composited result, not the tint).
+export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color.js";

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/fonts.web.js"
+  ]
+}

package/dist/esm/services/feedback.js

@@ -0,0 +1,15 @@
+export async function submitFeedback(options) {
+    const { endpoint, payload, headers } = options;
+    const res = await fetch(endpoint, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            ...(headers !== null && headers !== void 0 ? headers : {}),
+        },
+        body: JSON.stringify(payload),
+    });
+    if (!res.ok) {
+        const text = await res.text().catch(() => "");
+        throw new Error(`Feedback submit failed: ${res.status} ${text}`);
+    }
+}

package/dist/esm/withTheme.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChakraProvider, ColorModeScript } from "@chakra-ui/react";
+import { lavender } from "./Theme/index.js"; // Import your custom theme
+import ToasterProvider from "./Components/Toaster/Toaster.js";
+const withTheme = (Component, theme) => {
+    const customTheme = theme !== null && theme !== void 0 ? theme : lavender;
+    return (props) => (_jsx(ChakraProvider, { theme: customTheme, children: _jsxs(ToasterProvider, { children: [_jsx(ColorModeScript, { initialColorMode: customTheme.config.initialColorMode }), _jsx(Component, { ...props })] }) }));
+};
+export default withTheme;