@geomak/ui 6.6.0 → 6.8.0

package/dist/index.d.cts

@@ -1043,6 +1043,161 @@ interface KbdProps {
  */
 declare function Kbd({ children, keys, separator, size, className, style, }: KbdProps): react_jsx_runtime.JSX.Element;
 
+type Pad = 'none' | 'sm' | 'md' | 'lg';
+interface CardProps {
+    children: React__default.ReactNode;
+    /**
+     * Make the whole card a single interactive surface: hover lift, pointer
+     * cursor, focus ring, and (with `onClick`) button semantics + Enter/Space
+     * activation.
+     */
+    interactive?: boolean;
+    /** Click handler. With `interactive`, the card becomes keyboard-activatable. */
+    onClick?: React__default.MouseEventHandler;
+    /**
+     * Padding on the root. Leave `'none'` (default) when composing with
+     * `Card.Header` / `Card.Body` / `Card.Footer` (they bring their own); set a
+     * value for a quick flat card.
+     */
+    padding?: Pad;
+    /** Drop the border + shadow for a flat, borderless surface. */
+    flush?: boolean;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * A surface container with optional header / media / body / footer sections.
+ *
+ * @example Composed
+ * ```tsx
+ * <Card>
+ *   <Card.Media><img src={cover} alt="" /></Card.Media>
+ *   <Card.Header title="Aurora" subtitle="Bulk carrier" action={<IconButton … />} />
+ *   <Card.Body>Last seen off the North Sea, en route to Rotterdam.</Card.Body>
+ *   <Card.Footer><Button content="Track" /></Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example Quick flat card
+ * ```tsx
+ * <Card padding="md" interactive onClick={open}>Click me</Card>
+ * ```
+ */
+declare function Card({ children, interactive, onClick, padding, flush, className, style }: CardProps): react_jsx_runtime.JSX.Element;
+declare namespace Card {
+    var Media: typeof CardMedia;
+    var Header: typeof CardHeader;
+    var Body: typeof CardBody;
+    var Footer: typeof CardFooter;
+}
+interface CardMediaProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function CardMedia({ children, className }: CardMediaProps): react_jsx_runtime.JSX.Element;
+interface CardHeaderProps {
+    title?: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    /** Trailing slot — actions, menu, badge. */
+    action?: React__default.ReactNode;
+    /** Leading slot — avatar / icon. */
+    avatar?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    className?: string;
+}
+declare function CardHeader({ title, subtitle, action, avatar, children, className }: CardHeaderProps): react_jsx_runtime.JSX.Element;
+interface CardBodyProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function CardBody({ children, className }: CardBodyProps): react_jsx_runtime.JSX.Element;
+interface CardFooterProps {
+    children: React__default.ReactNode;
+    /** Drop the top divider. */
+    noDivider?: boolean;
+    className?: string;
+}
+declare function CardFooter({ children, noDivider, className }: CardFooterProps): react_jsx_runtime.JSX.Element;
+
+interface CardCarouselProps {
+    /** The slides — typically `Card`s. Each becomes a snap target. */
+    children: React__default.ReactNode;
+    /** Width of each slide. Number → px. Default `280`. */
+    itemWidth?: number | string;
+    /** Gap between slides in px. Default `16`. */
+    gap?: number;
+    /** Show prev / next arrow buttons. Default `true`. */
+    showArrows?: boolean;
+    /** Show position dots. Default `false`. */
+    showDots?: boolean;
+    /** Accessible label for the region. Default `'Carousel'`. */
+    'aria-label'?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * A horizontal, scroll-snap carousel for cards. Native scrolling drives it
+ * (trackpad / touch / wheel), with optional arrow buttons and position dots.
+ * Arrows disable at the ends; the scrollbar is hidden but scrolling is intact.
+ *
+ * @example
+ * ```tsx
+ * <CardCarousel itemWidth={300} showDots>
+ *   {vessels.map((v) => <Card key={v.id}>…</Card>)}
+ * </CardCarousel>
+ * ```
+ */
+declare function CardCarousel({ children, itemWidth, gap, showArrows, showDots, 'aria-label': ariaLabel, className, style, }: CardCarouselProps): react_jsx_runtime.JSX.Element;
+
+type StatisticSize = 'sm' | 'md' | 'lg';
+type DeltaDirection = 'up' | 'down' | 'neutral';
+interface StatisticDelta {
+    /** The change to show beside the arrow, e.g. `'12%'` or `+340`. */
+    value: React__default.ReactNode;
+    /** Arrow + colour direction. Default inferred `'neutral'`. */
+    direction?: DeltaDirection;
+    /**
+     * Whether an `up` direction is a good thing (green) or bad (red). For
+     * metrics like churn or latency, set `false` so a rise reads red.
+     * Default `true`.
+     */
+    positiveIsGood?: boolean;
+    /** Optional trailing context, e.g. `'vs last month'`. */
+    label?: React__default.ReactNode;
+}
+interface StatisticProps {
+    /** Caption above the value. */
+    label: React__default.ReactNode;
+    /** The metric itself. */
+    value: React__default.ReactNode;
+    /** Rendered before the value (currency symbol, etc.). */
+    prefix?: React__default.ReactNode;
+    /** Rendered after the value (unit, %). */
+    suffix?: React__default.ReactNode;
+    /** Leading icon in a tinted square. */
+    icon?: React__default.ReactNode;
+    /** Trend indicator under the value. */
+    delta?: StatisticDelta;
+    /** Secondary help text under everything. */
+    helpText?: React__default.ReactNode;
+    /** Size preset. Default `'md'`. */
+    size?: StatisticSize;
+    /** Text alignment. Default `'left'`. */
+    align?: 'left' | 'center';
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * A single metric: caption, value (with optional prefix/suffix and icon), and an
+ * optional trend delta whose colour follows direction — flipped for metrics
+ * where a rise is bad via `positiveIsGood: false`.
+ *
+ * @example
+ * <Statistic label="Revenue" value="48,210" prefix="$" delta={{ value: '12%', direction: 'up', label: 'vs last month' }} />
+ * <Statistic label="Churn" value="3.1" suffix="%" delta={{ value: '0.4pt', direction: 'up', positiveIsGood: false }} />
+ */
+declare function Statistic({ label, value, prefix, suffix, icon, delta, helpText, size, align, className, style, }: StatisticProps): react_jsx_runtime.JSX.Element;
+
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
 type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
@@ -4111,4 +4266,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };

package/dist/index.d.ts

@@ -1043,6 +1043,161 @@ interface KbdProps {
  */
 declare function Kbd({ children, keys, separator, size, className, style, }: KbdProps): react_jsx_runtime.JSX.Element;
 
+type Pad = 'none' | 'sm' | 'md' | 'lg';
+interface CardProps {
+    children: React__default.ReactNode;
+    /**
+     * Make the whole card a single interactive surface: hover lift, pointer
+     * cursor, focus ring, and (with `onClick`) button semantics + Enter/Space
+     * activation.
+     */
+    interactive?: boolean;
+    /** Click handler. With `interactive`, the card becomes keyboard-activatable. */
+    onClick?: React__default.MouseEventHandler;
+    /**
+     * Padding on the root. Leave `'none'` (default) when composing with
+     * `Card.Header` / `Card.Body` / `Card.Footer` (they bring their own); set a
+     * value for a quick flat card.
+     */
+    padding?: Pad;
+    /** Drop the border + shadow for a flat, borderless surface. */
+    flush?: boolean;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * A surface container with optional header / media / body / footer sections.
+ *
+ * @example Composed
+ * ```tsx
+ * <Card>
+ *   <Card.Media><img src={cover} alt="" /></Card.Media>
+ *   <Card.Header title="Aurora" subtitle="Bulk carrier" action={<IconButton … />} />
+ *   <Card.Body>Last seen off the North Sea, en route to Rotterdam.</Card.Body>
+ *   <Card.Footer><Button content="Track" /></Card.Footer>
+ * </Card>
+ * ```
+ *
+ * @example Quick flat card
+ * ```tsx
+ * <Card padding="md" interactive onClick={open}>Click me</Card>
+ * ```
+ */
+declare function Card({ children, interactive, onClick, padding, flush, className, style }: CardProps): react_jsx_runtime.JSX.Element;
+declare namespace Card {
+    var Media: typeof CardMedia;
+    var Header: typeof CardHeader;
+    var Body: typeof CardBody;
+    var Footer: typeof CardFooter;
+}
+interface CardMediaProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function CardMedia({ children, className }: CardMediaProps): react_jsx_runtime.JSX.Element;
+interface CardHeaderProps {
+    title?: React__default.ReactNode;
+    subtitle?: React__default.ReactNode;
+    /** Trailing slot — actions, menu, badge. */
+    action?: React__default.ReactNode;
+    /** Leading slot — avatar / icon. */
+    avatar?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    className?: string;
+}
+declare function CardHeader({ title, subtitle, action, avatar, children, className }: CardHeaderProps): react_jsx_runtime.JSX.Element;
+interface CardBodyProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function CardBody({ children, className }: CardBodyProps): react_jsx_runtime.JSX.Element;
+interface CardFooterProps {
+    children: React__default.ReactNode;
+    /** Drop the top divider. */
+    noDivider?: boolean;
+    className?: string;
+}
+declare function CardFooter({ children, noDivider, className }: CardFooterProps): react_jsx_runtime.JSX.Element;
+
+interface CardCarouselProps {
+    /** The slides — typically `Card`s. Each becomes a snap target. */
+    children: React__default.ReactNode;
+    /** Width of each slide. Number → px. Default `280`. */
+    itemWidth?: number | string;
+    /** Gap between slides in px. Default `16`. */
+    gap?: number;
+    /** Show prev / next arrow buttons. Default `true`. */
+    showArrows?: boolean;
+    /** Show position dots. Default `false`. */
+    showDots?: boolean;
+    /** Accessible label for the region. Default `'Carousel'`. */
+    'aria-label'?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * A horizontal, scroll-snap carousel for cards. Native scrolling drives it
+ * (trackpad / touch / wheel), with optional arrow buttons and position dots.
+ * Arrows disable at the ends; the scrollbar is hidden but scrolling is intact.
+ *
+ * @example
+ * ```tsx
+ * <CardCarousel itemWidth={300} showDots>
+ *   {vessels.map((v) => <Card key={v.id}>…</Card>)}
+ * </CardCarousel>
+ * ```
+ */
+declare function CardCarousel({ children, itemWidth, gap, showArrows, showDots, 'aria-label': ariaLabel, className, style, }: CardCarouselProps): react_jsx_runtime.JSX.Element;
+
+type StatisticSize = 'sm' | 'md' | 'lg';
+type DeltaDirection = 'up' | 'down' | 'neutral';
+interface StatisticDelta {
+    /** The change to show beside the arrow, e.g. `'12%'` or `+340`. */
+    value: React__default.ReactNode;
+    /** Arrow + colour direction. Default inferred `'neutral'`. */
+    direction?: DeltaDirection;
+    /**
+     * Whether an `up` direction is a good thing (green) or bad (red). For
+     * metrics like churn or latency, set `false` so a rise reads red.
+     * Default `true`.
+     */
+    positiveIsGood?: boolean;
+    /** Optional trailing context, e.g. `'vs last month'`. */
+    label?: React__default.ReactNode;
+}
+interface StatisticProps {
+    /** Caption above the value. */
+    label: React__default.ReactNode;
+    /** The metric itself. */
+    value: React__default.ReactNode;
+    /** Rendered before the value (currency symbol, etc.). */
+    prefix?: React__default.ReactNode;
+    /** Rendered after the value (unit, %). */
+    suffix?: React__default.ReactNode;
+    /** Leading icon in a tinted square. */
+    icon?: React__default.ReactNode;
+    /** Trend indicator under the value. */
+    delta?: StatisticDelta;
+    /** Secondary help text under everything. */
+    helpText?: React__default.ReactNode;
+    /** Size preset. Default `'md'`. */
+    size?: StatisticSize;
+    /** Text alignment. Default `'left'`. */
+    align?: 'left' | 'center';
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+/**
+ * A single metric: caption, value (with optional prefix/suffix and icon), and an
+ * optional trend delta whose colour follows direction — flipped for metrics
+ * where a rise is bad via `positiveIsGood: false`.
+ *
+ * @example
+ * <Statistic label="Revenue" value="48,210" prefix="$" delta={{ value: '12%', direction: 'up', label: 'vs last month' }} />
+ * <Statistic label="Churn" value="3.1" suffix="%" delta={{ value: '0.4pt', direction: 'up', positiveIsGood: false }} />
+ */
+declare function Statistic({ label, value, prefix, suffix, icon, delta, helpText, size, align, className, style, }: StatisticProps): react_jsx_runtime.JSX.Element;
+
 /** ─────────────────── types ─────────────────── */
 type NotificationType = 'info' | 'success' | 'warning' | 'danger';
 type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
@@ -4111,4 +4266,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CARD_BRANDS, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React15, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useLayoutEffect, useSyncExternalStore } from 'react';
+import React16, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useLayoutEffect, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as Dialog from '@radix-ui/react-dialog';
@@ -1630,13 +1630,202 @@ function Kbd({
   style
 }) {
   if (keys && keys.length > 0) {
-    return /* @__PURE__ */ jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React15.Fragment, { children: [
+    return /* @__PURE__ */ jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxs(React16.Fragment, { children: [
       i > 0 && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
       /* @__PURE__ */ jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
     ] }, `${k}-${i}`)) });
   }
   return /* @__PURE__ */ jsx("kbd", { className: [cap, SIZE3[size], className].filter(Boolean).join(" "), style, children });
 }
+var PAD = { none: "", sm: "p-3", md: "p-5", lg: "p-6" };
+function Card({ children, interactive, onClick, padding: padding2 = "none", flush, className = "", style }) {
+  const base = [
+    "rounded-xl overflow-hidden bg-surface",
+    flush ? "" : "border border-border shadow-sm",
+    PAD[padding2],
+    interactive ? "transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-accent" : "",
+    className
+  ].filter(Boolean).join(" ");
+  if (interactive && onClick) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: 0,
+        onClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick(e);
+          }
+        },
+        className: base,
+        style,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { onClick, className: base, style, children });
+}
+function CardMedia({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: ["[&>img]:block [&>img]:w-full [&>img]:object-cover", className].filter(Boolean).join(" "), children });
+}
+function CardHeader({ title, subtitle, action, avatar, children, className = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["flex items-start gap-3 px-5 pt-5", children ? "pb-0" : "pb-3", className].filter(Boolean).join(" "), children: [
+    avatar && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: avatar }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      title && /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-foreground leading-snug", children: title }),
+      subtitle && /* @__PURE__ */ jsx("div", { className: "text-xs text-foreground-muted leading-snug mt-0.5", children: subtitle }),
+      children
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 -mt-1 -mr-1", children: action })
+  ] });
+}
+function CardBody({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: ["px-5 py-4 text-sm text-foreground-secondary leading-relaxed", className].filter(Boolean).join(" "), children });
+}
+function CardFooter({ children, noDivider, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: ["flex items-center gap-2 px-5 py-3", noDivider ? "" : "border-t border-border", className].filter(Boolean).join(" "), children });
+}
+Card.Media = CardMedia;
+Card.Header = CardHeader;
+Card.Body = CardBody;
+Card.Footer = CardFooter;
+var Card_default = Card;
+var Arrow2 = ({ dir }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-5 w-5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: dir === "left" ? "M15 19l-7-7 7-7" : "M9 5l7 7-7 7" }) });
+function CardCarousel({
+  children,
+  itemWidth = 280,
+  gap = 16,
+  showArrows = true,
+  showDots = false,
+  "aria-label": ariaLabel = "Carousel",
+  className = "",
+  style
+}) {
+  const scrollerRef = useRef(null);
+  const slides = React16.Children.toArray(children);
+  const [active, setActive] = useState(0);
+  const [atStart, setAtStart] = useState(true);
+  const [atEnd, setAtEnd] = useState(false);
+  const width = typeof itemWidth === "number" ? `${itemWidth}px` : itemWidth;
+  const update = useCallback(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    el.clientWidth;
+    setAtStart(el.scrollLeft <= 1);
+    setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 1);
+    const first = el.firstElementChild;
+    const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
+    setActive(Math.round(el.scrollLeft / slideW));
+  }, [gap]);
+  useEffect(() => {
+    update();
+    const el = scrollerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", update, { passive: true });
+    window.addEventListener("resize", update);
+    return () => {
+      el.removeEventListener("scroll", update);
+      window.removeEventListener("resize", update);
+    };
+  }, [update]);
+  const scrollByDir = (dir) => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const first = el.firstElementChild;
+    const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
+    el.scrollBy({ left: dir * slideW, behavior: "smooth" });
+  };
+  const scrollTo = (i) => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const first = el.firstElementChild;
+    const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
+    el.scrollTo({ left: i * slideW, behavior: "smooth" });
+  };
+  const arrowBtn = "absolute top-1/2 -translate-y-1/2 z-10 flex h-9 w-9 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-md transition hover:text-foreground hover:bg-surface-raised disabled:opacity-0 disabled:pointer-events-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
+  return /* @__PURE__ */ jsxs("section", { "aria-label": ariaLabel, className: ["relative", className].filter(Boolean).join(" "), style, children: [
+    showArrows && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Previous", onClick: () => scrollByDir(-1), disabled: atStart, className: `${arrowBtn} left-1`, children: /* @__PURE__ */ jsx(Arrow2, { dir: "left" }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: scrollerRef,
+        className: "flex overflow-x-auto snap-x snap-mandatory hidden-scrollbar scroll-smooth",
+        style: { gap },
+        children: slides.map((slide, i) => /* @__PURE__ */ jsx("div", { className: "snap-start flex-shrink-0", style: { width }, children: slide }, i))
+      }
+    ),
+    showArrows && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Next", onClick: () => scrollByDir(1), disabled: atEnd, className: `${arrowBtn} right-1`, children: /* @__PURE__ */ jsx(Arrow2, { dir: "right" }) }),
+    showDots && slides.length > 1 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex items-center justify-center gap-1.5", children: slides.map((_, i) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": `Go to slide ${i + 1}`,
+        "aria-current": i === active,
+        onClick: () => scrollTo(i),
+        className: [
+          "h-1.5 rounded-full transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+          i === active ? "w-5 bg-accent" : "w-1.5 bg-border hover:bg-foreground-muted"
+        ].join(" ")
+      },
+      i
+    )) })
+  ] });
+}
+var VALUE_SIZE = {
+  sm: "text-xl",
+  md: "text-3xl",
+  lg: "text-4xl"
+};
+var TONE2 = {
+  good: "text-status-success",
+  bad: "text-status-error",
+  neutral: "text-foreground-muted"
+};
+var ArrowUp = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, "aria-hidden": "true", className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19V5M5 12l7-7 7 7" }) });
+var ArrowDown = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, "aria-hidden": "true", className: "h-3.5 w-3.5", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 5v14M5 12l7 7 7-7" }) });
+function Statistic({
+  label,
+  value,
+  prefix,
+  suffix,
+  icon,
+  delta,
+  helpText,
+  size = "md",
+  align = "left",
+  className = "",
+  style
+}) {
+  const dir = delta?.direction ?? "neutral";
+  const positiveIsGood = delta?.positiveIsGood ?? true;
+  const deltaTone = dir === "neutral" ? "neutral" : dir === "up" === positiveIsGood ? "good" : "bad";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["flex gap-3", align === "center" ? "flex-col items-center text-center" : "items-start", className].filter(Boolean).join(" "),
+      style,
+      children: [
+        icon && align === "left" && /* @__PURE__ */ jsx("span", { className: "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-accent/10 text-accent", children: /* @__PURE__ */ jsx("span", { className: "h-5 w-5 inline-flex items-center justify-center", children: icon }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wide text-foreground-muted", children: label }),
+          /* @__PURE__ */ jsxs("div", { className: `mt-1 flex items-baseline gap-0.5 font-semibold text-foreground tabular-nums ${VALUE_SIZE[size]} ${align === "center" ? "justify-center" : ""}`, children: [
+            prefix && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-[0.6em] font-medium self-center", children: prefix }),
+            /* @__PURE__ */ jsx("span", { className: "leading-none", children: value }),
+            suffix && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted text-[0.5em] font-medium self-center", children: suffix })
+          ] }),
+          delta && /* @__PURE__ */ jsxs("div", { className: `mt-1.5 flex items-center gap-1 text-sm font-medium ${align === "center" ? "justify-center" : ""} ${TONE2[deltaTone]}`, children: [
+            dir === "up" ? ArrowUp : dir === "down" ? ArrowDown : null,
+            /* @__PURE__ */ jsx("span", { children: delta.value }),
+            delta.label && /* @__PURE__ */ jsx("span", { className: "text-foreground-muted font-normal", children: delta.label })
+          ] }),
+          helpText && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-foreground-muted", children: helpText })
+        ] })
+      ]
+    }
+  );
+}
 var NotificationContext = createContext({
   open: () => void 0,
   close: () => void 0
@@ -2740,7 +2929,7 @@ function Field({
   );
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React15.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React16.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -3241,7 +3430,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React15.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React16.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -3785,8 +3974,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
 function MegaMenuFeatured({ children, className = "" }) {
   return /* @__PURE__ */ jsx("div", { className: ["min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
 }
-var elementsOfType = (children, type) => React15.Children.toArray(children).filter(
-  (c) => React15.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React16.Children.toArray(children).filter(
+  (c) => React16.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
   "svg",
@@ -3823,9 +4012,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React15.Children.toArray(panel.props.children);
+  const nodes = React16.Children.toArray(panel.props.children);
   return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
-    if (!React15.isValidElement(node)) return null;
+    if (!React16.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -4118,7 +4307,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React15.useId().replace(/:/g, "");
+  const id = React16.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -6122,7 +6311,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React15.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React16.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -7336,6 +7525,6 @@ function CreditCardForm({
   );
 }
 
-export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button, CARD_BRANDS, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Kbd, List2 as List, LoadingSpinner, MegaMenu_default as MegaMenu, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button, CARD_BRANDS, Card_default as Card, CardCarousel, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Kbd, List2 as List, LoadingSpinner, MegaMenu_default as MegaMenu, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Statistic, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map