@pfct/purple 1.5.0-npm-next.0 → 1.5.0-npm-next.2

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

@@ -0,0 +1,109 @@
+import { j as i } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import { forwardRef as x } from "react";
+import "../../../icons/src/icons/Alarm_fill.es.js";
+import "../../../icons/src/icons/Cancel.es.js";
+import "../../../icons/src/icons/Cancel_circle.es.js";
+import "../../../icons/src/icons/Calendar.es.js";
+import "../../../icons/src/icons/Check.es.js";
+import "../../../icons/src/icons/Chevron_down.es.js";
+import "../../../icons/src/icons/Chevron_up.es.js";
+import u from "../../../icons/src/icons/Chevron_left.es.js";
+import "../../../icons/src/icons/Double_Chevron_right.es.js";
+import "../../../icons/src/icons/Cart_fill.es.js";
+import "../../../icons/src/icons/Double_Chevron_left.es.js";
+import "../../../icons/src/icons/Eye_slash_fill.es.js";
+import "../../../icons/src/icons/Chevron_right.es.js";
+import "../../../icons/src/icons/Filter.es.js";
+import "../../../icons/src/icons/Plus.es.js";
+import "../../../icons/src/icons/Question_circle.es.js";
+import "../../../icons/src/icons/Re.es.js";
+import "../../../icons/src/icons/Person_fill.es.js";
+import "../../../icons/src/icons/Menu.es.js";
+import "../../../icons/src/icons/Setting_fill.es.js";
+import "../../../icons/src/icons/Information.es.js";
+import "../../../icons/src/icons/Eye_fill.es.js";
+import "../../../icons/src/icons/More.es.js";
+import "../../../icons/src/icons/Store.es.js";
+import "../../../icons/src/icons/Share.es.js";
+import "../../../icons/src/icons/Search.es.js";
+import { c as n } from "../../../chunks/utils.B9KdtH6G.js";
+import { Typography as l } from "../../ui/typography.es.js";
+function o({
+  hasBackground: m = !0,
+  contentColor: t = "gray",
+  showTitle: r = !0,
+  header: e = {},
+  title: p = {
+    children: "타이틀"
+  },
+  leftArea: a,
+  rightArea: s = {
+    children: []
+  }
+}) {
+  return /* @__PURE__ */ i.jsxs(o.Header, { hasBackground: m, contentColor: t, ...e, children: [
+    a ? /* @__PURE__ */ i.jsx(o.BackButton, { contentColor: t, ...a }) : null,
+    r ? /* @__PURE__ */ i.jsx(o.Title, { hasBackground: m, contentColor: t, ...p }) : null,
+    s ? /* @__PURE__ */ i.jsx(o.RightArea, { hasBackground: m, contentColor: t, ...s }) : null
+  ] });
+}
+o.Header = function({
+  children: t,
+  className: r = "",
+  hasBackground: e = !0,
+  contentColor: p = "gray",
+  ...a
+}) {
+  return /* @__PURE__ */ i.jsx(
+    "header",
+    {
+      className: n(
+        "fixed top-0 mx-auto my-0 box-border flex h-[55px] w-full items-center",
+        e ? "bg-white" : "bg-transparent",
+        p === "white" ? "text-white" : "text-gray-900",
+        r
+      ),
+      ...a,
+      children: t
+    }
+  );
+};
+o.Title = function({
+  children: t,
+  className: r = "",
+  contentColor: e = "gray",
+  ...p
+}) {
+  return /* @__PURE__ */ i.jsx(
+    l,
+    {
+      variant: "h5",
+      className: n(
+        "absolute left-1/2 -translate-x-1/2",
+        e === "white" ? "text-white" : "text-gray-900",
+        r
+      ),
+      ...p,
+      children: t
+    }
+  );
+};
+o.BackButton = x(function({ className: t = "", contentColor: r, size: e = 25, ...p }, a) {
+  return /* @__PURE__ */ i.jsx("button", { ref: a, className: n("absolute left-[20px] cursor-pointer", t), ...p, children: /* @__PURE__ */ i.jsx(
+    u,
+    {
+      size: e,
+      className: n(r === "white" ? "text-white" : "text-gray-900", t)
+    }
+  ) });
+});
+o.RightArea = function({
+  children: t,
+  className: r = "",
+  ...e
+}) {
+  return /* @__PURE__ */ i.jsx("div", { className: n("absolute right-[20px] flex items-center justify-center gap-[20px]", r), ...e, children: t });
+};
+export {
+  o as PageNavigationBar
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../chunks/jsx-runtime.713F0z8w.js"),d=require("../../ui/typography.cjs.js"),x=require("../../../chunks/utils.Gb5_Gcy7.js"),j=require("react"),c=j.forwardRef(({hasBackground:r=!0,contentColor:s="gray",type:l="title",leftArea:a,rightArea:i,leftProps:e,...n},u)=>t.jsxRuntimeExports.jsxs("div",{ref:u,className:x.cn("flex h-[55px] w-full items-center justify-between px-[20px]",r?"bg-white":"bg-transparent",n.className),...n,children:[l==="title"?t.jsxRuntimeExports.jsx(d.Typography,{variant:"h3",className:x.cn(s==="white"?"text-white":"text-gray-900",e==null?void 0:e.className),...e,children:a}):a,t.jsxRuntimeExports.jsx("div",{className:"flex items-center gap-[20px]",children:i==null?void 0:i.map((m,o)=>t.jsxRuntimeExports.jsx("div",{className:s==="white"?"text-white":"text-gray-900",children:m},o))})]}));c.displayName="TitleNavigationBar";exports.TitleNavigationBar=c;

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

@@ -0,0 +1,20 @@
+import { TypographyProps } from '../../ui/typography';
+import { default as React } from 'react';
+type TitleNavigationBarProps = {
+    hasBackground?: boolean;
+    contentColor?: 'white' | 'gray';
+    type: 'title' | 'custom';
+    leftArea?: React.ReactNode;
+    rightArea?: React.ReactNode[];
+    leftProps?: Omit<TypographyProps, 'children'>;
+} & React.HTMLAttributes<HTMLDivElement>;
+declare const TitleNavigationBar: React.ForwardRefExoticComponent<{
+    hasBackground?: boolean;
+    contentColor?: "white" | "gray";
+    type: "title" | "custom";
+    leftArea?: React.ReactNode;
+    rightArea?: React.ReactNode[];
+    leftProps?: Omit<TypographyProps, "children">;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export type { TitleNavigationBarProps };
+export { TitleNavigationBar };

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

@@ -0,0 +1,42 @@
+import { j as a } from "../../../chunks/jsx-runtime.Drh4NO5G.js";
+import { Typography as p } from "../../ui/typography.es.js";
+import { c as x } from "../../../chunks/utils.B9KdtH6G.js";
+import { forwardRef as N } from "react";
+const h = N(
+  ({
+    hasBackground: c = !0,
+    contentColor: i = "gray",
+    type: n = "title",
+    leftArea: s,
+    rightArea: t,
+    leftProps: e,
+    ...m
+  }, r) => /* @__PURE__ */ a.jsxs(
+    "div",
+    {
+      ref: r,
+      className: x(
+        "flex h-[55px] w-full items-center justify-between px-[20px]",
+        c ? "bg-white" : "bg-transparent",
+        m.className
+      ),
+      ...m,
+      children: [
+        n === "title" ? /* @__PURE__ */ a.jsx(
+          p,
+          {
+            variant: "h3",
+            className: x(i === "white" ? "text-white" : "text-gray-900", e == null ? void 0 : e.className),
+            ...e,
+            children: s
+          }
+        ) : s,
+        /* @__PURE__ */ a.jsx("div", { className: "flex items-center gap-[20px]", children: t == null ? void 0 : t.map((l, d) => /* @__PURE__ */ a.jsx("div", { className: i === "white" ? "text-white" : "text-gray-900", children: l }, d)) })
+      ]
+    }
+  )
+);
+h.displayName = "TitleNavigationBar";
+export {
+  h as TitleNavigationBar
+};

package/dist/components/Navigation/constant.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../core/Colors/index.cjs.js"),r={white:{icon:o.basicColors.white,title:o.basicColors.white,rightText:o.basicColors.white,backgroundColor:o.basicColors.gray900},gray:{icon:o.basicColors.gray900,title:o.basicColors.gray900,rightText:o.basicColors.gray700,backgroundColor:o.basicColors.white}};exports.CONTENT_COLOR_MAP=r;

package/dist/components/Navigation/constant.d.ts

@@ -0,0 +1,7 @@
+export type NavigationContentColor = 'white' | 'gray';
+export declare const CONTENT_COLOR_MAP: Record<NavigationContentColor, {
+    icon: string;
+    title: string;
+    rightText: string;
+    backgroundColor: string;
+}>;

package/dist/components/Navigation/constant.es.js

@@ -0,0 +1,18 @@
+import { basicColors as t } from "../../core/Colors/index.es.js";
+const o = {
+  white: {
+    icon: t.white,
+    title: t.white,
+    rightText: t.white,
+    backgroundColor: t.gray900
+  },
+  gray: {
+    icon: t.gray900,
+    title: t.gray900,
+    rightText: t.gray700,
+    backgroundColor: t.white
+  }
+};
+export {
+  o as CONTENT_COLOR_MAP
+};

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../chunks/jsx-runtime.713F0z8w.js");require("../../icons/src/icons/Alarm_fill.cjs.js");const d=require("../../icons/src/icons/Cancel.cjs.js");require("../../icons/src/icons/Cancel_circle.cjs.js");require("../../icons/src/icons/Calendar.cjs.js");require("../../icons/src/icons/Check.cjs.js");require("../../icons/src/icons/Chevron_down.cjs.js");require("../../icons/src/icons/Chevron_up.cjs.js");const p=require("../../icons/src/icons/Chevron_left.cjs.js");require("../../icons/src/icons/Double_Chevron_right.cjs.js");require("../../icons/src/icons/Cart_fill.cjs.js");require("../../icons/src/icons/Double_Chevron_left.cjs.js");require("../../icons/src/icons/Eye_slash_fill.cjs.js");require("../../icons/src/icons/Chevron_right.cjs.js");require("../../icons/src/icons/Filter.cjs.js");require("../../icons/src/icons/Plus.cjs.js");require("../../icons/src/icons/Question_circle.cjs.js");require("../../icons/src/icons/Re.cjs.js");require("../../icons/src/icons/Person_fill.cjs.js");require("../../icons/src/icons/Menu.cjs.js");require("../../icons/src/icons/Setting_fill.cjs.js");require("../../icons/src/icons/Information.cjs.js");require("../../icons/src/icons/Eye_fill.cjs.js");require("../../icons/src/icons/More.cjs.js");require("../../icons/src/icons/Store.cjs.js");require("../../icons/src/icons/Share.cjs.js");require("../../icons/src/icons/Search.cjs.js");const j=require("../../core/Typography/index.cjs.js"),c=require("react"),t=require("./index.styled.cjs.js"),m=require("./BaseNavigation/index.cjs.js"),_=require("./constant.cjs.js"),u=require("../../chunks/utils.Gb5_Gcy7.js"),h=({contentColor:r,hasBackgroundColor:o,leftArea:n,rightArea:e,...x})=>{const a=_.CONTENT_COLOR_MAP[r].backgroundColor,q=c.useMemo(()=>{const s=()=>{n==null||n.handleClickButton()};switch(n==null?void 0:n.type){case"backIcon":return i.jsxRuntimeExports.jsx(t.IconWrapper,{onClick:s,children:i.jsxRuntimeExports.jsx(p.default,{className:u.cn(r==="white"?"text-white":"text-gray-900")})});default:return}},[n,r]),l=c.useMemo(()=>{const s=()=>{e==null||e.handleClickButton()};switch(e==null?void 0:e.type){case"closeIcon":return i.jsxRuntimeExports.jsx(t.IconWrapper,{onClick:s,children:i.jsxRuntimeExports.jsx(d.default,{className:u.cn(r==="white"?"text-white":"text-gray-900")})});case"icon":return i.jsxRuntimeExports.jsx(t.IconWrapper,{onClick:s,children:i.jsxRuntimeExports.jsx(e.children,{className:u.cn(r==="white"?"text-white":"text-gray-900")})});case"text":return i.jsxRuntimeExports.jsx(t.TextWrapper,{onClick:s,children:i.jsxRuntimeExports.jsx(j.Title3,{className:u.cn(r==="white"?"text-white":"text-gray-700"),children:e.children})});default:return}},[e,r]);return i.jsxRuntimeExports.jsx(m.BaseNavigation,{backgroundColor:o?a:"transparent",leftChildren:q,titleColor:r,rightChildren:l,...x})};exports.Navigation=h;

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { BaseNavigationProps } from './BaseNavigation';
+import { NavigationContentColor } from './constant';
+import { PurpleIcon } from '../../icons/src/types';
+type NavigationProps = Pick<BaseNavigationProps, 'title' | 'zIndex'> & {
+    contentColor: NavigationContentColor;
+    hasBackgroundColor: boolean;
+    leftArea?: {
+        type: 'backIcon';
+        handleClickButton: () => void;
+    };
+    rightArea?: {
+        type: 'closeIcon';
+        handleClickButton: () => void;
+    } | {
+        type: 'icon';
+        children: PurpleIcon;
+        handleClickButton: () => void;
+    } | {
+        type: 'text';
+        children: string;
+        handleClickButton: () => void;
+    };
+};
+declare const Navigation: React.FC<NavigationProps>;
+export type { NavigationProps };
+export { Navigation };

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

@@ -0,0 +1,79 @@
+import { j as i } from "../../chunks/jsx-runtime.Drh4NO5G.js";
+import "../../icons/src/icons/Alarm_fill.es.js";
+import u from "../../icons/src/icons/Cancel.es.js";
+import "../../icons/src/icons/Cancel_circle.es.js";
+import "../../icons/src/icons/Calendar.es.js";
+import "../../icons/src/icons/Check.es.js";
+import "../../icons/src/icons/Chevron_down.es.js";
+import "../../icons/src/icons/Chevron_up.es.js";
+import a from "../../icons/src/icons/Chevron_left.es.js";
+import "../../icons/src/icons/Double_Chevron_right.es.js";
+import "../../icons/src/icons/Cart_fill.es.js";
+import "../../icons/src/icons/Double_Chevron_left.es.js";
+import "../../icons/src/icons/Eye_slash_fill.es.js";
+import "../../icons/src/icons/Chevron_right.es.js";
+import "../../icons/src/icons/Filter.es.js";
+import "../../icons/src/icons/Plus.es.js";
+import "../../icons/src/icons/Question_circle.es.js";
+import "../../icons/src/icons/Re.es.js";
+import "../../icons/src/icons/Person_fill.es.js";
+import "../../icons/src/icons/Menu.es.js";
+import "../../icons/src/icons/Setting_fill.es.js";
+import "../../icons/src/icons/Information.es.js";
+import "../../icons/src/icons/Eye_fill.es.js";
+import "../../icons/src/icons/More.es.js";
+import "../../icons/src/icons/Store.es.js";
+import "../../icons/src/icons/Share.es.js";
+import "../../icons/src/icons/Search.es.js";
+import { Title3 as h } from "../../core/Typography/index.es.js";
+import { useMemo as c } from "react";
+import { IconWrapper as s, TextWrapper as k } from "./index.styled.es.js";
+import { BaseNavigation as j } from "./BaseNavigation/index.es.js";
+import { CONTENT_COLOR_MAP as C } from "./constant.es.js";
+import { c as p } from "../../chunks/utils.B9KdtH6G.js";
+const g = ({
+  contentColor: o,
+  hasBackgroundColor: n,
+  leftArea: m,
+  rightArea: t,
+  ...e
+}) => {
+  const x = C[o].backgroundColor, l = c(() => {
+    const r = () => {
+      m == null || m.handleClickButton();
+    };
+    switch (m == null ? void 0 : m.type) {
+      case "backIcon":
+        return /* @__PURE__ */ i.jsx(s, { onClick: r, children: /* @__PURE__ */ i.jsx(a, { className: p(o === "white" ? "text-white" : "text-gray-900") }) });
+      default:
+        return;
+    }
+  }, [m, o]), d = c(() => {
+    const r = () => {
+      t == null || t.handleClickButton();
+    };
+    switch (t == null ? void 0 : t.type) {
+      case "closeIcon":
+        return /* @__PURE__ */ i.jsx(s, { onClick: r, children: /* @__PURE__ */ i.jsx(u, { className: p(o === "white" ? "text-white" : "text-gray-900") }) });
+      case "icon":
+        return /* @__PURE__ */ i.jsx(s, { onClick: r, children: /* @__PURE__ */ i.jsx(t.children, { className: p(o === "white" ? "text-white" : "text-gray-900") }) });
+      case "text":
+        return /* @__PURE__ */ i.jsx(k, { onClick: r, children: /* @__PURE__ */ i.jsx(h, { className: p(o === "white" ? "text-white" : "text-gray-700"), children: t.children }) });
+      default:
+        return;
+    }
+  }, [t, o]);
+  return /* @__PURE__ */ i.jsx(
+    j,
+    {
+      backgroundColor: n ? x : "transparent",
+      leftChildren: l,
+      titleColor: o,
+      rightChildren: d,
+      ...e
+    }
+  );
+};
+export {
+  g as Navigation
+};

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

@@ -0,0 +1,10 @@
+export declare const IconWrapper: import('@emotion/styled').StyledComponent<{
+    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;
+    as?: React.ElementType;
+} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
+    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.CX8FCbwl.js");require("../../core/TextStyles/index.cjs.js");require("../ui/typography.cjs.js");require("../Accordion/index.cjs.js");require("../Badge/IconBadge/index.styled.cjs.js");require("../Badge/TextBadge/index.styled.cjs.js");require("../Loading/Skeleton/index.cjs.js");require("../Loading/Spinner/index.styled.cjs.js");require("../../constants/style.constants.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("../../icons/src/icons/Alarm_fill.cjs.js");require("../../icons/src/icons/Cancel.cjs.js");require("../../icons/src/icons/Cancel_circle.cjs.js");require("../../icons/src/icons/Calendar.cjs.js");require("../../icons/src/icons/Check.cjs.js");require("../../icons/src/icons/Chevron_down.cjs.js");require("../../icons/src/icons/Chevron_up.cjs.js");require("../../icons/src/icons/Chevron_left.cjs.js");require("../../icons/src/icons/Double_Chevron_right.cjs.js");require("../../icons/src/icons/Cart_fill.cjs.js");require("../../icons/src/icons/Double_Chevron_left.cjs.js");require("../../icons/src/icons/Eye_slash_fill.cjs.js");require("../../icons/src/icons/Chevron_right.cjs.js");require("../../icons/src/icons/Filter.cjs.js");require("../../icons/src/icons/Plus.cjs.js");require("../../icons/src/icons/Question_circle.cjs.js");require("../../icons/src/icons/Re.cjs.js");require("../../icons/src/icons/Person_fill.cjs.js");require("../../icons/src/icons/Menu.cjs.js");require("../../icons/src/icons/Setting_fill.cjs.js");require("../../icons/src/icons/Information.cjs.js");require("../../icons/src/icons/Eye_fill.cjs.js");require("../../icons/src/icons/More.cjs.js");require("../../icons/src/icons/Store.cjs.js");require("../../icons/src/icons/Share.cjs.js");require("../../icons/src/icons/Search.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.CMpDdHBq.js");require("../Input/BaseInput/index.cjs.js");require("../Input/PostfixInput/index.cjs.js");require("../Input/ResidentNumberInput/index.styled.cjs.js");require("../Navigation/index.styled.cjs.js");require("../Navigation/BaseNavigation/index.styled.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");require("../ui/bottomSheet.cjs.js");exports.OverlayRoot=e.OverlayRoot;

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

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { PropsWithChildren } from '../../types/react';
+type OverlayRootProps = PropsWithChildren<{
+    className?: string;
+    visible: boolean;
+    onClick?: () => void;
+    zIndex?: number;
+}>;
+declare const OverlayRoot: React.FC<OverlayRootProps>;
+export type { OverlayRootProps };
+export { 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 { a6 as qo } from "../../chunks/index.styled.BYf5H-kQ.js";
+import "../../core/TextStyles/index.es.js";
+import "../ui/typography.es.js";
+import "../Accordion/index.es.js";
+import "../Badge/IconBadge/index.styled.es.js";
+import "../Badge/TextBadge/index.styled.es.js";
+import "../Loading/Skeleton/index.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 "../../icons/src/icons/Alarm_fill.es.js";
+import "../../icons/src/icons/Cancel.es.js";
+import "../../icons/src/icons/Cancel_circle.es.js";
+import "../../icons/src/icons/Calendar.es.js";
+import "../../icons/src/icons/Check.es.js";
+import "../../icons/src/icons/Chevron_down.es.js";
+import "../../icons/src/icons/Chevron_up.es.js";
+import "../../icons/src/icons/Chevron_left.es.js";
+import "../../icons/src/icons/Double_Chevron_right.es.js";
+import "../../icons/src/icons/Cart_fill.es.js";
+import "../../icons/src/icons/Double_Chevron_left.es.js";
+import "../../icons/src/icons/Eye_slash_fill.es.js";
+import "../../icons/src/icons/Chevron_right.es.js";
+import "../../icons/src/icons/Filter.es.js";
+import "../../icons/src/icons/Plus.es.js";
+import "../../icons/src/icons/Question_circle.es.js";
+import "../../icons/src/icons/Re.es.js";
+import "../../icons/src/icons/Person_fill.es.js";
+import "../../icons/src/icons/Menu.es.js";
+import "../../icons/src/icons/Setting_fill.es.js";
+import "../../icons/src/icons/Information.es.js";
+import "../../icons/src/icons/Eye_fill.es.js";
+import "../../icons/src/icons/More.es.js";
+import "../../icons/src/icons/Store.es.js";
+import "../../icons/src/icons/Share.es.js";
+import "../../icons/src/icons/Search.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.DmJ27_dc.js";
+import "../Input/BaseInput/index.es.js";
+import "../Input/PostfixInput/index.es.js";
+import "../Input/ResidentNumberInput/index.styled.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 {
+  qo 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

@@ -0,0 +1,8 @@
+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>, {}>;

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+type SegmentProps<T> = {
+    item: T[];
+    value: T;
+    onChange: (value: T) => void;
+};
+declare const Segment: <T extends string>({ item, value, onChange }: SegmentProps<T>) => React.JSX.Element;
+export type { SegmentProps };
+export { Segment };

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.typographyMap.h6};
+	font-weight: 700;
+	transition: all 0.4s ease-out;
+	color: ${({active:e})=>e?o.basicColors.gray900:o.basicColors.gray400};
+`,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;