@caratlogic/design-system 0.1.5 → 0.1.7

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { cn } from './lib/utils';
 export * from './lib/badge';
 export * from './lib/notify';
-export { releaseStaleOverlayBodyLock } from './lib/overlayBodyLock';
+export { releaseStaleOverlayBodyLock, watchOverlayBodyLock, } from './lib/overlayBodyLock';
 export * from './components/atoms/ActionButtonWithTooltip';
 export * from './components/atoms/Alert';
 export * from './components/atoms/Badge';
@@ -75,6 +75,7 @@ export * from './components/molecules/SlideOut';
 export * from './components/molecules/SpecList';
 export * from './components/molecules/TablePagination';
 export * from './components/molecules/TagsInput';
+export * from './components/molecules/TimePicker';
 export * from './components/molecules/WarehouseComboBox';
 export * from './components/molecules/ZoomSplitViewer';
 export * from './components/organisms/AdvancedSearchDrawer';

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":"AAKA,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,OAAO,EACL,2BAA2B,EAC3B,oBAAoB,GACrB,MAAM,uBAAuB,CAAC;AAG/B,cAAc,4CAA4C,CAAC;AAC3D,cAAc,0BAA0B,CAAC;AACzC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,kCAAkC,CAAC;AACjD,cAAc,2BAA2B,CAAC;AAC1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,oCAAoC,CAAC;AAGnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,wCAAwC,CAAC;AACvD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,YAAY,EACV,MAAM,IAAI,iBAAiB,EAC3B,gBAAgB,GACjB,MAAM,oCAAoC,CAAC;AAC5C,cAAc,0CAA0C,CAAC;AACzD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,qCAAqC,CAAC;AACpD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qCAAqC,CAAC;AACpD,cAAc,wCAAwC,CAAC;AACvD,cAAc,mCAAmC,CAAC;AAClD,cAAc,0CAA0C,CAAC;AACzD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,wCAAwC,CAAC;AACvD,cAAc,qCAAqC,CAAC;AACpD,cAAc,sCAAsC,CAAC;AACrD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sCAAsC,CAAC;AACrD,cAAc,yCAAyC,CAAC;AACxD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8CAA8C,CAAC;AAC7D,cAAc,uCAAuC,CAAC;AACtD,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,oCAAoC,CAAC;AACnD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,qCAAqC,CAAC;AACpD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,wCAAwC,CAAC;AACvD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AAGvD,cAAc,6CAA6C,CAAC;AAC5D,cAAc,0CAA0C,CAAC;AACzD,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qCAAqC,CAAC;AACpD,cAAc,0CAA0C,CAAC;AACzD,cAAc,qCAAqC,CAAC;AACpD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yCAAyC,CAAC;AAGxD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0CAA0C,CAAC;AACzD,cAAc,uCAAuC,CAAC;AACtD,cAAc,iCAAiC,CAAC;AAGhD,cAAc,sCAAsC,CAAC;AACrD,cAAc,yCAAyC,CAAC;AAGxD,cAAc,8BAA8B,CAAC;AAG7C,cAAc,6BAA6B,CAAC"}

package/dist/index.esm.js

@@ -4345,13 +4345,19 @@ const notify = {
     promise: toast.promise.bind(toast),
 };
 
+/**
+ * Only overlays that actually lock `<body>` count. `[data-radix-popper-content-wrapper]`
+ * is deliberately absent: a tooltip renders into one, so including it made an
+ * open tooltip — say, on the Edit button you just clicked — look like a live
+ * modal and suppress the release, leaving the page unclickable. Modal poppers
+ * (menus, selects) still match through their roles.
+ */
 const OVERLAY_CONTENT_SELECTOR = [
     '[data-slot="dialog-content"]',
     '[role="dialog"]',
     '[role="alertdialog"]',
     '[role="menu"]',
     '[role="listbox"]',
-    '[data-radix-popper-content-wrapper]',
 ].join(',');
 /**
  * `@radix-ui/react-dismissable-layer` keeps the value it must restore to
@@ -4363,6 +4369,36 @@ const OVERLAY_CONTENT_SELECTOR = [
  * Clearing is only safe once nothing is on screen, so this is a no-op while any
  * overlay content is still mounted.
  */
+/**
+ * Watches `<body>` and clears a lock that outlives every overlay.
+ *
+ * The per-overlay hooks handle the normal close path; this is the backstop for
+ * the ones they cannot see — an overlay unmounted by a route change, a layer
+ * combination nobody anticipated, a third-party popup. Returns a disposer.
+ *
+ * Cheap: an attribute-scoped MutationObserver that only reacts when something
+ * actually writes `style` or `data-scroll-locked` on `<body>`.
+ */
+function watchOverlayBodyLock() {
+    if (typeof document === 'undefined')
+        return () => { };
+    let timer;
+    const check = () => {
+        window.clearTimeout(timer);
+        // Outlive the exit animation, so a legitimately-open overlay is still
+        // mounted when `releaseStaleOverlayBodyLock` looks for it.
+        timer = window.setTimeout(() => releaseStaleOverlayBodyLock(), 500);
+    };
+    const observer = new MutationObserver(check);
+    observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['style', 'data-scroll-locked'],
+    });
+    return () => {
+        window.clearTimeout(timer);
+        observer.disconnect();
+    };
+}
 function releaseStaleOverlayBodyLock() {
     if (typeof document === 'undefined')
         return;
@@ -12093,6 +12129,9 @@ function useRefundToWallet(open) {
 
 const ConfirmDialog = ({ open, onOpenChange, title, description, info, confirmLabel = 'Yes', cancelLabel = 'Cancel', confirmVariant = 'default', icon: Icon = Trash2, disabled = false, onConfirm, onCancel, }) => {
     const { refundToWallet, setRefundToWallet } = useRefundToWallet(open);
+    // Opened from a modal menu row, two dismissable layers overlap and Radix
+    // restores `pointer-events: none` to <body> on close, freezing the page.
+    useOverlayBodyLockRelease(open);
     return (jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxs(DialogContent, { className: "gap-3 p-5", children: [jsxs(DialogHeader, { className: "gap-1.5", children: [jsxs(DialogTitle, { className: "flex items-center gap-2", children: [confirmVariant === 'destructive' && (jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: jsx(Icon, { className: "h-3.5 w-3.5 text-destructive" }) })), jsx("span", { children: title })] }), description && jsx(DialogDescription, { children: description }), info && (jsx(InfoCard, { info: info, title: title, refundToWallet: refundToWallet, onRefundChange: setRefundToWallet }))] }), jsxs(DialogFooter, { className: "mt-1", children: [jsx(Button$1, { variant: "outline", onClick: () => {
                                 onCancel?.();
                                 onOpenChange(false);
@@ -28576,10 +28615,12 @@ const SIZE_WIDTH = {
  */
 function Modal({ open, onClose, title, icon, children, footer, size = 'md', hideCloseButton = false, className, bodyClassName, }) {
     const maxWidth = SIZE_WIDTH[size];
+    // See ConfirmDialog: overlapping dismissable layers leak the <body> lock.
+    useOverlayBodyLockRelease(open);
     return (jsx(Dialog, { open: open, onOpenChange: (o) => !o && onClose(), children: jsxs(DialogContent, { hideCloseButton: true, style: {
                 width: `min(${maxWidth}px, calc(100vw - 2rem))`,
                 maxWidth: `${maxWidth}px`,
-            }, className: cn('flex max-h-[calc(100vh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-none', className), children: [jsxs("header", { className: "flex items-center justify-between gap-4 border-b border-border px-6 py-4", children: [jsx(DialogPrimitive.Title, { asChild: true, children: jsxs("div", { className: "flex items-center gap-2 text-base font-medium text-foreground", children: [icon, jsx("span", { children: title })] }) }), !hideCloseButton && (jsx(DialogPrimitive.Close, { "aria-label": "Close", className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-label transition-colors hover:bg-gray-100 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30", children: jsx(X$2, { className: "h-4 w-4" }) }))] }), jsx("div", { className: cn('flex-1 overflow-y-auto', bodyClassName), children: children }), footer && (jsx("footer", { className: "flex items-center justify-end gap-3 border-t border-border px-6 py-4", children: footer }))] }) }));
+            }, className: cn('flex max-h-[calc(100vh-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-none', className), children: [jsxs("header", { className: "flex items-center justify-between gap-4 border-b border-border px-6 py-4", children: [jsx(DialogPrimitive.Title, { asChild: true, children: jsxs("div", { className: "flex items-center gap-2 text-base font-medium text-foreground", children: [icon, jsx("span", { children: title })] }) }), !hideCloseButton && (jsx(DialogPrimitive.Close, { "aria-label": "Close", className: "inline-flex h-8 w-8 items-center justify-center rounded-md text-label transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30", children: jsx(X$2, { className: "h-4 w-4" }) }))] }), jsx("div", { className: cn('flex-1 overflow-y-auto', bodyClassName), children: children }), footer && (jsx("footer", { className: "flex items-center justify-end gap-3 border-t border-border px-6 py-4", children: footer }))] }) }));
 }
 
 /**
@@ -57666,6 +57707,158 @@ function TagsInput({ value, onChange, placeholder, helperText, uppercase = false
     return (jsxs("div", { className: "w-full", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx(Input, { value: input, onChange: onInputChange, onKeyDown: onInputKeyDown, placeholder: placeholder || 'Type and Press Enter', className: "flex-1 bg-formInput" }), jsxs(Button$1, { type: "button", onClick: addTag, disabled: addDisabled, className: "h-9 gap-1.5 disabled:opacity-50", children: [jsx(Plus, { className: "h-4 w-4" }), "Add"] })] }), helperText && (jsx("p", { className: "mt-1.5 text-xs text-muted-foreground", children: helperText })), value.length > 0 && (jsx("div", { className: "mt-3 flex flex-wrap gap-2", children: value.map((tag, idx) => (jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-secondary px-2 py-1 text-xs font-medium text-foreground", children: [tag, jsx("button", { type: "button", onClick: () => removeTag(idx), "aria-label": `Remove ${tag}`, className: "cursor-pointer text-muted-foreground transition-colors hover:text-foreground", children: jsx(X$2, { className: "h-3 w-3" }) })] }, idx))) }))] }));
 }
 
+/**
+ * One scrolling column of the picker (hours, minutes or period). The selected
+ * row is scrolled into view whenever it changes, so reopening the popover lands
+ * on the current value instead of at midnight.
+ */
+function TimeColumn({ label, options, selected, onSelect, }) {
+    const listRef = useRef(null);
+    const activeRef = useRef(null);
+    useEffect(() => {
+        const list = listRef.current;
+        const active = activeRef.current;
+        if (!list || !active)
+            return;
+        // `scrollIntoView` would scroll the page as well as the column.
+        list.scrollTop =
+            active.offsetTop - list.clientHeight / 2 + active.clientHeight / 2;
+    }, [selected]);
+    return (jsxs("div", { className: "flex min-w-0 flex-col", children: [jsx("span", { className: "px-1 pb-1.5 text-center text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: label }), jsx("div", { ref: listRef, role: "listbox", "aria-label": label, className: "scrollbar-thin h-[184px] overflow-y-auto px-1", children: jsx("div", { className: "flex flex-col gap-0.5", children: options.map((option) => {
+                        const isSelected = option.value === selected;
+                        return (jsx("button", { ref: isSelected ? activeRef : undefined, type: "button", role: "option", "aria-selected": isSelected, onClick: () => onSelect(option.value), className: cn('rounded-md px-3 py-1.5 text-center text-sm tabular-nums transition-colors', 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', isSelected
+                                ? 'bg-primary text-primary-foreground'
+                                : 'text-foreground hover:bg-muted'), children: option.label }, option.value));
+                    }) }) })] }));
+}
+
+const TIME_PATTERN = /^(\d{1,2}):(\d{2})(?::\d{2})?$/;
+const pad = (n) => String(n).padStart(2, '0');
+/** Reads `HH:mm` / `HH:mm:ss`. Returns null for anything out of range. */
+function parseTimeValue(value) {
+    const match = TIME_PATTERN.exec((value ?? '').trim());
+    if (!match)
+        return null;
+    const hour = Number(match[1]);
+    const minute = Number(match[2]);
+    if (hour > 23 || minute > 59)
+        return null;
+    return { hour, minute };
+}
+/** The stored form — always 24-hour, whatever the display format. */
+function toTimeValue(hour, minute) {
+    return `${pad(hour)}:${pad(minute)}`;
+}
+function formatTimeDisplay(time, use24Hour) {
+    if (use24Hour)
+        return toTimeValue(time.hour, time.minute);
+    // 0 and 12 both map to 12 — midnight is 12 AM, noon is 12 PM.
+    const hour12 = time.hour % 12 === 0 ? 12 : time.hour % 12;
+    const period = time.hour < 12 ? 'AM' : 'PM';
+    return `${pad(hour12)}:${pad(time.minute)} ${period}`;
+}
+function buildHourOptions(use24Hour) {
+    if (use24Hour) {
+        return Array.from({ length: 24 }, (_, hour) => ({
+            value: hour,
+            label: pad(hour),
+        }));
+    }
+    // 12 first, matching how a clock reads.
+    return Array.from({ length: 12 }, (_, index) => {
+        const hour12 = index === 0 ? 12 : index;
+        return { value: hour12, label: pad(hour12) };
+    });
+}
+function buildMinuteOptions(step) {
+    const safeStep = Number.isFinite(step) && step > 0 ? Math.floor(step) : 1;
+    const options = [];
+    for (let minute = 0; minute < 60; minute += safeStep) {
+        options.push({ value: minute, label: pad(minute) });
+    }
+    return options;
+}
+/** The hour as the 12-hour column shows it (12, 1…11). */
+function toHour12(hour) {
+    return hour % 12 === 0 ? 12 : hour % 12;
+}
+/** Rebuilds a 24-hour hour from a 12-hour column value and its period. */
+function fromHour12(hour12, period) {
+    const base = hour12 % 12;
+    return period === 'PM' ? base + 12 : base;
+}
+function periodOf(hour) {
+    return hour < 12 ? 'AM' : 'PM';
+}
+
+// Only one TimePicker popover should be open at a time — same coordination the
+// DateInput uses, for the same reason: each is its own `modal` Radix Popover, so
+// opening a second does not dismiss the first by outside-click.
+const TIMEPICKER_OPEN_EVENT = 'caratlogic:timepicker-open';
+const PERIOD_OPTIONS = [
+    { value: 0, label: 'AM' },
+    { value: 1, label: 'PM' },
+];
+function TimePicker({ value, onChange, onBlur, name, className, disabled, placeholder = 'Select time', use24Hour = false, minuteStep = 1, hideFooter = false, }) {
+    const [open, setOpen] = useState(false);
+    const instanceId = useId$2();
+    const parsed = parseTimeValue(value);
+    useEffect(() => {
+        const onOtherOpen = (e) => {
+            if (e.detail !== instanceId)
+                setOpen(false);
+        };
+        window.addEventListener(TIMEPICKER_OPEN_EVENT, onOtherOpen);
+        return () => window.removeEventListener(TIMEPICKER_OPEN_EVENT, onOtherOpen);
+    }, [instanceId]);
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        if (next) {
+            window.dispatchEvent(new CustomEvent(TIMEPICKER_OPEN_EVENT, { detail: instanceId }));
+        }
+    };
+    /** Picking one column before the others commits against a 00:00 baseline. */
+    const commit = (hour, minute) => {
+        onChange(toTimeValue(hour, minute));
+    };
+    const handleHour = (picked) => {
+        const minute = parsed?.minute ?? 0;
+        if (use24Hour) {
+            commit(picked, minute);
+            return;
+        }
+        commit(fromHour12(picked, parsed ? periodOf(parsed.hour) : 'AM'), minute);
+    };
+    const handleMinute = (picked) => {
+        commit(parsed?.hour ?? 0, picked);
+    };
+    const handlePeriod = (picked) => {
+        const period = picked === 0 ? 'AM' : 'PM';
+        const hour12 = parsed ? toHour12(parsed.hour) : 12;
+        commit(fromHour12(hour12, period), parsed?.minute ?? 0);
+    };
+    const selectedHour = parsed
+        ? use24Hour
+            ? parsed.hour
+            : toHour12(parsed.hour)
+        : null;
+    // NOTE: `open` is driven from the button's onClick rather than
+    // <PopoverTrigger>, matching DateInput — inside a modal <SlideOut> the
+    // trigger's built-in toggle does not fire in Safari. <PopoverAnchor> is pure
+    // positioning, so a single controlled toggle stays the only source of truth.
+    return (jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: true, children: [jsx(PopoverAnchor, { asChild: true, children: jsxs("button", { type: "button", name: name, onBlur: onBlur, disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, onClick: () => {
+                        if (!disabled)
+                            handleOpenChange(!open);
+                    }, "data-slot": "input", "data-empty": !parsed || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-1 text-left shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:ring-destructive/20 aria-invalid:border-destructive', disabled && 'cursor-not-allowed bg-muted/50 text-label', className), children: [jsx("span", { className: cn('truncate text-sm md:text-sm', parsed ? 'text-foreground' : 'text-placeholder'), children: parsed ? formatTimeDisplay(parsed, use24Hour) : placeholder }), jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground", children: jsx(Clock, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsxs(PopoverContent, { align: "start", className: "w-auto p-3", children: [jsxs("div", { className: "flex gap-1", children: [jsx(TimeColumn, { label: "Hour", options: buildHourOptions(use24Hour), selected: selectedHour, onSelect: handleHour }), jsx(TimeColumn, { label: "Min", options: buildMinuteOptions(minuteStep), selected: parsed?.minute ?? null, onSelect: handleMinute }), !use24Hour && (jsx(TimeColumn, { label: "AM/PM", options: PERIOD_OPTIONS, selected: parsed ? (periodOf(parsed.hour) === 'AM' ? 0 : 1) : null, onSelect: handlePeriod }))] }), !hideFooter && (jsxs("div", { className: "mt-2 flex items-center justify-between gap-2 border-t border-border pt-2", children: [jsx("button", { type: "button", onClick: () => {
+                                    onChange(undefined);
+                                    setOpen(false);
+                                }, className: "rounded-md px-2 py-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Clear" }), jsx("button", { type: "button", onClick: () => {
+                                    const now = new Date();
+                                    commit(now.getHours(), now.getMinutes());
+                                    setOpen(false);
+                                }, className: "rounded-md px-2 py-1 text-xs font-medium text-primary transition-colors hover:text-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Now" })] }))] })] }));
+}
+
 function mapToItem(w, separator) {
     const id = w.id || w.warehouseId || '';
     if (!id)
@@ -67660,5 +67853,5 @@ var RichTextAreaImpl = /*#__PURE__*/Object.freeze({
   RichTextarea: RichTextarea
 });
 
-export { ActionBadge, ActionButtonWithTooltip, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, ConfirmDialog, ContactTypeFilter, CopyButton, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomTable, CustomizeColumnsDrawer, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DetailChip, DetailPageLayout, DetailPageSkeleton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntityHeader, Field, FieldSkeleton, FileUploader, FilterMultiSelect, FilterSelect, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberInput, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, 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, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, ToggleSwitch, TruncateTooltip, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, badgeVariants, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildWhatsappUrl, buttonVariants, cn, createVideoMediaItem, dropdownMenuItemDestructiveClass, formatFileSize, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getInitials, iconButtonVariants, isPathActive, notify, releaseStaleOverlayBodyLock, renderBadge, useAuditShowMore, useBadge, useButton, useDropdownMenu, useNavbar, useSidebar, videoThumbnailSrc };
+export { ActionBadge, ActionButtonWithTooltip, AdvancedSearchDrawer, Alert, ApiComboBox, AppSidebar, AuditEntryCard, AuditHistoryPanel, AuditTimeline, AuditTimelineShimmer, Badge, BadgeType, BusinessContactStatusFilter, Button, CUSTOMER_AUDIT_CONFIG, CertificateRowList, ChangePill, Collapsible, CollapsibleCard, CollapsibleContent, CollapsibleTrigger, ConfirmDialog, ContactTypeFilter, CopyButton, CreateFormPageHeader, CreateFormPageShell, CurrencyDisplayTabs, CurrencyInput, CurrencyToggle, CustomCombobox, CustomTable, CustomizeColumnsDrawer, DIAMOND_AUDIT_CONFIG, DashboardShell, DataEditableTable, DataTable, DateInput, DetailChip, DetailPageLayout, DetailPageSkeleton, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EntityHeader, Field, FieldSkeleton, FileUploader, FilterMultiSelect, FilterSelect, FormSectionCard, FormSectionCardSkeleton, GEM_AUDIT_CONFIG, HistoryEntryCard, HistoryTimeline, HistoryTimelineShimmer, INVOICE_AUDIT_CONFIG, IconButton, IdHyperlinkText, InfoBanner, InventoryComboBox, InventoryItemCard, InventoryItemRow, InvoiceComboBox, KYCStatusFilter, KeyValueGrid, LAYOUT_AUDIT_CONFIG, LabeledToggle, MEMO_IN_AUDIT_CONFIG, MEMO_OUT_AUDIT_CONFIG, MediaGallery, MemoInComboBox, MetricCard, MetricRow, MetricTile, Modal, MoreInfoPanel, MoreInfoTrigger, Navbar, NavbarActions, NavbarAvatar, NavbarIconButton, NavbarSearch, NavbarTitle, NumberInput, NumberedStepCard, OtpInput, OwnershipFilter, OwnershipSplitCard, PROFORMA_AUDIT_CONFIG, PageHeader, PageTabs, Pagination, PaginationSelect, PartnerShareCard, PriceInput, Protected, PurchaseOrderComboBox, QUOTATION_AUDIT_CONFIG, RadioCardGroup, ReadMoreText, RefreshButton, RichTextarea$1 as RichTextarea, SEARCHABLE_SELECT_PAGE_SIZE, SafeImage, 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, StatusBadge$1 as StatusBadge, StatusFilter, Stepper, StockTypeFilter, TablePagination, TableSkeleton, Tabs, TabsContent, TabsList, TabsTrigger, TagsInput, TextHyperlink, TimePicker, ToggleSwitch, TruncateTooltip, WarehouseComboBox, WarehouseFilter, ZoomSplitViewer, badgeVariants, buildBulkShareTitle, buildInventoryPublicUrl, buildInventoryRowProps, buildInventoryShareTitle, buildWhatsappUrl, buttonVariants, cn, createVideoMediaItem, dropdownMenuItemDestructiveClass, formatFileSize, generateActionDescription, generateTitle, getBadgeTypeForStatus, getChangePills, getInitials, iconButtonVariants, isPathActive, notify, releaseStaleOverlayBodyLock, renderBadge, useAuditShowMore, useBadge, useButton, useDropdownMenu, useNavbar, useSidebar, videoThumbnailSrc, watchOverlayBodyLock };
 //# sourceMappingURL=index.esm.js.map