pixelize-design-library 2.4.2-beta.5 → 2.4.2-beta.50

package/dist/index.js

@@ -33,16 +33,22 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = exports.Tag = exports.TableToggle = exports.Table = exports.Switch = exports.Skeletons = exports.ScrollbarBox = 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.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 = exports.OverflowToolTip = void 0;
-exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.contrastRatio = exports.relativeLuminance = exports.mix = exports.withLightness = exports.hslToHex = exports.hexToHsl = exports.hslToRgb = exports.rgbToHsl = exports.rgbToHex = void 0;
+exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemaining = exports.formatPlanExpiry = exports.formatPlanElapsed = exports.PlanBadge = exports.PlanPill = exports.UpgradeButton = exports.LimitReachedModal = exports.AppSwitcher = 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.Accordion = void 0;
+exports.Tag = exports.TableToggle = exports.Table = exports.SegmentedControl = exports.ToggleSwitch = exports.Switch = exports.Skeletons = exports.ScrollbarBox = 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.KanbanActions = exports.KanbanBoard = exports.InputSwitch = exports.InputTextArea = exports.HeaderActions = exports.Header = exports.OrganizationDetails = exports.SignInActivityTable = exports.CustomModulesTable = exports.RolesPermission = exports.UserDetails = void 0;
+exports.setRef = exports.mergeRefs = exports.resolveStatusTone = exports.resolveAvatarFill = exports.meetsBodyText = exports.avatarFillFor = exports.AVATAR_SEEDS = exports.FOCUS_RING_WIDTH = exports.FOCUS_HALO_WIDTH = exports.FOCUS_VISIBLE_OVER_STATE = exports.focusVisibleStyles = exports.focusVisibleRing = exports.focusRingShadow = exports.withFocusRing = exports.settleBetween = exports.buildFocusRing = exports.listRowBackgrounds = 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 = exports.OverflowToolTip = exports.ToolTip = exports.Toaster = exports.Timeline = exports.TextInput = void 0;
+exports.filterApps = exports.appInitials = exports.describeDayStates = exports.resolveDayStateVisual = exports.isDayStateKey = exports.CALENDAR_DAY_CLASS = exports.DAY_STATE_KEYS = 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.optionRowDescriptionInk = exports.optionRowWeight = exports.optionRowInk = exports.resolveFilledSurface = exports.labelOnFill = exports.darkerFillRung = exports.solidFillRung = 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.labelOnSeries = exports.getDefaultSeriesColors = exports.getCategoricalSeriesColors = exports.chartMode = exports.chartInk = exports.chartAxisLabelColor = exports.CATEGORICAL_SERIES = exports.useDebouncedValue = exports.useDebouncedCallback = exports.toWords = exports.rafThrottle = void 0;
+exports.Spinner = exports.Backdrop = exports.QueryStateBoundary = exports.ErrorState = exports.StatCard = exports.PageHeader = exports.fieldMessageStyles = exports.fieldLabelStyles = exports.controlSizeStyles = exports.fieldControlStyles = exports.FieldMessage = exports.useFieldIds = exports.REDUCED_MOTION_QUERY = exports.reducedMotionSx = exports.usePrefersReducedMotion = exports.OVERLAY_BLUR = exports.overlayScrimStyles = exports.RAISED_OVERLAY = exports.raisedRule = exports.buildSurfaceRaised = exports.tooltipSurface = exports.SCRIM_OPACITY = exports.overlayScrim = exports.resolveSoftTone = exports.toneInk = exports.toneScale = exports.toneToSemantic = exports.toneToColorScheme = exports.isTone = exports.TONES = exports.transitionFor = exports.MOTION_EASE = exports.MOTION_MS = exports.isControlSize = exports.DEFAULT_CONTROL_SIZE = exports.CONTROL_SIZE_NAMES = exports.CONTROL_SIZES = exports.inkSafeGradientToken = exports.gradientCss = exports.resolveGradient = exports.fieldSurfaces = exports.placeholderInkOn = exports.placeholderInk = exports.SCROLLBAR_WIDTH = exports.globalScrollbarStyles = exports.scrollbarStyles = exports.useAppSwitcherShortcut = exports.buildSuiteApps = exports.formatShortcut = exports.matchesShortcut = void 0;
+exports.MediaViewer = exports.RangeSlider = exports.getApiErrorStatus = exports.getApiErrorMessage = exports.defaultValidationMessages = exports.validateYoutubeUrl = exports.validateVideoFile = exports.validateVideoFileType = exports.validateFile = exports.validateFileSize = exports.validateFileType = exports.validatePositiveNumber = exports.validateRequired = exports.validatePassword = exports.validateEmail = exports.EMAIL_REGEX = exports.createEnumLabelResolver = exports.humanize = exports.clearChunkReloadGuard = exports.isChunkLoadError = exports.installPreloadErrorReload = exports.lazyWithRetry = exports.useAnchoredPanelHeight = exports.formatRelativeTime = exports.formatCount = exports.groupConsecutive = exports.sectionizeByDay = exports.NotificationItem = exports.NotificationList = exports.NotificationPanel = exports.NotificationBell = exports.ConfirmDialog = exports.TabPanel = exports.TabPanels = exports.Tab = exports.TabList = exports.Tabs = exports.Accordian = exports.SaveBar = exports.FeedbackForm = exports.PersonChip = exports.initialsFor = exports.avatarScaleKeyFor = exports.resolveAvatarColorway = exports.AvatarGroup = exports.Avatar = exports.SettingsSection = exports.SettingRow = exports.FilterBar = exports.DescriptionList = void 0;
+exports.SEEK_STEP_SECONDS = exports.PLAYBACK_SPEEDS = exports.ZOOM_STEP = exports.MAX_ZOOM = exports.MIN_ZOOM = exports.resolveMediaUrl = exports.fileKind = exports.countMedia = exports.planPreview = exports.buildFileItems = exports.buildMediaItems = exports.MediaStatusPanel = exports.MediaScrubber = exports.defaultMediaAudioPlayerLabels = exports.MediaAudioPlayer = exports.defaultMediaViewerLabels = exports.defaultMediaDocumentStageLabels = exports.MediaDocumentStage = exports.defaultMediaVideoPlayerLabels = exports.MediaVideoPlayer = exports.defaultMediaImageViewerLabels = exports.MediaImageViewer = exports.useFileViewer = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
-exports.Accordian = Accordion_1.default;
+exports.Accordion = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
 exports.AlertDialog = AlertDialog_1.default;
 const ApexBarChart_1 = __importDefault(require("./Components/Apexcharts/ApexBarChart/ApexBarChart"));
@@ -91,6 +97,8 @@ const InputTextArea_1 = __importDefault(require("./Components/InputTextArea/Inpu
 exports.InputTextArea = InputTextArea_1.default;
 const KanbanBoard_1 = __importDefault(require("./Components/KanbanBoard/KanbanBoard"));
 exports.KanbanBoard = KanbanBoard_1.default;
+const KanbanActions_1 = __importDefault(require("./Components/KanbanBoard/KanbanActions/KanbanActions"));
+exports.KanbanActions = KanbanActions_1.default;
 const Loading_1 = __importDefault(require("./Components/Loading/Loading"));
 exports.Loading = Loading_1.default;
 const Modal_1 = __importStar(require("./Components/Modal/Modal"));
@@ -142,6 +150,10 @@ const Skeletons_1 = __importDefault(require("./Components/Skeletons/Skeletons"))
 exports.Skeletons = Skeletons_1.default;
 const Switch_1 = __importDefault(require("./Components/Switch/Switch"));
 exports.Switch = Switch_1.default;
+const ToggleSwitch_1 = __importDefault(require("./Components/ToggleSwitch/ToggleSwitch"));
+exports.ToggleSwitch = ToggleSwitch_1.default;
+const SegmentedControl_1 = __importDefault(require("./Components/SegmentedControl/SegmentedControl"));
+exports.SegmentedControl = SegmentedControl_1.default;
 const Table_1 = __importDefault(require("./Components/Table/Table"));
 exports.Table = Table_1.default;
 const Tag_1 = __importDefault(require("./Components/Tag/Tag"));
@@ -223,6 +235,8 @@ const StageItem_1 = __importDefault(require("./Components/StageProgress/StageIte
 exports.StageItem = StageItem_1.default;
 const OrgSwitcher_1 = __importDefault(require("./Components/OrgSwitcher/OrgSwitcher"));
 exports.OrgSwitcher = OrgSwitcher_1.default;
+const AppSwitcher_1 = __importDefault(require("./Components/AppSwitcher/AppSwitcher"));
+exports.AppSwitcher = AppSwitcher_1.default;
 const UpgradeButton_1 = __importDefault(require("./Components/UpgradeButton/UpgradeButton"));
 exports.UpgradeButton = UpgradeButton_1.default;
 const PlanPill_1 = __importDefault(require("./Components/PlanPill/PlanPill"));
@@ -284,12 +298,49 @@ 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; } });
+// The three backgrounds a selectable row rests on, for a consumer's own list. Neutral by
+// construction, so the canvas ink stays readable on every one of them.
+var rowStates_1 = require("./Theme/tokens/builders/rowStates");
+Object.defineProperty(exports, "listRowBackgrounds", { enumerable: true, get: function () { return rowStates_1.listRowBackgrounds; } });
+// The two-tone `:focus-visible` indicator, derived per brand per mode. `buildFocusRing` resolves
+// the pair from a palette; `focusVisibleStyles` is the ready-made Chakra pseudo-selector block a
+// consumer's own control can spread to get the same ring Button draws. Both exist because Chakra's
+// `shadows.outline` is one hardcoded blue that fails WCAG 1.4.11 on every Pixelize palette.
+var focusRing_1 = require("./Theme/tokens/builders/focusRing");
+Object.defineProperty(exports, "buildFocusRing", { enumerable: true, get: function () { return focusRing_1.buildFocusRing; } });
+Object.defineProperty(exports, "settleBetween", { enumerable: true, get: function () { return focusRing_1.settleBetween; } });
+Object.defineProperty(exports, "withFocusRing", { enumerable: true, get: function () { return focusRing_1.withFocusRing; } });
+var focusRing_styles_1 = require("./Theme/chakra/focusRing.styles");
+Object.defineProperty(exports, "focusRingShadow", { enumerable: true, get: function () { return focusRing_styles_1.focusRingShadow; } });
+Object.defineProperty(exports, "focusVisibleRing", { enumerable: true, get: function () { return focusRing_styles_1.focusVisibleRing; } });
+Object.defineProperty(exports, "focusVisibleStyles", { enumerable: true, get: function () { return focusRing_styles_1.focusVisibleStyles; } });
+Object.defineProperty(exports, "FOCUS_VISIBLE_OVER_STATE", { enumerable: true, get: function () { return focusRing_styles_1.FOCUS_VISIBLE_OVER_STATE; } });
+Object.defineProperty(exports, "FOCUS_HALO_WIDTH", { enumerable: true, get: function () { return focusRing_styles_1.FOCUS_HALO_WIDTH; } });
+Object.defineProperty(exports, "FOCUS_RING_WIDTH", { enumerable: true, get: function () { return focusRing_styles_1.FOCUS_RING_WIDTH; } });
 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; } });
+var mergeRefs_1 = require("./Utils/mergeRefs");
+Object.defineProperty(exports, "mergeRefs", { enumerable: true, get: function () { return mergeRefs_1.mergeRefs; } });
+Object.defineProperty(exports, "setRef", { enumerable: true, get: function () { return mergeRefs_1.setRef; } });
+var rafThrottle_1 = require("./Utils/rafThrottle");
+Object.defineProperty(exports, "rafThrottle", { enumerable: true, get: function () { return rafThrottle_1.rafThrottle; } });
+var functions_1 = require("./Utils/functions");
+Object.defineProperty(exports, "toWords", { enumerable: true, get: function () { return functions_1.toWords; } });
+var useDebounce_1 = require("./Hooks/useDebounce");
+Object.defineProperty(exports, "useDebouncedCallback", { enumerable: true, get: function () { return useDebounce_1.useDebouncedCallback; } });
+Object.defineProperty(exports, "useDebouncedValue", { enumerable: true, get: function () { return useDebounce_1.useDebouncedValue; } });
+var chartColorsFromTheme_1 = require("./Theme/tokens/builders/chartColorsFromTheme");
+Object.defineProperty(exports, "CATEGORICAL_SERIES", { enumerable: true, get: function () { return chartColorsFromTheme_1.CATEGORICAL_SERIES; } });
+Object.defineProperty(exports, "chartAxisLabelColor", { enumerable: true, get: function () { return chartColorsFromTheme_1.chartAxisLabelColor; } });
+Object.defineProperty(exports, "chartInk", { enumerable: true, get: function () { return chartColorsFromTheme_1.chartInk; } });
+Object.defineProperty(exports, "chartMode", { enumerable: true, get: function () { return chartColorsFromTheme_1.chartMode; } });
+Object.defineProperty(exports, "getCategoricalSeriesColors", { enumerable: true, get: function () { return chartColorsFromTheme_1.getCategoricalSeriesColors; } });
+Object.defineProperty(exports, "getDefaultSeriesColors", { enumerable: true, get: function () { return chartColorsFromTheme_1.getDefaultSeriesColors; } });
+Object.defineProperty(exports, "labelOnSeries", { enumerable: true, get: function () { return chartColorsFromTheme_1.labelOnSeries; } });
 // 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
@@ -309,6 +360,18 @@ Object.defineProperty(exports, "accentTextOnCanvas", { enumerable: true, get: fu
 Object.defineProperty(exports, "pickAccentText", { enumerable: true, get: function () { return accentText_1.pickAccentText; } });
 Object.defineProperty(exports, "AA_NORMAL_TEXT", { enumerable: true, get: function () { return accentText_1.AA_NORMAL_TEXT; } });
 Object.defineProperty(exports, "DARK_CANVAS_LUMINANCE", { enumerable: true, get: function () { return accentText_1.DARK_CANVAS_LUMINANCE; } });
+// Filled-surface helpers — use whenever you paint a `bg` from a ColorScale (buttons, badges,
+// chips, alerts). Never pair `scale[500]` with `onFilled` or `colors.white` by hand.
+var filledSurface_1 = require("./Theme/tokens/builders/filledSurface");
+Object.defineProperty(exports, "solidFillRung", { enumerable: true, get: function () { return filledSurface_1.solidFillRung; } });
+Object.defineProperty(exports, "darkerFillRung", { enumerable: true, get: function () { return filledSurface_1.darkerFillRung; } });
+Object.defineProperty(exports, "labelOnFill", { enumerable: true, get: function () { return filledSurface_1.labelOnFill; } });
+Object.defineProperty(exports, "resolveFilledSurface", { enumerable: true, get: function () { return filledSurface_1.resolveFilledSurface; } });
+// Ink for a custom option row (a `SearchSelect` `option.view` or `Select` `renderOption` node).
+var optionRowInk_1 = require("./Components/Select/optionRowInk");
+Object.defineProperty(exports, "optionRowInk", { enumerable: true, get: function () { return optionRowInk_1.optionRowInk; } });
+Object.defineProperty(exports, "optionRowWeight", { enumerable: true, get: function () { return optionRowInk_1.optionRowWeight; } });
+Object.defineProperty(exports, "optionRowDescriptionInk", { enumerable: true, get: function () { return optionRowInk_1.optionRowDescriptionInk; } });
 // 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
@@ -326,11 +389,200 @@ Object.defineProperty(exports, "withLightness", { enumerable: true, get: functio
 Object.defineProperty(exports, "mix", { enumerable: true, get: function () { return color_1.mix; } });
 Object.defineProperty(exports, "relativeLuminance", { enumerable: true, get: function () { return color_1.relativeLuminance; } });
 Object.defineProperty(exports, "contrastRatio", { enumerable: true, get: function () { return color_1.contrastRatio; } });
+// Calendar day marking (`DatePicker` + `isRange`). Exported so a consumer can build a legend,
+// or a summary line, from the SAME keys, tokens and phrasing the calendar itself paints and
+// announces — a hand-copied legend is how a legend goes stale.
+var dayStates_1 = require("./Components/DatePicker/dayStates");
+Object.defineProperty(exports, "DAY_STATE_KEYS", { enumerable: true, get: function () { return dayStates_1.DAY_STATE_KEYS; } });
+Object.defineProperty(exports, "CALENDAR_DAY_CLASS", { enumerable: true, get: function () { return dayStates_1.DAY_CLASS; } });
+Object.defineProperty(exports, "isDayStateKey", { enumerable: true, get: function () { return dayStates_1.isDayStateKey; } });
+Object.defineProperty(exports, "resolveDayStateVisual", { enumerable: true, get: function () { return dayStates_1.resolveDayStateVisual; } });
+Object.defineProperty(exports, "describeDayStates", { enumerable: true, get: function () { return dayStates_1.describeDayStates; } });
+var AppSwitcherProps_1 = require("./Components/AppSwitcher/AppSwitcherProps");
+Object.defineProperty(exports, "appInitials", { enumerable: true, get: function () { return AppSwitcherProps_1.appInitials; } });
+Object.defineProperty(exports, "filterApps", { enumerable: true, get: function () { return AppSwitcherProps_1.filterApps; } });
+Object.defineProperty(exports, "matchesShortcut", { enumerable: true, get: function () { return AppSwitcherProps_1.matchesShortcut; } });
+Object.defineProperty(exports, "formatShortcut", { enumerable: true, get: function () { return AppSwitcherProps_1.formatShortcut; } });
+Object.defineProperty(exports, "buildSuiteApps", { enumerable: true, get: function () { return AppSwitcherProps_1.buildSuiteApps; } });
+var useAppSwitcherShortcut_1 = require("./Components/AppSwitcher/useAppSwitcherShortcut");
+Object.defineProperty(exports, "useAppSwitcherShortcut", { enumerable: true, get: function () { return useAppSwitcherShortcut_1.useAppSwitcherShortcut; } });
 var scrollbar_1 = require("./Theme/tokens/builders/scrollbar");
 Object.defineProperty(exports, "scrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.scrollbarStyles; } });
 Object.defineProperty(exports, "globalScrollbarStyles", { enumerable: true, get: function () { return scrollbar_1.globalScrollbarStyles; } });
 Object.defineProperty(exports, "SCROLLBAR_WIDTH", { enumerable: true, get: function () { return scrollbar_1.SCROLLBAR_WIDTH; } });
+var placeholderInk_1 = require("./Theme/tokens/builders/placeholderInk");
+Object.defineProperty(exports, "placeholderInk", { enumerable: true, get: function () { return placeholderInk_1.placeholderInk; } });
+Object.defineProperty(exports, "placeholderInkOn", { enumerable: true, get: function () { return placeholderInk_1.placeholderInkOn; } });
+Object.defineProperty(exports, "fieldSurfaces", { enumerable: true, get: function () { return placeholderInk_1.fieldSurfaces; } });
 var gradientInk_1 = require("./Theme/tokens/builders/gradientInk");
 Object.defineProperty(exports, "resolveGradient", { enumerable: true, get: function () { return gradientInk_1.resolveGradient; } });
 Object.defineProperty(exports, "gradientCss", { enumerable: true, get: function () { return gradientInk_1.gradientCss; } });
 Object.defineProperty(exports, "inkSafeGradientToken", { enumerable: true, get: function () { return gradientInk_1.inkSafeGradient; } });
+var controlSizes_1 = require("./Theme/tokens/primitives/controlSizes");
+Object.defineProperty(exports, "CONTROL_SIZES", { enumerable: true, get: function () { return controlSizes_1.CONTROL_SIZES; } });
+Object.defineProperty(exports, "CONTROL_SIZE_NAMES", { enumerable: true, get: function () { return controlSizes_1.CONTROL_SIZE_NAMES; } });
+Object.defineProperty(exports, "DEFAULT_CONTROL_SIZE", { enumerable: true, get: function () { return controlSizes_1.DEFAULT_CONTROL_SIZE; } });
+Object.defineProperty(exports, "isControlSize", { enumerable: true, get: function () { return controlSizes_1.isControlSize; } });
+var motion_1 = require("./Theme/tokens/primitives/motion");
+Object.defineProperty(exports, "MOTION_MS", { enumerable: true, get: function () { return motion_1.MOTION_MS; } });
+Object.defineProperty(exports, "MOTION_EASE", { enumerable: true, get: function () { return motion_1.MOTION_EASE; } });
+Object.defineProperty(exports, "transitionFor", { enumerable: true, get: function () { return motion_1.transitionFor; } });
+var tone_1 = require("./Theme/tokens/builders/tone");
+Object.defineProperty(exports, "TONES", { enumerable: true, get: function () { return tone_1.TONES; } });
+Object.defineProperty(exports, "isTone", { enumerable: true, get: function () { return tone_1.isTone; } });
+Object.defineProperty(exports, "toneToColorScheme", { enumerable: true, get: function () { return tone_1.toneToColorScheme; } });
+Object.defineProperty(exports, "toneToSemantic", { enumerable: true, get: function () { return tone_1.toneToSemantic; } });
+Object.defineProperty(exports, "toneScale", { enumerable: true, get: function () { return tone_1.toneScale; } });
+Object.defineProperty(exports, "toneInk", { enumerable: true, get: function () { return tone_1.toneInk; } });
+Object.defineProperty(exports, "resolveSoftTone", { enumerable: true, get: function () { return tone_1.resolveSoftTone; } });
+var scrim_1 = require("./Theme/tokens/builders/scrim");
+Object.defineProperty(exports, "overlayScrim", { enumerable: true, get: function () { return scrim_1.overlayScrim; } });
+Object.defineProperty(exports, "SCRIM_OPACITY", { enumerable: true, get: function () { return scrim_1.SCRIM_OPACITY; } });
+var tooltipSurface_1 = require("./Theme/tokens/builders/tooltipSurface");
+Object.defineProperty(exports, "tooltipSurface", { enumerable: true, get: function () { return tooltipSurface_1.tooltipSurface; } });
+var surfaceRaised_1 = require("./Theme/tokens/builders/surfaceRaised");
+Object.defineProperty(exports, "buildSurfaceRaised", { enumerable: true, get: function () { return surfaceRaised_1.buildSurfaceRaised; } });
+Object.defineProperty(exports, "raisedRule", { enumerable: true, get: function () { return surfaceRaised_1.raisedRule; } });
+Object.defineProperty(exports, "RAISED_OVERLAY", { enumerable: true, get: function () { return surfaceRaised_1.RAISED_OVERLAY; } });
+var overlay_styles_1 = require("./Theme/chakra/overlay.styles");
+Object.defineProperty(exports, "overlayScrimStyles", { enumerable: true, get: function () { return overlay_styles_1.overlayScrimStyles; } });
+Object.defineProperty(exports, "OVERLAY_BLUR", { enumerable: true, get: function () { return overlay_styles_1.OVERLAY_BLUR; } });
+var motion_2 = require("./Theme/chakra/motion");
+Object.defineProperty(exports, "usePrefersReducedMotion", { enumerable: true, get: function () { return motion_2.usePrefersReducedMotion; } });
+Object.defineProperty(exports, "reducedMotionSx", { enumerable: true, get: function () { return motion_2.reducedMotionSx; } });
+Object.defineProperty(exports, "REDUCED_MOTION_QUERY", { enumerable: true, get: function () { return motion_2.REDUCED_MOTION_QUERY; } });
+var useFieldIds_1 = require("./Components/Common/useFieldIds");
+Object.defineProperty(exports, "useFieldIds", { enumerable: true, get: function () { return useFieldIds_1.useFieldIds; } });
+var FieldMessage_1 = require("./Components/Common/FieldMessage");
+Object.defineProperty(exports, "FieldMessage", { enumerable: true, get: function () { return __importDefault(FieldMessage_1).default; } });
+var fieldStyles_1 = require("./Components/Common/fieldStyles");
+Object.defineProperty(exports, "fieldControlStyles", { enumerable: true, get: function () { return fieldStyles_1.fieldControlStyles; } });
+Object.defineProperty(exports, "controlSizeStyles", { enumerable: true, get: function () { return fieldStyles_1.controlSizeStyles; } });
+var FormLabel_1 = require("./Components/Common/FormLabel");
+Object.defineProperty(exports, "fieldLabelStyles", { enumerable: true, get: function () { return FormLabel_1.fieldLabelStyles; } });
+var fieldMessageStyles_1 = require("./Components/Common/fieldMessageStyles");
+Object.defineProperty(exports, "fieldMessageStyles", { enumerable: true, get: function () { return fieldMessageStyles_1.fieldMessageStyles; } });
+var PageHeader_1 = require("./Components/PageHeader/PageHeader");
+Object.defineProperty(exports, "PageHeader", { enumerable: true, get: function () { return __importDefault(PageHeader_1).default; } });
+var StatCard_1 = require("./Components/StatCard/StatCard");
+Object.defineProperty(exports, "StatCard", { enumerable: true, get: function () { return __importDefault(StatCard_1).default; } });
+var ErrorState_1 = require("./Components/QueryState/ErrorState");
+Object.defineProperty(exports, "ErrorState", { enumerable: true, get: function () { return __importDefault(ErrorState_1).default; } });
+var QueryStateBoundary_1 = require("./Components/QueryState/QueryStateBoundary");
+Object.defineProperty(exports, "QueryStateBoundary", { enumerable: true, get: function () { return __importDefault(QueryStateBoundary_1).default; } });
+var Backdrop_1 = require("./Components/Backdrop/Backdrop");
+Object.defineProperty(exports, "Backdrop", { enumerable: true, get: function () { return __importDefault(Backdrop_1).default; } });
+var Spinner_1 = require("./Components/Spinner/Spinner");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return __importDefault(Spinner_1).default; } });
+var DescriptionList_1 = require("./Components/DescriptionList/DescriptionList");
+Object.defineProperty(exports, "DescriptionList", { enumerable: true, get: function () { return __importDefault(DescriptionList_1).default; } });
+var FilterBar_1 = require("./Components/FilterBar/FilterBar");
+Object.defineProperty(exports, "FilterBar", { enumerable: true, get: function () { return __importDefault(FilterBar_1).default; } });
+var SettingRow_1 = require("./Components/SettingRow/SettingRow");
+Object.defineProperty(exports, "SettingRow", { enumerable: true, get: function () { return __importDefault(SettingRow_1).default; } });
+var SettingsSection_1 = require("./Components/SettingRow/SettingsSection");
+Object.defineProperty(exports, "SettingsSection", { enumerable: true, get: function () { return __importDefault(SettingsSection_1).default; } });
+var Avatar_1 = require("./Components/Avatar/Avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return __importDefault(Avatar_1).default; } });
+var AvatarGroup_1 = require("./Components/Avatar/AvatarGroup");
+Object.defineProperty(exports, "AvatarGroup", { enumerable: true, get: function () { return __importDefault(AvatarGroup_1).default; } });
+var avatarColorway_1 = require("./Components/Avatar/avatarColorway");
+Object.defineProperty(exports, "resolveAvatarColorway", { enumerable: true, get: function () { return avatarColorway_1.resolveAvatarColorway; } });
+Object.defineProperty(exports, "avatarScaleKeyFor", { enumerable: true, get: function () { return avatarColorway_1.avatarScaleKeyFor; } });
+Object.defineProperty(exports, "initialsFor", { enumerable: true, get: function () { return avatarColorway_1.initialsFor; } });
+var PersonChip_1 = require("./Components/PersonChip/PersonChip");
+Object.defineProperty(exports, "PersonChip", { enumerable: true, get: function () { return __importDefault(PersonChip_1).default; } });
+var FeedbackForm_1 = require("./Components/FeedbackForm/FeedbackForm");
+Object.defineProperty(exports, "FeedbackForm", { enumerable: true, get: function () { return __importDefault(FeedbackForm_1).default; } });
+var SaveBar_1 = require("./Components/SaveBar/SaveBar");
+Object.defineProperty(exports, "SaveBar", { enumerable: true, get: function () { return __importDefault(SaveBar_1).default; } });
+/** @deprecated Misspelling kept for consumers. Use `Accordion`. */
+var Accordion_2 = require("./Components/Accordion/Accordion");
+Object.defineProperty(exports, "Accordian", { enumerable: true, get: function () { return __importDefault(Accordion_2).default; } });
+var Tabs_1 = require("./Components/Tabs");
+Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return Tabs_1.Tabs; } });
+Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return Tabs_1.TabList; } });
+Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tabs_1.Tab; } });
+Object.defineProperty(exports, "TabPanels", { enumerable: true, get: function () { return Tabs_1.TabPanels; } });
+Object.defineProperty(exports, "TabPanel", { enumerable: true, get: function () { return Tabs_1.TabPanel; } });
+var ConfirmDialog_1 = require("./Components/ConfirmDialog/ConfirmDialog");
+Object.defineProperty(exports, "ConfirmDialog", { enumerable: true, get: function () { return __importDefault(ConfirmDialog_1).default; } });
+var NotificationBell_1 = require("./Components/NotificationBell/NotificationBell");
+Object.defineProperty(exports, "NotificationBell", { enumerable: true, get: function () { return __importDefault(NotificationBell_1).default; } });
+var NotificationPanel_1 = require("./Components/NotificationBell/NotificationPanel");
+Object.defineProperty(exports, "NotificationPanel", { enumerable: true, get: function () { return __importDefault(NotificationPanel_1).default; } });
+var NotificationList_1 = require("./Components/NotificationBell/NotificationList");
+Object.defineProperty(exports, "NotificationList", { enumerable: true, get: function () { return __importDefault(NotificationList_1).default; } });
+var NotificationItem_1 = require("./Components/NotificationBell/NotificationItem");
+Object.defineProperty(exports, "NotificationItem", { enumerable: true, get: function () { return __importDefault(NotificationItem_1).default; } });
+var notificationHelpers_1 = require("./Components/NotificationBell/notificationHelpers");
+Object.defineProperty(exports, "sectionizeByDay", { enumerable: true, get: function () { return notificationHelpers_1.sectionizeByDay; } });
+Object.defineProperty(exports, "groupConsecutive", { enumerable: true, get: function () { return notificationHelpers_1.groupConsecutive; } });
+Object.defineProperty(exports, "formatCount", { enumerable: true, get: function () { return notificationHelpers_1.formatCount; } });
+Object.defineProperty(exports, "formatRelativeTime", { enumerable: true, get: function () { return notificationHelpers_1.formatRelativeTime; } });
+Object.defineProperty(exports, "useAnchoredPanelHeight", { enumerable: true, get: function () { return notificationHelpers_1.useAnchoredPanelHeight; } });
+var lazyWithRetry_1 = require("./Utils/lazyWithRetry");
+Object.defineProperty(exports, "lazyWithRetry", { enumerable: true, get: function () { return lazyWithRetry_1.lazyWithRetry; } });
+Object.defineProperty(exports, "installPreloadErrorReload", { enumerable: true, get: function () { return lazyWithRetry_1.installPreloadErrorReload; } });
+Object.defineProperty(exports, "isChunkLoadError", { enumerable: true, get: function () { return lazyWithRetry_1.isChunkLoadError; } });
+Object.defineProperty(exports, "clearChunkReloadGuard", { enumerable: true, get: function () { return lazyWithRetry_1.clearChunkReloadGuard; } });
+var humanize_1 = require("./Utils/humanize");
+Object.defineProperty(exports, "humanize", { enumerable: true, get: function () { return humanize_1.humanize; } });
+Object.defineProperty(exports, "createEnumLabelResolver", { enumerable: true, get: function () { return humanize_1.createEnumLabelResolver; } });
+var validation_1 = require("./Utils/validation");
+Object.defineProperty(exports, "EMAIL_REGEX", { enumerable: true, get: function () { return validation_1.EMAIL_REGEX; } });
+Object.defineProperty(exports, "validateEmail", { enumerable: true, get: function () { return validation_1.validateEmail; } });
+Object.defineProperty(exports, "validatePassword", { enumerable: true, get: function () { return validation_1.validatePassword; } });
+Object.defineProperty(exports, "validateRequired", { enumerable: true, get: function () { return validation_1.validateRequired; } });
+Object.defineProperty(exports, "validatePositiveNumber", { enumerable: true, get: function () { return validation_1.validatePositiveNumber; } });
+Object.defineProperty(exports, "validateFileType", { enumerable: true, get: function () { return validation_1.validateFileType; } });
+Object.defineProperty(exports, "validateFileSize", { enumerable: true, get: function () { return validation_1.validateFileSize; } });
+Object.defineProperty(exports, "validateFile", { enumerable: true, get: function () { return validation_1.validateFile; } });
+Object.defineProperty(exports, "validateVideoFileType", { enumerable: true, get: function () { return validation_1.validateVideoFileType; } });
+Object.defineProperty(exports, "validateVideoFile", { enumerable: true, get: function () { return validation_1.validateVideoFile; } });
+Object.defineProperty(exports, "validateYoutubeUrl", { enumerable: true, get: function () { return validation_1.validateYoutubeUrl; } });
+Object.defineProperty(exports, "defaultValidationMessages", { enumerable: true, get: function () { return validation_1.defaultValidationMessages; } });
+var apiError_1 = require("./Utils/apiError");
+Object.defineProperty(exports, "getApiErrorMessage", { enumerable: true, get: function () { return apiError_1.getApiErrorMessage; } });
+Object.defineProperty(exports, "getApiErrorStatus", { enumerable: true, get: function () { return apiError_1.getApiErrorStatus; } });
+var RangeSlider_1 = require("./Components/RangeSlider/RangeSlider");
+Object.defineProperty(exports, "RangeSlider", { enumerable: true, get: function () { return __importDefault(RangeSlider_1).default; } });
+var MediaViewer_1 = require("./Components/MediaViewer/MediaViewer");
+Object.defineProperty(exports, "MediaViewer", { enumerable: true, get: function () { return __importDefault(MediaViewer_1).default; } });
+var useFileViewer_1 = require("./Components/MediaViewer/hooks/useFileViewer");
+Object.defineProperty(exports, "useFileViewer", { enumerable: true, get: function () { return __importDefault(useFileViewer_1).default; } });
+var MediaImageViewer_1 = require("./Components/MediaViewer/components/MediaImageViewer");
+Object.defineProperty(exports, "MediaImageViewer", { enumerable: true, get: function () { return __importDefault(MediaImageViewer_1).default; } });
+var MediaImageViewerProps_1 = require("./Components/MediaViewer/components/MediaImageViewerProps");
+Object.defineProperty(exports, "defaultMediaImageViewerLabels", { enumerable: true, get: function () { return MediaImageViewerProps_1.defaultMediaImageViewerLabels; } });
+var MediaVideoPlayer_1 = require("./Components/MediaViewer/components/MediaVideoPlayer");
+Object.defineProperty(exports, "MediaVideoPlayer", { enumerable: true, get: function () { return __importDefault(MediaVideoPlayer_1).default; } });
+var MediaVideoPlayerProps_1 = require("./Components/MediaViewer/components/MediaVideoPlayerProps");
+Object.defineProperty(exports, "defaultMediaVideoPlayerLabels", { enumerable: true, get: function () { return MediaVideoPlayerProps_1.defaultMediaVideoPlayerLabels; } });
+var MediaDocumentStage_1 = require("./Components/MediaViewer/components/MediaDocumentStage");
+Object.defineProperty(exports, "MediaDocumentStage", { enumerable: true, get: function () { return __importDefault(MediaDocumentStage_1).default; } });
+var MediaDocumentStageProps_1 = require("./Components/MediaViewer/components/MediaDocumentStageProps");
+Object.defineProperty(exports, "defaultMediaDocumentStageLabels", { enumerable: true, get: function () { return MediaDocumentStageProps_1.defaultMediaDocumentStageLabels; } });
+var MediaViewerProps_1 = require("./Components/MediaViewer/MediaViewerProps");
+Object.defineProperty(exports, "defaultMediaViewerLabels", { enumerable: true, get: function () { return MediaViewerProps_1.defaultMediaViewerLabels; } });
+var MediaAudioPlayer_1 = require("./Components/MediaViewer/components/MediaAudioPlayer");
+Object.defineProperty(exports, "MediaAudioPlayer", { enumerable: true, get: function () { return __importDefault(MediaAudioPlayer_1).default; } });
+var MediaAudioPlayerProps_1 = require("./Components/MediaViewer/components/MediaAudioPlayerProps");
+Object.defineProperty(exports, "defaultMediaAudioPlayerLabels", { enumerable: true, get: function () { return MediaAudioPlayerProps_1.defaultMediaAudioPlayerLabels; } });
+var MediaScrubber_1 = require("./Components/MediaViewer/components/MediaScrubber");
+Object.defineProperty(exports, "MediaScrubber", { enumerable: true, get: function () { return __importDefault(MediaScrubber_1).default; } });
+var MediaStatusPanel_1 = require("./Components/MediaViewer/components/MediaStatusPanel");
+Object.defineProperty(exports, "MediaStatusPanel", { enumerable: true, get: function () { return __importDefault(MediaStatusPanel_1).default; } });
+var mediaItems_1 = require("./Components/MediaViewer/mediaItems");
+Object.defineProperty(exports, "buildMediaItems", { enumerable: true, get: function () { return mediaItems_1.buildMediaItems; } });
+Object.defineProperty(exports, "buildFileItems", { enumerable: true, get: function () { return mediaItems_1.buildFileItems; } });
+Object.defineProperty(exports, "planPreview", { enumerable: true, get: function () { return mediaItems_1.planPreview; } });
+Object.defineProperty(exports, "countMedia", { enumerable: true, get: function () { return mediaItems_1.countMedia; } });
+Object.defineProperty(exports, "fileKind", { enumerable: true, get: function () { return mediaItems_1.fileKind; } });
+Object.defineProperty(exports, "resolveMediaUrl", { enumerable: true, get: function () { return mediaItems_1.resolveMediaUrl; } });
+Object.defineProperty(exports, "MIN_ZOOM", { enumerable: true, get: function () { return mediaItems_1.MIN_ZOOM; } });
+Object.defineProperty(exports, "MAX_ZOOM", { enumerable: true, get: function () { return mediaItems_1.MAX_ZOOM; } });
+Object.defineProperty(exports, "ZOOM_STEP", { enumerable: true, get: function () { return mediaItems_1.ZOOM_STEP; } });
+Object.defineProperty(exports, "PLAYBACK_SPEEDS", { enumerable: true, get: function () { return mediaItems_1.PLAYBACK_SPEEDS; } });
+Object.defineProperty(exports, "SEEK_STEP_SECONDS", { enumerable: true, get: function () { return mediaItems_1.SEEK_STEP_SECONDS; } });
+__exportStar(require("./Components/Primitives/Primitives"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.5",
+  "version": "2.4.2-beta.50",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",
@@ -28,11 +28,15 @@
   "types": "dist/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "COMPONENT-GOTCHAS.md",
+    "DESIGN-GUIDE.md",
+    "CHANGELOG.md"
   ],
   "dependencies": {
     "@fontsource-variable/inter": "^5.2.8",
     "@hello-pangea/dnd": "^18.0.1",
+    "apexcharts": "^6.5.0",
     "date-fns": "^3.6.0",
     "jodit-react": "^5.2.38",
     "lucide-react": "^0.487.0",
@@ -42,20 +46,24 @@
   },
   "scripts": {
     "start": "vite",
-    "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/",
+    "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/**/*.{png,jpg,jpeg,gif,svg,webp,ico,woff,woff2,ttf,eot}\" dist/",
+    "build:web": "vite build",
     "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",
     "package": "npm version patch && npm run build && npm run remove && npm publish",
+    "release:beta": "npm version prerelease --preid=beta --no-git-tag-version && npm run build && npm publish --tag beta",
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "format:check": "prettier --check .",
     "format": "prettier --write .",
     "test:coverage": "jest --coverage",
-    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "prepare": "husky"
   },
   "jest": {
     "testEnvironment": "jsdom",
+    "testTimeout": 15000,
     "collectCoverage": true,
     "coverageThreshold": {
       "global": {
@@ -90,14 +98,23 @@
     "moduleNameMapper": {
       "\\.(css|less|scss|sass)$": "<rootDir>/__mocks__/styleMock.js"
     },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/.worktrees/"
+    ],
     "testPathIgnorePatterns": [
-      "<rootDir>/dist/"
+      "/node_modules/",
+      "<rootDir>/dist/",
+      "<rootDir>/.claude/",
+      "<rootDir>/.worktrees/"
     ],
     "testMatch": [
       "**/__tests__/**/*.[jt]s?(x)",
       "**/?(*.)+(spec|test).[jt]s?(x)"
     ]
   },
+  "lint-staged": {
+    "**/*Props.{ts,tsx}": "eslint"
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -138,14 +155,16 @@
     "babel-jest": "^29.7.0",
     "copyfiles": "^2.4.1",
     "eslint": "^9.39.4",
+    "eslint-plugin-jsdoc": "^64.5.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "framer-motion": "^10.18.0",
     "globals": "^17.6.0",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-axe": "^11.0.0",
     "jest-environment-jsdom": "^29.7.0",
-    "path": "^0.12.7",
+    "lint-staged": "^17.5.1",
     "postcss": "^8.5.4",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
@@ -159,6 +178,8 @@
   },
   "peerDependencies": {
     "@chakra-ui/react": "^2.8.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
     "framer-motion": "^10.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

package/dist/Assets/defaultLogo.tsx

@@ -1,26 +0,0 @@
-const DefaultLogo = () => {
-  return (
-    <svg
-      width="12.09"
-      height="15.95"
-      viewBox="0 0 31 29"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <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"
-      />
-      <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"
-      />
-      <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"
-      />
-    </svg>
-  );
-};
-
-export default DefaultLogo;

package/dist/Components/PinInputs/PinInputs.d.ts

@@ -1,3 +0,0 @@
-import { PinInputsProps } from "./PinInputsProps";
-declare const PinInputs: ({ length, label, error, onChange, onComplete, mask, placeholder, }: PinInputsProps) => import("react/jsx-runtime").JSX.Element;
-export default PinInputs;

package/dist/Components/PinInputs/PinInputs.js

@@ -1,46 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@chakra-ui/react");
-const Label_1 = __importDefault(require("../Common/Label"));
-const ErrorComponent_1 = __importDefault(require("../Common/ErrorComponent"));
-const useCustomTheme_1 = require("../../Theme/useCustomTheme");
-const PinInputs = ({ length = 3, label, error, onChange, onComplete, mask = false, placeholder = "*", }) => {
-    const { colors } = (0, useCustomTheme_1.useCustomTheme)();
-    const [values, setValues] = (0, react_1.useState)(Array(length).fill(""));
-    const inputsRef = (0, react_1.useRef)([]);
-    const borderColor = error
-        ? colors.semanticText.error
-        : colors.boxborder[500];
-    const focusRing = error ? colors.boxShadow.error : colors.boxShadow.primary;
-    const focusShadow = `0 0 0 0.125rem ${focusRing}`;
-    const handleChange = (index, value) => {
-        var _a;
-        if (!/^[0-9]?$/.test(value))
-            return;
-        const newValues = [...values];
-        newValues[index] = value;
-        setValues(newValues);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(""));
-        if (value && index < length - 1) {
-            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        if (newValues.every((v) => v !== "")) {
-            onComplete === null || onComplete === void 0 ? void 0 : onComplete(newValues.join(""));
-        }
-    };
-    const handleKeyDown = (e, index) => {
-        var _a;
-        if (e.key === "Backspace" && !values[index] && index > 0) {
-            (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-    };
-    return ((0, jsx_runtime_1.jsxs)(react_2.Box, { children: [label && (0, jsx_runtime_1.jsx)(Label_1.default, { label: label }), (0, jsx_runtime_1.jsx)(react_2.HStack, { spacing: 2, children: Array.from({ length }).map((_, index) => ((0, jsx_runtime_1.jsx)(react_2.Input, { ref: (el) => {
-                        inputsRef.current[index] = el;
-                    }, type: mask ? "password" : "text", inputMode: "numeric", maxLength: 1, placeholder: placeholder, value: values[index], onChange: (e) => handleChange(index, e.target.value), onKeyDown: (e) => handleKeyDown(e, index), w: 12, h: 12, textAlign: "center", fontSize: "lg", borderWidth: "1px", borderColor: borderColor, borderRadius: "md", _focus: { boxShadow: focusShadow, outline: "none" } }, index))) }), error && (0, jsx_runtime_1.jsx)(ErrorComponent_1.default, { error: error })] }));
-};
-exports.default = PinInputs;

package/dist/Components/PinInputs/PinInputsProps.d.ts

@@ -1,9 +0,0 @@
-export type PinInputsProps = {
-    length?: number;
-    label?: string;
-    error?: string;
-    mask?: boolean;
-    placeholder?: string;
-    onChange?: (value: string) => void;
-    onComplete?: (value: string) => void;
-};

package/dist/Components/Table/hooks/useDebounce.d.ts

@@ -1,2 +0,0 @@
-declare const useDebounce: (callback: (...args: unknown[]) => void, delay: number) => (...args: unknown[]) => void;
-export default useDebounce;

package/dist/Components/Table/hooks/useDebounce.js

@@ -1,24 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-// First, create a custom debounce hook
-const useDebounce = (callback, delay) => {
-    const timeoutRef = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, []);
-    const debouncedCallback = (0, react_1.useCallback)((...args) => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        timeoutRef.current = setTimeout(() => {
-            callback(...args);
-        }, delay);
-    }, [callback, delay]);
-    return debouncedCallback;
-};
-exports.default = useDebounce;

package/dist/Components/Trail/EditableCell.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-import { Row, Column } from "./data";
-interface EditableCellProps {
-    row: Row;
-    column: Column;
-    isEditable: boolean;
-    handleCellClick: (rowId: number, columnId: number) => void;
-    handleCellChange: (rowId: number, columnLabel: string, value: string) => void;
-}
-export declare const EditableCell: React.FC<EditableCellProps>;
-export {};