@keboola/design 6.0.0 → 6.2.0

package/dist/index.cjs

@@ -13,6 +13,7 @@ var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var ScrollAreaPrimitive2 = require('@radix-ui/react-scroll-area');
 var reactToggle = require('@radix-ui/react-toggle');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
+var RLabel = require('@radix-ui/react-label');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var RSeparator = require('@radix-ui/react-separator');
@@ -21,7 +22,6 @@ var reactPopover = require('@radix-ui/react-popover');
 var reactHoverCard = require('@radix-ui/react-hover-card');
 var cmdk = require('cmdk');
 var TextareaAutosize = require('react-textarea-autosize');
-var RLabel = require('@radix-ui/react-label');
 var reactSwitch = require('@radix-ui/react-switch');
 var RRadioGroup = require('@radix-ui/react-radio-group');
 var reactSlider = require('@radix-ui/react-slider');
@@ -70,11 +70,11 @@ var React26__default = /*#__PURE__*/_interopDefault(React26);
 var DropdownMenuPrimitive3__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive3);
 var ScrollAreaPrimitive2__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive2);
 var ToggleGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(ToggleGroupPrimitive);
+var RLabel__namespace = /*#__PURE__*/_interopNamespace(RLabel);
 var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var RSeparator__namespace = /*#__PURE__*/_interopNamespace(RSeparator);
 var TextareaAutosize__default = /*#__PURE__*/_interopDefault(TextareaAutosize);
-var RLabel__namespace = /*#__PURE__*/_interopNamespace(RLabel);
 var RRadioGroup__namespace = /*#__PURE__*/_interopNamespace(RRadioGroup);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
 var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
@@ -295,7 +295,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment16 = REACT_FRAGMENT_TYPE;
+        var Fragment17 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal10 = REACT_PORTAL_TYPE;
@@ -354,7 +354,7 @@ var require_react_is_development = __commonJS({
         exports$1.ContextProvider = ContextProvider;
         exports$1.Element = Element;
         exports$1.ForwardRef = ForwardRef;
-        exports$1.Fragment = Fragment16;
+        exports$1.Fragment = Fragment17;
         exports$1.Lazy = Lazy;
         exports$1.Memo = Memo;
         exports$1.Portal = Portal10;
@@ -2800,6 +2800,7 @@ var Clipboard = ({
   ] });
 };
 var DEFAULT_ICON = /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Copy, {});
+var DEFAULT_ARIA_LABEL = "Copy";
 var ClipboardButton = ({
   // clipboard props
   text,
@@ -2811,20 +2812,24 @@ var ClipboardButton = ({
   variant = "outline",
   children,
   ...rest
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  Clipboard,
-  {
-    asChild: true,
-    tooltip,
-    tooltipPlacement,
-    tooltipVariant,
-    text,
-    children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...rest, variant, disabled: !text, children: [
-      icon,
-      children
-    ] })
-  }
-);
+}) => {
+  const defaultAriaLabel = typeof tooltip === "string" && tooltip.trim() ? tooltip : DEFAULT_ARIA_LABEL;
+  const ariaLabel = rest["aria-label"] ?? (children == null ? defaultAriaLabel : void 0);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Clipboard,
+    {
+      asChild: true,
+      tooltip,
+      tooltipPlacement,
+      tooltipVariant,
+      text,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...rest, "aria-label": ariaLabel, variant, disabled: !text, children: [
+        icon,
+        children
+      ] })
+    }
+  );
+};
 var ClipboardInline = ({
   // clipboard props
   text,
@@ -2849,6 +2854,264 @@ var ClipboardInline = ({
     ] })
   }
 );
+var CopyContext = React26.createContext(null);
+var useCopyContext = () => {
+  const ctx = React26.use(CopyContext);
+  if (!ctx) throw new Error("CopyField.* components must be used within a CopyField.Root");
+  return ctx;
+};
+var LINE_HEIGHT_REM = 1.25;
+var VERTICAL_PADDING_REM = 1.25;
+var CopyBox = ({ className, children }) => {
+  const { copied, handleCopy, mono, minLines, maxLines, boxId, labelId, hasLabel } = useCopyContext();
+  const multiline = maxLines > 1;
+  const multilineStyle = multiline ? {
+    minHeight: `${minLines * LINE_HEIGHT_REM + VERTICAL_PADDING_REM}rem`,
+    maxHeight: `${maxLines * LINE_HEIGHT_REM + VERTICAL_PADDING_REM}rem`
+  } : void 0;
+  const handleKeyDown2 = (event) => {
+    if (event.target !== event.currentTarget) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    handleCopy();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { triggerAsChild: true, placement: "top", tooltip: copied ? "Copied" : "Copy", forceShow: copied, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      id: boxId,
+      "aria-labelledby": hasLabel ? labelId : void 0,
+      onClick: handleCopy,
+      onKeyDown: handleKeyDown2,
+      style: multilineStyle,
+      className: cn(
+        "tw-group tw-relative tw-flex tw-w-fit tw-max-w-full tw-cursor-pointer tw-gap-2 tw-rounded-2xl [corner-shape:superellipse(2)] tw-border tw-border-[#e4e4e4] tw-bg-[#fafafa] tw-px-3 tw-py-2.5 tw-text-left tw-shadow-sm tw-transition-colors hover:tw-bg-[#f2f2f2]",
+        multiline ? "tw-items-start tw-overflow-auto" : "tw-items-center tw-overflow-hidden",
+        mono && "tw-font-mono tw-text-[13px]",
+        className
+      ),
+      children
+    }
+  ) });
+};
+var CopyButton = ({ className }) => {
+  const { copied, maxLines } = useCopyContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "tw-pointer-events-none tw-flex tw-shrink-0 tw-items-center tw-text-[#8b8b8b] group-hover:tw-text-[#5c5c5c]",
+        maxLines > 1 && "tw-self-start tw-pt-0.5",
+        className
+      ),
+      children: copied ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Check, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Copy, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyChildren = ({ children, className }) => {
+  const { maxLines } = useCopyContext();
+  const multiline = maxLines > 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: cn(
+        "tw-min-w-0 tw-flex-1 tw-select-text tw-text-[#3f3f3f]",
+        multiline ? "tw-whitespace-pre-wrap tw-break-words" : "tw-truncate",
+        className
+      ),
+      children
+    }
+  );
+};
+var CopyFooter = ({ children, className }) => {
+  if (!children) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("tw-m-0 tw-text-xs tw-text-muted-foreground", className), children });
+};
+var MASK = "*".repeat(12);
+var CopyHidden = ({ children, revealable = true, className }) => {
+  const { hidden, registerRevealable } = useCopyContext();
+  React26.useEffect(() => {
+    if (!revealable) return void 0;
+    return registerRevealable();
+  }, [revealable, registerRevealable]);
+  const masked = revealable ? hidden : true;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("tw-select-none", className), children: masked ? MASK : children });
+};
+var Optional = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-muted-foreground", className), children: "(optional)" });
+var Required = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-primary", className), children: "*" });
+var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  RLabel__namespace.Root,
+  {
+    ...rest,
+    id: id?.toString(),
+    htmlFor: htmlFor?.toString(),
+    className: cn(
+      "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
+      className
+    ),
+    children
+  }
+);
+Label2.Optional = Optional;
+Label2.Required = Required;
+var CopyLabel = ({ children, leading, trailing, className }) => {
+  const { labelId, registerLabel } = useCopyContext();
+  React26.useEffect(() => registerLabel(), [registerLabel]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("tw-flex tw-items-center tw-gap-1", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label2, { id: labelId, children }),
+    leading,
+    trailing != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-ml-auto tw-flex tw-items-center", children: trailing })
+  ] });
+};
+var CopyPrefix = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    "aria-hidden": true,
+    className: cn(
+      "tw-shrink-0 tw-select-none tw-self-stretch tw-border-r tw-border-[#e4e4e4] tw-pr-2 tw-text-[#6b6b6b]",
+      className
+    ),
+    children
+  }
+);
+var CopyReveal = ({ className }) => {
+  const { hidden, toggleHidden, hasRevealable, maxLines } = useCopyContext();
+  if (!hasRevealable) return null;
+  const handleClick = (event) => {
+    event.stopPropagation();
+    toggleHidden();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      "aria-label": hidden ? "Show value" : "Hide value",
+      className: cn(
+        "tw-flex tw-shrink-0 tw-items-center tw-text-[#8b8b8b] hover:tw-text-[#5c5c5c]",
+        maxLines > 1 && "tw-self-start tw-pt-0.5",
+        className
+      ),
+      children: hidden ? /* @__PURE__ */ jsxRuntime.jsx(icons_exports.Eye, { className: "tw-size-4" }) : /* @__PURE__ */ jsxRuntime.jsx(icons_exports.EyeOff, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyRoot = ({
+  value,
+  mono = false,
+  onCopy,
+  hiddenByDefault = false,
+  minLines = 1,
+  maxLines,
+  className,
+  children
+}) => {
+  const [copied, setCopied] = React26.useState(false);
+  const [hidden, setHidden] = React26.useState(hiddenByDefault);
+  const [revealableCount, setRevealableCount] = React26.useState(0);
+  const [labelCount, setLabelCount] = React26.useState(0);
+  const resetTimerRef = React26.useRef(void 0);
+  const generatedId = React26.useId();
+  const labelId = `${generatedId}-label`;
+  const boxId = `${generatedId}-box`;
+  React26.useEffect(() => () => clearTimeout(resetTimerRef.current), []);
+  const handleCopy = React26.useCallback(() => {
+    const selection = window.getSelection();
+    const boxEl = document.getElementById(boxId);
+    if (selection && !selection.isCollapsed && selection.anchorNode && boxEl?.contains(selection.anchorNode)) {
+      return;
+    }
+    copyToClipboard(value).then(() => {
+      onCopy?.();
+      setCopied(true);
+      clearTimeout(resetTimerRef.current);
+      resetTimerRef.current = setTimeout(() => setCopied(false), 1500);
+    }).catch((error) => {
+      console.error("Copy to clipboard failed", error);
+    });
+  }, [value, onCopy, boxId]);
+  const toggleHidden = React26.useCallback(() => setHidden((prev) => !prev), []);
+  const registerRevealable = React26.useCallback(() => {
+    setRevealableCount((count) => count + 1);
+    return () => setRevealableCount((count) => count - 1);
+  }, []);
+  const registerLabel = React26.useCallback(() => {
+    setLabelCount((count) => count + 1);
+    return () => setLabelCount((count) => count - 1);
+  }, []);
+  const contextValue = React26.useMemo(
+    () => ({
+      copied,
+      handleCopy,
+      value,
+      mono,
+      hidden,
+      toggleHidden,
+      registerRevealable,
+      hasRevealable: revealableCount > 0,
+      registerLabel,
+      hasLabel: labelCount > 0,
+      minLines,
+      maxLines: maxLines ?? minLines,
+      labelId,
+      boxId
+    }),
+    [
+      copied,
+      handleCopy,
+      value,
+      mono,
+      hidden,
+      toggleHidden,
+      registerRevealable,
+      revealableCount,
+      registerLabel,
+      labelCount,
+      minLines,
+      maxLines,
+      labelId,
+      boxId
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CopyContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("tw-flex tw-w-fit tw-max-w-full tw-flex-col tw-gap-1", className), children }) });
+};
+var CopySuffix = ({ children, className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    "aria-hidden": true,
+    className: cn(
+      "tw-shrink-0 tw-select-none tw-self-stretch tw-border-l tw-border-[#e4e4e4] tw-pl-2 tw-text-[#6b6b6b]",
+      className
+    ),
+    children
+  }
+);
+
+// src/blocks/CopyField/CopyField.tsx
+var CopyField = {
+  /** Container. Owns the copied `value`, mask state, and copy context. */
+  Root: CopyRoot,
+  /** Visible label above the box, with optional `leading`/`trailing` slots. */
+  Label: CopyLabel,
+  /** The clickable copy target row. */
+  Box: CopyBox,
+  /** Muted, non-selectable prefix addon (not copied). */
+  Prefix: CopyPrefix,
+  /** Displayed value (truncates single-line, wraps multi-line). */
+  Children: CopyChildren,
+  /** Muted, non-selectable suffix addon (not copied). */
+  Suffix: CopySuffix,
+  /** Masks its children with dots; copy still copies the real value. */
+  Hidden: CopyHidden,
+  /** Eye toggle that reveals/masks revealable `CopyField.Hidden` content. */
+  Reveal: CopyReveal,
+  /** Copy affordance icon — shows Copy/Check with feedback. */
+  Button: CopyButton,
+  /** Small helper text below the box. */
+  Footer: CopyFooter
+};
 var Link = ({
   ref,
   children,
@@ -3805,8 +4068,8 @@ var FullScreenModalHeader = ({
                       {
                         text: previousTitle,
                         className: cn(
-                          "tw-relative tw-top-0 tw-cursor-pointer tw-text-base tw-font-normal tw-text-neutral-400 tw-underline",
-                          "hover:tw-text-neutral-800 hover:tw-no-underline",
+                          "tw-relative tw-top-0 tw-cursor-pointer tw-text-base tw-font-normal tw-text-muted-foreground tw-underline",
+                          "hover:tw-text-foreground hover:tw-no-underline",
                           isTitleWithIcon && "tw-ml-14"
                         )
                       }
@@ -6783,7 +7046,7 @@ __export(custom_components_exports, {
   NextMonthButton: () => NextMonthButton,
   Option: () => Option,
   PreviousMonthButton: () => PreviousMonthButton,
-  Root: () => Root16,
+  Root: () => Root17,
   Select: () => Select,
   Week: () => Week,
   WeekNumber: () => WeekNumber,
@@ -6963,7 +7226,7 @@ function Option(props) {
 function PreviousMonthButton(props) {
   return React26__default.default.createElement("button", { ...props });
 }
-function Root16(props) {
+function Root17(props) {
   const { rootRef, ...rest } = props;
   return React26__default.default.createElement("div", { ...rest, ref: rootRef });
 }
@@ -10031,23 +10294,6 @@ var TimePicker = ({
     )
   ] });
 };
-var Optional = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-muted-foreground", className), children: "(optional)" });
-var Required = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, "aria-hidden": true, className: cn("tw-ml-0.5", "tw-text-primary", className), children: "*" });
-var Label2 = ({ className, children, id, htmlFor, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
-  RLabel__namespace.Root,
-  {
-    ...rest,
-    id: id?.toString(),
-    htmlFor: htmlFor?.toString(),
-    className: cn(
-      "tw-m-0 tw-text-foreground tw-font-normal peer-disabled:tw-opacity-50",
-      className
-    ),
-    children
-  }
-);
-Label2.Optional = Optional;
-Label2.Required = Required;
 var FieldBoxDescription = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "span",
   {
@@ -10776,8 +11022,8 @@ var ClearButton = ({ onClick, testId }) => {
         "tw-flex",
         "tw-items-center",
         "tw-cursor-pointer",
-        "tw-text-neutral-300",
-        "hover:tw-text-neutral-800"
+        "tw-text-muted-foreground",
+        "hover:tw-text-foreground"
       ),
       "data-testid": testId,
       children: /* @__PURE__ */ jsxRuntime.jsx(icons_exports.X, { className: "tw-size-4" })
@@ -11618,23 +11864,23 @@ var BadgeLabel = ({
 var badgeColors = {
   gray: "tw-bg-neutral-400 tw-text-white tw-decoration-neutral-400",
   "gray-darker": "tw-bg-neutral-500 tw-text-white tw-decoration-neutral-500",
-  "gray-inverse": "tw-bg-neutral-100 tw-text-neutral-400 tw-decoration-neutral-100",
+  "gray-inverse": "tw-bg-neutral-100 tw-text-neutral-400 tw-decoration-neutral-100 [[data-theme=dark]_&]:tw-bg-neutral-800 [[data-theme=dark]_&]:tw-text-neutral-300 [[data-theme=dark]_&]:tw-decoration-neutral-800",
   green: "tw-bg-green-500 tw-text-white tw-decoration-green-500",
   "green-darker": "tw-bg-green-600 tw-text-white tw-decoration-green-600",
-  "green-inverse": "tw-bg-green-100 tw-text-green-900 tw-decoration-green-100",
+  "green-inverse": "tw-bg-green-100 tw-text-green-900 tw-decoration-green-100 [[data-theme=dark]_&]:tw-bg-green-900 [[data-theme=dark]_&]:tw-text-green-200 [[data-theme=dark]_&]:tw-decoration-green-900",
   blue: "tw-bg-blue-500 tw-text-white tw-decoration-blue-500",
-  "blue-inverse": "tw-bg-blue-100 tw-text-blue-600 tw-decoration-blue-100",
+  "blue-inverse": "tw-bg-blue-100 tw-text-blue-600 tw-decoration-blue-100 [[data-theme=dark]_&]:tw-bg-blue-900 [[data-theme=dark]_&]:tw-text-blue-200 [[data-theme=dark]_&]:tw-decoration-blue-900",
   red: "tw-bg-error-500 tw-text-white tw-decoration-error-500",
   orange: "tw-bg-warning-500 tw-text-white tw-decoration-warning-500",
-  "orange-inverse": "tw-bg-warning-100 tw-text-warning-500 tw-decoration-warning-100",
+  "orange-inverse": "tw-bg-warning-100 tw-text-warning-500 tw-decoration-warning-100 [[data-theme=dark]_&]:tw-bg-warning-900 [[data-theme=dark]_&]:tw-text-warning-200 [[data-theme=dark]_&]:tw-decoration-warning-900",
   amber: "tw-bg-warning-300 tw-text-warning-800 tw-decoration-warning-300",
   "amber-inverse": "tw-bg-warning-100 tw-text-warning-700 tw-decoration-warning-100",
   teal: "tw-bg-teal-500 tw-text-white tw-decoration-teal-500",
-  "teal-inverse": "tw-bg-teal-100 tw-text-teal-800 tw-decoration-teal-100",
+  "teal-inverse": "tw-bg-teal-100 tw-text-teal-800 tw-decoration-teal-100 [[data-theme=dark]_&]:tw-bg-teal-900 [[data-theme=dark]_&]:tw-text-teal-200 [[data-theme=dark]_&]:tw-decoration-teal-900",
   purple: "tw-bg-purple-500 tw-text-white tw-decoration-purple-500",
-  "purple-inverse": "tw-bg-purple-100 tw-text-purple-800 tw-decoration-purple-100",
+  "purple-inverse": "tw-bg-purple-100 tw-text-purple-800 tw-decoration-purple-100 [[data-theme=dark]_&]:tw-bg-purple-900 [[data-theme=dark]_&]:tw-text-purple-200 [[data-theme=dark]_&]:tw-decoration-purple-900",
   cyan: "tw-bg-cyan-500 tw-text-white tw-decoration-cyan-500",
-  "cyan-inverse": "tw-bg-cyan-100 tw-text-cyan-800 tw-decoration-cyan-100",
+  "cyan-inverse": "tw-bg-cyan-100 tw-text-cyan-800 tw-decoration-cyan-100 [[data-theme=dark]_&]:tw-bg-cyan-900 [[data-theme=dark]_&]:tw-text-cyan-200 [[data-theme=dark]_&]:tw-decoration-cyan-900",
   "sidebar-primary": "tw-bg-sidebar-primary tw-text-white tw-decoration-sidebar-primary",
   white: "tw-bg-white/90 tw-text-neutral-600 tw-decoration-white/90"
 };
@@ -16400,6 +16646,12 @@ var PromptInputCommands = ({ items, open, onSelect, filterValue, children }) =>
     children
   ] });
 };
+var ARIA_LABEL_BY_STATUS = {
+  ready: "Send message",
+  streaming: "Stop",
+  interrupted: "Continue",
+  submitted: "Sending\u2026"
+};
 var PromptInputSubmit = ({
   ref,
   disabled,
@@ -16422,6 +16674,7 @@ var PromptInputSubmit = ({
         ref,
         type: "submit",
         disabled,
+        "aria-label": ARIA_LABEL_BY_STATUS[status],
         size: "icon-sm",
         variant: "invisible",
         isLoading: status === "submitted",
@@ -17868,7 +18121,7 @@ var cardTitleClassnames = cn(
   "tw-text-base",
   "tw-text-card-foreground"
 );
-var CardTitle = ({ children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("h3", { className: cn(cardTitleClassnames, className), ...rest, children });
+var CardTitle = ({ children, className, as: Tag = "h3", ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(Tag, { className: cn(cardTitleClassnames, className), ...rest, children });
 var Card = ({
   children,
   className,
@@ -18200,9 +18453,7 @@ var headerVariants = classVarianceAuthority.cva(
     variants: {
       variant: {
         default: "tw-bg-muted",
-        // White surface kept literal until a `card` token exists (UT-4396);
-        // `background` is the page base, not an elevated panel surface.
-        white: "tw-bg-white"
+        white: "tw-bg-card"
       },
       isDisabled: {
         true: "tw-cursor-not-allowed tw-opacity-50",
@@ -18267,7 +18518,7 @@ var CollapsiblePanel = ({
     {
       open,
       className: cn(
-        "tw-rounded !tw-border !tw-border-solid !tw-border-border tw-bg-white",
+        "tw-rounded !tw-border !tw-border-solid !tw-border-border tw-bg-card",
         className
       ),
       header: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -18475,6 +18726,18 @@ var tokensToCssVars = ({
   vars.set("--font-weight-semibold", typography?.weight?.semibold);
   vars.set("--font-weight-bold", typography?.weight?.bold);
   vars.set("--letter-spacing-chrome", typography?.letterSpacing?.chrome);
+  vars.set("--type-display-size", typography?.typeScale?.display?.size);
+  vars.set("--type-display-weight", typography?.typeScale?.display?.weight);
+  vars.set("--type-display-leading", typography?.typeScale?.display?.leading);
+  vars.set("--type-display-tracking", typography?.typeScale?.display?.tracking);
+  vars.set("--type-heading-size", typography?.typeScale?.heading?.size);
+  vars.set("--type-heading-weight", typography?.typeScale?.heading?.weight);
+  vars.set("--type-heading-leading", typography?.typeScale?.heading?.leading);
+  vars.set("--type-heading-tracking", typography?.typeScale?.heading?.tracking);
+  vars.set("--type-body-size", typography?.typeScale?.body?.size);
+  vars.set("--type-body-weight", typography?.typeScale?.body?.weight);
+  vars.set("--type-body-leading", typography?.typeScale?.body?.leading);
+  vars.set("--type-body-tracking", typography?.typeScale?.body?.tracking);
   vars.set("--radius-sm", radii?.sm);
   vars.set("--radius-md", radii?.md);
   vars.set("--radius-lg", radii?.lg);
@@ -22980,6 +23243,150 @@ var pairChunksIntoConflicts = (chunks) => {
   }
   return conflicts;
 };
+var DashboardHeroRoot = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "section",
+  {
+    className: cn(
+      "tw-flex tw-flex-col tw-gap-6 tw-rounded-lg tw-border tw-border-solid tw-border-border tw-bg-card tw-p-8 tw-text-card-foreground",
+      "md:tw-flex-row md:tw-items-center md:tw-justify-between",
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var DashboardHeroBody = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("tw-flex tw-flex-col tw-gap-3", className), ...rest, children });
+var DashboardHeroEyebrow = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    className: cn(
+      "tw-m-0 tw-text-sm tw-font-semibold tw-uppercase tw-tracking-wide tw-text-primary",
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var DashboardHeroTitle = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "h1",
+  {
+    className: cn(
+      "tw-m-0 tw-text-3xl tw-font-semibold tw-leading-tight tw-tracking-tight tw-text-foreground",
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var DashboardHeroDescription = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    className: cn("tw-m-0 tw-max-w-prose tw-text-base tw-text-muted-foreground", className),
+    ...rest,
+    children
+  }
+);
+var DashboardHeroActions = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("tw-mt-2 tw-flex tw-flex-wrap tw-items-center tw-gap-3", className), ...rest, children });
+var DashboardHeroAside = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("tw-flex tw-shrink-0 tw-flex-col tw-gap-2", className), ...rest, children });
+var DashboardHero = DashboardHeroRoot;
+DashboardHero.Body = DashboardHeroBody;
+DashboardHero.Eyebrow = DashboardHeroEyebrow;
+DashboardHero.Title = DashboardHeroTitle;
+DashboardHero.Description = DashboardHeroDescription;
+DashboardHero.Actions = DashboardHeroActions;
+DashboardHero.Aside = DashboardHeroAside;
+var trendClassnames = classVarianceAuthority.cva(
+  ["tw-inline-flex", "tw-items-center", "tw-gap-1", "tw-text-sm", "tw-font-medium"],
+  {
+    variants: {
+      direction: {
+        up: "tw-text-success",
+        down: "tw-text-destructive",
+        flat: "tw-text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      direction: "flat"
+    }
+  }
+);
+var StatCardRoot = ({ className, children, bordered = true, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(Card, { bordered, className: cn("tw-gap-2", className), role: "group", ...rest, children });
+var StatCardIcon = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "div",
+  {
+    className: cn(
+      "tw-flex tw-size-9 tw-items-center tw-justify-center tw-rounded-md tw-bg-accent tw-text-accent-foreground",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-5',
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var StatCardLabel = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    className: cn("tw-m-0 tw-text-sm tw-font-medium tw-text-muted-foreground", className),
+    ...rest,
+    children
+  }
+);
+var StatCardValue = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "p",
+  {
+    className: cn(
+      "tw-m-0 tw-text-3xl tw-font-semibold tw-leading-tight tw-tracking-tight tw-text-foreground",
+      className
+    ),
+    ...rest,
+    children
+  }
+);
+var StatCardTrend = ({ className, direction = "flat", icon, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: trendClassnames({ direction, className }), ...rest, children: [
+  icon,
+  children
+] });
+var StatCardFootnote = ({ className, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("tw-m-0 tw-text-xs tw-text-muted-foreground", className), ...rest, children });
+var StatCard = StatCardRoot;
+StatCard.Icon = StatCardIcon;
+StatCard.Label = StatCardLabel;
+StatCard.Value = StatCardValue;
+StatCard.Trend = StatCardTrend;
+StatCard.Footnote = StatCardFootnote;
+var gridClassnames = classVarianceAuthority.cva(["tw-grid", "tw-gap-4"], {
+  variants: {
+    columns: {
+      2: "tw-grid-cols-1 sm:tw-grid-cols-2",
+      3: "tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-3",
+      4: "tw-grid-cols-1 sm:tw-grid-cols-2 lg:tw-grid-cols-4"
+    }
+  },
+  defaultVariants: {
+    columns: 4
+  }
+});
+var StatCardGrid = ({ className, columns = 4, children, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: gridClassnames({ columns, className }), ...rest, children });
+var ChartPanel = ({
+  title,
+  description,
+  titleAs = "h3",
+  toolbar,
+  footer,
+  className,
+  bordered = true,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsxRuntime.jsxs(Card, { bordered, className: cn("tw-gap-4", className), ...rest, children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(Card.Header, { className: "tw-flex tw-items-start tw-justify-between tw-gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Card.Title, { as: titleAs, children: title }),
+      description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-sm tw-text-muted-foreground", children: description }) : null
+    ] }),
+    toolbar ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: toolbar }) : null
+  ] }),
+  /* @__PURE__ */ jsxRuntime.jsx(Card.Content, { children }),
+  footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-border-0 tw-border-t tw-border-solid tw-border-border tw-pt-3 tw-text-sm tw-text-muted-foreground", children: footer }) : null
+] });
 var { fieldContext, useFieldContext, formContext, useFormContext } = reactForm.createFormHookContexts();
 var FormBody = ({ children, className, ...formProps }) => {
   const form = useFormContext();
@@ -23419,6 +23826,686 @@ function useAutosizeInput({
   ] });
   return { inputRef, inputStyle, sizerElement };
 }
+
+// src/blocks/BrandEditor/color.ts
+var hexToChannels = (hex) => {
+  let h = hex.trim().replace(/^#/, "");
+  if (h.length === 3 || h.length === 4) {
+    h = h.slice(0, 3).split("").map((c) => c + c).join("");
+  } else if (h.length === 8) {
+    h = h.slice(0, 6);
+  }
+  if (!/^[0-9a-fA-F]{6}$/.test(h)) return "0 0 0";
+  const n = parseInt(h, 16);
+  return `${n >> 16 & 255} ${n >> 8 & 255} ${n & 255}`;
+};
+var channelsToHex = (channels) => {
+  const [r = 0, g = 0, b = 0] = channels.trim().split(/\s+/).map((n) => Number(n) || 0);
+  const to2 = (v) => Math.max(0, Math.min(255, v)).toString(16).padStart(2, "0");
+  return `#${to2(r)}${to2(g)}${to2(b)}`;
+};
+var COMPLETE_HEX = /^([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var ColorField = ({ id, label, channels, onChange }) => {
+  const hex = channelsToHex(channels);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-between tw-gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: id, className: "tw-text-xs tw-font-normal tw-text-foreground", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ColorInput,
+      {
+        id,
+        sizing: "medium",
+        value: hex,
+        className: "tw-w-36",
+        onValueChange: (next) => {
+          const clean = next.trim().replace(/^#/, "");
+          if (COMPLETE_HEX.test(clean)) onChange(hexToChannels(`#${clean}`));
+        }
+      }
+    )
+  ] });
+};
+
+// src/blocks/BrandEditor/contrast.ts
+var clampChannel = (n) => Number.isFinite(n) ? Math.min(255, Math.max(0, n)) : 0;
+var parseChannels = (channels) => {
+  const [r = 0, g = 0, b = 0] = channels.trim().split(/\s+/).map((n) => clampChannel(Number(n)));
+  return [r, g, b];
+};
+var relativeLuminance = (channels) => {
+  const [r = 0, g = 0, b = 0] = parseChannels(channels).map((c) => {
+    const s = c / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+var contrastRatio = (fg, bg) => {
+  const l1 = relativeLuminance(fg);
+  const l2 = relativeLuminance(bg);
+  const [lighter, darker] = l1 >= l2 ? [l1, l2] : [l2, l1];
+  return (lighter + 0.05) / (darker + 0.05);
+};
+var wcagLevel = (ratio) => ratio >= 7 ? "AAA" : ratio >= 4.5 ? "AA" : "fail";
+var ControlSection = ({ title, children }) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "tw-flex tw-flex-col tw-gap-3 tw-border-b tw-border-border tw-p-4", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "tw-m-0 tw-text-xs tw-font-semibold tw-uppercase tw-tracking-wide tw-text-muted-foreground", children: title }),
+  children
+] });
+var LogoField = ({ id, label, value, onChange }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: id, className: "tw-text-xs tw-font-normal tw-text-foreground", children: label }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    Textarea,
+    {
+      id,
+      value,
+      onValueChange: onChange,
+      maxRows: 4,
+      placeholder: "<svg\u2026>, a data: URI, or an https:// URL",
+      className: "tw-font-mono tw-text-xs"
+    }
+  )
+] });
+var TextField2 = ({ id, label, value, onChange, placeholder }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+  /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: id, className: "tw-text-xs tw-font-normal tw-text-foreground", children: label }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    TextInput,
+    {
+      id,
+      sizing: "small",
+      value,
+      onValueChange: onChange,
+      placeholder,
+      className: "tw-font-mono tw-text-xs"
+    }
+  )
+] });
+var DEFAULT_FALLBACK_FONT = "'Inter', system-ui, sans-serif";
+var DEFAULT_FONT_OPTIONS = [
+  { value: DEFAULT_FALLBACK_FONT, label: "Inter (default)" },
+  { value: "'Space Grotesk', system-ui, sans-serif", label: "Space Grotesk" },
+  { value: "'Poppins', system-ui, sans-serif", label: "Poppins" },
+  { value: "'Manrope', system-ui, sans-serif", label: "Manrope" },
+  { value: "'Quicksand', system-ui, sans-serif", label: "Quicksand" },
+  { value: "'Baloo 2', system-ui, sans-serif", label: "Baloo 2" },
+  { value: "'Fraunces', Georgia, serif", label: "Fraunces (serif)" },
+  { value: "Georgia, 'Times New Roman', serif", label: "Georgia (serif)" },
+  { value: "'JetBrains Mono', ui-monospace, monospace", label: "JetBrains Mono" },
+  { value: "system-ui, sans-serif", label: "System UI" }
+];
+var COLOR_LABELS = {
+  primary: "Primary",
+  primaryForeground: "Primary foreground",
+  background: "Background",
+  foreground: "Foreground",
+  card: "Card",
+  cardForeground: "Card foreground",
+  popover: "Popover",
+  popoverForeground: "Popover foreground",
+  secondary: "Secondary",
+  secondaryForeground: "Secondary foreground",
+  muted: "Muted",
+  mutedForeground: "Muted foreground",
+  accent: "Accent",
+  accentForeground: "Accent foreground",
+  border: "Border",
+  input: "Input",
+  ring: "Ring",
+  ringOffset: "Ring offset",
+  destructive: "Destructive",
+  destructiveForeground: "Destructive foreground",
+  success: "Success",
+  successForeground: "Success foreground",
+  warning: "Warning",
+  warningForeground: "Warning foreground",
+  info: "Info",
+  infoForeground: "Info foreground"
+};
+var SIDEBAR_LABELS = {
+  sidebar: "Sidebar",
+  sidebarForeground: "Foreground",
+  sidebarPrimary: "Primary",
+  sidebarPrimaryForeground: "Primary foreground",
+  sidebarAccent: "Accent",
+  sidebarAccentForeground: "Accent foreground",
+  sidebarBorder: "Border",
+  sidebarRing: "Ring"
+};
+var CHART_LABELS = {
+  chart1: "Chart 1",
+  chart2: "Chart 2",
+  chart3: "Chart 3",
+  chart4: "Chart 4",
+  chart5: "Chart 5"
+};
+var WEIGHT_LABELS = {
+  normal: "Normal",
+  medium: "Medium",
+  semibold: "Semibold",
+  bold: "Bold"
+};
+var SHADOW_LABELS = {
+  sm: "Small",
+  md: "Medium",
+  lg: "Large",
+  lift: "Lift (raised)"
+};
+var SPACING_LABELS = {
+  gutter: "Gutter (between sections)",
+  inset: "Inset (in-container)"
+};
+var MOTION_LABELS = {
+  duration: "Duration",
+  easing: "Easing"
+};
+var COLOR_SLOTS = Object.keys(COLOR_LABELS);
+var SIDEBAR_SLOTS = Object.keys(SIDEBAR_LABELS);
+var CHART_SLOTS = Object.keys(CHART_LABELS);
+var WEIGHT_SLOTS = Object.keys(WEIGHT_LABELS);
+var SHADOW_SLOTS = Object.keys(SHADOW_LABELS);
+var SPACING_SLOTS = Object.keys(SPACING_LABELS);
+var MOTION_SLOTS = Object.keys(MOTION_LABELS);
+var RADIUS_SIZES = ["sm", "md", "lg"];
+var A11Y_PAIRS = [
+  { label: "Text on background", fg: "foreground", bg: "background" },
+  { label: "Text on card", fg: "cardForeground", bg: "card" },
+  { label: "Primary button", fg: "primaryForeground", bg: "primary" },
+  { label: "Muted text", fg: "mutedForeground", bg: "muted" },
+  { label: "Accent", fg: "accentForeground", bg: "accent" }
+];
+var DEFAULT_SIDEBAR = {
+  light: {
+    sidebar: "255 255 255",
+    sidebarForeground: "30 41 59",
+    sidebarPrimary: "31 143 255",
+    sidebarPrimaryForeground: "255 255 255",
+    sidebarAccent: "219 234 254",
+    sidebarAccentForeground: "30 41 59",
+    sidebarBorder: "229 231 235",
+    sidebarRing: "31 143 255"
+  },
+  dark: {
+    sidebar: "14 14 18",
+    sidebarForeground: "229 230 236",
+    sidebarPrimary: "31 143 255",
+    sidebarPrimaryForeground: "255 255 255",
+    sidebarAccent: "38 38 45",
+    sidebarAccentForeground: "229 230 236",
+    sidebarBorder: "48 49 57",
+    sidebarRing: "31 143 255"
+  }
+};
+var DEFAULT_RADII = {
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem"
+};
+var DEFAULT_CHART = {
+  light: {
+    chart1: "31 143 255",
+    chart2: "0 194 135",
+    chart3: "146 92 255",
+    chart4: "245 147 0",
+    chart5: "237 94 223"
+  },
+  dark: {
+    chart1: "92 173 255",
+    chart2: "0 230 161",
+    chart3: "173 133 255",
+    chart4: "255 190 92",
+    chart5: "242 140 232"
+  }
+};
+var DEFAULT_FONT_WEIGHTS = {
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+var DEFAULT_LETTER_SPACING = "1px";
+var MONO_FALLBACK = "'JetBrains Mono', ui-monospace, monospace";
+var DEFAULT_SHADOWS = {
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  lift: "0 10px 30px -12px rgb(0 0 0 / 0.28), 0 2px 6px rgb(0 0 0 / 0.06)"
+};
+var DEFAULT_SPACING = {
+  gutter: "1.5rem",
+  inset: "1.5rem"
+};
+var DEFAULT_MOTION = {
+  duration: "200ms",
+  easing: "cubic-bezier(0.2, 0.7, 0.2, 1)"
+};
+var DEFAULT_GRADIENT = "linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-accent, var(--color-primary))))";
+var numOf = (value, fallback) => {
+  const n = Number.parseFloat(value);
+  return Number.isFinite(n) ? n : fallback;
+};
+var letterSpacingToPx = (value) => {
+  const n = Number.parseFloat(value);
+  if (!Number.isFinite(n)) return 0;
+  return value.trim().endsWith("em") ? n * 16 : n;
+};
+var pxToLetterSpacing = (px, currentValue) => currentValue.trim().endsWith("em") ? `${Number((px / 16).toFixed(3))}em` : `${px}px`;
+var lengthToPx = (value) => {
+  const n = Number.parseFloat(value);
+  if (!Number.isFinite(n)) return 0;
+  return Math.round(value.trim().endsWith("rem") ? n * 16 : n);
+};
+var pxToLength = (px, currentValue) => {
+  const trimmed = currentValue.trim();
+  if (trimmed.endsWith("rem")) return `${px / 16}rem`;
+  if (/^-?\d*\.?\d+$/.test(trimmed)) return `${px}`;
+  return `${px}px`;
+};
+var isSvgMarkup = (source) => source.trimStart().startsWith("<");
+var isImageSource = (source) => /^(data:|https?:\/\/)/.test(source.trim());
+var LogoPreviewImage = ({ source, className }) => {
+  const safeSvg = React26.useMemo(
+    () => isSvgMarkup(source) ? DOMPurify__default.default.sanitize(source, { USE_PROFILES: { svg: true, svgFilters: true } }) : null,
+    [source]
+  );
+  if (safeSvg !== null) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className, dangerouslySetInnerHTML: { __html: safeSvg } });
+  }
+  if (isImageSource(source)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: source, alt: "", className });
+  }
+  return null;
+};
+var BrandEditor = ({
+  value,
+  onChange,
+  colorScheme = "light",
+  onColorSchemeChange,
+  fontOptions = DEFAULT_FONT_OPTIONS
+}) => {
+  const baseId = React26.useId();
+  const { theme } = value;
+  const coreColors = colorScheme === "light" ? theme.colors : theme.colorsDark;
+  const sidebarColors = colorScheme === "light" ? theme.colors?.sidebar : theme.colorsDark?.sidebar;
+  const chartColors = colorScheme === "light" ? theme.colors?.chart : theme.colorsDark?.chart;
+  const defaultColors = colorScheme === "light" ? brandRegistry.keboola.theme.colors : brandRegistry.keboola.theme.colorsDark;
+  const radii = theme.radii ?? DEFAULT_RADII;
+  const typography = theme.typography;
+  const setColor = (slot, channels) => {
+    if (colorScheme === "light") {
+      onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, [slot]: channels } } });
+      return;
+    }
+    onChange({
+      ...value,
+      theme: { ...theme, colorsDark: { ...theme.colorsDark, [slot]: channels } }
+    });
+  };
+  const setSidebarColor = (slot, channels) => {
+    if (colorScheme === "light") {
+      const base = theme.colors?.sidebar ?? DEFAULT_SIDEBAR.light;
+      onChange({
+        ...value,
+        theme: { ...theme, colors: { ...theme.colors, sidebar: { ...base, [slot]: channels } } }
+      });
+      return;
+    }
+    const sidebarBase = theme.colorsDark?.sidebar ?? DEFAULT_SIDEBAR.dark;
+    onChange({
+      ...value,
+      theme: {
+        ...theme,
+        colorsDark: { ...theme.colorsDark, sidebar: { ...sidebarBase, [slot]: channels } }
+      }
+    });
+  };
+  const setChart = (slot, channels) => {
+    const base = chartColors ?? DEFAULT_CHART[colorScheme];
+    const chart = { ...base, [slot]: channels };
+    if (colorScheme === "light") {
+      onChange({ ...value, theme: { ...theme, colors: { ...theme.colors, chart } } });
+      return;
+    }
+    onChange({ ...value, theme: { ...theme, colorsDark: { ...theme.colorsDark, chart } } });
+  };
+  const setRadius = (size, radius) => onChange({
+    ...value,
+    theme: { ...theme, radii: { ...theme.radii ?? DEFAULT_RADII, [size]: radius } }
+  });
+  const patchTypography = (patch) => onChange({ ...value, theme: { ...theme, typography: { ...theme.typography, ...patch } } });
+  const setFontFace = (face, font) => patchTypography({ [face]: font.trim() || void 0 });
+  const setFontWeight = (slot, weight) => patchTypography({ weight: { ...theme.typography?.weight, [slot]: weight || void 0 } });
+  const setLetterSpacing = (chrome) => patchTypography({ letterSpacing: { chrome: chrome.trim() || void 0 } });
+  const setShadow = (slot, shadow) => onChange({
+    ...value,
+    theme: { ...theme, shadows: { ...theme.shadows, [slot]: shadow.trim() || void 0 } }
+  });
+  const setSpacing = (slot, length) => onChange({
+    ...value,
+    theme: { ...theme, spacing: { ...theme.spacing, [slot]: length.trim() || void 0 } }
+  });
+  const setMotion = (slot, token) => onChange({
+    ...value,
+    theme: { ...theme, motion: { ...theme.motion, [slot]: token.trim() || void 0 } }
+  });
+  const setGradient = (gradient) => onChange({
+    ...value,
+    theme: { ...theme, gradient: { brand: gradient.trim() || void 0 } }
+  });
+  const setLogo = (slot, source) => {
+    const trimmed = source.trim();
+    const nextLogo = { ...value.logo };
+    if (trimmed) nextLogo[slot] = trimmed;
+    else delete nextLogo[slot];
+    const { logo: _drop, ...rest } = value;
+    onChange(Object.keys(nextLogo).length > 0 ? { ...value, logo: nextLogo } : rest);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ControlSection, { title: "Colors", children: [
+      onColorSchemeChange ? /* @__PURE__ */ jsxRuntime.jsxs(
+        ToggleGroup,
+        {
+          type: "single",
+          value: colorScheme,
+          onValueChange: (next) => {
+            if (next === "light" || next === "dark") onColorSchemeChange(next);
+          },
+          "aria-label": "Color scheme",
+          className: "tw-w-full",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ToggleGroup.Item, { value: "light", className: "tw-flex-1", children: "Light" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ToggleGroup.Item, { value: "dark", className: "tw-flex-1", children: "Dark" })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-2", children: COLOR_SLOTS.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
+        ColorField,
+        {
+          id: `${baseId}color-${colorScheme}-${slot}`,
+          label: COLOR_LABELS[slot],
+          channels: coreColors?.[slot] ?? defaultColors?.[slot] ?? "0 0 0",
+          onChange: (channels) => setColor(slot, channels)
+        },
+        slot
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ControlSection, { title: "Accessibility", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "tw-m-0 tw-text-xs tw-text-muted-foreground", children: [
+        "WCAG contrast for the ",
+        colorScheme,
+        " palette (AA needs 4.5:1)."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-1.5", children: A11Y_PAIRS.map((pair) => {
+        const fg = coreColors?.[pair.fg] ?? defaultColors?.[pair.fg] ?? "0 0 0";
+        const bg = coreColors?.[pair.bg] ?? defaultColors?.[pair.bg] ?? "255 255 255";
+        const ratio = contrastRatio(fg, bg);
+        const level = wcagLevel(ratio);
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-between tw-gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-xs tw-text-foreground", children: pair.label }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tw-text-xs tw-tabular-nums tw-text-muted-foreground", children: [
+              ratio.toFixed(1),
+              ":1"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: level === "fail" ? "red" : "green", children: level === "fail" ? "Fail" : level })
+          ] })
+        ] }, pair.label);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ControlSection, { title: "Sidebar colors", children: /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { className: "tw-flex tw-flex-col tw-gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button, { variant: "outline", size: "small", className: "tw-w-full", children: [
+        "Toggle sidebar tokens (",
+        colorScheme,
+        ")"
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Content, { className: "tw-flex tw-flex-col tw-gap-2", children: SIDEBAR_SLOTS.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
+        ColorField,
+        {
+          id: `${baseId}sidebar-${colorScheme}-${slot}`,
+          label: SIDEBAR_LABELS[slot],
+          channels: sidebarColors?.[slot] ?? DEFAULT_SIDEBAR[colorScheme][slot],
+          onChange: (channels) => setSidebarColor(slot, channels)
+        },
+        slot
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ControlSection, { title: "Chart palette", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "tw-m-0 tw-text-xs tw-text-muted-foreground", children: [
+        "Categorical series colours for the ",
+        colorScheme,
+        " palette (`--color-chart-1\u20265`)."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-flex-col tw-gap-2", children: CHART_SLOTS.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
+        ColorField,
+        {
+          id: `${baseId}chart-${colorScheme}-${slot}`,
+          label: CHART_LABELS[slot],
+          channels: chartColors?.[slot] ?? DEFAULT_CHART[colorScheme][slot],
+          onChange: (channels) => setChart(slot, channels)
+        },
+        slot
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ControlSection, { title: "Radius", children: RADIUS_SIZES.map((size) => {
+      const current = radii[size];
+      const px = lengthToPx(current);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label2, { className: "tw-text-xs tw-font-normal tw-uppercase tw-text-foreground", children: size }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-xs tw-tabular-nums tw-text-muted-foreground", children: radii[size] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Slider,
+          {
+            min: 0,
+            max: 24,
+            step: 1,
+            value: [px],
+            onValueChange: (values) => setRadius(size, pxToLength(values[0] ?? 0, current))
+          }
+        )
+      ] }, size);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ControlSection, { title: "Typography", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Label2,
+          {
+            htmlFor: `${baseId}font-family`,
+            className: "tw-text-xs tw-font-normal tw-text-foreground",
+            children: "Font family"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Select2,
+          {
+            id: `${baseId}font-family`,
+            value: typography?.fontFamily ?? DEFAULT_FALLBACK_FONT,
+            onValueChange: (font) => setFontFace("fontFamily", font),
+            items: fontOptions
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Label2,
+          {
+            htmlFor: `${baseId}font-display`,
+            className: "tw-text-xs tw-font-normal tw-text-foreground",
+            children: "Display font (headings)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Select2,
+          {
+            id: `${baseId}font-display`,
+            value: typography?.fontDisplay ?? typography?.fontFamily ?? DEFAULT_FALLBACK_FONT,
+            onValueChange: (font) => setFontFace("fontDisplay", font),
+            items: fontOptions
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Label2,
+          {
+            htmlFor: `${baseId}font-mono`,
+            className: "tw-text-xs tw-font-normal tw-text-foreground",
+            children: "Monospace font"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Select2,
+          {
+            id: `${baseId}font-mono`,
+            value: typography?.fontMono ?? MONO_FALLBACK,
+            onValueChange: (font) => setFontFace("fontMono", font),
+            items: fontOptions
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-xs tw-text-muted-foreground", children: "Chrome font weights" }),
+      WEIGHT_SLOTS.map((slot) => {
+        const current = typography?.weight?.[slot] ?? DEFAULT_FONT_WEIGHTS[slot];
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Label2, { className: "tw-text-xs tw-font-normal tw-text-foreground", children: WEIGHT_LABELS[slot] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-xs tw-tabular-nums tw-text-muted-foreground", children: current })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Slider,
+            {
+              min: 100,
+              max: 900,
+              step: 25,
+              value: [numOf(current, 400)],
+              onValueChange: (values) => setFontWeight(slot, String(values[0] ?? 400))
+            }
+          )
+        ] }, slot);
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-items-center tw-justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Label2, { className: "tw-text-xs tw-font-normal tw-text-foreground", children: "Chrome letter spacing" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-xs tw-tabular-nums tw-text-muted-foreground", children: typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Slider,
+          {
+            min: -2,
+            max: 4,
+            step: 0.25,
+            value: [letterSpacingToPx(typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING)],
+            onValueChange: (values) => setLetterSpacing(
+              pxToLetterSpacing(
+                values[0] ?? 0,
+                typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING
+              )
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ControlSection, { title: "Elevation", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-xs tw-text-muted-foreground", children: "Box-shadow scale (`--shadow-*`), shared across light & dark. Empty inherits the default." }),
+      SHADOW_SLOTS.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
+        TextField2,
+        {
+          id: `${baseId}shadow-${slot}`,
+          label: SHADOW_LABELS[slot],
+          value: theme.shadows?.[slot] ?? "",
+          placeholder: DEFAULT_SHADOWS[slot],
+          onChange: (next) => setShadow(slot, next)
+        },
+        slot
+      ))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ControlSection, { title: "Density", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-xs tw-text-muted-foreground", children: "Semantic spacing (`--space-*`), as CSS lengths." }),
+      SPACING_SLOTS.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
+        TextField2,
+        {
+          id: `${baseId}spacing-${slot}`,
+          label: SPACING_LABELS[slot],
+          value: theme.spacing?.[slot] ?? "",
+          placeholder: DEFAULT_SPACING[slot],
+          onChange: (next) => setSpacing(slot, next)
+        },
+        slot
+      ))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ControlSection, { title: "Motion", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "tw-m-0 tw-text-xs tw-text-muted-foreground", children: "Base transition `duration` + `easing` (`--motion-*`)." }),
+      MOTION_SLOTS.map((slot) => /* @__PURE__ */ jsxRuntime.jsx(
+        TextField2,
+        {
+          id: `${baseId}motion-${slot}`,
+          label: MOTION_LABELS[slot],
+          value: theme.motion?.[slot] ?? "",
+          placeholder: DEFAULT_MOTION[slot],
+          onChange: (next) => setMotion(slot, next)
+        },
+        slot
+      ))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ControlSection, { title: "Gradient", children: /* @__PURE__ */ jsxRuntime.jsx(
+      TextField2,
+      {
+        id: `${baseId}gradient-brand`,
+        label: "Brand gradient",
+        value: theme.gradient?.brand ?? "",
+        placeholder: DEFAULT_GRADIENT,
+        onChange: setGradient
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ControlSection, { title: "Logo", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LogoField,
+        {
+          id: `${baseId}logo-mark`,
+          label: "Mark (icon)",
+          value: value.logo?.mark ?? "",
+          onChange: (source) => setLogo("mark", source)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        LogoField,
+        {
+          id: `${baseId}logo-wordmark`,
+          label: "Wordmark (full)",
+          value: value.logo?.wordmark ?? "",
+          onChange: (source) => setLogo("wordmark", source)
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(Collapsible, { className: "tw-flex tw-flex-col tw-gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "outline", size: "small", className: "tw-w-full", children: "Toggle dark-mode logos" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Collapsible.Content, { className: "tw-flex tw-flex-col tw-gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LogoField,
+            {
+              id: `${baseId}logo-mark-dark`,
+              label: "Mark (dark)",
+              value: value.logo?.markDark ?? "",
+              onChange: (source) => setLogo("markDark", source)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LogoField,
+            {
+              id: `${baseId}logo-wordmark-dark`,
+              label: "Wordmark (dark)",
+              value: value.logo?.wordmarkDark ?? "",
+              onChange: (source) => setLogo("wordmarkDark", source)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-xs tw-text-muted-foreground", children: "Preview" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tw-flex tw-min-h-12 tw-items-center tw-gap-4 tw-rounded-md tw-border tw-border-border tw-bg-background tw-p-3", children: value.logo?.mark || value.logo?.wordmark ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          value.logo.mark ? /* @__PURE__ */ jsxRuntime.jsx(LogoPreviewImage, { source: value.logo.mark, className: "tw-h-8" }) : null,
+          value.logo.wordmark ? /* @__PURE__ */ jsxRuntime.jsx(LogoPreviewImage, { source: value.logo.wordmark, className: "tw-h-8" }) : null
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-text-xs tw-text-muted-foreground", children: "No logo set" }) })
+      ] })
+    ] })
+  ] });
+};
 /*! Bundled license information:
 
 react-is/cjs/react-is.production.min.js:
@@ -23509,6 +24596,7 @@ exports.ArgoDesignContext = ArgoDesignContext;
 exports.AutoSaveTextarea = AutoSaveTextarea;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
+exports.BrandEditor = BrandEditor;
 exports.BrandLogo = BrandLogo;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
@@ -23516,6 +24604,7 @@ exports.ButtonGroup = ButtonGroup;
 exports.ButtonInline = ButtonInline;
 exports.Calendar = Calendar;
 exports.Card = Card;
+exports.ChartPanel = ChartPanel;
 exports.Checkbox = Checkbox;
 exports.Clipboard = Clipboard;
 exports.ClipboardButton = ClipboardButton;
@@ -23533,8 +24622,12 @@ exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
 exports.ConflictStatusIndicator = ConflictStatusIndicator;
+exports.CopyField = CopyField;
 exports.DEFAULT_COLOR_SCHEME = DEFAULT_COLOR_SCHEME;
+exports.DEFAULT_FALLBACK_FONT = DEFAULT_FALLBACK_FONT;
+exports.DEFAULT_FONT_OPTIONS = DEFAULT_FONT_OPTIONS;
 exports.DEFAULT_KEBOOLA_BRAND_ID = DEFAULT_BRAND_ID;
+exports.DashboardHero = DashboardHero;
 exports.DateInput = DateInput;
 exports.DatePicker = DatePicker;
 exports.DateRangeInput = DateRangeInput;
@@ -23603,6 +24696,8 @@ exports.SkeletonList = SkeletonList;
 exports.Slider = Slider;
 exports.SplitButton = SplitButton;
 exports.SpotlightBackdrop = SpotlightBackdrop;
+exports.StatCard = StatCard;
+exports.StatCardGrid = StatCardGrid;
 exports.Stepper = Stepper;
 exports.SuggestedPrompt = SuggestedPrompt;
 exports.Switch = Switch;
@@ -23629,10 +24724,13 @@ exports.UsageStats = UsageStats;
 exports.UsageStatsRing = UsageStatsRing;
 exports.ZoomableSvg = ZoomableSvg;
 exports.argoVariants = argoVariants;
+exports.channelsToHex = channelsToHex;
 exports.cn = cn;
 exports.computeDiffRows = computeDiffRows;
 exports.computeLineInformation = computeLineInformation;
+exports.contrastRatio = contrastRatio;
 exports.copyToClipboard = copyToClipboard;
+exports.hexToChannels = hexToChannels;
 exports.isMac = isMac;
 exports.kbdVariants = kbdVariants;
 exports.keys = keys;
@@ -23648,6 +24746,7 @@ exports.useScrollbarPosition = useScrollbarPosition;
 exports.useSidebar = useSidebar;
 exports.useTargetRect = useTargetRect;
 exports.useTheme = useTheme;
+exports.wcagLevel = wcagLevel;
 exports.withForm = withForm;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map