@keboola/design 10.1.0 → 11.0.1

package/dist/chunk-SYIEF644.js

@@ -1,1016 +0,0 @@
-import { HelpBlock } from './chunk-ESBL3IPF.js';
-import { Button } from './chunk-CTCFYWJC.js';
-import { X, Pipette } from './chunk-BOHNXTMM.js';
-import { useArgoDesign } from './chunk-63NSN2VL.js';
-import { cn } from './chunk-JP7PNHLH.js';
-import * as ScrollAreaPrimitive2 from '@radix-ui/react-scroll-area';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as RLabel from '@radix-ui/react-label';
-import { cva } from 'class-variance-authority';
-import TextareaAutosize from 'react-textarea-autosize';
-import { createContext, useState, useRef, useCallback, useMemo, use } from 'react';
-
-// src/utils/mergeRefs.ts
-function setRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-  } else if (ref != null) {
-    ref.current = value;
-  }
-}
-var mergeRefs = (...refs) => {
-  return (node) => refs.forEach((ref) => setRef(ref, node));
-};
-
-// src/utils/createChangeInputEvent.ts
-var createChangeInputEvent = (input) => {
-  const changeEvent = {
-    target: input,
-    currentTarget: input,
-    type: "change",
-    nativeEvent: new Event("change", { bubbles: true }),
-    bubbles: true,
-    cancelable: false,
-    defaultPrevented: false,
-    eventPhase: 2,
-    // AT_TARGET
-    isTrusted: false,
-    // Synthetic events are not trusted
-    preventDefault: () => {
-    },
-    // Provide dummy functions if not needed
-    isDefaultPrevented: () => false,
-    stopPropagation: () => {
-    },
-    isPropagationStopped: () => false,
-    persist: () => {
-    },
-    timeStamp: Date.now()
-  };
-  Object.defineProperty(changeEvent, "target", {
-    value: input,
-    writable: false
-  });
-  return changeEvent;
-};
-
-// src/utils/createPrefixedString.ts
-var createPrefixedString = (prefix) => (literals) => literals.reduce((acc, literal) => acc + literal, `${prefix}-`);
-var ScrollBar = ({ className, orientation = "vertical", ...props }) => /* @__PURE__ */ jsx(
-  ScrollAreaPrimitive2.ScrollAreaScrollbar,
-  {
-    orientation,
-    className: cn(
-      "tw:flex tw:touch-none tw:select-none tw:transition-color",
-      {
-        "tw:h-full tw:w-2.5 tw:p-px": orientation === "vertical",
-        "tw:h-2.5 tw:flex-col tw:p-px": orientation === "horizontal"
-      },
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ jsx(
-      ScrollAreaPrimitive2.ScrollAreaThumb,
-      {
-        className: cn(
-          "tw:relative",
-          "tw:flex-1",
-          "tw:rounded-full",
-          "tw:bg-border",
-          "tw:hover:bg-muted-foreground"
-        )
-      }
-    )
-  }
-);
-var ScrollArea = ({
-  ref,
-  className,
-  children,
-  viewPortClassName,
-  orientation,
-  scrollBarClassName,
-  ...props
-}) => /* @__PURE__ */ jsxs(
-  ScrollAreaPrimitive2.Root,
-  {
-    "data-slot": "scroll-area",
-    className: cn(
-      "tw:peer/scroll-area tw:relative tw:overflow-hidden tw:focus-visible:outline-hidden",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(
-        ScrollAreaPrimitive2.Viewport,
-        {
-          ref,
-          className: cn(
-            "tw:h-full tw:w-full tw:rounded-[inherit] tw:focus-visible:outline-hidden",
-            viewPortClassName
-          ),
-          children
-        }
-      ),
-      orientation ? /* @__PURE__ */ jsx(ScrollBar, { className: scrollBarClassName, orientation }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(ScrollBar, { className: scrollBarClassName, orientation: "vertical" }),
-        /* @__PURE__ */ jsx(ScrollBar, { className: scrollBarClassName, orientation: "horizontal" })
-      ] }),
-      /* @__PURE__ */ jsx(ScrollAreaPrimitive2.Corner, {})
-    ]
-  }
-);
-var Optional = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw:ml-0.5", "tw:text-muted-foreground", className), children: "(optional)" });
-var Required = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { ...props, "aria-hidden": true, className: cn("tw:ml-0.5", "tw:text-primary", className), children: "*" });
-var Label = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */ jsx(
-  RLabel.Root,
-  {
-    ...rest,
-    id: id?.toString(),
-    htmlFor: htmlFor?.toString(),
-    className: cn(
-      "tw:m-0 tw:text-foreground tw:font-normal tw:peer-disabled:opacity-50",
-      className
-    ),
-    children
-  }
-);
-Label.Optional = Optional;
-Label.Required = Required;
-var addonVariants = cva(
-  [
-    "tw:flex",
-    "tw:items-center",
-    "tw:gap-1",
-    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
-    "tw:[&_svg.lucide:not([class*='tw:size-'])]:size-4",
-    "tw:[&_svg]:shrink-0"
-  ],
-  {
-    defaultVariants: {
-      align: "inline-start"
-    },
-    variants: {
-      align: {
-        "inline-start": ["tw:order-first", "tw:[&:not(:empty)]:pl-4"],
-        "inline-end": ["tw:order-last", "tw:[&:not(:empty)]:pr-4"],
-        "block-start": [
-          "tw:order-first",
-          // `tw:w-full` needs to be empty-conditional too — when the addon
-          // has no content the root stays in flex-row, and a 100%-wide
-          // empty addon would claim half of the input row beside the input.
-          "tw:[&:not(:empty)]:w-full",
-          "tw:[&:not(:empty)]:px-4",
-          "tw:[&:not(:empty)]:py-1.5"
-        ],
-        "block-end": [
-          "tw:order-last",
-          "tw:[&:not(:empty)]:w-full",
-          "tw:[&:not(:empty)]:px-4",
-          "tw:[&:not(:empty)]:py-1.5"
-        ]
-      }
-    }
-  }
-);
-var InputGroupAddon = ({
-  children,
-  align = "inline-start",
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx("div", { ...props, "data-align": align, className: cn(addonVariants({ align, className })), children });
-var InputGroupButton = ({ ref, className, tabIndex = -1, ...props }) => /* @__PURE__ */ jsx(
-  Button,
-  {
-    ...props,
-    tabIndex,
-    ref,
-    variant: "invisible",
-    size: "icon-sm",
-    className: cn("tw:size-5", "tw:[&_svg]:text-muted-foreground", className)
-  }
-);
-var InputGroupInput = ({ ref, className, ...inputProps }) => /* @__PURE__ */ jsx(
-  "input",
-  {
-    ...inputProps,
-    ref,
-    className: cn(
-      "tw:w-full",
-      "tw:bg-transparent",
-      "tw:outline-hidden",
-      // font
-      "tw:font-sans",
-      "tw:text-sm",
-      // placeholder
-      "tw:placeholder:text-neutral-400",
-      "tw:placeholder:font-normal",
-      // disabled
-      "tw:disabled:cursor-not-allowed",
-      className
-    )
-  }
-);
-var InputGroupText = ({ className, ...props }) => /* @__PURE__ */ jsx(
-  "span",
-  {
-    className: cn(
-      "tw:flex",
-      "tw:items-center",
-      "tw:gap-2",
-      "tw:text-sm",
-      "tw:text-muted-foreground",
-      "tw:[&_svg]:pointer-events-none",
-      'tw:[&_svg:not([class*="tw:size-"])]:size-4',
-      className
-    ),
-    ...props
-  }
-);
-var InputGroupTextArea = ({
-  ref,
-  className,
-  onChange,
-  onValueChange,
-  value,
-  defaultValue,
-  onBlur,
-  onValueBlur,
-  disableResize = false,
-  minRows = 1,
-  maxRows = 4,
-  ...props
-}) => {
-  const handleChange = (event) => {
-    onValueChange?.(event.target.value);
-    onChange?.(event);
-  };
-  const handleBlur = (event) => {
-    onValueBlur?.(event.target.value);
-    onBlur?.(event);
-  };
-  return /* @__PURE__ */ jsx(
-    TextareaAutosize,
-    {
-      ...props,
-      ref,
-      value: value ?? void 0,
-      defaultValue: defaultValue ?? void 0,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      minRows,
-      maxRows: maxRows === "unlimited" ? void 0 : maxRows,
-      className: cn(
-        "tw:w-full",
-        "tw:bg-transparent",
-        "tw:outline-hidden",
-        "tw:px-4",
-        // font
-        "tw:font-sans",
-        "tw:text-sm",
-        // placeholder
-        "tw:placeholder:text-neutral-400",
-        "tw:placeholder:font-normal",
-        // disabled
-        "tw:disabled:cursor-not-allowed",
-        {
-          "tw:resize-none": disableResize
-        },
-        className
-      )
-    }
-  );
-};
-var inputGroupVariants = cva(
-  [
-    "tailwindcss-preflight",
-    "tw:group",
-    "tw:overflow-hidden",
-    "tw:box-border",
-    // positioning
-    "tw:flex",
-    "tw:items-center",
-    // base — legacy (non-argo) chrome uses a fixed radius; argo overrides it with
-    // the brand radius token in the `argo` variant below.
-    "tw:rounded",
-    "tw:border",
-    "tw:border-solid",
-    // `border-input` rather than the fixed `neutral-200` — same light-scheme
-    // grey, but it follows the dark scheme too. The base text stays pinned:
-    // `secondary` and the readonly state below both fill with a fixed light
-    // grey, so a scheme-following text colour would go light-on-light there.
-    // `primary` opts into the token itself (and re-pins its readonly fill).
-    "tw:border-input",
-    "tw:text-neutral-800",
-    "tw:transition",
-    // focus
-    "tw:has-[:is(input,textarea):focus]:ring-4",
-    // readonly
-    "tw:has-[:is(input,textarea)[readonly]]:bg-neutral-150",
-    "tw:has-[:is(input,textarea)[readonly]]:focus-within:ring-0",
-    "tw:has-[:is(input,textarea)[readonly]]:border-neutral-150",
-    // disabled cursor (opacity owned by variant)
-    "tw:has-[:is(input,textarea):disabled]:cursor-not-allowed",
-    // textarea: top-align addons, allow vertical expansion, own its y-padding
-    "tw:has-[textarea]:items-start",
-    "tw:has-[[data-align=block-start]:not(:empty)]:flex-wrap",
-    "tw:has-[[data-align=block-end]:not(:empty)]:flex-wrap",
-    "tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:w-auto",
-    "tw:[&>input]:has-[[data-align=block-start]:not(:empty)]:flex-1",
-    "tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:w-auto",
-    "tw:[&>input]:has-[[data-align=block-end]:not(:empty)]:flex-1",
-    "tw:[&>input]:px-4",
-    "tw:[&>input]:has-[[data-align=inline-start]:not(:empty)]:pl-2",
-    "tw:[&>input]:has-[[data-align=inline-end]:not(:empty)]:pr-2"
-  ],
-  {
-    defaultVariants: {
-      variant: "primary",
-      state: "default",
-      sizing: "medium",
-      focusVariant: "default"
-    },
-    compoundVariants: [
-      {
-        variant: "secondary",
-        state: "error",
-        className: ["tw:bg-error-100"]
-      },
-      {
-        variant: "secondary",
-        state: "warning",
-        className: ["tw:bg-warning-100"]
-      },
-      {
-        variant: "primary",
-        state: "default",
-        focusVariant: "off",
-        className: ["tw:has-[:is(input,textarea):focus]:border-neutral-200"]
-      },
-      {
-        variant: "secondary",
-        state: "default",
-        focusVariant: "off",
-        className: ["tw:has-[:is(input,textarea):focus]:border-neutral-100"]
-      },
-      {
-        variant: ["primary", "secondary"],
-        state: "error",
-        focusVariant: "on",
-        className: ["tw:!border-error-500", "tw:!ring-error-200"]
-      },
-      {
-        variant: ["primary", "secondary"],
-        state: "warning",
-        focusVariant: "on",
-        className: ["tw:!border-warning-500", "tw:!ring-warning-200"]
-      },
-      // --- argo ---
-      {
-        variant: "argo",
-        state: "default",
-        className: [
-          "tw:has-[:is(input,textarea):focus]:border-primary",
-          "tw:has-[:is(input,textarea):focus]:ring-ring/50"
-        ]
-      },
-      {
-        variant: "argo",
-        state: "error",
-        className: [
-          "tw:border-destructive",
-          "tw:has-[:is(input,textarea):focus]:border-destructive",
-          "tw:has-[:is(input,textarea):focus]:ring-destructive/20"
-        ]
-      },
-      {
-        variant: "argo",
-        focusVariant: "on",
-        className: ["tw:!border-primary", "tw:!ring-ring/50"]
-      },
-      {
-        variant: "argo",
-        state: "error",
-        focusVariant: "on",
-        className: ["tw:!border-destructive", "tw:!ring-destructive/20"]
-      },
-      {
-        variant: "argo",
-        state: "default",
-        focusVariant: "off",
-        className: ["tw:has-[:is(input,textarea):focus]:border-input"]
-      }
-    ],
-    variants: {
-      focusVariant: {
-        default: [],
-        on: ["tw:!border-ring", "tw:!ring-ring/30", "tw:!ring-4"],
-        off: ["tw:has-[:is(input,textarea):focus]:!ring-0"]
-      },
-      variant: {
-        primary: [
-          // The field-surface token — white in the light scheme, so this is a
-          // no-op there; the dark scheme gets a field fill, not a white slab.
-          "tw:bg-input-background",
-          "tw:text-foreground",
-          // The base readonly fill is a fixed light grey, which the scheme-following
-          // text above would sit on invisibly in dark. Re-pin to the same
-          // `muted`/`input` pair argo uses for exactly this reason.
-          "tw:has-[:is(input,textarea)[readonly]]:bg-muted",
-          "tw:has-[:is(input,textarea)[readonly]]:border-input",
-          "tw:has-[:is(input,textarea):disabled]:opacity-40",
-          // aria-invalid on the control surfaces the error chrome without a `state` prop — the
-          // accessible path (mirrors the `state="error"` legacy tokens). Higher specificity than
-          // the default focus selector, so it wins without `!important`.
-          "tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500",
-          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500",
-          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200"
-        ],
-        secondary: [
-          "tw:bg-neutral-100",
-          "tw:border-neutral-100",
-          "tw:has-[:is(input,textarea):disabled]:opacity-40",
-          "tw:has-[:is(input,textarea)[aria-invalid=true]]:border-error-500",
-          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-error-500",
-          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-error-200"
-        ],
-        argo: [
-          // argo follows the brand radius token (overrides the static base)
-          "tw:rounded-[var(--radius-lg,0.25rem)]",
-          // muted filled input surface — gray, distinct from white containers; not the app-background token.
-          // Deliberately `muted`, not the `input-background` field token legacy uses: argo's field is a
-          // grey inset by design. Converging the two is a brand-value decision, not a component one.
-          "tw:bg-muted",
-          "tw:border-input",
-          "tw:text-foreground",
-          "tw:has-[:is(input,textarea):disabled]:opacity-50",
-          // readonly: keep the themed input surface/border. The base layer's fixed
-          // `neutral-150` (a light grey) is correct for the legacy light chrome but
-          // collides with argo's themed `foreground` text — light-on-light, invisible
-          // in dark mode. Re-pin to the same `muted`/`input` tokens the editable argo
-          // input uses (validated AA), so readonly stays legible in every scheme.
-          "tw:has-[:is(input,textarea)[readonly]]:bg-muted",
-          "tw:has-[:is(input,textarea)[readonly]]:border-input",
-          // higher specificity than has-[:is(input,textarea):focus] — prevents focus border on readonly
-          "tw:has-[:is(input,textarea)[readonly]:focus]:border-input",
-          // aria-invalid on the control surfaces the error chrome without a `state` prop — the
-          // accessible path (uses the themeable `destructive` status token).
-          "tw:has-[:is(input,textarea)[aria-invalid=true]]:border-destructive",
-          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:border-destructive",
-          "tw:has-[:is(input,textarea)[aria-invalid=true]:focus]:ring-destructive/20"
-        ]
-      },
-      sizing: {
-        default: [
-          "tw:[&>:is(input,textarea)]:py-2.5",
-          "tw:[&>:is(input,textarea)]:leading-[18px]",
-          "tw:[&>textarea]:!min-h-[calc(2.5rem-2px)]"
-        ],
-        small: [
-          "tw:[&>:is(input,textarea)]:py-2",
-          "tw:[&>:is(input,textarea)]:leading-[16px]",
-          "tw:[&>textarea]:!min-h-[calc(2rem-2px)]"
-        ],
-        medium: [
-          "tw:[&>:is(input,textarea)]:py-2",
-          "tw:[&>:is(input,textarea)]:leading-[18px]",
-          "tw:[&>textarea]:!min-h-[calc(2.25rem-2px)]"
-        ]
-      },
-      state: {
-        default: [
-          "tw:has-[:is(input,textarea):focus]:border-ring",
-          "tw:has-[:is(input,textarea):focus]:ring-ring/30"
-        ],
-        error: [
-          "tw:border-error-500",
-          "tw:has-[:is(input,textarea):focus]:border-error-500",
-          "tw:has-[:is(input,textarea):focus]:ring-error-200"
-        ],
-        warning: [
-          "tw:border-warning-500",
-          "tw:has-[:is(input,textarea):focus]:border-warning-500",
-          "tw:has-[:is(input,textarea):focus]:ring-warning-200"
-        ]
-      }
-    }
-  }
-);
-var InputGroupRoot = ({
-  ref,
-  children,
-  state,
-  variant,
-  sizing,
-  focusVariant,
-  className,
-  ...props
-}) => {
-  const isArgo = useArgoDesign();
-  const effectiveVariant = isArgo ? "argo" : variant;
-  const effectiveSizing = effectiveVariant === "argo" ? "medium" : sizing;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...props,
-      ref,
-      className: cn(
-        inputGroupVariants({
-          state,
-          variant: effectiveVariant,
-          sizing: effectiveSizing,
-          focusVariant,
-          className
-        })
-      ),
-      children
-    }
-  );
-};
-var InputGroup = InputGroupRoot;
-InputGroup.Input = InputGroupInput;
-InputGroup.Addon = InputGroupAddon;
-InputGroup.Button = InputGroupButton;
-InputGroup.TextArea = InputGroupTextArea;
-InputGroup.Text = InputGroupText;
-var useControllableState = ({
-  prop,
-  defaultProp,
-  onChange
-}) => {
-  const [uncontrolled, setUncontrolled] = useState(defaultProp);
-  const isControlled = prop !== void 0;
-  const value = prop !== void 0 ? prop : uncontrolled;
-  const valueRef = useRef(value);
-  valueRef.current = value;
-  const onChangeRef = useRef(onChange);
-  onChangeRef.current = onChange;
-  const setValue = useCallback(
-    (next) => {
-      const nextValue = typeof next === "function" ? next(valueRef.current) : next;
-      valueRef.current = nextValue;
-      if (!isControlled) setUncontrolled(nextValue);
-      onChangeRef.current?.(nextValue);
-    },
-    [isControlled]
-  );
-  return [value, setValue];
-};
-
-// src/blocks/TextInput/utils.ts
-var genInputTestId = (prefix = "") => {
-  const ps = createPrefixedString(prefix);
-  return {
-    toString: () => prefix,
-    inputWrapper: ps`input-wrapper`,
-    input: ps`input`,
-    clearButton: ps`clear-button`
-  };
-};
-var sanitizeTextInputValue = (value) => {
-  if (typeof value === "string" && value.trim() === "") return "";
-  return value;
-};
-var TextInput = ({
-  ref: forwardedRef,
-  state = "default",
-  sizing = "default",
-  className,
-  prefix = null,
-  rightSuffix = null,
-  rightSuffixVariant = "default",
-  leftSuffix = null,
-  allowClear = false,
-  onClear,
-  disabled = false,
-  testId: prefixTestId = "",
-  autoFocus = false,
-  id,
-  name,
-  variant,
-  readOnly,
-  type = "text",
-  focusVariant = "default",
-  onChange,
-  onBlur,
-  onValueChange,
-  onValueBlur,
-  value: valueProp,
-  defaultValue,
-  ...inputProps
-}) => {
-  const inputRef = useRef(null);
-  const [value, setValue] = useControllableState({
-    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled and coerced
-    // to a string. Whitespace-only input collapses to '' via `sanitizeTextInputValue`.
-    prop: valueProp === void 0 ? void 0 : sanitizeTextInputValue(valueProp) ?? "",
-    defaultProp: sanitizeTextInputValue(defaultValue) ?? "",
-    onChange: onValueChange
-  });
-  const testId = genInputTestId(prefixTestId);
-  const isClearButtonVisible = !!value && !disabled && !readOnly || !!onClear;
-  const handleChange = (event) => {
-    setValue(event.target.value);
-    onChange?.(event);
-  };
-  const handleBlur = (event) => {
-    onValueBlur?.(event.target.value);
-    onBlur?.(event);
-  };
-  const handleClear = () => {
-    if (inputRef.current === null) return;
-    inputRef.current.value = "";
-    inputRef.current.focus();
-    onClear?.();
-    handleChange(createChangeInputEvent(inputRef.current));
-  };
-  return /* @__PURE__ */ jsxs(
-    InputGroup,
-    {
-      state,
-      variant,
-      sizing,
-      focusVariant,
-      className,
-      "data-testid": testId.inputWrapper,
-      children: [
-        prefix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: prefix }),
-        /* @__PURE__ */ jsx(
-          InputGroup.Input,
-          {
-            ...inputProps,
-            value,
-            autoFocus,
-            type,
-            onChange: handleChange,
-            onBlur: handleBlur,
-            ref: mergeRefs(forwardedRef ?? null, inputRef),
-            disabled,
-            id,
-            name,
-            readOnly,
-            "data-testid": testId.input
-          }
-        ),
-        (leftSuffix || allowClear || rightSuffix) && /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
-          leftSuffix,
-          allowClear && isClearButtonVisible && /* @__PURE__ */ jsx(
-            InputGroup.Button,
-            {
-              "aria-label": "Clear",
-              onMouseDown: (e) => e.preventDefault(),
-              onClick: handleClear,
-              "data-testid": testId.clearButton,
-              children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
-            }
-          ),
-          rightSuffix && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn({
-                "tw:whitespace-nowrap tw:bg-muted tw:px-4 tw:-mr-4 tw:py-2.5": rightSuffixVariant === "addon"
-              }),
-              children: rightSuffix
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var Textarea = ({
-  ref,
-  containerClassName,
-  // group props
-  state = "default",
-  variant,
-  sizing,
-  focusVariant,
-  // value handling
-  value: valueProp,
-  defaultValue,
-  onValueChange,
-  ...rest
-}) => {
-  const [value, setValue] = useControllableState({
-    // `undefined` stays uncontrolled; any provided value (incl. `null`) is controlled, coerced to ''.
-    prop: valueProp === void 0 ? void 0 : valueProp ?? "",
-    defaultProp: defaultValue ?? "",
-    onChange: onValueChange
-  });
-  return /* @__PURE__ */ jsx(
-    InputGroup,
-    {
-      state,
-      sizing,
-      focusVariant,
-      variant,
-      className: containerClassName,
-      children: /* @__PURE__ */ jsx(InputGroup.TextArea, { ...rest, ref, value, onValueChange: setValue })
-    }
-  );
-};
-
-// src/blocks/ColorInput/utils.ts
-var HEX_CHARSET = /^[0-9a-fA-F]+$/;
-var COMPLETE_HEX_PATTERN = /^#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
-var MAX_HEX_BODY_LENGTH = 8;
-var PICKER_FALLBACK = "#000000";
-var extractHexBody = (value) => {
-  if (typeof value !== "string") return null;
-  const trimmed = value.trim();
-  if (trimmed === "") return null;
-  return trimmed.startsWith("#") ? trimmed.slice(1) : trimmed;
-};
-var isCompleteHexColor = (value) => COMPLETE_HEX_PATTERN.test(value);
-var showPicker = (input) => {
-  const isShowPickerSupported = "showPicker" in HTMLInputElement.prototype;
-  isShowPickerSupported ? input.showPicker() : input.click();
-};
-var coerceHexInputValue = (value) => {
-  const body = extractHexBody(value);
-  if (body === null) return "";
-  const [validBody] = body.match(/^[0-9a-fA-F]+/) ?? [];
-  if (!validBody) return "";
-  return `#${validBody.slice(0, MAX_HEX_BODY_LENGTH)}`;
-};
-var coerceColorPickerValue = (value) => {
-  const body = extractHexBody(value);
-  if (body === null || !HEX_CHARSET.test(body)) return PICKER_FALLBACK;
-  if (body.length === 3 || body.length === 4) {
-    const [r, g, b] = body;
-    return `#${r}${r}${g}${g}${b}${b}`.toLowerCase();
-  }
-  if (body.length === 6 || body.length === 8) {
-    return `#${body.slice(0, 6).toLowerCase()}`;
-  }
-  return PICKER_FALLBACK;
-};
-var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
-  const pickerRef = useRef(null);
-  const handleOpenPicker = () => {
-    if (!pickerRef.current) return;
-    showPicker(pickerRef.current);
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "tw:relative", children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ...props,
-        ref: pickerRef,
-        type: "color",
-        value: coerceColorPickerValue(value),
-        tabIndex: -1,
-        "aria-hidden": true,
-        className: "tw:pointer-events-none tw:absolute tw:left-0 tw:top-full tw:size-0 tw:opacity-0",
-        disabled,
-        readOnly
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InputGroup.Button,
-      {
-        onMouseDown: (event) => event.preventDefault(),
-        disabled: disabled || readOnly,
-        onClick: handleOpenPicker,
-        "aria-label": "Pick color",
-        children: /* @__PURE__ */ jsx(Pipette, { className: "tw:size-4" })
-      }
-    )
-  ] });
-};
-var ColorInput = ({
-  ref,
-  // group props
-  state,
-  variant,
-  focusVariant,
-  sizing,
-  className,
-  // own props
-  value: valueProp,
-  onValueChange,
-  onValueBlur,
-  onChange,
-  onBlur,
-  defaultValue,
-  allowClear = false,
-  // input props
-  disabled,
-  readOnly,
-  ...restInputProps
-}) => {
-  const inputRef = useRef(null);
-  const [value, setValue] = useControllableState({
-    // A `null` controlled value stays controlled (coerced to ''); `undefined` is uncontrolled.
-    prop: valueProp === null ? "" : valueProp,
-    defaultProp: defaultValue ?? "",
-    onChange: onValueChange
-  });
-  const isControlled = valueProp !== void 0;
-  const canClear = allowClear && !!value && !disabled && !readOnly;
-  const swatchColor = coerceHexInputValue(value);
-  const isValidSwatch = isCompleteHexColor(swatchColor);
-  const handleChange = (event) => {
-    setValue(event.target.value);
-    onChange?.(event);
-  };
-  const handleBlur = (event) => {
-    const newValue = event.target.value;
-    const sanitizedNewValue = coerceHexInputValue(newValue);
-    if (sanitizedNewValue !== newValue) {
-      if (!isControlled) event.target.value = sanitizedNewValue;
-      setValue(sanitizedNewValue);
-    }
-    onValueBlur?.(sanitizedNewValue);
-    onBlur?.(event);
-  };
-  const handlePickerChange = (event) => {
-    setValue(coerceHexInputValue(event.target.value));
-    onChange?.(event);
-  };
-  const handleClear = () => {
-    if (!inputRef.current) return;
-    inputRef.current.value = "";
-    setValue("");
-    onChange?.(createChangeInputEvent(inputRef.current));
-  };
-  return /* @__PURE__ */ jsxs(
-    InputGroup,
-    {
-      state,
-      variant,
-      sizing,
-      focusVariant,
-      className,
-      children: [
-        /* @__PURE__ */ jsx(
-          InputGroup.Addon,
-          {
-            align: "inline-start",
-            className: cn(
-              { "tw:-ml-7 tw:opacity-0": !value },
-              "tw:transition-[opacity,margin]",
-              "tw:ease-linear",
-              "tw:duration-200"
-            ),
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: isValidSwatch ? { background: swatchColor } : void 0,
-                className: cn(
-                  "tw:size-5",
-                  "tw:shrink-0",
-                  "tw:rounded-sm",
-                  "tw:border",
-                  "tw:border-solid",
-                  "tw:border-neutral-300",
-                  {
-                    "tw:bg-[linear-gradient(to_top_right,transparent_calc(50%_-_1px),theme(colors.red.300)_calc(50%_-_1px),theme(colors.red.300)_calc(50%_+_1px),transparent_calc(50%_+_1px))]": !isValidSwatch
-                  }
-                )
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          InputGroup.Input,
-          {
-            ...restInputProps,
-            type: "text",
-            ref: mergeRefs(ref ?? null, inputRef),
-            value,
-            onChange: handleChange,
-            onBlur: handleBlur,
-            disabled,
-            readOnly
-          }
-        ),
-        /* @__PURE__ */ jsxs(InputGroup.Addon, { align: "inline-end", children: [
-          canClear && /* @__PURE__ */ jsx(
-            InputGroup.Button,
-            {
-              onMouseDown: (event) => event.preventDefault(),
-              onClick: handleClear,
-              "aria-label": "Clear color",
-              children: /* @__PURE__ */ jsx(X, { className: "tw:size-4" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            ColorPicker,
-            {
-              disabled,
-              readOnly,
-              value,
-              onChange: handlePickerChange
-            }
-          )
-        ] })
-      ]
-    }
-  );
-};
-var toNumberOrNull = (event) => Number.isNaN(event.target.valueAsNumber) ? null : event.target.valueAsNumber;
-var NumberInput = ({
-  ref,
-  state,
-  variant,
-  focusVariant,
-  sizing,
-  className,
-  value,
-  defaultValue,
-  onValueChange,
-  onValueBlur,
-  onChange,
-  onBlur,
-  prefix,
-  suffix,
-  ...inputProps
-}) => {
-  const handleChange = (event) => {
-    onValueChange?.(toNumberOrNull(event));
-    onChange?.(event);
-  };
-  const handleBlur = (event) => {
-    onValueBlur?.(toNumberOrNull(event));
-    onBlur?.(event);
-  };
-  const isControlled = value !== void 0;
-  const valueProp = isControlled ? { value: value ?? "" } : { defaultValue: defaultValue ?? "" };
-  return /* @__PURE__ */ jsxs(
-    InputGroup,
-    {
-      state,
-      variant,
-      sizing,
-      focusVariant,
-      className,
-      children: [
-        prefix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-start", children: prefix }),
-        /* @__PURE__ */ jsx(
-          InputGroup.Input,
-          {
-            ...inputProps,
-            ...valueProp,
-            ref,
-            type: "number",
-            onChange: handleChange,
-            onBlur: handleBlur
-          }
-        ),
-        suffix && /* @__PURE__ */ jsx(InputGroup.Addon, { align: "inline-end", children: suffix })
-      ]
-    }
-  );
-};
-var FormGroupContext = createContext({
-  state: "default"
-});
-var FormGroupProvider = FormGroupContext;
-var useFormGroupContext = () => use(FormGroupContext);
-var FormGroupColorInput = ({ ref, ...props }) => {
-  const { state } = useFormGroupContext();
-  return /* @__PURE__ */ jsx(ColorInput, { state, ...props, ref });
-};
-var toMessage = (entry) => typeof entry === "string" ? entry : entry?.message;
-var FormGroupError = ({ children, className, errors, ...rest }) => {
-  const content = useMemo(() => {
-    if (children) return children;
-    const messages = (errors ?? []).map(toMessage).filter((message) => !!message);
-    if (messages.length === 0) return null;
-    if (messages.length === 1) return messages[0];
-    return /* @__PURE__ */ jsx("ul", { className: "tw:m-0 tw:flex tw:list-disc tw:flex-col tw:gap-0 tw:pl-4", children: messages.map((message, index) => /* @__PURE__ */ jsx("li", { children: message }, index)) });
-  }, [children, errors]);
-  if (!content) return null;
-  return /* @__PURE__ */ jsx("div", { ...rest, role: "alert", className: cn("tw:m-0 tw:text-xs tw:text-destructive", className), children: content });
-};
-var FormGroupHelp = ({ children, ...rest }) => {
-  const formGroupContext = useFormGroupContext();
-  return /* @__PURE__ */ jsx(HelpBlock, { state: formGroupContext.state === "warning" ? "warning" : "default", ...rest, children });
-};
-var FormGroupNumberInput = ({ ref, ...props }) => {
-  const { state } = useFormGroupContext();
-  return /* @__PURE__ */ jsx(NumberInput, { ...props, ref, state });
-};
-var FormGroupTextarea = (props) => {
-  const { state } = useFormGroupContext();
-  return /* @__PURE__ */ jsx(Textarea, { state, ...props });
-};
-var FormGroupTextInput = ({ ref, ...props }) => {
-  const { state } = useFormGroupContext();
-  return /* @__PURE__ */ jsx(TextInput, { state, ...props, ref });
-};
-var FormGroup = ({ className, children, state, ...rest }) => {
-  return /* @__PURE__ */ jsx(FormGroupProvider, { value: { state }, children: /* @__PURE__ */ jsx("div", { ...rest, className: cn("tw:flex tw:flex-col tw:gap-1", className), children }) });
-};
-FormGroup.Help = FormGroupHelp;
-FormGroup.Error = FormGroupError;
-FormGroup.TextInput = FormGroupTextInput;
-FormGroup.NumberInput = FormGroupNumberInput;
-FormGroup.ColorInput = FormGroupColorInput;
-FormGroup.Textarea = FormGroupTextarea;
-
-export { ColorInput, FormGroup, InputGroup, Label, NumberInput, ScrollArea, ScrollBar, TextInput, Textarea, createChangeInputEvent, createPrefixedString, mergeRefs, useControllableState };
-//# sourceMappingURL=chunk-SYIEF644.js.map
-//# sourceMappingURL=chunk-SYIEF644.js.map