@keboola/design 2.0.1 → 2.1.0

package/dist/index.cjs

@@ -8,26 +8,24 @@ var react = require('react');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
-var icons = require('@awesome.me/kit-be8bcf7e5e/icons');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
 var reactDayPicker = require('react-day-picker');
 require('react-day-picker/src/style.css');
 var reactPopover = require('@radix-ui/react-popover');
 var ScrollAreaPrimitive2 = require('@radix-ui/react-scroll-area');
 var TextareaAutosize = require('react-textarea-autosize');
 var RLabel = require('@radix-ui/react-label');
-var design = require('@keboola/design');
 var reactSwitch = require('@radix-ui/react-switch');
 var reactHoverCard = require('@radix-ui/react-hover-card');
 var RSeparator = require('@radix-ui/react-separator');
 var RRadioGroup = require('@radix-ui/react-radio-group');
 var reactSlider = require('@radix-ui/react-slider');
 var SelectPrimitive = require('@radix-ui/react-select');
+var icons = require('@awesome.me/kit-be8bcf7e5e/icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
 var reactCheckbox = require('@radix-ui/react-checkbox');
 var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var reactDom = require('react-dom');
-var icons$1 = require('@keboola/design/icons');
 var reactCollapsible = require('@radix-ui/react-collapsible');
 var cmdk = require('cmdk');
 var combobox = require('@base-ui/react/combobox');
@@ -235,7 +233,7 @@ var TooltipTrigger = ({
     if (keepOpenOnClick) event.preventDefault();
     onClick?.(event);
   };
-  const handePointerDown = (event) => {
+  const handlePointerDown = (event) => {
     if (keepOpenOnClick) event.preventDefault();
     onPointerDown?.(event);
   };
@@ -247,8 +245,16 @@ var TooltipTrigger = ({
       ref,
       className: cn("tailwindcss-preflight", className),
       onClick: handleClick,
-      onPointerDown: handePointerDown,
-      children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      onPointerDown: handlePointerDown,
+      children: asChild ? children : (
+        // Default-mode trigger wraps children in a span so Radix has a
+        // single DOM element to attach handlers to. `tailwindcss-preflight`
+        // (merged in via Slot) activates Tailwind's preflight inside the
+        // span, which sets `svg { display: block }` — without an inline-flex
+        // container that would stack any bare Lucide icon onto its own
+        // line. `tw-inline-flex tw-items-center` keeps icon + text aligned.
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-inline-flex tw-items-center", children })
+      )
     }
   );
 };
@@ -366,29 +372,20 @@ var sha256 = async (text) => {
 var useSHA256 = (text) => {
   const [hash, setHash] = react.useState("");
   react.useEffect(() => {
-    if (text) {
-      sha256(text).then(setHash);
+    if (!text) {
+      setHash("");
+      return;
     }
+    let cancelled = false;
+    sha256(text).then((h) => {
+      if (!cancelled) setHash(h);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [text]);
   return hash;
 };
-var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { ...rest, ref, icon });
-
-// src/components/Icon/index.ts
-var validIconNames;
-var getValidIconNames = () => {
-  if (validIconNames) return validIconNames;
-  validIconNames = new Set(
-    Object.values(icons.fas).flatMap((def) => {
-      if (def !== null && typeof def === "object" && "iconName" in def && typeof def.iconName === "string") {
-        return [def.iconName];
-      }
-      return [];
-    })
-  );
-  return validIconNames;
-};
-var isIconName = (name) => getValidIconNames().has(name);
 var variants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
@@ -676,10 +673,10 @@ var Button = ({
   variant = "primary",
   size = "medium",
   block = false,
-  icon,
   ...buttonProps
 }) => {
   const Comp = asChild ? reactSlot.Root : "button";
+  const isIconOnly = String(size).startsWith("icon");
   const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
     size,
     variant,
@@ -702,14 +699,13 @@ var Button = ({
       disabled,
       "aria-disabled": disabled,
       "data-variant": variant,
-      "data-icon-only": String(size).startsWith("icon"),
+      "data-icon-only": isIconOnly,
       type,
       onClick: handleClick,
       className: cn(classNames),
       children: [
         isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
-        !isLoading && icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
+        /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children: isLoading && isIconOnly ? null : children })
       ]
     }
   );
@@ -2107,21 +2103,21 @@ var Clipboard = ({
     return tooltip;
   })();
   const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
-  return /* @__PURE__ */ jsxRuntime.jsxs(design.Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
-      design.Tooltip.Trigger,
+      Tooltip.Trigger,
       {
         ...restButtonProps,
         asChild,
         keepOpenOnClick: true,
         onClick: handleOnClick,
-        className: design.cn("tw-cursor-pointer", className),
+        className: cn("tw-cursor-pointer", className),
         ref,
         children: children ?? text
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
-      design.Tooltip.Content,
+      Tooltip.Content,
       {
         keepOpenOnPointerDownOutside: true,
         placement: tooltipPlacement,
@@ -3120,39 +3116,53 @@ var Search2 = ({
     onChange?.("", event);
     onClear?.();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        searchWrapperVariants({ variant }),
-        {
-          "tw-cursor-not-allowed tw-opacity-40": disabled
-        },
-        className
-      ),
-      "data-testid": testId.wrapper,
-      children: [
-        variant === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "tw-size-4 tw-shrink-0 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+  const handleWrapperMouseDown = (event) => {
+    if (disabled || readOnly) return;
+    if (event.target.closest('button, a, input, textarea, [role="button"]')) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.querySelector("input")?.focus();
+  };
+  return (
+    // Mouse-only convenience: clicking the chrome focuses the input. The input itself is the
+    // real interactive/focusable target, so no extra role or key handler is needed here.
+    // oxlint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          searchWrapperVariants({ variant }),
           {
-            ...rest,
-            ref,
-            placeholder,
-            "data-testid": testId.input,
-            type: "text",
-            value: internalValue ?? "",
-            onChange: handleChange,
-            onBlur: handleBlur,
-            className: searchInputClassnames,
-            disabled,
-            readOnly
-          }
+            "tw-cursor-not-allowed tw-opacity-40": disabled
+          },
+          className
         ),
-        isClearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onClick: handleClear, testId: testId.clearButton }),
-        suffix
-      ]
-    }
+        "data-testid": testId.wrapper,
+        onMouseDown: handleWrapperMouseDown,
+        children: [
+          variant === "ai" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sparkles, { className: "tw-size-4 tw-shrink-0 [&_*]:tw-stroke-aigradient-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "tw-size-4 tw-shrink-0 tw-text-neutral-400" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...rest,
+              ref,
+              placeholder,
+              "data-testid": testId.input,
+              type: "text",
+              value: internalValue ?? "",
+              onChange: handleChange,
+              onBlur: handleBlur,
+              className: searchInputClassnames,
+              disabled,
+              readOnly
+            }
+          ),
+          isClearButtonVisible && /* @__PURE__ */ jsxRuntime.jsx(ClearButton, { onClick: handleClear, testId: testId.clearButton }),
+          suffix
+        ]
+      }
+    )
   );
 };
 var SearchForm = ({
@@ -3257,6 +3267,23 @@ var SelectContent = ({
   }
 ) });
 var SelectGroup = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Group, { ...props, className: cn("tw-flex tw-flex-col tw-gap-0.5", className) });
+var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { ...rest, ref, icon });
+
+// src/components/Icon/index.ts
+var validIconNames;
+var getValidIconNames = () => {
+  if (validIconNames) return validIconNames;
+  validIconNames = new Set(
+    Object.values(icons.fas).flatMap((def) => {
+      if (def !== null && typeof def === "object" && "iconName" in def && typeof def.iconName === "string") {
+        return [def.iconName];
+      }
+      return [];
+    })
+  );
+  return validIconNames;
+};
+var isIconName = (name) => getValidIconNames().has(name);
 var isFAIconValue = (value) => typeof value === "string" || Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
 var renderLegacyIcon = (value) => isFAIconValue(value) ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: value }) : value;
 var SelectItem = ({
@@ -4380,7 +4407,7 @@ var ModalIcon = (props) => {
                 '[&_svg:not([class*="tw-size-"])]:tw-size-6',
                 "[&_svg]:tw-aspect-square"
               ),
-              children: isFAIconValue(props.icon) ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: props.icon, spin: props.spin }) : props.icon
+              children: renderLegacyIcon(props.icon)
             }
           )
         }
@@ -4421,7 +4448,7 @@ var Truncated = ({
   const isScrollableTarget = (e) => {
     return e.scrollHeight - OFFSET_TOLERANCE >= e.clientHeight;
   };
-  const truncatedClasses = design.cn(
+  const truncatedClasses = cn(
     className,
     "tw-overflow-hidden [word-break:break-all]",
     "[display:-webkit-box!important] [-webkit-box-orient:vertical]",
@@ -4431,7 +4458,7 @@ var Truncated = ({
     return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: truncatedClasses, ...rest, children: text });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    design.Tooltip,
+    Tooltip,
     {
       placement: tooltipPlacement,
       variant: tooltipVariant,
@@ -4764,7 +4791,7 @@ var SplitButtonBase = ({
             size: iconSizeMap[size],
             variant,
             "aria-label": "Additional actions",
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons$1.ChevronDown, { className: "tw-size-5" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "tw-size-5" })
           }
         ) }),
         /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu.Content, { align: "end", children: actions })
@@ -7608,7 +7635,7 @@ var NavbarMenuAvatar = ({
       ...rest,
       ref,
       type,
-      className: design.cn(
+      className: cn(
         "tw-flex",
         "tw-items-center",
         "tw-justify-center",
@@ -7783,7 +7810,7 @@ var NavbarMenuButton = ({
   const Comp = asChild ? reactSlot.Root : "button";
   const isSearchVariant = variant === "search";
   const isEmphasizedVariant = variant === "emphasized";
-  const adornment = isSearchVariant ? /* @__PURE__ */ jsxRuntime.jsx(icons$1.Search, {}) : renderLegacyIcon(icon);
+  const adornment = isSearchVariant ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, {}) : renderLegacyIcon(icon);
   const adornmentVariant = (() => {
     if (isSearchVariant || variant === "icon") return "icon-button";
     if (isEmphasizedVariant) return "icon-accent-emphasized";
@@ -7796,7 +7823,7 @@ var NavbarMenuButton = ({
       ref,
       type,
       "data-variant": variant,
-      className: design.cn(variants7({ className, variant })),
+      className: cn(variants7({ className, variant })),
       children: [
         adornment && /* @__PURE__ */ jsxRuntime.jsx(NavbarMenuItemAdornment, { variant: adornmentVariant, children: adornment }),
         /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
@@ -7993,7 +8020,7 @@ var Avatar = ({
       ...props,
       ref,
       style: styles.wrapper,
-      className: design.cn(
+      className: cn(
         variant === "circle" ? "tw-rounded-full" : "tw-rounded-md",
         "tw-overflow-hidden",
         "focus-visible:tw-outline-none",
@@ -9237,7 +9264,7 @@ var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
         disabled: disabled || readOnly,
         onClick: handleOpenPicker,
         "aria-label": "Pick color",
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Pipette, { className: "tw-size-4" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pipette, { className: "tw-size-4" })
       }
     )
   ] });
@@ -12159,6 +12186,7 @@ var ToastRoot = ({
           "tw-inline-flex",
           "tw-items-center",
           "tw-justify-center",
+          "tw-self-center",
           // styles — container at 20px with no padding so the 20px Lucide
           // glyph fills the slot (previous tw-size-4 + tw-p-1 clipped a
           // 16px child into 8px of visible space)
@@ -12542,6 +12570,7 @@ var PageHeaderDetail = ({
   breadcrumbs,
   overflowActions,
   title,
+  titleIcon,
   badges,
   description,
   primaryAction,
@@ -12556,6 +12585,7 @@ var PageHeaderDetail = ({
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-min-w-0 tw-flex-1 tw-flex-col tw-gap-2 tw-pr-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: titleRowClass, children: [
+        titleIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-flex tw-shrink-0 tw-items-center", children: titleIcon }),
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: titleClass, children: title }),
         badges && /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgesClass, children: badges })
       ] }),
@@ -12659,7 +12689,7 @@ var Root30 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsxRunt
     children
   }
 );
-var Search4 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
+var Search3 = ({ ref, className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -12717,7 +12747,7 @@ var AddFilter = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntim
 var Clear = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(Button, { argo: true, variant: "invisible", size: "small", className: cn("tw-ml-auto", className), ...props, children: children ?? "Clear all" });
 var PageToolbar = Object.assign(Root30, {
   /** Left slot — typically a `SearchInput`. */
-  Search: Search4,
+  Search: Search3,
   /** Right cluster — host the four control groups below in the recommended order. */
   Right,
   /** Filter controls (`Combobox`, `Select`, `DatePicker`). */
@@ -12874,7 +12904,7 @@ var SearchInputWithNavigation = ({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
-    design.TextInput,
+    TextInput,
     {
       ref,
       allowClear: true,
@@ -12890,7 +12920,7 @@ var SearchInputWithNavigation = ({
       leftSuffix: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: design.cn("tw-flex tw-items-center tw-gap-3", {
+          className: cn("tw-flex tw-items-center tw-gap-3", {
             "tw-hidden": !withControls
           }),
           children: [
@@ -12899,10 +12929,10 @@ var SearchInputWithNavigation = ({
               "/",
               totalResults
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(design.Separator, { orientation: "vertical", size: "3/4" }),
-            /* @__PURE__ */ jsxRuntime.jsxs(design.ButtonGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "vertical", size: "3/4" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(ButtonGroup, { children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                design.Button,
+                Button,
                 {
                   variant: "inline",
                   size: "icon-3xs",
@@ -12912,7 +12942,7 @@ var SearchInputWithNavigation = ({
                 }
               ),
               /* @__PURE__ */ jsxRuntime.jsx(
-                design.Button,
+                Button,
                 {
                   variant: "inline",
                   size: "icon-3xs",
@@ -12954,7 +12984,7 @@ var TagSelectCreateItem = ({ onCreate, value }) => {
       className: cn("[&_svg]:tw-text-primary-500", {
         "tw-hidden": !isCreateItemVisible
       }),
-      icon: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Plus, { className: "tw-size-4" }),
+      icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "tw-size-4" }),
       children: [
         "Create",
         " ",
@@ -14509,7 +14539,7 @@ var FormBody = ({ children, className, ...formProps }) => {
     "form",
     {
       ...formProps,
-      className: design.cn("tw-flex tw-flex-col tw-gap-4", className),
+      className: cn("tw-flex tw-flex-col tw-gap-4", className),
       onSubmit: (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -14526,7 +14556,7 @@ var SubmitButton = ({ children = "Submit", ...buttonProps }) => {
     {
       selector: (state) => ({ isSubmitting: state.isSubmitting, canSubmit: state.canSubmit }),
       children: ({ isSubmitting, canSubmit }) => /* @__PURE__ */ jsxRuntime.jsx(
-        design.Button,
+        Button,
         {
           ...buttonProps,
           type: "submit",
@@ -14551,19 +14581,19 @@ var errorMessage = (field) => {
 var FieldShell = ({ field, label, required, help, className, children }) => {
   const error = errorMessage(field);
   const showError = field.state.meta.isTouched && !!error;
-  return /* @__PURE__ */ jsxRuntime.jsxs(design.FormGroup, { className, state: showError ? "error" : void 0, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(design.Label, { htmlFor: field.name, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormGroup, { className, state: showError ? "error" : void 0, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: field.name, children: [
       label,
       required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-ml-0.5 tw-text-secondary-500", children: "*" })
     ] }),
     children,
-    showError ? /* @__PURE__ */ jsxRuntime.jsx(design.FormGroup.Help, { children: error }) : help && /* @__PURE__ */ jsxRuntime.jsx(design.FormGroup.Help, { children: help })
+    showError ? /* @__PURE__ */ jsxRuntime.jsx(FormGroup.Help, { children: error }) : help && /* @__PURE__ */ jsxRuntime.jsx(FormGroup.Help, { children: help })
   ] });
 };
 var CheckboxField = ({ label, help, className, children, ...checkboxProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.Checkbox,
+    Checkbox,
     {
       id: field.name,
       name: field.name,
@@ -14580,7 +14610,7 @@ var CheckboxField = ({ label, help, className, children, ...checkboxProps }) =>
 var NumberField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.FormGroup.NumberInput,
+    FormGroup.NumberInput,
     {
       id: field.name,
       name: field.name,
@@ -14597,7 +14627,7 @@ var PasswordField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   const showError = field.state.meta.isTouched && field.state.meta.errors.length > 0;
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.PasswordInput,
+    PasswordInput,
     {
       id: field.name,
       name: field.name,
@@ -14626,7 +14656,7 @@ var SelectField = ({
 }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsxs(
-    design.Select.Root,
+    Select.Root,
     {
       value: field.state.value ?? "",
       onValueChange: (value) => {
@@ -14635,7 +14665,7 @@ var SelectField = ({
       ...rootProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          design.Select.Trigger,
+          Select.Trigger,
           {
             id: field.name,
             className: triggerClassName ?? "tw-w-full",
@@ -14646,7 +14676,7 @@ var SelectField = ({
             onBlur: field.handleBlur
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(design.Select.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(design.Select.Item, { value: option.value, children: option.label }, option.value)) })
+        /* @__PURE__ */ jsxRuntime.jsx(Select.Content, { variant: variant === "argo" ? "argo" : "default", children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Item, { value: option.value, children: option.label }, option.value)) })
       ]
     }
   ) });
@@ -14654,7 +14684,7 @@ var SelectField = ({
 var SwitchField = ({ label, help, className, children, ...switchProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.Switch,
+    Switch,
     {
       id: field.name,
       name: field.name,
@@ -14671,7 +14701,7 @@ var SwitchField = ({ label, help, className, children, ...switchProps }) => {
 var TextAreaField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.FormGroup.Textarea,
+    FormGroup.Textarea,
     {
       id: field.name,
       name: field.name,
@@ -14687,7 +14717,7 @@ var TextAreaField = ({ label, required, help, className, ...inputProps }) => {
 var TextField = ({ label, required, help, className, ...inputProps }) => {
   const field = useFieldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(FieldShell, { field, label, required, help, className, children: /* @__PURE__ */ jsxRuntime.jsx(
-    design.FormGroup.TextInput,
+    FormGroup.TextInput,
     {
       id: field.name,
       name: field.name,