@keboola/design 6.1.0 → 6.3.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';
@@ -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;
@@ -1047,6 +1047,7 @@ var require_es = __commonJS({
 // src/icons/index.ts
 var icons_exports = {};
 __export(icons_exports, {
+  Google: () => Google,
   Keboola: () => Keboola
 });
 __reExport(icons_exports, lucide_react_star);
@@ -1407,6 +1408,53 @@ var useSHA256 = (text) => {
   }, [text]);
   return text ? hash : "";
 };
+var Google = forwardRef(
+  ({ size = 24, className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: size,
+      height: size,
+      viewBox: "12 10 20 20",
+      fill: "none",
+      className: cn("lucide", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M31.6 20.2273C31.6 19.5182 31.5364 18.8364 31.4182 18.1818H22V22.05H27.3818C27.15 23.3 26.4455 24.3591 25.3864 25.0682V27.5773H28.6182C30.5091 25.8364 31.6 23.2727 31.6 20.2273Z",
+            fill: "#4285F4"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22 30C24.7 30 26.9636 29.1045 28.6181 27.5773L25.3863 25.0682C24.4909 25.6682 23.3454 26.0227 22 26.0227C19.3954 26.0227 17.1909 24.2636 16.4045 21.9H13.0636V24.4909C14.7091 27.7591 18.0909 30 22 30Z",
+            fill: "#34A853"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M16.4045 21.9C16.2045 21.3 16.0909 20.6591 16.0909 20C16.0909 19.3409 16.2045 18.7 16.4045 18.1V15.5091H13.0636C12.3864 16.8591 12 18.3864 12 20C12 21.6136 12.3864 23.1409 13.0636 24.4909L16.4045 21.9Z",
+            fill: "#FBBC04"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M22 13.9773C23.4681 13.9773 24.7863 14.4818 25.8227 15.4727L28.6909 12.6045C26.9591 10.9909 24.6954 10 22 10C18.0909 10 14.7091 12.2409 13.0636 15.5091L16.4045 18.1C17.1909 15.7364 19.3954 13.9773 22 13.9773Z",
+            fill: "#EA4335"
+          }
+        ),
+        children
+      ]
+    }
+  )
+);
+Google.displayName = "Google";
 var Keboola = forwardRef(
   ({ size = 24, color = "currentColor", className, children, ...rest }, ref) => /* @__PURE__ */ jsxs(
     "svg",
@@ -3080,6 +3128,115 @@ var CopyField = {
   /** Small helper text below the box. */
   Footer: CopyFooter
 };
+var LABELS = {
+  signin: "Sign in with Google",
+  signup: "Sign up with Google",
+  continue: "Continue with Google",
+  "signin-short": "Sign in"
+};
+var GOOGLE_FONT_STACK = "'Roboto', arial, sans-serif";
+var variants3 = cva(
+  [
+    "tailwindcss-preflight",
+    "tw-inline-flex",
+    "tw-items-center",
+    "tw-justify-center",
+    "tw-h-10",
+    "tw-border",
+    "tw-text-sm",
+    "tw-font-medium",
+    "tw-leading-none",
+    "tw-whitespace-nowrap",
+    "tw-select-none",
+    "tw-cursor-pointer",
+    "tw-transition-shadow",
+    "[&_svg]:tw-shrink-0",
+    // focus — a neutral Google-blue ring, independent of the active brand.
+    "focus-visible:tw-outline-none",
+    "focus-visible:tw-ring-2",
+    "focus-visible:tw-ring-[#4285f4]/60",
+    // disabled
+    "disabled:tw-cursor-not-allowed",
+    "disabled:tw-opacity-60",
+    // dark treatment — auto-applied under html[data-theme=dark], overriding
+    // whichever `variant` is active (the ancestor selector out-specifies the
+    // variant's plain color classes).
+    "[[data-theme=dark]_&]:tw-bg-[#131314]",
+    "[[data-theme=dark]_&]:tw-text-[#e3e3e3]",
+    "[[data-theme=dark]_&]:tw-border-[#8e918f]",
+    "[[data-theme=dark]_&]:hover:not-disabled:tw-bg-[#1e1f20]",
+    "[[data-theme=dark]_&]:hover:not-disabled:tw-shadow-none"
+  ],
+  {
+    defaultVariants: {
+      variant: "default",
+      shape: "rectangular",
+      size: "default"
+    },
+    variants: {
+      // Google's approved light-scheme treatments; dark (above) overrides both.
+      variant: {
+        default: [
+          "tw-bg-white",
+          "tw-text-[#1f1f1f]",
+          "tw-border-[#747775]",
+          "hover:not-disabled:tw-bg-[#f7f8f8]",
+          "hover:not-disabled:tw-shadow-[0_1px_2px_0_rgba(60,64,67,0.30),0_1px_3px_1px_rgba(60,64,67,0.15)]"
+        ],
+        neutral: [
+          "tw-bg-[#f2f2f2]",
+          "tw-text-[#1f1f1f]",
+          "tw-border-transparent",
+          "hover:not-disabled:tw-bg-[#e8eaed]"
+        ]
+      },
+      shape: {
+        rectangular: ["tw-rounded"],
+        circle: ["tw-rounded-full"]
+      },
+      size: {
+        default: ["tw-gap-2.5", "tw-px-3"],
+        icon: ["tw-w-10", "tw-p-0"]
+      }
+    }
+  }
+);
+var GoogleButton = ({
+  ref,
+  variant = "default",
+  shape = "rectangular",
+  size = "default",
+  label = "signin",
+  isLoading = false,
+  disabled = false,
+  type = "button",
+  className,
+  children,
+  style,
+  ...buttonProps
+}) => /* @__PURE__ */ jsxs(
+  "button",
+  {
+    ...buttonProps,
+    ref,
+    type,
+    disabled,
+    style: { ...style, fontFamily: GOOGLE_FONT_STACK },
+    className: cn(variants3({ variant, shape, size }), className),
+    children: [
+      isLoading ? /* @__PURE__ */ jsx(icons_exports.Loader2, { className: "tw-size-5 tw-shrink-0 tw-animate-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Google, { className: "tw-size-5" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn({
+            "tw-sr-only": size === "icon"
+          }),
+          children: children ?? LABELS[label]
+        }
+      )
+    ]
+  }
+);
 var Link = ({
   ref,
   children,
@@ -4036,8 +4193,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"
                         )
                       }
@@ -4285,7 +4442,7 @@ Sheet.Title = SheetTitle;
 Sheet.Header = SheetHeader;
 Sheet.Footer = SheetFooter;
 Sheet.Body = SheetBody;
-var variants3 = cva(
+var variants4 = cva(
   [
     "tailwindcss-preflight",
     "tw-group/popover-content",
@@ -4357,7 +4514,7 @@ var PopoverContent = ({
       ref,
       align: matchTriggerWidth ? "start" : align,
       sideOffset,
-      className: cn(variants3({ className, matchTriggerWidth, variant: effectiveVariant })),
+      className: cn(variants4({ className, matchTriggerWidth, variant: effectiveVariant })),
       onEscapeKeyDown: (event) => {
         event.stopPropagation();
         onEscapeKeyDown?.(event);
@@ -10990,8 +11147,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" })
@@ -11373,7 +11530,7 @@ var SelectSeparator = ({ className, ...props }) => /* @__PURE__ */ jsx(
     className: cn("tw-mx-2 tw-my-1 tw-h-px tw-bg-border", className)
   }
 );
-var variants4 = cva(
+var variants5 = cva(
   [
     "tailwindcss-preflight",
     "tw-group",
@@ -11536,7 +11693,7 @@ var SelectTrigger = ({
     SelectPrimitive.Trigger,
     {
       ref,
-      className: cn(variants4({ variant: effectiveVariant, state, sizing }), className),
+      className: cn(variants5({ variant: effectiveVariant, state, sizing }), className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(SelectPrimitive.Value, { placeholder }),
@@ -11832,23 +11989,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-500 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"
 };
@@ -15616,7 +15773,7 @@ var TableHeader = ({
     "thead",
     {
       className: cn(
-        "tw-sticky tw-top-0 tw-z-10 [&_tr]:tw-bg-muted [&_tr]:tw-border-b [&_tr]:tw-border-border",
+        "tw-sticky tw-top-0 tw-z-10 [&_tr]:tw-bg-table-header [&_tr]:tw-border-b [&_tr]:tw-border-border",
         { "tw-shadow-table": withShadow },
         className
       ),
@@ -16841,7 +16998,7 @@ var PromptInput = ({
   ) : formEl });
 };
 PromptInput.Action = PromptInputAction;
-var variants5 = cva(
+var variants6 = cva(
   ["tw-relative", "tw-flex", "tw-items-center", "tw-z-0", "tw-overflow-x-hidden", "tw-w-full"],
   {
     defaultVariants: {
@@ -16867,7 +17024,7 @@ var Progress = ({
   variant,
   size,
   ...props
-}) => /* @__PURE__ */ jsx(Root$c, { ...props, ref, className: cn(variants5({ variant, size, className })), value, children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(Root$c, { ...props, ref, className: cn(variants6({ variant, size, className })), value, children: /* @__PURE__ */ jsx(
   Indicator$1,
   {
     "data-slot": "progress-indicator",
@@ -17860,7 +18017,7 @@ var ToastTitle = ({
     children
   }
 );
-var variants6 = cva(
+var variants7 = cva(
   [
     "tailwindcss-preflight",
     "tw-group/toast",
@@ -17930,7 +18087,7 @@ var ToastRoot = ({
       "data-variant": variant,
       "data-argo": renderArgo,
       className: cn(
-        variants6({ variant }),
+        variants7({ variant }),
         "data-[variant=default]:data-[argo=true]:tw-bg-background"
       ),
       children: [
@@ -18421,9 +18578,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",
@@ -18488,7 +18643,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(
@@ -18696,6 +18851,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);
@@ -20813,7 +20980,7 @@ var NavbarHeader = ({ children, className, ...rest }) => (
   // renders null when the active brand ships no logo, so no provider gate needed.
   /* @__PURE__ */ jsx("div", { ...rest, className: cn("tw-overflow-hidden", "tw-py-1.5", className), children: children ?? /* @__PURE__ */ jsx(BrandLogo, { variant: "wordmark", className: "tw-h-7" }) })
 );
-var variants7 = cva(["tw-p-0", "tw-flex", "tw-items-center", "tw-justify-center", "tw-gap-2"], {
+var variants8 = cva(["tw-p-0", "tw-flex", "tw-items-center", "tw-justify-center", "tw-gap-2"], {
   variants: {
     marker: {
       none: [],
@@ -20833,7 +21000,7 @@ var variants7 = cva(["tw-p-0", "tw-flex", "tw-items-center", "tw-justify-center"
     marker: "none"
   }
 });
-var NavbarMenu = ({ className, marker, ...rest }) => /* @__PURE__ */ jsx("ul", { ...rest, className: variants7({ marker, className }) });
+var NavbarMenu = ({ className, marker, ...rest }) => /* @__PURE__ */ jsx("ul", { ...rest, className: variants8({ marker, className }) });
 var NavbarMenuAvatar = ({
   ref,
   className,
@@ -20885,7 +21052,7 @@ var NavbarMenuAvatar = ({
     }
   );
 };
-var variants8 = cva(
+var variants9 = cva(
   [
     "tw-flex",
     "tw-justify-center",
@@ -20936,9 +21103,9 @@ var NavbarMenuItemAdornment = ({
   ...props
 }) => {
   const Comp = asChild ? Slot : "span";
-  return /* @__PURE__ */ jsx(Comp, { ...props, ref, className: variants8({ variant, className }) });
+  return /* @__PURE__ */ jsx(Comp, { ...props, ref, className: variants9({ variant, className }) });
 };
-var variants9 = cva(
+var variants10 = cva(
   [
     "tw-group/navbar-menu-button",
     "tw-box-border",
@@ -21036,7 +21203,7 @@ var NavbarMenuButton = ({
       ref,
       type,
       "data-variant": variant,
-      className: cn(variants9({ className, variant })),
+      className: cn(variants10({ className, variant })),
       children: [
         adornment && /* @__PURE__ */ jsx(NavbarMenuItemAdornment, { variant: adornmentVariant, children: adornment }),
         /* @__PURE__ */ jsx(Slottable, { children })
@@ -22300,7 +22467,7 @@ Pagination.Button = PaginationButton;
 Pagination.Previous = PaginationPrevious;
 Pagination.Next = PaginationNext;
 Pagination.Ellipsis = PaginationEllipsis;
-var variants10 = cva(["tw-p-0.5", "tw-text-inherit", "tw-inline-flex"], {
+var variants11 = cva(["tw-p-0.5", "tw-text-inherit", "tw-inline-flex"], {
   variants: {
     diff: {
       added: ["tw-bg-green-200"],
@@ -22308,8 +22475,8 @@ var variants10 = cva(["tw-p-0.5", "tw-text-inherit", "tw-inline-flex"], {
     }
   }
 });
-var DiffViewMark = ({ diff, children, className, ...props }) => /* @__PURE__ */ jsx("mark", { ...props, className: cn(variants10({ diff, className })), children });
-var variants11 = cva(
+var DiffViewMark = ({ diff, children, className, ...props }) => /* @__PURE__ */ jsx("mark", { ...props, className: cn(variants11({ diff, className })), children });
+var variants12 = cva(
   [
     // reset global styles
     "[&_pre]:tw-p-0",
@@ -22377,7 +22544,7 @@ var variants11 = cva(
 );
 var DiffViewTd = ({ diff, variant = "default", children, className, ...props }) => {
   const needsCodeFormatting = variant === "code" || variant === "gutter";
-  return /* @__PURE__ */ jsx("td", { ...props, className: cn(variants11({ variant, className, diff })), children: needsCodeFormatting ? /* @__PURE__ */ jsx("pre", { children }) : children });
+  return /* @__PURE__ */ jsx("td", { ...props, className: cn(variants12({ variant, className, diff })), children: needsCodeFormatting ? /* @__PURE__ */ jsx("pre", { children }) : children });
 };
 var DiffViewTh = ({ variant = "default", children, className, ...props }) => /* @__PURE__ */ jsx(
   "th",
@@ -23201,6 +23368,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();
@@ -23640,6 +23951,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:
@@ -23670,6 +24661,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, CopyField, 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, GoogleButton, 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