@dotss/tictoccroc 0.0.0

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './shared/components';
+export * from './shared/hooks';
+export * from './shared/utils';

package/dist/index.mjs

@@ -0,0 +1,54 @@
+import "./shared/components/Scheduler/Scheduler.mjs";
+import { default as d } from "./shared/components/Scheduler/ScheduleEvent/ScheduleEvent.mjs";
+import { default as g } from "./shared/components/Scheduler/ScheduleBlock/ScheduleBlock.mjs";
+import { getAvailableDateRange as c } from "./shared/components/Scheduler/Scheduler.utils.mjs";
+import "react/jsx-runtime";
+import "react";
+import "@thedotscorp/ui/core/useTheme";
+import "@thedotscorp/ui/Dialog";
+import "@thedotscorp/ui/Flexbox";
+import "@thedotscorp/ui/Typography";
+import "./shared/components/Image/Image.mjs";
+import "@thedotscorp/ui";
+import { default as S } from "./shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
+import { default as b } from "./shared/components/ImageZoomDialog/ImageZoomDialogContent/ImageZoomDialogContent.mjs";
+import { default as k } from "./shared/components/ImageZoomDialog/ImageZoomDialogFooter/ImageZoomDialogFooter.mjs";
+import { default as R } from "./shared/components/ImageZoomDialog/ImageZoomDialogToolbar/ImageZoomDialogToolbar.mjs";
+import { default as v } from "./shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
+import "./shared/components/TimePicker/TimePicker.mjs";
+import { default as B } from "./shared/components/Roller/RollerBlock/RollerBlock.mjs";
+import { default as C } from "./shared/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import { default as Q } from "./shared/utils/getImageUrl/getImageUrl.mjs";
+import { default as w } from "./shared/utils/isServer/isServer.mjs";
+import { default as L } from "./shared/utils/getTimeRange/getTimeRange.mjs";
+import { default as V } from "./shared/utils/getDateRange/getDateRange.mjs";
+import { default as z } from "./shared/utils/isAndroid/isAndroid.mjs";
+import { default as H } from "./shared/utils/isApp/isApp.mjs";
+import { default as K } from "./shared/utils/isDesktop/isDesktop.mjs";
+import { default as N } from "./shared/utils/birthDateToAge/birthDateToAge.mjs";
+import { default as P } from "./shared/utils/objectToQueryString/objectToQueryString.mjs";
+import { default as X } from "./shared/utils/getVimeoId/getVimeoId.mjs";
+import { default as _ } from "./shared/utils/parseQueryString/parseQueryString.mjs";
+export {
+  v as CarouselSlide,
+  b as ImageZoomDialogContent,
+  k as ImageZoomDialogFooter,
+  R as ImageZoomDialogToolbar,
+  B as RollerBlock,
+  g as ScheduleBlock,
+  d as ScheduleEvent,
+  S as SwiperBlock,
+  N as birthDateToAge,
+  c as getAvailableDateRange,
+  V as getDateRange,
+  Q as getImageUrl,
+  L as getTimeRange,
+  X as getVimeoId,
+  z as isAndroid,
+  H as isApp,
+  K as isDesktop,
+  w as isServer,
+  P as objectToQueryString,
+  _ as parseQueryString,
+  C as useIsomorphicLayoutEffect
+};

package/dist/shared/components/Calendar/Calendar.d.ts

@@ -0,0 +1,10 @@
+import { DatePickerProps, DateValue } from 'node_modules/@thedotscorp/ui/DatePicker/DatePicker';
+import { FlexboxProps } from 'node_modules/@thedotscorp/ui/Flexbox/Flexbox';
+export interface CalendarProps extends Omit<FlexboxProps, 'onChange' | 'value'>, Pick<DatePickerProps, 'onChange' | 'value'> {
+    startDate?: DateValue;
+    endDate?: DateValue;
+    weekHeadInlineCSS?: FlexboxProps['inlineCSS'];
+    datePickerProps?: Omit<DatePickerProps, 'onChange' | 'value' | 'date'>;
+}
+declare const Calendar: import('react').ForwardRefExoticComponent<Omit<CalendarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default Calendar;

package/dist/shared/components/Calendar/Calendar.mjs

@@ -0,0 +1,80 @@
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import u from "@thedotscorp/ui/DatePicker";
+import x from "../../utils/getDateRange/getDateRange.mjs";
+import t from "@emotion/styled";
+const $ = t.div`
+  display: flex;
+  flex-direction: column;
+`, b = t.div`
+  position: sticky;
+  top: 0;
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ theme: { spacing: e } }) => e.content(4)}px;
+  background-color: ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e.white};
+  border-bottom: 1px solid
+    ${({
+  theme: {
+    palette: { grey: e }
+  }
+}) => e[10]};
+  z-index: 1;
+
+  & > span {
+    margin: 9.5px 0;
+    flex-grow: 1;
+    text-align: center;
+    ${({
+  theme: {
+    palette: { grey: e },
+    typography: { b4M: r }
+  }
+}) => ({
+  fontSize: r.size,
+  fontWeight: r.weight,
+  lineHeight: r.lineHeight,
+  letterSpacing: r.letterSpacing,
+  color: e[50]
+})};
+  }
+`, y = t.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: { spacing: e } }) => e.content(6)}px;
+  padding: ${({ theme: { spacing: e } }) => e.content(5)}px
+    ${({ theme: { spacing: e } }) => e.content(4)}px;
+`, S = f(function({ startDate: r, endDate: o, onChange: i, value: c, weekHeadInlineCSS: d, datePickerProps: p, inlineCSS: h, ...m }, s) {
+  const g = x(r, o, {
+    format: "YYYY-MM"
+  }).map((a) => new Date(a.value));
+  return /* @__PURE__ */ n($, { ref: s, role: "group", "aria-label": "날짜 선택", ...m, css: h, children: [
+    /* @__PURE__ */ n(b, { css: d, role: "row", children: [
+      /* @__PURE__ */ l("span", { role: "columnheader", "aria-label": "일요일", children: "일" }),
+      /* @__PURE__ */ l("span", { role: "columnheader", "aria-label": "월요일", children: "월" }),
+      /* @__PURE__ */ l("span", { role: "columnheader", "aria-label": "화요일", children: "화" }),
+      /* @__PURE__ */ l("span", { role: "columnheader", "aria-label": "수요일", children: "수" }),
+      /* @__PURE__ */ l("span", { role: "columnheader", "aria-label": "목요일", children: "목" }),
+      /* @__PURE__ */ l("span", { role: "columnheader", "aria-label": "금요일", children: "금" }),
+      /* @__PURE__ */ l("span", { role: "columnheader", "aria-label": "토요일", children: "토" })
+    ] }),
+    /* @__PURE__ */ l(y, { children: g.map((a) => /* @__PURE__ */ l(
+      u,
+      {
+        ...p,
+        date: a,
+        onChange: i,
+        value: c,
+        "aria-label": `${a.getFullYear()}년 ${a.getMonth() + 1}월 달력`
+      },
+      `calendar-date-picker-${a.getFullYear()}-${a.getMonth()}`
+    )) })
+  ] });
+});
+export {
+  S as default
+};

package/dist/shared/components/Calendar/index.d.ts

@@ -0,0 +1,2 @@
+import { default as Calendar } from './Calendar';
+export default Calendar;

package/dist/shared/components/Calendar/index.mjs

@@ -0,0 +1,4 @@
+import r from "./Calendar.mjs";
+export {
+  r as default
+};

package/dist/shared/components/Carousel/Carousel.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'node_modules/@thedotscorp/ui/Flexbox/Flexbox';
+export interface CarouselPaginationProps {
+    page: number;
+    totalPages: number;
+    onChange: (value: number) => void;
+}
+export interface CarouselProps extends FlexboxProps {
+    spacing?: number;
+    edgeSpacing?: number;
+    rowCount?: number;
+    step?: number;
+    renderPagination?: (props: CarouselPaginationProps) => ReactNode;
+}
+declare function Carousel({ children, spacing, edgeSpacing, rowCount, step, renderPagination, ...props }: CarouselProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default Carousel;

package/dist/shared/components/Carousel/Carousel.mjs

@@ -0,0 +1,205 @@
+import { jsxs as ce, jsx as k } from "react/jsx-runtime";
+import { useState as J, useRef as m, Children as Q, isValidElement as ie, useCallback as ae, useEffect as C, cloneElement as le } from "react";
+import { Flexbox as W } from "@thedotscorp/ui";
+import ue from "@thedotscorp/ui/core/useTheme";
+import fe from "./CarouselSlide/CarouselSlide.mjs";
+function ve({
+  children: Z,
+  spacing: _ = 2,
+  edgeSpacing: K = 4,
+  rowCount: a = 2,
+  step: x = 1,
+  renderPagination: A,
+  ...O
+}) {
+  const { spacing: z } = ue(), [l, $] = J(1), [w, ee] = J(0), L = m(null), o = m(null), u = m(null), I = m(0), Y = m(0), R = m(0), b = m(!1), T = m(!0), D = m(0), v = z.content(_), y = z.content(K), X = Q.toArray(Z).filter(ie).filter((e) => e.type === fe), M = X.length, F = (e, t) => {
+    I.current = e, Y.current = t;
+  }, P = () => {
+    var s;
+    if (!o.current || !b.current) return;
+    const e = (((s = u.current) == null ? void 0 : s.offsetWidth) || 0) * 0.01, t = -R.current >= e && l + 1 <= w, r = -R.current <= -e && l - 1 >= 1;
+    b.current = !1, T.current = !1, R.current = 0;
+    let c = l;
+    t ? c = l + 1 : r ? c = l - 1 : T.current = !0, o.current.style.transition = "transform 0.2s", o.current.style.cursor = "grab", S(c);
+  }, S = ae(
+    (e, t = 0) => {
+      var h, g, E;
+      if (!o.current) return;
+      $(e);
+      const r = e === 1, c = e === w, s = (((h = L.current) == null ? void 0 : h.offsetWidth) || 0) - y, f = (((E = (g = u.current) == null ? void 0 : g.children[0]) == null ? void 0 : E.clientWidth) || 0) + v, i = (s - f * Math.floor(s / f) - v) / 2, d = f * (e - 1) - i;
+      r ? o.current.style.transform = `translate3d(${t}px, 0, 0)` : c ? o.current.style.transform = `translate3d(${-(d - i) + t}px, 0, 0)` : o.current.style.transform = `translate3d(${-d + t}px, 0, 0)`;
+    },
+    [y, v, w]
+  ), te = (e) => F(e.touches[0].clientX, e.touches[0].clientY), ne = (e) => {
+    b.current = !0, F(e.clientX, e.clientY);
+  }, re = (e) => {
+    o.current && (o.current.style.transition = "transform 0.2s", o.current.style.cursor = "grab", S(e));
+  }, se = (e) => (t) => {
+    var N, U, q, G, V, B;
+    t.stopPropagation();
+    const r = Array.from(((N = u.current) == null ? void 0 : N.children) || []).indexOf(t.currentTarget), c = (((U = L.current) == null ? void 0 : U.offsetWidth) || 0) - y * 2, s = (((G = (q = u.current) == null ? void 0 : q.children[0]) == null ? void 0 : G.clientWidth) || 0) + v, i = Math.floor(c / (s / x)) * a, d = (l - 1) * i, h = d + i - 1, g = ((V = u.current) == null ? void 0 : V.children.length) || 0, E = r % a, j = Math.floor(r / a);
+    let p = r;
+    switch (t.key) {
+      case "ArrowRight": {
+        t.preventDefault();
+        const n = (j + 1) * a + E;
+        n < g && (p = n);
+        break;
+      }
+      case "ArrowLeft": {
+        t.preventDefault();
+        const n = (j - 1) * a + E;
+        n >= 0 && (p = n);
+        break;
+      }
+      case "ArrowDown": {
+        t.preventDefault();
+        const n = r + 1;
+        n < g && n % a > E && (p = n);
+        break;
+      }
+      case "ArrowUp": {
+        t.preventDefault();
+        const n = r - 1;
+        n >= 0 && n % a < E && (p = n);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        t.preventDefault(), t.currentTarget.click();
+        return;
+      }
+      default:
+        return;
+    }
+    if (p >= d && p <= h) {
+      const n = (B = u.current) == null ? void 0 : B.children[p];
+      n == null || n.focus();
+      return;
+    }
+    p >= 0 && p < g && (D.current = requestAnimationFrame(() => {
+      var H;
+      const n = (H = u.current) == null ? void 0 : H.children[p];
+      n == null || n.focus();
+    })), e == null || e(t);
+  }, oe = (e) => {
+    e.propertyName === "transform" && (T.current = !0);
+  };
+  return C(() => {
+    const e = () => S(l);
+    return e(), window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, [S, l]), C(() => {
+    const e = () => {
+      var i, d, h;
+      const t = (((i = L.current) == null ? void 0 : i.offsetWidth) || 0) - y * 2, r = (((h = (d = u.current) == null ? void 0 : d.children[0]) == null ? void 0 : h.clientWidth) || 0) + v, c = Math.floor(t / (r / x)), s = Math.ceil(M / (a || 1)), f = Math.max(s - (c - 1), 1);
+      $((g) => g > f ? f : g), ee(f);
+    };
+    return e(), window.addEventListener("resize", e), () => {
+      window.removeEventListener("resize", e);
+    };
+  }, [y, v, M, x, a]), C(() => {
+    const e = o.current, t = (s, f, i) => {
+      if (!e || w <= 1) return;
+      e.style.transition = "none", e.style.cursor = "grabbing", R.current = s - I.current;
+      const d = f - Y.current, h = 5;
+      b.current = b.current || Math.abs(R.current) > h && Math.abs(d) < h * 2, b.current && (i.cancelable && (i.stopPropagation(), i.preventDefault()), e.style.transition = "none", e.style.cursor = "grabbing", S(l, R.current));
+    }, r = (s) => t(s.touches[0].clientX, s.touches[0].clientY, s), c = (s) => {
+      b.current && t(s.clientX, s.clientY, s);
+    };
+    return e && (e.addEventListener("mousemove", c), e.addEventListener("touchmove", r)), () => {
+      e && (e.removeEventListener("mousemove", c), e.removeEventListener("touchmove", r));
+    };
+  }, [S, l, w]), C(() => () => {
+    D.current && cancelAnimationFrame(D.current);
+  }, []), C(() => {
+    const e = u.current, t = (r) => {
+      T.current || r.stopPropagation();
+    };
+    return e == null || e.addEventListener("click", t), () => {
+      e == null || e.removeEventListener("click", t);
+    };
+  }, []), /* @__PURE__ */ ce(
+    W,
+    {
+      flexDirection: "column",
+      role: "group",
+      "aria-roledescription": "carousel",
+      "aria-label": "슬라이더",
+      flexGrow: 1,
+      inlineCSS: {
+        width: "100%"
+      },
+      ...O,
+      children: [
+        /* @__PURE__ */ k(
+          W,
+          {
+            ref: L,
+            inlineCSS: {
+              overflow: "hidden"
+            },
+            children: /* @__PURE__ */ k(
+              W,
+              {
+                ref: o,
+                onMouseDown: ne,
+                onMouseUp: P,
+                onMouseLeave: P,
+                onTouchStart: te,
+                onTouchEnd: P,
+                onTouchCancel: P,
+                onTransitionEnd: oe,
+                inlineCSS: {
+                  gap: v,
+                  paddingLeft: y,
+                  paddingRight: y,
+                  transition: "transform 0.2s",
+                  transform: "translate3d(0, 0, 0)",
+                  cursor: "grab"
+                },
+                children: /* @__PURE__ */ k(
+                  W,
+                  {
+                    ref: u,
+                    inlineCSS: {
+                      gap: v,
+                      display: "grid",
+                      gridTemplateRows: "min-content",
+                      transform: "translate3d(0, 0, 0)"
+                    },
+                    children: Q.map(
+                      X,
+                      (e, t) => {
+                        var r;
+                        return le(e, {
+                          role: "group",
+                          tabIndex: 0,
+                          "aria-roledescription": "slide",
+                          "aria-label": `${M}개 중 ${t + 1}번째 슬라이드`,
+                          "aria-posinset": t + 1,
+                          "aria-setsize": M,
+                          onKeyDown: se(e.props.onKeyDown),
+                          ...e.props,
+                          style: {
+                            ...(r = e.props) == null ? void 0 : r.style,
+                            gridRow: `${t % a + 1} / ${t % a + 1}`
+                          }
+                        });
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        ),
+        typeof A == "function" && A({ page: l, totalPages: w, onChange: re })
+      ]
+    }
+  );
+}
+export {
+  ve as default
+};

package/dist/shared/components/Carousel/CarouselSlide/CarouselSlide.d.ts

@@ -0,0 +1,4 @@
+import { FlexboxProps } from 'node_modules/@thedotscorp/ui/Flexbox/Flexbox';
+export type CarouselSlideProps = FlexboxProps;
+declare function CarouselSlide({ children, ...props }: CarouselSlideProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default CarouselSlide;

package/dist/shared/components/Carousel/CarouselSlide/CarouselSlide.mjs

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import t from "@thedotscorp/ui/Flexbox";
+function l({ children: o, ...r }) {
+  return /* @__PURE__ */ e(t, { ...r, children: o });
+}
+export {
+  l as default
+};

package/dist/shared/components/Carousel/CarouselSlide/index.d.ts

@@ -0,0 +1,3 @@
+import { default as CarouselSlide } from './CarouselSlide';
+export type { CarouselSlideProps } from './CarouselSlide';
+export default CarouselSlide;

package/dist/shared/components/Carousel/CarouselSlide/index.mjs

@@ -0,0 +1,4 @@
+import o from "./CarouselSlide.mjs";
+export {
+  o as default
+};

package/dist/shared/components/Carousel/index.d.ts

@@ -0,0 +1,4 @@
+import { CarouselProps, default as Carousel } from './Carousel';
+export { default as CarouselSlide, type CarouselSlideProps } from './CarouselSlide';
+export type { CarouselProps };
+export default Carousel;

package/dist/shared/components/Carousel/index.mjs

@@ -0,0 +1,6 @@
+import o from "./Carousel.mjs";
+import { default as l } from "./CarouselSlide/CarouselSlide.mjs";
+export {
+  l as CarouselSlide,
+  o as default
+};

package/dist/shared/components/Image/Image.d.ts

@@ -0,0 +1,20 @@
+import { HTMLProps } from 'react';
+import { FlexboxProps } from '@thedotscorp/ui/Flexbox/Flexbox';
+export interface ImageProps extends HTMLProps<HTMLImageElement> {
+    src: string;
+    width?: number;
+    height?: number;
+    fit?: string;
+    position?: string;
+    scale?: number;
+    lazy?: boolean;
+    borderRadius?: number | string;
+    alt: string;
+    onLazyLoad?: () => void;
+    disabledResizing?: boolean;
+    withIntrinsicRatio?: boolean;
+    wrapperProps?: FlexboxProps;
+    enableFallback?: boolean;
+}
+declare const Image: import('react').ForwardRefExoticComponent<Omit<ImageProps, "ref"> & import('react').RefAttributes<HTMLImageElement>>;
+export default Image;

package/dist/shared/components/Image/Image.mjs

@@ -0,0 +1,181 @@
+import { jsxs as I, jsx as d } from "react/jsx-runtime";
+import { forwardRef as V, useRef as p, useImperativeHandle as _, useState as x, useEffect as T } from "react";
+import W from "@thedotscorp/ui/Flexbox";
+import $ from "@thedotscorp/ui/Skeleton";
+import k from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import q from "../../utils/getImageUrl/getImageUrl.mjs";
+const A = 100, X = V(
+  ({
+    src: H,
+    width: t,
+    height: o,
+    fit: O = "cover",
+    position: j = "center",
+    alt: y,
+    scale: z = 2,
+    onLoad: v,
+    onLazyLoad: m,
+    lazy: S = !1,
+    borderRadius: l,
+    disabledResizing: B = !1,
+    withIntrinsicRatio: L = !1,
+    enableFallback: g = !1,
+    wrapperProps: s = {},
+    ...r
+  }, F) => {
+    const c = p(null), E = p(!1), a = p(null);
+    _(F, () => a.current);
+    const [f, R] = x(!1), [C, u] = x(!1), w = q({ src: H, width: t, height: o, fit: O, position: j, scale: z, disabledResizing: B }), h = (e) => {
+      u(!0), typeof v == "function" && v(e);
+    };
+    return T(() => {
+      if (S && c.current) {
+        const e = c.current, b = () => {
+          if (!e) return !1;
+          const n = e.getBoundingClientRect();
+          return n.bottom >= 0 && n.top <= (window.innerHeight || document.documentElement.clientHeight) + A;
+        }, i = () => {
+          b() && R(!0);
+        }, M = () => {
+          var n;
+          (n = window.appScreenContent) == null || n.addEventListener("scroll", i), window.addEventListener("resize", i), window.addEventListener("orientationchange", i);
+        }, U = () => {
+          var n;
+          (n = window.appScreenContent) == null || n.removeEventListener("scroll", i), window.removeEventListener("resize", i), window.removeEventListener("orientationchange", i);
+        };
+        return i(), M(), U;
+      }
+    }), T(() => {
+      typeof m == "function" && f && !E.current && (E.current = !0, m());
+    }, [m, f]), k(() => {
+      const e = a.current;
+      return e != null && e.complete ? (e.style.transition = "none", e.style.opacity = "1", u(!0)) : e && (e.style.transition = "opacity 0.3s", e.style.opacity = "0", e.onload = () => {
+        e.style.opacity = "1", u(!0), e.onload = null;
+      }), () => {
+        e && (e.onload = null);
+      };
+    }, [f]), S ? /* @__PURE__ */ I(
+      W,
+      {
+        ...s,
+        ref: c,
+        inlineCSS: L ? {
+          position: "relative",
+          paddingTop: `calc(100% / ${t} * ${o})`,
+          minWidth: "100%",
+          borderRadius: l,
+          overflow: "hidden",
+          ...s.inlineCSS
+        } : {
+          position: "relative",
+          width: t,
+          minWidth: t,
+          height: o,
+          borderRadius: l,
+          overflow: "hidden",
+          ...s.inlineCSS || {}
+        },
+        children: [
+          g && /* @__PURE__ */ d(
+            $,
+            {
+              width: "100%",
+              height: "100%",
+              inlineCSS: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                opacity: C ? 0 : 1,
+                transition: "opacity 0.3s"
+              }
+            }
+          ),
+          f && /* @__PURE__ */ d(
+            "img",
+            {
+              ref: a,
+              src: w,
+              alt: y,
+              width: t,
+              height: o,
+              onLoad: h,
+              ...r,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                transition: "opacity 0.3s",
+                ...r.style
+              }
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ I(
+      W,
+      {
+        ...s,
+        ref: c,
+        inlineCSS: L ? {
+          position: "relative",
+          paddingTop: `calc(100% / ${t} * ${o})`,
+          minWidth: "100%",
+          transition: "padding-top 0.2s",
+          borderRadius: l,
+          overflow: "hidden",
+          ...s.inlineCSS
+        } : {
+          position: "relative",
+          width: t,
+          minWidth: t,
+          height: o,
+          borderRadius: l,
+          overflow: "hidden",
+          ...s.inlineCSS
+        },
+        children: [
+          g && /* @__PURE__ */ d(
+            $,
+            {
+              width: "100%",
+              height: "100%",
+              inlineCSS: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                opacity: C ? 0 : 1,
+                transition: "opacity 0.3s"
+              }
+            }
+          ),
+          /* @__PURE__ */ d(
+            "img",
+            {
+              ref: a,
+              src: w,
+              alt: y,
+              width: t,
+              height: o,
+              onLoad: h,
+              ...r,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                transition: "opacity 0.3s",
+                ...r.style
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  X as default
+};

package/dist/shared/components/Image/index.d.ts

@@ -0,0 +1,3 @@
+import { ImageProps, default as Image } from './Image';
+export type { ImageProps };
+export default Image;

package/dist/shared/components/Image/index.mjs

@@ -0,0 +1,4 @@
+import e from "./Image.mjs";
+export {
+  e as default
+};

package/dist/shared/components/ImageZoomDialog/ImageBlock/ImageBlock.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ImageProps } from '../../Image';
+export interface ImageBlockProps extends Omit<ImageProps, 'wrapperProps' | 'style' | 'onLoad'> {
+    fallback?: ReactNode;
+    containerHeight: string;
+}
+declare function ImageBlock({ fallback, containerHeight, ...props }: ImageBlockProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default ImageBlock;