@pfct/purple 1.4.0-rc.4 → 1.4.0-rc.5

package/dist/library/Flex/index.stories.es.js

@@ -0,0 +1,36 @@
+import { j as e } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import r from "./index.es.js";
+import "../../core/Colors/index.es.js";
+import "../../chunks/index.styled.BTZpARWY.js";
+import "../../core/TextStyles/index.es.js";
+import { Title1 as o } from "../../core/Typography/Title1.es.js";
+import { Title4 as s } from "../../core/Typography/Title4.es.js";
+const j = {
+  title: "Library/Flex",
+  component: r,
+  tags: ["autodocs"]
+}, n = {
+  render: (t) => /* @__PURE__ */ e.jsxs(r.Row, { ...t, children: [
+    /* @__PURE__ */ e.jsx(o, { children: "안녕하세요" }),
+    /* @__PURE__ */ e.jsx(s, { children: "반가워요" })
+  ] }),
+  args: {
+    justifyContent: "space-between"
+  }
+};
+n.storyName = "Flex.Row";
+const i = {
+  render: (t) => /* @__PURE__ */ e.jsxs(r.Column, { ...t, children: [
+    /* @__PURE__ */ e.jsx(o, { children: "안녕하세요" }),
+    /* @__PURE__ */ e.jsx(s, { children: "반가워요" })
+  ] }),
+  args: {
+    justifyContent: "space-between"
+  }
+};
+i.storyName = "Flex.Column";
+export {
+  n as Story1,
+  i as Story2,
+  j as default
+};

package/dist/library/Flex/index.styled.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("@emotion/styled"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(l),n=e=>({display:"flex",flexWrap:e.flexWrap?e.flexWrap:void 0,justifyContent:e.justifyContent?e.justifyContent:void 0,alignContent:e.alignContent?e.alignContent:void 0}),i=t.default.div(e=>({...n(e),flexDirection:"row"})),a=t.default.div(e=>({...n(e),flexDirection:"column"})),f=t.default.div(e=>({flexGrow:e.flexGrow?e.flexGrow:void 0,flexShrink:e.flexShrink?e.flexGrow:void 0,flexBasis:e.flexBasis?e.flexBasis:void 0}));exports.FlexContainerColumn=a;exports.FlexContainerRow=i;exports.FlexItem=f;

package/dist/library/Flex/index.styled.d.ts

@@ -2,15 +2,15 @@ import { CSSProperties } from 'react';
 export type FlexContainerProps = Pick<CSSProperties, 'flexWrap' | 'justifyContent' | 'alignItems' | 'alignContent'>;
 type FlexItemProps = Pick<CSSProperties, 'flexGrow' | 'flexShrink' | 'flexBasis'>;
 export declare const FlexContainerRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & FlexContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FlexContainerColumn: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & FlexContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const FlexItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & FlexItemProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/dist/library/Flex/index.styled.es.js

@@ -0,0 +1,22 @@
+import n from "@emotion/styled";
+const l = (e) => ({
+  display: "flex",
+  flexWrap: e.flexWrap ? e.flexWrap : void 0,
+  justifyContent: e.justifyContent ? e.justifyContent : void 0,
+  alignContent: e.alignContent ? e.alignContent : void 0
+}), t = n.div((e) => ({
+  ...l(e),
+  flexDirection: "row"
+})), i = n.div((e) => ({
+  ...l(e),
+  flexDirection: "column"
+})), x = n.div((e) => ({
+  flexGrow: e.flexGrow ? e.flexGrow : void 0,
+  flexShrink: e.flexShrink ? e.flexGrow : void 0,
+  flexBasis: e.flexBasis ? e.flexBasis : void 0
+}));
+export {
+  i as FlexContainerColumn,
+  t as FlexContainerRow,
+  x as FlexItem
+};

package/dist/library/GNB/index.constant.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={pc:84,mobile:55};exports.GNB_HEIGHT=e;

package/dist/library/GNB/index.constant.es.js

@@ -0,0 +1,7 @@
+const o = {
+  pc: 84,
+  mobile: 55
+};
+export {
+  o as GNB_HEIGHT
+};

package/dist/library/GlobalLayoutHeaderProvider/index.type.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=t(o),l=a.default.createContext({hideGnb:()=>{console.info("")},showGnb:()=>{console.info("")},setGlobalLayoutHeader:()=>{console.info("")},hasGlobalLayoutHeaderInMobile:!1,hasGlobalLayoutHeader:!1});exports.GlobalLayoutHeaderContext=l;

package/dist/library/GlobalLayoutHeaderProvider/index.type.es.js

@@ -0,0 +1,17 @@
+import o from "react";
+const a = o.createContext({
+  hideGnb: () => {
+    console.info("");
+  },
+  showGnb: () => {
+    console.info("");
+  },
+  setGlobalLayoutHeader: () => {
+    console.info("");
+  },
+  hasGlobalLayoutHeaderInMobile: !1,
+  hasGlobalLayoutHeader: !1
+});
+export {
+  a as GlobalLayoutHeaderContext
+};

package/dist/library/IconWithImage/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../chunks/jsx-runtime.713F0z8w.js"),i=require("./index.styled.cjs.js"),o=({srcPath:e,width:n,height:t})=>r.jsxRuntimeExports.jsx(i.IconWrapper,{width:n,height:t||n,src:`${e}.png`,srcSet:`${e}@2x.png 2x, ${e}@3x.png 3x`});exports.IconWithImage=o;

package/dist/library/IconWithImage/index.es.js

@@ -0,0 +1,14 @@
+import { j as n } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { IconWrapper as x } from "./index.styled.es.js";
+const m = ({ srcPath: r, width: o, height: p }) => /* @__PURE__ */ n.jsx(
+  x,
+  {
+    width: o,
+    height: p || o,
+    src: `${r}.png`,
+    srcSet: `${r}@2x.png 2x, ${r}@3x.png 3x`
+  }
+);
+export {
+  m as IconWithImage
+};

package/dist/library/IconWithImage/index.spec.cjs.js

@@ -0,0 +1 @@
+"use strict";const e=require("../../chunks/jsx-runtime.713F0z8w.js"),t=require("../../chunks/react.esm.DGn2IpBE.js"),r=require("./index.cjs.js"),s={srcPath:"hello.png",width:200};describe("<IconWithImage />",()=>{it("렌더링 체크",()=>{t.render(e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:["확인",e.jsxRuntimeExports.jsx(r.IconWithImage,{...s})]})),expect(t.screen.getByText("확인")).toBeInTheDocument()})});

package/dist/library/IconWithImage/index.spec.es.js

@@ -0,0 +1,17 @@
+import { j as e } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { r as t, s as r } from "../../chunks/react.esm.CbGyPoJJ.js";
+import { IconWithImage as o } from "./index.es.js";
+const s = {
+  srcPath: "hello.png",
+  width: 200
+};
+describe("<IconWithImage />", () => {
+  it("렌더링 체크", () => {
+    t(
+      /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+        "확인",
+        /* @__PURE__ */ e.jsx(o, { ...s })
+      ] })
+    ), expect(r.getByText("확인")).toBeInTheDocument();
+  });
+});

package/dist/library/IconWithImage/index.styled.cjs.js

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@emotion/react"),r=require("@emotion/styled"),c=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=c(r),n=a.default.img`
+	${({width:t,height:e})=>o.css`
+		width: ${t}px
+		height: ${e}px
+	`}
+`;exports.IconWrapper=n;

package/dist/library/IconWithImage/index.styled.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 interface IconWrapperProps {
     width: number;
     height: number;
 }
 export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & IconWrapperProps, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export {};

package/dist/library/IconWithImage/index.styled.es.js

@@ -0,0 +1,11 @@
+import { css as r } from "@emotion/react";
+import t from "@emotion/styled";
+const e = t.img`
+	${({ width: o, height: p }) => r`
+		width: ${o}px
+		height: ${p}px
+	`}
+`;
+export {
+  e as IconWrapper
+};

package/dist/library/List/BottomSheetItemList/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../chunks/jsx-runtime.713F0z8w.js"),r=require("./index.styled.cjs.js"),i=({item:s,onClick:l})=>t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:s.map(e=>t.jsxRuntimeExports.jsx(r.Item,{onClick:()=>{e.disabled||l({value:e.value,label:e.label})},disabled:e.disabled??!1,children:e.label},e.label))});exports.BottomSheetItemList=i;

package/dist/library/List/BottomSheetItemList/index.es.js

@@ -0,0 +1,16 @@
+import { j as e } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import { Item as s } from "./index.styled.es.js";
+const d = ({ item: a, onClick: r }) => /* @__PURE__ */ e.jsx(e.Fragment, { children: a.map((l) => /* @__PURE__ */ e.jsx(
+  s,
+  {
+    onClick: () => {
+      l.disabled || r({ value: l.value, label: l.label });
+    },
+    disabled: l.disabled ?? !1,
+    children: l.label
+  },
+  l.label
+)) });
+export {
+  d as BottomSheetItemList
+};

package/dist/library/List/BottomSheetItemList/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/library/List/BottomSheetItemList/index.styled.cjs.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@emotion/react"),e=require("@emotion/styled"),c=require("../../../core/TextStyles/index.cjs.js"),r=require("../../../core/Colors/index.cjs.js"),s=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},l=s(e),a=l.default.div`
+	width: 100%;
+	height: 48px;
+	padding: 15px 25px;
+	background-color: ${r.basicColors.white};
+	${c.title2({color:r.basicColors.gray400})}
+
+	${({disabled:o})=>o&&t.css`
+			background-color: ${r.basicColors.gray50};
+			color: ${r.basicColors.gray200};
+			cursor: not-allowed;
+		`}
+
+	&:active {
+		background-color: ${r.basicColors.gray25};
+	}
+`;exports.Item=a;

package/dist/library/List/BottomSheetItemList/index.styled.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 export declare const Item: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     disabled: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/library/List/BottomSheetItemList/index.styled.es.js

@@ -0,0 +1,24 @@
+import { css as t } from "@emotion/react";
+import c from "@emotion/styled";
+import { title2 as i } from "../../../core/TextStyles/index.es.js";
+import { basicColors as o } from "../../../core/Colors/index.es.js";
+const m = c.div`
+	width: 100%;
+	height: 48px;
+	padding: 15px 25px;
+	background-color: ${o.white};
+	${i({ color: o.gray400 })}
+
+	${({ disabled: r }) => r && t`
+			background-color: ${o.gray50};
+			color: ${o.gray200};
+			cursor: not-allowed;
+		`}
+
+	&:active {
+		background-color: ${o.gray25};
+	}
+`;
+export {
+  m as Item
+};

package/dist/library/List/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./BottomSheetItemList/index.cjs.js");exports.BottomSheetItemList=t.BottomSheetItemList;

package/dist/library/List/index.es.js

@@ -0,0 +1,4 @@
+import { BottomSheetItemList as o } from "./BottomSheetItemList/index.es.js";
+export {
+  o as BottomSheetItemList
+};

package/dist/library/Lottie/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("../../chunks/jsx-runtime.713F0z8w.js"),l=require("react"),w=require("lottie-web"),P=require("../../hooks/useLayoutIsMobile.cjs.js"),T=require("../../utils/uuid.util.cjs.js"),$=require("../IconWithImage/index.cjs.js"),E=require("./index.styled.cjs.js"),O=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function V(e){if(e&&typeof e=="object"&&"default"in e)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const R=V(l),W=O(w);var M=new Map,S=new WeakMap,q=0,C=void 0;function D(e){return e?(S.has(e)||(q+=1,S.set(e,q.toString())),S.get(e)):"0"}function L(e){return Object.keys(e).sort().filter(n=>e[n]!==void 0).map(n=>`${n}_${n==="root"?D(e.root):e[n]}`).toString()}function z(e){const n=L(e);let t=M.get(n);if(!t){const o=new Map;let a;const f=new IntersectionObserver(u=>{u.forEach(s=>{var i;const g=s.isIntersecting&&a.some(d=>s.intersectionRatio>=d);e.trackVisibility&&typeof s.isVisible>"u"&&(s.isVisible=g),(i=o.get(s.target))==null||i.forEach(d=>{d(g,s)})})},e);a=f.thresholds||(Array.isArray(e.threshold)?e.threshold:[e.threshold||0]),t={id:n,observer:f,elements:o},M.set(n,t)}return t}function F(e,n,t={},o=C){if(typeof window.IntersectionObserver>"u"&&o!==void 0){const i=e.getBoundingClientRect();return n(o,{isIntersecting:o,target:e,intersectionRatio:typeof t.threshold=="number"?t.threshold:0,time:0,boundingClientRect:i,intersectionRect:i,rootBounds:i}),()=>{}}const{id:a,observer:f,elements:u}=z(t),s=u.get(e)||[];return u.has(e)||u.set(e,s),s.push(n),f.observe(e),function(){s.splice(s.indexOf(n),1),s.length===0&&(u.delete(e),f.unobserve(e)),u.size===0&&(f.disconnect(),M.delete(a))}}function I({threshold:e,delay:n,trackVisibility:t,rootMargin:o,root:a,triggerOnce:f,skip:u,initialInView:s,fallbackInView:i,onChange:g}={}){var d;const[h,j]=R.useState(null),p=R.useRef(g),[b,m]=R.useState({inView:!!s,entry:void 0});p.current=g,R.useEffect(()=>{if(u||!h)return;let v;return v=F(h,(A,x)=>{m({inView:A,entry:x}),p.current&&p.current(A,x),x.isIntersecting&&f&&v&&(v(),v=void 0)},{root:a,rootMargin:o,threshold:e,trackVisibility:t,delay:n},i),()=>{v&&v()}},[Array.isArray(e)?e.toString():e,h,a,o,f,u,t,i,n]);const r=(d=b.entry)==null?void 0:d.target,_=R.useRef(void 0);!h&&r&&!f&&!u&&_.current!==r&&(_.current=r,m({inView:!!s,entry:void 0}));const c=[j,b.inView,b.entry];return c.ref=c[0],c.inView=c[1],c.entry=c[2],c}const G=({width:e,height:n,viewBox:t,className:o,playOnce:a,autoplay:f=!1,alterImgSrcOnLoad:u,lottieFileSrcPath:s})=>{const[i,g]=l.useState(null),d=l.useRef(null),h=l.useRef(T.uuid()),j=P(),{ref:p,inView:b}=I({threshold:j?.4:.9,rootMargin:j?"20% 0% 0% 0%":"40% 0% 10% 0%"}),m=l.useMemo(()=>t?`${t.x??0} ${t.y??0} ${t.width} ${t.height}`:void 0,[t]),[r,_]=l.useState();return l.useEffect(()=>{fetch(s).then(c=>c.json()).then(c=>{g(c)}).catch(()=>{console.info("lottie load 에 실패했습니다.")})},[s]),l.useEffect(()=>{if(!d.current||!i)return;const c=W.default.loadAnimation({container:d.current,renderer:"svg",loop:!a,autoplay:f,animationData:i,rendererSettings:{viewBoxSize:m},name:o});return _(c),()=>c.destroy()},[i,o,f,a,m]),l.useEffect(()=>{b?r==null||r.goToAndPlay((r==null?void 0:r.currentFrame)>.9*(r==null?void 0:r.totalFrames)?0:r==null?void 0:r.currentFrame,!0):a?r==null||r.stop():r==null||r.pause()},[b,r,a]),i===null&&u?y.jsxRuntimeExports.jsx(E.AlterImageWrapper,{children:y.jsxRuntimeExports.jsx($.IconWithImage,{width:e||0,srcPath:u})}):y.jsxRuntimeExports.jsx(E.Wrapper,{ref:p,children:y.jsxRuntimeExports.jsx(E.Container,{id:h.current,className:o,ref:d,width:e,height:n})})};exports.Lottie=G;

package/dist/library/Lottie/index.es.js

@@ -0,0 +1,181 @@
+import { j } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import * as b from "react";
+import { useState as x, useRef as y, useMemo as T, useEffect as M } from "react";
+import W from "lottie-web";
+import F from "../../hooks/useLayoutIsMobile.es.js";
+import { uuid as P } from "../../utils/uuid.util.es.js";
+import { IconWithImage as _ } from "../IconWithImage/index.es.js";
+import { AlterImageWrapper as z, Wrapper as C, Container as D } from "./index.styled.es.js";
+var w = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new WeakMap(), V = 0, L = void 0;
+function I(e) {
+  return e ? (A.has(e) || (V += 1, A.set(e, V.toString())), A.get(e)) : "0";
+}
+function q(e) {
+  return Object.keys(e).sort().filter(
+    (t) => e[t] !== void 0
+  ).map((t) => `${t}_${t === "root" ? I(e.root) : e[t]}`).toString();
+}
+function G(e) {
+  const t = q(e);
+  let n = w.get(t);
+  if (!n) {
+    const f = /* @__PURE__ */ new Map();
+    let d;
+    const c = new IntersectionObserver((i) => {
+      i.forEach((o) => {
+        var s;
+        const h = o.isIntersecting && d.some((a) => o.intersectionRatio >= a);
+        e.trackVisibility && typeof o.isVisible > "u" && (o.isVisible = h), (s = f.get(o.target)) == null || s.forEach((a) => {
+          a(h, o);
+        });
+      });
+    }, e);
+    d = c.thresholds || (Array.isArray(e.threshold) ? e.threshold : [e.threshold || 0]), n = {
+      id: t,
+      observer: c,
+      elements: f
+    }, w.set(t, n);
+  }
+  return n;
+}
+function H(e, t, n = {}, f = L) {
+  if (typeof window.IntersectionObserver > "u" && f !== void 0) {
+    const s = e.getBoundingClientRect();
+    return t(f, {
+      isIntersecting: f,
+      target: e,
+      intersectionRatio: typeof n.threshold == "number" ? n.threshold : 0,
+      time: 0,
+      boundingClientRect: s,
+      intersectionRect: s,
+      rootBounds: s
+    }), () => {
+    };
+  }
+  const { id: d, observer: c, elements: i } = G(n), o = i.get(e) || [];
+  return i.has(e) || i.set(e, o), o.push(t), c.observe(e), function() {
+    o.splice(o.indexOf(t), 1), o.length === 0 && (i.delete(e), c.unobserve(e)), i.size === 0 && (c.disconnect(), w.delete(d));
+  };
+}
+function J({
+  threshold: e,
+  delay: t,
+  trackVisibility: n,
+  rootMargin: f,
+  root: d,
+  triggerOnce: c,
+  skip: i,
+  initialInView: o,
+  fallbackInView: s,
+  onChange: h
+} = {}) {
+  var a;
+  const [v, R] = b.useState(null), l = b.useRef(h), [m, p] = b.useState({
+    inView: !!o,
+    entry: void 0
+  });
+  l.current = h, b.useEffect(
+    () => {
+      if (i || !v) return;
+      let g;
+      return g = H(
+        v,
+        ($, E) => {
+          p({
+            inView: $,
+            entry: E
+          }), l.current && l.current($, E), E.isIntersecting && c && g && (g(), g = void 0);
+        },
+        {
+          root: d,
+          rootMargin: f,
+          threshold: e,
+          // @ts-ignore
+          trackVisibility: n,
+          // @ts-ignore
+          delay: t
+        },
+        s
+      ), () => {
+        g && g();
+      };
+    },
+    // We break the rule here, because we aren't including the actual `threshold` variable
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // If the threshold is an array, convert it to a string, so it won't change between renders.
+      Array.isArray(e) ? e.toString() : e,
+      v,
+      d,
+      f,
+      c,
+      i,
+      n,
+      s,
+      t
+    ]
+  );
+  const r = (a = m.entry) == null ? void 0 : a.target, S = b.useRef(void 0);
+  !v && r && !c && !i && S.current !== r && (S.current = r, p({
+    inView: !!o,
+    entry: void 0
+  }));
+  const u = [R, m.inView, m.entry];
+  return u.ref = u[0], u.inView = u[1], u.entry = u[2], u;
+}
+const O = ({
+  width: e,
+  height: t,
+  viewBox: n,
+  className: f,
+  playOnce: d,
+  autoplay: c = !1,
+  alterImgSrcOnLoad: i,
+  lottieFileSrcPath: o
+}) => {
+  const [s, h] = x(null), a = y(null), v = y(P()), R = F(), { ref: l, inView: m } = J({
+    /**
+     * 모바일 : 로띠의 높이가 PC와 다르게 작기 때문에 스크롤시 로띠의 play 시작점을 자연스럽게 하기위해 0.4
+     * PC : 로띠의 play 시작점이 lottie 끝에 들어왔을때 play하기 위해 value 0.9
+     */
+    threshold: R ? 0.4 : 0.9,
+    /**
+     * rootMargin을 주어서 lottie inview에 대한 범위를 추가하였습니다.
+     * 모바일, PC의 높이가 달라 다르게 선언하였습니다.
+     */
+    rootMargin: R ? "20% 0% 0% 0%" : "40% 0% 10% 0%"
+  }), p = T(
+    () => n ? `${n.x ?? 0} ${n.y ?? 0} ${n.width} ${n.height}` : void 0,
+    [n]
+  ), [r, S] = x();
+  return M(() => {
+    fetch(o).then((u) => u.json()).then((u) => {
+      h(u);
+    }).catch(() => {
+      console.info("lottie load 에 실패했습니다.");
+    });
+  }, [o]), M(() => {
+    if (!a.current || !s)
+      return;
+    const u = W.loadAnimation({
+      container: a.current,
+      renderer: "svg",
+      loop: !d,
+      autoplay: c,
+      animationData: s,
+      rendererSettings: {
+        viewBoxSize: p
+      },
+      name: f
+    });
+    return S(u), () => u.destroy();
+  }, [s, f, c, d, p]), M(() => {
+    m ? r == null || r.goToAndPlay(
+      (r == null ? void 0 : r.currentFrame) > 0.9 * (r == null ? void 0 : r.totalFrames) ? 0 : r == null ? void 0 : r.currentFrame,
+      !0
+    ) : d ? r == null || r.stop() : r == null || r.pause();
+  }, [m, r, d]), s === null && i ? /* @__PURE__ */ j.jsx(z, { children: /* @__PURE__ */ j.jsx(_, { width: e || 0, srcPath: i }) }) : /* @__PURE__ */ j.jsx(C, { ref: l, children: /* @__PURE__ */ j.jsx(D, { id: v.current, className: f, ref: a, width: e, height: t }) });
+};
+export {
+  O as Lottie
+};

package/dist/library/Lottie/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/library/Lottie/index.styled.cjs.js

@@ -0,0 +1,17 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@emotion/react"),r=require("@emotion/styled"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=a(r),l=e.default.div`
+	width: 100%;
+`,n=e.default.div`
+	/* block 사용시 container div와 lottie svg 사이 미세한 여백이 발생하여 flex 사용*/
+	display: flex;
+
+	${t=>t.width&&i.css`
+			width: ${t.width}px;
+		`}
+	${t=>t.height&&i.css`
+			height: ${t.height}px;
+		`}
+`,o=e.default.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;exports.AlterImageWrapper=o;exports.Container=n;exports.Wrapper=l;

package/dist/library/Lottie/index.styled.d.ts

@@ -1,18 +1,17 @@
-/// <reference types="react" />
 export interface LottieContainerProps {
     width?: number;
     height?: number;
     className?: string;
 }
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Container: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & LottieContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AlterImageWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/library/Lottie/index.styled.es.js

@@ -0,0 +1,24 @@
+import { css as i } from "@emotion/react";
+import e from "@emotion/styled";
+const n = e.div`
+	width: 100%;
+`, d = e.div`
+	/* block 사용시 container div와 lottie svg 사이 미세한 여백이 발생하여 flex 사용*/
+	display: flex;
+
+	${(t) => t.width && i`
+			width: ${t.width}px;
+		`}
+	${(t) => t.height && i`
+			height: ${t.height}px;
+		`}
+`, s = e.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;
+export {
+  s as AlterImageWrapper,
+  d as Container,
+  n as Wrapper
+};

package/dist/library/Spacing/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../chunks/jsx-runtime.713F0z8w.js"),i=require("./index.styled.cjs.js"),n=({spaceNumber:e})=>t.jsxRuntimeExports.jsx(i.Spacing,{spaceNumber:e});exports.Spacing=n;

package/dist/library/Spacing/index.es.js

@@ -0,0 +1,6 @@
+import { j as o } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { Spacing as p } from "./index.styled.es.js";
+const n = ({ spaceNumber: r }) => /* @__PURE__ */ o.jsx(p, { spaceNumber: r });
+export {
+  n as Spacing
+};