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

package/dist/index.d.ts

@@ -3,6 +3,8 @@ import AlertDialog from "./Components/AlertDialog/AlertDialog";
 import ApexBarChart from "./Components/Apexcharts/ApexBarChart/ApexBarChart";
 import ApexPieChart from "./Components/Apexcharts/ApexPieChart/ApexPieChart";
 import ApexPolarChart from "./Components/Apexcharts/ApexPolarCharts/ApexPolarCharts";
+import ApexAreaChart from "./Components/Apexcharts/ApexAreaChart/ApexAreaChart";
+import ApexRadialChart from "./Components/Apexcharts/ApexRadialChart/ApexRadialChart";
 import Breadcrumbs from "./Components/Breadcrumbs/Breadcrumbs";
 import Button from "./Components/Button/Button";
 import ButtonGroupIcon from "./Components/ButtonGroupIcon/ButtonGroupIcon";
@@ -33,6 +35,7 @@ import { RadioButton, RadioButtonGroup } from "./Components/RadioButton/RadioBut
 import Reorder from "./Components/Reorder/Reorder";
 import Search from "./Components/Search/Search";
 import Select from "./Components/Select/Select";
+import SelectV2 from "./Components/SelectV2/SelectV2";
 import SearchSelect from "./Components/SearchSelect/SearchSelect";
 import SelectSearch from "./Components/SelectSearch/SelectSearch";
 import SideBar from "./Components/SideBar/SideBar";
@@ -54,6 +57,7 @@ import { useSidebarPrefs } from "./Hooks/useSidebarPrefs";
 import { useIsTruncated } from "./Hooks/useIsTruncated";
 import { ThemesList } from "./Theme";
 import { debounce } from "./Utils/table";
+import { isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff } from "./Utils/accountHandoff";
 import ProductCard from "./Components/ProductCard/ProductCard";
 import ProductDetails from "./Components/ProductDetails/ProductDetails";
 import PhoneNumberInput from "./Components/Input/PhoneNumberInput";
@@ -77,12 +81,17 @@ import StageProgress from "./Components/StageProgress/StageProgress";
 import StageItem from "./Components/StageProgress/StageItem";
 import OrgSwitcher from "./Components/OrgSwitcher/OrgSwitcher";
 import UpgradeButton from "./Components/UpgradeButton/UpgradeButton";
+import PlanPill from "./Components/PlanPill/PlanPill";
+import PlanBadge from "./Components/PlanBadge/PlanBadge";
+import LimitReachedModal from "./Components/LimitReachedModal/LimitReachedModal";
+import { formatPlanElapsed, formatPlanExpiry, formatPlanRemaining, splitMonthsAndDays } from "./Utils/planExpiry";
+import { resolvePlanBadge } from "./Utils/planBadge";
 import UserDetails from "./Components/UserDetails/UserDetails";
 import RolesPermission from "./Components/RolesPermission/RolesPermission";
 import CustomModulesTable from "./Components/CustomModulesTable/CustomModulesTable";
 import SignInActivityTable from "./Components/SignInActivityTable/SignInActivityTable";
 import OrganizationDetails from "./Components/OrganizationDetails/OrganizationDetails";
-export { Accordian, AlertDialog, ApexBarChart, ApexPieChart, ApexPolarChart, ApexLineChart, 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, UpgradeButton, 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, SearchSelect, SelectSearch, SideBar, Slider, Skeletons, Switch, Table, TableToggle, Tag, TextInput, Timeline, Toaster, ToolTip, OverflowToolTip, useToaster, VerifyEmailOtp, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, };
+export { 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, useSidebarPrefs, useIsTruncated, useCustomTheme, ThemesList, debounce, isAllowedReturnUrl, resolveReturnUrl, createAccountHandoff, };
 export default withTheme;
 export type { UserDetailsProps, UserDetailsLabels, UserListItem, SelectedUserDetail, UserDetailRow, RoleOption, AddUserFormValues, ChangeRoleSubmitPayload, } from "./Components/UserDetails/UserDetailsProps";
 export type { WorkspaceWindowProps, WorkspaceWindowState, WorkspaceTrayProps, WorkspaceTrayItem, WorkspaceTrayPreviewProps, } from "./Components/WorkspaceWindow/WorkspaceWindowProps";
@@ -91,14 +100,59 @@ export type { CustomModulesTableProps, CustomModulesTableLabels, ModuleItem, Upd
 export type { SignInActivityTableProps, SignInActivityLabels, SignInDevice, } from "./Components/SignInActivityTable/SignInActivityTableProps";
 export type { OrganizationDetailsProps, OrganizationDetailsLabels, OrganizationItem, CreateOrgFormValues, } from "./Components/OrganizationDetails/OrganizationDetailsProps";
 export type { SidebarPrefs, UseSidebarPrefsOptions, UseSidebarPrefsResult, } from "./Hooks/useSidebarPrefs";
-export { PixelizeThemeProvider, useThemeMode, ThemeSwitcher, } from "./Theme/provider";
-export type { PixelizeThemeProviderProps, ThemeModeContextValue, ThemeSwitcherProps, } from "./Theme/provider";
+export { PixelizeThemeProvider, useThemeMode, ThemeSwitcher, DEFAULT_FONT_SIZE, FONT_SIZE_OPTIONS, isFontSize, resolveFontSize, useFontSizeSync, } from "./Theme/provider";
+export type { PixelizeThemeProviderProps, ThemeModeContextValue, ThemeSwitcherProps, FontSizeOption, } from "./Theme/provider";
+export { AppearanceSettings } from "./Components/AppearanceSettings/AppearanceSettings";
+export type { AppearanceSettingsProps, AppearanceSettingsLabels, } from "./Components/AppearanceSettings/AppearanceSettingsProps";
 /** Light + dark Chakra theme per brand. `ThemesList` remains the light-only list. */
 export { brandThemes } from "./Theme";
 export { lightPalettes, darkPalettes, palettes, themeNames, } from "./Theme/tokens/brands";
 export { buildDarkPalette } from "./Theme/tokens/builders/buildDarkPalette";
+export { AA_NON_TEXT, liftToContrast, withOutlineRung, } from "./Theme/tokens/builders/outlineRung";
+export { AVATAR_SEEDS, avatarFillFor, meetsBodyText, resolveAvatarFill, resolveStatusTone, } from "./Theme/tokens/builders/statusTone";
+export type { StatusTone } from "./Theme/tokens/builders/statusTone";
 export type { ColorMode, ResolvedColorMode, ThemeName, PaletteProps, ColorScale, BrandScale, SemanticColors, NamedSurfaces, } from "./Theme/tokens/types";
+export { statusGradient, inkSafeGradient, chipFill, chipBorder, ACCENT_GRADIENT, STATUS_INK, } from "./Components/PlanPill/planPillGradient";
 export { isDarkCanvas, onFilled, onGradient, accentTextOnCanvas, pickAccentText, AA_NORMAL_TEXT, DARK_CANVAS_LUMINANCE, } from "./Theme/tokens/builders/accentText";
 export { hexToRgb, hexToRgba, compositeOver, rgbToHex, rgbToHsl, hslToRgb, hexToHsl, hslToHex, withLightness, mix, relativeLuminance, contrastRatio, } from "./Theme/tokens/builders/color";
 export type { Rgb, Hsl } from "./Theme/tokens/builders/color";
-//# sourceMappingURL=index.d.ts.map
+export type { SelectV2Props, SelectV2Size, OptionProp as SelectV2Option } from "./Components/SelectV2/SelectV2Props";
+export type { PlanPillProps, PlanPillTone } from "./Components/PlanPill/PlanPillProps";
+export type { PlanBadgeProps } from "./Components/PlanBadge/PlanBadgeProps";
+export type { PlanBadgeInput, PlanBadgeResult } from "./Utils/planBadge";
+export type { PlanExpiryInput } from "./Utils/planExpiry";
+export type { LimitReachedModalProps, LimitKind, } from "./Components/LimitReachedModal/LimitReachedModalProps";
+export type { AccountHandoffConfig, AccountHandoff, AccountHandoffLinkOptions, AccountHandoffUsersOptions, ResolveReturnUrlOptions, } from "./Utils/accountHandoff";
+export type { TableProps, TableHeaderProps, TableColumnType, TableDensity, TableEmptyState, TableRenderGroup, HeaderActionsProps, ColumnSortingProps, ExportOption, DataObject, FilterValues, } from "./Components/Table/TableProps";
+export type { ButtonProps } from "./Components/Button/ButtonProps";
+export type { CardProps } from "./Components/Card/CardProps";
+export type { ProfileCardProps, ProfileCardVariant, ProfileCardVariantLegacy, } from "./Components/ProfileCard/ProfileCardProps";
+export type { ChakraModelProps as ModalProps } from "./Components/Modal/ModalProps";
+export type { DrawerProps } from "./Components/Drawer/DrawerProps";
+export type { AlertDialogsProps } from "./Components/AlertDialog/AlertDialogProps";
+export type { chakraSelectProps as SelectProps, OptionProp as SelectOption, } from "./Components/Select/SelectProps";
+export type { SearchSelectProps, Options as SearchSelectOption } from "./Components/SearchSelect/SearchSelectProps";
+export type { MultiSelectProps, MultiSelctOPtions as MultiSelectOption } from "./Components/MultiSelect/MultiSelectProps";
+export type { SearchProps } from "./Components/Search/SearchProps";
+export type { DatePickerProps, TimePickerProps, SingleDatePickerProps, RangeDatePickerProps, RangeDate, PickerType, } from "./Components/DatePicker/DatePickerProps";
+export type { TextInputProps } from "./Components/Input/TextInputProps";
+export type { InputTextAreaProps } from "./Components/InputTextArea/InputTextAreaProps";
+export type { NumberInputProps, ActiveStyle as NumberInputActiveStyle } from "./Components/NumberInput/NumberInputProps";
+export type { CheckboxProps } from "./Components/Checkbox/CheckboxProps";
+export type { SwitchProps } from "./Components/Switch/SwitchProps";
+export type { ChakraRadioProps as RadioButtonProps, ChakraRadioGroupProps as RadioButtonGroupProps } from "./Components/RadioButton/RadioButtonProps";
+export type { ChakraPinInputProps as PinInputProps } from "./Components/PinInput/PinInputProps";
+export type { TagProps, TagSize, TagVariant, TagColorScheme } from "./Components/Tag/TagProps";
+export type { ToolTipProps } from "./Components/ToolTip/ToolTipProps";
+export type { EmptyStateProps, EmptyStateSize, EmptyStateColorScheme } from "./Components/EmptyState/EmptyStateProps";
+export type { LoadingProps } from "./Components/Loading/LoadingProps";
+export type { SkeletonProps } from "./Components/Skeletons/SkeletonProps";
+export type { ProgressBarProps } from "./Components/ProgressBar/ProgressBarProps";
+export type { ToasterToastProps } from "./Components/Toaster/ToasterProps";
+export type { BreadcrumbsProps, BreadcrumbItem } from "./Components/Breadcrumbs/BreadcrumbsProps";
+export type { TimelineProps, TimelineEvent, TimelineEvents, TimelineNote, TimelineNoteAttachment, } from "./Components/Timeline/TimelineProps";
+export type { Stage, StageProgressProps, StageItemProps, StageSize, StageState, StageVariant, StageColorScheme, } from "./Components/StageProgress/StageProgressProps";
+export type { FileUploaderProps, MimeExtension } from "./Components/FileUpload/FileUploadProps";
+export type { SidebarProps, SidebarUser, SecondaryBarProps, OtherAppsProps, MenuProps as SidebarMenuProps, } from "./Components/SideBar/SideBarProps";
+export type { NavbarProps, MenuProps as NavbarMenuProps } from "./Components/NavigationBar/NavigationBarProps";
+export type { HeaderProps } from "./Components/Header/HeaderProps";

package/dist/index.js

@@ -37,9 +37,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = exports.UserDetails = exports.UpgradeButton = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
-exports.brandThemes = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = void 0;
-exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = void 0;
+exports.UserDetails = exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.OrgSwitcher = exports.StageItem = exports.StageProgress = exports.CopyButton = exports.ScrollToTop = exports.PdfViewer = exports.MoreItems = exports.LazyWrapper = exports.FormWrapper = exports.FilterSidebar = exports.FileUploader = exports.FileUpload = exports.FilePreviewTrigger = exports.FilePreview = exports.FieldSelectModal = exports.WorkspaceTrayPreview = exports.WorkspaceTray = exports.WorkspaceWindow = exports.EmptyState = exports.Editor = exports.Dropdown = exports.DrawerFooter = exports.DrawerBody = exports.DrawerHeader = exports.Drawer = exports.DatePicker = exports.ContactForm = exports.Checkbox = exports.Card = exports.ButtonGroupIcon = exports.Button = exports.Breadcrumbs = exports.ApexRadialChart = exports.ApexAreaChart = exports.ApexLineChart = exports.ApexPolarChart = exports.ApexPieChart = exports.ApexBarChart = exports.AlertDialog = exports.Accordian = void 0;
+exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.Slider = exports.SideBar = exports.SelectSearch = exports.SearchSelect = exports.SelectV2 = exports.Select = exports.Search = exports.Reorder = exports.RadioButtonGroup = exports.RadioButton = exports.ProgressBar = exports.ProfilePhotoViewer = exports.ProfileCardFooter = exports.ProfileCardBody = exports.ProfileCardHeader = exports.ProfileCard = exports.ProductDetails = exports.ProductCard = exports.PinInput = exports.PhoneNumberInput = exports.PaymentCard = exports.NumberInput = exports.MultiSelect = exports.NoteTextArea = exports.Notification = exports.NavigationBar = exports.ModalFooter = exports.ModalBody = exports.ModalHeader = exports.Modal = exports.Loading = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = void 0;
+exports.rgbToHex = exports.compositeOver = exports.hexToRgba = exports.hexToRgb = exports.DARK_CANVAS_LUMINANCE = exports.AA_NORMAL_TEXT = exports.pickAccentText = exports.accentTextOnCanvas = exports.onGradient = exports.onFilled = exports.isDarkCanvas = exports.STATUS_INK = exports.ACCENT_GRADIENT = exports.chipBorder = exports.chipFill = exports.inkSafeGradient = exports.statusGradient = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.withOutlineRung = exports.liftToContrast = exports.AA_NON_TEXT = exports.buildDarkPalette = exports.themeNames = exports.palettes = exports.darkPalettes = exports.lightPalettes = exports.brandThemes = exports.AppearanceSettings = exports.useFontSizeSync = exports.resolveFontSize = exports.isFontSize = exports.FONT_SIZE_OPTIONS = exports.DEFAULT_FONT_SIZE = exports.ThemeSwitcher = exports.useThemeMode = exports.PixelizeThemeProvider = exports.createAccountHandoff = exports.resolveReturnUrl = exports.isAllowedReturnUrl = exports.debounce = exports.ThemesList = exports.useCustomTheme = exports.useIsTruncated = exports.useSidebarPrefs = exports.VerifyEmailOtp = exports.useToaster = void 0;
+exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordian = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -50,6 +51,10 @@ const ApexPieChart_1 = __importDefault(require("./Components/Apexcharts/ApexPieC
 exports.ApexPieChart = ApexPieChart_1.default;
 const ApexPolarCharts_1 = __importDefault(require("./Components/Apexcharts/ApexPolarCharts/ApexPolarCharts"));
 exports.ApexPolarChart = ApexPolarCharts_1.default;
+const ApexAreaChart_1 = __importDefault(require("./Components/Apexcharts/ApexAreaChart/ApexAreaChart"));
+exports.ApexAreaChart = ApexAreaChart_1.default;
+const ApexRadialChart_1 = __importDefault(require("./Components/Apexcharts/ApexRadialChart/ApexRadialChart"));
+exports.ApexRadialChart = ApexRadialChart_1.default;
 const Breadcrumbs_1 = __importDefault(require("./Components/Breadcrumbs/Breadcrumbs"));
 exports.Breadcrumbs = Breadcrumbs_1.default;
 const Button_1 = __importDefault(require("./Components/Button/Button"));
@@ -121,6 +126,8 @@ const Search_1 = __importDefault(require("./Components/Search/Search"));
 exports.Search = Search_1.default;
 const Select_1 = __importDefault(require("./Components/Select/Select"));
 exports.Select = Select_1.default;
+const SelectV2_1 = __importDefault(require("./Components/SelectV2/SelectV2"));
+exports.SelectV2 = SelectV2_1.default;
 const SearchSelect_1 = __importDefault(require("./Components/SearchSelect/SearchSelect"));
 exports.SearchSelect = SearchSelect_1.default;
 const SelectSearch_1 = __importDefault(require("./Components/SelectSearch/SelectSearch"));
@@ -163,6 +170,11 @@ const Theme_1 = require("./Theme");
 Object.defineProperty(exports, "ThemesList", { enumerable: true, get: function () { return Theme_1.ThemesList; } });
 const table_1 = require("./Utils/table");
 Object.defineProperty(exports, "debounce", { enumerable: true, get: function () { return table_1.debounce; } });
+// Cross-app Account handoff — shared deep-link contract so apps stop copy-pasting it.
+const accountHandoff_1 = require("./Utils/accountHandoff");
+Object.defineProperty(exports, "isAllowedReturnUrl", { enumerable: true, get: function () { return accountHandoff_1.isAllowedReturnUrl; } });
+Object.defineProperty(exports, "resolveReturnUrl", { enumerable: true, get: function () { return accountHandoff_1.resolveReturnUrl; } });
+Object.defineProperty(exports, "createAccountHandoff", { enumerable: true, get: function () { return accountHandoff_1.createAccountHandoff; } });
 const ProductCard_1 = __importDefault(require("./Components/ProductCard/ProductCard"));
 exports.ProductCard = ProductCard_1.default;
 const ProductDetails_1 = __importDefault(require("./Components/ProductDetails/ProductDetails"));
@@ -211,6 +223,19 @@ const OrgSwitcher_1 = __importDefault(require("./Components/OrgSwitcher/OrgSwitc
 exports.OrgSwitcher = OrgSwitcher_1.default;
 const UpgradeButton_1 = __importDefault(require("./Components/UpgradeButton/UpgradeButton"));
 exports.UpgradeButton = UpgradeButton_1.default;
+const PlanPill_1 = __importDefault(require("./Components/PlanPill/PlanPill"));
+exports.PlanPill = PlanPill_1.default;
+const PlanBadge_1 = __importDefault(require("./Components/PlanBadge/PlanBadge"));
+exports.PlanBadge = PlanBadge_1.default;
+const LimitReachedModal_1 = __importDefault(require("./Components/LimitReachedModal/LimitReachedModal"));
+exports.LimitReachedModal = LimitReachedModal_1.default;
+const planExpiry_1 = require("./Utils/planExpiry");
+Object.defineProperty(exports, "formatPlanElapsed", { enumerable: true, get: function () { return planExpiry_1.formatPlanElapsed; } });
+Object.defineProperty(exports, "formatPlanExpiry", { enumerable: true, get: function () { return planExpiry_1.formatPlanExpiry; } });
+Object.defineProperty(exports, "formatPlanRemaining", { enumerable: true, get: function () { return planExpiry_1.formatPlanRemaining; } });
+Object.defineProperty(exports, "splitMonthsAndDays", { enumerable: true, get: function () { return planExpiry_1.splitMonthsAndDays; } });
+const planBadge_1 = require("./Utils/planBadge");
+Object.defineProperty(exports, "resolvePlanBadge", { enumerable: true, get: function () { return planBadge_1.resolvePlanBadge; } });
 const UserDetails_1 = __importDefault(require("./Components/UserDetails/UserDetails"));
 exports.UserDetails = UserDetails_1.default;
 const RolesPermission_1 = __importDefault(require("./Components/RolesPermission/RolesPermission"));
@@ -232,6 +257,13 @@ var provider_1 = require("./Theme/provider");
 Object.defineProperty(exports, "PixelizeThemeProvider", { enumerable: true, get: function () { return provider_1.PixelizeThemeProvider; } });
 Object.defineProperty(exports, "useThemeMode", { enumerable: true, get: function () { return provider_1.useThemeMode; } });
 Object.defineProperty(exports, "ThemeSwitcher", { enumerable: true, get: function () { return provider_1.ThemeSwitcher; } });
+Object.defineProperty(exports, "DEFAULT_FONT_SIZE", { enumerable: true, get: function () { return provider_1.DEFAULT_FONT_SIZE; } });
+Object.defineProperty(exports, "FONT_SIZE_OPTIONS", { enumerable: true, get: function () { return provider_1.FONT_SIZE_OPTIONS; } });
+Object.defineProperty(exports, "isFontSize", { enumerable: true, get: function () { return provider_1.isFontSize; } });
+Object.defineProperty(exports, "resolveFontSize", { enumerable: true, get: function () { return provider_1.resolveFontSize; } });
+Object.defineProperty(exports, "useFontSizeSync", { enumerable: true, get: function () { return provider_1.useFontSizeSync; } });
+var AppearanceSettings_1 = require("./Components/AppearanceSettings/AppearanceSettings");
+Object.defineProperty(exports, "AppearanceSettings", { enumerable: true, get: function () { return AppearanceSettings_1.AppearanceSettings; } });
 /** Light + dark Chakra theme per brand. `ThemesList` remains the light-only list. */
 var Theme_2 = require("./Theme");
 Object.defineProperty(exports, "brandThemes", { enumerable: true, get: function () { return Theme_2.brandThemes; } });
@@ -243,10 +275,30 @@ Object.defineProperty(exports, "palettes", { enumerable: true, get: function ()
 Object.defineProperty(exports, "themeNames", { enumerable: true, get: function () { return brands_1.themeNames; } });
 var buildDarkPalette_1 = require("./Theme/tokens/builders/buildDarkPalette");
 Object.defineProperty(exports, "buildDarkPalette", { enumerable: true, get: function () { return buildDarkPalette_1.buildDarkPalette; } });
+// 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.
+var outlineRung_1 = require("./Theme/tokens/builders/outlineRung");
+Object.defineProperty(exports, "AA_NON_TEXT", { enumerable: true, get: function () { return outlineRung_1.AA_NON_TEXT; } });
+Object.defineProperty(exports, "liftToContrast", { enumerable: true, get: function () { return outlineRung_1.liftToContrast; } });
+Object.defineProperty(exports, "withOutlineRung", { enumerable: true, get: function () { return outlineRung_1.withOutlineRung; } });
+var statusTone_1 = require("./Theme/tokens/builders/statusTone");
+Object.defineProperty(exports, "AVATAR_SEEDS", { enumerable: true, get: function () { return statusTone_1.AVATAR_SEEDS; } });
+Object.defineProperty(exports, "avatarFillFor", { enumerable: true, get: function () { return statusTone_1.avatarFillFor; } });
+Object.defineProperty(exports, "meetsBodyText", { enumerable: true, get: function () { return statusTone_1.meetsBodyText; } });
+Object.defineProperty(exports, "resolveAvatarFill", { enumerable: true, get: function () { return statusTone_1.resolveAvatarFill; } });
+Object.defineProperty(exports, "resolveStatusTone", { enumerable: true, get: function () { return statusTone_1.resolveStatusTone; } });
 // 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.
+var planPillGradient_1 = require("./Components/PlanPill/planPillGradient");
+Object.defineProperty(exports, "statusGradient", { enumerable: true, get: function () { return planPillGradient_1.statusGradient; } });
+Object.defineProperty(exports, "inkSafeGradient", { enumerable: true, get: function () { return planPillGradient_1.inkSafeGradient; } });
+Object.defineProperty(exports, "chipFill", { enumerable: true, get: function () { return planPillGradient_1.chipFill; } });
+Object.defineProperty(exports, "chipBorder", { enumerable: true, get: function () { return planPillGradient_1.chipBorder; } });
+Object.defineProperty(exports, "ACCENT_GRADIENT", { enumerable: true, get: function () { return planPillGradient_1.ACCENT_GRADIENT; } });
+Object.defineProperty(exports, "STATUS_INK", { enumerable: true, get: function () { return planPillGradient_1.STATUS_INK; } });
 var accentText_1 = require("./Theme/tokens/builders/accentText");
 Object.defineProperty(exports, "isDarkCanvas", { enumerable: true, get: function () { return accentText_1.isDarkCanvas; } });
 Object.defineProperty(exports, "onFilled", { enumerable: true, get: function () { return accentText_1.onFilled; } });

package/dist/services/feedback.d.ts

@@ -10,4 +10,3 @@ export type SubmitFeedbackOptions = {
     headers?: Record<string, string>;
 };
 export declare function submitFeedback(options: SubmitFeedbackOptions): Promise<void>;
-//# sourceMappingURL=feedback.d.ts.map

package/dist/withTheme.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import type { Theme } from "@chakra-ui/theme";
 declare const withTheme: <P extends object>(Component: React.ComponentType<P>, theme?: Theme) => (props: P) => import("react/jsx-runtime").JSX.Element;
 export default withTheme;
-//# sourceMappingURL=withTheme.d.ts.map

package/package.json

@@ -1,23 +1,48 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.1",
+  "version": "2.4.2-beta.1",
+  "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
+  "keywords": [
+    "react",
+    "component-library",
+    "design-system",
+    "chakra-ui",
+    "typescript",
+    "design-tokens",
+    "dark-mode"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pixelize-tech/Micro-Components.git"
+  },
+  "homepage": "https://github.com/pixelize-tech/Micro-Components#readme",
+  "bugs": {
+    "url": "https://github.com/pixelize-tech/Micro-Components/issues"
+  },
+  "engines": {
+    "node": ">=18"
+  },
   "private": false,
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.8",
     "@hello-pangea/dnd": "^18.0.1",
+    "date-fns": "^3.6.0",
     "jodit-react": "^5.2.38",
     "lucide-react": "^0.487.0",
     "react-apexcharts": "^1.4.1",
-    "react-datepicker": "^7.3.0",
     "react-dropzone": "^14.3.8",
     "react-window": "^1.8.11"
   },
   "scripts": {
     "start": "vite",
-    "build": "tsc && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
+    "build": "npm run clean && tsc -p tsconfig.build.json && tsc -p tsconfig.esm.json && node scripts/finalize-esm.mjs dist/esm && copyfiles -u 1 src/**/*.css src/assets/**/* dist/",
     "test": "jest",
     "test:watch": "jest --watch",
     "remove": "rm -rf dist/Pages dist/App.js dist/App.d.ts dist/Layout.js dist/Layout.d.ts dist/bootstrap.js dist/bootstrap.d.ts",
@@ -26,7 +51,8 @@
     "lint": "eslint src",
     "format:check": "prettier --check .",
     "format": "prettier --write .",
-    "test:coverage": "jest --coverage"
+    "test:coverage": "jest --coverage",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
   },
   "jest": {
     "testEnvironment": "jsdom",
@@ -40,7 +66,9 @@
       }
     },
     "setupFilesAfterEnv": [
-      "@testing-library/jest-dom/extend-expect"
+      "<rootDir>/src/testUtils/jest.setup.ts",
+      "@testing-library/jest-dom/extend-expect",
+      "jest-axe/extend-expect"
     ],
     "transform": {
       "^.+\\.(ts|tsx)$": [
@@ -96,6 +124,7 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^27.5.2",
+    "@types/jest-axe": "^3.5.9",
     "@types/leaflet": "^1.9.21",
     "@types/leaflet-routing-machine": "^3.2.9",
     "@types/node": "^20.0.0",
@@ -114,6 +143,7 @@
     "framer-motion": "^10.18.0",
     "globals": "^17.6.0",
     "jest": "^29.7.0",
+    "jest-axe": "^11.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "path": "^0.12.7",
     "postcss": "^8.5.4",
@@ -132,5 +162,9 @@
     "framer-motion": "^10.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
-  }
+  },
+  "sideEffects": [
+    "**/*.css",
+    "**/fonts.web.js"
+  ]
 }

package/.claude/settings.local.json

@@ -1,51 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(git ls-tree *)",
-      "Bash(npx --no-install tsc --noEmit)",
-      "Bash(git fsck *)",
-      "Bash(npx tsc *)",
-      "Bash(curl -s http://localhost:5174/ -o /dev/null -w \"HTTP %{http_code}\\\\n\")",
-      "Bash(curl -s \"http://localhost:5174/src/Components/Table/Components/TableBody.tsx\" -o /dev/null -w \"transform TableBody: HTTP %{http_code}\\\\n\")",
-      "Read(//private/tmp/**)",
-      "Bash(npx jest *)",
-      "Bash(pkill -f \"vite\")",
-      "Bash(grep -rln -E \"import\\\\s+\\\\w+\\\\s*\\(,\\\\s*\\\\{[^}]*\\\\}\\)?\\\\s*from\\\\s+['\\\\\"]pixelize-design-library['\\\\\"]\" src)",
-      "Bash(ps -p 44521 60411 -o pid,command)",
-      "Bash(node -e \"const p=require\\('./package.json'\\); console.log\\(JSON.stringify\\(p.scripts,null,2\\)\\)\")",
-      "Bash(echo \"=== total errors: $\\(npx tsc --noEmit -p tsconfig.json 2>&1)",
-      "Bash(echo \"=== total: $\\(npx tsc --noEmit -p tsconfig.json 2>&1)",
-      "Bash(echo \"exit=$?\")",
-      "Read(//tmp/**)",
-      "Bash(git mv *)",
-      "Bash(git rm *)",
-      "Bash(node -e \"console.log\\(require\\('@emotion/react/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('jodit-react', require\\('jodit-react/package.json'\\).version\\); try{console.log\\('jodit', require\\('jodit/package.json'\\).version\\)}catch\\(e\\){}\")",
-      "Bash(node -e \"console.log\\('playwright', require\\('playwright/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('puppeteer', require\\('puppeteer/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('ws', require\\('ws/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\('node', process.version\\)\")",
-      "Bash(grep -E \"\\\\.tsx?$\")",
-      "Bash(node -e \"console.log\\(require.resolve\\('@chakra-ui/styled-system'\\)\\)\")",
-      "Bash(node -e \"const p=require.resolve\\('@chakra-ui/react'\\);console.log\\(p\\)\")",
-      "Bash(sed -n '31,45p' src/Pages/table.tsx)",
-      "Bash(perl -0pi -e 's/\\\\n\\\\s*content: \\\\\\(\\\\\\) => <>Hello<\\\\/>,?//' src/Pages/table.tsx)",
-      "Bash(cd /Users/mahesh/Applications/Pixelize/CRM/Micro-Components *)",
-      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-design-library/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\(JSON.stringify\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).dependencies\\)\\)\")",
-      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).version\\)\")",
-      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/node_modules/pixelize-design-library/package.json'\\).version\\)\")",
-      "Bash(echo \"tsc exit code: $?\")",
-      "Bash(./node_modules/.bin/tsc --noEmit --skipLibCheck)",
-      "Bash(./node_modules/.bin/tsc --noEmit)",
-      "Bash(echo \"tsc exit: $?\")",
-      "Bash(echo \"local tsc exit: $?\")",
-      "Bash(ls -la src/pages/Tasks/TaskComponent/)",
-      "Bash(wc -l src/pages/Tasks/TaskComponent/*.tsx)"
-    ],
-    "additionalDirectories": [
-      "/private/tmp",
-      "/tmp"
-    ]
-  }
-}

package/.cursor/TASK-SETUP.md

@@ -1,43 +0,0 @@
-# Task pipeline — one-time developer setup
-
-Hooks in this repo work automatically after clone.
-
-## Recommended (global skills + status line)
-
-```bash
-git clone git@github.com:pixelize-tech/pixelize-cursor-setup.git
-cd pixelize-cursor-setup && ./install.sh
-```
-
-Installs all cross-repo `/` skills (`crm-task`, `social-task`, …), status line, and `cli-config.json`. Restart Cursor.
-
-Repo: https://github.com/pixelize-tech/pixelize-cursor-setup
-
-## Manual status line only
-
-1. Copy the script to your user Cursor folder:
-
-   ```bash
-   cp .cursor/pixelize-task-statusline.sh ~/.cursor/pixelize-task-statusline.sh
-   chmod +x ~/.cursor/pixelize-task-statusline.sh
-   ```
-
-2. Add to `~/.cursor/cli-config.json` (merge if the file already exists):
-
-   ```json
-   {
-     "statusLine": {
-       "type": "command",
-       "command": "~/.cursor/pixelize-task-statusline.sh",
-       "padding": 0
-     }
-   }
-   ```
-
-3. Restart Cursor or open a new Agent chat.
-
-## Task skill (feature work)
-
-- Pick **`task`** from the **`/`** menu, then describe your goal.
-- Do **not** type `/task` in the message body — a hook will block it (zero tokens wasted).
-- See repo `CLAUDE.md` for the cross-repo skill name if applicable.

package/.cursor/agents/be-impl.md

@@ -1,37 +0,0 @@
----
-name: be-impl
-description: >-
-  Handles build, exports, and publish pipeline changes. Use in @task phase 2
-  when plan includes index.ts, tsc build, or npm publish steps.
----
-
-You are the lib-impl (build/export) agent for **Pixelize Design Library** (Micro-Components).
-
-Note: This repo has no backend API. This agent covers build pipeline, not crm-service.
-
-## When invoked
-
-1. Read CLAUDE.md and .cursor/rules
-2. Read the plan from .cursor/plans/current.md
-3. Read `.cursor/modules/types-exports/MODULE.md`
-
-## Workflow
-
-1. Work only inside Micro-Components
-2. Update `src/index.ts` exports
-3. Verify `tsconfig.json` and build output in `dist/`
-4. Run `npm run build` to validate
-5. Update MODULE.md if export surface changes
-6. Do not run `npm publish` unless user explicitly requests
-
-## Output
-
-- Done / Blocked lists
-- Files changed
-- Build result (pass/fail)
-
-## Rules
-
-- Never edit `dist/` directly — change `src/` and rebuild
-- Never commit without user confirmation
-- Never break existing exports without noting semver impact

package/.cursor/agents/fe-impl.md

@@ -1,39 +0,0 @@
----
-name: fe-impl
-description: >-
-  Implements component changes from an approved plan. Use in @task phase 2
-  for UI components, theme, and playground pages.
----
-
-You are the fe-impl (component implementation) agent for **Pixelize Design Library** (Micro-Components).
-
-## When invoked
-
-1. Read CLAUDE.md and .cursor/rules
-2. Read the plan from .cursor/plans/current.md — do not replan
-3. Read `.cursor/modules/<domain>/MODULE.md` for every domain you will touch
-4. Read one existing similar component before starting
-
-## Workflow
-
-1. Work only inside Micro-Components
-2. Implement in `src/Components/<Name>/`
-3. Add/update demo in `src/Pages/` if needed for playground
-4. Export from `src/index.ts` for public API
-5. Use Chakra + theme tokens from `src/Theme/` — match existing patterns
-6. Always handle null/undefined, loading, and error states
-7. Update `.cursor/modules/<domain>/MODULE.md` after implementation
-8. Keep changes minimal — no scope creep
-
-## Output
-
-- Done: bullet list of completed tasks
-- Files changed: every file path with one-line description
-- Blocked: anything not completed with exact reason
-- Notes for test-create: what needs Jest coverage
-
-## Rules
-
-- Never add app-specific CRM/API logic to library components
-- Never commit
-- No placeholder files or fake demo data

package/.cursor/agents/task-plan.md

@@ -1,56 +0,0 @@
----
-name: task-plan
-description: >-
-  Creates implementation plans from user goals. Use in @task phase 1, or when
-  a structured plan is needed before coding.
----
-
-You are the task-plan agent for **Pixelize Design Library** (Micro-Components). Produce a concrete actionable plan — do not write code.
-
-## When invoked
-
-1. Read CLAUDE.md and .cursor/rules
-2. Read .cursor/plans/current.md if it exists — user may be resuming
-3. Read `.cursor/modules/<domain>/MODULE.md` for every component domain touched
-4. Ask a question only if the goal is genuinely ambiguous
-5. Output a plan implementation agents can execute without replanning
-
-## Plan format
-
-# [Component / task title]
-
-## Goal
-
-One paragraph
-
-## Type
-
-feat / fix / refactor / chore
-
-## Scope
-
-- In scope: ...
-- Out of scope: ...
-- Agents needed: fe-impl / lib-impl (build-export) / both
-
-## Tasks
-
-### Component (fe-impl)
-
-- [ ] Task with file paths under `src/Components/` and acceptance criteria
-
-### Build / export (lib-impl)
-
-- [ ] index.ts export, build, version bump if publishing
-
-### Tests
-
-- [ ] Jest test files and coverage targets
-
-## Risks / assumptions
-
-## Rules
-
-- Never write production code
-- Save approved plan to .cursor/plans/current.md
-- End with: Ready for implementation — list which agents run next

package/.cursor/agents/test-create.md

@@ -1,31 +0,0 @@
----
-name: test-create
-description: >-
-  Writes Jest tests for completed component work. Use in @task phase 3a
-  after fe-impl, before test-exec.
----
-
-You are the test-create agent for **Pixelize Design Library** (Micro-Components).
-
-## When invoked
-
-1. Read the plan from .cursor/plans/current.md
-2. Read fe-impl output summary
-3. Read existing `*.test.tsx` files to match conventions
-
-## Coverage required
-
-- Happy path render
-- Minimum 2 edge cases (empty, disabled, error props)
-- 1 regression test per bugfix
-
-## Output
-
-- Tests added/updated: file paths and what each covers
-- Run command: `npm test` from Micro-Components root
-
-## Rules
-
-- Never change production code
-- Never commit
-- Follow existing Jest + Testing Library patterns