@caratlogic/design-system 0.1.25 → 0.1.27

package/dist/index.cjs.js

@@ -2698,12 +2698,12 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$1o = [
+const __iconNode$1p = [
   ["path", { d: "M15 12H3", key: "6jk70r" }],
   ["path", { d: "M17 18H3", key: "1amg6g" }],
   ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const AlignLeft = createLucideIcon("align-left", __iconNode$1o);
+const AlignLeft = createLucideIcon("align-left", __iconNode$1p);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2713,12 +2713,12 @@ const AlignLeft = createLucideIcon("align-left", __iconNode$1o);
  */
 
 
-const __iconNode$1n = [
+const __iconNode$1o = [
   ["rect", { width: "20", height: "5", x: "2", y: "3", rx: "1", key: "1wp1u1" }],
   ["path", { d: "M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8", key: "1s80jp" }],
   ["path", { d: "M10 12h4", key: "a56b0p" }]
 ];
-const Archive = createLucideIcon("archive", __iconNode$1n);
+const Archive = createLucideIcon("archive", __iconNode$1o);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2728,11 +2728,11 @@ const Archive = createLucideIcon("archive", __iconNode$1n);
  */
 
 
-const __iconNode$1m = [
+const __iconNode$1n = [
   ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
   ["path", { d: "M19 12H5", key: "x3x0zl" }]
 ];
-const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1m);
+const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1n);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2742,11 +2742,11 @@ const ArrowLeft = createLucideIcon("arrow-left", __iconNode$1m);
  */
 
 
-const __iconNode$1l = [
+const __iconNode$1m = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
 ];
-const ArrowRight = createLucideIcon("arrow-right", __iconNode$1l);
+const ArrowRight = createLucideIcon("arrow-right", __iconNode$1m);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2756,11 +2756,11 @@ const ArrowRight = createLucideIcon("arrow-right", __iconNode$1l);
  */
 
 
-const __iconNode$1k = [
+const __iconNode$1l = [
   ["path", { d: "M4.929 4.929 19.07 19.071", key: "196cmz" }],
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]
 ];
-const Ban = createLucideIcon("ban", __iconNode$1k);
+const Ban = createLucideIcon("ban", __iconNode$1l);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2770,7 +2770,7 @@ const Ban = createLucideIcon("ban", __iconNode$1k);
  */
 
 
-const __iconNode$1j = [
+const __iconNode$1k = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -2781,7 +2781,7 @@ const __iconNode$1j = [
   ],
   ["circle", { cx: "18", cy: "8", r: "3", key: "1g0gzu" }]
 ];
-const BellDot = createLucideIcon("bell-dot", __iconNode$1j);
+const BellDot = createLucideIcon("bell-dot", __iconNode$1k);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2791,7 +2791,7 @@ const BellDot = createLucideIcon("bell-dot", __iconNode$1j);
  */
 
 
-const __iconNode$1i = [
+const __iconNode$1j = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   ["path", { d: "M22 8c0-2.3-.8-4.3-2-6", key: "5bb3ad" }],
   [
@@ -2803,7 +2803,7 @@ const __iconNode$1i = [
   ],
   ["path", { d: "M4 2C2.8 3.7 2 5.7 2 8", key: "tap9e0" }]
 ];
-const BellRing = createLucideIcon("bell-ring", __iconNode$1i);
+const BellRing = createLucideIcon("bell-ring", __iconNode$1j);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2813,7 +2813,7 @@ const BellRing = createLucideIcon("bell-ring", __iconNode$1i);
  */
 
 
-const __iconNode$1h = [
+const __iconNode$1i = [
   ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
   [
     "path",
@@ -2823,7 +2823,7 @@ const __iconNode$1h = [
     }
   ]
 ];
-const Bell = createLucideIcon("bell", __iconNode$1h);
+const Bell = createLucideIcon("bell", __iconNode$1i);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -2833,13 +2833,32 @@ const Bell = createLucideIcon("bell", __iconNode$1h);
  */
 
 
-const __iconNode$1g = [
+const __iconNode$1h = [
   [
     "path",
     { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
   ]
 ];
-const Bold$1 = createLucideIcon("bold", __iconNode$1g);
+const Bold$1 = createLucideIcon("bold", __iconNode$1h);
+
+/**
+ * @license lucide-react v0.539.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1g = [
+  ["path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z", key: "1b4qmf" }],
+  ["path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2", key: "i71pzd" }],
+  ["path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2", key: "10jefs" }],
+  ["path", { d: "M10 6h4", key: "1itunk" }],
+  ["path", { d: "M10 10h4", key: "tcdvrf" }],
+  ["path", { d: "M10 14h4", key: "kelpxr" }],
+  ["path", { d: "M10 18h4", key: "1ulq68" }]
+];
+const Building2 = createLucideIcon("building-2", __iconNode$1g);
 
 /**
  * @license lucide-react v0.539.0 - ISC
@@ -15280,7 +15299,7 @@ const isFilterActive = (value, resetValue) => !!value && value !== resetValue;
  * `FilterSelect` trigger look (filter icon + count badge when active).
  * Selecting items keeps the popover open; the trigger shows the count.
  */
-const FilterMultiSelect = ({ label, value, onChange, options, triggerClassName, contentClassName, }) => {
+const FilterMultiSelect = ({ label, value, onChange, options, triggerClassName, contentClassName, listClassName, modal = false, }) => {
     const active = value.length > 0;
     const toggle = (optValue) => {
         if (value.includes(optValue)) {
@@ -15290,7 +15309,7 @@ const FilterMultiSelect = ({ label, value, onChange, options, triggerClassName,
             onChange([...value, optValue]);
         }
     };
-    return (jsxRuntime.jsxs(Popover, { children: [jsxRuntime.jsx(PopoverTrigger, { className: cn(TRIGGER_BASE, 'inline-flex items-center justify-between', active && TRIGGER_ACTIVE, triggerClassName), children: jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(Funnel, { className: cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" }), label, active && (jsxRuntime.jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded bg-primary/10 px-1 text-[10px] font-semibold leading-none text-primary", children: value.length }))] }) }), jsxRuntime.jsx(PopoverContent, { align: "start", className: cn('w-56 p-1', contentClassName), children: jsxRuntime.jsx("div", { className: "max-h-[18rem] overflow-y-auto", children: options.map((opt) => {
+    return (jsxRuntime.jsxs(Popover, { modal: modal, children: [jsxRuntime.jsx(PopoverTrigger, { className: cn(TRIGGER_BASE, 'inline-flex items-center justify-between', active && TRIGGER_ACTIVE, triggerClassName), children: jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [jsxRuntime.jsx(Funnel, { className: cn('h-4 w-4 shrink-0', active ? 'text-primary' : 'text-muted-foreground'), "aria-hidden": "true" }), label, active && (jsxRuntime.jsx("span", { className: "ml-1 inline-flex h-4 min-w-4 items-center justify-center rounded bg-primary/10 px-1 text-[10px] font-semibold leading-none text-primary", children: value.length }))] }) }), jsxRuntime.jsx(PopoverContent, { align: "start", className: cn('w-56 p-1', contentClassName), children: jsxRuntime.jsx("div", { className: cn('max-h-[18rem] overflow-y-auto', listClassName), children: options.map((opt) => {
                         const checked = value.includes(opt.value);
                         return (jsxRuntime.jsxs("button", { type: "button", onClick: () => toggle(opt.value), className: "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-foreground hover:bg-muted/60", children: [jsxRuntime.jsx(Checkbox, { checked: checked, onCheckedChange: () => toggle(opt.value), 
                                     // Stop the inner checkbox click from double-toggling via the button.
@@ -15396,6 +15415,48 @@ const CollapsibleCard = ({ title, subtitle, icon, headerActions, defaultOpen = t
     return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-xl border border-border bg-card shadow-card', className), children: [jsxRuntime.jsxs("header", { className: cn('flex items-center gap-3 bg-muted/30 px-4 py-3', isOpen && 'border-b border-border', headerClassName), children: [icon && jsxRuntime.jsx(SectionIcon, { children: icon }), jsxRuntime.jsxs("div", { className: "flex min-w-0 shrink flex-col gap-0.5", children: [jsxRuntime.jsx("h3", { className: "truncate text-sm font-medium text-foreground", children: title }), subtitle && (jsxRuntime.jsx("div", { className: "truncate text-xs text-muted-foreground", children: subtitle }))] }), headerActions && (jsxRuntime.jsx("div", { className: "ml-auto flex min-w-0 flex-1 items-center justify-end gap-2", children: headerActions })), !headerActions && jsxRuntime.jsx("div", { className: "flex-1" }), !nonCollapsible && (jsxRuntime.jsx("button", { type: "button", onClick: toggle, "aria-expanded": isOpen, "aria-label": isOpen ? 'Collapse section' : 'Expand section', className: "inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30", children: jsxRuntime.jsx(ChevronDown, { className: cn('h-4 w-4 transition-transform duration-200', isOpen && 'rotate-180'), "aria-hidden": "true" }) }))] }), isOpen && jsxRuntime.jsx("div", { className: cn('p-4', bodyClassName), children: children })] }));
 };
 
+const HEADER_TONE_CLASSES = {
+    neutral: 'bg-[var(--section-header)]',
+    gem: 'bg-primary/5 dark:bg-[#173626]',
+    diamond: 'bg-blue-50 dark:bg-[#0284C7]/20',
+};
+const ICON_TONE_CLASSES$1 = {
+    neutral: 'bg-primary/10 text-primary',
+    gem: 'bg-primary/10 text-primary',
+    diamond: 'bg-blue-100 text-blue-500',
+};
+/**
+ * Section panel used across the redesigned create/edit forms: a rounded card
+ * with a tinted header band (icon square + title + description) above a
+ * divider, then the form body. The icon-square + title + description header
+ * is the recurring pattern in the new designs.
+ * divider, then the form body.
+ */
+const FormSectionCard = ({ icon, title, description, headerAction, children, className, bodyClassName, tone = 'neutral', headerClassName, }) => {
+    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-xl border border-border bg-card shadow-card', className), children: [jsxRuntime.jsxs("header", { className: cn('flex items-center justify-between gap-4 border-b border-border px-5 py-4', HEADER_TONE_CLASSES[tone], headerClassName), children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: cn('inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md', ICON_TONE_CLASSES$1[tone]), children: icon }), jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [jsxRuntime.jsx("p", { className: "text-base font-medium text-foreground", children: title }), description && (jsxRuntime.jsx("p", { className: "text-[13px] font-normal text-label", children: description }))] })] }), headerAction] }), jsxRuntime.jsx("div", { className: cn('p-5', bodyClassName), children: children })] }));
+};
+
+function CompanyCardField({ label, children, emptyLabel, className, }) {
+    return (jsxRuntime.jsxs("div", { className: cn('flex min-w-0 flex-col gap-1', className), children: [jsxRuntime.jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }), children ? (jsxRuntime.jsx("div", { className: "truncate text-sm font-medium leading-5 text-foreground", children: children })) : (jsxRuntime.jsx("p", { className: "text-sm font-medium italic leading-5 text-muted-foreground", children: emptyLabel }))] }));
+}
+
+/** `—` is the placeholder the apps' display helpers return for a missing value. */
+function hasValue(value) {
+    const trimmed = value?.trim();
+    return !!trimmed && trimmed !== '—';
+}
+function getInitial(name) {
+    return (name.trim()[0] ?? '?').toUpperCase();
+}
+
+/**
+ * A business contact at a glance: avatar + name, email / phone / tax number,
+ * then the address. Data-only — the app formats each value before passing it.
+ */
+function CompanyCard({ name, subtitle, email, phone, taxNumber, address, viewHref, viewLabel = 'View company', title = 'Company', icon = jsxRuntime.jsx(Building2, { className: "size-5", "aria-hidden": true }), emptyLabel = 'Not provided', className, }) {
+    return (jsxRuntime.jsxs(FormSectionCard, { icon: icon, title: title, className: className, headerClassName: "px-4 py-3", bodyClassName: "flex flex-col gap-4 p-4", headerAction: viewHref ? (jsxRuntime.jsx(TextHyperlink, { href: viewHref, showIcon: false, className: "shrink-0 text-sm font-medium", children: viewLabel })) : undefined, children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { "aria-hidden": true, className: "flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-sm font-semibold text-primary-foreground", children: getInitial(name) }), jsxRuntime.jsxs("div", { className: "min-w-0", children: [jsxRuntime.jsx("p", { className: "break-words text-base font-semibold leading-6 text-foreground", children: name }), hasValue(subtitle) ? (jsxRuntime.jsx("p", { className: "break-words text-xs leading-4 text-muted-foreground", children: subtitle })) : null] })] }), jsxRuntime.jsxs("div", { className: cn('grid grid-cols-1 gap-4', taxNumber ? 'sm:grid-cols-3' : 'sm:grid-cols-2'), children: [jsxRuntime.jsx(CompanyCardField, { label: "Email", emptyLabel: emptyLabel, children: hasValue(email) ? (jsxRuntime.jsx("a", { href: `mailto:${email}`, className: "text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: email })) : null }), jsxRuntime.jsx(CompanyCardField, { label: "Phone", emptyLabel: emptyLabel, children: hasValue(phone) ? phone : null }), taxNumber ? (jsxRuntime.jsx(CompanyCardField, { label: taxNumber.label, emptyLabel: emptyLabel, children: hasValue(taxNumber.value) ? taxNumber.value : null })) : null] }), jsxRuntime.jsx(CompanyCardField, { label: "Address", emptyLabel: emptyLabel, className: "border-t border-border pt-4", children: hasValue(address) ? jsxRuntime.jsx("span", { className: "whitespace-normal break-words", children: address }) : null })] }));
+}
+
 function commonjsRequire(path) {
 	throw new Error('Could not dynamically require "' + path + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }
@@ -37088,7 +37149,7 @@ styleInject(css_248z$1);
  * Date field that can be typed or picked. The text box takes a masked
  * `DD/MM/YYYY` entry; the trailing button opens the same calendar as before.
  */
-function DateInput({ value, onChange, onBlur, name, id, className, min, max, disabled, placeholder = DATE_FORMAT, ariaLabel, }) {
+function DateInput({ value, onChange, onBlur, name, id, className, min, max, disabled, placeholder = DATE_FORMAT, ariaLabel, align = 'start', }) {
     const { open, text, invalid, bounds, inputRef, handleOpenChange, handleTextChange, handleKeyDown, handleTextBlur, toggleOpen, selectDate, clearDate, selectToday, } = useDateInput({ value, onChange, onBlur, min, max, disabled });
     // NOTE: We drive `open` ourselves from the button's onClick instead of using
     // Radix's <PopoverTrigger> toggle. When this Popover is nested inside the
@@ -37098,7 +37159,7 @@ function DateInput({ value, onChange, onBlur, name, id, className, min, max, dis
     // source of truth — no double-fire, and it works across browsers. `modal`
     // lets the open popover own pointer events above the dialog so the calendar
     // (portalled to <body>) stays clickable.
-    return (jsxRuntime.jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: true, children: [jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: jsxRuntime.jsxs("div", { "data-slot": "input", "data-empty": !value || undefined, "data-invalid": invalid || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 py-1 shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]', 'data-[invalid]:border-destructive data-[invalid]:ring-destructive/20 data-[invalid]:ring-[3px]', disabled && 'cursor-not-allowed bg-muted/50 text-label', className), children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", autoComplete: "off", spellCheck: false, id: id, name: name, value: text, placeholder: placeholder, disabled: disabled, maxLength: DATE_FORMAT.length, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, title: DATE_FORMAT_HINT, onChange: handleTextChange, onKeyDown: handleKeyDown, onBlur: handleTextBlur, className: "placeholder:text-placeholder selection:bg-primary selection:text-primary-foreground h-full min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-sm disabled:cursor-not-allowed disabled:text-label md:text-sm" }), jsxRuntime.jsx("button", { type: "button", disabled: disabled, "aria-label": CALENDAR_BUTTON_LABEL, "aria-haspopup": "dialog", "aria-expanded": open, onClick: toggleOpen, className: "-mr-1 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-ring/50 focus-visible:ring-[2px] disabled:cursor-not-allowed", children: jsxRuntime.jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsxRuntime.jsx(PopoverContent, { align: "start", className: "date-range-picker-popover w-auto p-4", children: jsxRuntime.jsx(DatePicker, { inline: true, selected: value ?? null, minDate: toBoundDate(bounds.minDate), maxDate: toBoundDate(bounds.maxDate), onChange: selectDate, calendarClassName: "date-range-picker-calendar", formatWeekDay: (weekday) => weekday.slice(0, 2), renderCustomHeader: ({ monthDate, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (jsxRuntime.jsx(DatePickerHeader, { monthDate: monthDate, changeYear: changeYear, changeMonth: changeMonth, decreaseMonth: decreaseMonth, increaseMonth: increaseMonth, prevMonthButtonDisabled: prevMonthButtonDisabled, nextMonthButtonDisabled: nextMonthButtonDisabled, minYear: bounds.minYear, maxYear: bounds.maxYear })), children: jsxRuntime.jsxs("div", { className: "date-range-picker-footer", children: [jsxRuntime.jsx("button", { type: "button", onClick: clearDate, className: "date-range-picker-action", children: "Clear" }), jsxRuntime.jsx("button", { type: "button", onClick: selectToday, className: "date-range-picker-action", children: "Today" })] }) }) })] }));
+    return (jsxRuntime.jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: true, children: [jsxRuntime.jsx(PopoverAnchor, { asChild: true, children: jsxRuntime.jsxs("div", { "data-slot": "input", "data-empty": !value || undefined, "data-invalid": invalid || undefined, className: cn('border-input-border flex h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-transparent px-3 py-1 shadow-[0_1px_2px_0_#0000000d] transition-[color,box-shadow] outline-none', 'focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]', 'data-[invalid]:border-destructive data-[invalid]:ring-destructive/20 data-[invalid]:ring-[3px]', disabled && 'cursor-not-allowed bg-muted/50 text-label', className), children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", inputMode: "numeric", autoComplete: "off", spellCheck: false, id: id, name: name, value: text, placeholder: placeholder, disabled: disabled, maxLength: DATE_FORMAT.length, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, title: DATE_FORMAT_HINT, onChange: handleTextChange, onKeyDown: handleKeyDown, onBlur: handleTextBlur, className: "placeholder:text-placeholder selection:bg-primary selection:text-primary-foreground h-full min-w-0 flex-1 bg-transparent text-base text-foreground outline-none placeholder:text-sm disabled:cursor-not-allowed disabled:text-label md:text-sm" }), jsxRuntime.jsx("button", { type: "button", disabled: disabled, "aria-label": CALENDAR_BUTTON_LABEL, "aria-haspopup": "dialog", "aria-expanded": open, onClick: toggleOpen, className: "-mr-1 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-sm text-muted-foreground outline-none hover:text-foreground focus-visible:ring-ring/50 focus-visible:ring-[2px] disabled:cursor-not-allowed", children: jsxRuntime.jsx(CalendarDays, { className: "h-4 w-4 stroke-[1.75]" }) })] }) }), jsxRuntime.jsx(PopoverContent, { align: align, className: "date-range-picker-popover w-auto p-4", children: jsxRuntime.jsx(DatePicker, { inline: true, selected: value ?? null, minDate: toBoundDate(bounds.minDate), maxDate: toBoundDate(bounds.maxDate), onChange: selectDate, calendarClassName: "date-range-picker-calendar", formatWeekDay: (weekday) => weekday.slice(0, 2), renderCustomHeader: ({ monthDate, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, }) => (jsxRuntime.jsx(DatePickerHeader, { monthDate: monthDate, changeYear: changeYear, changeMonth: changeMonth, decreaseMonth: decreaseMonth, increaseMonth: increaseMonth, prevMonthButtonDisabled: prevMonthButtonDisabled, nextMonthButtonDisabled: nextMonthButtonDisabled, minYear: bounds.minYear, maxYear: bounds.maxYear })), children: jsxRuntime.jsxs("div", { className: "date-range-picker-footer", children: [jsxRuntime.jsx("button", { type: "button", onClick: clearDate, className: "date-range-picker-action", children: "Clear" }), jsxRuntime.jsx("button", { type: "button", onClick: selectToday, className: "date-range-picker-action", children: "Today" })] }) }) })] }));
 }
 
 const DropdownMenu = DropdownMenuPrimitive__namespace.Root;
@@ -37633,27 +37694,6 @@ const InAppNotificationCard = ({ notification, onSelect, defaultIcon, className,
     return (jsxRuntime.jsxs("button", { type: "button", onClick: () => onSelect(notification), className: getInAppNotificationCardClasses(isRead, className), children: [jsxRuntime.jsx("span", { className: getInAppNotificationIconClasses(isRead), children: icon ?? defaultIcon ?? (jsxRuntime.jsx(BellDot, { className: "size-4", "aria-hidden": "true" })) }), jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [jsxRuntime.jsxs("span", { className: "flex items-baseline gap-2", children: [!isRead && (jsxRuntime.jsx("span", { role: "img", "aria-label": inAppNotificationCardA11y.unreadLabel, className: "size-1.5 shrink-0 rounded-full bg-primary" })), jsxRuntime.jsx("span", { className: cn('min-w-0 flex-1 truncate text-sm text-foreground', isRead ? 'font-medium' : 'font-semibold'), children: title }), jsxRuntime.jsx("time", { className: "shrink-0 text-[0.6875rem] text-muted-foreground tabular-nums", children: formatRelativeTime(createdAt) })] }), jsxRuntime.jsx("span", { className: "mt-1 line-clamp-1 text-xs text-secondary-foreground", children: message }), subject && (jsxRuntime.jsx("span", { className: "mt-0.5 block truncate text-[0.6875rem] font-medium text-muted-foreground", children: subject }))] })] }));
 };
 
-const HEADER_TONE_CLASSES = {
-    neutral: 'bg-[var(--section-header)]',
-    gem: 'bg-primary/5 dark:bg-[#173626]',
-    diamond: 'bg-blue-50 dark:bg-[#0284C7]/20',
-};
-const ICON_TONE_CLASSES$1 = {
-    neutral: 'bg-primary/10 text-primary',
-    gem: 'bg-primary/10 text-primary',
-    diamond: 'bg-blue-100 text-blue-500',
-};
-/**
- * Section panel used across the redesigned create/edit forms: a rounded card
- * with a tinted header band (icon square + title + description) above a
- * divider, then the form body. The icon-square + title + description header
- * is the recurring pattern in the new designs.
- * divider, then the form body.
- */
-const FormSectionCard = ({ icon, title, description, headerAction, children, className, bodyClassName, tone = 'neutral', headerClassName, }) => {
-    return (jsxRuntime.jsxs("section", { className: cn('overflow-hidden rounded-xl border border-border bg-card shadow-card', className), children: [jsxRuntime.jsxs("header", { className: cn('flex items-center justify-between gap-4 border-b border-border px-5 py-4', HEADER_TONE_CLASSES[tone], headerClassName), children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: cn('inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md', ICON_TONE_CLASSES$1[tone]), children: icon }), jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [jsxRuntime.jsx("p", { className: "text-base font-medium text-foreground", children: title }), description && (jsxRuntime.jsx("p", { className: "text-[13px] font-normal text-label", children: description }))] })] }), headerAction] }), jsxRuntime.jsx("div", { className: cn('p-5', bodyClassName), children: children })] }));
-};
-
 const TONE_STYLES = {
     info: {
         container: 'border-border bg-section-header',
@@ -38003,6 +38043,21 @@ function formatCurrency(amount, currency) {
         currency: currency || 'USD',
     }).format(amount);
 }
+/** The currency the invoice was issued in; `baseCurrency` is only its ledger currency. */
+function getInvoiceCurrency(invoice) {
+    const target = invoice.target?.currency?.trim().toUpperCase();
+    return target && invoice.target?.rate ? target : invoice.baseCurrency || 'USD';
+}
+function getInvoiceCompany(invoice) {
+    return invoice.customer?.companyName || invoice.customer?.contactName || 'N/A';
+}
+function getInvoiceLocation(invoice) {
+    const address = invoice.customer?.address ?? invoice.address;
+    return [address?.city, address?.state, address?.country]
+        .map((part) => part?.trim())
+        .filter(Boolean)
+        .join(', ');
+}
 
 function useInvoiceComboBox(fetchInvoices, statusFilter) {
     const fetchPage = React.useCallback(async ({ page, limit, search }) => {
@@ -38067,7 +38122,8 @@ function InvoiceComboBox({ selectedItem, onSelect, fetchInvoices, searchPlacehol
             const invoice = item.data;
             const invoiceDate = new Date(invoice.invoiceDate).toLocaleDateString();
             const dueDate = new Date(invoice.paymentDueDate).toLocaleDateString();
-            return (jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsx("span", { className: "font-semibold text-sm text-foreground", children: invoice.invoiceNumber }), jsxRuntime.jsx(StatusBadge, { status: invoice.status })] }), jsxRuntime.jsxs("div", { className: "text-xs text-muted-foreground mb-1", children: ["Customer: ", invoice.customer?.contactName || 'N/A'] }), jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 mt-1", children: [jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: ["Date: ", invoiceDate] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "\u2022" }), jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: ["Due: ", dueDate] })] }), jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 mt-1", children: [jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: ["Total:", ' ', formatCurrency(invoice.totalAmount, invoice.baseCurrency)] }), invoice.outstandingAmount > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "\u2022" }), jsxRuntime.jsxs("span", { className: "text-xs text-destructive", children: ["Outstanding:", ' ', formatCurrency(invoice.outstandingAmount, invoice.baseCurrency)] })] }))] })] }));
+            const location = getInvoiceLocation(invoice);
+            return (jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 mb-1", children: [jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [jsxRuntime.jsx("span", { className: "font-semibold text-sm text-foreground", children: invoice.invoiceNumber }), jsxRuntime.jsx(StatusBadge, { status: invoice.status })] }), jsxRuntime.jsx("span", { className: "shrink-0 text-xs font-semibold text-foreground", children: getInvoiceCurrency(invoice) })] }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2 mb-1 text-xs text-muted-foreground", children: [jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: getInvoiceCompany(invoice) }), location ? jsxRuntime.jsx("span", { className: "shrink-0", children: location }) : null] }), jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 mt-1", children: [jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: ["Date: ", invoiceDate] }), jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "\u2022" }), jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: ["Due: ", dueDate] })] }), jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2 mt-1", children: [jsxRuntime.jsxs("span", { className: "text-xs font-medium text-foreground", children: ["Total:", ' ', formatCurrency(invoice.totalAmount, invoice.baseCurrency)] }), invoice.outstandingAmount > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "\u2022" }), jsxRuntime.jsxs("span", { className: "text-xs text-destructive", children: ["Outstanding:", ' ', formatCurrency(invoice.outstandingAmount, invoice.baseCurrency)] })] }))] })] }));
         }, fetchPage: fetchPage, resolveById: resolveById, preSelectedId: preSelectedId ?? null, searchPlaceholder: searchPlaceholder, emptyMessage: "No invoices found.", disabled: disabled, className: className, align: align, debounceMs: 300 }));
 }
 
@@ -38244,27 +38300,52 @@ const NumberedStepCard = ({ step, title, description, className, }) => {
     return (jsxRuntime.jsxs("div", { className: cn('flex flex-col gap-3 rounded-xl border border-border bg-card p-4', className), children: [jsxRuntime.jsx("span", { className: "inline-flex h-6 w-6 items-center justify-center rounded-full bg-primary text-xs font-medium text-primary-foreground", children: step }), jsxRuntime.jsxs("div", { className: "space-y-1", children: [jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: title }), jsxRuntime.jsx("p", { className: "text-xs leading-snug text-label", children: description })] })] }));
 };
 
+/** Options with a description get the taller layout with an icon badge (default variant only). */
+function hasDetails(variant, hasDescription) {
+    return variant === 'default' && hasDescription;
+}
+function getListClassName(variant, detailed) {
+    return cn('inline-flex w-full items-center gap-1 bg-muted p-1', detailed ? 'rounded-xl' : variant === 'bordered' ? 'rounded-lg' : 'rounded-md');
+}
+function getSegmentClassName(variant, isActive, isDisabled, detailed = false) {
+    return cn('inline-flex cursor-pointer items-center justify-center gap-2 border px-3 text-sm font-medium transition-colors disabled:cursor-not-allowed', 'outline-none focus-visible:ring-2 focus-visible:ring-primary/30', detailed ? 'min-h-11 rounded-lg py-2 font-semibold' : 'h-7 rounded-md', 
+    // Bordered tabs size to their content (Figma "Advance Tabs"); the others stretch to equal width.
+    variant === 'bordered' ? 'shrink-0' : 'flex-1', 
+    // Every segment carries a border so the active one's primary border doesn't shift the layout.
+    isActive
+        ? cn('border-primary bg-card shadow-xs', detailed ? 'text-primary dark:text-foreground' : 'text-primary')
+        : cn('border-transparent', variant === 'bordered' ? 'text-foreground' : 'text-muted-foreground', 'hover:text-foreground'), isDisabled && 'cursor-not-allowed opacity-50');
+}
+function getIconClassName(detailed, isActive) {
+    if (!detailed) {
+        return 'inline-flex shrink-0 items-center [&_svg]:h-4 [&_svg]:w-4';
+    }
+    return cn('inline-flex size-7 shrink-0 items-center justify-center rounded-full text-sm font-semibold [&_svg]:size-4', isActive ? 'bg-primary/10 text-primary' : 'bg-foreground/5 text-muted-foreground');
+}
+function getContentClassName(layout) {
+    return layout === 'inline'
+        ? 'flex min-w-0 items-baseline gap-2'
+        : 'flex min-w-0 flex-col items-center gap-0.5';
+}
+function getDescriptionClassName(isActive) {
+    return cn('truncate text-xs font-normal', isActive ? 'text-primary' : 'text-muted-foreground');
+}
+
 /**
- * Pill-shaped segmented control with N equally-sized buttons. The active
- * segment lifts forward with a white bg + subtle shadow; inactive segments
- * blend into the muted container background.
+ * Pill-shaped segmented control. The active segment lifts forward with a card
+ * bg, primary border and subtle shadow; inactive segments blend into the muted
+ * container background. Giving options a `description` makes the default
+ * segments taller, with the icon in a badge.
  *
  * Single source of truth for "two-or-more mutually exclusive views" toggles
  * (e.g. Owned / Memo on the ownership form).
  */
-function SegmentedControl({ value, onChange, options, ariaLabel, className, disabled, variant = 'default', }) {
-    const isBordered = variant === 'bordered';
-    return (jsxRuntime.jsx("div", { role: "tablist", "aria-label": ariaLabel, className: cn('inline-flex w-full items-center gap-1 bg-muted p-1', isBordered ? 'rounded-lg' : 'rounded-md', className), children: options.map((opt) => {
+function SegmentedControl({ value, onChange, options, ariaLabel, className, disabled, variant = 'default', optionLayout = 'stacked', }) {
+    const detailed = options.some((opt) => hasDetails(variant, opt.description != null));
+    return (jsxRuntime.jsx("div", { role: "tablist", "aria-label": ariaLabel, className: cn(getListClassName(variant, detailed), className), children: options.map((opt) => {
             const isActive = value === opt.value;
-            const isDisabled = disabled || opt.disabled;
-            return (jsxRuntime.jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, disabled: isDisabled, onClick: () => !isDisabled && onChange(opt.value), className: cn('inline-flex h-7 cursor-pointer items-center justify-center gap-2 rounded-md px-3 text-sm font-medium transition-colors disabled:cursor-not-allowed', 'outline-none focus-visible:ring-2 focus-visible:ring-primary/30', 
-                // Bordered tabs size to their content (Figma "Advance Tabs"); the
-                // default variant stretches every segment to equal width.
-                isBordered ? 'shrink-0' : 'flex-1', isActive
-                    ? cn('bg-card text-primary shadow-xs', isBordered && 'border border-primary')
-                    : isBordered
-                        ? 'text-foreground hover:text-foreground'
-                        : 'text-muted-foreground hover:text-foreground', isDisabled && 'cursor-not-allowed opacity-50'), children: [opt.icon && (jsxRuntime.jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 items-center [&_svg]:h-4 [&_svg]:w-4", children: opt.icon })), jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: opt.label })] }, opt.value));
+            const isDisabled = !!(disabled || opt.disabled);
+            return (jsxRuntime.jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, disabled: isDisabled, onClick: () => !isDisabled && onChange(opt.value), className: getSegmentClassName(variant, isActive, isDisabled, detailed), children: [opt.icon && (jsxRuntime.jsx("span", { "aria-hidden": "true", className: getIconClassName(detailed, isActive), children: opt.icon })), detailed && opt.description != null ? (jsxRuntime.jsxs("span", { className: getContentClassName(optionLayout), children: [jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: opt.label }), jsxRuntime.jsx("span", { className: getDescriptionClassName(isActive), children: opt.description })] })) : (jsxRuntime.jsx("span", { className: "whitespace-nowrap", children: opt.label }))] }, opt.value));
         }) }));
 }
 
@@ -77709,6 +77790,7 @@ exports.Collapsible = Collapsible;
 exports.CollapsibleCard = CollapsibleCard;
 exports.CollapsibleContent = CollapsibleContent;
 exports.CollapsibleTrigger = CollapsibleTrigger;
+exports.CompanyCard = CompanyCard;
 exports.ConfirmDialog = ConfirmDialog;
 exports.ContactTypeFilter = ContactTypeFilter;
 exports.CopyButton = CopyButton;