@pfct/purple 1.3.4-npm-test.1

package/.build-storybook/core-Colors-index-stories.0dd3cf1f.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_pfct_purple=self.webpackChunk_pfct_purple||[]).push([[2988],{"./src/core/Colors/index.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{BasicPalette:function(){return BasicPalette},SemanticPalette:function(){return SemanticPalette},__namedExportsOrder:function(){return __namedExportsOrder}});__webpack_require__("./node_modules/react/index.js");var ___WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/core/Colors/index.ts"),_components_Divider__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/Divider/index.tsx"),_library_Spacing__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/library/Spacing/index.tsx"),_utils__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/utils/index.ts"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/react/jsx-runtime.js");const Palette=({fixedColor:fixedColor,name:name,color:color,variants:variants=[""],palette:palette})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div",{style:{display:"flex",flexDirection:"row"},children:variants.map((variant=>{const background=fixedColor||palette?.[`${color+variant}`].toLocaleUpperCase();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)("div",{children:[`${name||color?.toLocaleLowerCase()} ${variant}`,(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("br",{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div",{style:{color:"#9D9D9D"},children:background})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("div",{style:{width:"120px",height:"75px",background:background}}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("br",{})]},variant||"-0")}))})}),SystemColors=()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("h1",{children:" System "}),["white","darkGray","deepDarkGray","black"].map((color=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(Palette,{color:color,palette:___WEBPACK_IMPORTED_MODULE_1__.yf},color)))]}),BasicColors=()=>{const variants=["5","25","50","100","200","300","400","500","600","700","800","900"];return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("h1",{children:" Basic "}),["pink","blue","gray","purple","red","lime","green","yellow"].map((color=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(Palette,{color:color,variants:variants,palette:___WEBPACK_IMPORTED_MODULE_1__.yf},color)))]})},SemanticColors=()=>{const colorMethodSet=_utils__WEBPACK_IMPORTED_MODULE_4__.xy.map((colorType=>({method:"buttonSubDisabledText",colorType:colorType})));return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("h1",{children:" Semantic (no colorType) "}),[{color:"backgroundBasic",name:"Background Basic"},{color:"backgroundDeep",name:"BackgroundDeep"},{color:"buttonGrayMainAbledText",name:"Button Main Abled Text (Gray)"},{color:"buttonMainDisabledText",name:"Button Main Disabled Text"},{color:"toastMessageContainer",name:"Toast Message Container"},{color:"toastMessageMiniButtonEnabledContainer",name:"Toast Message Mini Button Container Enabled"},{color:"toastMessageMiniButtonHoverContainer",name:"Toast Message Mini Button Container Hover"},{color:"toastMessageMiniButtonFocusContainer",name:"Toast Message Mini Button Container Focus "},{color:"controlGraySwitchEnabledOnContainer",name:"Control Switch Enabled On Container (Gray)"},{color:"controlSwitchEnabledOffInnerCircle",name:"Control Switch Enabled Off Innercircle"},{color:"controlSwitchDisabledOnInnerCircle",name:"Control Switch Disabled On Innercircle"},{color:"controlSwitchDisabledOffInnerCircle",name:"Control Switch Disabled Off Innercircle"},{color:"dividerM",name:"Divider M"},{color:"card",name:"Card"},{color:"segmentControlContainer",name:"Segment Control Container"},{color:"segmentControlSegment",name:"Segment Control Segment"}].map((({color:color,name:name})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(Palette,{name:name,color:color,palette:___WEBPACK_IMPORTED_MODULE_1__.iK},color))),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_components_Divider__WEBPACK_IMPORTED_MODULE_2__.i,{size:"s"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_library_Spacing__WEBPACK_IMPORTED_MODULE_3__.K,{spaceNumber:20}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)("h1",{children:" Semantic (w. colorType) "}),colorMethodSet.map((({method:method,colorType:colorType})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(Palette,{name:`${method} (${colorType})`,fixedColor:___WEBPACK_IMPORTED_MODULE_1__.HI[method](colorType)},method)))]})};__webpack_exports__.default={title:"Foundation/Color",tags:["autodocs"],parameters:{docs:{description:{component:'updated 230523\n\n<a href="https://www.notion.so/Color-3c22c42d7980452bbca325b13f027712?pvs=4" target="_blank">노션페이지</a>\n<br/>\n컬러는 제품 전반에 걸쳐 일관된 경험을 제공하는 역할을 하는 피플펀드를 대표하는 요소 중 하나로 베이직 컬러와 시멘틱 컬러로 구성되어 있습니다.<br/>대표적인 컬러는 두 가지로 Pink는 대출, Blue는 투자 서비스에 사용합니다.'}}}};const BasicPalette={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(BasicColors,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(SystemColors,{})]}),parameters:{docs:{description:{story:"베이직 컬러는 기본 컬러 팔레트의 기능을 합니다.<br/>각 컬러는 400값이 메인 컬러이며, 예외로 Gray는 900값을 메인 컬러로, System은 메인 컬러 없이 사용합니다."}}}},SemanticPalette={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(SemanticColors,{}),parameters:{docs:{description:{story:"시멘틱 컬러는 베이직 컬러 팔레트에서 라이트/다크 모드 1:1 대응이 되지 않는 예외 케이스에 사용합니다.<br/>베이직 컬러를 토대로 사용하는 목적에 맞게 네이밍하고 시스템화하여 다크 모드에 최적화된 컬러 대응이 가능하도록 해줍니다."}}}};BasicPalette.parameters={...BasicPalette.parameters,docs:{...BasicPalette.parameters?.docs,source:{originalSource:"{\n  render: () => <>\n            <BasicColors />\n            <SystemColors />\n        </>,\n  parameters: {\n    docs: {\n      description: {\n        story: '베이직 컬러는 기본 컬러 팔레트의 기능을 합니다.<br/>각 컬러는 400값이 메인 컬러이며, 예외로 Gray는 900값을 메인 컬러로, System은 메인 컬러 없이 사용합니다.'\n      }\n    }\n  }\n}",...BasicPalette.parameters?.docs?.source}}},SemanticPalette.parameters={...SemanticPalette.parameters,docs:{...SemanticPalette.parameters?.docs,source:{originalSource:"{\n  render: () => <SemanticColors />,\n  parameters: {\n    docs: {\n      description: {\n        story: '시멘틱 컬러는 베이직 컬러 팔레트에서 라이트/다크 모드 1:1 대응이 되지 않는 예외 케이스에 사용합니다.<br/>베이직 컬러를 토대로 사용하는 목적에 맞게 네이밍하고 시스템화하여 다크 모드에 최적화된 컬러 대응이 가능하도록 해줍니다.'\n      }\n    }\n  }\n}",...SemanticPalette.parameters?.docs?.source}}};const __namedExportsOrder=["BasicPalette","SemanticPalette"];try{__object.displayName="__object",__object.__docgenInfo={description:'updated 230523\n\n<a href="https://www.notion.so/Color-3c22c42d7980452bbca325b13f027712?pvs=4" target="_blank">노션페이지</a>\n<br/>\n컬러는 제품 전반에 걸쳐 일관된 경험을 제공하는 역할을 하는 피플펀드를 대표하는 요소 중 하나로 베이직 컬러와 시멘틱 컬러로 구성되어 있습니다.<br/>대표적인 컬러는 두 가지로 Pink는 대출, Blue는 투자 서비스에 사용합니다.',displayName:"__object",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/core/Colors/index.stories.tsx#__object"]={docgenInfo:__object.__docgenInfo,name:"__object",path:"src/core/Colors/index.stories.tsx#__object"})}catch(__react_docgen_typescript_loader_error){}}}]);

package/.build-storybook/core-Typography-index-stories.f364e712.iframe.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_pfct_purple=self.webpackChunk_pfct_purple||[]).push([[6175],{"./src/core/Typography/index.stories.tsx":function(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Typography:function(){return Typography},__namedExportsOrder:function(){return __namedExportsOrder}});__webpack_require__("./node_modules/react/index.js");var _Headline1__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/core/Typography/Headline1.tsx"),_Headline2__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/core/Typography/Headline2.tsx"),_Headline3__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/core/Typography/Headline3.tsx"),_Headline4__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/core/Typography/Headline4.tsx"),_Headline5__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/core/Typography/Headline5.tsx"),_Headline6__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/core/Typography/Headline6.tsx"),_Title1__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/core/Typography/Title1.tsx"),_Title2__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/core/Typography/Title2.tsx"),_Title3__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/core/Typography/Title3.tsx"),_Title4__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./src/core/Typography/Title4.tsx"),_Body1__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./src/core/Typography/Body1.tsx"),_Body2__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./src/core/Typography/Body2.tsx"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./node_modules/react/jsx-runtime.js");const CONTENT="보통 사람을 위한\n보통이 아닌 금융\nExtraordinary\nFinance for the\nOrdinary",Component=({children:children})=>{const data=[{tag:"H1",content:CONTENT,Typo:_Headline1__WEBPACK_IMPORTED_MODULE_1__.i},{tag:"H2",content:CONTENT,Typo:_Headline2__WEBPACK_IMPORTED_MODULE_2__.x},{tag:"H3",content:CONTENT,Typo:_Headline3__WEBPACK_IMPORTED_MODULE_3__.a},{tag:"H4",content:CONTENT,Typo:_Headline4__WEBPACK_IMPORTED_MODULE_4__.O},{tag:"H5",content:CONTENT,Typo:_Headline5__WEBPACK_IMPORTED_MODULE_5__.B},{tag:"H6",content:CONTENT,Typo:_Headline6__WEBPACK_IMPORTED_MODULE_6__.u},{tag:"T1",content:CONTENT,Typo:_Title1__WEBPACK_IMPORTED_MODULE_7__.w},{tag:"T2",content:CONTENT,Typo:_Title2__WEBPACK_IMPORTED_MODULE_8__.R},{tag:"T3",content:CONTENT,Typo:_Title3__WEBPACK_IMPORTED_MODULE_9__.y},{tag:"T4",content:CONTENT,Typo:_Title4__WEBPACK_IMPORTED_MODULE_10__.G},{tag:"B1",content:CONTENT,Typo:_Body1__WEBPACK_IMPORTED_MODULE_11__.m},{tag:"B2",content:CONTENT,Typo:_Body2__WEBPACK_IMPORTED_MODULE_12__.p}];return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("table",{style:{borderCollapse:"collapse"},children:data.map((({tag:tag,content:content,Typo:Typo})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("tr",{style:{border:"1px solid black"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("td",{style:{border:"1px solid black",textAlign:"center",width:200},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(Typo,{children:tag})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("td",{style:{border:"1px solid black",textAlign:"center",width:400,padding:"15px 0"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(Typo,{children:children||content})})]},tag)))})};Component.displayName="Component";__webpack_exports__.default={title:"Foundation/Typography",tags:["autodocs"],parameters:{docs:{description:{component:'updated 230523\n\n<a href="https://www.notion.so/Typography-b6759a3047424987887edd456444a721?pvs=4" target="_blank">노션페이지</a>\n<br/>\n타이포그래피를 사용하여 콘텐츠를 최대한 명확하고 효율적으로 표현합니다.<br/>폰트의 크기, 굵기 및 컬러를 활용하여 시각적인 효과를 통해 안정적이고 읽기 쉬운 콘텐츠를 만들어 최적의 가독성을 제공합니다.'}}}};const Typography={render:props=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(Component,{...props}),args:{children:""}};Typography.parameters={...Typography.parameters,docs:{...Typography.parameters?.docs,source:{originalSource:"{\n  render: props => <Component {...props} />,\n  args: {\n    children: ''\n  }\n}",...Typography.parameters?.docs?.source}}};const __namedExportsOrder=["Typography"];try{__object.displayName="__object",__object.__docgenInfo={description:'updated 230523\n\n<a href="https://www.notion.so/Typography-b6759a3047424987887edd456444a721?pvs=4" target="_blank">노션페이지</a>\n<br/>\n타이포그래피를 사용하여 콘텐츠를 최대한 명확하고 효율적으로 표현합니다.<br/>폰트의 크기, 굵기 및 컬러를 활용하여 시각적인 효과를 통해 안정적이고 읽기 쉬운 콘텐츠를 만들어 최적의 가독성을 제공합니다.',displayName:"__object",props:{}},"undefined"!=typeof STORYBOOK_REACT_CLASSES&&(STORYBOOK_REACT_CLASSES["src/core/Typography/index.stories.tsx#__object"]={docgenInfo:__object.__docgenInfo,name:"__object",path:"src/core/Typography/index.stories.tsx#__object"})}catch(__react_docgen_typescript_loader_error){}}}]);

package/.build-storybook/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="164" height="164">
+  <svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z" fill="#FF4785"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" fill="#fff"></path>
+  </svg>
+  <style>@media (prefers-color-scheme: light) { :root { filter: none; } }</style>
+</svg>

package/.build-storybook/iframe.html

@@ -0,0 +1,406 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Webpack App</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="prefetch" href="./sb-common-assets/nunito-sans-regular.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-italic.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-bold.woff2" as="font" type="font/woff2" crossorigin><link rel="prefetch" href="./sb-common-assets/nunito-sans-bold-italic.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="./sb-common-assets/fonts.css"><base target="_parent"><style>/* While we aren't showing the main block yet, but still preparing, we want everything the user
+     has rendered, which may or may not be in #storybook-root, to be display none */
+  .sb-show-preparing-story:not(.sb-show-main) > :not(.sb-preparing-story) {
+    display: none;
+  }
+
+  .sb-show-preparing-docs:not(.sb-show-main) > :not(.sb-preparing-docs) {
+    display: none;
+  }
+
+  /* Hide our own blocks when we aren't supposed to be showing them */
+  :not(.sb-show-preparing-story) > .sb-preparing-story,
+  :not(.sb-show-preparing-docs) > .sb-preparing-docs,
+  :not(.sb-show-nopreview) > .sb-nopreview,
+  :not(.sb-show-errordisplay) > .sb-errordisplay {
+    display: none;
+  }
+
+  .sb-show-main.sb-main-centered {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    min-height: 100vh;
+  }
+
+  .sb-show-main.sb-main-centered #storybook-root {
+    box-sizing: border-box;
+    margin: auto;
+    padding: 1rem;
+    max-height: 100%; /* Hack for centering correctly in IE11 */
+  }
+
+  /* Vertical centering fix for IE11 */
+  @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+    .sb-show-main.sb-main-centered:after {
+      content: '';
+      min-height: inherit;
+      font-size: 0;
+    }
+  }
+
+  .sb-show-main.sb-main-fullscreen {
+    margin: 0;
+    padding: 0;
+    display: block;
+  }
+
+  .sb-show-main.sb-main-padded {
+    margin: 0;
+    padding: 1rem;
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .sb-wrapper {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20px;
+    font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
+      BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    overflow: auto;
+  }
+
+  .sb-heading {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+    margin: 10px 0;
+    padding-right: 25px;
+  }
+
+  .sb-nopreview {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+  }
+
+  .sb-nopreview_main {
+    margin: auto;
+    padding: 30px;
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.03);
+  }
+
+  .sb-nopreview_heading {
+    text-align: center;
+  }
+
+  .sb-errordisplay {
+    border: 20px solid rgb(187, 49, 49);
+    background: #222;
+    color: #fff;
+    z-index: 999999;
+  }
+
+  .sb-errordisplay_code {
+    padding: 10px;
+    background: #000;
+    color: #eee;
+    font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
+      'Lucida Console', Consolas, Monaco, monospace;
+  }
+
+  .sb-errordisplay pre {
+    white-space: pre-wrap;
+  }
+
+  @-webkit-keyframes sb-rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes sb-rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes sb-glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  @keyframes sb-glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+
+  /* We display the preparing loaders *over* the rendering story */
+  .sb-preparing-story,
+  .sb-preparing-docs {
+    background-color: white;
+    /* Maximum possible z-index. It would be better to use stacking contexts to ensure it's always
+    on top, but this isn't possible as it would require making CSS changes that could affect user code */
+    z-index: 2147483647;
+  }
+
+  .sb-loader {
+    -webkit-animation: sb-rotate360 0.7s linear infinite;
+    animation: sb-rotate360 0.7s linear infinite;
+    border-color: rgba(97, 97, 97, 0.29);
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: #646464;
+    border-width: 2px;
+    display: inline-block;
+    height: 32px;
+    left: 50%;
+    margin-left: -16px;
+    margin-top: -16px;
+    mix-blend-mode: difference;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    transition: all 200ms ease-out;
+    vertical-align: top;
+    width: 32px;
+    z-index: 4;
+  }
+
+  .sb-previewBlock {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+    margin: 25px auto 40px;
+    max-width: 600px;
+  }
+
+  .sb-previewBlock_header {
+    align-items: center;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
+    display: flex;
+    gap: 14px;
+    height: 40px;
+    padding: 0 12px;
+  }
+
+  .sb-previewBlock_icon {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background: #e6e6e6;
+    height: 14px;
+    width: 14px;
+  }
+  .sb-previewBlock_icon:last-child {
+    margin-left: auto;
+  }
+
+  .sb-previewBlock_body {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    height: 182px;
+    position: relative;
+  }
+
+  .sb-argstableBlock {
+    border-collapse: collapse;
+    border-spacing: 0;
+    font-size: 13px;
+    line-height: 20px;
+    margin: 25px auto 40px;
+    max-width: 600px;
+    text-align: left;
+    width: 100%;
+  }
+  .sb-argstableBlock th:first-of-type,
+  .sb-argstableBlock td:first-of-type {
+    padding-left: 20px;
+  }
+  .sb-argstableBlock th:nth-of-type(2),
+  .sb-argstableBlock td:nth-of-type(2) {
+    width: 35%;
+  }
+  .sb-argstableBlock th:nth-of-type(3),
+  .sb-argstableBlock td:nth-of-type(3) {
+    width: 15%;
+  }
+  .sb-argstableBlock th:last-of-type,
+  .sb-argstableBlock td:last-of-type {
+    width: 25%;
+    padding-right: 20px;
+  }
+  .sb-argstableBlock th span,
+  .sb-argstableBlock td span {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+  }
+  .sb-argstableBlock th {
+    padding: 10px 15px;
+  }
+
+  .sb-argstableBlock-body {
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
+  }
+  .sb-argstableBlock-body tr {
+    background: transparent;
+    overflow: hidden;
+  }
+  .sb-argstableBlock-body tr:not(:first-child) {
+    border-top: 1px solid #e6e6e6;
+  }
+  .sb-argstableBlock-body tr:first-child td:first-child {
+    border-top-left-radius: 4px;
+  }
+  .sb-argstableBlock-body tr:first-child td:last-child {
+    border-top-right-radius: 4px;
+  }
+  .sb-argstableBlock-body tr:last-child td:first-child {
+    border-bottom-left-radius: 4px;
+  }
+  .sb-argstableBlock-body tr:last-child td:last-child {
+    border-bottom-right-radius: 4px;
+  }
+  .sb-argstableBlock-body td {
+    background: #fff;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    vertical-align: top;
+  }
+  .sb-argstableBlock-body td:not(:first-of-type) {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .sb-argstableBlock-body button {
+    -webkit-animation: sb-glow 1.5s ease-in-out infinite;
+    animation: sb-glow 1.5s ease-in-out infinite;
+    background-color: rgba(0, 0, 0, 0.1);
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    color: transparent;
+    display: inline;
+    font-size: 12px;
+    line-height: 1;
+    padding: 10px 16px;
+  }
+
+  .sb-argstableBlock-summary {
+    margin-top: 4px;
+  }
+
+  .sb-argstableBlock-code {
+    margin-right: 4px;
+    margin-bottom: 4px;
+    padding: 2px 5px;
+  }</style><script>/* globals window */
+  /* eslint-disable no-underscore-dangle */
+  try {
+    if (window.top !== window) {
+      window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.top.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
+      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn('unable to connect to top frame for connecting dev tools');
+  }</script><style>#storybook-root[hidden],
+      #storybook-docs[hidden] {
+        display: none !important;
+      }</style></head><body><div id="custom-root"></div><style>* {
+		font-family: 'Pretendard';
+	}
+
+	.docs-story {
+		background-color: #E5E5E5;
+		width: 100%;
+		padding: 0;
+	}
+
+	.sb-show-main {
+		padding: 0 !important;
+	}
+
+	/* ======= 시작 - style 초기화 (phoenix, million-frontend 와 동일) ======= */
+	* {
+		touch-action: manipulation;
+		box-sizing: border-box;
+	}
+
+	i {
+		font-style: normal;
+	}
+
+	input,
+	button {
+		font-family: inherit;
+	}
+
+	button {
+		cursor: pointer;
+	}
+
+	button:disabled {
+		cursor: not-allowed;
+	}
+
+	/**
+		https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
+	*/
+	input:-webkit-autofill {
+		-webkit-box-shadow: 0 0 0 1000px transparent inset;
+	}
+
+	input:-webkit-autofill,
+	input:-webkit-autofill:hover,
+	input:-webkit-autofill:focus,
+	input:-webkit-autofill:active {
+		transition: background-color 5000s ease-in-out 0s;
+	}
+
+	/* ======= 끝 - style 초기화 (phoenix, million-frontend 와 동일) ======= */</style><link rel="stylesheet" as="style" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"><div class="sb-preparing-story sb-wrapper"><div class="sb-loader"></div></div><div class="sb-preparing-docs sb-wrapper"><div class="sb-previewBlock"><div class="sb-previewBlock_header"><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div><div class="sb-previewBlock_icon"></div></div><div class="sb-previewBlock_body"><div class="sb-loader"></div></div></div><table aria-hidden="true" class="sb-argstableBlock"><thead class="sb-argstableBlock-head"><tr><th><span>Name</span></th><th><span>Description</span></th><th><span>Default</span></th><th><span>Control</span></th></tr></thead><tbody class="sb-argstableBlock-body"><tr><td><span>propertyName</span><span title="Required">*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr><tr><td><span>propertyName</span><span>*</span></td><td><div><span>This is a short description</span></div><div class="sb-argstableBlock-summary"><div><span class="sb-argstableBlock-code">summary</span></div></div></td><td><div><span class="sb-argstableBlock-code">defaultValue</span></div></td><td><button>Set string</button></td></tr></tbody></table></div><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="storybook-root"></div><div id="storybook-docs"></div><script>window['CONFIG_TYPE'] = "PRODUCTION";
+          
+      
+          
+            window['LOGLEVEL'] = "info";
+          
+      
+          
+            window['FRAMEWORK_OPTIONS'] = {"name":"@storybook/react-webpack5","options":{"legacyRootApi":true}};
+          
+      
+          
+      
+          
+            window['FEATURES'] = {"warnOnLegacyHierarchySeparator":true,"buildStoriesJson":false,"storyStoreV7":true,"argTypeTargetsV7":true,"legacyDecoratorFileOrder":false};
+          
+      
+          
+      
+          
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/*.stories.@(js|jsx|ts|tsx)","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(js|jsx|ts|tsx))$"}];
+          
+      
+          
+            window['DOCS_OPTIONS'] = {"defaultName":"Docs","autodocs":"tag"};</script><script type="module">import './sb-preview/runtime.mjs';
+
+      
+      import './runtime~main.f7c5573a.iframe.bundle.js';
+      
+      import './782.4c3df606.iframe.bundle.js';
+      
+      import './main.5b42f3b1.iframe.bundle.js';</script></body></html>

package/.build-storybook/index.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+
+    <title>@storybook/cli - Storybook</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    
+    <link
+      rel="prefetch"
+      href="./sb-common-assets/nunito-sans-regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="prefetch"
+      href="./sb-common-assets/nunito-sans-bold.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link rel="stylesheet" href="./sb-common-assets/fonts.css" />
+
+    <link href="./sb-manager/runtime.mjs" rel="modulepreload" />
+
+    
+    <link href="./sb-addons/links-0/manager-bundle.mjs" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-controls-1/manager-bundle.mjs" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-actions-2/manager-bundle.mjs" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-backgrounds-3/manager-bundle.mjs" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-viewport-4/manager-bundle.mjs" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-toolbars-5/manager-bundle.mjs" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-measure-6/manager-bundle.mjs" rel="modulepreload" />
+    
+    <link href="./sb-addons/essentials-outline-7/manager-bundle.mjs" rel="modulepreload" />
+    
+    <link href="./sb-addons/interactions-8/manager-bundle.mjs" rel="modulepreload" />
+       
+
+    <style>
+      #storybook-root[hidden] {
+        display: none !important;
+      }
+    </style>
+
+    
+  </head>
+  <body>
+    <div id="root"></div>
+
+    
+    <script>
+      
+        
+          window['FEATURES'] = {
+  "warnOnLegacyHierarchySeparator": true,
+  "buildStoriesJson": false,
+  "storyStoreV7": true,
+  "argTypeTargetsV7": true,
+  "legacyDecoratorFileOrder": false
+};
+        
+      
+        
+          window['REFS'] = {};
+        
+      
+        
+          window['LOGLEVEL'] = "info";
+        
+      
+        
+          window['DOCS_OPTIONS'] = {
+  "defaultName": "Docs",
+  "autodocs": "tag"
+};
+        
+      
+        
+          window['CONFIG_TYPE'] = "PRODUCTION";
+        
+      
+        
+      
+        
+      
+        
+      
+        
+      
+    </script>
+    
+
+    <script type="module">
+      import './sb-manager/runtime.mjs';
+
+      
+      import './sb-addons/links-0/manager-bundle.mjs';
+      
+      import './sb-addons/essentials-controls-1/manager-bundle.mjs';
+      
+      import './sb-addons/essentials-actions-2/manager-bundle.mjs';
+      
+      import './sb-addons/essentials-backgrounds-3/manager-bundle.mjs';
+      
+      import './sb-addons/essentials-viewport-4/manager-bundle.mjs';
+      
+      import './sb-addons/essentials-toolbars-5/manager-bundle.mjs';
+      
+      import './sb-addons/essentials-measure-6/manager-bundle.mjs';
+      
+      import './sb-addons/essentials-outline-7/manager-bundle.mjs';
+      
+      import './sb-addons/interactions-8/manager-bundle.mjs';
+      
+    </script>
+
+    <link href="./sb-preview/runtime.mjs" rel="prefetch" as="script" />
+  </body>
+</html>