@keboola/design 6.0.0 → 6.2.0

package/dist/index.js

@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { Root as Root$6, Trigger, Portal, Content, Provider } from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
-import { keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';
+import { keboolaLegacySidebar, keboolaLegacyTopnav, keboola } from '@keboola/brand-registry';
 export { brandSchema, exampleCustomer, keboola, keboolaLegacySidebar, keboolaLegacyTopnav } from '@keboola/brand-registry';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive3 from '@radix-ui/react-dropdown-menu';
@@ -14,6 +14,7 @@ import { Root, Group, Trigger as Trigger$4 } from '@radix-ui/react-dropdown-menu
 import * as ScrollAreaPrimitive2 from '@radix-ui/react-scroll-area';
 import { Root as Root$7 } from '@radix-ui/react-toggle';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import * as RLabel from '@radix-ui/react-label';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Root as Root$8, Trigger as Trigger$5, Portal as Portal$1, Content as Content$1, Cancel, Action, Overlay as Overlay$1, Title as Title$1 } from '@radix-ui/react-alert-dialog';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -25,7 +26,6 @@ import { Root as Root$a, Trigger as Trigger$3, Portal as Portal$4, Content as Co
 import { Command as Command$1, CommandInput as CommandInput$1, defaultFilter, useCommandState } from 'cmdk';
 export { defaultFilter, useCommandState } from 'cmdk';
 import TextareaAutosize from 'react-textarea-autosize';
-import * as RLabel from '@radix-ui/react-label';
 import { Root as Root$3, Thumb } from '@radix-ui/react-switch';
 import * as RRadioGroup from '@radix-ui/react-radio-group';
 import { Item, Indicator as Indicator$2 } from '@radix-ui/react-radio-group';
@@ -263,7 +263,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;
@@ -322,7 +322,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;
@@ -2768,6 +2768,7 @@ var Clipboard = ({
   ] });
 };
 var DEFAULT_ICON = /* @__PURE__ */ jsx(icons_exports.Copy, {});
+var DEFAULT_ARIA_LABEL = "Copy";
 var ClipboardButton = ({
   // clipboard props
   text,
@@ -2779,20 +2780,24 @@ var ClipboardButton = ({
   variant = "outline",
   children,
   ...rest
-}) => /* @__PURE__ */ jsx(
-  Clipboard,
-  {
-    asChild: true,
-    tooltip,
-    tooltipPlacement,
-    tooltipVariant,
-    text,
-    children: /* @__PURE__ */ 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__ */ jsx(
+    Clipboard,
+    {
+      asChild: true,
+      tooltip,
+      tooltipPlacement,
+      tooltipVariant,
+      text,
+      children: /* @__PURE__ */ jsxs(Button, { ...rest, "aria-label": ariaLabel, variant, disabled: !text, children: [
+        icon,
+        children
+      ] })
+    }
+  );
+};
 var ClipboardInline = ({
   // clipboard props
   text,
@@ -2817,6 +2822,264 @@ var ClipboardInline = ({
     ] })
   }
 );
+var CopyContext = createContext(null);
+var useCopyContext = () => {
+  const ctx = 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__ */ jsx(Tooltip, { triggerAsChild: true, placement: "top", tooltip: copied ? "Copied" : "Copy", forceShow: copied, children: /* @__PURE__ */ 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__ */ 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__ */ jsx(icons_exports.Check, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(icons_exports.Copy, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyChildren = ({ children, className }) => {
+  const { maxLines } = useCopyContext();
+  const multiline = maxLines > 1;
+  return /* @__PURE__ */ 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__ */ 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();
+  useEffect(() => {
+    if (!revealable) return void 0;
+    return registerRevealable();
+  }, [revealable, registerRevealable]);
+  const masked = revealable ? hidden : true;
+  return /* @__PURE__ */ jsx("span", { className: cn("tw-select-none", className), children: masked ? MASK : children });
+};
+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 Label2 = ({ 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 peer-disabled:tw-opacity-50",
+      className
+    ),
+    children
+  }
+);
+Label2.Optional = Optional;
+Label2.Required = Required;
+var CopyLabel = ({ children, leading, trailing, className }) => {
+  const { labelId, registerLabel } = useCopyContext();
+  useEffect(() => registerLabel(), [registerLabel]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("tw-flex tw-items-center tw-gap-1", className), children: [
+    /* @__PURE__ */ jsx(Label2, { id: labelId, children }),
+    leading,
+    trailing != null && /* @__PURE__ */ jsx("span", { className: "tw-ml-auto tw-flex tw-items-center", children: trailing })
+  ] });
+};
+var CopyPrefix = ({ children, className }) => /* @__PURE__ */ 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__ */ 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__ */ jsx(icons_exports.Eye, { className: "tw-size-4" }) : /* @__PURE__ */ jsx(icons_exports.EyeOff, { className: "tw-size-4" })
+    }
+  );
+};
+var CopyRoot = ({
+  value,
+  mono = false,
+  onCopy,
+  hiddenByDefault = false,
+  minLines = 1,
+  maxLines,
+  className,
+  children
+}) => {
+  const [copied, setCopied] = useState(false);
+  const [hidden, setHidden] = useState(hiddenByDefault);
+  const [revealableCount, setRevealableCount] = useState(0);
+  const [labelCount, setLabelCount] = useState(0);
+  const resetTimerRef = useRef(void 0);
+  const generatedId = useId();
+  const labelId = `${generatedId}-label`;
+  const boxId = `${generatedId}-box`;
+  useEffect(() => () => clearTimeout(resetTimerRef.current), []);
+  const handleCopy = 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 = useCallback(() => setHidden((prev) => !prev), []);
+  const registerRevealable = useCallback(() => {
+    setRevealableCount((count) => count + 1);
+    return () => setRevealableCount((count) => count - 1);
+  }, []);
+  const registerLabel = useCallback(() => {
+    setLabelCount((count) => count + 1);
+    return () => setLabelCount((count) => count - 1);
+  }, []);
+  const contextValue = 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__ */ jsx(CopyContext, { value: contextValue, children: /* @__PURE__ */ 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__ */ 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,
@@ -3773,8 +4036,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"
                         )
                       }
@@ -6751,7 +7014,7 @@ __export(custom_components_exports, {
   NextMonthButton: () => NextMonthButton,
   Option: () => Option,
   PreviousMonthButton: () => PreviousMonthButton,
-  Root: () => Root16,
+  Root: () => Root17,
   Select: () => Select,
   Week: () => Week,
   WeekNumber: () => WeekNumber,
@@ -6931,7 +7194,7 @@ function Option(props) {
 function PreviousMonthButton(props) {
   return React26.createElement("button", { ...props });
 }
-function Root16(props) {
+function Root17(props) {
   const { rootRef, ...rest } = props;
   return React26.createElement("div", { ...rest, ref: rootRef });
 }
@@ -9999,23 +10262,6 @@ var TimePicker = ({
     )
   ] });
 };
-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 Label2 = ({ 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 peer-disabled:tw-opacity-50",
-      className
-    ),
-    children
-  }
-);
-Label2.Optional = Optional;
-Label2.Required = Required;
 var FieldBoxDescription = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
@@ -10744,8 +10990,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__ */ jsx(icons_exports.X, { className: "tw-size-4" })
@@ -11586,23 +11832,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"
 };
@@ -16368,6 +16614,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,
@@ -16390,6 +16642,7 @@ var PromptInputSubmit = ({
         ref,
         type: "submit",
         disabled,
+        "aria-label": ARIA_LABEL_BY_STATUS[status],
         size: "icon-sm",
         variant: "invisible",
         isLoading: status === "submitted",
@@ -17836,7 +18089,7 @@ var cardTitleClassnames = cn(
   "tw-text-base",
   "tw-text-card-foreground"
 );
-var CardTitle = ({ children, className, ...rest }) => /* @__PURE__ */ jsx("h3", { className: cn(cardTitleClassnames, className), ...rest, children });
+var CardTitle = ({ children, className, as: Tag = "h3", ...rest }) => /* @__PURE__ */ jsx(Tag, { className: cn(cardTitleClassnames, className), ...rest, children });
 var Card = ({
   children,
   className,
@@ -18168,9 +18421,7 @@ var headerVariants = 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",
@@ -18235,7 +18486,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__ */ jsxs(
@@ -18443,6 +18694,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);
@@ -22948,6 +23211,150 @@ var pairChunksIntoConflicts = (chunks) => {
   }
   return conflicts;
 };
+var DashboardHeroRoot = ({ className, children, ...rest }) => /* @__PURE__ */ 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__ */ jsx("div", { className: cn("tw-flex tw-flex-col tw-gap-3", className), ...rest, children });
+var DashboardHeroEyebrow = ({ className, children, ...rest }) => /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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 = 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__ */ jsx(Card, { bordered, className: cn("tw-gap-2", className), role: "group", ...rest, children });
+var StatCardIcon = ({ className, children, ...rest }) => /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("span", { className: trendClassnames({ direction, className }), ...rest, children: [
+  icon,
+  children
+] });
+var StatCardFootnote = ({ className, children, ...rest }) => /* @__PURE__ */ 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 = 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__ */ jsx("div", { className: gridClassnames({ columns, className }), ...rest, children });
+var ChartPanel = ({
+  title,
+  description,
+  titleAs = "h3",
+  toolbar,
+  footer,
+  className,
+  bordered = true,
+  children,
+  ...rest
+}) => /* @__PURE__ */ jsxs(Card, { bordered, className: cn("tw-gap-4", className), ...rest, children: [
+  /* @__PURE__ */ jsxs(Card.Header, { className: "tw-flex tw-items-start tw-justify-between tw-gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+      /* @__PURE__ */ jsx(Card.Title, { as: titleAs, children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "tw-m-0 tw-text-sm tw-text-muted-foreground", children: description }) : null
+    ] }),
+    toolbar ? /* @__PURE__ */ jsx("div", { className: "tw-flex tw-shrink-0 tw-items-center tw-gap-2", children: toolbar }) : null
+  ] }),
+  /* @__PURE__ */ jsx(Card.Content, { children }),
+  footer ? /* @__PURE__ */ 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 } = createFormHookContexts();
 var FormBody = ({ children, className, ...formProps }) => {
   const form = useFormContext();
@@ -23387,6 +23794,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__ */ jsxs("div", { className: "tw-flex tw-items-center tw-justify-between tw-gap-2", children: [
+    /* @__PURE__ */ jsx(Label2, { htmlFor: id, className: "tw-text-xs tw-font-normal tw-text-foreground", children: label }),
+    /* @__PURE__ */ 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__ */ jsxs("section", { className: "tw-flex tw-flex-col tw-gap-3 tw-border-b tw-border-border tw-p-4", children: [
+  /* @__PURE__ */ 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__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+  /* @__PURE__ */ jsx(Label2, { htmlFor: id, className: "tw-text-xs tw-font-normal tw-text-foreground", children: label }),
+  /* @__PURE__ */ 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__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+  /* @__PURE__ */ jsx(Label2, { htmlFor: id, className: "tw-text-xs tw-font-normal tw-text-foreground", children: label }),
+  /* @__PURE__ */ 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 = useMemo(
+    () => isSvgMarkup(source) ? DOMPurify.sanitize(source, { USE_PROFILES: { svg: true, svgFilters: true } }) : null,
+    [source]
+  );
+  if (safeSvg !== null) {
+    return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className, dangerouslySetInnerHTML: { __html: safeSvg } });
+  }
+  if (isImageSource(source)) {
+    return /* @__PURE__ */ jsx("img", { src: source, alt: "", className });
+  }
+  return null;
+};
+var BrandEditor = ({
+  value,
+  onChange,
+  colorScheme = "light",
+  onColorSchemeChange,
+  fontOptions = DEFAULT_FONT_OPTIONS
+}) => {
+  const baseId = 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" ? keboola.theme.colors : 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__ */ jsxs("div", { className: "tw-flex tw-flex-col", children: [
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Colors", children: [
+      onColorSchemeChange ? /* @__PURE__ */ 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__ */ jsx(ToggleGroup.Item, { value: "light", className: "tw-flex-1", children: "Light" }),
+            /* @__PURE__ */ jsx(ToggleGroup.Item, { value: "dark", className: "tw-flex-1", children: "Dark" })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("div", { className: "tw-flex tw-flex-col tw-gap-2", children: COLOR_SLOTS.map((slot) => /* @__PURE__ */ 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__ */ jsxs(ControlSection, { title: "Accessibility", children: [
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "tw-flex tw-items-center tw-justify-between tw-gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "tw-text-xs tw-text-foreground", children: pair.label }),
+          /* @__PURE__ */ jsxs("span", { className: "tw-flex tw-items-center tw-gap-1.5", children: [
+            /* @__PURE__ */ jsxs("span", { className: "tw-text-xs tw-tabular-nums tw-text-muted-foreground", children: [
+              ratio.toFixed(1),
+              ":1"
+            ] }),
+            /* @__PURE__ */ jsx(Badge, { color: level === "fail" ? "red" : "green", children: level === "fail" ? "Fail" : level })
+          ] })
+        ] }, pair.label);
+      }) })
+    ] }),
+    /* @__PURE__ */ jsx(ControlSection, { title: "Sidebar colors", children: /* @__PURE__ */ jsxs(Collapsible, { className: "tw-flex tw-flex-col tw-gap-2", children: [
+      /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "small", className: "tw-w-full", children: [
+        "Toggle sidebar tokens (",
+        colorScheme,
+        ")"
+      ] }) }),
+      /* @__PURE__ */ jsx(Collapsible.Content, { className: "tw-flex tw-flex-col tw-gap-2", children: SIDEBAR_SLOTS.map((slot) => /* @__PURE__ */ 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__ */ jsxs(ControlSection, { title: "Chart palette", children: [
+      /* @__PURE__ */ 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__ */ jsx("div", { className: "tw-flex tw-flex-col tw-gap-2", children: CHART_SLOTS.map((slot) => /* @__PURE__ */ 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__ */ jsx(ControlSection, { title: "Radius", children: RADIUS_SIZES.map((size) => {
+      const current = radii[size];
+      const px = lengthToPx(current);
+      return /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-justify-between", children: [
+          /* @__PURE__ */ jsx(Label2, { className: "tw-text-xs tw-font-normal tw-uppercase tw-text-foreground", children: size }),
+          /* @__PURE__ */ jsx("span", { className: "tw-text-xs tw-tabular-nums tw-text-muted-foreground", children: radii[size] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            min: 0,
+            max: 24,
+            step: 1,
+            value: [px],
+            onValueChange: (values) => setRadius(size, pxToLength(values[0] ?? 0, current))
+          }
+        )
+      ] }, size);
+    }) }),
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Typography", children: [
+      /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Label2,
+          {
+            htmlFor: `${baseId}font-family`,
+            className: "tw-text-xs tw-font-normal tw-text-foreground",
+            children: "Font family"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select2,
+          {
+            id: `${baseId}font-family`,
+            value: typography?.fontFamily ?? DEFAULT_FALLBACK_FONT,
+            onValueChange: (font) => setFontFace("fontFamily", font),
+            items: fontOptions
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Label2,
+          {
+            htmlFor: `${baseId}font-display`,
+            className: "tw-text-xs tw-font-normal tw-text-foreground",
+            children: "Display font (headings)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select2,
+          {
+            id: `${baseId}font-display`,
+            value: typography?.fontDisplay ?? typography?.fontFamily ?? DEFAULT_FALLBACK_FONT,
+            onValueChange: (font) => setFontFace("fontDisplay", font),
+            items: fontOptions
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Label2,
+          {
+            htmlFor: `${baseId}font-mono`,
+            className: "tw-text-xs tw-font-normal tw-text-foreground",
+            children: "Monospace font"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select2,
+          {
+            id: `${baseId}font-mono`,
+            value: typography?.fontMono ?? MONO_FALLBACK,
+            onValueChange: (font) => setFontFace("fontMono", font),
+            items: fontOptions
+          }
+        )
+      ] }),
+      /* @__PURE__ */ 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__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-justify-between", children: [
+            /* @__PURE__ */ jsx(Label2, { className: "tw-text-xs tw-font-normal tw-text-foreground", children: WEIGHT_LABELS[slot] }),
+            /* @__PURE__ */ jsx("span", { className: "tw-text-xs tw-tabular-nums tw-text-muted-foreground", children: current })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Slider,
+            {
+              min: 100,
+              max: 900,
+              step: 25,
+              value: [numOf(current, 400)],
+              onValueChange: (values) => setFontWeight(slot, String(values[0] ?? 400))
+            }
+          )
+        ] }, slot);
+      }),
+      /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-items-center tw-justify-between", children: [
+          /* @__PURE__ */ jsx(Label2, { className: "tw-text-xs tw-font-normal tw-text-foreground", children: "Chrome letter spacing" }),
+          /* @__PURE__ */ jsx("span", { className: "tw-text-xs tw-tabular-nums tw-text-muted-foreground", children: typography?.letterSpacing?.chrome ?? DEFAULT_LETTER_SPACING })
+        ] }),
+        /* @__PURE__ */ 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__ */ jsxs(ControlSection, { title: "Elevation", children: [
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs(ControlSection, { title: "Density", children: [
+      /* @__PURE__ */ 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__ */ 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__ */ jsxs(ControlSection, { title: "Motion", children: [
+      /* @__PURE__ */ jsx("p", { className: "tw-m-0 tw-text-xs tw-text-muted-foreground", children: "Base transition `duration` + `easing` (`--motion-*`)." }),
+      MOTION_SLOTS.map((slot) => /* @__PURE__ */ 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__ */ jsx(ControlSection, { title: "Gradient", children: /* @__PURE__ */ jsx(
+      TextField2,
+      {
+        id: `${baseId}gradient-brand`,
+        label: "Brand gradient",
+        value: theme.gradient?.brand ?? "",
+        placeholder: DEFAULT_GRADIENT,
+        onChange: setGradient
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(ControlSection, { title: "Logo", children: [
+      /* @__PURE__ */ jsx(
+        LogoField,
+        {
+          id: `${baseId}logo-mark`,
+          label: "Mark (icon)",
+          value: value.logo?.mark ?? "",
+          onChange: (source) => setLogo("mark", source)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        LogoField,
+        {
+          id: `${baseId}logo-wordmark`,
+          label: "Wordmark (full)",
+          value: value.logo?.wordmark ?? "",
+          onChange: (source) => setLogo("wordmark", source)
+        }
+      ),
+      /* @__PURE__ */ jsxs(Collapsible, { className: "tw-flex tw-flex-col tw-gap-2", children: [
+        /* @__PURE__ */ jsx(Collapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "small", className: "tw-w-full", children: "Toggle dark-mode logos" }) }),
+        /* @__PURE__ */ jsxs(Collapsible.Content, { className: "tw-flex tw-flex-col tw-gap-2", children: [
+          /* @__PURE__ */ jsx(
+            LogoField,
+            {
+              id: `${baseId}logo-mark-dark`,
+              label: "Mark (dark)",
+              value: value.logo?.markDark ?? "",
+              onChange: (source) => setLogo("markDark", source)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LogoField,
+            {
+              id: `${baseId}logo-wordmark-dark`,
+              label: "Wordmark (dark)",
+              value: value.logo?.wordmarkDark ?? "",
+              onChange: (source) => setLogo("wordmarkDark", source)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "tw-flex tw-flex-col tw-gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "tw-text-xs tw-text-muted-foreground", children: "Preview" }),
+        /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [
+          value.logo.mark ? /* @__PURE__ */ jsx(LogoPreviewImage, { source: value.logo.mark, className: "tw-h-8" }) : null,
+          value.logo.wordmark ? /* @__PURE__ */ jsx(LogoPreviewImage, { source: value.logo.wordmark, className: "tw-h-8" }) : null
+        ] }) : /* @__PURE__ */ 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:
@@ -23417,6 +24504,6 @@ object-assign/index.js:
   *)
 */
 
-export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, DEFAULT_COLOR_SCHEME, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label2 as Label, Link, Markdown, MarkedText, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, cn, computeDiffRows, computeLineInformation, copyToClipboard, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, withForm };
+export { Alert, AlertModal, AnswerSummary, AppShell, ArgoDesignContext, AutoSaveTextarea, Avatar, Badge, BrandEditor, BrandLogo, Breadcrumb, Button, ButtonGroup, ButtonInline, Calendar, Card, ChartPanel, Checkbox, Clipboard, ClipboardButton, ClipboardInline, Collapse, Collapsible, CollapsiblePanel, CollapsibleStepHeader, ColorInput, ColorModeSwitch, Combobox, Command, CommandGroup, CommandInput, CommandItem, CommandList, ConflictStatusIndicator, CopyField, DEFAULT_COLOR_SCHEME, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, DEFAULT_BRAND_ID as DEFAULT_KEBOOLA_BRAND_ID, DashboardHero, DateInput, DatePicker, DateRangeInput, DateRangePicker, DiffType, DiffView, DotsLoader, DropdownMenu, EmptyConfigurationActionCard, EmptySearchContent, EmptyState, ErrorState, FileUpload, FormGroup, FullScreenModal, FullScreenModalBody, FullScreenModalHeader, HelpBlock, HoverCard, InlineStepDetail, InlineStepLabel, InputGroup, Kbd, Label2 as Label, Link, Markdown, MarkedText, MessageBubble, Modal, MultiActionButtonGroup, MultiCombobox, Navbar, NumberInput, OtpInput, PageHeader, PageLayout, PageToolbar, Pagination, PaneHeader, PanelWithDetails, PasswordInput, PlanApproval, PlanRewritingIndicator, Popconfirm, Popover, Progress, PromptInput, Question, QuestionBlock, RadioGroup2 as RadioGroup, ResizableHandle, ResizablePanelGroup, ScrollArea, ScrollBar, Search, SearchForm, SearchInput, SearchInputWithNavigation, Select2 as Select, Separator2 as Separator, Sheet, Sidebar, SidebarProvider, Skeleton, SkeletonList, Slider, SplitButton, SpotlightBackdrop, StatCard, StatCardGrid, Stepper, SuggestedPrompt, Switch, Table, Tabs2 as Tabs, TabsContent, Tagger, TextInput, Textarea, ThemeProvider, ThinkingIndicator, TimeInput, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToolCallApproval, ToolCallChip, Tooltip, TooltipProvider, Truncated, UsageStats, UsageStatsRing, ZoomableSvg, argoVariants, channelsToHex, cn, computeDiffRows, computeLineInformation, contrastRatio, copyToClipboard, hexToChannels, isMac, kbdVariants, keys, mergeRefs, setServerFieldErrors, toast, useAppForm, useArgoDesign, useAutosizeInput, useMergeDiff, useNotification, useScrollbarPosition, useSidebar, useTargetRect, useTheme, wcagLevel, withForm };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map