@expcat/tigercat-react 1.0.4 → 1.1.0

package/dist/{chunk-CKFE2B36.js → chunk-ULODU52Q.js}

@@ -1,9 +1,8 @@
 'use strict';
 
-var chunkZYPEO2KY_js = require('./chunk-ZYPEO2KY.js');
-var chunkBCNKTT5C_js = require('./chunk-BCNKTT5C.js');
+var chunkGRXBGL6Q_js = require('./chunk-GRXBGL6Q.js');
+var chunkPGBKMW4Q_js = require('./chunk-PGBKMW4Q.js');
 var React = require('react');
-var reactDom = require('react-dom');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -86,7 +85,7 @@ var Modal = ({
   }, [onOk, onOpenChange]);
   const handleMaskClick = React.useCallback(
     (event) => {
-      if (maskClosable && event.target === event.currentTarget) {
+      if (tigercatCore.shouldCloseOnMaskClick(event, maskClosable)) {
         handleClose();
       }
     },
@@ -135,17 +134,9 @@ var Modal = ({
     }
     tigercatCore.restoreFocus(previousActiveElementRef.current);
   }, [open]);
-  chunkZYPEO2KY_js.useEscapeKey({ enabled: open, onEscape: handleClose });
-  const handleKeyDown = React.useCallback((event) => {
-    if (event.key === "Tab" && dialogRef.current) {
-      const focusables = tigercatCore.getFocusableElements(dialogRef.current);
-      const result = tigercatCore.getFocusTrapNavigation(event.nativeEvent, focusables, document.activeElement);
-      if (result.shouldHandle && result.next) {
-        event.preventDefault();
-        result.next.focus();
-      }
-    }
-  }, []);
+  chunkPGBKMW4Q_js.useEscapeKey({ enabled: open, onEscape: handleClose });
+  chunkPGBKMW4Q_js.useBodyScrollLock({ enabled: open });
+  chunkPGBKMW4Q_js.useFocusTrap({ enabled: open, containerRef: dialogRef });
   const CloseIcon = /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -200,7 +191,6 @@ var Modal = ({
             "aria-labelledby": ariaLabelledby,
             tabIndex: -1,
             ref: dialogRef,
-            onKeyDown: handleKeyDown,
             "data-tiger-modal": "",
             children: [
               (title || titleContent || closable) && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -227,8 +217,8 @@ var Modal = ({
               ),
               children && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.modalBodyClasses, children }),
               footer ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.modalFooterClasses, "data-tiger-modal-footer": "", children: footer }) : showDefaultFooter ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.modalFooterClasses, "data-tiger-modal-footer": "", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(chunkBCNKTT5C_js.Button, { variant: "secondary", onClick: handleClose, children: resolvedCancelText }),
-                /* @__PURE__ */ jsxRuntime.jsx(chunkBCNKTT5C_js.Button, { onClick: handleOk, children: resolvedOkText })
+                /* @__PURE__ */ jsxRuntime.jsx(chunkGRXBGL6Q_js.Button, { variant: "secondary", onClick: handleClose, children: resolvedCancelText }),
+                /* @__PURE__ */ jsxRuntime.jsx(chunkGRXBGL6Q_js.Button, { onClick: handleOk, children: resolvedOkText })
               ] }) : null
             ]
           }
@@ -236,7 +226,7 @@ var Modal = ({
       ]
     }
   );
-  return reactDom.createPortal(modalContent, document.body);
+  return chunkPGBKMW4Q_js.renderBodyPortal(modalContent);
 };
 
 exports.Modal = Modal;

package/dist/{chunk-QQDKQLHJ.mjs → chunk-UPO4LLNK.mjs}

@@ -1,9 +1,9 @@
-import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
-import { ChartLegend } from './chunk-Z6F67MJE.mjs';
-import { ChartTooltip } from './chunk-LVC43YX2.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { useChartInteraction } from './chunk-6QML6T3Y.mjs';
+import { ChartLegend } from './chunk-UBP7HZSU.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
 import { useMemo } from 'react';
-import { getChartInnerRect, getPieArcs, resolveChartPalette, buildChartLegendItems, resolveChartTooltipContent, classNames, createPieArcPath, getChartElementOpacity, computePieHoverOffset, PIE_EMPHASIS_SHADOW, PIE_BASE_SHADOW, computePieLabelLine, polarToCartesian, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { getChartInnerRect, getPieArcs, resolveChartPalette, getPieGradientPrefix, buildChartLegendItems, resolveChartTooltipContent, classNames, createPieArcPath, getChartElementOpacity, computePieHoverOffset, PIE_EMPHASIS_SHADOW, PIE_BASE_SHADOW, computePieLabelLine, polarToCartesian, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var PieChart = ({
@@ -21,9 +21,10 @@ var PieChart = ({
   labelFormatter,
   labelPosition = "inside",
   borderWidth = 2,
-  borderColor = "#ffffff",
+  borderColor = "var(--tiger-surface,#ffffff)",
   hoverOffset = 8,
   shadow = false,
+  gradient = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -98,6 +99,7 @@ var PieChart = ({
     [data, startAngle, endAngle, padAngle]
   );
   const palette = useMemo(() => resolveChartPalette(colors), [colors]);
+  const gradientPrefix = useMemo(() => getPieGradientPrefix(), []);
   const cx = innerRect.width / 2;
   const cy = innerRect.height / 2;
   const labelRadius = resolvedInnerRadius + (resolvedOuterRadius - resolvedInnerRadius) / 2;
@@ -132,50 +134,70 @@ var PieChart = ({
       desc,
       className: classNames(className),
       children: [
-        /* @__PURE__ */ jsx("g", { "data-series-type": "pie", children: arcs.map((arc) => {
-          const color = arc.data.color ?? palette[arc.index % palette.length];
-          const path = createPieArcPath({
-            cx,
-            cy,
-            innerRadius: resolvedInnerRadius,
-            outerRadius: resolvedOuterRadius,
-            startAngle: arc.startAngle,
-            endAngle: arc.endAngle
-          });
-          const isEmphasized = activeIndex === arc.index;
-          const opacity = getChartElementOpacity(arc.index, activeIndex, {
-            activeOpacity,
-            inactiveOpacity
-          });
-          const { dx, dy } = interactive && isEmphasized && hoverOffset > 0 ? computePieHoverOffset(arc.startAngle, arc.endAngle, hoverOffset) : { dx: 0, dy: 0 };
-          return /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: path,
-              fill: color,
-              opacity,
-              stroke: borderColor,
-              strokeWidth: borderWidth,
-              strokeLinejoin: "round",
-              className: classNames(interactive && "cursor-pointer"),
-              style: {
-                transform: isEmphasized ? `translate(${dx}px, ${dy}px) scale(1.04)` : `translate(${dx}px, ${dy}px)`,
-                transformOrigin: `${cx}px ${cy}px`,
-                transition: "transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s ease-out, filter 0.3s ease-out",
-                filter: shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
+        /* @__PURE__ */ jsxs("g", { "data-series-type": "pie", children: [
+          gradient && /* @__PURE__ */ jsx("defs", { children: arcs.map((arc) => {
+            const color = arc.data.color ?? palette[arc.index % palette.length];
+            return /* @__PURE__ */ jsxs(
+              "linearGradient",
+              {
+                id: `${gradientPrefix}-${arc.index}`,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [
+                  /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 1 }),
+                  /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: color, stopOpacity: 0.7 })
+                ]
               },
-              tabIndex: selectable ? 0 : void 0,
-              "data-pie-slice": "true",
-              "data-index": arc.index,
-              onMouseEnter: (e) => handleMouseEnter(arc.index, e),
-              onMouseMove: handleMouseMove,
-              onMouseLeave: handleMouseLeave,
-              onClick: () => handleClick(arc.index),
-              onKeyDown: (e) => handleKeyDown(e, arc.index)
-            },
-            `slice-${arc.index}`
-          );
-        }) }),
+              `pie-grad-${arc.index}`
+            );
+          }) }),
+          arcs.map((arc) => {
+            const color = arc.data.color ?? palette[arc.index % palette.length];
+            const path = createPieArcPath({
+              cx,
+              cy,
+              innerRadius: resolvedInnerRadius,
+              outerRadius: resolvedOuterRadius,
+              startAngle: arc.startAngle,
+              endAngle: arc.endAngle
+            });
+            const isEmphasized = activeIndex === arc.index;
+            const opacity = getChartElementOpacity(arc.index, activeIndex, {
+              activeOpacity,
+              inactiveOpacity
+            });
+            const { dx, dy } = interactive && isEmphasized && hoverOffset > 0 ? computePieHoverOffset(arc.startAngle, arc.endAngle, hoverOffset) : { dx: 0, dy: 0 };
+            return /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: path,
+                fill: gradient ? `url(#${gradientPrefix}-${arc.index})` : color,
+                opacity,
+                stroke: borderColor,
+                strokeWidth: borderWidth,
+                strokeLinejoin: "round",
+                className: classNames(interactive && "cursor-pointer"),
+                style: {
+                  transform: isEmphasized ? `translate(${dx}px, ${dy}px) scale(1.04)` : `translate(${dx}px, ${dy}px)`,
+                  transformOrigin: `${cx}px ${cy}px`,
+                  transition: "transform var(--tiger-motion-duration-relaxed,0.3s) var(--tiger-motion-ease-spring,cubic-bezier(0.4,0,0.2,1)), opacity 0.2s ease-out, filter 0.3s ease-out",
+                  filter: shadow ? isEmphasized ? PIE_EMPHASIS_SHADOW : PIE_BASE_SHADOW : void 0
+                },
+                tabIndex: selectable ? 0 : void 0,
+                "data-pie-slice": "true",
+                "data-index": arc.index,
+                onMouseEnter: (e) => handleMouseEnter(arc.index, e),
+                onMouseMove: handleMouseMove,
+                onMouseLeave: handleMouseLeave,
+                onClick: () => handleClick(arc.index),
+                onKeyDown: (e) => handleKeyDown(e, arc.index)
+              },
+              `slice-${arc.index}`
+            );
+          })
+        ] }),
         showLabels && labelPosition === "outside" && arcs.map((arc) => {
           const color = arc.data.color ?? palette[arc.index % palette.length];
           const line = computePieLabelLine(

package/dist/chunk-V4JIZN3E.mjs

@@ -0,0 +1,156 @@
+import { useControlledState } from './chunk-UQMPEMY7.mjs';
+import { useRef, useState, useEffect, useCallback, useMemo } from 'react';
+import { isContentEmpty, builtinRichTextEngine, defaultToolbar, findHotkeyMatch, classNames, getRichTextContainerClasses, getEditorAreaClasses, parseHeight, richTextToolbarClasses, isToolbarSeparator, richTextToolbarSeparatorClasses, getToolbarButtonClasses, isInlineFormat, richTextPlaceholderClasses } from '@expcat/tigercat-core';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var RichTextEditor = ({
+  value,
+  defaultValue = "",
+  placeholder,
+  mode: _mode = "html",
+  toolbar,
+  height = 300,
+  readOnly = false,
+  disabled = false,
+  onChange,
+  className,
+  engine,
+  ...restProps
+}) => {
+  const editorRef = useRef(null);
+  const engineRef = useRef(null);
+  const [currentContent, setInternalValue, isControlled] = useControlledState(value, defaultValue);
+  const [activeFormats, setActiveFormats] = useState(/* @__PURE__ */ new Set());
+  const toolbarItems = toolbar ?? defaultToolbar;
+  const empty = isContentEmpty(currentContent);
+  const onChangeRef = useRef(onChange);
+  const setInternalValueRef = useRef(setInternalValue);
+  const isControlledRef = useRef(isControlled);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+    setInternalValueRef.current = setInternalValue;
+    isControlledRef.current = isControlled;
+  }, [onChange, setInternalValue, isControlled]);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const factory = engine ?? builtinRichTextEngine;
+    const instance = factory.create({
+      element: editorRef.current,
+      initialValue: isControlled ? value : defaultValue,
+      readOnly,
+      disabled,
+      placeholder,
+      toolbar: toolbarItems,
+      notifyChange(html) {
+        if (!isControlledRef.current) setInternalValueRef.current(html);
+        onChangeRef.current?.(html);
+      },
+      notifyActiveFormats(next) {
+        setActiveFormats(next);
+      }
+    });
+    engineRef.current = instance;
+    return () => {
+      instance.destroy();
+      engineRef.current = null;
+    };
+  }, [engine]);
+  useEffect(() => {
+    if (isControlled && engineRef.current && value !== void 0) {
+      engineRef.current.setValue(value);
+    }
+  }, [value, isControlled]);
+  useEffect(() => {
+    engineRef.current?.setReadOnly(readOnly, disabled);
+  }, [readOnly, disabled]);
+  const execButtonAction = useCallback(
+    (btn) => {
+      if (readOnly || disabled) return;
+      if (btn.action && editorRef.current) {
+        btn.action(editorRef.current);
+        return;
+      }
+      engineRef.current?.exec(btn.name);
+    },
+    [readOnly, disabled]
+  );
+  const handleKeydown = useCallback(
+    (e) => {
+      const match = findHotkeyMatch(toolbarItems, e.nativeEvent);
+      if (match) {
+        e.preventDefault();
+        execButtonAction(match);
+      }
+    },
+    [toolbarItems, execButtonAction]
+  );
+  const containerClasses = useMemo(
+    () => classNames(getRichTextContainerClasses(disabled, className)),
+    [disabled, className]
+  );
+  const editorAreaClasses = useMemo(() => getEditorAreaClasses(readOnly), [readOnly]);
+  const containerStyle = useMemo(() => {
+    const ht = parseHeight(height);
+    if (!ht) return void 0;
+    return { height: ht };
+  }, [height]);
+  return /* @__PURE__ */ jsxs("div", { className: containerClasses, style: containerStyle, ...restProps, children: [
+    /* @__PURE__ */ jsx("div", { className: richTextToolbarClasses, role: "toolbar", "aria-label": "Text formatting", children: toolbarItems.map((item, idx) => {
+      if (isToolbarSeparator(item)) {
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: richTextToolbarSeparatorClasses,
+            role: "separator",
+            "aria-orientation": "vertical"
+          },
+          `sep-${idx}`
+        );
+      }
+      const btn = item;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: getToolbarButtonClasses(activeFormats.has(btn.name)),
+          title: btn.tooltip ?? btn.label,
+          "aria-label": btn.label,
+          "aria-pressed": isInlineFormat(btn.name) ? activeFormats.has(btn.name) : void 0,
+          disabled: disabled || readOnly,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => execButtonAction(btn),
+          children: btn.icon ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: btn.icon } }) : btn.label
+        },
+        btn.name
+      );
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: editorRef,
+          className: editorAreaClasses,
+          role: "textbox",
+          "aria-multiline": true,
+          "aria-readonly": readOnly || void 0,
+          "aria-disabled": disabled || void 0,
+          "aria-placeholder": placeholder,
+          "data-placeholder": placeholder,
+          onKeyDown: handleKeydown,
+          suppressContentEditableWarning: true
+        }
+      ),
+      empty && placeholder && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${richTextPlaceholderClasses} absolute top-0 left-0 p-4 pointer-events-none text-sm`,
+          "aria-hidden": true,
+          children: placeholder
+        }
+      )
+    ] })
+  ] });
+};
+var RichTextEditor_default = RichTextEditor;
+
+export { RichTextEditor, RichTextEditor_default };

package/dist/{chunk-R3QWJ7GT.mjs → chunk-V5557VIB.mjs}

@@ -1,9 +1,9 @@
-import { useChartInteraction } from './chunk-3CDAG4HD.mjs';
-import { ChartLegend } from './chunk-Z6F67MJE.mjs';
-import { ChartTooltip } from './chunk-LVC43YX2.mjs';
-import { ChartCanvas } from './chunk-IS467WAO.mjs';
+import { useChartInteraction } from './chunk-6QML6T3Y.mjs';
+import { ChartLegend } from './chunk-UBP7HZSU.mjs';
+import { ChartTooltip } from './chunk-2IUTFPQQ.mjs';
+import { ChartCanvas } from './chunk-DKNVSQSV.mjs';
 import { useMemo } from 'react';
-import { getChartInnerRect, resolveChartPalette, computeFunnelSegments, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity, chartAxisTickTextClasses } from '@expcat/tigercat-core';
+import { getChartInnerRect, resolveChartPalette, computeFunnelSegments, getFunnelGradientPrefix, buildChartLegendItems, resolveChartTooltipContent, classNames, getChartElementOpacity, chartAxisTickTextClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var FunnelChart = ({
@@ -15,6 +15,7 @@ var FunnelChart = ({
   gap = 2,
   pinch = false,
   colors,
+  gradient = false,
   hoverable = false,
   hoveredIndex: hoveredIndexProp,
   activeOpacity = 1,
@@ -80,6 +81,7 @@ var FunnelChart = ({
     [data, innerRect.width, innerRect.height, gap, pinch, palette]
   );
   const total = useMemo(() => data.reduce((s, d) => s + d.value, 0), [data]);
+  const gradientPrefix = useMemo(() => getFunnelGradientPrefix(), []);
   const legendItems = useMemo(
     () => buildChartLegendItems({
       data,
@@ -109,6 +111,21 @@ var FunnelChart = ({
       desc,
       className: classNames(className),
       children: [
+        gradient && /* @__PURE__ */ jsx("defs", { children: segments.map((seg) => /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: `${gradientPrefix}-${seg.index}`,
+            x1: 0,
+            y1: 0,
+            x2: 0,
+            y2: 1,
+            children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: seg.color, stopOpacity: 1 }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: seg.color, stopOpacity: 0.55 })
+            ]
+          },
+          `grad-${seg.index}`
+        )) }),
         /* @__PURE__ */ jsx("g", { "data-series-type": "funnel", children: segments.map((seg) => {
           const opacity = getChartElementOpacity(seg.index, activeIndex, {
             activeOpacity,
@@ -118,7 +135,7 @@ var FunnelChart = ({
             "path",
             {
               d: seg.path,
-              fill: seg.color,
+              fill: gradient ? `url(#${gradientPrefix}-${seg.index})` : seg.color,
               opacity,
               className: classNames(interactive && "cursor-pointer"),
               style: { transition: "opacity 0.2s ease-out" },

package/dist/chunk-VBBOH5HA.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var chunkMOSVX52I_js = require('./chunk-MOSVX52I.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Kanban = ({
+  showCardCount = true,
+  allowAddCard = true,
+  allowAddColumn = false,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    chunkMOSVX52I_js.TaskBoard,
+    {
+      showCardCount,
+      allowAddCard,
+      allowAddColumn,
+      ...props
+    }
+  );
+};
+var Kanban_default = Kanban;
+
+exports.Kanban = Kanban;
+exports.Kanban_default = Kanban_default;

package/dist/chunk-VBZE77VM.mjs

@@ -0,0 +1,65 @@
+import React, { useContext, useState, useEffect, useMemo } from 'react';
+import { isLazyTigerLocale, getImmediateTigerLocale, resolveTigerLocale, mergeTigerLocale, ThemeManager } from '@expcat/tigercat-core';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/ConfigProvider.tsx
+var TigerConfigContext = React.createContext({});
+var ConfigProvider = ({
+  locale,
+  theme,
+  colorScheme,
+  children
+}) => {
+  const parent = useContext(TigerConfigContext);
+  const isLazy = isLazyTigerLocale(locale);
+  const immediateLocale = isLazy ? void 0 : getImmediateTigerLocale(locale);
+  const [resolvedLocale, setResolvedLocale] = useState(
+    immediateLocale
+  );
+  const [localeLoading, setLocaleLoading] = useState(isLazy);
+  useEffect(() => {
+    if (!isLazyTigerLocale(locale)) {
+      setResolvedLocale(getImmediateTigerLocale(locale));
+      setLocaleLoading(false);
+      return;
+    }
+    let cancelled = false;
+    setLocaleLoading(true);
+    resolveTigerLocale(locale).then(
+      (result) => {
+        if (!cancelled) {
+          setResolvedLocale(result);
+          setLocaleLoading(false);
+        }
+      },
+      () => {
+        if (!cancelled) {
+          setLocaleLoading(false);
+        }
+      }
+    );
+    return () => {
+      cancelled = true;
+    };
+  }, [locale]);
+  const value = useMemo(() => {
+    return {
+      locale: mergeTigerLocale(parent.locale, resolvedLocale),
+      localeLoading: localeLoading || parent.localeLoading,
+      theme: theme ?? parent.theme,
+      colorScheme: colorScheme ?? parent.colorScheme
+    };
+  }, [parent.locale, resolvedLocale, localeLoading, parent.localeLoading, theme, parent.theme, colorScheme, parent.colorScheme]);
+  useEffect(() => {
+    if (value.theme) ThemeManager.setTheme(value.theme);
+  }, [value.theme]);
+  useEffect(() => {
+    if (value.colorScheme) ThemeManager.setColorScheme(value.colorScheme);
+  }, [value.colorScheme]);
+  return /* @__PURE__ */ jsx(TigerConfigContext.Provider, { value, children });
+};
+function useTigerConfig() {
+  return useContext(TigerConfigContext);
+}
+
+export { ConfigProvider, useTigerConfig };

package/dist/{chunk-XLVEI7GS.js → chunk-VE3SYUMH.js}

@@ -21,14 +21,15 @@ var Row = ({
       "flex",
       "w-full",
       wrap && "flex-wrap",
+      tigercatCore.getRowGutterClasses(gutter),
       tigercatCore.getAlignClasses(align),
       tigercatCore.getJustifyClasses(justify),
       className
     ),
-    [wrap, align, justify, className]
+    [gutter, wrap, align, justify, className]
   );
   const mergedStyle = react.useMemo(
-    () => ({ ...tigercatCore.getGutterStyles(gutter).rowStyle, ...style }),
+    () => ({ ...tigercatCore.getRowGutterStyleVars(gutter), ...style }),
     [gutter, style]
   );
   const contextValue = react.useMemo(() => ({ gutter }), [gutter]);