@expcat/tigercat-react 2.1.1 → 2.1.3

package/dist/chunk-CMOSTUC3.mjs

@@ -0,0 +1,296 @@
+import {
+  useFormItemControlContext
+} from "./chunk-F6T3OLTQ.mjs";
+import {
+  useControlledState
+} from "./chunk-UJTAHHQT.mjs";
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/RichTextEditor.tsx
+import {
+  useRef,
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  forwardRef,
+  useImperativeHandle
+} from "react";
+import {
+  classNames,
+  getRichTextContainerClasses,
+  getToolbarButtonClasses,
+  getEditorAreaClasses,
+  richTextToolbarClasses,
+  richTextToolbarSeparatorClasses,
+  richTextPlaceholderClasses,
+  createDefaultRichTextToolbar,
+  findHotkeyMatch,
+  isContentEmpty,
+  parseHeight,
+  builtinRichTextEngine,
+  isToolbarSeparator,
+  mergeTigerLocale,
+  getRichTextEditorLabels,
+  getToolbarButtons,
+  nextToolbarRovingIndex
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RichTextEditor = forwardRef(
+  function RichTextEditor2({
+    value,
+    defaultValue = "",
+    placeholder,
+    mode = "html",
+    toolbar,
+    height = 300,
+    readOnly = false,
+    disabled = false,
+    onChange,
+    locale,
+    labels: labelsOverride,
+    className,
+    engine,
+    ariaLabel,
+    name,
+    id,
+    onRequestUrl,
+    onFocus,
+    onBlur,
+    ...restProps
+  }, ref) {
+    const config = useTigerConfig();
+    const formItemControl = useFormItemControlContext();
+    const editorRef = useRef(null);
+    const engineRef = useRef(null);
+    const formBoundValue = formItemControl?.value;
+    const resolvedValue = value !== void 0 ? value : typeof formBoundValue === "string" ? formBoundValue : void 0;
+    const [currentContent, setContent] = useControlledState({
+      value: resolvedValue,
+      defaultValue,
+      onChange: (next) => {
+        onChange?.(next);
+        formItemControl?.onChange?.(next);
+      }
+    });
+    const isControlled = value !== void 0;
+    const [activeFormats, setActiveFormats] = useState(/* @__PURE__ */ new Set());
+    const [toolbarIndex, setToolbarIndex] = useState(0);
+    const empty = isContentEmpty(currentContent);
+    const effectiveDisabled = Boolean(disabled) || Boolean(formItemControl?.disabled);
+    const effectiveId = id ?? formItemControl?.id;
+    const effectiveName = name ?? formItemControl?.name;
+    const mergedLocale = useMemo(
+      () => mergeTigerLocale(config.locale, locale),
+      [config.locale, locale]
+    );
+    const labels = useMemo(
+      () => getRichTextEditorLabels(mergedLocale, labelsOverride),
+      [mergedLocale, labelsOverride]
+    );
+    const toolbarItems = useMemo(
+      () => mode === "plain" ? [] : toolbar ?? createDefaultRichTextToolbar(labels),
+      [toolbar, labels, mode]
+    );
+    const toolbarButtons = useMemo(() => getToolbarButtons(toolbarItems), [toolbarItems]);
+    useImperativeHandle(ref, () => editorRef.current);
+    const createOptionsRef = useRef({
+      isControlled,
+      value,
+      defaultValue,
+      mode,
+      readOnly,
+      effectiveDisabled,
+      placeholder,
+      toolbarItems,
+      onRequestUrl,
+      setContent
+    });
+    createOptionsRef.current = {
+      isControlled,
+      value,
+      defaultValue,
+      mode,
+      readOnly,
+      effectiveDisabled,
+      placeholder,
+      toolbarItems,
+      onRequestUrl,
+      setContent
+    };
+    useEffect(() => {
+      if (!editorRef.current) return;
+      const options = createOptionsRef.current;
+      const factory = engine ?? builtinRichTextEngine;
+      const instance = factory.create({
+        element: editorRef.current,
+        initialValue: options.isControlled ? options.value : options.defaultValue,
+        mode: options.mode,
+        readOnly: options.readOnly,
+        disabled: options.effectiveDisabled,
+        placeholder: options.placeholder,
+        toolbar: options.toolbarItems,
+        requestUrl: options.onRequestUrl,
+        notifyChange(html) {
+          createOptionsRef.current.setContent(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, effectiveDisabled);
+    }, [readOnly, effectiveDisabled]);
+    useEffect(() => {
+      engineRef.current?.setMode(mode);
+    }, [mode]);
+    useEffect(() => {
+      engineRef.current?.setToolbar(toolbarItems);
+    }, [toolbarItems]);
+    const execButtonAction = useCallback(
+      (btn) => {
+        if (readOnly || effectiveDisabled) return;
+        engineRef.current?.exec(btn.name);
+      },
+      [readOnly, effectiveDisabled]
+    );
+    const handleKeydown = useCallback(
+      (e) => {
+        if (readOnly || effectiveDisabled) return;
+        const match = findHotkeyMatch(toolbarItems, e.nativeEvent);
+        if (match) {
+          e.preventDefault();
+          execButtonAction(match);
+        }
+      },
+      [toolbarItems, execButtonAction, readOnly, effectiveDisabled]
+    );
+    const handleToolbarKeydown = useCallback(
+      (e) => {
+        const next = nextToolbarRovingIndex(toolbarIndex, toolbarButtons.length, e.key);
+        if (next === null) return;
+        e.preventDefault();
+        setToolbarIndex(next);
+        const root = e.currentTarget.querySelectorAll("button");
+        root[next]?.focus();
+      },
+      [toolbarIndex, toolbarButtons.length]
+    );
+    const containerClasses = useMemo(
+      () => classNames(getRichTextContainerClasses(effectiveDisabled, className)),
+      [effectiveDisabled, className]
+    );
+    const editorAreaClasses = useMemo(() => getEditorAreaClasses(readOnly), [readOnly]);
+    const containerStyle = useMemo(() => {
+      const ht = parseHeight(height);
+      if (!ht) return void 0;
+      return { height: ht };
+    }, [height]);
+    const hostRest = {};
+    const containerRest = {};
+    for (const [key, val] of Object.entries(restProps)) {
+      if (key === "id" || key === "name" || key.startsWith("data-") || key.startsWith("aria-") || key === "onFocus" || key === "onBlur") {
+        hostRest[key] = val;
+      } else {
+        containerRest[key] = val;
+      }
+    }
+    return /* @__PURE__ */ jsxs("div", { className: containerClasses, style: containerStyle, "data-tiger-rte": "", ...containerRest, children: [
+      toolbarItems.length > 0 && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: richTextToolbarClasses,
+          role: "toolbar",
+          "aria-label": labels.formattingToolbarAriaLabel,
+          onKeyDown: handleToolbarKeydown,
+          children: toolbarItems.map((item, idx) => {
+            if (isToolbarSeparator(item)) {
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: richTextToolbarSeparatorClasses,
+                  role: "separator",
+                  "aria-orientation": "vertical"
+                },
+                `sep-${idx}`
+              );
+            }
+            const btn = item;
+            const buttonIndex = toolbarButtons.findIndex((entry) => entry.name === btn.name);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: getToolbarButtonClasses(activeFormats.has(btn.name)),
+                title: btn.tooltip ?? btn.label,
+                "aria-label": btn.label,
+                "aria-pressed": activeFormats.has(btn.name),
+                tabIndex: buttonIndex === toolbarIndex ? 0 : -1,
+                disabled: effectiveDisabled || 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",
+            id: effectiveId,
+            "aria-label": ariaLabel ?? hostRest["aria-label"] ?? labels.editorAriaLabel,
+            "aria-labelledby": hostRest["aria-labelledby"] ?? formItemControl?.labelId,
+            "aria-multiline": true,
+            "aria-readonly": readOnly || void 0,
+            "aria-disabled": effectiveDisabled || void 0,
+            "aria-placeholder": placeholder,
+            "data-placeholder": placeholder,
+            "data-name": effectiveName,
+            tabIndex: readOnly && !effectiveDisabled ? 0 : void 0,
+            onKeyDown: handleKeydown,
+            onFocus,
+            onBlur: (event) => {
+              formItemControl?.onBlur?.();
+              onBlur?.(event);
+            },
+            suppressContentEditableWarning: true,
+            ...hostRest
+          }
+        ),
+        empty && placeholder && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `${richTextPlaceholderClasses} absolute top-0 start-0 p-4 pointer-events-none text-sm`,
+            "aria-hidden": true,
+            children: placeholder
+          }
+        )
+      ] })
+    ] });
+  }
+);
+var RichTextEditor_default = RichTextEditor;
+
+export {
+  RichTextEditor,
+  RichTextEditor_default
+};

package/dist/chunk-CQQRB4QZ.mjs

@@ -0,0 +1,364 @@
+import {
+  useTigerConfig
+} from "./chunk-RUIFGSVN.mjs";
+
+// src/components/ScrollArea.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import {
+  applyScrollAreaWheel,
+  classNames,
+  computeScrollAreaKeyboardDelta,
+  computeScrollAreaState,
+  computeScrollFromThumbOffset,
+  computeScrollFromTrackPoint,
+  createDocumentDragSession,
+  createEmptyScrollAreaState,
+  getScrollAreaBoxStyle,
+  getScrollAreaContentClasses,
+  getScrollAreaGutterStyle,
+  getScrollAreaLabels,
+  getScrollAreaScrollbarClasses,
+  getScrollAreaScrollbarPlacementStyle,
+  getScrollAreaShadowClasses,
+  getScrollAreaShadowSides,
+  getScrollAreaShadowStyle,
+  getScrollAreaThumbClasses,
+  getScrollAreaThumbStyle,
+  getScrollAreaViewportClasses,
+  mergeTigerLocale,
+  observeScrollAreaSize,
+  physicalInlineScrollFromLogical,
+  readInlineDirection,
+  readScrollAreaMetrics,
+  resolveScrollAreaViewportTabIndex,
+  scrollAreaHasFocusable,
+  scrollAreaRootClasses,
+  shouldRenderScrollAreaScrollbar,
+  SCROLL_AREA_MIN_THUMB_SIZE
+} from "@expcat/tigercat-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function peelA11y(rest) {
+  const a11y = {};
+  const root = {};
+  for (const [key, value] of Object.entries(rest)) {
+    if (key === "tabIndex" || key.startsWith("aria-")) a11y[key] = value;
+    else root[key] = value;
+  }
+  return { a11y, root };
+}
+var ScrollArea = forwardRef(function ScrollArea2({
+  direction = "vertical",
+  scrollbar = "auto",
+  scrollbarSize = "md",
+  shadow = false,
+  minThumbSize = SCROLL_AREA_MIN_THUMB_SIZE,
+  height,
+  maxHeight,
+  width,
+  maxWidth,
+  ariaLabel,
+  className,
+  viewportClassName,
+  children,
+  onScroll,
+  locale,
+  ...rest
+}, ref) {
+  const viewportRef = useRef(null);
+  const contentRef = useRef(null);
+  const rootRef = useRef(null);
+  const dragSessionRef = useRef(null);
+  const stateRef = useRef(createEmptyScrollAreaState());
+  const [state, setState] = useState(stateRef.current);
+  const [draggingAxis, setDraggingAxis] = useState(null);
+  const [scrolling, setScrolling] = useState(false);
+  const scrollTimer = useRef(0);
+  const onScrollRef = useRef(onScroll);
+  onScrollRef.current = onScroll;
+  const config = useTigerConfig();
+  const labels = getScrollAreaLabels(mergeTigerLocale(config.locale, locale));
+  const { a11y, root: rootRest } = peelA11y(rest);
+  const syncState = useCallback(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const next = computeScrollAreaState(
+      readScrollAreaMetrics(viewport),
+      minThumbSize,
+      readInlineDirection(viewport)
+    );
+    stateRef.current = next;
+    setState(next);
+  }, [minThumbSize]);
+  const handleScroll = useCallback(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    syncState();
+    setScrolling(true);
+    window.clearTimeout(scrollTimer.current);
+    scrollTimer.current = window.setTimeout(() => setScrolling(false), 600);
+    onScrollRef.current?.({
+      scrollTop: viewport.scrollTop,
+      scrollLeft: viewport.scrollLeft,
+      state: stateRef.current
+    });
+  }, [syncState]);
+  const applyScroll = useCallback(
+    (axis, logical) => {
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      if (axis === "y") viewport.scrollTop = logical;
+      else {
+        viewport.scrollLeft = physicalInlineScrollFromLogical(
+          logical,
+          viewport.scrollWidth,
+          viewport.clientWidth,
+          readInlineDirection(viewport),
+          viewport.scrollLeft
+        );
+      }
+      handleScroll();
+    },
+    [handleScroll]
+  );
+  const startThumbDrag = useCallback(
+    (axis, event) => {
+      const viewport = viewportRef.current;
+      if (!viewport || event.button !== 0) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const axisState = axis === "y" ? stateRef.current.y : stateRef.current.x;
+      const startOffset = axisState.thumbOffset;
+      const rtl = axis === "x" && readInlineDirection(viewport) === "rtl";
+      const startPoint = axis === "y" ? event.clientY : event.clientX;
+      dragSessionRef.current?.dispose();
+      setDraggingAxis(axis);
+      dragSessionRef.current = createDocumentDragSession({
+        startX: event.clientX,
+        startY: event.clientY,
+        ownerDocument: viewport.ownerDocument,
+        pointerId: event.pointerId,
+        pointerTarget: event.currentTarget,
+        lockAxis: axis,
+        onMove: ({ currentX, currentY }) => {
+          const current = axis === "y" ? currentY : currentX;
+          const delta = rtl ? startPoint - current : current - startPoint;
+          const trackSize = axis === "y" ? viewport.clientHeight : viewport.clientWidth;
+          applyScroll(
+            axis,
+            computeScrollFromThumbOffset(
+              startOffset + delta,
+              trackSize,
+              axisState.thumbSize,
+              axis === "y" ? viewport.scrollHeight : viewport.scrollWidth,
+              trackSize
+            )
+          );
+        },
+        onEnd: () => {
+          setDraggingAxis(null);
+          dragSessionRef.current = null;
+        }
+      });
+    },
+    [applyScroll]
+  );
+  const handleTrackPointerDown = useCallback(
+    (axis, event) => {
+      const target = event.target;
+      if (target?.dataset.scrollAreaThumb) {
+        startThumbDrag(axis, event);
+        return;
+      }
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      const rect = event.currentTarget.getBoundingClientRect();
+      const rtl = axis === "x" && readInlineDirection(viewport) === "rtl";
+      const point = axis === "y" ? event.clientY - rect.top : rtl ? rect.right - event.clientX : event.clientX - rect.left;
+      const axisState = axis === "y" ? stateRef.current.y : stateRef.current.x;
+      const trackSize = axis === "y" ? viewport.clientHeight : viewport.clientWidth;
+      applyScroll(
+        axis,
+        computeScrollFromTrackPoint(
+          point,
+          trackSize,
+          axisState.thumbSize,
+          axis === "y" ? viewport.scrollHeight : viewport.scrollWidth,
+          trackSize
+        )
+      );
+    },
+    [applyScroll, startThumbDrag]
+  );
+  const scrollTo = useCallback(
+    (options) => {
+      const viewport = viewportRef.current;
+      if (!viewport) return;
+      const behavior = options.behavior ?? "auto";
+      if (typeof viewport.scrollTo === "function") {
+        viewport.scrollTo({ top: options.top, left: options.left, behavior });
+      } else {
+        if (options.top !== void 0) viewport.scrollTop = options.top;
+        if (options.left !== void 0) viewport.scrollLeft = options.left;
+      }
+      handleScroll();
+    },
+    [handleScroll]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollTo,
+      scrollToTop: (behavior) => scrollTo({ top: 0, behavior }),
+      scrollToBottom: (behavior) => scrollTo({ top: viewportRef.current?.scrollHeight ?? 0, behavior }),
+      getViewport: () => viewportRef.current,
+      getState: () => stateRef.current
+    }),
+    [scrollTo]
+  );
+  useEffect(() => {
+    syncState();
+    return observeScrollAreaSize([viewportRef.current, contentRef.current], syncState);
+  }, [syncState, direction]);
+  useEffect(() => () => dragSessionRef.current?.dispose(), []);
+  const visibleY = shouldRenderScrollAreaScrollbar(scrollbar, direction, "y", state.y);
+  const visibleX = shouldRenderScrollAreaScrollbar(scrollbar, direction, "x", state.x);
+  const overflow = visibleY && state.y.scrollable || visibleX && state.x.scrollable;
+  const hasFocusable = scrollAreaHasFocusable(contentRef.current);
+  const userTabIndex = a11y.tabIndex;
+  const tabIndex = resolveScrollAreaViewportTabIndex({
+    overflow,
+    hasFocusable,
+    userTabIndex
+  });
+  const named = typeof ariaLabel === "string" && ariaLabel || typeof a11y["aria-label"] === "string" && a11y["aria-label"] || typeof a11y["aria-labelledby"] === "string" && a11y["aria-labelledby"];
+  const viewportName = named || (tabIndex === 0 ? labels.ariaLabel : void 0);
+  const handleKeyDown = (event) => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const delta = computeScrollAreaKeyboardDelta(
+      event.key,
+      direction,
+      { width: viewport.clientWidth, height: viewport.clientHeight },
+      readInlineDirection(viewport)
+    );
+    if (!delta) return;
+    event.preventDefault();
+    if ("to" in delta) {
+      if (delta.axis === "y") {
+        applyScroll("y", delta.to === "start" ? 0 : viewport.scrollHeight);
+      } else {
+        applyScroll("x", delta.to === "start" ? 0 : viewport.scrollWidth);
+      }
+      return;
+    }
+    if (delta.axis === "y") applyScroll("y", viewport.scrollTop + delta.delta);
+    else {
+      const logical = computeScrollAreaState(
+        readScrollAreaMetrics(viewport),
+        minThumbSize,
+        readInlineDirection(viewport)
+      ).x.progress * Math.max(viewport.scrollWidth - viewport.clientWidth, 0) + delta.delta;
+      applyScroll("x", logical);
+    }
+  };
+  const shadowSides = useMemo(
+    () => shadow ? getScrollAreaShadowSides(state, direction) : [],
+    [shadow, state, direction]
+  );
+  const renderScrollbar = (axis) => {
+    const axisState = axis === "y" ? state.y : state.x;
+    if (!shouldRenderScrollAreaScrollbar(scrollbar, direction, axis, axisState)) return null;
+    const otherVisible = axis === "y" ? visibleX : visibleY;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: getScrollAreaScrollbarClasses(axis, scrollbarSize, scrollbar),
+        style: getScrollAreaScrollbarPlacementStyle(axis, scrollbarSize, otherVisible),
+        "data-scroll-area-scrollbar": axis,
+        "data-dragging": draggingAxis === axis ? "" : void 0,
+        "aria-hidden": "true",
+        onPointerDown: (event) => handleTrackPointerDown(axis, event),
+        onWheel: (event) => {
+          const viewport = viewportRef.current;
+          if (!viewport) return;
+          applyScrollAreaWheel(event.nativeEvent, viewport);
+          handleScroll();
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: getScrollAreaThumbClasses(axis, draggingAxis === axis),
+            style: getScrollAreaThumbStyle(axis, axisState),
+            "data-scroll-area-thumb": axis
+          }
+        )
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rootRest,
+      ref: rootRef,
+      className: classNames(scrollAreaRootClasses, className),
+      "data-scroll-area": "",
+      "data-scrolling": scrolling ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: viewportRef,
+            className: getScrollAreaViewportClasses(direction, viewportClassName),
+            style: {
+              ...getScrollAreaBoxStyle({ height, maxHeight, width, maxWidth }),
+              ...getScrollAreaGutterStyle(scrollbarSize, visibleX, visibleY)
+            },
+            tabIndex,
+            role: viewportName ? "region" : void 0,
+            "aria-label": a11y["aria-label"] || ariaLabel || (tabIndex === 0 ? labels.ariaLabel : void 0),
+            "aria-labelledby": a11y["aria-labelledby"],
+            "data-scroll-area-viewport": "",
+            onScroll: handleScroll,
+            onKeyDown: handleKeyDown,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: contentRef,
+                className: getScrollAreaContentClasses(direction),
+                "data-scroll-area-content": "",
+                children
+              }
+            )
+          }
+        ),
+        shadowSides.map((side) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: getScrollAreaShadowClasses(side),
+            style: getScrollAreaShadowStyle(side),
+            "data-scroll-area-shadow": side,
+            "aria-hidden": "true"
+          },
+          side
+        )),
+        renderScrollbar("y"),
+        renderScrollbar("x")
+      ]
+    }
+  );
+});
+ScrollArea.displayName = "ScrollArea";
+var ScrollArea_default = ScrollArea;
+
+export {
+  ScrollArea,
+  ScrollArea_default
+};

package/dist/chunk-CX7QZXU5.mjs

@@ -0,0 +1,41 @@
+import {
+  ImagePreview
+} from "./chunk-OYQ6HTLQ.mjs";
+
+// src/components/ImageViewer.tsx
+import {
+  resolveLightboxScaleRange
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var ImageViewer = ({
+  minZoom,
+  maxZoom,
+  minScale,
+  maxScale,
+  onOpenChange,
+  onClose,
+  onCurrentIndexChange,
+  onScaleChange,
+  ...rest
+}) => {
+  const scaleRange = resolveLightboxScaleRange({ minScale, maxScale, minZoom, maxZoom });
+  const handleOpenChange = (next) => {
+    onOpenChange?.(next);
+    if (!next) onClose?.();
+  };
+  return /* @__PURE__ */ jsx(
+    ImagePreview,
+    {
+      ...rest,
+      minScale: scaleRange.minScale,
+      maxScale: scaleRange.maxScale,
+      onOpenChange: handleOpenChange,
+      onCurrentIndexChange,
+      onScaleChange
+    }
+  );
+};
+
+export {
+  ImageViewer
+};