@caratlogic/design-system 0.1.44 → 0.1.45

package/dist/index.d.ts

@@ -53,6 +53,7 @@ export * from './components/molecules/Field';
 export * from './components/molecules/CustomField';
 export * from './components/molecules/FilterSelect';
 export * from './components/molecules/Filters';
+export * from './components/molecules/FloatingSlideOver';
 export * from './components/molecules/SavedSearches';
 export * from './components/molecules/InAppNotificationCard';
 export * from './components/molecules/FormSectionCard';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.esm.js

@@ -43802,6 +43802,154 @@ function TriStateFilter({ value, onChange, ariaLabel, compact = false, }) {
         }) }));
 }
 
+const SlideOut = ({ open, onOpenChange, ...props }) => {
+    const scheduleLockRelease = useOverlayBodyLockRelease(open);
+    return (jsx(DialogPrimitive.Root, { ...props, open: open, onOpenChange: (next) => {
+            onOpenChange?.(next);
+            if (!next)
+                scheduleLockRelease();
+        } }));
+};
+const SlideOutTrigger = DialogPrimitive.Trigger;
+const SlideOutClose = DialogPrimitive.Close;
+const SlideOutPortal = DialogPrimitive.Portal;
+// Overlay
+const SLIDE_OUT_OVERLAY_CLASS_NAME = 'fixed inset-0 z-40 bg-black/50';
+const SLIDE_OUT_OVERLAY_BLUR_CLASS_NAME = 'backdrop-blur-sm';
+/** The slide-outs' backdrop, dimmed and slightly blurred; other panels over the page reuse it to match. */
+const SLIDE_OUT_BACKDROP_CLASS_NAME = cn(SLIDE_OUT_OVERLAY_CLASS_NAME, SLIDE_OUT_OVERLAY_BLUR_CLASS_NAME);
+const SlideOutOverlay = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Overlay, { ref: ref, className: cn(SLIDE_OUT_OVERLAY_CLASS_NAME, className), ...props })));
+SlideOutOverlay.displayName = DialogPrimitive.Overlay.displayName;
+// Positional classes per edge. `right` is the historical default and its
+// value is byte-for-byte what SlideOutContent always rendered.
+const slideOutSideClasses = {
+    right: 'right-0 top-0 h-full w-[488px] max-w-full border-l slide-in-from-right',
+    left: 'left-0 top-0 h-full w-[488px] max-w-full border-r slide-in-from-left',
+    top: 'inset-x-0 top-0 h-1/3 w-full border-b slide-in-from-top',
+    bottom: 'inset-x-0 bottom-0 h-1/3 w-full border-t slide-in-from-bottom',
+};
+// Content — slide-out panel. Defaults to a right-anchored 488px drawer;
+// pass `side` to anchor to any edge (absorbs the old sheet/drawer use cases).
+const SlideOutContent = React.forwardRef(({ className, children, overlayClassName, side = 'right', ...props }, ref) => (jsxs(SlideOutPortal, { children: [jsx(SlideOutOverlay, { className: overlayClassName ?? SLIDE_OUT_OVERLAY_BLUR_CLASS_NAME }), jsx(DialogPrimitive.Content, { ref: ref, className: cn('fixed z-50 border-border bg-card text-card-foreground shadow-xl animate-in', slideOutSideClasses[side], className), ...props, children: children })] })));
+SlideOutContent.displayName = DialogPrimitive.Content.displayName;
+// Header — owns the standard 16px padding and bottom border.
+const SlideOutHeader = ({ className, ...props }) => (jsx("div", { className: cn('flex flex-col space-y-1.5 border-b border-border px-4 py-4 text-xs', className), ...props }));
+SlideOutHeader.displayName = 'SlideOutHeader';
+// Title
+const SlideOutTitle = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold', className), ...props })));
+SlideOutTitle.displayName = DialogPrimitive.Title.displayName;
+// Description
+const SlideOutDescription = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
+SlideOutDescription.displayName = DialogPrimitive.Description.displayName;
+
+/** The app's content area, right of the sidebar; the panel starts at its left edge. */
+const SIDEBAR_INSET_SELECTOR = '[data-slot="sidebar-inset"]';
+/** Dropdowns, menus and listboxes, portaled outside the panel; an outside click first closes them. */
+const OPEN_LAYER_SELECTOR = '[data-slot="popover-content"], [role="menu"], [role="listbox"]';
+/** How long the panel takes to slide out; it stays mounted until then. */
+const SLIDE_OUT_MS = 200;
+/** The top-level element under `<body>` that holds `node`: the app root, for a node in the page. */
+function getBodyChild(node) {
+    let current = node;
+    while (current && current.parentElement !== node.ownerDocument.body)
+        current = current.parentElement;
+    return current;
+}
+
+/**
+ * Backdrop handlers that call `onClose` on a click outside the panel, unless a dropdown or menu was open
+ * when the press began: that click only closes the dropdown.
+ */
+function useBackdropClose(onClose) {
+    const layerOpenRef = useRef(false);
+    return {
+        onPointerDown: () => {
+            layerOpenRef.current = !!document.querySelector(OPEN_LAYER_SELECTOR);
+        },
+        onClick: () => {
+            if (!layerOpenRef.current)
+                onClose?.();
+            layerOpenRef.current = false;
+        },
+    };
+}
+/** Keeps the panel mounted while it slides out; `closing` is true for that time. */
+function useSlideOverPresence(open) {
+    const [mounted, setMounted] = useState(open);
+    useEffect(() => {
+        if (open) {
+            setMounted(true);
+            return;
+        }
+        const timer = window.setTimeout(() => setMounted(false), SLIDE_OUT_MS);
+        return () => window.clearTimeout(timer);
+    }, [open]);
+    return { mounted: mounted || open, closing: mounted && !open };
+}
+/** Where the content area right of the sidebar starts, in px from the viewport's left; 0 without a sidebar. */
+function useSidebarInsetLeft(active) {
+    const [left, setLeft] = useState(0);
+    useLayoutEffect(() => {
+        if (!active)
+            return;
+        const inset = document.querySelector(SIDEBAR_INSET_SELECTOR);
+        if (!inset)
+            return;
+        const measure = () => setLeft(Math.max(0, inset.getBoundingClientRect().left));
+        measure();
+        // The inset narrows or widens with the window and the sidebar.
+        const observer = new ResizeObserver(measure);
+        observer.observe(inset);
+        window.addEventListener('resize', measure);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener('resize', measure);
+        };
+    }, [active]);
+    return left;
+}
+/**
+ * While `active`, makes the app behind the panel inert (no clicks, focus or screen reader) and moves focus
+ * into `panel`; on close, focus goes back where it was. Popovers and menus portal outside the app root, so
+ * they stay usable.
+ */
+function useModalPanel(anchor, panel, active) {
+    useEffect(() => {
+        const root = anchor.current && getBodyChild(anchor.current);
+        if (!active || !(root instanceof HTMLElement))
+            return;
+        const previousFocus = document.activeElement;
+        const wasInert = root.inert;
+        root.inert = true;
+        panel.current?.focus({ preventScroll: true });
+        return () => {
+            root.inert = wasInert;
+            if (previousFocus instanceof HTMLElement)
+                previousFocus.focus({ preventScroll: true });
+        };
+    }, [anchor, panel, active]);
+}
+
+/**
+ * A large panel that slides in from the right over the page and covers everything right of the sidebar,
+ * floating with a small gap on every side and rounded corners, on the slide-outs' dimmed, slightly blurred
+ * backdrop. The page behind, sidebar included, can't be used until it closes. A click outside calls
+ * `onClose`; the content closes it otherwise (a close button, Escape).
+ */
+function FloatingSlideOver({ open, title, onClose, className, children, }) {
+    const anchorRef = useRef(null);
+    const panelRef = useRef(null);
+    const { mounted, closing } = useSlideOverPresence(open);
+    const left = useSidebarInsetLeft(mounted);
+    useModalPanel(anchorRef, panelRef, mounted);
+    const backdrop = useBackdropClose(onClose);
+    const state = closing ? 'closed' : 'open';
+    return (jsxs(Fragment$2, { children: [jsx("span", { ref: anchorRef, hidden: true }), mounted &&
+                createPortal(jsxs(Fragment$2, { children: [jsx("div", { "aria-hidden": "true", "data-state": state, className: SLIDE_OUT_BACKDROP_CLASS_NAME, onPointerDown: backdrop.onPointerDown, onClick: backdrop.onClick }), jsx("div", { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, tabIndex: -1, "data-state": state, 
+                            // The same gap from the sidebar's edge as on the other sides.
+                            style: { left: `calc(${left}px + 0.5rem)` }, className: cn('fixed inset-y-2 right-2 z-50 flex flex-col overflow-hidden rounded-xl border border-border bg-background shadow-xl outline-none', 'data-[state=open]:animate-in data-[state=open]:slide-in-from-right data-[state=open]:duration-300 data-[state=open]:ease-out', 'data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right data-[state=closed]:duration-200 data-[state=closed]:ease-in', 'motion-reduce:animate-none', className), children: children })] }), document.body)] }));
+}
+
 /** Read-only filter summaries of a saved search, as pills; optionally one line ending in "+N more". */
 function SavedSearchChipList({ chips, emptyText = 'No filters', collapsible = false, className, }) {
     const { listRef, expanded, toggle, visibleChips, hiddenCount } = useChipOverflow(chips, collapsible);
@@ -73449,7 +73597,7 @@ const SidebarRail = React.forwardRef(({ className, ...props }, ref) => {
     return (jsx("button", { ref: ref, "data-sidebar": "rail", "aria-label": "Toggle Sidebar", tabIndex: -1, onClick: toggleSidebar, title: "Toggle Sidebar", className: cn('absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex', '[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize', '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize', 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar', 'group-data-[side=left][data-collapsible=offcanvas]:-right-2', 'group-data-[side=right][data-collapsible=offcanvas]:-left-2', className), ...props }));
 });
 SidebarRail.displayName = 'SidebarRail';
-const SidebarInset = React.forwardRef(({ className, ...props }, ref) => (jsx("main", { ref: ref, className: cn('relative flex min-h-screen flex-1 flex-col bg-background', 'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className), ...props })));
+const SidebarInset = React.forwardRef(({ className, ...props }, ref) => (jsx("main", { ref: ref, "data-slot": "sidebar-inset", className: cn('relative flex min-h-screen flex-1 flex-col bg-background', 'peer-data-[variant=inset]:min-h-[calc(100svh-1rem)] md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow', className), ...props })));
 SidebarInset.displayName = 'SidebarInset';
 const SidebarInput = React.forwardRef(({ className, ...props }, ref) => (jsx("input", { ref: ref, "data-sidebar": "input", className: cn('h-8 w-full bg-background text-sm shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring', className), ...props })));
 SidebarInput.displayName = 'SidebarInput';
@@ -73587,42 +73735,6 @@ const AppSidebar = ({ brand, navGroups = [], footer, className, }) => {
     return (jsxs(Sidebar, { collapsible: "icon", className: className, children: [brand && (jsx(SidebarHeader, { children: jsx(BrandHeader$1, { brand: brand }) })), jsx(SidebarContent, { children: navGroups.map((group) => (jsx(NavGroupSection, { group: group }, group.label ?? 'nav-group'))) }), footer && jsx(SidebarFooter, { children: footer }), jsx(SidebarRail, {})] }));
 };
 
-const SlideOut = ({ open, onOpenChange, ...props }) => {
-    const scheduleLockRelease = useOverlayBodyLockRelease(open);
-    return (jsx(DialogPrimitive.Root, { ...props, open: open, onOpenChange: (next) => {
-            onOpenChange?.(next);
-            if (!next)
-                scheduleLockRelease();
-        } }));
-};
-const SlideOutTrigger = DialogPrimitive.Trigger;
-const SlideOutClose = DialogPrimitive.Close;
-const SlideOutPortal = DialogPrimitive.Portal;
-// Overlay
-const SlideOutOverlay = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-40 bg-black/50', className), ...props })));
-SlideOutOverlay.displayName = DialogPrimitive.Overlay.displayName;
-// Positional classes per edge. `right` is the historical default and its
-// value is byte-for-byte what SlideOutContent always rendered.
-const slideOutSideClasses = {
-    right: 'right-0 top-0 h-full w-[488px] max-w-full border-l slide-in-from-right',
-    left: 'left-0 top-0 h-full w-[488px] max-w-full border-r slide-in-from-left',
-    top: 'inset-x-0 top-0 h-1/3 w-full border-b slide-in-from-top',
-    bottom: 'inset-x-0 bottom-0 h-1/3 w-full border-t slide-in-from-bottom',
-};
-// Content — slide-out panel. Defaults to a right-anchored 488px drawer;
-// pass `side` to anchor to any edge (absorbs the old sheet/drawer use cases).
-const SlideOutContent = React.forwardRef(({ className, children, overlayClassName, side = 'right', ...props }, ref) => (jsxs(SlideOutPortal, { children: [jsx(SlideOutOverlay, { className: overlayClassName ?? 'backdrop-blur-sm' }), jsx(DialogPrimitive.Content, { ref: ref, className: cn('fixed z-50 border-border bg-card text-card-foreground shadow-xl animate-in', slideOutSideClasses[side], className), ...props, children: children })] })));
-SlideOutContent.displayName = DialogPrimitive.Content.displayName;
-// Header — owns the standard 16px padding and bottom border.
-const SlideOutHeader = ({ className, ...props }) => (jsx("div", { className: cn('flex flex-col space-y-1.5 border-b border-border px-4 py-4 text-xs', className), ...props }));
-SlideOutHeader.displayName = 'SlideOutHeader';
-// Title
-const SlideOutTitle = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-lg font-semibold', className), ...props })));
-SlideOutTitle.displayName = DialogPrimitive.Title.displayName;
-// Description
-const SlideOutDescription = React.forwardRef(({ className, ...props }, ref) => (jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props })));
-SlideOutDescription.displayName = DialogPrimitive.Description.displayName;
-
 const SpecList = ({ rows, zebra = true, className, }) => {
     const visible = rows.filter((r) => !r.hidden);
     if (visible.length === 0)
@@ -77856,6 +77968,7 @@ function FilterField(props) {
 
 /** Leaves without applying; the draft is discarded. */
 const BACK_LABEL = 'Back without applying';
+const CLOSE_LABEL = 'Close without applying';
 const LOADING_LABEL = 'Loading filters';
 const ERROR_TITLE = "Couldn't load filters";
 const DEFAULT_ERROR_MESSAGE = 'Something went wrong while loading the filters. Check your connection and try again.';
@@ -78369,11 +78482,11 @@ function FilterCardOverlay({ node, }) {
 }
 
 /** Full-page filter screen (e.g. an advanced search): one sticky header with every action, then the scrolling card grid. */
-function FilterSurface({ title, headerActions, primaryActions, chips, onClose, status = 'ready', errorMessage, onRetry, skeleton, children, }) {
+function FilterSurface({ title, headerActions, primaryActions, chips, onClose, closeButton = 'back', status = 'ready', errorMessage, onRetry, skeleton, children, }) {
     useCloseOnEscape(onClose);
     const ready = status === 'ready';
     const actions = ready ? primaryActions : undefined;
-    return (jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 bg-background px-3 py-2.5", children: [jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsx(ArrowLeft, {}) }), jsx("h1", { className: "sr-only", children: title }), jsx("div", { className: "min-w-0 flex-1", children: ready && chips }), jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headerActions, actions] })] }), jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsx("div", { className: "flex flex-col gap-3", children: children })) })] }));
+    return (jsxs("div", { role: "region", "aria-label": title, className: "flex h-full min-h-0 flex-col bg-background", children: [jsxs("header", { className: "sticky top-0 z-20 flex shrink-0 flex-wrap items-center gap-x-3 gap-y-2 bg-background px-3 py-2.5", children: [closeButton === 'back' && (jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": BACK_LABEL, title: BACK_LABEL, onClick: onClose, children: jsx(ArrowLeft, {}) })), jsx("h1", { className: "sr-only", children: title }), jsx("div", { className: "min-w-0 flex-1", children: ready && chips }), jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [headerActions, actions, closeButton === 'close' && (jsxs(Fragment$2, { children: [jsx("span", { "aria-hidden": "true", className: "mx-1 h-6 w-px bg-border" }), jsx(IconButton, { appearance: "ghost", size: "sm", "aria-label": CLOSE_LABEL, title: CLOSE_LABEL, onClick: onClose, children: jsx(X$2, {}) })] }))] })] }), jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 pb-3", children: status === 'loading' ? (jsx(FilterSurfaceSkeleton, { children: skeleton })) : status === 'error' ? (jsx(FilterSurfaceError, { message: errorMessage ?? DEFAULT_ERROR_MESSAGE, onRetry: onRetry })) : (jsx("div", { className: "flex flex-col gap-3", children: children })) })] }));
 }
 /**
  * Lets the user drag the cards of its `FilterSurfaceGroup`s (those with a `sortableId`) into any order and
@@ -80974,5 +81087,5 @@ var RichTextAreaImpl = /*#__PURE__*/Object.freeze({
   RichTextarea: RichTextarea
 });
 
-export { ACTIVITY_CATEGORIES, ACTIVITY_CATEGORY_META, ActionBadge, ActionButtonWithTooltip, ActiveFilterChips, ActivityFeed, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, CompanyCard, ConfirmDialog, ContactTypeFilter, ContainsFilter, CopyButton, CountrySelect, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomFieldInput, CustomFieldValue, CustomTable, CustomizeColumnsDrawer, DATE_PRESET_OPTIONS, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DateRangeFilter, DetailChip, DetailPageLayout, DetailPageSkeleton, DetailSection, DocumentDeleteDialog, DocumentDetailSkeleton, DocumentHero, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyValue, EntityHeader, FILTER_COUNT_BADGE_CLASS_NAME, Field, FieldSkeleton, FileUploader, FilterCardSkeleton, FilterCellPopover, FilterEmptyState, FilterField, FilterFieldCard, FilterFieldCell, FilterFieldControl, FilterMultiSelect, FilterPanel, FilterSelect, FilterSurface, FilterSurfaceGroup, FilterSurfaceMore, FilterSurfaceSortable, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, IdListInput, InAppNotificationCard, InAppNotificationsPanel, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, LineItemsCard, LineProductCell, LineProductThumb, LineProductTypeChip, LineRowActionsMenu, LineTable, LineTableEmpty, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, NOT_CAPTURED, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberExpressionFilter, NumberInput, NumberRangeInputs, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PickListDropdown, PickListFilter, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SAVED_SEARCH_NAME_MAX_LENGTH, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, SaveSearchDialog, SavedSearchChipList, SavedSearchDetail, SavedSearchesMenu, ScaleRangeFilter, ScrollFade, SearchBox, SearchInput, SearchableSelect, SectionCard, SectionIcon, SegmentedControl, ShareDialog, ShareMenu, ShimmerTable, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SlideOut, SlideOutClose, SlideOutContent, SlideOutDescription, SlideOutHeader, SlideOutOverlay, SlideOutPortal, SlideOutTitle, SlideOutTrigger, Slider, SpecList, Spinner, SquareSkeleton, StateSelect, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableRowsSkeleton, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, TimePicker, ToggleSwitch, TriStateFilter, TruncateTooltip, TruncatedLabel, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, asList, asText, badgeVariants, buildBulkShareMessage, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildNumberRuleHelp, buildWhatsappUrl, buttonVariants, cn, countries, countryByCode, createVideoMediaItem, describeFilterValue, dropdownMenuItemDestructiveClass, expandScaleRange, fieldTypeIcon, filterSavedSearches, findRegion, flagEmoji, formatAddressLocation, formatDateRange, formatFileSize, formatNumberRange, formatScaleRange, formatSelectedCount, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getCountryName, getInitials, getStatesOfCountry, iconButtonVariants, inAppNotificationCardA11y, inAppNotificationsPanelA11y, isBlank, isDuplicateSearchName, isFilterValueActive, isIndiaCountry, isKnownRegion, isPathActive, isValidAlpha2CountryCode, isValidSearchName, isValueEmpty, notify, parseNumberExpression, releaseStaleOverlayBodyLock, renderBadge, resolveCountryCode, resolveDatePreset, resolveDateRange, richTextChangeText, splitIdList, toAddressFormValues, toBoolValue, toContainsValue, toDateValue, toIdsValue, toListValue, toNumberValue, toScaleValue, useAuditShowMore, useBadge, useButton, useDropdownMenu, useInAppNotificationsPanel, useNavbar, useSidebar, valueOfType, videoThumbnailSrc, watchOverlayBodyLock };
+export { ACTIVITY_CATEGORIES, ACTIVITY_CATEGORY_META, ActionBadge, ActionButtonWithTooltip, ActiveFilterChips, ActivityFeed, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, CompanyCard, ConfirmDialog, ContactTypeFilter, ContainsFilter, CopyButton, CountrySelect, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomFieldInput, CustomFieldValue, CustomTable, CustomizeColumnsDrawer, DATE_PRESET_OPTIONS, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DateRangeFilter, DetailChip, DetailPageLayout, DetailPageSkeleton, DetailSection, DocumentDeleteDialog, DocumentDetailSkeleton, DocumentHero, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyValue, EntityHeader, FILTER_COUNT_BADGE_CLASS_NAME, Field, FieldSkeleton, FileUploader, FilterCardSkeleton, FilterCellPopover, FilterEmptyState, FilterField, FilterFieldCard, FilterFieldCell, FilterFieldControl, FilterMultiSelect, FilterPanel, FilterSelect, FilterSurface, FilterSurfaceGroup, FilterSurfaceMore, FilterSurfaceSortable, FloatingSlideOver, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, IdListInput, InAppNotificationCard, InAppNotificationsPanel, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, LineItemsCard, LineProductCell, LineProductThumb, LineProductTypeChip, LineRowActionsMenu, LineTable, LineTableEmpty, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, NOT_CAPTURED, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberExpressionFilter, NumberInput, NumberRangeInputs, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PickListDropdown, PickListFilter, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SAVED_SEARCH_NAME_MAX_LENGTH, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, SaveSearchDialog, SavedSearchChipList, SavedSearchDetail, SavedSearchesMenu, ScaleRangeFilter, ScrollFade, SearchBox, SearchInput, SearchableSelect, SectionCard, SectionIcon, SegmentedControl, ShareDialog, ShareMenu, ShimmerTable, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SlideOut, SlideOutClose, SlideOutContent, SlideOutDescription, SlideOutHeader, SlideOutOverlay, SlideOutPortal, SlideOutTitle, SlideOutTrigger, Slider, SpecList, Spinner, SquareSkeleton, StateSelect, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableRowsSkeleton, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, TimePicker, ToggleSwitch, TriStateFilter, TruncateTooltip, TruncatedLabel, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, asList, asText, badgeVariants, buildBulkShareMessage, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildNumberRuleHelp, buildWhatsappUrl, buttonVariants, cn, countries, countryByCode, createVideoMediaItem, describeFilterValue, dropdownMenuItemDestructiveClass, expandScaleRange, fieldTypeIcon, filterSavedSearches, findRegion, flagEmoji, formatAddressLocation, formatDateRange, formatFileSize, formatNumberRange, formatScaleRange, formatSelectedCount, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getCountryName, getInitials, getStatesOfCountry, iconButtonVariants, inAppNotificationCardA11y, inAppNotificationsPanelA11y, isBlank, isDuplicateSearchName, isFilterValueActive, isIndiaCountry, isKnownRegion, isPathActive, isValidAlpha2CountryCode, isValidSearchName, isValueEmpty, notify, parseNumberExpression, releaseStaleOverlayBodyLock, renderBadge, resolveCountryCode, resolveDatePreset, resolveDateRange, richTextChangeText, splitIdList, toAddressFormValues, toBoolValue, toContainsValue, toDateValue, toIdsValue, toListValue, toNumberValue, toScaleValue, useAuditShowMore, useBadge, useButton, useDropdownMenu, useInAppNotificationsPanel, useNavbar, useSidebar, valueOfType, videoThumbnailSrc, watchOverlayBodyLock };
 //# sourceMappingURL=index.esm.js.map