@keboola/design 11.0.0 → 11.2.0

package/dist/chunk-R74KGWNS.js

@@ -1,699 +0,0 @@
-import { Select } from './chunk-M6LTUPVP.js';
-import { Slider } from './chunk-I2UCOD45.js';
-import { ToggleGroup } from './chunk-M4CTURKX.js';
-import { Collapsible } from './chunk-FVPGQ6UE.js';
-import { Badge } from './chunk-SBGAUGXY.js';
-import { Textarea } from './chunk-EEK5NGZF.js';
-import { ColorInput } from './chunk-VSERHUWD.js';
-import { TextInput } from './chunk-HPMYYGP7.js';
-import { Label } from './chunk-S6TAF63G.js';
-import { Button } from './chunk-IXAYNBOY.js';
-import { useId, useMemo } from 'react';
-import DOMPurify from 'dompurify';
-import { keboola } from '@keboola/brand-registry';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-
-// 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(Label, { 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(Label, { 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 TextField = ({ id, label, value, onChange, placeholder }) => /* @__PURE__ */ jsxs("div", { className: "tw:flex tw:flex-col tw:gap-1", children: [
-  /* @__PURE__ */ jsx(Label, { 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 border",
-  inputBackground: "Input background",
-  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(--primary)), rgb(var(--accent, var(--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 (`--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(Label, { 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(
-          Label,
-          {
-            htmlFor: `${baseId}font-family`,
-            className: "tw:text-xs tw:font-normal tw:text-foreground",
-            children: "Font family"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Select,
-          {
-            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(
-          Label,
-          {
-            htmlFor: `${baseId}font-display`,
-            className: "tw:text-xs tw:font-normal tw:text-foreground",
-            children: "Display font (headings)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Select,
-          {
-            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(
-          Label,
-          {
-            htmlFor: `${baseId}font-mono`,
-            className: "tw:text-xs tw:font-normal tw:text-foreground",
-            children: "Monospace font"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Select,
-          {
-            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(Label, { 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(Label, { 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(
-        TextField,
-        {
-          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(
-        TextField,
-        {
-          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(
-        TextField,
-        {
-          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(
-      TextField,
-      {
-        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, { 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" }) })
-      ] })
-    ] })
-  ] });
-};
-
-export { BrandEditor, DEFAULT_FALLBACK_FONT, DEFAULT_FONT_OPTIONS, channelsToHex, contrastRatio, hexToChannels, wcagLevel };
-//# sourceMappingURL=chunk-R74KGWNS.js.map
-//# sourceMappingURL=chunk-R74KGWNS.js.map