@keboola/design 2.0.0 → 2.1.0

package/dist/markdown-editor.cjs

@@ -7,10 +7,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var lucideReact = require('lucide-react');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-require('@awesome.me/kit-be8bcf7e5e/icons');
 var reactSlot = require('@radix-ui/react-slot');
-var design = require('@keboola/design');
 var beautifulMermaid = require('beautiful-mermaid');
 var colors = require('@keboola/tailwind-config/colors');
 var code = require('@lexical/code');
@@ -35,12 +32,12 @@ var richText = require('@lexical/rich-text');
 var lexical = require('lexical');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var sonner = require('sonner');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
 var reactDom = require('react-dom');
 var utils = require('@lexical/utils');
 var DropdownMenuPrimitive3 = require('@radix-ui/react-dropdown-menu');
 var ScrollAreaPrimitive2 = require('@radix-ui/react-scroll-area');
 var TextareaAutosize = require('react-textarea-autosize');
-var icons = require('@keboola/design/icons');
 var RLabel = require('@radix-ui/react-label');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -247,7 +244,7 @@ var init_TooltipTrigger = __esm({
         if (keepOpenOnClick) event.preventDefault();
         onClick?.(event);
       };
-      const handePointerDown = (event) => {
+      const handlePointerDown = (event) => {
         if (keepOpenOnClick) event.preventDefault();
         onPointerDown?.(event);
       };
@@ -259,8 +256,16 @@ var init_TooltipTrigger = __esm({
           ref,
           className: cn("tailwindcss-preflight", className),
           onClick: handleClick,
-          onPointerDown: handePointerDown,
-          children: asChild ? children : /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+          onPointerDown: handlePointerDown,
+          children: asChild ? children : (
+            // Default-mode trigger wraps children in a span so Radix has a
+            // single DOM element to attach handlers to. `tailwindcss-preflight`
+            // (merged in via Slot) activates Tailwind's preflight inside the
+            // span, which sets `svg { display: block }` — without an inline-flex
+            // container that would stack any bare Lucide icon onto its own
+            // line. `tw-inline-flex tw-items-center` keeps icon + text aligned.
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tw-inline-flex tw-items-center", children })
+          )
         }
       );
     };
@@ -476,17 +481,6 @@ var init_icons = __esm({
   "src/icons/index.ts"() {
   }
 });
-var Icon;
-var init_Icon = __esm({
-  "src/components/Icon/Icon.tsx"() {
-    Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { ...rest, ref, icon });
-  }
-});
-var init_Icon2 = __esm({
-  "src/components/Icon/index.ts"() {
-    init_Icon();
-  }
-});
 var variants, argoVariants;
 var init_styles = __esm({
   "src/components/Button/styles.ts"() {
@@ -613,15 +607,38 @@ var init_styles = __esm({
             ]
           },
           size: {
-            medium: ["tw-max-h-10", "tw-min-h-10", "tw-px-4", "tw-py-2.5", "[&_svg]:tw-size-4"],
-            small: ["tw-max-h-8", "tw-min-h-8", "tw-px-4", "tw-py-1.5", "[&_svg]:tw-size-4"],
-            large: ["tw-max-h-12", "tw-min-h-12", "tw-px-4", "tw-py-3.5", "[&_svg]:tw-size-4"],
-            "icon-lg": ["tw-size-12", "tw-p-0", "[&_svg]:tw-size-6"],
-            icon: ["tw-size-10", "tw-p-0", "[&_svg]:tw-size-4"],
-            "icon-sm": ["tw-size-8", "tw-p-0", "[&_svg]:tw-size-4"],
-            "icon-xs": ["tw-size-6", "tw-p-0", "[&_svg]:tw-size-4"],
-            "icon-2xs": ["!tw-inline-flex", "tw-size-5", "tw-max-h-5", "[&_svg]:tw-size-3"],
-            "icon-3xs": ["tw-h-fit", "tw-w-fit", "[&_svg]:tw-size-4"]
+            medium: [
+              "tw-max-h-10",
+              "tw-min-h-10",
+              "tw-px-4",
+              "tw-py-2.5",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+            ],
+            small: [
+              "tw-max-h-8",
+              "tw-min-h-8",
+              "tw-px-4",
+              "tw-py-1.5",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+            ],
+            large: [
+              "tw-max-h-12",
+              "tw-min-h-12",
+              "tw-px-4",
+              "tw-py-3.5",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-4'
+            ],
+            "icon-lg": ["tw-size-12", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
+            icon: ["tw-size-10", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+            "icon-sm": ["tw-size-8", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+            "icon-xs": ["tw-size-6", "tw-p-0", '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+            "icon-2xs": [
+              "!tw-inline-flex",
+              "tw-size-5",
+              "tw-max-h-5",
+              '[&_svg:not([class*="tw-size-"])]:tw-size-3'
+            ],
+            "icon-3xs": ["tw-h-fit", "tw-w-fit", '[&_svg:not([class*="tw-size-"])]:tw-size-4']
           }
         }
       }
@@ -748,7 +765,6 @@ var init_Button = __esm({
   "src/components/Button/Button.tsx"() {
     init_icons();
     init_utils();
-    init_Icon2();
     init_styles();
     Button = ({
       ref,
@@ -763,10 +779,10 @@ var init_Button = __esm({
       variant = "primary",
       size = "medium",
       block = false,
-      icon,
       ...buttonProps
     }) => {
       const Comp = asChild ? reactSlot.Root : "button";
+      const isIconOnly = String(size).startsWith("icon");
       const classNames = argo ? argoVariants({ variant, size, block, className }) : variants({
         size,
         variant,
@@ -789,14 +805,13 @@ var init_Button = __esm({
           disabled,
           "aria-disabled": disabled,
           "data-variant": variant,
-          "data-icon-only": String(size).startsWith("icon"),
+          "data-icon-only": isIconOnly,
           type,
           onClick: handleClick,
           className: cn(classNames),
           children: [
             isLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "tw-size-4 tw-shrink-0 tw-animate-spin" }),
-            !isLoading && icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children })
+            /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slottable, { children: isLoading && isIconOnly ? null : children })
           ]
         }
       );
@@ -860,6 +875,7 @@ var Clipboard;
 var init_Clipboard = __esm({
   "src/components/Clipboard/Clipboard.tsx"() {
     init_utils();
+    init_Tooltip2();
     Clipboard = ({
       ref,
       text: textProp,
@@ -899,21 +915,21 @@ var init_Clipboard = __esm({
         return tooltip;
       })();
       const tooltipVariant = state === "ready" && !!text ? tooltipVariantProp : "action";
-      return /* @__PURE__ */ jsxRuntime.jsxs(design.Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Root, { open: isTooltipOpen, onOpenChange: handleOnOpenChange, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          design.Tooltip.Trigger,
+          Tooltip.Trigger,
           {
             ...restButtonProps,
             asChild,
             keepOpenOnClick: true,
             onClick: handleOnClick,
-            className: design.cn("tw-cursor-pointer", className),
+            className: cn("tw-cursor-pointer", className),
             ref,
             children: children ?? text
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
-          design.Tooltip.Content,
+          Tooltip.Content,
           {
             keepOpenOnPointerDownOutside: true,
             placement: tooltipPlacement,
@@ -1560,9 +1576,7 @@ init_utils();
 // src/components/Toast/ToastRoot.tsx
 init_icons();
 init_utils();
-
-// src/utils/legacyIcon.tsx
-init_Icon2();
+var Icon = ({ ref, icon, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, { ...rest, ref, icon });
 var isFAIconValue = (value) => typeof value === "string" || Array.isArray(value) && value.length === 2 && typeof value[0] === "string" && typeof value[1] === "string";
 var renderLegacyIcon = (value) => isFAIconValue(value) ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: value }) : value;
 
@@ -1645,7 +1659,7 @@ var ToastDismiss = ({
       "tw-row-start-1",
       "tailwindcss-preflight",
       "[&_svg]:tw-aspect-square",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       "[&_svg]:tw-m-1",
       "tw-text-white",
       "group-data-[variant=default]/toast:[&_svg]:tw-text-popover-foreground",
@@ -1796,13 +1810,14 @@ var ToastRoot = ({
           "tw-inline-flex",
           "tw-items-center",
           "tw-justify-center",
+          "tw-self-center",
           // styles — container at 20px with no padding so the 20px Lucide
           // glyph fills the slot (previous tw-size-4 + tw-p-1 clipped a
           // 16px child into 8px of visible space)
           "tw-aspect-square",
           "tw-size-5",
           "tw-shrink-0",
-          "[&_svg]:tw-size-5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           "tw-text-white",
           "group-data-[variant=default]/toast:tw-text-popover-foreground"
         ),
@@ -2234,7 +2249,7 @@ var variants3 = classVarianceAuthority.cva(
           "tw-border-border",
           "tw-rounded-full",
           "tw-bg-white",
-          "[&_svg]:tw-size-2",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-2',
           "[&_svg]:data-[state=unchecked]:tw-hidden",
           // Lucide Circle is stroke-only — force fill to match the stroke
           // (currentColor) so the indicator reads as a solid dot.
@@ -2242,14 +2257,14 @@ var variants3 = classVarianceAuthority.cva(
           "group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary",
           "group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500"
         ],
-        check: ["[&_svg]:tw-size-3.5", "[&_svg]:tw-text-primary"],
+        check: ['[&_svg:not([class*="tw-size-"])]:tw-size-3.5', "[&_svg]:tw-text-primary"],
         checkbox: [
           "[&_svg]:tw-text-white",
           "tw-border",
           "tw-border-solid",
           "tw-border-neutral-200",
           "tw-rounded",
-          "[&_svg]:tw-size-3",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-3',
           "[&_svg]:data-[state=unchecked]:tw-hidden",
           "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary",
           "group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary",
@@ -2260,7 +2275,7 @@ var variants3 = classVarianceAuthority.cva(
           "tw-size-5",
           // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
           // to the indicator slot so it doesn't overflow.
-          "[&_svg]:tw-size-5",
+          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           "tw-text-neutral-400",
           "data-[state=unchecked]:tw-rotate-180",
           "group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500",
@@ -2311,7 +2326,7 @@ var ItemIcon = ({ className, children, ...props }) => /* @__PURE__ */ jsxRuntime
       // 20px container fits the 16px Lucide glyph plus 2px breathing room
       // each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
       "tw-size-5",
-      "[&_svg]:tw-size-4",
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       "group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400",
       "group-data-[variant=argo]/dropdown-menu-content:tw-text-primary",
       "group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground",
@@ -3387,6 +3402,7 @@ InputGroup.Text = InputGroupText;
 // src/blocks/ColorInput/ColorInput.tsx
 init_icons();
 init_utils();
+init_icons();
 
 // src/blocks/ColorInput/utils.ts
 var HEX_CHARSET = /^[0-9a-fA-F]+$/;
@@ -3451,7 +3467,7 @@ var ColorPicker = ({ value, disabled, readOnly, ...props }) => {
         disabled: disabled || readOnly,
         onClick: handleOpenPicker,
         "aria-label": "Pick color",
-        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pipette, { className: "tw-size-4" })
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pipette, { className: "tw-size-4" })
       }
     )
   ] });
@@ -4333,10 +4349,13 @@ var MarkdownEditor = ({
   compact = false,
   saveOnBlur = false,
   singleLine = false,
-  clampDisplay = false
+  clampDisplay = false,
+  minRows
 }) => {
   const editable = !readOnly && !disabled;
   const transformers = singleLine ? SINGLE_LINE_TRANSFORMERS : CUSTOM_TRANSFORMERS;
+  const useDefaultMinHeight = !compact && minRows === void 0;
+  const customMinHeight = !compact && minRows !== void 0 ? { minHeight: `${minRows * 1.75}em` } : void 0;
   const [initialConfig] = react.useState(() => ({
     namespace: "MarkdownEditor",
     theme: editorTheme,
@@ -4395,7 +4414,8 @@ var MarkdownEditor = ({
                 contentEditable: /* @__PURE__ */ jsxRuntime.jsx(
                   LexicalContentEditable.ContentEditable,
                   {
-                    className: cn("tw-outline-none", !compact && "tw-min-h-[100px]"),
+                    className: cn("tw-outline-none", useDefaultMinHeight && "tw-min-h-[100px]"),
+                    style: customMinHeight,
                     "aria-placeholder": placeholder ?? "",
                     placeholder: placeholder ? /* @__PURE__ */ jsxRuntime.jsx(
                       "div",