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

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

@@ -0,0 +1,76 @@
+import "../../chunks/jsx-runtime.Drh4NO5G.js";
+import "react";
+import "./index.styled.es.js";
+import "../../hooks/useOverlayPreventScroll.es.js";
+import "@emotion/react";
+import "../../core/Colors/index.es.js";
+import "../../utils/GenerateColorStyle/mini-button.es.js";
+import "../../utils/GenerateColorStyle/datepicker.es.js";
+import { au as ho } from "../../chunks/index.styled.ByGzJNsf.js";
+import "../../core/TextStyles/index.es.js";
+import "../Badge/IconBadge/index.styled.es.js";
+import "../Badge/TextBadge/index.styled.es.js";
+import "../Loading/Spinner/index.styled.es.js";
+import "../../constants/style.constants.es.js";
+import "../Card/index.styled.es.js";
+import "../Comment/index.es.js";
+import "../Control/CheckBox/index.styled.es.js";
+import "../Control/CheckMark/index.styled.es.js";
+import "../Control/Switch/index.styled.es.js";
+import "../DatePicker/BaseDatePicker/index.styled.es.js";
+import "../DatePicker/BaseDatePicker/YearMonthController/index.styed.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 "../../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 "../../library/IconWithImage/index.styled.es.js";
+import "../../library/List/BottomSheetItemList/index.styled.es.js";
+import "lottie-web";
+import "../../library/Lottie/index.styled.es.js";
+import "../../library/Spacing/index.styled.es.js";
+import "../DatePicker/BaseDatePicker/Month/index.styled.es.js";
+import "../DatePicker/BaseDatePicker/Week/index.styled.es.js";
+import "../../types/date.es.js";
+import "../DatePicker/BaseDatePicker/hooks/index.util.es.js";
+import "../DatePicker/SingleDatePickerModal/index.styled.es.js";
+import "../DatePicker/SingleDatePickerModal/useSingleDatePickerModal.es.js";
+import "../DatePicker/RangeDatePickerModal/index.styled.es.js";
+import "../DatePicker/RangeDatePickerModal/useRangeDatePickerModal.es.js";
+import "../Divider/index.styled.es.js";
+import "../../chunks/index.styled.SOJ65tcg.js";
+import "../Input/BaseInput/index.es.js";
+import "../Input/ResidentNumberInput/index.styled.es.js";
+import "../Loading/Skeleton/index.es.js";
+import "../Navigation/index.styled.es.js";
+import "../Navigation/BaseNavigation/index.styled.es.js";
+import "../Navigation/constant.es.js";
+import "../Segment/BaseSegment/index.styled.es.js";
+import "../Segment/ExtendSegment/index.styled.es.js";
+import "../ToastMessage/Toast/index.styled.es.js";
+import "../Tooltip/TooltipBase/index.styled.es.js";
+import "../ui/bottomSheet.es.js";
+export {
+  ho as OverlayRoot
+};

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

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@emotion/styled"),o=require("../../core/Colors/index.cjs.js"),e=require("@emotion/react"),s=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=s(a),r=e.keyframes`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`,c=e.keyframes`
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`,i=t=>e.css`
+	visibility: ${t?"visible":"hidden"};
+	animation: ${t?r:c} 0.4s ease-out;
+	transition: visibility 0.4s ease-out;
+`,d=n.default.div`
+	box-sizing: border-box;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: ${o.generateHexWithAlphaInLightMode(o.basicColors.black,"60%")};
+	z-index: ${t=>t.zIndex};
+
+	${({visible:t})=>i(t)};
+`;exports.Overlay=d;exports.modalSettings=i;

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-export declare const modalSettings: (visible: boolean) => import("@emotion/react").SerializedStyles;
-export declare const Overlay: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+export declare const modalSettings: (visible: boolean) => import('@emotion/react').SerializedStyles;
+export declare const Overlay: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
 } & {
     visible: boolean;
     zIndex: number;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/OverlayRoot/index.styled.es.js

@@ -0,0 +1,37 @@
+import t from "@emotion/styled";
+import { generateHexWithAlphaInLightMode as e, basicColors as s } from "../../core/Colors/index.es.js";
+import { keyframes as i, css as a } from "@emotion/react";
+const n = i`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`, r = i`
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`, c = (o) => a`
+	visibility: ${o ? "visible" : "hidden"};
+	animation: ${o ? n : r} 0.4s ease-out;
+	transition: visibility 0.4s ease-out;
+`, m = t.div`
+	box-sizing: border-box;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: ${e(s.black, "60%")};
+	z-index: ${(o) => o.zIndex};
+
+	${({ visible: o }) => c(o)};
+`;
+export {
+  m as Overlay,
+  c as modalSettings
+};

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

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

package/dist/components/Segment/BaseSegment/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 type SegmentProps<T> = {
     item: T[];
     value: T;

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

@@ -0,0 +1,28 @@
+import { j as r } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import i from "react";
+import { Wrapper as l, LabelWrapper as p, Label as x, className as a, Input as h, Control as g } from "./index.styled.es.js";
+const C = ({ item: n, value: t, onChange: c }) => {
+  const o = 100 / n.length, m = () => {
+    const e = n.findIndex((s) => s === t) * 100;
+    return e < 0 ? 0 : e / n.length;
+  };
+  return /* @__PURE__ */ r.jsx(l, { children: /* @__PURE__ */ r.jsxs(p, { width: o, children: [
+    n.map((e, s) => /* @__PURE__ */ r.jsx(i.Fragment, { children: /* @__PURE__ */ r.jsxs(x, { className: a.segmentLabel, active: t === e, children: [
+      /* @__PURE__ */ r.jsx(
+        h,
+        {
+          type: "radio",
+          name: "radio",
+          value: e,
+          checked: t === e,
+          onChange: (d) => c(d.target.value)
+        }
+      ),
+      e
+    ] }) }, s)),
+    /* @__PURE__ */ r.jsx(g, { className: a.segmentControl, control: m(), width: o })
+  ] }) });
+};
+export {
+  C as Segment
+};

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

@@ -0,0 +1,41 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@emotion/styled"),i=require("../../../core/TextStyles/index.cjs.js"),o=require("../../../core/Colors/index.cjs.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(r),n={segmentControl:"segment-control",segmentLabel:"segment-label"},l=t.default.div`
+	width: ${({width:e})=>`${e}%`};
+	background-color: ${o.basicColors.white};
+	position: absolute;
+	left: ${({control:e})=>`${e}%`};
+	transition: left 0.4s ease-out;
+	z-index: -10 !important;
+	border-radius: 8px;
+	box-shadow: 0px 2px 4px rgba(208, 208, 208, 0.5);
+`,s=t.default.label`
+	${i.typography.h6};
+	font-weight: 700;
+	transition: all 0.4s ease-out;
+	color: ${({active:e})=>e?o.basicColors.gray900:o.basicColors.gray200};
+`,d=t.default.div`
+	box-sizing: border-box;
+	width: 100%;
+	height: 48px;
+	position: relative;
+	background-color: ${o.semanticColors.segmentControlContainer};
+	z-index: 5;
+	border-radius: 10px;
+	padding: 4px;
+`,p=t.default.input`
+	display: none;
+`,c=t.default.div`
+	width: calc(100% - 8px);
+	height: 40px;
+	box-sizing: border-box;
+	position: absolute;
+
+	& > .${n.segmentControl}, .${n.segmentLabel} {
+		width: ${({width:e})=>`${e}%`};
+		height: 40px;
+		text-align: center;
+		display: inline-block;
+		z-index: 2;
+		line-height: 40px;
+		cursor: pointer;
+	}
+`;exports.Control=l;exports.Input=p;exports.Label=s;exports.LabelWrapper=c;exports.Wrapper=d;exports.className=n;

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

@@ -1,32 +1,31 @@
-/// <reference types="react" />
 export declare const className: {
     segmentControl: string;
     segmentLabel: 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;
+export declare const Control: import('@emotion/styled').StyledComponent<{
+    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;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Label: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
 } & {
     active: boolean;
-}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
-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;
-}, 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;
-}, 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;
+}, import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+export declare const Wrapper: import('@emotion/styled').StyledComponent<{
+    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;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const LabelWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
 } & {
     width: number;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 type ExtendSegmentProps = {
     item: {
         children: React.ReactNode;

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.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;
+export declare const Control: import('@emotion/styled').StyledComponent<{
+    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;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Label: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
 } & {
     active: boolean;
-} & import("react").ClassAttributes<HTMLLabelElement> & import("react").LabelHTMLAttributes<HTMLLabelElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+} & import('react').ClassAttributes<HTMLLabelElement> & import('react').LabelHTMLAttributes<HTMLLabelElement> & {
+    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;
-}, 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;
-}, 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;
+export declare const Wrapper: import('@emotion/styled').StyledComponent<{
+    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;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export declare const LabelWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
 } & {
     width: number;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    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/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/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.B3JLBK5h.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.d.ts

@@ -1,4 +1,4 @@
-import React, { InputHTMLAttributes } from 'react';
+import { default as React, InputHTMLAttributes } from 'react';
 import { InputValidator } from '../Input/BaseInput';
 type SelectBoxProps<ValueType = string> = InputHTMLAttributes<HTMLSelectElement> & {
     itemList: SelectItemProps<ValueType>[];

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.ByGzJNsf.js";
+import { i as Ct } from "../../chunks/index.styled.ByGzJNsf.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
+};