@carto/ps-react-ui 6.3.0 → 6.5.0

package/dist/theme/tailwind.css

@@ -0,0 +1,373 @@
+/*
+ * Generated by generateTailwindCss() from @carto/ps-react-ui/theme.
+ * Do not edit by hand: regenerate it whenever the theme changes.
+ *
+ * Import after `tailwindcss`. Declare the cascade layer order yourself first:
+ * theme, base, mui, components, utilities (in that order).
+ */
+
+@theme inline {
+  --color-primary: var(--mui-palette-primary-main);
+  --color-primary-light: var(--mui-palette-primary-light);
+  --color-primary-dark: var(--mui-palette-primary-dark);
+  --color-primary-contrast: var(--mui-palette-primary-contrastText);
+  --color-primary-related-light: var(--mui-palette-primary-relatedLight);
+  --color-primary-related-dark: var(--mui-palette-primary-relatedDark);
+  --color-primary-background: var(--mui-palette-primary-background);
+  --color-secondary: var(--mui-palette-secondary-main);
+  --color-secondary-light: var(--mui-palette-secondary-light);
+  --color-secondary-dark: var(--mui-palette-secondary-dark);
+  --color-secondary-contrast: var(--mui-palette-secondary-contrastText);
+  --color-secondary-related-light: var(--mui-palette-secondary-relatedLight);
+  --color-secondary-related-dark: var(--mui-palette-secondary-relatedDark);
+  --color-secondary-background: var(--mui-palette-secondary-background);
+  --color-tertiary: var(--mui-palette-tertiary-main);
+  --color-tertiary-light: var(--mui-palette-tertiary-light);
+  --color-tertiary-dark: var(--mui-palette-tertiary-dark);
+  --color-tertiary-contrast: var(--mui-palette-tertiary-contrastText);
+  --color-tertiary-related-light: var(--mui-palette-tertiary-relatedLight);
+  --color-tertiary-related-dark: var(--mui-palette-tertiary-relatedDark);
+  --color-tertiary-background: var(--mui-palette-tertiary-background);
+  --color-error: var(--mui-palette-error-main);
+  --color-error-light: var(--mui-palette-error-light);
+  --color-error-dark: var(--mui-palette-error-dark);
+  --color-error-contrast: var(--mui-palette-error-contrastText);
+  --color-error-related-light: var(--mui-palette-error-relatedLight);
+  --color-error-related-dark: var(--mui-palette-error-relatedDark);
+  --color-error-background: var(--mui-palette-error-background);
+  --color-warning: var(--mui-palette-warning-main);
+  --color-warning-light: var(--mui-palette-warning-light);
+  --color-warning-dark: var(--mui-palette-warning-dark);
+  --color-warning-contrast: var(--mui-palette-warning-contrastText);
+  --color-warning-related-light: var(--mui-palette-warning-relatedLight);
+  --color-warning-related-dark: var(--mui-palette-warning-relatedDark);
+  --color-warning-background: var(--mui-palette-warning-background);
+  --color-info: var(--mui-palette-info-main);
+  --color-info-light: var(--mui-palette-info-light);
+  --color-info-dark: var(--mui-palette-info-dark);
+  --color-info-contrast: var(--mui-palette-info-contrastText);
+  --color-info-related-light: var(--mui-palette-info-relatedLight);
+  --color-info-related-dark: var(--mui-palette-info-relatedDark);
+  --color-info-background: var(--mui-palette-info-background);
+  --color-success: var(--mui-palette-success-main);
+  --color-success-light: var(--mui-palette-success-light);
+  --color-success-dark: var(--mui-palette-success-dark);
+  --color-success-contrast: var(--mui-palette-success-contrastText);
+  --color-success-related-light: var(--mui-palette-success-relatedLight);
+  --color-success-related-dark: var(--mui-palette-success-relatedDark);
+  --color-success-background: var(--mui-palette-success-background);
+  --color-neutral: var(--mui-palette-neutral-main);
+  --color-neutral-light: var(--mui-palette-neutral-light);
+  --color-neutral-dark: var(--mui-palette-neutral-dark);
+  --color-neutral-contrast: var(--mui-palette-neutral-contrastText);
+  --color-neutral-related-light: var(--mui-palette-neutral-relatedLight);
+  --color-neutral-related-dark: var(--mui-palette-neutral-relatedDark);
+  --color-neutral-background: var(--mui-palette-neutral-background);
+  --color-default: var(--mui-palette-default-main);
+  --color-default-light: var(--mui-palette-default-light);
+  --color-default-dark: var(--mui-palette-default-dark);
+  --color-default-contrast: var(--mui-palette-default-contrastText);
+  --color-default-related-light: var(--mui-palette-default-relatedLight);
+  --color-default-related-dark: var(--mui-palette-default-relatedDark);
+  --color-default-background: var(--mui-palette-default-background);
+  --color-text-primary: var(--mui-palette-text-primary);
+  --color-text-secondary: var(--mui-palette-text-secondary);
+  --color-text-disabled: var(--mui-palette-text-disabled);
+  --color-background: var(--mui-palette-background-default);
+  --color-paper: var(--mui-palette-background-paper);
+  --color-divider: var(--mui-palette-divider);
+  --color-action-active: var(--mui-palette-action-active);
+  --color-action-hover: var(--mui-palette-action-hover);
+  --color-action-disabled-background: var(--mui-palette-action-disabledBackground);
+  --color-action-disabled: var(--mui-palette-action-disabled);
+  --color-action-selected: var(--mui-palette-action-selected);
+  --color-action-focus: var(--mui-palette-action-focus);
+  --color-common-white: var(--mui-palette-common-white);
+  --color-common-black: var(--mui-palette-common-black);
+  --color-grey-50: var(--mui-palette-grey-50);
+  --color-grey-100: var(--mui-palette-grey-100);
+  --color-grey-200: var(--mui-palette-grey-200);
+  --color-grey-300: var(--mui-palette-grey-300);
+  --color-grey-400: var(--mui-palette-grey-400);
+  --color-grey-500: var(--mui-palette-grey-500);
+  --color-grey-600: var(--mui-palette-grey-600);
+  --color-grey-700: var(--mui-palette-grey-700);
+  --color-grey-800: var(--mui-palette-grey-800);
+  --color-grey-900: var(--mui-palette-grey-900);
+  --color-grey-A100: var(--mui-palette-grey-A100);
+  --color-grey-A200: var(--mui-palette-grey-A200);
+  --color-grey-A400: var(--mui-palette-grey-A400);
+  --color-grey-A700: var(--mui-palette-grey-A700);
+  --color-brand-navy-blue: var(--mui-palette-brand-navyBlue);
+  --color-brand-location-red: var(--mui-palette-brand-locationRed);
+  --color-brand-prediction-blue: var(--mui-palette-brand-predictionBlue);
+  --color-brand-soft-blue: var(--mui-palette-brand-softBlue);
+  --color-brand-app-bar-main: var(--mui-palette-brand-appBarMain);
+  --color-brand-app-bar-contrast-text: var(--mui-palette-brand-appBarContrastText);
+  --color-white-4: var(--mui-palette-white-4);
+  --color-white-8: var(--mui-palette-white-8);
+  --color-white-12: var(--mui-palette-white-12);
+  --color-white-25: var(--mui-palette-white-25);
+  --color-white-40: var(--mui-palette-white-40);
+  --color-white-60: var(--mui-palette-white-60);
+  --color-white-90: var(--mui-palette-white-90);
+  --color-black-4: var(--mui-palette-black-4);
+  --color-black-8: var(--mui-palette-black-8);
+  --color-black-12: var(--mui-palette-black-12);
+  --color-black-25: var(--mui-palette-black-25);
+  --color-black-40: var(--mui-palette-black-40);
+  --color-black-60: var(--mui-palette-black-60);
+  --color-black-90: var(--mui-palette-black-90);
+  --color-qualitative-0: var(--mui-palette-qualitative-bold-0);
+  --color-qualitative-1: var(--mui-palette-qualitative-bold-1);
+  --color-qualitative-2: var(--mui-palette-qualitative-bold-2);
+  --color-qualitative-3: var(--mui-palette-qualitative-bold-3);
+  --color-qualitative-4: var(--mui-palette-qualitative-bold-4);
+  --color-qualitative-5: var(--mui-palette-qualitative-bold-5);
+  --color-qualitative-6: var(--mui-palette-qualitative-bold-6);
+  --color-qualitative-7: var(--mui-palette-qualitative-bold-7);
+  --color-qualitative-8: var(--mui-palette-qualitative-bold-8);
+  --color-qualitative-9: var(--mui-palette-qualitative-bold-9);
+  --color-qualitative-10: var(--mui-palette-qualitative-bold-10);
+  --color-qualitative-11: var(--mui-palette-qualitative-bold-11);
+  --shadow-1: var(--mui-shadows-1);
+  --shadow-2: var(--mui-shadows-2);
+  --shadow-3: var(--mui-shadows-3);
+  --shadow-4: var(--mui-shadows-4);
+  --shadow-5: var(--mui-shadows-5);
+  --shadow-6: var(--mui-shadows-6);
+  --shadow-7: var(--mui-shadows-7);
+  --shadow-8: var(--mui-shadows-8);
+  --shadow-9: var(--mui-shadows-9);
+  --shadow-10: var(--mui-shadows-10);
+  --shadow-11: var(--mui-shadows-11);
+  --shadow-12: var(--mui-shadows-12);
+  --shadow-13: var(--mui-shadows-13);
+  --shadow-14: var(--mui-shadows-14);
+  --shadow-15: var(--mui-shadows-15);
+  --shadow-16: var(--mui-shadows-16);
+  --shadow-17: var(--mui-shadows-17);
+  --shadow-18: var(--mui-shadows-18);
+  --shadow-19: var(--mui-shadows-19);
+  --shadow-20: var(--mui-shadows-20);
+  --shadow-21: var(--mui-shadows-21);
+  --shadow-22: var(--mui-shadows-22);
+  --shadow-23: var(--mui-shadows-23);
+  --shadow-24: var(--mui-shadows-24);
+  --radius-theme: var(--mui-shape-borderRadius);
+  --radius-theme-half: calc(var(--mui-shape-borderRadius) * 0.5);
+  --radius-theme-2: calc(var(--mui-shape-borderRadius) * 2);
+  --radius-theme-3: calc(var(--mui-shape-borderRadius) * 3);
+  --radius-theme-4: calc(var(--mui-shape-borderRadius) * 4);
+  --breakpoint-xs: 320px;
+  --breakpoint-sm: 600px;
+  --breakpoint-md: 960px;
+  --breakpoint-lg: 1280px;
+  --breakpoint-xl: 1600px;
+  --breakpoint-2xl: initial;
+}
+
+@theme {
+  --spacing: calc(var(--mui-spacing) / 2);
+}
+
+@utility typography-h1 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 3.5rem;
+  line-height: 1.167;
+  letter-spacing: -1.5px;
+  @media (min-width:600px) {
+    font-size: 4.7129rem;
+  }
+  @media (min-width:960px) {
+    font-size: 5.3556rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 6rem;
+  }
+}
+
+@utility typography-h2 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 2.375rem;
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+  @media (min-width:600px) {
+    font-size: 2.9167rem;
+  }
+  @media (min-width:960px) {
+    font-size: 3.3333rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 3.75rem;
+  }
+}
+
+@utility typography-h3 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 2rem;
+  line-height: 1.167;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 2.5707rem;
+  }
+  @media (min-width:960px) {
+    font-size: 2.7849rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 3rem;
+  }
+}
+
+@utility typography-h4 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1.25;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 1.8rem;
+  }
+  @media (min-width:960px) {
+    font-size: 1.8rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 2rem;
+  }
+}
+
+@utility typography-h5 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.167;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 1.2853rem;
+  }
+  @media (min-width:960px) {
+    font-size: 1.4996rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 1.5rem;
+  }
+}
+
+@utility typography-h6 {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 1.0625rem;
+  line-height: 1.333;
+  letter-spacing: 0;
+  @media (min-width:600px) {
+    font-size: 1.1253rem;
+  }
+  @media (min-width:960px) {
+    font-size: 1.1253rem;
+  }
+  @media (min-width:1280px) {
+    font-size: 1.125rem;
+  }
+}
+
+@utility typography-subtitle1 {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-subtitle2 {
+  font-family: Inter, sans-serif;
+  font-weight: 600;
+  font-size: 0.8125rem;
+  line-height: 1.538;
+  letter-spacing: 0;
+}
+
+@utility typography-body1 {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-body2 {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 0.8125rem;
+  line-height: 1.538;
+  letter-spacing: 0;
+}
+
+@utility typography-button {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  line-height: 1.538;
+  letter-spacing: 0;
+  text-transform: inherit;
+}
+
+@utility typography-caption {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 0.6875rem;
+  line-height: 1.454;
+  letter-spacing: 0;
+}
+
+@utility typography-overline {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 0.625rem;
+  line-height: 1.2;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+
+@utility typography-caption-medium {
+  font-family: Inter, sans-serif;
+  font-weight: 500;
+  font-size: 0.6875rem;
+  line-height: 1.454;
+  letter-spacing: 0;
+}
+
+@utility typography-overline-delicate {
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 0.625rem;
+  line-height: 1.2;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+}
+
+@utility typography-code1 {
+  font-family: "Overpass Mono", monospace;
+  font-weight: 400;
+  font-size: 1rem;
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-code2 {
+  font-family: "Overpass Mono", monospace;
+  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.428;
+  letter-spacing: 0;
+}
+
+@utility typography-code3 {
+  font-family: "Overpass Mono", monospace;
+  font-weight: 400;
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0;
+}

package/dist/theme.js

@@ -0,0 +1,123 @@
+import { createTheme as e, responsiveFontSizes as t } from "@mui/material";
+import { cartoThemeOptions as n } from "@carto/meridian-ds/theme";
+//#region src/theme/deep-merge.ts
+function r(e) {
+	if (typeof e != "object" || !e) return !1;
+	let t = Object.getPrototypeOf(e);
+	return t === Object.prototype || t === null;
+}
+function i(e, t) {
+	if (!r(e) || !r(t)) return t === void 0 ? e : t;
+	let n = { ...e };
+	for (let [r, a] of Object.entries(t)) a !== void 0 && (n[r] = i(e[r], a));
+	return n;
+}
+//#endregion
+//#region src/theme/create-carto-theme.ts
+function a(r) {
+	let a = i({
+		...n,
+		cssVariables: !0
+	}, r);
+	return t(e(a));
+}
+//#endregion
+//#region src/theme/generate-tailwind-css.ts
+var o = [
+	"primary",
+	"secondary",
+	"tertiary",
+	"error",
+	"warning",
+	"info",
+	"success",
+	"neutral",
+	"default"
+], s = {
+	main: "",
+	light: "-light",
+	dark: "-dark",
+	contrastText: "-contrast",
+	relatedLight: "-related-light",
+	relatedDark: "-related-dark",
+	background: "-background"
+}, c = "/*\n * Generated by generateTailwindCss() from @carto/ps-react-ui/theme.\n * Do not edit by hand: regenerate it whenever the theme changes.\n *\n * Import after `tailwindcss`. Declare the cascade layer order yourself first:\n * theme, base, mui, components, utilities (in that order).\n */";
+function l(e) {
+	return e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function u(e) {
+	return !e || typeof e != "object" ? [] : Object.keys(e).filter((t) => typeof e[t] == "string");
+}
+function d(e) {
+	let t = e.palette, n = (e) => `var(--mui-palette-${e})`, r = [];
+	for (let e of o) {
+		let i = t[e];
+		for (let [t, a] of Object.entries(s)) typeof i?.[t] == "string" && r.push(`--color-${e}${a}: ${n(`${e}-${t}`)};`);
+	}
+	for (let e of [
+		"primary",
+		"secondary",
+		"disabled"
+	]) typeof t.text?.[e] == "string" && r.push(`--color-text-${e}: ${n(`text-${e}`)};`);
+	r.push(`--color-background: ${n("background-default")};`), r.push(`--color-paper: ${n("background-paper")};`), r.push(`--color-divider: ${n("divider")};`);
+	for (let e of u(t.action).filter((e) => !e.endsWith("Channel"))) r.push(`--color-action-${l(e)}: ${n(`action-${e}`)};`);
+	for (let e of ["white", "black"]) r.push(`--color-common-${e}: ${n(`common-${e}`)};`);
+	for (let e of u(t.grey)) r.push(`--color-grey-${e}: ${n(`grey-${e}`)};`);
+	for (let e of u(t.brand)) r.push(`--color-brand-${l(e)}: ${n(`brand-${e}`)};`);
+	for (let e of ["white", "black"]) for (let i of u(t[e])) r.push(`--color-${e}-${i}: ${n(`${e}-${i}`)};`);
+	let i = t.qualitative?.bold;
+	for (let e of u(i)) r.push(`--color-qualitative-${e}: ${n(`qualitative-bold-${e}`)};`);
+	return r;
+}
+var f = [
+	["half", .5],
+	["2", 2],
+	["3", 3],
+	["4", 4]
+];
+function p(e) {
+	return `@theme inline {\n${[
+		...d(e),
+		...e.shadows.map((e, t) => `--shadow-${t}: var(--mui-shadows-${t});`).slice(1),
+		"--radius-theme: var(--mui-shape-borderRadius);",
+		...f.map(([e, t]) => `--radius-theme-${e}: calc(var(--mui-shape-borderRadius) * ${t});`),
+		...Object.entries(e.breakpoints.values).map(([e, t]) => `--breakpoint-${e}: ${t}px;`),
+		"--breakpoint-2xl: initial;"
+	].map((e) => `  ${e}`).join("\n")}\n}`;
+}
+var m = "@theme {\n  --spacing: calc(var(--mui-spacing) / 2);\n}";
+function h(e, t) {
+	return typeof t == "number" && (e === "font-size" || e === "letter-spacing") ? t === 0 ? "0" : `${t}px` : String(t);
+}
+var g = [
+	["fontFamily", "font-family"],
+	["fontWeight", "font-weight"],
+	["fontSize", "font-size"],
+	["lineHeight", "line-height"],
+	["letterSpacing", "letter-spacing"],
+	["textTransform", "text-transform"]
+];
+function _(e) {
+	let t = e.typography;
+	return Object.entries(t).filter(([e, t]) => e !== "inherit" && !!t && typeof t == "object" && "fontSize" in t).map(([e, t]) => {
+		let n = t, r = g.filter(([e]) => n[e] !== void 0).map(([e, t]) => `  ${t}: ${h(t, n[e])};`);
+		for (let [e, t] of Object.entries(n)) {
+			if (!e.startsWith("@media") || !t || typeof t != "object") continue;
+			let n = t.fontSize;
+			n !== void 0 && r.push(`  ${e} {\n    font-size: ${h("font-size", n)};\n  }`);
+		}
+		return `@utility typography-${l(e)} {\n${r.join("\n")}\n}`;
+	});
+}
+function v(e) {
+	return [
+		c,
+		p(e),
+		m,
+		..._(e)
+	].join("\n\n") + "\n";
+}
+//#endregion
+export { a as createCartoTheme, v as generateTailwindCss };
+
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":["isPlainObject","value","proto","deepMerge","base","override","out","key","createCartoTheme","options","cartoThemeOptions","overrides","responsiveFontSizes","createTheme","PALETTE_COLORS","COLOR_KEYS","HEADER","kebab","stringKeys","obj","k","colorLines","palette","theme","v","path","lines","name","color","suffix","shade","bold","RADIUS_MULTIPLES","themeBlock","n","px","l","SPACING_BLOCK","cssValue","prop","TYPOGRAPHY_PROPS","typographyUtilities","typography","style","s","body","query","rule","size","generateTailwindCss"],"sources":["../src/theme/deep-merge.ts","../src/theme/create-carto-theme.ts","../src/theme/generate-tailwind-css.ts"],"sourcesContent":["function isPlainObject(value: unknown): value is Record<string, unknown> {\n  if (value === null || typeof value !== 'object') return false\n  const proto = Object.getPrototypeOf(value) as unknown\n  return proto === Object.prototype || proto === null\n}\n\n/**\n * Deep-merges `override` into a copy of `base`. Plain objects merge key by\n * key; arrays, functions and other values replace. `undefined` in the\n * override keeps the base value. Inputs are not mutated.\n */\nexport function deepMerge<T>(base: T, override: unknown): T {\n  if (!isPlainObject(base) || !isPlainObject(override)) {\n    return (override === undefined ? base : override) as T\n  }\n  const out: Record<string, unknown> = { ...base }\n  for (const [key, value] of Object.entries(override)) {\n    if (value === undefined) continue\n    out[key] = deepMerge(base[key], value)\n  }\n  return out as T\n}\n","import {\n  createTheme,\n  responsiveFontSizes,\n  type Theme,\n  type ThemeOptions,\n} from '@mui/material'\nimport { cartoThemeOptions } from '@carto/meridian-ds/theme'\nimport { deepMerge } from './deep-merge'\n\n/**\n * The CARTO theme with MUI CSS variables enabled, so CSS (Tailwind's\n * `@theme inline`, plain stylesheets) can read `var(--mui-*)`. Same tokens\n * and responsive font sizes as meridian's `theme`.\n */\nexport function createCartoTheme(overrides?: ThemeOptions): Theme {\n  const options = deepMerge<ThemeOptions>(\n    { ...cartoThemeOptions, cssVariables: true },\n    overrides,\n  )\n  return responsiveFontSizes(createTheme(options))\n}\n","import type { Theme } from '@mui/material'\n\nconst PALETTE_COLORS = [\n  'primary',\n  'secondary',\n  'tertiary',\n  'error',\n  'warning',\n  'info',\n  'success',\n  'neutral',\n  'default',\n] as const\n\nconst COLOR_KEYS: Record<string, string> = {\n  main: '',\n  light: '-light',\n  dark: '-dark',\n  contrastText: '-contrast',\n  relatedLight: '-related-light',\n  relatedDark: '-related-dark',\n  background: '-background',\n}\n\nconst HEADER = `/*\n * Generated by generateTailwindCss() from @carto/ps-react-ui/theme.\n * Do not edit by hand: regenerate it whenever the theme changes.\n *\n * Import after \\`tailwindcss\\`. Declare the cascade layer order yourself first:\n * theme, base, mui, components, utilities (in that order).\n */`\n\ntype Dict = Record<string, unknown>\n\n/** `navyBlue` → `navy-blue`, `captionMedium` → `caption-medium`, `code1` → `code1`. */\nfunction kebab(key: string): string {\n  return key.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()\n}\n\nfunction stringKeys(obj: unknown): string[] {\n  if (!obj || typeof obj !== 'object') return []\n  return Object.keys(obj).filter((k) => typeof (obj as Dict)[k] === 'string')\n}\n\nfunction colorLines(theme: Theme): string[] {\n  const palette = theme.palette as unknown as Dict\n  const v = (path: string) => `var(--mui-palette-${path})`\n  const lines: string[] = []\n\n  for (const name of PALETTE_COLORS) {\n    const color = palette[name] as Dict | undefined\n    for (const [key, suffix] of Object.entries(COLOR_KEYS)) {\n      if (typeof color?.[key] === 'string')\n        lines.push(`--color-${name}${suffix}: ${v(`${name}-${key}`)};`)\n    }\n  }\n  for (const key of ['primary', 'secondary', 'disabled']) {\n    if (typeof (palette.text as Dict | undefined)?.[key] === 'string')\n      lines.push(`--color-text-${key}: ${v(`text-${key}`)};`)\n  }\n  lines.push(`--color-background: ${v('background-default')};`)\n  lines.push(`--color-paper: ${v('background-paper')};`)\n  lines.push(`--color-divider: ${v('divider')};`)\n  // `*Channel` keys are bare RGB triplets for `rgba()`, not colours.\n  for (const key of stringKeys(palette.action).filter(\n    (k) => !k.endsWith('Channel'),\n  ))\n    lines.push(`--color-action-${kebab(key)}: ${v(`action-${key}`)};`)\n  for (const key of ['white', 'black'])\n    lines.push(`--color-common-${key}: ${v(`common-${key}`)};`)\n  for (const key of stringKeys(palette.grey))\n    lines.push(`--color-grey-${key}: ${v(`grey-${key}`)};`)\n  for (const key of stringKeys(palette.brand))\n    lines.push(`--color-brand-${kebab(key)}: ${v(`brand-${key}`)};`)\n  for (const shade of ['white', 'black']) {\n    for (const key of stringKeys(palette[shade]))\n      lines.push(`--color-${shade}-${key}: ${v(`${shade}-${key}`)};`)\n  }\n  const bold = (palette.qualitative as Dict | undefined)?.bold\n  for (const key of stringKeys(bold))\n    lines.push(`--color-qualitative-${key}: ${v(`qualitative-bold-${key}`)};`)\n  return lines\n}\n\n// `rounded-theme-2` is `theme.shape.borderRadius * 2`, as in sx.\nconst RADIUS_MULTIPLES: [string, number][] = [\n  ['half', 0.5],\n  ['2', 2],\n  ['3', 3],\n  ['4', 4],\n]\n\nfunction themeBlock(theme: Theme): string {\n  const lines = [\n    ...colorLines(theme),\n    ...theme.shadows\n      .map((_, n) => `--shadow-${n}: var(--mui-shadows-${n});`)\n      .slice(1),\n    '--radius-theme: var(--mui-shape-borderRadius);',\n    ...RADIUS_MULTIPLES.map(\n      ([key, n]) =>\n        `--radius-theme-${key}: calc(var(--mui-shape-borderRadius) * ${n});`,\n    ),\n    ...Object.entries(theme.breakpoints.values).map(\n      ([key, px]) => `--breakpoint-${key}: ${px}px;`,\n    ),\n    '--breakpoint-2xl: initial;',\n  ]\n  return `@theme inline {\\n${lines.map((l) => `  ${l}`).join('\\n')}\\n}`\n}\n\n// Not inline: utilities keep `calc(var(--spacing) * n)`, and `--spacing`\n// follows the theme, so `p-2` is `theme.spacing(1)` (8px by default) even\n// when an app overrides `spacing`.\nconst SPACING_BLOCK = `@theme {\\n  --spacing: calc(var(--mui-spacing) / 2);\\n}`\n\nfunction cssValue(prop: string, value: unknown): string {\n  if (\n    typeof value === 'number' &&\n    (prop === 'font-size' || prop === 'letter-spacing')\n  )\n    return value === 0 ? '0' : `${value}px`\n  return String(value)\n}\n\nconst TYPOGRAPHY_PROPS: [string, string][] = [\n  ['fontFamily', 'font-family'],\n  ['fontWeight', 'font-weight'],\n  ['fontSize', 'font-size'],\n  ['lineHeight', 'line-height'],\n  ['letterSpacing', 'letter-spacing'],\n  ['textTransform', 'text-transform'],\n]\n\nfunction typographyUtilities(theme: Theme): string[] {\n  const typography = theme.typography as unknown as Dict\n  return Object.entries(typography)\n    .filter(\n      ([name, style]) =>\n        name !== 'inherit' &&\n        !!style &&\n        typeof style === 'object' &&\n        'fontSize' in style,\n    )\n    .map(([name, style]) => {\n      const s = style as Dict\n      const body = TYPOGRAPHY_PROPS.filter(([key]) => s[key] !== undefined).map(\n        ([key, prop]) => `  ${prop}: ${cssValue(prop, s[key])};`,\n      )\n      for (const [query, rule] of Object.entries(s)) {\n        if (!query.startsWith('@media') || !rule || typeof rule !== 'object')\n          continue\n        const size = (rule as Dict).fontSize\n        if (size !== undefined)\n          body.push(\n            `  ${query} {\\n    font-size: ${cssValue('font-size', size)};\\n  }`,\n          )\n      }\n      return `@utility typography-${kebab(name)} {\\n${body.join('\\n')}\\n}`\n    })\n}\n\n/**\n * Tailwind v4 source CSS for the CARTO theme: colours, shadows and radius\n * read the runtime MUI variables; breakpoints and typography are literals\n * because `@media` cannot read variables and MUI's font variables are not\n * responsive.\n */\nexport function generateTailwindCss(theme: Theme): string {\n  return (\n    [\n      HEADER,\n      themeBlock(theme),\n      SPACING_BLOCK,\n      ...typographyUtilities(theme),\n    ].join('\\n\\n') + '\\n'\n  )\n}\n"],"mappings":"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"}

package/dist/types/components/lasso-tool/styles.d.ts

@@ -14,7 +14,7 @@ export declare const styles: {
         justifyContent: "flex-start";
         overflow: "hidden";
         width: string;
-        '&.inline': {
+        '&.PsLassoTools-inline': {
             flexDirection: "column";
             alignItems: "flex-start";
             gap: ({ spacing }: Theme) => string;
@@ -46,7 +46,7 @@ export declare const styles: {
                 maxHeight: string;
             };
             paddingY: ({ spacing }: Theme) => string;
-            '&.inline': {
+            '&.PsLassoTools-inline': {
                 boxShadow: "none";
                 backgroundColor: "transparent";
                 borderRadius: ({ spacing }: Theme) => string;
@@ -109,7 +109,7 @@ export declare const styles: {
         title: {
             paddingX: ({ spacing }: Theme) => string;
             paddingBottom: ({ spacing }: Theme) => string;
-            '&.inline': {
+            '&.PsLassoTools-inline': {
                 paddingX: number;
                 paddingBottom: number;
             };
@@ -138,7 +138,7 @@ export declare const styles: {
             overflowX: "auto";
             scrollbarWidth: "none";
             paddingX: ({ spacing }: Theme) => string;
-            '&.inline': {
+            '&.PsLassoTools-inline': {
                 overflowX: "visible";
                 flexWrap: "wrap";
             };

package/dist/types/theme/create-carto-theme.d.ts

@@ -0,0 +1,7 @@
+import { Theme, ThemeOptions } from '@mui/material';
+/**
+ * The CARTO theme with MUI CSS variables enabled, so CSS (Tailwind's
+ * `@theme inline`, plain stylesheets) can read `var(--mui-*)`. Same tokens
+ * and responsive font sizes as meridian's `theme`.
+ */
+export declare function createCartoTheme(overrides?: ThemeOptions): Theme;

package/dist/types/theme/deep-merge.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Deep-merges `override` into a copy of `base`. Plain objects merge key by
+ * key; arrays, functions and other values replace. `undefined` in the
+ * override keeps the base value. Inputs are not mutated.
+ */
+export declare function deepMerge<T>(base: T, override: unknown): T;

package/dist/types/theme/generate-tailwind-css.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '@mui/material';
+/**
+ * Tailwind v4 source CSS for the CARTO theme: colours, shadows and radius
+ * read the runtime MUI variables; breakpoints and typography are literals
+ * because `@media` cannot read variables and MUI's font variables are not
+ * responsive.
+ */
+export declare function generateTailwindCss(theme: Theme): string;

package/dist/types/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { createCartoTheme } from './create-carto-theme.js';
+export { generateTailwindCss } from './generate-tailwind-css.js';

package/dist/types/widgets/actions/index.d.ts

@@ -3,7 +3,7 @@ export { StackToggle, addStack, DEFAULT_STACK_TOGGLE_LABELS, type StackTogglePro
 export { ShowAllToggle, setShowAll, SHOW_ALL_ID, DEFAULT_SHOW_ALL_LABELS, type ShowAllToggleProps, type ShowAllLabels, } from './show-all/index.js';
 export { ZoomToggle, addZoom, createAddZoom, ZOOM_LAYOUT, DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleProps, type ZoomToggleLabels, } from './zoom-toggle/index.js';
 export { BrushToggle, addBrush, DEFAULT_BRUSH_TOGGLE_LABELS, type BrushToggleProps, type BrushToggleLabels, } from './brush-toggle/index.js';
-export { RelativeData, toRelativeData, createPercentFormatter, DEFAULT_RELATIVE_DATA_LABELS, type RelativeDataProps, type RelativeDataLabels, } from './relative-data/index.js';
+export { RelativeData, toRelativeData, createPercentFormatter, DEFAULT_RELATIVE_DATA_LABELS, type RelativeDataProps, type RelativeDataLabels, type RelativeScale, } from './relative-data/index.js';
 export { Download, downloadToCSV, downloadDOMToPNG, toCsvString, triggerLinkDownload, buildPngDownloadItem, buildCsvDownloadItem, withPngItem, CSVIcon, PNGIcon, MarkdownIcon, DEFAULT_DOWNLOAD_LABELS, DOWNLOAD_ITEM_IDS, type DownloadProps, type DownloadItem, type DownloadContext, type DownloadItemId, type DownloadHandle, type DownloadDOMToPNGOptions, type BuildPngDownloadItemArgs, type BuildCsvDownloadItemArgs, type WidgetDownloadArgs, type DownloadLabels, } from './download/index.js';
 export { FullScreen, DEFAULT_FULLSCREEN_LABELS, type FullScreenTriggerProps, type FullScreenSlotProps, type FullScreenLabels, type FullScreenWidgetState, } from './fullscreen/index.js';
 export { LockSelection, filterByLockedItems, DEFAULT_LOCK_SELECTION_LABELS, type LockSelectionProps, type LockSelectionKey, type LockSelectionLabels, } from './lock-selection/index.js';

package/dist/types/widgets/actions/relative-data/index.d.ts

@@ -1,3 +1,4 @@
 export { RelativeData, type RelativeDataProps } from './relative-data.js';
 export { toRelativeData, createPercentFormatter } from './transforms.js';
+export type { RelativeScale } from './scale.js';
 export { DEFAULT_RELATIVE_DATA_LABELS, type RelativeDataLabels } from './labels.js';

package/dist/types/widgets/actions/relative-data/labels.d.ts

@@ -1,5 +1,8 @@
 export interface RelativeDataLabels {
     on: string;
     off: string;
+    scaleMenu: string;
+    scaleMax: string;
+    scaleTotal: string;
 }
 export declare const DEFAULT_RELATIVE_DATA_LABELS: RelativeDataLabels;

package/dist/types/widgets/actions/relative-data/relative-data.d.ts

@@ -1,8 +1,16 @@
 import { ComponentType } from 'react';
 import { SvgIconProps } from '@mui/material';
+import { RelativeScale } from './scale.js';
 import { RelativeDataLabels } from './labels.js';
 export interface RelativeDataProps {
     initialEnabled?: boolean;
+    /**
+     * Initial bar scale: `'max'` (the largest item fills its bar) or
+     * `'total'` (bars end at 100%). Values are the share of the total
+     * either way. Only seeds the store — the menu, or a write to
+     * `transformStates['relative-data'].scale`, changes it afterwards.
+     */
+    scale?: RelativeScale;
     /**
      * BCP-47 locale tag forwarded to `Intl.NumberFormat`. Defaults to the
      * runtime locale.
@@ -25,7 +33,8 @@ export interface RelativeDataProps {
     transform?: (data: unknown) => unknown;
 }
 /**
- * Toggle between absolute and relative (percentage) values.
+ * Toggle between absolute and relative (percentage) values, as a split
+ * button: the toggle plus an arrow that opens the scale menu.
  *
  *   - **Data side**: a single data transform ({@link toRelativeData}) registered
  *     through `useSingleTransform`. When disabled, the pipeline skips it and the
@@ -35,5 +44,10 @@ export interface RelativeDataProps {
  *     reads `state.rawFormatter` (the consumer-supplied original, always live)
  *     and writes it back to `formatter`. No "original" snapshot is captured —
  *     `rawFormatter` is the original.
+ *   - **Scale**: lives in `transformStates['relative-data'].scale` next to
+ *     `enabled`, so duplicate mounts (Toolbox inline + overflow) and
+ *     `keepAlive` remounts agree on it. It never changes the values; under
+ *     `'total'` a config transform pins the ECharts value axis to 100%, and
+ *     Category reads it through `selectRelativeScale`.
  */
-export declare function RelativeData({ initialEnabled, locale, labels, icon: Icon, iconProps, transform, }: RelativeDataProps): import('react').JSX.Element;
+export declare function RelativeData({ initialEnabled, scale: initialScale, locale, labels, icon: Icon, iconProps, transform, }: RelativeDataProps): import('react').JSX.Element;