@keboola/design 6.1.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';
@@ -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;
@@ -4036,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"
                         )
                       }
@@ -10990,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" })
@@ -11832,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"
 };
@@ -18421,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",
@@ -18488,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(
@@ -18696,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);
@@ -23201,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();
@@ -23640,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:
@@ -23670,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, 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, 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