@dotss/tictoccroc 0.0.13 → 0.0.15

package/dist/shared/components/ChatKit/SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.d.ts

@@ -0,0 +1,7 @@
+export interface DirectTradeRiskInfoBottomSheetProps {
+    open: boolean;
+    onClose: () => void;
+    onInquire: () => void;
+}
+declare function DirectTradeRiskInfoBottomSheet({ open, onClose, onInquire }: DirectTradeRiskInfoBottomSheetProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default DirectTradeRiskInfoBottomSheet;

package/dist/shared/components/ChatKit/SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs

@@ -0,0 +1,120 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { BottomSheet as h, BottomSheetTitle as m, BottomSheetContent as s, Typography as t, Flexbox as o, Icon as a, Button as l, BottomSheetAction as p } from "@dotss/ui";
+import S from "@dotss/ui/core/useTheme";
+function x({
+  open: c,
+  onClose: i,
+  onInquire: d
+}) {
+  const {
+    palette: { background: g },
+    spacing: r
+  } = S();
+  return /* @__PURE__ */ n(h, { id: "system-message-action", open: c, onClose: i, children: [
+    /* @__PURE__ */ e(m, { onClose: i, children: "직거래는 왜 하면 안되나요?" }),
+    /* @__PURE__ */ n(s, { children: [
+      /* @__PURE__ */ n(t, { tag: "p", variant: "h3R", textAlign: "center", children: [
+        /* @__PURE__ */ e(t, { tag: "strong", variant: "h3B", color: "etc.red", children: "직거래" }),
+        ", 선생님에게 더 불리한 선택이에요."
+      ] }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "aside",
+          role: "note",
+          mt: 3,
+          pt: 4,
+          pb: 4,
+          pl: 3,
+          pr: 3,
+          inlineCSS: {
+            borderRadius: 12,
+            backgroundColor: g.primary
+          },
+          children: /* @__PURE__ */ n(
+            o,
+            {
+              tag: "ul",
+              flexDirection: "column",
+              gap: 1,
+              inlineCSS: {
+                listStyle: "none",
+                padding: 0,
+                paddingLeft: r.content(2),
+                "& li:before": {
+                  content: '"•"',
+                  display: "inline-block",
+                  maxWidth: 4,
+                  fontSize: 18,
+                  marginRight: r.content(2)
+                }
+              },
+              children: [
+                /* @__PURE__ */ e(t, { tag: "li", variant: "b4R", color: "grey.70", children: "부모님과의 갈등, 수업 취소, 아이 안전사고 발생 시 째깍악어로부터 어떠한 도움도 받을 수 없으며" }),
+                /* @__PURE__ */ e(t, { tag: "li", variant: "b4R", color: "grey.70", children: "직거래가 적발될 경우 경고 없이 활동이 어렵고 바로 계약이 해지돼요" }),
+                /* @__PURE__ */ e(t, { tag: "li", variant: "b4R", color: "grey.70", children: "또한, 영업 방해로 간주되어 법적 조치가 진행될 수 있어요" })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ n(
+        o,
+        {
+          tag: "section",
+          alignItems: "flex-start",
+          gap: 2,
+          mt: 3,
+          inlineCSS: {
+            position: "relative"
+          },
+          children: [
+            /* @__PURE__ */ e(
+              a,
+              {
+                name: "InformationLine",
+                color: "etc.orange",
+                size: "small",
+                inlineCSS: { flexShrink: 0 }
+              }
+            ),
+            /* @__PURE__ */ n(t, { tag: "p", variant: "b4R", color: "etc.orange", children: [
+              "부모님의 직거래 제안이 왔나요? 당황하지 마시고 째깍악어 운영본부에 알려주세요.",
+              /* @__PURE__ */ e(
+                t,
+                {
+                  tag: "span",
+                  "aria-hidden": !0,
+                  inlineCSS: {
+                    display: "inline-block",
+                    minWidth: 70
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              l,
+              {
+                variant: "text",
+                size: "xSmall",
+                color: "secondary",
+                endAdornment: /* @__PURE__ */ e(a, { name: "ChevronRightLine" }),
+                onClick: d,
+                inlineCSS: {
+                  position: "absolute",
+                  right: 0,
+                  bottom: -2
+                },
+                children: "1:1 문의"
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(l, { size: "large", onClick: i, children: "이해했어요" }) })
+  ] });
+}
+export {
+  x as default
+};

package/dist/shared/components/ChatKit/SystemMessage/SystemMessage.d.ts

@@ -0,0 +1,15 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export type SystemMessageType = 'NEW_CHAT_ROOM_CREATED' | 'DIRECT_TRADE_WORD_DETECTED' | 'OTHER_ACCOUNT_NOT_NORMAL' | 'PARENT_BLOCKED_TEACHER';
+export type SystemMessageCtaType = 'DIRECT_TRADE_WARNING';
+export interface SystemMessageProps extends Omit<FlexboxProps, 'id'> {
+    id: string | number;
+    systemMessageType: SystemMessageType;
+    ctaType?: SystemMessageCtaType | null;
+    ctaTargetTable?: string | null;
+    ctaTargetId?: number | null;
+    content: string;
+    onAction?: (systemMessageType: SystemMessageType, ctaType?: SystemMessageCtaType | null, ctaTargetId?: number | null) => void;
+    onView?: () => void;
+}
+declare function SystemMessage({ children, ref, id, systemMessageType, content, ctaType, ctaTargetId, onAction, onView, inlineCSS, ...props }: SystemMessageProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default SystemMessage;

package/dist/shared/components/ChatKit/SystemMessage/SystemMessage.mjs

@@ -0,0 +1,107 @@
+import { jsx as e, jsxs as c, Fragment as b } from "react/jsx-runtime";
+import { useRef as x, useImperativeHandle as R, useEffect as v } from "react";
+import { Flexbox as d, Typography as o, Button as D, Icon as k } from "@dotss/ui";
+import y from "@dotss/ui/core/useTheme";
+import E from "../../../hooks/useInView/useInView.mjs";
+function z({
+  children: I,
+  ref: m,
+  id: T,
+  systemMessageType: a,
+  content: p,
+  ctaType: l,
+  ctaTargetId: h,
+  onAction: i,
+  onView: n,
+  inlineCSS: u,
+  ...f
+}) {
+  const {
+    palette: { grey: g, pink: S }
+  } = y(), r = x(null);
+  R(m, () => r.current);
+  const { isInView: s } = E(r), t = ["DIRECT_TRADE_WORD_DETECTED"].includes(a), C = () => i == null ? void 0 : i(a, l, h);
+  return v(() => {
+    s && (n == null || n());
+  }, [s, n]), /* @__PURE__ */ e(
+    d,
+    {
+      ref: r,
+      ml: 4,
+      mr: 4,
+      pt: 1,
+      pb: 1,
+      ...f,
+      inlineCSS: {
+        overflowAnchor: "none",
+        ...u
+      },
+      children: /* @__PURE__ */ e(
+        d,
+        {
+          flexDirection: "column",
+          p: 3,
+          inlineCSS: {
+            width: "100%",
+            backgroundColor: t ? S[10] : g[10],
+            borderRadius: 8
+          },
+          children: /* @__PURE__ */ c(
+            o,
+            {
+              tag: "p",
+              variant: "b4R",
+              color: t ? "pink.80" : "grey.60",
+              inlineCSS: {
+                position: "relative",
+                "& > span": {
+                  fontWeight: 700
+                }
+              },
+              children: [
+                /* @__PURE__ */ e(o, { tag: "span", variant: "h5B", color: t ? "pink.80" : "grey.60", children: "알림" }),
+                " ",
+                p,
+                l && /* @__PURE__ */ c(b, { children: [
+                  /* @__PURE__ */ e(
+                    o,
+                    {
+                      tag: "span",
+                      "aria-hidden": !0,
+                      inlineCSS: {
+                        display: "inline-block",
+                        minWidth: 87
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    D,
+                    {
+                      variant: "text",
+                      size: "xSmall",
+                      color: "secondary",
+                      endAdornment: /* @__PURE__ */ e(k, { name: "ChevronRightLine" }),
+                      onClick: C,
+                      "aria-haspopup": "dialog",
+                      "aria-controls": "system-message-action",
+                      inlineCSS: {
+                        position: "absolute",
+                        right: 0,
+                        bottom: -2,
+                        fontWeight: 700
+                      },
+                      children: "더 알아보기"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  z as default
+};

package/dist/shared/components/ChatKit/SystemMessage/SystemMessage.utils.d.ts

@@ -0,0 +1,2 @@
+import { SystemMessageProps } from '.';
+export declare function getSystemMessageLabel({ content }: Pick<SystemMessageProps, 'content'>): string;

package/dist/shared/components/ChatKit/SystemMessage/SystemMessage.utils.mjs

@@ -0,0 +1,6 @@
+function t({ content: e }) {
+  return `알림, ${e}`;
+}
+export {
+  t as getSystemMessageLabel
+};

package/dist/shared/components/ChatKit/SystemMessage/index.d.ts

@@ -0,0 +1,5 @@
+import { default as SystemMessage, SystemMessageCtaType, SystemMessageProps, SystemMessageType } from './SystemMessage';
+export { default as DirectTradeRiskInfoBottomSheet, type DirectTradeRiskInfoBottomSheetProps } from './(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet';
+export { getSystemMessageLabel } from './SystemMessage.utils';
+export type { SystemMessageProps, SystemMessageCtaType, SystemMessageType };
+export default SystemMessage;

package/dist/shared/components/ChatKit/SystemMessage/index.mjs

@@ -0,0 +1,8 @@
+import t from "./SystemMessage.mjs";
+import { default as s } from "./(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs";
+import { getSystemMessageLabel as m } from "./SystemMessage.utils.mjs";
+export {
+  s as DirectTradeRiskInfoBottomSheet,
+  t as default,
+  m as getSystemMessageLabel
+};

package/dist/shared/components/ChatKit/UnreadMessagePill/UnreadMessagePill.d.ts

@@ -0,0 +1,7 @@
+import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
+export interface UnreadMessagePillProps extends FlexboxProps {
+    onClick: () => void;
+    count: number;
+}
+declare function UnreadMessagePill({ onClick, count, inlineCSS, ...props }: UnreadMessagePillProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default UnreadMessagePill;

package/dist/shared/components/ChatKit/UnreadMessagePill/UnreadMessagePill.mjs

@@ -0,0 +1,55 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { useState as p, useEffect as f } from "react";
+import { Chip as h, Typography as a, Icon as b } from "@dotss/ui";
+import u from "@dotss/ui/core/useTheme";
+function x({ onClick: t, count: e, inlineCSS: o, ...l }) {
+  const {
+    palette: { brand: d },
+    elevation: s
+  } = u(), [i, m] = p(e);
+  return f(() => {
+    e > 0 && m(e);
+  }, [e]), /* @__PURE__ */ r(
+    h,
+    {
+      tag: "button",
+      variant: "outlined",
+      endAdornment: /* @__PURE__ */ n(b, { name: "ArrowDownFill" }),
+      onClick: t,
+      disabled: e < 1,
+      "aria-disabled": e < 1,
+      "aria-hidden": e < 1,
+      ...l,
+      inlineCSS: {
+        boxShadow: s[1],
+        ...o
+      },
+      children: [
+        /* @__PURE__ */ r(a, { tag: "p", variant: "b4M", color: "grey.70", children: [
+          "읽지 않은 메세지",
+          " ",
+          /* @__PURE__ */ n(
+            a,
+            {
+              tag: "span",
+              variant: "b4M",
+              inlineCSS: {
+                color: d.primary.text
+              },
+              children: i
+            }
+          ),
+          "개"
+        ] }),
+        /* @__PURE__ */ r(a, { visuallyHidden: !0, role: "alert", children: [
+          "새 메시지 ",
+          i,
+          "개 도착"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  x as default
+};

package/dist/shared/components/ChatKit/UnreadMessagePill/index.d.ts

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

package/dist/shared/components/ChatKit/UnreadMessagePill/index.mjs

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

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

@@ -0,0 +1,12 @@
+export { default as Message } from './Message';
+export { default as SystemMessage } from './SystemMessage';
+export { default as BotMessage } from './BotMessage';
+export { default as InputBar } from './InputBar';
+export { default as Seperator } from './Seperator';
+export { default as UnreadMessagePill } from './UnreadMessagePill';
+export * from './Message';
+export * from './SystemMessage';
+export * from './BotMessage';
+export * from './InputBar';
+export * from './Seperator';
+export * from './UnreadMessagePill';

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

@@ -0,0 +1,29 @@
+import { default as t } from "./Message/Message.mjs";
+import { default as r } from "./Message/Message.fallback.mjs";
+import { getMessageLabel as f, markMessageGroupBoundaries as l } from "./Message/Message.utils.mjs";
+import { default as p } from "./SystemMessage/SystemMessage.mjs";
+import { default as u } from "./SystemMessage/(Actions)/DirectTrageRiskInfoBottomSheet/DirectTrageRiskInfoBottomSheet.mjs";
+import { getSystemMessageLabel as d } from "./SystemMessage/SystemMessage.utils.mjs";
+import { default as n } from "./BotMessage/BotMessage.mjs";
+import { getBotMessageLabel as b, getClassInfo as i, getCtaButtonText as k } from "./BotMessage/BotMessage.utils.mjs";
+import { default as S } from "./InputBar/InputBar.mjs";
+import { default as L } from "./InputBar/InputBar.fallback.mjs";
+import { default as C } from "./Seperator/Seperator.mjs";
+import { default as T } from "./UnreadMessagePill/UnreadMessagePill.mjs";
+export {
+  n as BotMessage,
+  u as DirectTradeRiskInfoBottomSheet,
+  S as InputBar,
+  L as InputBarFallback,
+  t as Message,
+  r as MessageFallback,
+  C as Seperator,
+  p as SystemMessage,
+  T as UnreadMessagePill,
+  b as getBotMessageLabel,
+  i as getClassInfo,
+  k as getCtaButtonText,
+  f as getMessageLabel,
+  d as getSystemMessageLabel,
+  l as markMessageGroupBoundaries
+};

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

@@ -1,69 +1,71 @@
-import { jsxs as g, jsx as d, Fragment as Z } from "react/jsx-runtime";
-import { forwardRef as r, useRef as L, useImperativeHandle as w, useState as h, useEffect as M } from "react";
-import { Flexbox as U, Skeleton as V } from "@dotss/ui";
+import { jsxs as L, jsx as d, Fragment as Y } from "react/jsx-runtime";
+import { forwardRef as Z, useRef as h, useImperativeHandle as w, useState as C, useEffect as R } from "react";
+import { Flexbox as M, Skeleton as U } from "@dotss/ui";
 import F from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
 import b from "../../utils/getImageUrl/getImageUrl.mjs";
-import _ from "./Image.error.mjs";
-const k = 100, ot = r(
+import V from "./Image.error.mjs";
+const k = 100, ot = Z(
   ({
-    src: q,
+    src: _,
     width: n,
     height: o,
-    fit: A = "cover",
-    position: D = "center",
-    alt: C,
-    scale: G = 2,
+    fit: q = "cover",
+    position: A = "center",
+    alt: r,
+    scale: D = 2,
     onLoad: E,
-    onLazyLoad: S,
+    onLazyLoad: g,
     lazy: I = !1,
     borderRadius: l,
-    disabledResizing: J = !1,
+    disabledResizing: G = !1,
     withIntrinsicRatio: x = !1,
     enableFallback: T = !1,
-    enableErrorFallback: H = !0,
+    enableErrorFallback: W = !0,
     renderErrorFallback: c,
     wrapperProps: e = {},
-    onError: W,
-    ...a
-  }, K) => {
-    const u = L(null), $ = L(!1), m = L(null);
-    w(K, () => m.current);
-    const [y, N] = h(!1), [O, v] = h(!1), [f, j] = h(!1), z = b({ src: q, width: n, height: o, fit: A, position: D, scale: G, disabledResizing: J }), B = (t) => {
-      v(!0), j(!1), typeof E == "function" && E(t);
-    }, R = (t) => {
-      j(!0), v(!1), typeof W == "function" && W(t.nativeEvent);
+    onError: H,
+    ...u
+  }, J) => {
+    const a = h(null), $ = h(!1), m = h(null);
+    w(J, () => m.current);
+    const [y, K] = C(!1), [O, v] = C(!1), [f, S] = C(!1), j = b({ src: _, width: n, height: o, fit: q, position: A, scale: D, disabledResizing: G }), z = (t) => {
+      v(!0), S(!1), typeof E == "function" && E(t);
+    }, B = (t) => {
+      S(!0), v(!1), typeof H == "function" && H(t.nativeEvent);
     };
-    return M(() => {
-      if (I && u.current) {
-        const t = u.current, Q = () => {
+    return R(() => {
+      if (I && a.current) {
+        const t = a.current, N = () => {
           if (!t) return !1;
           const i = t.getBoundingClientRect();
           return i.bottom >= 0 && i.top <= (window.innerHeight || document.documentElement.clientHeight) + k;
         }, s = () => {
-          Q() && N(!0);
-        }, X = () => {
+          N() && K(!0);
+        }, Q = () => {
           var i;
           (i = window.appScreenContent) == null || i.addEventListener("scroll", s), window.addEventListener("resize", s), window.addEventListener("orientationchange", s);
-        }, Y = () => {
+        }, X = () => {
           var i;
           (i = window.appScreenContent) == null || i.removeEventListener("scroll", s), window.removeEventListener("resize", s), window.removeEventListener("orientationchange", s);
         };
-        return s(), X(), Y;
+        return s(), Q(), X;
       }
-    }), M(() => {
-      typeof S == "function" && y && !$.current && ($.current = !0, S());
-    }, [S, y]), F(() => {
+    }), R(() => {
+      typeof g == "function" && y && !$.current && ($.current = !0, g());
+    }, [g, y]), F(() => {
       const t = m.current;
-      return t != null && t.complete ? (t.style.transition = "none", t.style.opacity = "1", v(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
+      return t != null && t.complete ? t.naturalWidth > 0 ? (t.style.transition = "none", t.style.opacity = "1", v(!0)) : (t.style.opacity = "0", S(!0)) : t && (t.style.transition = "opacity 0.3s", t.style.opacity = "0", t.onload = () => {
         t.style.opacity = "1", v(!0), t.onload = null;
+      }, t.onerror = () => {
+        S(!0), t.onerror = null;
       }), () => {
-        t && (t.onload = null);
+        t && (t.onload = null, t.onerror = null);
       };
-    }, [y]), I ? /* @__PURE__ */ g(
-      U,
+    }, [y]), I ? /* @__PURE__ */ L(
+      M,
       {
         ...e,
-        ref: u,
+        ref: a,
         inlineCSS: x ? {
           position: "relative",
           paddingTop: `calc(100% / ${n} * ${o})`,
@@ -82,7 +84,7 @@ const k = 100, ot = r(
         },
         children: [
           T && /* @__PURE__ */ d(
-            V,
+            U,
             {
               width: "100%",
               height: "100%",
@@ -96,19 +98,19 @@ const k = 100, ot = r(
               }
             }
           ),
-          y && /* @__PURE__ */ g(Z, { children: [
+          y && /* @__PURE__ */ L(Y, { children: [
             /* @__PURE__ */ d(
               "img",
               {
                 ref: m,
-                src: z,
-                alt: C,
+                src: j,
+                alt: r,
                 width: n,
                 height: o,
-                onLoad: B,
-                onError: R,
+                onLoad: z,
+                onError: B,
                 "aria-hidden": f,
-                ...a,
+                ...u,
                 style: {
                   position: "absolute",
                   top: 0,
@@ -116,19 +118,19 @@ const k = 100, ot = r(
                   width: "100%",
                   height: "100%",
                   transition: "opacity 0.3s",
-                  ...a.style
+                  ...u.style
                 }
               }
             ),
-            H && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(_, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
+            W && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(V, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
           ] })
         ]
       }
-    ) : /* @__PURE__ */ g(
-      U,
+    ) : /* @__PURE__ */ L(
+      M,
       {
         ...e,
-        ref: u,
+        ref: a,
         inlineCSS: x ? {
           position: "relative",
           paddingTop: `calc(100% / ${n} * ${o})`,
@@ -148,7 +150,7 @@ const k = 100, ot = r(
         },
         children: [
           T && /* @__PURE__ */ d(
-            V,
+            U,
             {
               width: "100%",
               height: "100%",
@@ -166,14 +168,14 @@ const k = 100, ot = r(
             "img",
             {
               ref: m,
-              src: z,
-              alt: C,
+              src: j,
+              alt: r,
               width: n,
               height: o,
-              onLoad: B,
-              onError: R,
+              onLoad: z,
+              onError: B,
               "aria-hidden": f,
-              ...a,
+              ...u,
               style: {
                 position: "absolute",
                 top: 0,
@@ -181,11 +183,11 @@ const k = 100, ot = r(
                 width: "100%",
                 height: "100%",
                 transition: "opacity 0.3s",
-                ...a.style
+                ...u.style
               }
             }
           ),
-          H && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(_, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
+          W && ((c == null ? void 0 : c(f)) || /* @__PURE__ */ d(V, { style: { opacity: f ? 1 : 0, transition: "opacity 0.3s" } }))
         ]
       }
     );

package/dist/shared/components/MediaDialog/MediaBlock/MediaBlock.mjs

@@ -1,28 +1,27 @@
-import { jsxs as f, jsx as d } from "react/jsx-runtime";
-import { useState as S, Children as u, isValidElement as y, cloneElement as c } from "react";
-import { Flexbox as x } from "@dotss/ui";
-import b from "../../Image/Image.mjs";
+import { jsxs as p, jsx as d } from "react/jsx-runtime";
+import { useState as S, Children as u, isValidElement as y, cloneElement as x } from "react";
+import { Flexbox as b } from "@dotss/ui";
+import c from "../../Image/Image.mjs";
 import "@dotss/ui/core/useTheme";
 import w from "../../Swiper/SwiperBlock/SwiperBlock.mjs";
-function z({ children: i, fallback: l, imageProps: t, ...n }) {
-  const [r, s] = S(!1), p = () => s(!0);
-  return /* @__PURE__ */ f(
+function z({ children: a, fallback: l, imageProps: t, ...n }) {
+  const [r, s] = S(!1), f = () => s(!0);
+  return /* @__PURE__ */ p(
     w,
     {
       ...n,
       inlineCSS: {
-        marginTop: "calc(var(--status-bar-height, 0px) * -1)",
         "& > div:nth-of-type(1)": {
           zIndex: 1
         },
         ...n == null ? void 0 : n.inlineCSS
       },
       children: [
-        u.toArray(i).filter(y).map((e) => {
-          var o, a;
-          return e.type === b || e.type === "img" ? c(e, {
+        u.toArray(a).filter(y).map((e) => {
+          var o, i;
+          return e.type === c || e.type === "img" ? x(e, {
             ...t,
-            onLoad: p,
+            onLoad: f,
             disabledResizing: !0,
             draggable: !1,
             wrapperProps: {
@@ -32,7 +31,7 @@ function z({ children: i, fallback: l, imageProps: t, ...n }) {
                 overflow: "visible",
                 margin: "0 auto",
                 ...(o = t == null ? void 0 : t.wrapperProps) == null ? void 0 : o.inlineCSS,
-                ...(a = e.props.wrapperProps) == null ? void 0 : a.inlineCSS
+                ...(i = e.props.wrapperProps) == null ? void 0 : i.inlineCSS
               }
             },
             style: {
@@ -48,7 +47,7 @@ function z({ children: i, fallback: l, imageProps: t, ...n }) {
           }) : e;
         }),
         !r && /* @__PURE__ */ d(
-          x,
+          b,
           {
             "aria-busy": !0,
             inlineCSS: {