@keboola/design 3.0.0 → 3.1.1

package/dist/mermaid.cjs

@@ -7,7 +7,9 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var reactTooltip = require('@radix-ui/react-tooltip');
 var classVarianceAuthority = require('class-variance-authority');
+var brandRegistry = require('@keboola/brand-registry');
 var jsxRuntime = require('react/jsx-runtime');
+var DOMPurify = require('dompurify');
 var reactSlot = require('@radix-ui/react-slot');
 var lucide_react_star = require('lucide-react');
 
@@ -32,6 +34,7 @@ function _interopNamespace(e) {
 }
 
 var colors__default = /*#__PURE__*/_interopDefault(colors);
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 var lucide_react_star__namespace = /*#__PURE__*/_interopNamespace(lucide_react_star);
 
 var __defProp = Object.defineProperty;
@@ -66,17 +69,49 @@ var keyCodes = {
   ENTER: "Enter",
   SPACE: " "
 };
+var ThemeContext = react.createContext(null);
+
+// src/components/internal/useIsLegacyBrand.ts
+var useIsLegacyBrand = () => {
+  const context = react.use(ThemeContext);
+  return context === null || context.brand.id === brandRegistry.keboolaLegacy.id;
+};
 var tooltipVariants = classVarianceAuthority.cva(
   [
     "tailwindcss-preflight",
     "tw-inline-block",
-    "tw-rounded",
-    "tw-bg-neutral-800",
-    "tw-text-white",
     "tw-break-anywhere",
     "tw-max-h-96",
     "tw-overflow-y-auto",
-    "tw-z-[1060]"
+    "tw-z-[1060]",
+    // legacy (dark) chrome — default
+    "tw-rounded",
+    "tw-bg-neutral-800",
+    "tw-text-white",
+    // argo chrome overrides — semantic floating-panel tokens
+    "data-[argo=true]:tw-rounded-2xl",
+    "data-[argo=true]:tw-border",
+    "data-[argo=true]:tw-border-solid",
+    "data-[argo=true]:tw-border-border",
+    "data-[argo=true]:tw-bg-popover",
+    "data-[argo=true]:tw-text-popover-foreground",
+    "data-[argo=true]:tw-shadow-md",
+    // argo open animation
+    "data-[argo=true]:data-[state=delayed-open]:tw-animate-in",
+    "data-[argo=true]:data-[state=instant-open]:tw-animate-in",
+    "data-[argo=true]:data-[state=delayed-open]:tw-fade-in-0",
+    "data-[argo=true]:data-[state=instant-open]:tw-fade-in-0",
+    "data-[argo=true]:data-[state=delayed-open]:tw-zoom-in-95",
+    "data-[argo=true]:data-[state=instant-open]:tw-zoom-in-95",
+    // argo closed animation
+    "data-[argo=true]:data-[state=closed]:tw-animate-out",
+    "data-[argo=true]:data-[state=closed]:tw-fade-out-0",
+    "data-[argo=true]:data-[state=closed]:tw-zoom-out-95",
+    // argo position animation
+    "data-[argo=true]:data-[side=bottom]:tw-slide-in-from-top-2",
+    "data-[argo=true]:data-[side=left]:tw-slide-in-from-right-2",
+    "data-[argo=true]:data-[side=right]:tw-slide-in-from-left-2",
+    "data-[argo=true]:data-[side=top]:tw-slide-in-from-bottom-2"
   ],
   {
     defaultVariants: {
@@ -109,6 +144,7 @@ var tooltipVariants = classVarianceAuthority.cva(
 var TooltipContent = ({
   className,
   variant,
+  argo,
   keepOpenOnPointerDownOutside = false,
   children,
   onPointerDownOutside,
@@ -118,6 +154,8 @@ var TooltipContent = ({
   placement = "right",
   ...rest
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo === true;
   const handlePointerDownOutside = (event) => {
     if (keepOpenOnPointerDownOutside) event.preventDefault();
     onPointerDownOutside?.(event);
@@ -126,7 +164,8 @@ var TooltipContent = ({
     reactTooltip.Content,
     {
       ...rest,
-      "data-tooltip-content": true,
+      "data-tooltip-content": renderArgo ? void 0 : true,
+      "data-argo": renderArgo,
       sideOffset,
       collisionPadding,
       onPointerDownOutside: handlePointerDownOutside,
@@ -185,6 +224,7 @@ var Tooltip = ({
   className,
   keepOpenOnTriggerClick = false,
   variant,
+  argo,
   placement = "right",
   forceHide = false,
   forceShow = false,
@@ -223,6 +263,7 @@ var Tooltip = ({
           {
             className,
             variant: resolvedVariant,
+            argo,
             placement,
             keepOpenOnPointerDownOutside: keepOpenOnTriggerClick,
             children: tooltip
@@ -249,7 +290,7 @@ var ANIMATION_CLASS_NAME = cn(
   "tw-relative",
   "tw-overflow-hidden",
   "tw-pointer-events-none",
-  "tw-bg-neutral-150",
+  "tw-bg-muted",
   // before
   'before:tw-content-[""]',
   "before:tw-opacity-100",
@@ -488,6 +529,8 @@ var argoVariants = classVarianceAuthority.cva(
     "tw-bg-clip-padding",
     // anchor support
     "!tw-no-underline",
+    "aria-disabled:tw-cursor-not-allowed",
+    "aria-disabled:tw-opacity-50",
     // icon
     "tw-shrink-0",
     "[&_svg]:tw-pointer-events-none",
@@ -590,14 +633,11 @@ var Button = ({
   block = false,
   ...buttonProps
 }) => {
+  const isLegacy = useIsLegacyBrand();
+  const renderArgo = !isLegacy || argo;
   const Comp = asChild ? reactSlot.Root : "button";
   const isIconOnly = String(size).startsWith("icon");
-  const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
-    size,
-    variant,
-    block,
-    className
-  });
+  const classNames = renderArgo ? argoVariants({ variant, size, block, className }) : variants({ size, variant, block, className });
   const handleClick = (event) => {
     const isAnchor = event.currentTarget.tagName === "A";
     if (isAnchor && disabled) {
@@ -718,6 +758,10 @@ var MIN_SCALE = 0.5;
 var MAX_SCALE = 3;
 var ZOOM_STEP = 0.1;
 var ZoomableSvg = ({ html, copyText, className }) => {
+  const safeHtml = react.useMemo(
+    () => DOMPurify__default.default.sanitize(html, { USE_PROFILES: { svg: true, svgFilters: true } }),
+    [html]
+  );
   const containerRef = react.useRef(null);
   const [scale, setScale] = react.useState(1);
   const [translate, setTranslate] = react.useState({ x: 0, y: 0 });
@@ -813,7 +857,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
                   isFullscreen && "tw-h-full [&>svg]:tw-h-full"
                 ),
                 style: { transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})` },
-                dangerouslySetInnerHTML: { __html: html }
+                dangerouslySetInnerHTML: { __html: safeHtml }
               }
             )
           }
@@ -866,7 +910,7 @@ var ZoomableSvg = ({ html, copyText, className }) => {
       "div",
       {
         role: "presentation",
-        className: "tw-fixed tw-inset-0 tw-z-[1060] tw-bg-neutral-50 tw-p-4",
+        className: "tw-fixed tw-inset-0 tw-z-[1060] tw-bg-muted tw-p-4",
         onClick: stopPropagation,
         children: diagramContent
       }
@@ -876,13 +920,18 @@ var ZoomableSvg = ({ html, copyText, className }) => {
     "div",
     {
       className: cn(
-        "tw-overflow-hidden tw-rounded-md tw-border tw-border-neutral-150 tw-bg-neutral-50",
+        "tw-overflow-hidden tw-rounded-md tw-border tw-border-border tw-bg-muted",
         className
       ),
       children: diagramContent
     }
   );
 };
+var PRIMARY_FALLBACK_CHANNELS = "31 143 255";
+var resolvePrimary = () => {
+  const channels = typeof document === "undefined" ? PRIMARY_FALLBACK_CHANNELS : getComputedStyle(document.documentElement).getPropertyValue("--color-primary").trim() || PRIMARY_FALLBACK_CHANNELS;
+  return `rgb(${channels})`;
+};
 var mermaidPromise = null;
 var getMermaid = () => {
   if (!mermaidPromise) {
@@ -931,7 +980,7 @@ var getMermaid = () => {
           taskTextColor: colors__default.default.neutral[800],
           taskTextDarkColor: colors__default.default.neutral[800],
           taskTextLightColor: colors__default.default.neutral[800],
-          activeTaskBorderColor: colors__default.default.primary.DEFAULT,
+          activeTaskBorderColor: resolvePrimary(),
           activeTaskBkgColor: colors__default.default.secondary[200],
           doneTaskBorderColor: colors__default.default.primary[600],
           doneTaskBkgColor: colors__default.default.primary[100],
@@ -983,46 +1032,28 @@ var makeResponsive = (svgString) => {
 };
 var RENDER_DEBOUNCE_MS = 300;
 var svgCache = /* @__PURE__ */ new Map();
+var resolveSyncSvg = (code) => {
+  const cached = svgCache.get(code);
+  if (cached) return cached;
+  const fast = tryFastRender(code);
+  if (fast) svgCache.set(code, fast);
+  return fast;
+};
 var MermaidDiagram = ({ code }) => {
   const id = react.useId();
-  const [svg, setSvg] = react.useState(() => {
-    const cached = svgCache.get(code);
-    if (cached) return cached;
-    const fast = tryFastRender(code);
-    if (fast) {
-      svgCache.set(code, fast);
-      return fast;
-    }
-    return null;
-  });
+  const [svg, setSvg] = react.useState(() => resolveSyncSvg(code));
   const [renderFailed, setRenderFailed] = react.useState(false);
   const debounceRef = react.useRef(null);
   const renderIdRef = react.useRef(0);
   const [prevCode, setPrevCode] = react.useState(code);
   if (code !== prevCode) {
     setPrevCode(code);
-    const cached = svgCache.get(code);
-    const fast = cached ?? tryFastRender(code);
-    if (fast && !cached) svgCache.set(code, fast);
-    setSvg(fast);
+    setSvg(resolveSyncSvg(code));
     setRenderFailed(false);
   }
   react.useEffect(() => {
-    if (svgCache.has(code)) {
-      setSvg(svgCache.get(code));
-      setRenderFailed(false);
-      return;
-    }
-    const fastResult = tryFastRender(code);
-    if (fastResult) {
-      svgCache.set(code, fastResult);
-      setSvg(fastResult);
-      setRenderFailed(false);
-      return;
-    }
-    setSvg(null);
+    if (svgCache.has(code)) return;
     const currentRenderId = ++renderIdRef.current;
-    setRenderFailed(false);
     if (debounceRef.current) {
       clearTimeout(debounceRef.current);
     }