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

package/dist/components/Segment/BaseSegment/index.styled.es.js

@@ -0,0 +1,55 @@
+import t from "@emotion/styled";
+import { typography as n } from "../../../core/TextStyles/index.es.js";
+import { basicColors as e, semanticColors as r } from "../../../core/Colors/index.es.js";
+const i = {
+  segmentControl: "segment-control",
+  segmentLabel: "segment-label"
+}, p = t.div`
+	width: ${({ width: o }) => `${o}%`};
+	background-color: ${e.white};
+	position: absolute;
+	left: ${({ control: o }) => `${o}%`};
+	transition: left 0.4s ease-out;
+	z-index: -10 !important;
+	border-radius: 8px;
+	box-shadow: 0px 2px 4px rgba(208, 208, 208, 0.5);
+`, d = t.label`
+	${n.h6};
+	font-weight: 700;
+	transition: all 0.4s ease-out;
+	color: ${({ active: o }) => o ? e.gray900 : e.gray200};
+`, b = t.div`
+	box-sizing: border-box;
+	width: 100%;
+	height: 48px;
+	position: relative;
+	background-color: ${r.segmentControlContainer};
+	z-index: 5;
+	border-radius: 10px;
+	padding: 4px;
+`, g = t.input`
+	display: none;
+`, x = t.div`
+	width: calc(100% - 8px);
+	height: 40px;
+	box-sizing: border-box;
+	position: absolute;
+
+	& > .${i.segmentControl}, .${i.segmentLabel} {
+		width: ${({ width: o }) => `${o}%`};
+		height: 40px;
+		text-align: center;
+		display: inline-block;
+		z-index: 2;
+		line-height: 40px;
+		cursor: pointer;
+	}
+`;
+export {
+  p as Control,
+  g as Input,
+  d as Label,
+  x as LabelWrapper,
+  b as Wrapper,
+  i as className
+};

package/dist/components/Segment/ExtendSegment/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../../../chunks/jsx-runtime.713F0z8w.js"),x=require("react"),s=require("./index.styled.cjs.js"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=p(x),j=({item:e,value:o="",onChange:u})=>{const c=100/e.length,a=()=>{const t=e.findIndex(r=>r.value===o)*100;return t<0?0:t/e.length};return n.jsxRuntimeExports.jsx(s.Wrapper,{children:n.jsxRuntimeExports.jsxs(s.LabelWrapper,{width:c,children:[e.map((t,r)=>{const i=o===t.value,d=(()=>{const l=[i?"active":"disabled"];return l.push(s.className.extendSegmentLabel),l.join(" ")})();return n.jsxRuntimeExports.jsx(m.default.Fragment,{children:n.jsxRuntimeExports.jsx(s.Label,{className:d,active:i,onClick:()=>{u(t.value)},children:t.children})},r)}),n.jsxRuntimeExports.jsx(s.Control,{control:a(),width:c})]})})};exports.ExtendSegment=j;

package/dist/components/Segment/ExtendSegment/index.es.js

@@ -0,0 +1,32 @@
+import { j as n } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import x from "react";
+import { Wrapper as m, LabelWrapper as p, className as u, Label as h, Control as j } from "./index.styled.es.js";
+const L = ({ item: r, value: s = "", onChange: l }) => {
+  const o = 100 / r.length, i = () => {
+    const e = r.findIndex((t) => t.value === s) * 100;
+    return e < 0 ? 0 : e / r.length;
+  };
+  return /* @__PURE__ */ n.jsx(m, { children: /* @__PURE__ */ n.jsxs(p, { width: o, children: [
+    r.map((e, t) => {
+      const c = s === e.value, d = (() => {
+        const a = [c ? "active" : "disabled"];
+        return a.push(u.extendSegmentLabel), a.join(" ");
+      })();
+      return /* @__PURE__ */ n.jsx(x.Fragment, { children: /* @__PURE__ */ n.jsx(
+        h,
+        {
+          className: d,
+          active: c,
+          onClick: () => {
+            l(e.value);
+          },
+          children: e.children
+        }
+      ) }, t);
+    }),
+    /* @__PURE__ */ n.jsx(j, { control: i(), width: o })
+  ] }) });
+};
+export {
+  L as ExtendSegment
+};

package/dist/components/Segment/ExtendSegment/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/components/Segment/ExtendSegment/index.styled.cjs.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@emotion/styled"),t=require("../BaseSegment/index.styled.cjs.js"),l=require("../../../core/Colors/index.cjs.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=a(r),o={extendSegmentLabel:"extend-segment-label"},s=t.Control,i=n.default(t.Label)`
+	/* fyi. selector 여러개와 !important 로 비활성화 색깔 고정 */
+
+	&.disabled > * {
+		color: ${l.basicColors.gray200} !important;
+	}
+`,c=t.Wrapper,p=t.Input,d=n.default(t.LabelWrapper)`
+	& > .${o.extendSegmentLabel} {
+		width: ${({width:e})=>`${e}%`};
+		height: 40px;
+		text-align: center;
+		z-index: 2;
+		line-height: 40px;
+		cursor: pointer;
+
+		/* 다른 속성 */
+		display: inline-flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+`;exports.Control=s;exports.Input=p;exports.Label=i;exports.LabelWrapper=d;exports.Wrapper=c;exports.className=o;

package/dist/components/Segment/ExtendSegment/index.styled.d.ts

@@ -1,35 +1,34 @@
-/// <reference types="react" />
 export declare const className: {
     extendSegmentLabel: string;
 };
 export declare const Control: 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;
 } & {
     control: number;
     width: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Label: 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;
 } & {
     active: boolean;
 } & import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 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 Input: 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").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 export declare const LabelWrapper: 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;
 } & {
     width: number;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

package/dist/components/Segment/ExtendSegment/index.styled.es.js

@@ -0,0 +1,34 @@
+import e from "@emotion/styled";
+import { Label as r, LabelWrapper as n, Control as o, Wrapper as a, Input as l } from "../BaseSegment/index.styled.es.js";
+import { basicColors as p } from "../../../core/Colors/index.es.js";
+const s = {
+  extendSegmentLabel: "extend-segment-label"
+}, b = o, d = e(r)`
+	/* fyi. selector 여러개와 !important 로 비활성화 색깔 고정 */
+
+	&.disabled > * {
+		color: ${p.gray200} !important;
+	}
+`, x = a, $ = l, L = e(n)`
+	& > .${s.extendSegmentLabel} {
+		width: ${({ width: t }) => `${t}%`};
+		height: 40px;
+		text-align: center;
+		z-index: 2;
+		line-height: 40px;
+		cursor: pointer;
+
+		/* 다른 속성 */
+		display: inline-flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+`;
+export {
+  b as Control,
+  $ as Input,
+  d as Label,
+  L as LabelWrapper,
+  x as Wrapper,
+  s as className
+};

package/dist/components/Segment/ExtendSegment/index.styled.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/components/Segment/index.cjs.js

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

package/dist/components/Segment/index.es.js

@@ -0,0 +1,6 @@
+import { Segment as m } from "./BaseSegment/index.es.js";
+import { ExtendSegment as r } from "./ExtendSegment/index.es.js";
+export {
+  r as ExtendSegment,
+  m as Segment
+};

package/dist/components/Segment/index.stories.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("../../chunks/jsx-runtime.713F0z8w.js"),x=require("react"),i=require("./BaseSegment/index.cjs.js"),j=require("./ExtendSegment/index.cjs.js"),c=require("../../core/Colors/index.cjs.js"),a={title:"Component/Segment",component:i.Segment,tags:["autodocs"]},d=t=>{const[s,n]=x.useState(t.item[0]),r=o=>{n(o)};return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:["selected: ",s,e.jsxRuntimeExports.jsx("br",{}),e.jsxRuntimeExports.jsx("br",{}),e.jsxRuntimeExports.jsx(i.Segment,{...t,value:s,onChange:r})]})},m={render:t=>e.jsxRuntimeExports.jsx("div",{style:{width:"600px"},children:e.jsxRuntimeExports.jsx(d,{...t})}),args:{item:["One","Two","Three"]},argTypes:{onChange:{action:"onChange"}}};m.storyName="Segment - 문자열 리스트";const l=t=>{const[s,n]=x.useState(t.item[0].value),r=o=>{n(o)};return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:["selected: ",s,e.jsxRuntimeExports.jsx("br",{}),e.jsxRuntimeExports.jsx("br",{}),e.jsxRuntimeExports.jsx(j.ExtendSegment,{...t,value:s,onChange:r})]})},u={render:t=>e.jsxRuntimeExports.jsx("div",{style:{width:"600px"},children:e.jsxRuntimeExports.jsx(l,{...t})}),args:{item:[{value:"부정",children:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{children:"부정"}),e.jsxRuntimeExports.jsx("div",{style:{color:c.basicColors.red300,paddingLeft:"5px"},children:"4"})]})},{value:"긍정",children:e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("div",{children:"긍정"}),e.jsxRuntimeExports.jsx("div",{style:{color:"#6EED81",paddingLeft:"5px"},children:"1"})]})}]},argTypes:{onChange:{action:"onChange"}}};u.storyName="Segment - 컴포넌트 리스트";exports.Story1=m;exports.Story2=u;exports.default=a;

package/dist/components/Segment/index.stories.es.js

@@ -0,0 +1,71 @@
+import { j as e } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { useState as a } from "react";
+import { Segment as i } from "./BaseSegment/index.es.js";
+import { ExtendSegment as d } from "./ExtendSegment/index.es.js";
+import { basicColors as m } from "../../core/Colors/index.es.js";
+const y = {
+  title: "Component/Segment",
+  component: i,
+  tags: ["autodocs"]
+}, c = (t) => {
+  const [n, s] = a(t.item[0]), r = (o) => {
+    s(o);
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    "selected: ",
+    n,
+    /* @__PURE__ */ e.jsx("br", {}),
+    /* @__PURE__ */ e.jsx("br", {}),
+    /* @__PURE__ */ e.jsx(i, { ...t, value: n, onChange: r })
+  ] });
+}, l = {
+  render: (t) => /* @__PURE__ */ e.jsx("div", { style: { width: "600px" }, children: /* @__PURE__ */ e.jsx(c, { ...t }) }),
+  args: {
+    item: ["One", "Two", "Three"]
+  },
+  argTypes: {
+    onChange: { action: "onChange" }
+  }
+};
+l.storyName = "Segment - 문자열 리스트";
+const x = (t) => {
+  const [n, s] = a(t.item[0].value), r = (o) => {
+    s(o);
+  };
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    "selected: ",
+    n,
+    /* @__PURE__ */ e.jsx("br", {}),
+    /* @__PURE__ */ e.jsx("br", {}),
+    /* @__PURE__ */ e.jsx(d, { ...t, value: n, onChange: r })
+  ] });
+}, g = {
+  render: (t) => /* @__PURE__ */ e.jsx("div", { style: { width: "600px" }, children: /* @__PURE__ */ e.jsx(x, { ...t }) }),
+  args: {
+    item: [
+      {
+        value: "부정",
+        children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx("div", { children: "부정" }),
+          /* @__PURE__ */ e.jsx("div", { style: { color: m.red300, paddingLeft: "5px" }, children: "4" })
+        ] })
+      },
+      {
+        value: "긍정",
+        children: /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx("div", { children: "긍정" }),
+          /* @__PURE__ */ e.jsx("div", { style: { color: "#6EED81", paddingLeft: "5px" }, children: "1" })
+        ] })
+      }
+    ]
+  },
+  argTypes: {
+    onChange: { action: "onChange" }
+  }
+};
+g.storyName = "Segment - 컴포넌트 리스트";
+export {
+  l as Story1,
+  g as Story2,
+  y as default
+};

package/dist/components/Segment/index.stories.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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Story2 = exports.Story1 = void 0;
 const react_1 = __importStar(require("react"));

package/dist/components/SelectBox/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/jsx-runtime.713F0z8w.js"),I=require("../../library/List/BottomSheetItemList/index.cjs.js");require("../../Icon/generated/AlarmFill.cjs.js");require("../../Icon/generated/Calendar.cjs.js");require("../../Icon/generated/Cancel.cjs.js");require("../../Icon/generated/CancelCircle.cjs.js");require("../../Icon/generated/CartFill.cjs.js");require("../../Icon/generated/Check.cjs.js");const _=require("../../Icon/generated/ChevronDown.cjs.js");require("../../Icon/generated/ChevronLeft.cjs.js");require("../../Icon/generated/ChevronRight.cjs.js");require("../../Icon/generated/ChevronUp.cjs.js");require("../../Icon/generated/DoubleChevronLeft.cjs.js");require("../../Icon/generated/DoubleChevronRight.cjs.js");require("../../Icon/generated/EyeFill.cjs.js");require("../../Icon/generated/EyeSlashFill.cjs.js");require("../../Icon/generated/Filter.cjs.js");require("../../Icon/generated/Information.cjs.js");require("../../Icon/generated/Menu.cjs.js");require("../../Icon/generated/More.cjs.js");require("../../Icon/generated/PersonFill.cjs.js");require("../../Icon/generated/Plus.cjs.js");require("../../Icon/generated/QuestionCircle.cjs.js");require("../../Icon/generated/Re.cjs.js");require("../../Icon/generated/Search.cjs.js");require("../../Icon/generated/SettingFill.cjs.js");require("../../Icon/generated/Share.cjs.js");require("../../Icon/generated/Store.cjs.js");const t=require("../../chunks/index.styled.SwCr6Bqs.js"),v=require("../../core/Colors/index.cjs.js"),o=require("react"),B=require("../Input/BaseInput/index.cjs.js"),L=require("../../hooks/useLayoutIsMobile.cjs.js"),y=d=>{var q;const{label:j,placeholder:p,itemList:s,onChange:a,disabled:h,errorValidation:b,value:l,bottomSheetTitle:f}=d,[S,x]=o.useState((q=s.find(r=>r.value===l))==null?void 0:q.label),[R,c]=o.useState(!1),[n,m]=o.useState(!1),C=L(),u=o.useCallback(r=>{m(r)},[]);return o.useEffect(()=>{var r;x((r=s.find(i=>i.value===l))==null?void 0:r.label)},[s,l]),e.jsxRuntimeExports.jsxs(t.Wrapper,{children:[e.jsxRuntimeExports.jsx(t.IconWrapper,{rotateArrow:n,children:e.jsxRuntimeExports.jsx(_.ChevronDown,{size:20,fillColor:v.basicColors.gray200})}),e.jsxRuntimeExports.jsx(B.BaseInput,{disabled:h,className:"select-box",label:j,placeholder:p,readOnly:!0,onClick:()=>m(!n),focusedAnimation:!1,value:S,onBlur:()=>{R&&u(!1)},errorValidation:b}),n&&e.jsxRuntimeExports.jsx(t.Desktop,{children:e.jsxRuntimeExports.jsxs(t.ItemListWrapper,{onMouseOver:()=>c(!1),onMouseOut:()=>c(!0),children:[e.jsxRuntimeExports.jsx(t.ItemList,{children:s.map(r=>{const{label:i,value:E}=r;return e.jsxRuntimeExports.jsx(t.Item,{onClick:()=>{x(i),a(E),u(!1)},children:i},i)})}),e.jsxRuntimeExports.jsx(t.ListBottomMargin,{})]})}),C&&e.jsxRuntimeExports.jsx(t.TitleBottomSheet,{visible:n,onMaskClick:()=>u(!1),children:e.jsxRuntimeExports.jsxs(t.TitleBottomSheet.Body,{hasContentPadding:!1,children:[e.jsxRuntimeExports.jsx(t.TitleBottomSheet.Title,{hasContentPadding:!1,title:f}),e.jsxRuntimeExports.jsx(I.BottomSheetItemList,{item:s,onClick:({value:r})=>{a(r),u(!1)}})]})})]})};exports.SelectBoxStyled=t.index_styled;exports.SelectBox=y;

package/dist/components/SelectBox/index.es.js

@@ -0,0 +1,96 @@
+import { j as t } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { BottomSheetItemList as k } from "../../library/List/BottomSheetItemList/index.es.js";
+import "../../Icon/generated/AlarmFill.es.js";
+import "../../Icon/generated/Calendar.es.js";
+import "../../Icon/generated/Cancel.es.js";
+import "../../Icon/generated/CancelCircle.es.js";
+import "../../Icon/generated/CartFill.es.js";
+import "../../Icon/generated/Check.es.js";
+import { ChevronDown as M } from "../../Icon/generated/ChevronDown.es.js";
+import "../../Icon/generated/ChevronLeft.es.js";
+import "../../Icon/generated/ChevronRight.es.js";
+import "../../Icon/generated/ChevronUp.es.js";
+import "../../Icon/generated/DoubleChevronLeft.es.js";
+import "../../Icon/generated/DoubleChevronRight.es.js";
+import "../../Icon/generated/EyeFill.es.js";
+import "../../Icon/generated/EyeSlashFill.es.js";
+import "../../Icon/generated/Filter.es.js";
+import "../../Icon/generated/Information.es.js";
+import "../../Icon/generated/Menu.es.js";
+import "../../Icon/generated/More.es.js";
+import "../../Icon/generated/PersonFill.es.js";
+import "../../Icon/generated/Plus.es.js";
+import "../../Icon/generated/QuestionCircle.es.js";
+import "../../Icon/generated/Re.es.js";
+import "../../Icon/generated/Search.es.js";
+import "../../Icon/generated/SettingFill.es.js";
+import "../../Icon/generated/Share.es.js";
+import "../../Icon/generated/Store.es.js";
+import { W as S, w as y, x as g, y as O, z as T, A as W, L as w, T as a } from "../../chunks/index.styled.BTZpARWY.js";
+import { i as Ct } from "../../chunks/index.styled.BTZpARWY.js";
+import { basicColors as A } from "../../core/Colors/index.es.js";
+import { useState as m, useCallback as V, useEffect as z } from "react";
+import { BaseInput as D } from "../Input/BaseInput/index.es.js";
+import E from "../../hooks/useLayoutIsMobile.es.js";
+const bt = (d) => {
+  var f;
+  const { label: x, placeholder: h, itemList: o, onChange: n, disabled: b, errorValidation: j, value: l, bottomSheetTitle: v } = d, [C, p] = m((f = o.find((e) => e.value === l)) == null ? void 0 : f.label), [I, c] = m(!1), [s, u] = m(!1), L = E(), r = V((e) => {
+    u(e);
+  }, []);
+  return z(() => {
+    var e;
+    p((e = o.find((i) => i.value === l)) == null ? void 0 : e.label);
+  }, [o, l]), /* @__PURE__ */ t.jsxs(S, { children: [
+    /* @__PURE__ */ t.jsx(y, { rotateArrow: s, children: /* @__PURE__ */ t.jsx(M, { size: 20, fillColor: A.gray200 }) }),
+    /* @__PURE__ */ t.jsx(
+      D,
+      {
+        disabled: b,
+        className: "select-box",
+        label: x,
+        placeholder: h,
+        readOnly: !0,
+        onClick: () => u(!s),
+        focusedAnimation: !1,
+        value: C,
+        onBlur: () => {
+          I && r(!1);
+        },
+        errorValidation: j
+      }
+    ),
+    s && /* @__PURE__ */ t.jsx(g, { children: /* @__PURE__ */ t.jsxs(O, { onMouseOver: () => c(!1), onMouseOut: () => c(!0), children: [
+      /* @__PURE__ */ t.jsx(T, { children: o.map((e) => {
+        const { label: i, value: B } = e;
+        return /* @__PURE__ */ t.jsx(
+          W,
+          {
+            onClick: () => {
+              p(i), n(B), r(!1);
+            },
+            children: i
+          },
+          i
+        );
+      }) }),
+      /* @__PURE__ */ t.jsx(w, {})
+    ] }) }),
+    L && // fyi. (PC 모드) useOverlayPreventScroll 호출자체를 안해야해서 렌더링안함.
+    /* @__PURE__ */ t.jsx(a, { visible: s, onMaskClick: () => r(!1), children: /* @__PURE__ */ t.jsxs(a.Body, { hasContentPadding: !1, children: [
+      /* @__PURE__ */ t.jsx(a.Title, { hasContentPadding: !1, title: v }),
+      /* @__PURE__ */ t.jsx(
+        k,
+        {
+          item: o,
+          onClick: ({ value: e }) => {
+            n(e), r(!1);
+          }
+        }
+      )
+    ] }) })
+  ] });
+};
+export {
+  bt as SelectBox,
+  Ct as SelectBoxStyled
+};

package/dist/components/SelectBox/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 };
 };
@@ -51,7 +61,7 @@ const SelectBox = (props) => {
     }, [itemList, value]);
     return (react_1.default.createElement(Styled.Wrapper, null,
         react_1.default.createElement(Styled.IconWrapper, { rotateArrow: visibleItemList },
-            react_1.default.createElement(Icon_1.ChevronDownSIcon, { fillColor: Colors_1.basicColors.gray200 })),
+            react_1.default.createElement(Icon_1.ChevronDownIcon, { size: 20, fillColor: Colors_1.basicColors.gray200 })),
         react_1.default.createElement(BaseInput_1.BaseInput, { disabled: disabled, className: "select-box", label: label, placeholder: placeholder, readOnly: true, onClick: () => setVisibleItemList(!visibleItemList), focusedAnimation: false, value: name, onBlur: () => {
                 if (mouseOut) {
                     handleVisibleItemList(false);

package/dist/components/SelectBox/index.spec.cjs.js

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

package/dist/components/SelectBox/index.spec.es.js

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

package/dist/components/SelectBox/index.styled.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@emotion/react");require("@emotion/styled");require("../../utils/media.util.cjs.js");require("../../core/Colors/index.cjs.js");require("../../utils/GenerateColorStyle/mini-button.cjs.js");require("../../utils/GenerateColorStyle/datepicker.cjs.js");require("../../chunks/jsx-runtime.713F0z8w.js");const e=require("../../chunks/index.styled.SwCr6Bqs.js");require("../../core/TextStyles/index.cjs.js");require("../Badge/IconBadge/index.styled.cjs.js");require("../Badge/TextBadge/index.styled.cjs.js");require("../Button/DoubleButton/index.styled.cjs.js");require("../MiniButton/BoxMiniButton/index.styled.cjs.js");require("../Button/FloatBaseButton/index.styled.cjs.js");require("../Button/FloatDoubleButton/index.styled.cjs.js");require("../Card/index.styled.cjs.js");require("react");require("../Comment/index.cjs.js");require("../Control/CheckBox/index.styled.cjs.js");require("../Control/CheckMark/index.styled.cjs.js");require("../Control/Switch/index.styled.cjs.js");require("../DatePicker/BaseDatePicker/index.styled.cjs.js");require("../DatePicker/BaseDatePicker/YearMonthController/index.styed.cjs.js");require("../../Icon/generated/AlarmFill.cjs.js");require("../../Icon/generated/Calendar.cjs.js");require("../../Icon/generated/Cancel.cjs.js");require("../../Icon/generated/CancelCircle.cjs.js");require("../../Icon/generated/CartFill.cjs.js");require("../../Icon/generated/Check.cjs.js");require("../../Icon/generated/ChevronDown.cjs.js");require("../../Icon/generated/ChevronLeft.cjs.js");require("../../Icon/generated/ChevronRight.cjs.js");require("../../Icon/generated/ChevronUp.cjs.js");require("../../Icon/generated/DoubleChevronLeft.cjs.js");require("../../Icon/generated/DoubleChevronRight.cjs.js");require("../../Icon/generated/EyeFill.cjs.js");require("../../Icon/generated/EyeSlashFill.cjs.js");require("../../Icon/generated/Filter.cjs.js");require("../../Icon/generated/Information.cjs.js");require("../../Icon/generated/Menu.cjs.js");require("../../Icon/generated/More.cjs.js");require("../../Icon/generated/PersonFill.cjs.js");require("../../Icon/generated/Plus.cjs.js");require("../../Icon/generated/QuestionCircle.cjs.js");require("../../Icon/generated/Re.cjs.js");require("../../Icon/generated/Search.cjs.js");require("../../Icon/generated/SettingFill.cjs.js");require("../../Icon/generated/Share.cjs.js");require("../../Icon/generated/Store.cjs.js");require("../../library/IconWithImage/index.styled.cjs.js");require("../../library/List/BottomSheetItemList/index.styled.cjs.js");require("lottie-web");require("../../library/Lottie/index.styled.cjs.js");require("../../library/Spacing/index.styled.cjs.js");require("../DatePicker/BaseDatePicker/Month/index.styled.cjs.js");require("../DatePicker/BaseDatePicker/Week/index.styled.cjs.js");require("../../types/date.cjs.js");require("../DatePicker/BaseDatePicker/hooks/index.util.cjs.js");require("../DatePicker/SingleDatePickerModal/index.styled.cjs.js");require("../DatePicker/SingleDatePickerModal/useSingleDatePickerModal.cjs.js");require("../DatePicker/RangeDatePickerModal/index.styled.cjs.js");require("../DatePicker/RangeDatePickerModal/useRangeDatePickerModal.cjs.js");require("../Divider/index.styled.cjs.js");require("../../chunks/index.styled.DkE3TbtV.js");require("../Input/BaseInput/index.cjs.js");require("../Input/ResidentNumberInput/index.styled.cjs.js");require("../Loading/Skeleton/index.cjs.js");require("../Loading/Spinner/index.styled.cjs.js");require("../Navigation/index.styled.cjs.js");require("../Navigation/BaseNavigation/index.styled.cjs.js");require("../../constants/style.constants.cjs.js");require("../Navigation/constant.cjs.js");require("../Segment/BaseSegment/index.styled.cjs.js");require("../Segment/ExtendSegment/index.styled.cjs.js");require("../ToastMessage/Toast/index.styled.cjs.js");require("../Tooltip/TooltipBase/index.styled.cjs.js");exports.Desktop=e.Desktop;exports.IconWrapper=e.IconWrapper;exports.Item=e.Item;exports.ItemList=e.ItemList;exports.ItemListWrapper=e.ItemListWrapper;exports.ListBottomMargin=e.ListBottomMargin;exports.Mobile=e.Mobile;exports.Wrapper=e.Wrapper;

package/dist/components/SelectBox/index.styled.d.ts

@@ -1,35 +1,34 @@
-/// <reference types="react" />
 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 ItemListWrapper: 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 ListBottomMargin: 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 ItemList: 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 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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 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;
 } & {
     rotateArrow: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Desktop: 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 Mobile: 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>, {}>;