@geomak/ui 6.13.0 → 6.14.0

package/dist/index.d.cts

@@ -1247,7 +1247,7 @@ interface FABProps {
  */
 declare function FAB({ icon, label, onClick, actions, position, size, tone, fixed, className, style, }: FABProps): react_jsx_runtime.JSX.Element;
 
-type PopConfirmTone = 'default' | 'danger';
+type PopConfirmTone = 'default' | 'info' | 'warning' | 'error' | 'danger' | 'success';
 interface PopConfirmProps {
     /** The trigger element. Cloned as the popover anchor (rendered `asChild`). */
     children: React__default.ReactElement;
@@ -1263,7 +1263,7 @@ interface PopConfirmProps {
     confirmText?: React__default.ReactNode;
     /** Cancel button label. Default `'Cancel'`. */
     cancelText?: React__default.ReactNode;
-    /** `'danger'` colours the confirm button red. Default `'default'`. */
+    /** Visual + semantic tone of the confirmation prompt. Default `'default'`. */
     tone?: PopConfirmTone;
     /** Leading icon shown beside the title. */
     icon?: React__default.ReactNode;
@@ -1276,13 +1276,13 @@ interface PopConfirmProps {
 }
 /**
  * A lightweight confirm prompt anchored to its trigger, on Radix Popover. Use it
- * for in-place "are you sure?" gates (delete, archive) instead of a full Modal.
- * An async `onConfirm` keeps the confirm button in a loading state until it
- * resolves, then closes.
+ * for in-place "are you sure?" gates (delete, archive, publish, etc.) instead of
+ * a full Modal. An async `onConfirm` keeps the confirm button in a loading state
+ * until it resolves, then closes.
  *
  * @example
  * ```tsx
- * <PopConfirm title="Delete this vessel?" tone="danger" confirmText="Delete" onConfirm={remove}>
+ * <PopConfirm title="Delete this vessel?" tone="error" confirmText="Delete" onConfirm={remove}>
  *   <Button content="Delete" variant="danger" />
  * </PopConfirm>
  * ```
@@ -2524,27 +2524,19 @@ interface SkeletonCardProps extends SkeletonBaseProps {
  */
 declare function SkeletonCard({ hasAvatar, lines, className, style }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonProps {
+interface ButtonProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'content'> {
     /** Button content (text or nodes). */
     content?: React__default.ReactNode;
     /** Visual style variant */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'warning' | 'success' | 'info';
     /** Size — controls height, padding, and font size */
     size?: 'sm' | 'md' | 'lg';
     /** HTML button type */
     buttonType?: 'button' | 'submit' | 'reset';
     /** Show a loading spinner and disable the control. */
     loading?: boolean;
-    /** Disable interaction and dim the control. */
-    disabled?: boolean;
-    /** Inline style overrides (width, etc.). Margins/layout belong in the parent. */
-    style?: React__default.CSSProperties;
-    /** Extra classes appended to the button (override variant/size styles). */
-    className?: string;
     /** Leading icon — rendered before content */
     icon?: React__default.ReactNode;
-    /** Click handler. */
-    onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
     /**
      * @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
      * Will be removed in the next major version.
@@ -2555,6 +2547,7 @@ interface ButtonProps {
  * Primary action button with variant + size system.
  *
  * Width is never hardcoded — set `style={{ width }}` or let the parent grid/flex control it.
+ * Uses `React.forwardRef` so it works as a Radix `asChild` trigger (Popover, Tooltip, etc.).
  *
  * @example
  * <Button content="Save" onClick={handleSave} />
@@ -2562,7 +2555,7 @@ interface ButtonProps {
  * <Button content="Cancel" variant="secondary" />
  * <Button content="Loading…" loading buttonType="submit" />
  */
-declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, className, }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Shared field foundation for all oxygen-ui inputs.

package/dist/index.d.ts

@@ -1247,7 +1247,7 @@ interface FABProps {
  */
 declare function FAB({ icon, label, onClick, actions, position, size, tone, fixed, className, style, }: FABProps): react_jsx_runtime.JSX.Element;
 
-type PopConfirmTone = 'default' | 'danger';
+type PopConfirmTone = 'default' | 'info' | 'warning' | 'error' | 'danger' | 'success';
 interface PopConfirmProps {
     /** The trigger element. Cloned as the popover anchor (rendered `asChild`). */
     children: React__default.ReactElement;
@@ -1263,7 +1263,7 @@ interface PopConfirmProps {
     confirmText?: React__default.ReactNode;
     /** Cancel button label. Default `'Cancel'`. */
     cancelText?: React__default.ReactNode;
-    /** `'danger'` colours the confirm button red. Default `'default'`. */
+    /** Visual + semantic tone of the confirmation prompt. Default `'default'`. */
     tone?: PopConfirmTone;
     /** Leading icon shown beside the title. */
     icon?: React__default.ReactNode;
@@ -1276,13 +1276,13 @@ interface PopConfirmProps {
 }
 /**
  * A lightweight confirm prompt anchored to its trigger, on Radix Popover. Use it
- * for in-place "are you sure?" gates (delete, archive) instead of a full Modal.
- * An async `onConfirm` keeps the confirm button in a loading state until it
- * resolves, then closes.
+ * for in-place "are you sure?" gates (delete, archive, publish, etc.) instead of
+ * a full Modal. An async `onConfirm` keeps the confirm button in a loading state
+ * until it resolves, then closes.
  *
  * @example
  * ```tsx
- * <PopConfirm title="Delete this vessel?" tone="danger" confirmText="Delete" onConfirm={remove}>
+ * <PopConfirm title="Delete this vessel?" tone="error" confirmText="Delete" onConfirm={remove}>
  *   <Button content="Delete" variant="danger" />
  * </PopConfirm>
  * ```
@@ -2524,27 +2524,19 @@ interface SkeletonCardProps extends SkeletonBaseProps {
  */
 declare function SkeletonCard({ hasAvatar, lines, className, style }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
 
-interface ButtonProps {
+interface ButtonProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'content'> {
     /** Button content (text or nodes). */
     content?: React__default.ReactNode;
     /** Visual style variant */
-    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'warning' | 'success' | 'info';
     /** Size — controls height, padding, and font size */
     size?: 'sm' | 'md' | 'lg';
     /** HTML button type */
     buttonType?: 'button' | 'submit' | 'reset';
     /** Show a loading spinner and disable the control. */
     loading?: boolean;
-    /** Disable interaction and dim the control. */
-    disabled?: boolean;
-    /** Inline style overrides (width, etc.). Margins/layout belong in the parent. */
-    style?: React__default.CSSProperties;
-    /** Extra classes appended to the button (override variant/size styles). */
-    className?: string;
     /** Leading icon — rendered before content */
     icon?: React__default.ReactNode;
-    /** Click handler. */
-    onClick?: React__default.MouseEventHandler<HTMLButtonElement>;
     /**
      * @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
      * Will be removed in the next major version.
@@ -2555,6 +2547,7 @@ interface ButtonProps {
  * Primary action button with variant + size system.
  *
  * Width is never hardcoded — set `style={{ width }}` or let the parent grid/flex control it.
+ * Uses `React.forwardRef` so it works as a Radix `asChild` trigger (Popover, Tooltip, etc.).
  *
  * @example
  * <Button content="Save" onClick={handleSave} />
@@ -2562,7 +2555,7 @@ interface ButtonProps {
  * <Button content="Cancel" variant="secondary" />
  * <Button content="Loading…" loading buttonType="submit" />
  */
-declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, className, }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare const Button: React__default.ForwardRefExoticComponent<ButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
 
 /**
  * Shared field foundation for all oxygen-ui inputs.

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 React19, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useLayoutEffect, useSyncExternalStore } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React20, { 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';
@@ -649,8 +649,6 @@ var VARIANT_CLASSES = {
     "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
   ].join(" "),
   ghost: [
-    // Semantic tokens handle both light and dark modes — no `dark:`
-    // variants needed.
     "bg-transparent text-foreground-secondary",
     "hover:bg-surface-raised hover:text-foreground",
     "active:bg-surface",
@@ -663,6 +661,27 @@ var VARIANT_CLASSES = {
     "active:opacity-100",
     "disabled:opacity-50 disabled:cursor-not-allowed",
     "focus-visible:ring-2 focus-visible:ring-status-error focus-visible:ring-offset-2"
+  ].join(" "),
+  warning: [
+    "bg-status-warning text-white",
+    "hover:opacity-90",
+    "active:opacity-100",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "focus-visible:ring-2 focus-visible:ring-status-warning focus-visible:ring-offset-2"
+  ].join(" "),
+  success: [
+    "bg-status-success text-white",
+    "hover:opacity-90",
+    "active:opacity-100",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "focus-visible:ring-2 focus-visible:ring-status-success focus-visible:ring-offset-2"
+  ].join(" "),
+  info: [
+    "bg-status-info text-white",
+    "hover:opacity-90",
+    "active:opacity-100",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "focus-visible:ring-2 focus-visible:ring-status-info focus-visible:ring-offset-2"
   ].join(" ")
 };
 var SIZE_CLASSES = {
@@ -670,7 +689,7 @@ var SIZE_CLASSES = {
   md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
   lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
 };
-function Button({
+var Button = React20.forwardRef(function Button2({
   content,
   variant = "primary",
   size = "md",
@@ -680,17 +699,21 @@ function Button({
   style,
   icon,
   onClick,
-  className = ""
-}) {
+  className = "",
+  type: _deprecated,
+  // consume deprecated prop — do not spread to DOM
+  ...rest
+}, ref) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
+      ...rest,
+      ref,
       onClick,
       disabled: disabled || loading,
       type: buttonType,
       style,
       className: [
-        // Base — layout, transitions, focus reset
         "inline-flex items-center justify-center font-medium",
         "outline-none transition-colors duration-150 select-none",
         "whitespace-nowrap",
@@ -720,7 +743,9 @@ function Button({
       ]
     }
   );
-}
+});
+Button.displayName = "Button";
+var Button_default = Button;
 function Modal({
   width,
   size,
@@ -783,7 +808,7 @@ function Modal({
           /* @__PURE__ */ jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children }),
           hasFooter && /* @__PURE__ */ jsxs("div", { className: "flex flex-shrink-0 items-center justify-end gap-3 border-t border-border px-5 py-3", children: [
             /* @__PURE__ */ jsx(
-              Button,
+              Button_default,
               {
                 style: { width: 90 },
                 content: cancelText,
@@ -791,7 +816,7 @@ function Modal({
               }
             ),
             /* @__PURE__ */ jsx(
-              Button,
+              Button_default,
               {
                 style: { width: 90 },
                 content: okText,
@@ -865,8 +890,8 @@ function Drawer({
           ] }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-5", children }),
           hasFooter && /* @__PURE__ */ jsxs("div", { className: `flex flex-shrink-0 items-center gap-3 border-t border-border px-5 py-3 ${isRight ? "justify-start" : "justify-end"}`, children: [
-            /* @__PURE__ */ jsx(Button, { style: { width: 90 }, content: cancelText, onClick: onCancel }),
-            /* @__PURE__ */ jsx(Button, { style: { width: 90 }, content: okText, onClick: onOk })
+            /* @__PURE__ */ jsx(Button_default, { style: { width: 90 }, content: cancelText, onClick: onCancel }),
+            /* @__PURE__ */ jsx(Button_default, { style: { width: 90 }, content: okText, onClick: onOk })
           ] })
         ]
       }
@@ -1630,7 +1655,7 @@ 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(React19.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(React20.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}`)) });
@@ -1704,7 +1729,7 @@ function CardCarousel({
   style
 }) {
   const scrollerRef = useRef(null);
-  const slides = React19.Children.toArray(children);
+  const slides = React20.Children.toArray(children);
   const [active, setActive] = useState(0);
   const [atStart, setAtStart] = useState(true);
   const [atEnd, setAtEnd] = useState(false);
@@ -1923,6 +1948,22 @@ function FAB({
     }
   );
 }
+var ICON_COLOR = {
+  default: "text-foreground-muted",
+  info: "text-status-info",
+  warning: "text-status-warning",
+  error: "text-status-error",
+  danger: "text-status-error",
+  success: "text-status-success"
+};
+var CONFIRM_VARIANT = {
+  default: "primary",
+  info: "info",
+  warning: "warning",
+  error: "danger",
+  danger: "danger",
+  success: "success"
+};
 function PopConfirm({
   children,
   title,
@@ -1966,33 +2007,39 @@ function PopConfirm({
         side,
         sideOffset: 8,
         collisionPadding: 12,
-        className: [
-          "z-[400] w-64 rounded-lg border border-border bg-surface p-3.5 shadow-lg",
-          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-          className
-        ].filter(Boolean).join(" "),
+        className: ["z-[400] focus:outline-none", className].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5", children: [
-            icon && /* @__PURE__ */ jsx("span", { className: `mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center ${tone === "danger" ? "text-status-error" : "text-status-warning"}`, children: icon }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }),
-              description && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-foreground-secondary leading-snug", children: description })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { content: cancelText, size: "sm", variant: "ghost", onClick: handleCancel }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                content: confirmText,
-                size: "sm",
-                variant: tone === "danger" ? "danger" : "primary",
-                loading,
-                onClick: handleConfirm
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.95 },
+              animate: { opacity: 1, scale: 1 },
+              transition: { duration: 0.12, ease: [0.16, 1, 0.3, 1] },
+              className: "w-64 rounded-lg border border-border bg-surface p-3.5 shadow-lg",
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex gap-2.5", children: [
+                  icon && /* @__PURE__ */ jsx("span", { className: `mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center ${ICON_COLOR[tone]}`, children: icon }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title }),
+                    description && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs text-foreground-secondary leading-snug", children: description })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
+                  /* @__PURE__ */ jsx(Button_default, { content: cancelText, size: "sm", variant: "ghost", onClick: handleCancel }),
+                  /* @__PURE__ */ jsx(
+                    Button_default,
+                    {
+                      content: confirmText,
+                      size: "sm",
+                      variant: CONFIRM_VARIANT[tone],
+                      loading,
+                      onClick: handleConfirm
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsx(Popover.Arrow, { className: "fill-surface" })
         ]
       }
@@ -2681,7 +2728,7 @@ function GridCard({ item, buttonText = "Open Application", onOpen, className = "
     /* @__PURE__ */ jsx("div", { className: "h-1/4 flex items-center justify-center", children: typeof item.cover === "string" ? /* @__PURE__ */ jsx("img", { src: item.cover, alt: "Grid Card Cover" }) : item.cover }),
     /* @__PURE__ */ jsx("div", { className: "text-prussian-blue text-sm dark:text-white text-center h-1/4", children: /* @__PURE__ */ jsx("p", { children: item.description }) }),
     /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-      Button,
+      Button_default,
       {
         disabled: !item.enabled,
         style: { width: "max-content", padding: "0 8px", margin: "0" },
@@ -2719,7 +2766,7 @@ function OpaqueGridCard({
           }
         ),
         /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-          Button,
+          Button_default,
           {
             style: {
               width: "max-content",
@@ -3133,7 +3180,7 @@ function Wizard({
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 dismissible && !isLast && /* @__PURE__ */ jsx(
-                  Button,
+                  Button_default,
                   {
                     variant: "ghost",
                     size: "sm",
@@ -3142,7 +3189,7 @@ function Wizard({
                   }
                 ),
                 activeIndex > 0 && /* @__PURE__ */ jsx(
-                  Button,
+                  Button_default,
                   {
                     variant: "secondary",
                     size: "sm",
@@ -3151,7 +3198,7 @@ function Wizard({
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  Button,
+                  Button_default,
                   {
                     size: "sm",
                     content: isLast ? "Done" : "Next",
@@ -3296,7 +3343,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 = React19.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React20.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",
     {
@@ -3797,7 +3844,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(React19.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React20.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -4341,8 +4388,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) => React19.Children.toArray(children).filter(
-  (c) => React19.isValidElement(c) && c.type === type
+var elementsOfType = (children, type) => React20.Children.toArray(children).filter(
+  (c) => React20.isValidElement(c) && c.type === type
 );
 var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
   "svg",
@@ -4379,9 +4426,9 @@ function MobileLinkRow({ link, onNavigate }) {
   );
 }
 function MobilePanel({ panel, onNavigate }) {
-  const nodes = React19.Children.toArray(panel.props.children);
+  const nodes = React20.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 (!React19.isValidElement(node)) return null;
+    if (!React20.isValidElement(node)) return null;
     const el = node;
     if (el.type === MegaMenuSection) {
       const { title, children } = el.props;
@@ -4674,7 +4721,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React19.useId().replace(/:/g, "");
+  const id = React20.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -6678,7 +6725,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(React19.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(React20.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -7886,12 +7933,12 @@ function CreditCardForm({
             }
           ) })
         ] }),
-        !hideSubmit && /* @__PURE__ */ jsx(Button, { content: submitLabel, buttonType: "submit", variant: "primary", disabled })
+        !hideSubmit && /* @__PURE__ */ jsx(Button_default, { content: submitLabel, buttonType: "submit", variant: "primary", disabled })
       ]
     }
   );
 }
 
-export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button, CARD_BRANDS, Calendar2 as Calendar, Card_default as Card, CardCarousel, Cart, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FAB, 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, PopConfirm, 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 };
+export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Calendar2 as Calendar, Card_default as Card, CardCarousel, Cart, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FAB, 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, PopConfirm, 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