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

package/dist/components/Navigation/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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -54,7 +64,7 @@ const Navigation = (_a) => {
         switch (leftArea === null || leftArea === void 0 ? void 0 : leftArea.type) {
             case 'backIcon':
                 return (react_1.default.createElement(Styled.IconWrapper, { onClick: handleClickButton },
-                    react_1.default.createElement(Icon_1.ChevronLeftMIcon, { fillColor: titleColor })));
+                    react_1.default.createElement(Icon_1.ChevronLeftIcon, { fillColor: titleColor })));
             default:
                 return;
         }
@@ -66,7 +76,7 @@ const Navigation = (_a) => {
         switch (rightArea === null || rightArea === void 0 ? void 0 : rightArea.type) {
             case 'closeIcon':
                 return (react_1.default.createElement(Styled.IconWrapper, { onClick: handleClickButton },
-                    react_1.default.createElement(Icon_1.CancelMIcon, { fillColor: iconColor })));
+                    react_1.default.createElement(Icon_1.CancelIcon, { fillColor: iconColor })));
             case 'icon':
                 return (react_1.default.createElement(Styled.IconWrapper, { onClick: handleClickButton },
                     react_1.default.createElement(rightArea.children, { fillColor: titleColor })));

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

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

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

@@ -0,0 +1,17 @@
+import { j as r } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { r as o, s as e } from "../../chunks/react.esm.CbGyPoJJ.js";
+import { N as t } from "../../chunks/index.styled.BTZpARWY.js";
+const s = {
+  contentColor: "gray",
+  hasBackgroundColor: !0
+};
+describe("<Navigation />", () => {
+  it("렌더링 체크", () => {
+    o(
+      /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        "확인",
+        /* @__PURE__ */ r.jsx(t, { ...s })
+      ] })
+    ), expect(e.getByText("확인")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../chunks/jsx-runtime.713F0z8w.js"),e=require("../../chunks/index.styled.SwCr6Bqs.js"),g={title:"Component/Navigation Bar",component:e.Navigation,tags:["autodocs"]},r={render:t=>o.jsxRuntimeExports.jsx(e.Navigation,{...t}),args:{contentColor:"gray",hasBackgroundColor:!0,title:"타이틀",leftArea:{type:"backIcon",handleClickButton:()=>{console.log("left button click")}},rightArea:{type:"text",children:"텍스트",handleClickButton:()=>{console.log("right button click")}}}};r.storyName="배경컬러 있음";const n={render:t=>o.jsxRuntimeExports.jsx("div",{style:{background:"transparent"},children:o.jsxRuntimeExports.jsx(e.Navigation,{...t})}),args:{contentColor:"gray",hasBackgroundColor:!1,title:"타이틀",leftArea:{type:"backIcon",handleClickButton:()=>{console.log("left button click")}},rightArea:{type:"text",children:"텍스트",handleClickButton:()=>{console.log("right button click")}}}};n.storyName="배경컬러 없음";const a={render:t=>o.jsxRuntimeExports.jsx("div",{style:{background:"transparent"},children:o.jsxRuntimeExports.jsx(e.Navigation,{...t})}),args:{contentColor:"gray",hasBackgroundColor:!0,title:"타이틀"}};a.storyName="leftArea / rightArea - 없음";const l={render:t=>o.jsxRuntimeExports.jsx("div",{style:{background:"transparent"},children:o.jsxRuntimeExports.jsx(e.Navigation,{...t})}),args:{contentColor:"gray",hasBackgroundColor:!0,title:"타이틀",rightArea:{type:"text",children:"텍스트",handleClickButton:()=>{console.log("right button click")}}}};l.storyName="rightArea - Text";const s={render:t=>o.jsxRuntimeExports.jsx("div",{style:{background:"transparent"},children:o.jsxRuntimeExports.jsx(e.Navigation,{...t})}),args:{contentColor:"gray",hasBackgroundColor:!0,title:"타이틀",rightArea:{type:"closeIcon",handleClickButton:()=>{console.log("right button click")}}}};s.storyName="rightArea - 취소 아이콘";const i={render:t=>o.jsxRuntimeExports.jsx("div",{style:{background:"transparent"},children:o.jsxRuntimeExports.jsx(e.Navigation,{...t})}),args:{contentColor:"white",hasBackgroundColor:!0,title:"타이틀",rightArea:{type:"closeIcon",handleClickButton:()=>{console.log("right button click")}}}};i.storyName="contentColor - white";const c={render:t=>o.jsxRuntimeExports.jsx("div",{style:{background:"transparent"},children:o.jsxRuntimeExports.jsx(e.Navigation,{...t})}),args:{contentColor:"gray",hasBackgroundColor:!0,leftArea:{type:"backIcon",handleClickButton:()=>{console.log("left button click")}},rightArea:{type:"closeIcon",handleClickButton:()=>{console.log("right button click")}}}};c.storyName="title 없음";exports.Story1=r;exports.Story2=n;exports.Story3=a;exports.Story4=l;exports.Story5=s;exports.Story6=i;exports.Story7=c;exports.default=g;

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

@@ -0,0 +1,135 @@
+import { j as o } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import { N as r } from "../../chunks/index.styled.BTZpARWY.js";
+const h = {
+  title: "Component/Navigation Bar",
+  component: r,
+  tags: ["autodocs"]
+}, e = {
+  render: (t) => /* @__PURE__ */ o.jsx(r, { ...t }),
+  args: {
+    contentColor: "gray",
+    hasBackgroundColor: !0,
+    title: "타이틀",
+    leftArea: {
+      type: "backIcon",
+      handleClickButton: () => {
+        console.log("left button click");
+      }
+    },
+    rightArea: {
+      type: "text",
+      children: "텍스트",
+      handleClickButton: () => {
+        console.log("right button click");
+      }
+    }
+  }
+};
+e.storyName = "배경컬러 있음";
+const n = {
+  render: (t) => /* @__PURE__ */ o.jsx("div", { style: { background: "transparent" }, children: /* @__PURE__ */ o.jsx(r, { ...t }) }),
+  args: {
+    contentColor: "gray",
+    hasBackgroundColor: !1,
+    title: "타이틀",
+    leftArea: {
+      type: "backIcon",
+      handleClickButton: () => {
+        console.log("left button click");
+      }
+    },
+    rightArea: {
+      type: "text",
+      children: "텍스트",
+      handleClickButton: () => {
+        console.log("right button click");
+      }
+    }
+  }
+};
+n.storyName = "배경컬러 없음";
+const l = {
+  render: (t) => /* @__PURE__ */ o.jsx("div", { style: { background: "transparent" }, children: /* @__PURE__ */ o.jsx(r, { ...t }) }),
+  args: {
+    contentColor: "gray",
+    hasBackgroundColor: !0,
+    title: "타이틀"
+  }
+};
+l.storyName = "leftArea / rightArea - 없음";
+const a = {
+  render: (t) => /* @__PURE__ */ o.jsx("div", { style: { background: "transparent" }, children: /* @__PURE__ */ o.jsx(r, { ...t }) }),
+  args: {
+    contentColor: "gray",
+    hasBackgroundColor: !0,
+    title: "타이틀",
+    rightArea: {
+      type: "text",
+      children: "텍스트",
+      handleClickButton: () => {
+        console.log("right button click");
+      }
+    }
+  }
+};
+a.storyName = "rightArea - Text";
+const c = {
+  render: (t) => /* @__PURE__ */ o.jsx("div", { style: { background: "transparent" }, children: /* @__PURE__ */ o.jsx(r, { ...t }) }),
+  args: {
+    contentColor: "gray",
+    hasBackgroundColor: !0,
+    title: "타이틀",
+    rightArea: {
+      type: "closeIcon",
+      handleClickButton: () => {
+        console.log("right button click");
+      }
+    }
+  }
+};
+c.storyName = "rightArea - 취소 아이콘";
+const s = {
+  render: (t) => /* @__PURE__ */ o.jsx("div", { style: { background: "transparent" }, children: /* @__PURE__ */ o.jsx(r, { ...t }) }),
+  args: {
+    contentColor: "white",
+    hasBackgroundColor: !0,
+    title: "타이틀",
+    rightArea: {
+      type: "closeIcon",
+      handleClickButton: () => {
+        console.log("right button click");
+      }
+    }
+  }
+};
+s.storyName = "contentColor - white";
+const i = {
+  render: (t) => /* @__PURE__ */ o.jsx("div", { style: { background: "transparent" }, children: /* @__PURE__ */ o.jsx(r, { ...t }) }),
+  args: {
+    contentColor: "gray",
+    hasBackgroundColor: !0,
+    leftArea: {
+      type: "backIcon",
+      handleClickButton: () => {
+        console.log("left button click");
+      }
+    },
+    rightArea: {
+      type: "closeIcon",
+      handleClickButton: () => {
+        console.log("right button click");
+      }
+    }
+  }
+};
+i.storyName = "title 없음";
+export {
+  e as Story1,
+  n as Story2,
+  l as Story3,
+  a as Story4,
+  c as Story5,
+  s as Story6,
+  i as Story7,
+  h as default
+};

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

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@emotion/styled"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=a(n),r=e.default.div`
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`,o=r,i=e.default(r)`
+	margin-right: 5px;
+`;exports.IconWrapper=o;exports.TextWrapper=i;

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

@@ -1,13 +1,10 @@
-/// <reference types="react" />
 export declare const IconWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const TextWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;

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

@@ -0,0 +1,13 @@
+import e from "@emotion/styled";
+const t = e.div`
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`, i = t, n = e(t)`
+	margin-right: 5px;
+`;
+export {
+  i as IconWrapper,
+  n as TextWrapper
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../chunks/jsx-runtime.713F0z8w.js");require("react");require("./index.styled.cjs.js");require("../../hooks/useOverlayPreventScroll.cjs.js");require("@emotion/react");require("../../core/Colors/index.cjs.js");require("../../utils/GenerateColorStyle/mini-button.cjs.js");require("../../utils/GenerateColorStyle/datepicker.cjs.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("../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.OverlayRoot=e.OverlayRoot;

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

@@ -0,0 +1,79 @@
+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 no } from "../../chunks/index.styled.BTZpARWY.js";
+import "../../core/TextStyles/index.es.js";
+import "../Badge/IconBadge/index.styled.es.js";
+import "../Badge/TextBadge/index.styled.es.js";
+import "../Button/DoubleButton/index.styled.es.js";
+import "../MiniButton/BoxMiniButton/index.styled.es.js";
+import "../Button/FloatBaseButton/index.styled.es.js";
+import "../Button/FloatDoubleButton/index.styled.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 "../Loading/Spinner/index.styled.es.js";
+import "../Navigation/index.styled.es.js";
+import "../Navigation/BaseNavigation/index.styled.es.js";
+import "../../constants/style.constants.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";
+export {
+  no as OverlayRoot
+};

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

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,8 +1,7 @@
-/// <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> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     visible: boolean;
     zIndex: number;

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.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.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/BaseSegment/index.spec.cjs.js

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

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

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

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> | 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> | undefined;
+    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> | 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> | 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> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     width: number;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;