@expcat/tigercat-react 1.0.7 → 1.2.0

package/dist/chunk-3E76U2RG.js

@@ -0,0 +1,149 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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/CodeEditor.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var CodeEditor = ({
+  value: controlledValue,
+  defaultValue = "",
+  language = "plain",
+  theme = "light",
+  readOnly = false,
+  lineNumbers = true,
+  tabSize = 2,
+  placeholder,
+  wordWrap = false,
+  minLines = 3,
+  maxLines = 0,
+  disabled = false,
+  className,
+  style,
+  onChange,
+  highlighter
+}) => {
+  const [internalValue, setInternalValue] = _react.useState.call(void 0, defaultValue);
+  const textareaRef = _react.useRef.call(void 0, null);
+  const code = controlledValue !== void 0 ? controlledValue : internalValue;
+  const lines = _react.useMemo.call(void 0, () => code.split("\n"), [code]);
+  const lineCount = _react.useMemo.call(void 0, () => _tigercatcore.countLines.call(void 0, code), [code]);
+  const lineNums = _react.useMemo.call(void 0, () => _tigercatcore.generateLineNumbers.call(void 0, lineCount), [lineCount]);
+  const containerClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.getCodeEditorContainerClasses.call(void 0, theme, disabled, className),
+    [theme, disabled, className]
+  );
+  const containerStyle = _react.useMemo.call(void 0, () => {
+    const lineHeight = 1.625;
+    const s = { ...style };
+    if (minLines > 0) s.minHeight = `${minLines * lineHeight + 1.5}rem`;
+    if (maxLines > 0) s.maxHeight = `${maxLines * lineHeight + 1.5}rem`;
+    return s;
+  }, [minLines, maxLines, style]);
+  const handleInput = _react.useCallback.call(void 0, 
+    (e) => {
+      const val = e.target.value;
+      setInternalValue(val);
+      _optionalChain([onChange, 'optionalCall', _ => _(val)]);
+    },
+    [onChange]
+  );
+  const handleKeyDown = _react.useCallback.call(void 0, 
+    (e) => {
+      if (e.key === "Tab") {
+        e.preventDefault();
+        const ta = textareaRef.current;
+        if (!ta) return;
+        const result = _tigercatcore.handleTabKey.call(void 0, ta.value, ta.selectionStart, ta.selectionEnd, tabSize);
+        setInternalValue(result.value);
+        _optionalChain([onChange, 'optionalCall', _2 => _2(result.value)]);
+        requestAnimationFrame(() => {
+          ta.selectionStart = result.selectionStart;
+          ta.selectionEnd = result.selectionStart;
+        });
+      }
+    },
+    [tabSize, onChange]
+  );
+  const wrapClass = wordWrap ? "whitespace-pre-wrap break-all" : "";
+  const renderToken = (token, idx) => {
+    const cls = _tigercatcore.getTokenClasses.call(void 0, token.type, theme);
+    return cls ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: cls, children: token.value }, idx) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _react2.default.Fragment, { children: token.value }, idx);
+  };
+  const renderLine = (line, lineIndex) => {
+    if (_optionalChain([highlighter, 'optionalAccess', _3 => _3.highlightLine])) {
+      const html = highlighter.highlightLine(line, language, theme) || (line === "" ? "\n" : "");
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "div",
+        {
+          className: "min-h-[1.625rem]",
+          dangerouslySetInnerHTML: { __html: html }
+        },
+        lineIndex
+      );
+    }
+    const tokens = _tigercatcore.tokenizeLine.call(void 0, line, language);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "min-h-[1.625rem]", children: [
+      tokens.map(renderToken),
+      line === "" ? "\n" : null
+    ] }, lineIndex);
+  };
+  const blockHtml = highlighter && !highlighter.highlightLine && highlighter.highlightCode ? highlighter.highlightCode(code, language, theme) : null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      className: containerClasses,
+      style: containerStyle,
+      "data-language": language,
+      "data-theme": theme,
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex h-full", children: [
+        lineNumbers && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getLineNumberClasses.call(void 0, theme), "aria-hidden": "true", children: lineNums.map((n) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "min-h-[1.625rem]", children: n }, n)) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex-1 overflow-auto", children: [
+          blockHtml !== null ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "div",
+            {
+              className: _tigercatcore.classNames.call(void 0, _tigercatcore.codeEditorHighlightClasses, wrapClass),
+              "aria-hidden": "true",
+              dangerouslySetInnerHTML: { __html: blockHtml }
+            }
+          ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.classNames.call(void 0, _tigercatcore.codeEditorHighlightClasses, wrapClass), "aria-hidden": "true", children: lines.map(renderLine) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "textarea",
+            {
+              ref: textareaRef,
+              className: _tigercatcore.classNames.call(void 0, _tigercatcore.codeEditorTextareaClasses, wrapClass),
+              value: code,
+              onChange: handleInput,
+              onKeyDown: handleKeyDown,
+              readOnly: readOnly || disabled,
+              disabled,
+              placeholder,
+              spellCheck: false,
+              autoCapitalize: "off",
+              autoComplete: "off",
+              autoCorrect: "off",
+              "data-gramm": "false",
+              "aria-label": "Code editor",
+              role: "textbox",
+              "aria-multiline": true
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+var CodeEditor_default = CodeEditor;
+
+
+
+
+exports.CodeEditor = CodeEditor; exports.CodeEditor_default = CodeEditor_default;

package/dist/chunk-3EB42WFR.mjs

@@ -1,8 +1,22 @@
-import { StatusIcon } from './chunk-FLYJVZED.mjs';
-import { useMemo } from 'react';
-import { getResultColorScheme, getResultIconPath, getResultHttpLabel, classNames, resultBaseClasses, resultIconContainerBaseClasses, resultIconClasses, resultTitleClasses, resultSubTitleClasses, resultExtraClasses } from '@expcat/tigercat-core';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import {
+  StatusIcon
+} from "./chunk-FLYJVZED.mjs";
 
+// src/components/Result.tsx
+import { useMemo } from "react";
+import {
+  classNames,
+  resultBaseClasses,
+  resultIconContainerBaseClasses,
+  resultIconClasses,
+  resultTitleClasses,
+  resultSubTitleClasses,
+  resultExtraClasses,
+  getResultColorScheme,
+  getResultIconPath,
+  getResultHttpLabel
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var Result = ({
   status = "info",
   title,
@@ -32,4 +46,6 @@ var Result = ({
   ] });
 };
 
-export { Result };
+export {
+  Result
+};

package/dist/chunk-3HPDLIX3.mjs

@@ -0,0 +1,119 @@
+// src/components/Stepper.tsx
+import { useEffect, useRef } from "react";
+import {
+  stepperBaseClasses,
+  getStepperInputClasses,
+  getStepperButtonClasses,
+  minusPathD,
+  plusPathD,
+  stepperIconViewBox,
+  clampStepperValue,
+  classNames,
+  createRafRepeatActionController
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Stepper = ({
+  value = 0,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  disabled = false,
+  size = "md",
+  precision,
+  className,
+  onChange
+}) => {
+  const repeatControllerRef = useRef(createRafRepeatActionController());
+  const repeatValueRef = useRef(value);
+  const suppressNextClickRef = useRef(false);
+  useEffect(() => () => repeatControllerRef.current.stop(), []);
+  function setValue(v) {
+    const clamped = clampStepperValue(v, min, max, precision);
+    onChange?.(clamped);
+    return clamped;
+  }
+  function stepBy(direction, baseValue = value) {
+    return setValue(direction === "up" ? baseValue + step : baseValue - step);
+  }
+  function handleStepClick(direction) {
+    if (suppressNextClickRef.current) {
+      suppressNextClickRef.current = false;
+      return;
+    }
+    stepBy(direction);
+  }
+  function startStepRepeat(direction) {
+    return (event) => {
+      event.preventDefault();
+      if (disabled) return;
+      if (direction === "down" && value <= min) return;
+      if (direction === "up" && value >= max) return;
+      suppressNextClickRef.current = true;
+      repeatValueRef.current = value;
+      repeatControllerRef.current.start(() => {
+        const baseValue = repeatValueRef.current;
+        const nextValue = stepBy(direction, baseValue);
+        repeatValueRef.current = nextValue;
+        if (nextValue === baseValue) {
+          repeatControllerRef.current.stop();
+        }
+      });
+    };
+  }
+  function stopStepRepeat() {
+    repeatControllerRef.current.stop();
+  }
+  const atMin = value <= min;
+  const atMax = value >= max;
+  const icon = (d) => /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", viewBox: stepperIconViewBox, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d, fillRule: "evenodd", clipRule: "evenodd" }) });
+  return /* @__PURE__ */ jsxs("div", { className: classNames(stepperBaseClasses, className), role: "group", "aria-label": "Stepper", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getStepperButtonClasses(size, disabled || atMin, "left"),
+        disabled: disabled || atMin,
+        "aria-label": "Decrease",
+        onPointerDown: startStepRepeat("down"),
+        onPointerUp: stopStepRepeat,
+        onPointerLeave: stopStepRepeat,
+        onPointerCancel: stopStepRepeat,
+        onClick: () => handleStepClick("down"),
+        children: icon(minusPathD)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: getStepperInputClasses(size),
+        value: precision !== void 0 ? value.toFixed(precision) : String(value),
+        disabled,
+        "aria-label": "Value",
+        onChange: (e) => {
+          const val = Number(e.target.value);
+          if (!Number.isNaN(val)) setValue(val);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: getStepperButtonClasses(size, disabled || atMax, "right"),
+        disabled: disabled || atMax,
+        "aria-label": "Increase",
+        onPointerDown: startStepRepeat("up"),
+        onPointerUp: stopStepRepeat,
+        onPointerLeave: stopStepRepeat,
+        onPointerCancel: stopStepRepeat,
+        onClick: () => handleStepClick("up"),
+        children: icon(plusPathD)
+      }
+    )
+  ] });
+};
+
+export {
+  Stepper
+};

package/dist/chunk-3MRP3XYI.js

@@ -0,0 +1,137 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunkSTTQ5LXXjs = require('./chunk-STTQ5LXX.js');
+
+// src/components/Loading.tsx
+var _react = require('react');
+
+
+
+
+
+
+
+
+
+
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
+var Loading = ({
+  variant = "spinner",
+  size = "md",
+  color = "primary",
+  text,
+  fullscreen = false,
+  delay = 0,
+  background = "rgba(255, 255, 255, 0.9)",
+  customColor,
+  lockScroll = true,
+  className,
+  style,
+  ...props
+}) => {
+  const [visible, setVisible] = _react.useState.call(void 0, delay <= 0);
+  _react.useEffect.call(void 0, () => {
+    _tigercatcore.injectLoadingAnimationStyles.call(void 0, );
+  }, []);
+  _chunkSTTQ5LXXjs.useBodyScrollLock.call(void 0, { enabled: fullscreen && visible && lockScroll });
+  _react.useEffect.call(void 0, () => {
+    if (delay <= 0) {
+      setVisible(true);
+      return;
+    }
+    setVisible(false);
+    const timer = setTimeout(() => setVisible(true), delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+  const containerClasses = _react.useMemo.call(void 0, 
+    () => _tigercatcore.classNames.call(void 0, 
+      fullscreen ? _tigercatcore.loadingFullscreenBaseClasses : _tigercatcore.loadingContainerBaseClasses,
+      className
+    ),
+    [fullscreen, className]
+  );
+  const mergedStyle = _react.useMemo.call(void 0, 
+    () => ({
+      ...customColor ? { color: customColor } : null,
+      ...fullscreen ? { backgroundColor: background } : null,
+      ...style
+    }),
+    [customColor, fullscreen, background, style]
+  );
+  const renderSpinner = () => {
+    const svg = _tigercatcore.getSpinnerSVG.call(void 0, variant);
+    const spinnerClasses = _tigercatcore.getLoadingClasses.call(void 0, variant, size, color, customColor);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "svg",
+      {
+        className: spinnerClasses,
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: svg.viewBox,
+        children: svg.elements.map((el, index) => {
+          if (el.type === "circle") {
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { ...el.attrs }, index);
+          } else if (el.type === "path") {
+            return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { ...el.attrs }, index);
+          }
+          return null;
+        })
+      }
+    );
+  };
+  const renderDots = () => {
+    const colorClass = customColor ? "" : _tigercatcore.loadingColorClasses[color];
+    const steps = [0, 1, 2];
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getLoadingDotsWrapperClasses.call(void 0, size), children: steps.map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getLoadingDotClasses.call(void 0, size, i, colorClass) }, i)) });
+  };
+  const renderBars = () => {
+    const colorClass = customColor ? "" : _tigercatcore.loadingColorClasses[color];
+    const steps = [0, 1, 2];
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getLoadingBarsWrapperClasses.call(void 0, size), children: steps.map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getLoadingBarClasses.call(void 0, size, i, colorClass) }, i)) });
+  };
+  const renderIndicator = () => {
+    switch (variant) {
+      case "dots":
+        return renderDots();
+      case "bars":
+        return renderBars();
+      case "spinner":
+      case "ring":
+      case "pulse":
+      default:
+        return renderSpinner();
+    }
+  };
+  if (!visible) {
+    return null;
+  }
+  const loadingNode = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: containerClasses,
+      style: mergedStyle,
+      role: "status",
+      "aria-label": text || "Loading",
+      "aria-live": "polite",
+      "aria-busy": true,
+      ...props,
+      children: [
+        renderIndicator(),
+        text && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _tigercatcore.getLoadingTextClasses.call(void 0, size, color, customColor), children: text })
+      ]
+    }
+  );
+  if (fullscreen) {
+    return _chunkSTTQ5LXXjs.renderBodyPortal.call(void 0, loadingNode);
+  }
+  return loadingNode;
+};
+
+
+
+exports.Loading = Loading;

package/dist/chunk-3QFHVAZT.js

@@ -1,10 +1,12 @@
-'use strict';
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); 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/ChartGrid.tsx
+var _react = require('react');
 
-var react = require('react');
-var tigercatCore = require('@expcat/tigercat-core');
-var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/ChartGrid.tsx
+
+
+
+var _tigercatcore = require('@expcat/tigercat-core');
+var _jsxruntime = require('react/jsx-runtime');
 var ChartGrid = ({
   xScale,
   yScale,
@@ -20,41 +22,41 @@ var ChartGrid = ({
   className,
   ...props
 }) => {
-  const dasharray = react.useMemo(() => tigercatCore.getChartGridLineDasharray(lineStyle), [lineStyle]);
-  const resolvedXTicks = react.useMemo(() => {
+  const dasharray = _react.useMemo.call(void 0, () => _tigercatcore.getChartGridLineDasharray.call(void 0, lineStyle), [lineStyle]);
+  const resolvedXTicks = _react.useMemo.call(void 0, () => {
     if (!xScale) return [];
-    return tigercatCore.getChartAxisTicks(xScale, { tickCount: xTicks, tickValues: xTickValues });
+    return _tigercatcore.getChartAxisTicks.call(void 0, xScale, { tickCount: xTicks, tickValues: xTickValues });
   }, [xScale, xTicks, xTickValues]);
-  const resolvedYTicks = react.useMemo(() => {
+  const resolvedYTicks = _react.useMemo.call(void 0, () => {
     if (!yScale) return [];
-    return tigercatCore.getChartAxisTicks(yScale, { tickCount: yTicks, tickValues: yTickValues });
+    return _tigercatcore.getChartAxisTicks.call(void 0, yScale, { tickCount: yTicks, tickValues: yTickValues });
   }, [yScale, yTicks, yTickValues]);
   const shouldRenderX = show === "both" || show === "x";
   const shouldRenderY = show === "both" || show === "y";
-  const xRange = xScale?.range;
-  const yRange = yScale?.range;
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { ...props, className: tigercatCore.classNames(className), transform: `translate(${x}, ${y})`, children: [
-    shouldRenderX && xScale && yRange ? resolvedXTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
+  const xRange = _optionalChain([xScale, 'optionalAccess', _ => _.range]);
+  const yRange = _optionalChain([yScale, 'optionalAccess', _2 => _2.range]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "g", { ...props, className: _tigercatcore.classNames.call(void 0, className), transform: `translate(${x}, ${y})`, children: [
+    shouldRenderX && xScale && yRange ? resolvedXTicks.map((tick) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "line",
       {
         x1: tick.position,
         y1: yRange[0],
         x2: tick.position,
         y2: yRange[1],
-        className: tigercatCore.chartGridLineClasses,
+        className: _tigercatcore.chartGridLineClasses,
         strokeWidth,
         strokeDasharray: dasharray
       },
       `x-${tick.value}`
     )) : null,
-    shouldRenderY && yScale && xRange ? resolvedYTicks.map((tick) => /* @__PURE__ */ jsxRuntime.jsx(
+    shouldRenderY && yScale && xRange ? resolvedYTicks.map((tick) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "line",
       {
         x1: xRange[0],
         y1: tick.position,
         x2: xRange[1],
         y2: tick.position,
-        className: tigercatCore.chartGridLineClasses,
+        className: _tigercatcore.chartGridLineClasses,
         strokeWidth,
         strokeDasharray: dasharray
       },
@@ -64,5 +66,7 @@ var ChartGrid = ({
 };
 var ChartGrid_default = ChartGrid;
 
-exports.ChartGrid = ChartGrid;
-exports.ChartGrid_default = ChartGrid_default;
+
+
+
+exports.ChartGrid = ChartGrid; exports.ChartGrid_default = ChartGrid_default;

package/dist/{chunk-IPLK4AIE.mjs → chunk-3QPCQH62.mjs}

@@ -1,7 +1,15 @@
-import { ImagePreview } from './chunk-HLJQZUIY.mjs';
-import { createContext, useState, useRef, useCallback, useMemo } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import {
+  ImagePreview
+} from "./chunk-6GYT3EZD.mjs";
 
+// src/components/ImageGroup.tsx
+import { useState, useCallback, useMemo, createContext, useRef } from "react";
+import {
+  getImageGroupClasses,
+  registerImageGroupItem,
+  unregisterImageGroupItem
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
 var ImageGroupContext = createContext(null);
 var ImageGroup = ({
   preview = true,
@@ -13,12 +21,12 @@ var ImageGroup = ({
   const [previewIndex, setPreviewIndex] = useState(0);
   const imagesRef = useRef([]);
   const register = useCallback((src) => {
-    const idx = imagesRef.current.length;
-    imagesRef.current = [...imagesRef.current, src];
-    return idx;
+    const result = registerImageGroupItem(imagesRef.current, src);
+    imagesRef.current = result.items;
+    return result.index;
   }, []);
   const unregister = useCallback((src) => {
-    imagesRef.current = imagesRef.current.filter((s) => s !== src);
+    imagesRef.current = unregisterImageGroupItem(imagesRef.current, src);
   }, []);
   const openPreview = useCallback(
     (index) => {
@@ -33,7 +41,7 @@ var ImageGroup = ({
     () => ({ register, unregister, openPreview }),
     [register, unregister, openPreview]
   );
-  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: className || "tiger-image-group", role: "group", children: [
+  return /* @__PURE__ */ jsx(ImageGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: getImageGroupClasses(className), role: "group", children: [
     children,
     preview && /* @__PURE__ */ jsx(
       ImagePreview,
@@ -51,4 +59,7 @@ var ImageGroup = ({
   ] }) });
 };
 
-export { ImageGroup, ImageGroupContext };
+export {
+  ImageGroupContext,
+  ImageGroup
+};