pixelize-design-library 2.4.2-beta.59 → 2.4.2-beta.60

package/dist/esm/Components/Tabs/components/TabLinkList.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from "@chakra-ui/react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme.js";
+import { scrollbarStyles } from "../../../Theme/tokens/builders/scrollbar.js";
+import { useTabsContext } from "../TabsContext.js";
+import { useTabAppearance } from "../useTabAppearance.js";
+import CountBadge from "./CountBadge.js";
+const isPlainPrimaryClick = (event) => event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+const TabLink = ({ item, linkAs }) => {
+    const ctx = useTabsContext();
+    const isSelected = ctx.selectedId === item.id;
+    const { colors, canvas, scale, style, iconSize, iconSx, boxProps } = useTabAppearance(isSelected, item.isDisabled);
+    const content = (_jsxs(_Fragment, { children: [item.icon ? (_jsx(Box, { as: "span", "aria-hidden": true, boxSize: `${iconSize}px`, sx: iconSx, children: item.icon })) : null, _jsx(Box, { as: "span", children: item.label }), item.count !== undefined ? (_jsx(CountBadge, { count: item.count, colors: colors, scale: scale, surface: ctx.variant === "solid" && isSelected ? style.bg : canvas, size: ctx.size })) : null] }));
+    if (item.isDisabled) {
+        return (_jsx(Box, { as: "span", "aria-disabled": "true", "data-value": item.id, ...boxProps, children: content }));
+    }
+    return (_jsx(Box, { as: linkAs, href: item.href, "aria-current": isSelected ? "page" : undefined, "data-value": item.id, onClick: (event) => {
+            if (!event.defaultPrevented && isPlainPrimaryClick(event))
+                ctx.select(item.id);
+        }, ...boxProps, children: content }));
+};
+const TabLinkList = ({ items, linkAs, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }) => {
+    const { colors } = useCustomTheme();
+    const ctx = useTabsContext();
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    return (_jsx(Flex, { as: "nav", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, direction: isVertical ? "column" : "row", flexShrink: 0, minW: isVertical ? "10rem" : undefined, overflowX: isVertical ? undefined : "auto", overflowY: isVertical ? "auto" : undefined, flexWrap: "nowrap", gap: isLine ? 1 : 1.5, borderBottom: isLine && !isVertical ? "1px solid" : undefined, borderBottomColor: isLine && !isVertical ? colors.boxborder[200] : undefined, borderRight: isLine && isVertical ? "1px solid" : undefined, borderRightColor: isLine && isVertical ? colors.boxborder[200] : undefined, sx: scrollbarStyles(colors, "hover"), children: items === null || items === void 0 ? void 0 : items.map((item) => (_jsx(TabLink, { item: item, linkAs: linkAs }, item.id))) }));
+};
+export default TabLinkList;

package/dist/esm/Components/Tabs/useTabAppearance.js

@@ -0,0 +1,63 @@
+import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { FOCUS_VISIBLE_OVER_STATE } from "../../Theme/chakra/focusRing.styles.js";
+import { AA_NON_TEXT, liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { compositeOver } from "../../Theme/tokens/builders/color.js";
+import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
+import { reducedMotionSx } from "../../Theme/chakra/motion.js";
+import { BUTTON_SIZES } from "../../Theme/tokens/primitives/controlSizes.js";
+import { iconBoxSx } from "../Common/iconBox.js";
+import { resolveTabStyle, scaleForColorScheme } from "./tabStyles.js";
+import { useTabsContext } from "./TabsContext.js";
+export const useTabAppearance = (isSelected, isDisabled) => {
+    var _a, _b, _c;
+    const { colors } = useCustomTheme();
+    const ctx = useTabsContext();
+    const isVertical = ctx.orientation === "vertical";
+    const isLine = ctx.variant === "line";
+    const canvas = colors.backgroundColor.main;
+    const scale = scaleForColorScheme(colors, ctx.colorScheme);
+    const style = resolveTabStyle(colors, scale, canvas, ctx.variant, isSelected);
+    const spec = BUTTON_SIZES[ctx.size];
+    // The list scrolls on both axes, so an outer ring is clipped into arcs; a negative offset draws it
+    // inside the tab, clear of its own border rather than thickening it.
+    const focusRing = {
+        outline: `1px solid ${liftToContrast(colors.primary[500], 
+        // subtle/ghost fills are translucent tints; contrast has no meaning until they are flattened.
+        style.bg === "transparent" ? canvas : compositeOver(style.bg, canvas), AA_NON_TEXT)}`,
+        outlineOffset: "-2px",
+    };
+    const borderProps = ctx.variant === "outline"
+        ? { border: "1px solid", borderColor: (_a = style.border) !== null && _a !== void 0 ? _a : "transparent" }
+        : isLine
+            ? isVertical
+                ? { borderLeft: "0.125rem solid", borderLeftColor: (_b = style.indicator) !== null && _b !== void 0 ? _b : "transparent" }
+                : { borderBottom: "0.125rem solid", borderBottomColor: (_c = style.indicator) !== null && _c !== void 0 ? _c : "transparent" }
+            : {};
+    const boxProps = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.375rem",
+        flexShrink: 0,
+        flex: ctx.isFitted ? 1 : undefined,
+        w: isVertical ? "100%" : undefined,
+        h: isVertical ? "auto" : spec.height,
+        minH: spec.height,
+        py: isVertical ? "0.5rem" : undefined,
+        px: spec.paddingX,
+        fontSize: spec.fontSize,
+        fontWeight: isSelected ? 600 : 500,
+        whiteSpace: "nowrap",
+        textDecoration: "none",
+        cursor: isDisabled ? "not-allowed" : "pointer",
+        opacity: isDisabled ? 0.5 : 1,
+        borderRadius: isLine ? "none" : "lg",
+        bg: style.bg,
+        color: style.color,
+        ...borderProps,
+        transition: transitionFor(["background-color", "color", "border-color"]),
+        sx: { _focusVisible: focusRing, [FOCUS_VISIBLE_OVER_STATE]: focusRing, ...reducedMotionSx() },
+        _hover: !isDisabled ? { bg: style.hoverBg, color: style.hoverColor, textDecoration: "none" } : undefined,
+    };
+    return { ctx, colors, canvas, scale, style, iconSize: spec.iconSize, iconSx: iconBoxSx(spec.iconSize), boxProps };
+};

package/dist/esm/Components/Tag/Tag.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Icon, Tag as ChakraTag, TagLabel, TagLeftIcon, TagRightIcon } from "@chakra-ui/react";
+import { Box, Flex, Icon, Tag as ChakraTag, TagLabel, TagLeftIcon, TagRightIcon, Text } from "@chakra-ui/react";
 import { toneToColorScheme } from "../../Theme/tokens/builders/tone.js";
 import { transitionFor } from "../../Theme/tokens/primitives/motion.js";
 import { reducedMotionSx } from "../../Theme/chakra/motion.js";
 import { focusVisibleStyles } from "../../Theme/chakra/focusRing.styles.js";
 import { useCustomTheme } from "../../Theme/useCustomTheme.js";
+import { dotColor } from "./tagDot.js";
 // NOTE: the label's pill radius would slice descenders, so clipping lives on a square child.
 const LabelText = ({ children, title }) => (_jsx(Box, { as: "span", title: title, display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", borderRadius: 0, px: "0.05em", mx: "-0.05em", children: children }));
 const ICON_SIZE = {
@@ -13,10 +14,19 @@ const ICON_SIZE = {
     md: "1em",
     lg: "1.1em",
 };
+const DOT_FONT_SIZE = {
+    xs: "0.75rem",
+    sm: "0.8125rem",
+    md: "0.875rem",
+    lg: "0.9375rem",
+};
 /** Renders a pill-shaped status/filter chip (Chakra Tag) — not interchangeable with the raw Badge primitive's static marker. */
-const Tag = ({ label, colorScheme = "primary", tone, variant = "subtle", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }) => {
+const Tag = ({ label, colorScheme = "primary", tone, variant = "subtle", display = "chip", size = "sm", maxW, icon, leadingIcon, onTagClick, onIconClick, isDisabled, "data-testid": testId, }) => {
     const { colors } = useCustomTheme();
     const isInteractive = !!onTagClick;
+    if (display === "dot") {
+        return (_jsxs(Flex, { as: isInteractive ? "button" : "span", ...(isInteractive ? { type: "button", disabled: isDisabled || undefined } : {}), display: "inline-flex", alignItems: "center", gap: 2, maxW: maxW, minW: 0, borderRadius: "sm", bg: "transparent", fontSize: DOT_FONT_SIZE[size], fontWeight: 500, color: colors.text[700], cursor: isInteractive ? "pointer" : undefined, opacity: isDisabled ? 0.5 : undefined, onClick: isInteractive && !isDisabled ? onTagClick : undefined, "data-testid": testId, "data-display": "dot", "data-disabled": isDisabled || undefined, sx: isInteractive ? focusVisibleStyles(colors) : undefined, children: [_jsx(Box, { as: "span", "aria-hidden": true, boxSize: "0.5rem", flexShrink: 0, borderRadius: "full", bg: dotColor(colors, tone, colorScheme) }), _jsx(Text, { as: "span", noOfLines: 1, title: maxW ? label : undefined, children: label })] }));
+    }
     return (_jsxs(ChakraTag, { size: size, variant: variant, colorScheme: tone ? toneToColorScheme[tone] : colorScheme, borderRadius: "full", maxW: maxW, "data-testid": testId, "data-interactive": isInteractive || undefined, "data-disabled": isDisabled || undefined, "aria-disabled": isDisabled || undefined, children: [leadingIcon && _jsx(TagLeftIcon, { as: leadingIcon, boxSize: ICON_SIZE[size], "aria-hidden": true }), isInteractive ? (_jsx(TagLabel, { as: "button", type: "button", noOfLines: undefined, disabled: isDisabled || undefined, cursor: "pointer", onClick: isDisabled ? undefined : onTagClick, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })) : (_jsx(TagLabel, { noOfLines: undefined, children: _jsx(LabelText, { title: maxW ? label : undefined, children: label }) })), icon &&
                 (onIconClick ? (_jsx(Box, { as: "button", type: "button", "aria-label": `Remove ${label}`, "data-testid": testId ? `${testId}-remove` : undefined, disabled: isDisabled || undefined, onClick: (e) => {
                         e.stopPropagation();

package/dist/esm/Components/Tag/tagDot.js

@@ -0,0 +1,17 @@
+import { liftToContrast } from "../../Theme/tokens/builders/outlineRung.js";
+import { toneToSemantic } from "../../Theme/tokens/builders/tone.js";
+const SCALE_KEYS = [
+    "primary", "secondary", "tertiary", "gray", "red", "orange", "yellow",
+    "green", "teal", "blue", "cyan", "purple", "pink",
+];
+export const dotColor = (colors, tone, colorScheme) => {
+    const surfaces = [colors.background[50], colors.backgroundColor.main];
+    if (tone === "neutral")
+        return colors.textMuted;
+    const scale = tone
+        ? colors.semantic[toneToSemantic[tone]]
+        : SCALE_KEYS.includes(colorScheme)
+            ? colors[colorScheme]
+            : colors.gray;
+    return surfaces.reduce((ink, surface) => liftToContrast(ink, surface), scale[500]);
+};

package/dist/esm/index.js

@@ -184,6 +184,9 @@ export { fieldLabelStyles } from "./Components/Common/FormLabel.js";
 export { fieldMessageStyles } from "./Components/Common/fieldMessageStyles.js";
 export { default as PageHeader } from "./Components/PageHeader/PageHeader.js";
 export { default as StatCard } from "./Components/StatCard/StatCard.js";
+export { default as StatusTag } from "./Components/StatusTag/StatusTag.js";
+export { default as CircularProgress } from "./Components/CircularProgress/CircularProgress.js";
+export { default as FormDrawer } from "./Components/FormDrawer/FormDrawer.js";
 export { default as ErrorState } from "./Components/QueryState/ErrorState.js";
 export { default as QueryStateBoundary } from "./Components/QueryState/QueryStateBoundary.js";
 export { default as Backdrop } from "./Components/Backdrop/Backdrop.js";
@@ -198,6 +201,10 @@ export { resolveAvatarColorway, avatarScaleKeyFor, initialsFor } from "./Compone
 export { default as PersonChip } from "./Components/PersonChip/PersonChip.js";
 export { default as FeedbackForm } from "./Components/FeedbackForm/FeedbackForm.js";
 export { default as SaveBar } from "./Components/SaveBar/SaveBar.js";
+export { default as BulkSelectionBar } from "./Components/BulkSelectionBar/BulkSelectionBar.js";
+export { default as SectionRail } from "./Components/SectionRail/SectionRail.js";
+export { default as CalendarGrid } from "./Components/CalendarGrid/CalendarGrid.js";
+export { default as AudioRecorder } from "./Components/AudioRecorder/AudioRecorder.js";
 /** @deprecated Misspelling kept for consumers. Use `Accordion`. */
 export { default as Accordian } from "./Components/Accordion/Accordion.js";
 export { Tabs, TabList, Tab, TabPanels, TabPanel } from "./Components/Tabs/index.js";

package/dist/index.d.ts

@@ -168,7 +168,7 @@ export type { ToggleSwitchProps, ToggleSwitchSize, ToggleSwitchColorScheme, } fr
 export type { SegmentedControlProps, SegmentedControlOption, SegmentedControlSize, } from "./Components/SegmentedControl/SegmentedControlProps";
 export type { ChakraRadioProps as RadioButtonProps, ChakraRadioGroupProps as RadioButtonGroupProps, RadioOption } 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 { TagProps, TagSize, TagVariant, TagColorScheme, TagDisplay } 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";
@@ -214,9 +214,15 @@ export { default as PageHeader } from "./Components/PageHeader/PageHeader";
 export type { PageHeaderProps, PageHeaderTitleSize, PageHeaderActionsLayout } from "./Components/PageHeader/PageHeaderProps";
 export { default as StatCard } from "./Components/StatCard/StatCard";
 export type { StatCardProps } from "./Components/StatCard/StatCardProps";
+export { default as StatusTag } from "./Components/StatusTag/StatusTag";
+export type { StatusTagProps, StatusAppearance } from "./Components/StatusTag/StatusTagProps";
+export { default as CircularProgress } from "./Components/CircularProgress/CircularProgress";
+export type { CircularProgressProps, CircularProgressSize } from "./Components/CircularProgress/CircularProgressProps";
+export { default as FormDrawer } from "./Components/FormDrawer/FormDrawer";
+export type { FormDrawerProps, FormDrawerSection, FormDrawerLabels } from "./Components/FormDrawer/FormDrawerProps";
 export { default as ErrorState } from "./Components/QueryState/ErrorState";
 export { default as QueryStateBoundary } from "./Components/QueryState/QueryStateBoundary";
-export type { ErrorStateProps, QueryStateBoundaryProps } from "./Components/QueryState/QueryStateProps";
+export type { ErrorStateProps, QueryStateBoundaryProps, QueryStateForbiddenProps } from "./Components/QueryState/QueryStateProps";
 export { default as Backdrop } from "./Components/Backdrop/Backdrop";
 export type { BackdropProps, BackdropVariant } from "./Components/Backdrop/BackdropProps";
 export { default as Spinner } from "./Components/Spinner/Spinner";
@@ -241,6 +247,14 @@ export { default as FeedbackForm } from "./Components/FeedbackForm/FeedbackForm"
 export type { FeedbackFormProps, FeedbackPayload } from "./Components/FeedbackForm/FeedbackForm";
 export { default as SaveBar } from "./Components/SaveBar/SaveBar";
 export type { SaveBarProps } from "./Components/SaveBar/SaveBarProps";
+export { default as BulkSelectionBar } from "./Components/BulkSelectionBar/BulkSelectionBar";
+export type { BulkSelectionBarProps, BulkAction, BulkActionTone } from "./Components/BulkSelectionBar/BulkSelectionBarProps";
+export { default as SectionRail } from "./Components/SectionRail/SectionRail";
+export type { SectionRailProps, RailSection } from "./Components/SectionRail/SectionRailProps";
+export { default as CalendarGrid } from "./Components/CalendarGrid/CalendarGrid";
+export type { CalendarEvent, CalendarGridProps, CalendarGridView, CalendarGridLabels } from "./Components/CalendarGrid/CalendarGridProps";
+export { default as AudioRecorder } from "./Components/AudioRecorder/AudioRecorder";
+export type { AudioRecorderProps, AudioRecorderLabels } from "./Components/AudioRecorder/AudioRecorderProps";
 export type { ToasterStatus } from "./Components/Toaster/ToasterProps";
 export type { TableColumnAlign } from "./Components/Table/TableProps";
 export type { KanbanBoardProps, ColumnType as KanbanColumnType, Account as KanbanAccount, ColumnCollapseChangePayload, KanbanDragPayload, KanbanPermissions, } from "./Components/KanbanBoard/KanbanBoardProps";

package/dist/index.js

@@ -44,10 +44,10 @@ exports.splitMonthsAndDays = exports.resolvePlanBadge = exports.formatPlanRemain
 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.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.useChartTheme = 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.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 = exports.filterApps = void 0;
-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 = exports.Spinner = void 0;
-exports.MediaGallery = exports.PaymentOptionGroup = exports.PaymentOption = exports.AddressCardGroup = exports.AddressCard = exports.DetailSections = exports.ReviewList = exports.ReviewSummary = exports.SpecTable = exports.OffersList = exports.TrustBadges = exports.PincodeChecker = exports.StickyBuyBar = exports.BagBar = exports.OrderStatusTimeline = exports.CouponField = exports.OrderSummary = exports.CartItem = exports.QuantityStepper = exports.VariantSelector = exports.OptionChip = exports.WishlistToggle = exports.ProductBadges = exports.StockStatus = exports.PriceBlock = exports.Rating = 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 = exports.MediaViewer = void 0;
-exports.firstInvalidStep = exports.wizardTransition = exports.Wizard = exports.WizardDialog = exports.flattenScreens = exports.searchLauncherSections = exports.searchLauncher = exports.NewTabLink = exports.PinToggle = exports.NavLauncher = exports.LauncherTrigger = exports.KbdShortcut = exports.Kbd = exports.QuickAddSheet = exports.ProductCardSkeleton = exports.ProductCardGrid = exports.unitPrice = exports.discountAmount = exports.discountPercent = exports.formatPrice = exports.firstAvailableSelection = exports.priceRange = exports.remainingStock = exports.isOptionAvailable = exports.findVariant = exports.selectionComplete = exports.stockState = exports.LOW_STOCK_THRESHOLD = exports.defaultMediaLightboxLabels = exports.defaultMediaGalleryLabels = exports.MediaLightbox = void 0;
+exports.FormDrawer = exports.CircularProgress = exports.StatusTag = 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 = exports.filterApps = void 0;
+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.AudioRecorder = exports.CalendarGrid = exports.SectionRail = exports.BulkSelectionBar = exports.SaveBar = exports.FeedbackForm = exports.PersonChip = exports.initialsFor = exports.avatarScaleKeyFor = exports.resolveAvatarColorway = exports.AvatarGroup = exports.Avatar = exports.SettingsSection = exports.SettingRow = exports.FilterBar = exports.DescriptionList = exports.Spinner = exports.Backdrop = exports.QueryStateBoundary = exports.ErrorState = void 0;
+exports.ReviewSummary = exports.SpecTable = exports.OffersList = exports.TrustBadges = exports.PincodeChecker = exports.StickyBuyBar = exports.BagBar = exports.OrderStatusTimeline = exports.CouponField = exports.OrderSummary = exports.CartItem = exports.QuantityStepper = exports.VariantSelector = exports.OptionChip = exports.WishlistToggle = exports.ProductBadges = exports.StockStatus = exports.PriceBlock = exports.Rating = 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 = exports.MediaViewer = exports.RangeSlider = exports.getApiErrorStatus = exports.getApiErrorMessage = exports.defaultValidationMessages = exports.validateYoutubeUrl = exports.validateVideoFile = exports.validateVideoFileType = void 0;
+exports.firstInvalidStep = exports.wizardTransition = exports.Wizard = exports.WizardDialog = exports.flattenScreens = exports.searchLauncherSections = exports.searchLauncher = exports.NewTabLink = exports.PinToggle = exports.NavLauncher = exports.LauncherTrigger = exports.KbdShortcut = exports.Kbd = exports.QuickAddSheet = exports.ProductCardSkeleton = exports.ProductCardGrid = exports.unitPrice = exports.discountAmount = exports.discountPercent = exports.formatPrice = exports.firstAvailableSelection = exports.priceRange = exports.remainingStock = exports.isOptionAvailable = exports.findVariant = exports.selectionComplete = exports.stockState = exports.LOW_STOCK_THRESHOLD = exports.defaultMediaLightboxLabels = exports.defaultMediaGalleryLabels = exports.MediaLightbox = exports.MediaGallery = exports.PaymentOptionGroup = exports.PaymentOption = exports.AddressCardGroup = exports.AddressCard = exports.DetailSections = exports.ReviewList = void 0;
 const Accordion_1 = __importDefault(require("./Components/Accordion/Accordion"));
 exports.Accordion = Accordion_1.default;
 const AlertDialog_1 = __importDefault(require("./Components/AlertDialog/AlertDialog"));
@@ -469,6 +469,12 @@ 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 StatusTag_1 = require("./Components/StatusTag/StatusTag");
+Object.defineProperty(exports, "StatusTag", { enumerable: true, get: function () { return __importDefault(StatusTag_1).default; } });
+var CircularProgress_1 = require("./Components/CircularProgress/CircularProgress");
+Object.defineProperty(exports, "CircularProgress", { enumerable: true, get: function () { return __importDefault(CircularProgress_1).default; } });
+var FormDrawer_1 = require("./Components/FormDrawer/FormDrawer");
+Object.defineProperty(exports, "FormDrawer", { enumerable: true, get: function () { return __importDefault(FormDrawer_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");
@@ -499,6 +505,14 @@ 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; } });
+var BulkSelectionBar_1 = require("./Components/BulkSelectionBar/BulkSelectionBar");
+Object.defineProperty(exports, "BulkSelectionBar", { enumerable: true, get: function () { return __importDefault(BulkSelectionBar_1).default; } });
+var SectionRail_1 = require("./Components/SectionRail/SectionRail");
+Object.defineProperty(exports, "SectionRail", { enumerable: true, get: function () { return __importDefault(SectionRail_1).default; } });
+var CalendarGrid_1 = require("./Components/CalendarGrid/CalendarGrid");
+Object.defineProperty(exports, "CalendarGrid", { enumerable: true, get: function () { return __importDefault(CalendarGrid_1).default; } });
+var AudioRecorder_1 = require("./Components/AudioRecorder/AudioRecorder");
+Object.defineProperty(exports, "AudioRecorder", { enumerable: true, get: function () { return __importDefault(AudioRecorder_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; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.4.2-beta.59",
+  "version": "2.4.2-beta.60",
   "description": "React component library for Pixelize apps: themeable Chakra-based components, design tokens and light/dark brand theming.",
   "keywords": [
     "react",