@multiplatform.one/connectkit 6.0.0

package/dist/esm/components/Common/Portal/index.native.js

@@ -0,0 +1,32 @@
+import { useEffect, useState, useRef } from "react";
+import { createPortal } from "react-dom";
+import { CONNECTKIT_VERSION } from "../../../index.native.js";
+var Portal = function Portal2(props) {
+  props = {
+    selector: "__CONNECTKIT__",
+    ...props
+  };
+  var {
+    selector,
+    children
+  } = props;
+  var ref = useRef(null);
+  var [mounted, setMounted] = useState(false);
+  useEffect(function () {
+    var selectorPrefixed = "#" + selector.replace(/^#/, "");
+    ref.current = document.querySelector(selectorPrefixed);
+    if (!ref.current) {
+      var div = document.createElement("div");
+      div.setAttribute("id", selector);
+      div.setAttribute("data-connectkit", `${CONNECTKIT_VERSION}`);
+      document.body.appendChild(div);
+      ref.current = div;
+    }
+    setMounted(true);
+  }, [selector]);
+  if (!ref.current) return null;
+  return mounted ? /* @__PURE__ */createPortal(children, ref.current) : null;
+};
+var Portal_default = Portal;
+export { Portal_default as default };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/components/Common/Portal/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useState","useRef","createPortal","CONNECTKIT_VERSION","Portal","Portal2","props","selector","children","ref","mounted","setMounted","selectorPrefixed","replace","current","document","querySelector","div","createElement","setAttribute","body","appendChild"],"sources":["../../../../../src/components/Common/Portal/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,SAAA,EAAWC,QAAA,EAAUC,MAAA,QAAc;AAC5C,SAASC,YAAA,QAAoB;AAC7B,SAASC,kBAAA,QAA0B;AAEnC,IAAAC,MAAM,YAAUC,OAAeA,CAAAC,KAAA;EAC7BA,KAAA,GAAQ;IACNC,QAAA,EAAU;IACV,GAAGD;EACL;EAEA;IAAMC,QAAE;IAAAC;EAAU,IAASF,KAAI;EAE/B,IAAAG,GAAM,GAAAR,MAAM,KAAuB;EACnC,KAAAS,OAAO,EAAAC,UAAS,IAAUX,QAAI,MAAkB;EAEhDD,SAAA,CAAU,YAAM;IACd,IAAAa,gBAAM,MAAmB,GAAAL,QAAM,CAAAM,OAAS,KAAQ,IAAM;IACtDJ,GAAA,CAAIK,OAAA,GAAUC,QAAA,CAASC,aAAA,CAAcJ,gBAAgB;IAErD,IAAI,CAACH,GAAA,CAAIK,OAAA,EAAS;MAChB,IAAAG,GAAM,GAAAF,QAAM,CAAAG,aAAS,MAAc;MACnCD,GAAA,CAAIE,YAAA,CAAa,MAAMZ,QAAQ;MAC/BU,GAAA,CAAIE,YAAA,CAAa,mBAAmB,GAAGhB,kBAAkB,EAAE;MAC3DY,QAAA,CAASK,IAAA,CAAKC,WAAA,CAAYJ,GAAG;MAC7BR,GAAA,CAAIK,OAAA,GAAUG,GAAA;IAChB;IAEAN,UAAA,CAAW,IAAI;EACjB,GAAG,CAEHJ,QAAS,CACT;EACF,KAAAE,GAAA,CAAAK,OAAA;EAEA,OAAOJ,OAAA,kBAAQR,YAAA,CAAAM,QAAA,EAAAC,GAAA,CAAAK,OAAA","ignoreList":[]}

package/dist/esm/components/Common/ScrollArea/index.mjs

@@ -0,0 +1,95 @@
+import { useEffect, useRef } from "react";
+import { MoreIndicator, ScrollAreaContainer, ScrollContainer } from "./styles.mjs";
+import useIsMobile from "../../../hooks/useIsMobile.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const ArrowDown = () => /* @__PURE__ */jsx("svg", {
+  width: "11",
+  height: "12",
+  viewBox: "0 0 11 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /* @__PURE__ */jsx("path", {
+    d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7",
+    stroke: "currentColor",
+    strokeWidth: "1.75",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })
+});
+const ScrollArea = ({
+  children,
+  height,
+  backgroundColor,
+  mobileDirection
+}) => {
+  const ref = useRef(null);
+  const moreRef = useRef(null);
+  const isMobile = useIsMobile();
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    if (el.scrollHeight > el.clientHeight) {
+      if (moreRef.current) {
+        moreRef.current.classList.remove("hide");
+      }
+    }
+    const handleScroll = e => {
+      const {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        scrollLeft,
+        scrollWidth,
+        clientWidth
+      } = e.target;
+      if (moreRef.current) {
+        if (scrollTop > 0) {
+          moreRef.current.classList.add("hide");
+        }
+      }
+      if (scrollTop === 0 && scrollLeft === 0) {
+        el.classList.add("scroll-start");
+      } else {
+        el.classList.remove("scroll-start");
+      }
+      if (scrollHeight - scrollTop === clientHeight && scrollWidth - scrollLeft === clientWidth) {
+        el.classList.add("scroll-end");
+      } else {
+        el.classList.remove("scroll-end");
+      }
+    };
+    el.addEventListener("scroll", handleScroll);
+    handleScroll({
+      target: el
+    });
+    return () => {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, [ref.current]);
+  return /* @__PURE__ */jsxs(ScrollContainer, {
+    children: [/* @__PURE__ */jsx(ScrollAreaContainer, {
+      ref,
+      $mobile: isMobile,
+      $height: height,
+      $backgroundColor: backgroundColor,
+      $mobileDirection: mobileDirection,
+      children
+    }), /* @__PURE__ */jsx(MoreIndicator, {
+      ref: moreRef,
+      className: "hide",
+      onClick: () => {
+        if (ref.current) {
+          ref.current.scrollTo({
+            top: ref.current.scrollHeight,
+            behavior: "smooth"
+          });
+        }
+      },
+      children: /* @__PURE__ */jsxs("span", {
+        children: [/* @__PURE__ */jsx(ArrowDown, {}), " More Available"]
+      })
+    })]
+  });
+};
+export { ScrollArea };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Common/ScrollArea/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","MoreIndicator","ScrollAreaContainer","ScrollContainer","useIsMobile","jsx","jsxs","ArrowDown","width","height","viewBox","fill","xmlns","children","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","ScrollArea","backgroundColor","mobileDirection","ref","moreRef","isMobile","el","current","scrollHeight","clientHeight","classList","remove","handleScroll","e","scrollTop","scrollLeft","scrollWidth","clientWidth","target","add","addEventListener","removeEventListener","$mobile","$height","$backgroundColor","$mobileDirection","className","onClick","scrollTo","top","behavior"],"sources":["../../../../../src/components/Common/ScrollArea/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/components/Common/ScrollArea/index.native.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useRef } from "react";
+import { MoreIndicator, ScrollAreaContainer, ScrollContainer } from "./styles.native.js";
+import useIsMobile from "../../../hooks/useIsMobile.native.js";
+var ArrowDown = function ArrowDown2() {
+  return /* @__PURE__ */_jsx("svg", {
+    width: "11",
+    height: "12",
+    viewBox: "0 0 11 12",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */_jsx("path", {
+      d: "M5.49438 1L5.49438 11M5.49438 11L9.5 7M5.49438 11L1.5 7",
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+};
+var ScrollArea = function ScrollArea2(param) {
+  var {
+    children,
+    height,
+    backgroundColor,
+    mobileDirection
+  } = param;
+  var ref = useRef(null);
+  var moreRef = useRef(null);
+  var isMobile = useIsMobile();
+  useEffect(function () {
+    var el = ref.current;
+    if (!el) return;
+    if (el.scrollHeight > el.clientHeight) {
+      if (moreRef.current) {
+        moreRef.current.classList.remove("hide");
+      }
+    }
+    var handleScroll = function handleScroll2(e) {
+      var {
+        scrollTop,
+        scrollHeight,
+        clientHeight,
+        scrollLeft,
+        scrollWidth,
+        clientWidth
+      } = e.target;
+      if (moreRef.current) {
+        if (scrollTop > 0) {
+          moreRef.current.classList.add("hide");
+        }
+      }
+      if (scrollTop === 0 && scrollLeft === 0) {
+        el.classList.add("scroll-start");
+      } else {
+        el.classList.remove("scroll-start");
+      }
+      if (scrollHeight - scrollTop === clientHeight && scrollWidth - scrollLeft === clientWidth) {
+        el.classList.add("scroll-end");
+      } else {
+        el.classList.remove("scroll-end");
+      }
+    };
+    el.addEventListener("scroll", handleScroll);
+    handleScroll({
+      target: el
+    });
+    return function () {
+      el.removeEventListener("scroll", handleScroll);
+    };
+  }, [ref.current]);
+  return /* @__PURE__ */_jsxs(ScrollContainer, {
+    children: [/* @__PURE__ */_jsx(ScrollAreaContainer, {
+      ref,
+      $mobile: isMobile,
+      $height: height,
+      $backgroundColor: backgroundColor,
+      $mobileDirection: mobileDirection,
+      children
+    }), /* @__PURE__ */_jsx(MoreIndicator, {
+      ref: moreRef,
+      className: "hide",
+      onClick: function onClick() {
+        if (ref.current) {
+          ref.current.scrollTo({
+            top: ref.current.scrollHeight,
+            behavior: "smooth"
+          });
+        }
+      },
+      children: /* @__PURE__ */_jsxs("span", {
+        children: [/* @__PURE__ */_jsx(ArrowDown, {}), " More Available"]
+      })
+    })]
+  });
+};
+export { ScrollArea };
+//# sourceMappingURL=index.native.js.map

package/dist/esm/components/Common/ScrollArea/index.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","useEffect","useRef","MoreIndicator","ScrollAreaContainer","ScrollContainer","useIsMobile","ArrowDown","ArrowDown2","width","height","viewBox","fill","xmlns","children","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","ScrollArea","ScrollArea2","param","backgroundColor","mobileDirection","ref","moreRef","isMobile","el","current","scrollHeight","clientHeight","classList","remove","handleScroll","handleScroll2","e","scrollTop","scrollLeft","scrollWidth","clientWidth","target","add","addEventListener","removeEventListener","$mobile","$height","$backgroundColor","$mobileDirection","className","onClick","scrollTo","top","behavior"],"sources":["../../../../../src/components/Common/ScrollArea/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAgBA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAc;AACzC,OAAAC,KAAS,IAAAC,SAAe,EAAAC,MAAA,eAAqB;AAC7C,SAAOC,aAAA,EAAiBC,mBAAA,EAAAC,eAAA;AAIpB,OAAAC,WA0FI,4CA1FJ;AAFJ,IAAAC,SAAM,YACJC,WAAA;EACG,sBAAAX,IAAA;IAAAY,KAAA;IACCC,MAAE;IACFC,OAAA,EAAO;IACPC,IAAA;IACAC,KAAA,8BAAc;IACdC,QAAA,iBAAejB,IAAA;MAAAkB,CAAA;MAEnBC,MAAA;MAEWC,WAAA,EAAa,MAAC;MACzBC,aAAA;MACAC,cAAA;IACA;EACA;AACF;AAME,IAAAC,UAAY,YAA2BC,YAAAC,KAAA;EACvC;IAAMR,QAAA;IAAUJ,MAAA;IAAuBa,eAAI;IAAAC;EAAA,IAAAF,KAAA;EAE3C,IAAAG,GAAM,GAAAvB,MAAA,CAAW;EAEjB,IAAAwB,OAAU,GAAAxB,MAAM;EACd,IAAAyB,QAAM,GAAKrB,WAAI;EACfL,SAAK,CAAI;IAGT,IAAI2B,EAAA,GAAGH,GAAA,CAAAI,OAAA;IACL,KAAAD,EAAI;IACF,IAAAA,EAAA,CAAAE,YAAQ,GAAQF,EAAA,CAAAG,YAAiB;MACnC,IAAAL,OAAA,CAAAG,OAAA;QACFH,OAAA,CAAAG,OAAA,CAAAG,SAAA,CAAAC,MAAA;MAEA;IACE;IAGA,IAAAC,YAAY,YAASC,cAAAC,CAAA;MACnB;QAAIC,SAAA;QAAAP,YAAe;QAAAC,YAAA;QAAAO,UAAA;QAAAC,WAAA;QAAAC;MAAA,IAAAJ,CAAA,CAAAK,MAAA;MACjB,IAAAf,OAAA,CAAQG,OAAA,EAAQ;QAClB,IAAAQ,SAAA;UACFX,OAAA,CAAAG,OAAA,CAAAG,SAAA,CAAAU,GAAA;QAEA;MACE;MACF,IAAAL,SAAO,UAAAC,UAAA;QACLV,EAAA,CAAGI,SAAA,CAAUU,GAAA,eAAO;MACtB;QAEAd,EAAI,CAAAI,SAAA,CAAAC,MAAe,eAAc;MAC/B;MACF,IAAAH,YAAO,GAAAO,SAAA,KAAAN,YAAA,IAAAQ,WAAA,GAAAD,UAAA,KAAAE,WAAA;QACLZ,EAAA,CAAGI,SAAA,CAAUU,GAAA,aAAO;MACtB;QACFd,EAAA,CAAAI,SAAA,CAAAC,MAAA;MAEA;IACA;IAEAL,EAAA,CAAAe,gBAAa,WAAAT,YAAA;IACXA,YAAG;MACLO,MAAA,EAAAb;IACF,CAAG,CAAC;IAEJ,OACE;MACEA,EAAA,CAAAgB,mBAAA,WAAAV,YAAA;IAAA;EAAC,IAAAT,GAAA,CACCI,OAAA;EACS,OACT,eAAS9B,KAAA,CAAAM,eAAA;IAAAS,QACT,GAAkB,eAClBjB,IAAkB,CAAAO,mBAAA;MAEjBqB,GAAA;MAAAoB,OAAA,EAAAlB,QAAA;MACHmB,OAAA,EAAApC,MAAA;MACAqC,gBAAA,EAAAxB,eAAA;MAACyB,gBAAA,EAAAxB,eAAA;MAAAV;IAAA,EACC,EAAK,eACKjB,IAAA,CAAAM,aAAA;MACVsB,GAAA,EAAAC,OAAS;MACPuB,SAAI,EAAI;MACNC,OAAA,EAAI,SAAQA,OAASA,CAAA;QAAA,IACnBzB,GAAA,CAAAI,OAAS;UAAQJ,GACjB,CAAAI,OAAA,CAAUsB,QAAA;YACXC,GAAA,EAAA3B,GAAA,CAAAI,OAAA,CAAAC,YAAA;YACHuB,QAAA;UACF;QAEA;MACE;MAAWvC,QAAE,iBAAAf,KAAA;QAAAe,QACf,kBAAAjB,IAAA,CAAAU,SAAA,OACF;MAGN","ignoreList":[]}

package/dist/esm/components/Common/ScrollArea/styles.mjs

@@ -0,0 +1,164 @@
+import { css, keyframes } from "styled-components";
+import styled from "../../../styles/styled/index.mjs";
+const ScrollContainer = styled.div`
+  position: relative;
+`;
+const fadeIn = keyframes`
+0%{ opacity:0; }
+100%{ opacity:1; }
+`;
+const MoreIndicator = styled.div`
+  z-index: 9;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0.75rem;
+  display: flex;
+  justify-content: center;
+
+  transition: opacity 300ms ease;
+
+  span {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.3075rem 0.9375rem 0.375rem;
+    border-radius: 6rem;
+    background: var(--ck-tooltip-background);
+    color: var(--ck-tooltip-color);
+    font-weight: 500;
+    font-size: 0.8125rem;
+    letter-spacing: -0.01rem;
+    box-shadow: var(--ck-tooltip-shadow);
+    animation: ${fadeIn} 300ms ease 1000ms both;
+
+    transition: transform 100ms ease;
+
+    &:hover {
+      transform: scale(1.02);
+    }
+    &:active {
+      transform: scale(0.98);
+    }
+    svg {
+      display: block;
+      transform: translateX(-0.1875rem);
+    }
+  }
+
+  &.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+`;
+const ScrollAreaContainer = styled.div`
+  --bg: ${({
+  $backgroundColor
+}) => $backgroundColor || "var(--ck-body-background)"};
+  --fade-height: 1px;
+  position: relative;
+  z-index: 1;
+
+  ${({
+  $mobile,
+  $height,
+  $mobileDirection
+}) => $mobile && $mobileDirection === "horizontal" ? css`
+          overflow-x: scroll;
+          margin: 0 -24px;
+          padding: 0 24px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            top: 0;
+            bottom: 0;
+            width: var(--fade-height);
+            background: var(--ck-body-divider-secondary, var(--ck-body-divider));
+            box-shadow: var(--ck-body-divider-box-shadow);
+            transition: opacity 300ms ease;
+          }
+          &:before {
+            left: 0;
+          }
+          &:after {
+            right: 0;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        ` : css`
+          max-height: ${$height ? `${$height}px` : "310px"};
+          overflow-y: scroll;
+          padding: 0 10px;
+          margin: calc(var(--fade-height) * -1) -16px 0 -10px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            left: 0;
+            right: 0;
+            height: var(--fade-height);
+            background: var(--ck-body-divider-secondary, var(--ck-body-divider));
+            box-shadow: var(--ck-body-divider-box-shadow);
+            transition: opacity 300ms ease;
+          }
+          &:before {
+            top: 0;
+          }
+          &:after {
+            bottom: 0;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        `}
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0);
+    border-radius: 100px;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background: var(--ck-body-color-muted);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--ck-body-color-muted-hover);
+  }
+`;
+export { MoreIndicator, ScrollAreaContainer, ScrollContainer };
+//# sourceMappingURL=styles.mjs.map

package/dist/esm/components/Common/ScrollArea/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["css","keyframes","styled","ScrollContainer","div","fadeIn","MoreIndicator","ScrollAreaContainer","$backgroundColor","$mobile","$height","$mobileDirection"],"sources":["../../../../../src/components/Common/ScrollArea/styles.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,EAAKC,SAAA,QAAiB;AAC/B,OAAOC,MAAA,MAAY;AAEZ,MAAMC,eAAA,GAAkBD,MAAA,CAAOE,GAAA;AAAA;AAAA;AAGtC,MAAMC,MAAA,GAASJ,SAAA;AAAA;AAAA;AAAA;AAKR,MAAMK,aAAA,GAAgBJ,MAAA,CAAOE,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAyBnBC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBhB,MAAME,mBAAA,GAAsBL,MAAA,CAAOE,GAAA;AAAA,UAKhC,CAAC;EAAEI;AAAiB,MAAMA,gBAAA,IAAoB,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA,IAK/E,CAAC;EAAEC,OAAA;EAASC,OAAA;EAASC;AAAiB,MACtCF,OAAA,IAAWE,gBAAA,KAAqB,eAC5BX,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAsCAA,GAAA;AAAA,wBACgBU,OAAA,GAAU,GAAGA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAqCjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","ignoreList":[]}

package/dist/esm/components/Common/ScrollArea/styles.native.js

@@ -0,0 +1,170 @@
+import { css, keyframes } from "styled-components";
+import styled from "../../../styles/styled/index.native.js";
+var ScrollContainer = styled.div`
+  position: relative;
+`;
+var fadeIn = keyframes`
+0%{ opacity:0; }
+100%{ opacity:1; }
+`;
+var MoreIndicator = styled.div`
+  z-index: 9;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0.75rem;
+  display: flex;
+  justify-content: center;
+
+  transition: opacity 300ms ease;
+
+  span {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.3075rem 0.9375rem 0.375rem;
+    border-radius: 6rem;
+    background: var(--ck-tooltip-background);
+    color: var(--ck-tooltip-color);
+    font-weight: 500;
+    font-size: 0.8125rem;
+    letter-spacing: -0.01rem;
+    box-shadow: var(--ck-tooltip-shadow);
+    animation: ${fadeIn} 300ms ease 1000ms both;
+
+    transition: transform 100ms ease;
+
+    &:hover {
+      transform: scale(1.02);
+    }
+    &:active {
+      transform: scale(0.98);
+    }
+    svg {
+      display: block;
+      transform: translateX(-0.1875rem);
+    }
+  }
+
+  &.hide {
+    opacity: 0;
+    pointer-events: none;
+  }
+`;
+var ScrollAreaContainer = styled.div`
+  --bg: ${function (param) {
+  var {
+    $backgroundColor
+  } = param;
+  return $backgroundColor || "var(--ck-body-background)";
+}};
+  --fade-height: 1px;
+  position: relative;
+  z-index: 1;
+
+  ${function (param) {
+  var {
+    $mobile,
+    $height,
+    $mobileDirection
+  } = param;
+  return $mobile && $mobileDirection === "horizontal" ? css`
+          overflow-x: scroll;
+          margin: 0 -24px;
+          padding: 0 24px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            top: 0;
+            bottom: 0;
+            width: var(--fade-height);
+            background: var(--ck-body-divider-secondary, var(--ck-body-divider));
+            box-shadow: var(--ck-body-divider-box-shadow);
+            transition: opacity 300ms ease;
+          }
+          &:before {
+            left: 0;
+          }
+          &:after {
+            right: 0;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        ` : css`
+          max-height: ${$height ? `${$height}px` : "310px"};
+          overflow-y: scroll;
+          padding: 0 10px;
+          margin: calc(var(--fade-height) * -1) -16px 0 -10px;
+
+          &:before,
+          &:after {
+            pointer-events: none;
+            z-index: 10;
+            content: "";
+            display: block;
+            position: sticky;
+            left: 0;
+            right: 0;
+            height: var(--fade-height);
+            background: var(--ck-body-divider-secondary, var(--ck-body-divider));
+            box-shadow: var(--ck-body-divider-box-shadow);
+            transition: opacity 300ms ease;
+          }
+          &:before {
+            top: 0;
+          }
+          &:after {
+            bottom: 0;
+          }
+
+          &.scroll-start {
+            &:before {
+              opacity: 0;
+            }
+          }
+
+          &.scroll-end {
+            &:after {
+              opacity: 0;
+            }
+          }
+        `;
+}}
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0);
+    border-radius: 100px;
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    background: var(--ck-body-color-muted);
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--ck-body-color-muted-hover);
+  }
+`;
+export { MoreIndicator, ScrollAreaContainer, ScrollContainer };
+//# sourceMappingURL=styles.native.js.map

package/dist/esm/components/Common/ScrollArea/styles.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["css","keyframes","styled","ScrollContainer","div","fadeIn","MoreIndicator","ScrollAreaContainer","param","$backgroundColor","$mobile","$height","$mobileDirection"],"sources":["../../../../../src/components/Common/ScrollArea/styles.ts"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,EAAKC,SAAA,QAAiB;AAC/B,OAAOC,MAAA,MAAY;AAEZ,IAAAC,eAAM,GAAAD,MAAkB,CAAAE,GAAO;AAAA;AAAA;AAGtC,IAAAC,MAAM,GAAAJ,SAAS;AAAA;AAAA;AAAA;AAKR,IAAAK,aAAM,GAAAJ,MAAgB,CAAAE,GAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAyBnBC,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBhB,IAAAE,mBAAM,GAAAL,MAAsB,CAAAE,GAAO;AAAA,UAKhC,UAAGI,KAAA;EAAsE;IAAAC;EAAA,IAAAD,KAAA;EAAA,OAAAC,gBAAA;AAAA;AAAA;AAAA;AAO3E;AAAA;AAAA,cAAAD,KAAA;EAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC;EAAA,IAAAJ,KAAA;EAAA,OAAAE,OAAA,IAAAE,gBAAA,oBAAAZ,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCA;AACkD;AAAA;AAAA;AAAA,YAAAA,GAAA;AAAA,wBAAAW,OAAA,MAAAA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCjD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","ignoreList":[]}

package/dist/esm/components/Common/Spinner/index.mjs

@@ -0,0 +1,50 @@
+import { SpinnerContainer } from "./styles.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+const transition = {
+  duration: 0.4,
+  ease: [0.175, 0.885, 0.32, 0.98]
+};
+const Spinner = () => /* @__PURE__ */jsx(SpinnerContainer, {
+  initial: {
+    opacity: 0,
+    rotate: 180
+  },
+  animate: {
+    opacity: 1,
+    rotate: 0
+  },
+  exit: {
+    position: "absolute",
+    opacity: 0,
+    rotate: -180,
+    transition: {
+      ...transition
+    }
+  },
+  transition: {
+    ...transition,
+    delay: 0.2
+  },
+  children: /* @__PURE__ */jsxs("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 18 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/* @__PURE__ */jsx("circle", {
+      cx: "9",
+      cy: "9",
+      r: "7",
+      stroke: "currentColor",
+      strokeOpacity: "0.1",
+      strokeWidth: "2.5"
+    }), /* @__PURE__ */jsx("path", {
+      d: "M16 9C16 5.13401 12.866 2 9 2",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    })]
+  })
+});
+export { Spinner };
+//# sourceMappingURL=index.mjs.map

package/dist/esm/components/Common/Spinner/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["SpinnerContainer","jsx","jsxs","transition","duration","ease","Spinner","initial","opacity","rotate","animate","exit","position","delay","children","width","height","viewBox","fill","xmlns","cx","cy","r","stroke","strokeOpacity","strokeWidth","d","strokeLinecap"],"sources":["../../../../../src/components/Common/Spinner/index.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,gBAAA,QAAwB;AA2B7B,SACEC,GAAA,EADFC,IAAA;AAzBJ,MAAMC,UAAA,GAAa;EACjBC,QAAA,EAAU;EACVC,IAAA,EAAM,CAAC,OAAO,OAAO,MAAM,IAAI;AACjC;AAEO,MAAMC,OAAA,GAAUA,CAAA,KACrB,eAAAL,GAAA,CAACD,gBAAA;EACCO,OAAA,EAAS;IAAEC,OAAA,EAAS;IAAGC,MAAA,EAAQ;EAAI;EACnCC,OAAA,EAAS;IACPF,OAAA,EAAS;IACTC,MAAA,EAAQ;EACV;EACAE,IAAA,EAAM;IACJC,QAAA,EAAU;IACVJ,OAAA,EAAS;IACTC,MAAA,EAAQ;IACRN,UAAA,EAAY;MACV,GAAGA;IACL;EACF;EACAA,UAAA,EAAY;IACV,GAAGA,UAAA;IACHU,KAAA,EAAO;EACT;EAEAC,QAAA,iBAAAZ,IAAA,CAAC;IAAIa,KAAA,EAAM;IAAKC,MAAA,EAAO;IAAKC,OAAA,EAAQ;IAAYC,IAAA,EAAK;IAAOC,KAAA,EAAM;IAChEL,QAAA,kBAAAb,GAAA,CAAC;MAAOmB,EAAA,EAAG;MAAIC,EAAA,EAAG;MAAIC,CAAA,EAAE;MAAIC,MAAA,EAAO;MAAeC,aAAA,EAAc;MAAMC,WAAA,EAAY;IAAA,CAAM,GACxF,eAAAxB,GAAA,CAAC;MACCyB,CAAA,EAAE;MACFH,MAAA,EAAO;MACPE,WAAA,EAAY;MACZE,aAAA,EAAc;IAAA,CAChB;EAAA,CACF;AAAA,CACF","ignoreList":[]}