@expcat/tigercat-react 1.1.0 → 1.2.14

package/dist/chunk-H4AR4GXH.js

@@ -0,0 +1,181 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }// src/components/Splitter.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Splitter = ({
+  direction = "horizontal",
+  sizes: controlledSizes,
+  min = 0,
+  max,
+  gutterSize = 4,
+  disabled = false,
+  className,
+  style,
+  onResizeStart,
+  onResize,
+  onResizeEnd,
+  onSizesChange,
+  children
+}) => {
+  const containerRef = _react.useRef.call(void 0, null);
+  const dragSessionRef = _react.useRef.call(void 0, null);
+  const [paneSizes, setPaneSizes] = _react.useState.call(void 0, []);
+  const [draggingIndex, setDraggingIndex] = _react.useState.call(void 0, -1);
+  const draggingRef = _react.useRef.call(void 0, null);
+  const cleanupDragSession = _react.useCallback.call(void 0, () => {
+    _optionalChain([dragSessionRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.dispose, 'call', _3 => _3()]);
+    dragSessionRef.current = null;
+  }, []);
+  _react.useEffect.call(void 0, () => cleanupDragSession, [cleanupDragSession]);
+  _react.useEffect.call(void 0, () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const paneCount2 = _react2.default.Children.count(children);
+    if (paneCount2 === 0) return;
+    const totalGutter = (paneCount2 - 1) * gutterSize;
+    const total = direction === "horizontal" ? el.clientWidth - totalGutter : el.clientHeight - totalGutter;
+    if (controlledSizes && controlledSizes.length > 0) {
+      if (total > 0) {
+        const sum = controlledSizes.reduce((a, b) => a + b, 0);
+        if (sum > 0) {
+          setPaneSizes(controlledSizes.map((s) => s / sum * total));
+        }
+      } else {
+        setPaneSizes([...controlledSizes]);
+      }
+    } else {
+      if (total > 0) {
+        const eachSize = total / paneCount2;
+        setPaneSizes(Array.from({ length: paneCount2 }, () => eachSize));
+      }
+    }
+  }, [children, direction, gutterSize, controlledSizes]);
+  const paneCount = paneSizes.length;
+  const mins = _react.useMemo.call(void 0, () => Array.from({ length: paneCount }, () => min), [paneCount, min]);
+  const maxes = _react.useMemo.call(void 0, () => Array.from({ length: paneCount }, () => max), [paneCount, max]);
+  const handleMouseDown = _react.useCallback.call(void 0, 
+    (index, e) => {
+      if (disabled) return;
+      e.preventDefault();
+      cleanupDragSession();
+      draggingRef.current = {
+        index,
+        startPos: direction === "horizontal" ? e.clientX : e.clientY,
+        startSizes: [...paneSizes]
+      };
+      setDraggingIndex(index);
+      _optionalChain([onResizeStart, 'optionalCall', _4 => _4({ index, sizes: [...paneSizes] })]);
+      dragSessionRef.current = _tigercatcore.createDocumentDragSession.call(void 0, {
+        startX: e.clientX,
+        startY: e.clientY,
+        ownerDocument: e.currentTarget.ownerDocument,
+        onMove: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (!drag) return;
+          const currentPos = direction === "horizontal" ? currentX : currentY;
+          const delta = currentPos - drag.startPos;
+          const newSizes = _tigercatcore.resizePanes.call(void 0, drag.startSizes, drag.index, delta, mins, maxes);
+          if (newSizes) {
+            setPaneSizes(newSizes);
+            _optionalChain([onSizesChange, 'optionalCall', _5 => _5(newSizes)]);
+            _optionalChain([onResize, 'optionalCall', _6 => _6({ index: drag.index, sizes: newSizes })]);
+          }
+        },
+        onEnd: ({ currentX, currentY }) => {
+          const drag = draggingRef.current;
+          if (drag) {
+            const currentPos = direction === "horizontal" ? currentX : currentY;
+            const delta = currentPos - drag.startPos;
+            const finalSizes = _nullishCoalesce(_tigercatcore.resizePanes.call(void 0, drag.startSizes, drag.index, delta, mins, maxes), () => ( drag.startSizes));
+            _optionalChain([onResizeEnd, 'optionalCall', _7 => _7({ index: drag.index, sizes: finalSizes })]);
+          }
+          draggingRef.current = null;
+          dragSessionRef.current = null;
+          setDraggingIndex(-1);
+        }
+      });
+    },
+    [
+      disabled,
+      direction,
+      paneSizes,
+      mins,
+      maxes,
+      cleanupDragSession,
+      onResizeStart,
+      onResize,
+      onResizeEnd,
+      onSizesChange
+    ]
+  );
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (gutterIdx, e) => {
+      if (disabled) return;
+      const step = 10;
+      let delta = 0;
+      if (direction === "horizontal" && e.key === "ArrowLeft" || direction === "vertical" && e.key === "ArrowUp") {
+        delta = -step;
+      } else if (direction === "horizontal" && e.key === "ArrowRight" || direction === "vertical" && e.key === "ArrowDown") {
+        delta = step;
+      }
+      if (delta !== 0) {
+        e.preventDefault();
+        const newSizes = _tigercatcore.resizePanes.call(void 0, paneSizes, gutterIdx, delta, mins, maxes);
+        if (newSizes) {
+          setPaneSizes(newSizes);
+          _optionalChain([onSizesChange, 'optionalCall', _8 => _8(newSizes)]);
+          _optionalChain([onResize, 'optionalCall', _9 => _9({ index: gutterIdx, sizes: newSizes })]);
+        }
+      }
+    },
+    [disabled, direction, paneSizes, mins, maxes, onResize, onSizesChange]
+  );
+  const childArray = _react2.default.Children.toArray(children);
+  const containerClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, _tigercatcore.getSplitterContainerClasses.call(void 0, direction, className)),
+    [direction, className]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref: containerRef, className: containerClasses, style, "data-direction": direction, children: childArray.map((child, i) => {
+    const size = paneSizes[i];
+    const paneStyle = size != null ? _tigercatcore.getPaneStyle.call(void 0, size, direction) : void 0;
+    const isDragging = draggingIndex === i;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react2.default.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: "tiger-splitter-pane relative overflow-auto",
+          style: paneStyle,
+          "data-pane-index": i,
+          children: child
+        }
+      ),
+      i < childArray.length - 1 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: _tigercatcore.getSplitterGutterClasses.call(void 0, direction, !!isDragging, disabled),
+          role: "separator",
+          "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+          tabIndex: disabled ? -1 : 0,
+          "data-gutter-index": i,
+          onMouseDown: (e) => handleMouseDown(i, e),
+          onKeyDown: (e) => handleKeyDown(i, e),
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getSplitterGutterHandleClasses.call(void 0, direction) })
+        }
+      )
+    ] }, i);
+  }) });
+};
+var Splitter_default = Splitter;
+
+
+
+
+exports.Splitter = Splitter; exports.Splitter_default = Splitter_default;

package/dist/{chunk-KPRUZCKN.js → chunk-H6NC6SBX.js}

@@ -1,16 +1,26 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var chunkXTV5JLLC_js = require('./chunk-XTV5JLLC.js');
-var chunk36ATCHP4_js = require('./chunk-36ATCHP4.js');
-var chunkUKLVOR4E_js = require('./chunk-UKLVOR4E.js');
-var React = require('react');
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
+var _chunkXTV5JLLCjs = require('./chunk-XTV5JLLC.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
+var _chunkUVMQJOTXjs = require('./chunk-UVMQJOTX.js');
 
+
+var _chunkUKLVOR4Ejs = require('./chunk-UKLVOR4E.js');
+
+// src/components/HeatmapChart.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
 var HeatmapChart = ({
   width = 400,
   height = 300,
@@ -42,7 +52,7 @@ var HeatmapChart = ({
   onCellClick,
   onCellHover
 }) => {
-  const canvasRef = React.useRef(null);
+  const canvasRef = _react.useRef.call(void 0, null);
   const {
     tooltipPosition,
     resolvedHoveredIndex,
@@ -51,7 +61,7 @@ var HeatmapChart = ({
     handleMouseMove,
     handleMouseLeave,
     handleClick
-  } = chunkXTV5JLLC_js.useChartInteraction({
+  } = _chunkXTV5JLLCjs.useChartInteraction.call(void 0, {
     hoverable,
     hoveredIndexProp,
     selectable,
@@ -60,18 +70,18 @@ var HeatmapChart = ({
     inactiveOpacity,
     getData: (index) => data[index],
     onHoveredIndexChange: (index) => {
-      onHoveredIndexChange?.(index);
-      onCellHover?.(index, index !== null ? data[index] : null);
+      _optionalChain([onHoveredIndexChange, 'optionalCall', _ => _(index)]);
+      _optionalChain([onCellHover, 'optionalCall', _2 => _2(index, index !== null ? data[index] : null)]);
     },
     onSelectedIndexChange,
     callbacks: { onClick: onCellClick }
   });
-  const innerRect = React.useMemo(
-    () => tigercatCore.getChartInnerRect(width, height, padding),
+  const innerRect = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getChartInnerRect.call(void 0, width, height, padding),
     [width, height, padding]
   );
-  const cells = React.useMemo(
-    () => tigercatCore.computeHeatmapCells(data, {
+  const cells = _react.useMemo.call(void 0, 
+    () => _tigercatcore.computeHeatmapCells.call(void 0, data, {
       xLabels,
       yLabels,
       width: innerRect.width,
@@ -93,8 +103,8 @@ var HeatmapChart = ({
       colorSpace
     ]
   );
-  const tooltipContent = React.useMemo(
-    () => tigercatCore.resolveChartTooltipContent(resolvedHoveredIndex, cells, void 0, (cell) => {
+  const tooltipContent = _react.useMemo.call(void 0, 
+    () => _tigercatcore.resolveChartTooltipContent.call(void 0, resolvedHoveredIndex, cells, void 0, (cell) => {
       const val = valueFormatter ? valueFormatter(cell.value) : `${cell.value}`;
       return `${cell.xLabel} \xD7 ${cell.yLabel}: ${val}`;
     }),
@@ -104,25 +114,25 @@ var HeatmapChart = ({
   const rect = innerRect;
   const cellW = (rect.width - cellGap * (xLabels.length - 1)) / xLabels.length;
   const cellH = (rect.height - cellGap * (yLabels.length - 1)) / yLabels.length;
-  const resolvedRenderMode = tigercatCore.resolveHeatmapRenderMode(cells.length, {
+  const resolvedRenderMode = _tigercatcore.resolveHeatmapRenderMode.call(void 0, cells.length, {
     renderMode,
     canvasThreshold
   });
   const shouldRenderCanvas = resolvedRenderMode === "canvas";
-  React.useEffect(() => {
+  _react.useEffect.call(void 0, () => {
     if (!shouldRenderCanvas) return;
     const canvas = canvasRef.current;
-    const context = canvas?.getContext("2d");
+    const context = _optionalChain([canvas, 'optionalAccess', _3 => _3.getContext, 'call', _4 => _4("2d")]);
     if (!canvas || !context) return;
     context.clearRect(0, 0, rect.width, rect.height);
     context.textAlign = "center";
     context.textBaseline = "middle";
     context.font = "10px sans-serif";
     cells.forEach((cell, idx) => {
-      context.globalAlpha = tigercatCore.getChartElementOpacity(idx, activeIndex, {
+      context.globalAlpha = _nullishCoalesce(_tigercatcore.getChartElementOpacity.call(void 0, idx, activeIndex, {
         activeOpacity,
         inactiveOpacity
-      }) ?? 1;
+      }), () => ( 1));
       context.fillStyle = cell.fill;
       const radius = Math.max(0, Math.min(cellRadius, cell.w / 2, cell.h / 2));
       if (radius > 0) {
@@ -169,7 +179,7 @@ var HeatmapChart = ({
     showValues,
     valueFormatter
   ]);
-  const getCanvasPoint = React.useCallback((event) => {
+  const getCanvasPoint = _react.useCallback.call(void 0, (event) => {
     const canvas = event.currentTarget;
     const bounds = canvas.getBoundingClientRect();
     const nativeEvent = event.nativeEvent;
@@ -179,10 +189,10 @@ var HeatmapChart = ({
     const scaleY = bounds.height > 0 ? canvas.height / bounds.height : 1;
     return { x: offsetX * scaleX, y: offsetY * scaleY };
   }, []);
-  const handleCanvasMouseMove = React.useCallback(
+  const handleCanvasMouseMove = _react.useCallback.call(void 0, 
     (event) => {
       const point = getCanvasPoint(event);
-      const index = tigercatCore.getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      const index = _tigercatcore.getHeatmapCellIndexAtPoint.call(void 0, cells, point.x, point.y);
       if (index === null) {
         handleMouseLeave();
         return;
@@ -192,43 +202,43 @@ var HeatmapChart = ({
     },
     [cells, getCanvasPoint, handleMouseEnter, handleMouseLeave, handleMouseMove]
   );
-  const handleCanvasClick = React.useCallback(
+  const handleCanvasClick = _react.useCallback.call(void 0, 
     (event) => {
       const point = getCanvasPoint(event);
-      const index = tigercatCore.getHeatmapCellIndexAtPoint(cells, point.x, point.y);
+      const index = _tigercatcore.getHeatmapCellIndexAtPoint.call(void 0, cells, point.x, point.y);
       if (index !== null) {
         handleClick(index);
       }
     },
     [cells, getCanvasPoint, handleClick]
   );
-  const chart = /* @__PURE__ */ jsxRuntime.jsxs(
-    chunkUKLVOR4E_js.ChartCanvas,
+  const chart = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _chunkUKLVOR4Ejs.ChartCanvas,
     {
       width,
       height,
       padding,
       title,
       desc,
-      className: tigercatCore.classNames(className),
+      className: _tigercatcore.classNames.call(void 0, className),
       children: [
-        xLabels.map((lbl, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        xLabels.map((lbl, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "text",
           {
             x: i * (cellW + cellGap) + cellW / 2,
             y: rect.height + 16,
-            className: tigercatCore.chartAxisTickTextClasses,
+            className: _tigercatcore.chartAxisTickTextClasses,
             textAnchor: "middle",
             children: lbl
           },
           `x-${i}`
         )),
-        yLabels.map((lbl, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        yLabels.map((lbl, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "text",
           {
             x: -8,
             y: i * (cellH + cellGap) + cellH / 2,
-            className: tigercatCore.chartAxisTickTextClasses,
+            className: _tigercatcore.chartAxisTickTextClasses,
             textAnchor: "end",
             dominantBaseline: "middle",
             children: lbl
@@ -236,12 +246,12 @@ var HeatmapChart = ({
           `y-${i}`
         )),
         !shouldRenderCanvas && cells.map((cell, idx) => {
-          const opacity = tigercatCore.getChartElementOpacity(idx, activeIndex, {
+          const opacity = _tigercatcore.getChartElementOpacity.call(void 0, idx, activeIndex, {
             activeOpacity,
             inactiveOpacity
           });
-          return /* @__PURE__ */ jsxRuntime.jsxs(React__default.default.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
+          return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _react2.default.Fragment, { children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "rect",
               {
                 x: cell.x,
@@ -251,9 +261,9 @@ var HeatmapChart = ({
                 rx: cellRadius,
                 fill: cell.fill,
                 opacity,
-                className: tigercatCore.classNames(interactive && "cursor-pointer"),
+                className: _tigercatcore.classNames.call(void 0, interactive && "cursor-pointer"),
                 style: {
-                  transition: "opacity 0.2s ease-out",
+                  transition: "opacity var(--tiger-motion-duration-base,0.2s) var(--tiger-motion-ease-decelerate,ease-out)",
                   rx: `var(--tiger-chart-block-radius, ${cellRadius}px)`
                 },
                 onMouseEnter: (e) => handleMouseEnter(idx, e),
@@ -262,7 +272,7 @@ var HeatmapChart = ({
                 onClick: () => handleClick(idx)
               }
             ),
-            showValues && /* @__PURE__ */ jsxRuntime.jsx(
+            showValues && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "text",
               {
                 x: cell.x + cell.w / 2,
@@ -278,8 +288,8 @@ var HeatmapChart = ({
       ]
     }
   );
-  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ jsxRuntime.jsx(
-    chunk36ATCHP4_js.ChartTooltip,
+  const tooltip = showTooltip && hoverable ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunkUVMQJOTXjs.ChartTooltip,
     {
       content: tooltipContent,
       visible: resolvedHoveredIndex !== null && tooltipContent !== "",
@@ -287,9 +297,9 @@ var HeatmapChart = ({
       y: tooltipPosition.y
     }
   ) : null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block relative", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "inline-block relative", children: [
     chart,
-    shouldRenderCanvas && /* @__PURE__ */ jsxRuntime.jsx(
+    shouldRenderCanvas && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "canvas",
       {
         ref: canvasRef,
@@ -297,7 +307,7 @@ var HeatmapChart = ({
         height: rect.height,
         "data-heatmap-canvas": "true",
         "data-heatmap-render-mode": resolvedRenderMode,
-        className: tigercatCore.classNames(interactive && "cursor-pointer"),
+        className: _tigercatcore.classNames.call(void 0, interactive && "cursor-pointer"),
         style: {
           position: "absolute",
           left: `${rect.x}px`,
@@ -315,4 +325,6 @@ var HeatmapChart = ({
   ] });
 };
 
+
+
 exports.HeatmapChart = HeatmapChart;

package/dist/chunk-HLS4CHWX.mjs

@@ -1,7 +1,6 @@
-import React from 'react';
-import { classNames, getTextClasses } from '@expcat/tigercat-core';
-
 // src/components/Text.tsx
+import React from "react";
+import { classNames, getTextClasses } from "@expcat/tigercat-core";
 var Text = React.memo(
   ({
     tag = "p",
@@ -26,4 +25,6 @@ var Text = React.memo(
 );
 Text.displayName = "Text";
 
-export { Text };
+export {
+  Text
+};

package/dist/chunk-HQ3QOT7H.js

@@ -1,33 +1,38 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/shared/icons.tsx
 
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/shared/icons.tsx
-var StatusIcon = ({ path, className, ...svgProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var StatusIcon = ({ path, className, ...svgProps }) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
   "svg",
   {
     className,
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
-    viewBox: tigercatCore.icon24ViewBox,
+    viewBox: _tigercatcore.icon24ViewBox,
     stroke: "currentColor",
-    strokeWidth: tigercatCore.icon24StrokeWidth,
+    strokeWidth: _tigercatcore.icon24StrokeWidth,
     ...svgProps,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
+    children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "path",
       {
-        strokeLinecap: tigercatCore.icon24PathStrokeLinecap,
-        strokeLinejoin: tigercatCore.icon24PathStrokeLinejoin,
+        strokeLinecap: _tigercatcore.icon24PathStrokeLinecap,
+        strokeLinejoin: _tigercatcore.icon24PathStrokeLinejoin,
         d: path
       }
     )
   }
 );
 var StatusIconWithLoading = ({ path, className, isLoading = false, spinnerClass = "" }) => {
-  const merged = tigercatCore.classNames(className, isLoading && spinnerClass);
-  return /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { path, className: merged });
+  const merged = _tigercatcore.classNames.call(void 0, className, isLoading && spinnerClass);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StatusIcon, { path, className: merged });
 };
 
-exports.StatusIcon = StatusIcon;
-exports.StatusIconWithLoading = StatusIconWithLoading;
+
+
+
+exports.StatusIcon = StatusIcon; exports.StatusIconWithLoading = StatusIconWithLoading;