@pfct/purple 1.5.0-npm-next.6 → 1.5.0-npm-next.8

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

@@ -1,4 +1,4 @@
-import "react/jsx-runtime";
+import "../../chunks/jsx-runtime.OVHDjVDe.js";
 import "react";
 import "./index.styled.es.js";
 import "../../hooks/useOverlayPreventScroll.es.js";
@@ -6,7 +6,7 @@ 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 uo } from "../../chunks/index.styled.B9NKU_3J.js";
+import { a3 as no } from "../../chunks/index.BarRvPVS.js";
 import "../../core/TextStyles/index.es.js";
 import "../ui/typography.es.js";
 import "../Accordion/index.es.js";
@@ -17,37 +17,36 @@ 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_circle.es.js";
 import "../../icons/src/icons/Check.es.js";
-import "../../icons/src/icons/Chevron_down.es.js";
 import "../../icons/src/icons/Chevron_left.es.js";
 import "../../icons/src/icons/Chevron_right.es.js";
+import "../../icons/src/icons/Chevron_down.es.js";
 import "../../icons/src/icons/Cart_fill.es.js";
-import "../../icons/src/icons/Double_Chevron_left.es.js";
-import "../../icons/src/icons/Eye_fill.es.js";
-import "../../icons/src/icons/Filter.es.js";
-import "../../icons/src/icons/Cancel.es.js";
+import "../../icons/src/icons/Chevron_up.es.js";
 import "../../icons/src/icons/Double_Chevron_right.es.js";
 import "../../icons/src/icons/Eye_slash_fill.es.js";
-import "../../icons/src/icons/Information.es.js";
-import "../../icons/src/icons/More.es.js";
-import "../../icons/src/icons/Plus.es.js";
-import "../../icons/src/icons/Menu.es.js";
+import "../../icons/src/icons/Filter.es.js";
+import "../../icons/src/icons/Double_Chevron_left.es.js";
 import "../../icons/src/icons/Calendar.es.js";
+import "../../icons/src/icons/Eye_fill.es.js";
+import "../../icons/src/icons/Person_fill.es.js";
+import "../../icons/src/icons/More.es.js";
 import "../../icons/src/icons/Question_circle.es.js";
-import "../../icons/src/icons/Share.es.js";
+import "../../icons/src/icons/Search.es.js";
+import "../../icons/src/icons/Plus.es.js";
 import "../../icons/src/icons/Setting_fill.es.js";
-import "../../icons/src/icons/Person_fill.es.js";
-import "../../icons/src/icons/Chevron_up.es.js";
-import "../../icons/src/icons/Store.es.js";
+import "../../icons/src/icons/Share.es.js";
+import "../../icons/src/icons/Information.es.js";
 import "../../icons/src/icons/Re.es.js";
-import "../../icons/src/icons/Search.es.js";
+import "../../icons/src/icons/Menu.es.js";
+import "../../icons/src/icons/Cancel.es.js";
+import "../../icons/src/icons/Store.es.js";
+import "../Control/CheckMark/index.styled.es.js";
+import "../Control/Switch/index.es.js";
+import "../DatePicker/BaseDatePicker/index.styled.es.js";
+import "../DatePicker/BaseDatePicker/YearMonthController/index.styed.es.js";
 import "../../library/IconWithImage/index.styled.es.js";
 import "../../library/List/BottomSheetItemList/index.styled.es.js";
 import "lottie-web";
@@ -72,9 +71,8 @@ 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 "../../chunks/index.Dh7jK0Mq.js";
 import "../ui/bottomSheet.es.js";
 export {
-  uo as OverlayRoot
+  no as OverlayRoot
 };

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

@@ -5,4 +5,4 @@ export declare const Overlay: import('@emotion/styled').StyledComponent<{
 } & {
     visible: boolean;
     zIndex: number;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

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

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

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

@@ -3,29 +3,29 @@ export declare const className: {
     segmentLabel: string;
 };
 export declare const Control: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
 } & {
     control: number;
     width: number;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Label: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
 } & {
     active: boolean;
-}, import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;
 export declare const Wrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Input: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 export declare const LabelWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
 } & {
     width: number;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

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

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

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

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

@@ -2,33 +2,33 @@ export declare const className: {
     extendSegmentLabel: string;
 };
 export declare const Control: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
 } & {
     control: number;
     width: number;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Label: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
 } & {
     active: boolean;
-} & import('react').ClassAttributes<HTMLLabelElement> & import('react').LabelHTMLAttributes<HTMLLabelElement> & {
-    theme?: import('@emotion/react').Theme;
+} & import('node_modules/@types/react').ClassAttributes<HTMLLabelElement> & import('node_modules/@types/react').LabelHTMLAttributes<HTMLLabelElement> & {
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
 }, {}, {}>;
 export declare const Wrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Input: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
 export declare const LabelWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
     as?: React.ElementType;
 } & {
     width: number;
-} & import('react').ClassAttributes<HTMLDivElement> & import('react').HTMLAttributes<HTMLDivElement> & {
-    theme?: import('@emotion/react').Theme;
+} & import('node_modules/@types/react').ClassAttributes<HTMLDivElement> & import('node_modules/@types/react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('../../../../node_modules/@emotion/react/dist/emotion-react.cjs').Theme;
 }, {}, {}>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),v=require("../../library/List/BottomSheetItemList/index.cjs.js");require("../../icons/src/icons/Alarm_fill.cjs.js");require("../../icons/src/icons/Cancel_circle.cjs.js");require("../../icons/src/icons/Check.cjs.js");const L=require("../../icons/src/icons/Chevron_down.cjs.js");require("../../icons/src/icons/Chevron_left.cjs.js");require("../../icons/src/icons/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_fill.cjs.js");require("../../icons/src/icons/Filter.cjs.js");require("../../icons/src/icons/Cancel.cjs.js");require("../../icons/src/icons/Double_Chevron_right.cjs.js");require("../../icons/src/icons/Eye_slash_fill.cjs.js");require("../../icons/src/icons/Information.cjs.js");require("../../icons/src/icons/More.cjs.js");require("../../icons/src/icons/Plus.cjs.js");require("../../icons/src/icons/Menu.cjs.js");require("../../icons/src/icons/Calendar.cjs.js");require("../../icons/src/icons/Question_circle.cjs.js");require("../../icons/src/icons/Share.cjs.js");require("../../icons/src/icons/Setting_fill.cjs.js");require("../../icons/src/icons/Person_fill.cjs.js");require("../../icons/src/icons/Chevron_up.cjs.js");require("../../icons/src/icons/Store.cjs.js");require("../../icons/src/icons/Re.cjs.js");require("../../icons/src/icons/Search.cjs.js");const t=require("../../chunks/index.styled.D12n8i_w.js"),l=require("react"),y=require("../Input/BaseInput/index.cjs.js"),C=require("../../hooks/useLayoutIsMobile.cjs.js"),k=h=>{var m;const{label:x,placeholder:b,itemList:i,onChange:a,disabled:f,errorValidation:S,value:n,bottomSheetTitle:j}=h,[p,c]=l.useState((m=i.find(r=>r.value===n))==null?void 0:m.label),[_,q]=l.useState(!1),[o,d]=l.useState(!1),B=C(),u=l.useCallback(r=>{d(r)},[]);return l.useEffect(()=>{var r;c((r=i.find(s=>s.value===n))==null?void 0:r.label)},[i,n]),e.jsxs(t.Wrapper,{children:[e.jsx(t.IconWrapper,{rotateArrow:o,children:e.jsx(L.default,{size:20,className:"text-gray-200"})}),e.jsx(y.BaseInput,{disabled:f,className:"select-box",label:x,placeholder:b,readOnly:!0,onClick:()=>d(!o),focusedAnimation:!1,value:p,onBlur:()=>{_&&u(!1)},errorValidation:S}),o&&e.jsx(t.Desktop,{children:e.jsxs(t.ItemListWrapper,{onMouseOver:()=>q(!1),onMouseOut:()=>q(!0),children:[e.jsx(t.ItemList,{children:i.map(r=>{const{label:s,value:I}=r;return e.jsx(t.Item,{onClick:()=>{c(s),a(I),u(!1)},children:s},s)})}),e.jsx(t.ListBottomMargin,{})]})}),B&&e.jsx(t.TitleBottomSheet,{visible:o,onMaskClick:()=>u(!1),children:e.jsxs(t.TitleBottomSheet.Body,{hasContentPadding:!1,children:[e.jsx(t.TitleBottomSheet.Title,{hasContentPadding:!1,title:j}),e.jsx(v.BottomSheetItemList,{item:i,onClick:({value:r})=>{a(r),u(!1)}})]})})]})};exports.SelectBoxStyled=t.index_styled;exports.SelectBox=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/jsx-runtime.CrDL12FN.js"),B=require("../../library/List/BottomSheetItemList/index.cjs.js");require("../../icons/src/icons/Alarm_fill.cjs.js");require("../../icons/src/icons/Cancel_circle.cjs.js");require("../../icons/src/icons/Check.cjs.js");require("../../icons/src/icons/Chevron_left.cjs.js");require("../../icons/src/icons/Chevron_right.cjs.js");const I=require("../../icons/src/icons/Chevron_down.cjs.js");require("../../icons/src/icons/Cart_fill.cjs.js");require("../../icons/src/icons/Chevron_up.cjs.js");require("../../icons/src/icons/Double_Chevron_right.cjs.js");require("../../icons/src/icons/Eye_slash_fill.cjs.js");require("../../icons/src/icons/Filter.cjs.js");require("../../icons/src/icons/Double_Chevron_left.cjs.js");require("../../icons/src/icons/Calendar.cjs.js");require("../../icons/src/icons/Eye_fill.cjs.js");require("../../icons/src/icons/Person_fill.cjs.js");require("../../icons/src/icons/More.cjs.js");require("../../icons/src/icons/Question_circle.cjs.js");require("../../icons/src/icons/Search.cjs.js");require("../../icons/src/icons/Plus.cjs.js");require("../../icons/src/icons/Setting_fill.cjs.js");require("../../icons/src/icons/Share.cjs.js");require("../../icons/src/icons/Information.cjs.js");require("../../icons/src/icons/Re.cjs.js");require("../../icons/src/icons/Menu.cjs.js");require("../../icons/src/icons/Cancel.cjs.js");require("../../icons/src/icons/Store.cjs.js");const t=require("../../chunks/index.mqd1GOb5.js"),o=require("react"),v=require("../Input/BaseInput/index.cjs.js"),L=require("../../hooks/useLayoutIsMobile.cjs.js"),y=d=>{var q;const{label:j,placeholder:p,itemList:r,onChange:a,disabled:h,errorValidation:b,value:l,bottomSheetTitle:f}=d,[S,x]=o.useState((q=r.find(s=>s.value===l))==null?void 0:q.label),[R,c]=o.useState(!1),[u,m]=o.useState(!1),E=L(),n=o.useCallback(s=>{m(s)},[]);return o.useEffect(()=>{var s;x((s=r.find(i=>i.value===l))==null?void 0:s.label)},[r,l]),e.jsxRuntimeExports.jsxs(t.Wrapper,{children:[e.jsxRuntimeExports.jsx(t.IconWrapper,{rotateArrow:u,children:e.jsxRuntimeExports.jsx(I.default,{size:20,className:"text-gray-200"})}),e.jsxRuntimeExports.jsx(v.BaseInput,{disabled:h,className:"select-box",label:j,placeholder:p,readOnly:!0,onClick:()=>m(!u),focusedAnimation:!1,value:S,onBlur:()=>{R&&n(!1)},errorValidation:b}),u&&e.jsxRuntimeExports.jsx(t.Desktop,{children:e.jsxRuntimeExports.jsxs(t.ItemListWrapper,{onMouseOver:()=>c(!1),onMouseOut:()=>c(!0),children:[e.jsxRuntimeExports.jsx(t.ItemList,{children:r.map(s=>{const{label:i,value:_}=s;return e.jsxRuntimeExports.jsx(t.Item,{onClick:()=>{x(i),a(_),n(!1)},children:i},i)})}),e.jsxRuntimeExports.jsx(t.ListBottomMargin,{})]})}),E&&e.jsxRuntimeExports.jsx(t.TitleBottomSheet,{visible:u,onMaskClick:()=>n(!1),children:e.jsxRuntimeExports.jsxs(t.TitleBottomSheet.Body,{hasContentPadding:!1,children:[e.jsxRuntimeExports.jsx(t.TitleBottomSheet.Title,{hasContentPadding:!1,title:f}),e.jsxRuntimeExports.jsx(B.BottomSheetItemList,{item:r,onClick:({value:s})=>{a(s),n(!1)}})]})})]})};exports.SelectBoxStyled=t.index_styled;exports.SelectBox=y;

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

@@ -1,88 +1,88 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { BottomSheetItemList as S } from "../../library/List/BottomSheetItemList/index.es.js";
+import { j as t } from "../../chunks/jsx-runtime.OVHDjVDe.js";
+import { BottomSheetItemList as k } from "../../library/List/BottomSheetItemList/index.es.js";
 import "../../icons/src/icons/Alarm_fill.es.js";
 import "../../icons/src/icons/Cancel_circle.es.js";
 import "../../icons/src/icons/Check.es.js";
-import g from "../../icons/src/icons/Chevron_down.es.js";
 import "../../icons/src/icons/Chevron_left.es.js";
 import "../../icons/src/icons/Chevron_right.es.js";
+import M from "../../icons/src/icons/Chevron_down.es.js";
 import "../../icons/src/icons/Cart_fill.es.js";
-import "../../icons/src/icons/Double_Chevron_left.es.js";
-import "../../icons/src/icons/Eye_fill.es.js";
-import "../../icons/src/icons/Filter.es.js";
-import "../../icons/src/icons/Cancel.es.js";
+import "../../icons/src/icons/Chevron_up.es.js";
 import "../../icons/src/icons/Double_Chevron_right.es.js";
 import "../../icons/src/icons/Eye_slash_fill.es.js";
-import "../../icons/src/icons/Information.es.js";
-import "../../icons/src/icons/More.es.js";
-import "../../icons/src/icons/Plus.es.js";
-import "../../icons/src/icons/Menu.es.js";
+import "../../icons/src/icons/Filter.es.js";
+import "../../icons/src/icons/Double_Chevron_left.es.js";
 import "../../icons/src/icons/Calendar.es.js";
+import "../../icons/src/icons/Eye_fill.es.js";
+import "../../icons/src/icons/Person_fill.es.js";
+import "../../icons/src/icons/More.es.js";
 import "../../icons/src/icons/Question_circle.es.js";
-import "../../icons/src/icons/Share.es.js";
+import "../../icons/src/icons/Search.es.js";
+import "../../icons/src/icons/Plus.es.js";
 import "../../icons/src/icons/Setting_fill.es.js";
-import "../../icons/src/icons/Person_fill.es.js";
-import "../../icons/src/icons/Chevron_up.es.js";
-import "../../icons/src/icons/Store.es.js";
+import "../../icons/src/icons/Share.es.js";
+import "../../icons/src/icons/Information.es.js";
 import "../../icons/src/icons/Re.es.js";
-import "../../icons/src/icons/Search.es.js";
-import { W as y, m as O, n as T, o as W, p as N, q as V, L as j, T as m } from "../../chunks/index.styled.B9NKU_3J.js";
-import { i as Le } from "../../chunks/index.styled.B9NKU_3J.js";
-import { useState as n, useCallback as w, useEffect as A } from "react";
-import { BaseInput as D } from "../Input/BaseInput/index.es.js";
-import P from "../../hooks/useLayoutIsMobile.es.js";
-const be = (h) => {
-  var d;
-  const { label: b, placeholder: v, itemList: o, onChange: p, disabled: I, errorValidation: L, value: l, bottomSheetTitle: C } = h, [x, c] = n((d = o.find((e) => e.value === l)) == null ? void 0 : d.label), [B, u] = n(!1), [r, f] = n(!1), k = P(), s = w((e) => {
-    f(e);
+import "../../icons/src/icons/Menu.es.js";
+import "../../icons/src/icons/Cancel.es.js";
+import "../../icons/src/icons/Store.es.js";
+import { W as S, l as g, m as y, n as O, o as T, p as W, q as N, T as a } from "../../chunks/index.BarRvPVS.js";
+import { i as jt } from "../../chunks/index.BarRvPVS.js";
+import { useState as m, useCallback as V, useEffect as w } from "react";
+import { BaseInput as A } from "../Input/BaseInput/index.es.js";
+import D from "../../hooks/useLayoutIsMobile.es.js";
+const xt = (d) => {
+  var f;
+  const { label: x, placeholder: h, itemList: o, onChange: n, disabled: b, errorValidation: j, value: l, bottomSheetTitle: v } = d, [I, p] = m((f = o.find((e) => e.value === l)) == null ? void 0 : f.label), [C, c] = m(!1), [i, u] = m(!1), L = D(), r = V((e) => {
+    u(e);
   }, []);
-  return A(() => {
+  return w(() => {
     var e;
-    c((e = o.find((i) => i.value === l)) == null ? void 0 : e.label);
-  }, [o, l]), /* @__PURE__ */ a(y, { children: [
-    /* @__PURE__ */ t(O, { rotateArrow: r, children: /* @__PURE__ */ t(g, { size: 20, className: "text-gray-200" }) }),
-    /* @__PURE__ */ t(
-      D,
+    p((e = o.find((s) => s.value === l)) == null ? void 0 : e.label);
+  }, [o, l]), /* @__PURE__ */ t.jsxs(S, { children: [
+    /* @__PURE__ */ t.jsx(g, { rotateArrow: i, children: /* @__PURE__ */ t.jsx(M, { size: 20, className: "text-gray-200" }) }),
+    /* @__PURE__ */ t.jsx(
+      A,
       {
-        disabled: I,
+        disabled: b,
         className: "select-box",
-        label: b,
-        placeholder: v,
+        label: x,
+        placeholder: h,
         readOnly: !0,
-        onClick: () => f(!r),
+        onClick: () => u(!i),
         focusedAnimation: !1,
-        value: x,
+        value: I,
         onBlur: () => {
-          B && s(!1);
+          C && r(!1);
         },
-        errorValidation: L
+        errorValidation: j
       }
     ),
-    r && /* @__PURE__ */ t(T, { children: /* @__PURE__ */ a(W, { onMouseOver: () => u(!1), onMouseOut: () => u(!0), children: [
-      /* @__PURE__ */ t(N, { children: o.map((e) => {
-        const { label: i, value: M } = e;
-        return /* @__PURE__ */ t(
-          V,
+    i && /* @__PURE__ */ t.jsx(y, { children: /* @__PURE__ */ t.jsxs(O, { onMouseOver: () => c(!1), onMouseOut: () => c(!0), children: [
+      /* @__PURE__ */ t.jsx(T, { children: o.map((e) => {
+        const { label: s, value: B } = e;
+        return /* @__PURE__ */ t.jsx(
+          W,
           {
             onClick: () => {
-              c(i), p(M), s(!1);
+              p(s), n(B), r(!1);
             },
-            children: i
+            children: s
           },
-          i
+          s
         );
       }) }),
-      /* @__PURE__ */ t(j, {})
+      /* @__PURE__ */ t.jsx(N, {})
     ] }) }),
-    k && // fyi. (PC 모드) useOverlayPreventScroll 호출자체를 안해야해서 렌더링안함.
-    /* @__PURE__ */ t(m, { visible: r, onMaskClick: () => s(!1), children: /* @__PURE__ */ a(m.Body, { hasContentPadding: !1, children: [
-      /* @__PURE__ */ t(m.Title, { hasContentPadding: !1, title: C }),
-      /* @__PURE__ */ t(
-        S,
+    L && // fyi. (PC 모드) useOverlayPreventScroll 호출자체를 안해야해서 렌더링안함.
+    /* @__PURE__ */ t.jsx(a, { visible: i, 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 }) => {
-            p(e), s(!1);
+            n(e), r(!1);
           }
         }
       )
@@ -90,6 +90,6 @@ const be = (h) => {
   ] });
 };
 export {
-  be as SelectBox,
-  Le as SelectBoxStyled
+  xt as SelectBox,
+  jt as SelectBoxStyled
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@emotion/react");require("@emotion/styled");require("../../utils/media.util.cjs.js");require("../../core/Colors/index.cjs.js");require("../../utils/GenerateColorStyle/mini-button.cjs.js");require("../../utils/GenerateColorStyle/datepicker.cjs.js");require("react/jsx-runtime");const e=require("../../chunks/index.styled.D12n8i_w.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("react");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_circle.cjs.js");require("../../icons/src/icons/Check.cjs.js");require("../../icons/src/icons/Chevron_down.cjs.js");require("../../icons/src/icons/Chevron_left.cjs.js");require("../../icons/src/icons/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_fill.cjs.js");require("../../icons/src/icons/Filter.cjs.js");require("../../icons/src/icons/Cancel.cjs.js");require("../../icons/src/icons/Double_Chevron_right.cjs.js");require("../../icons/src/icons/Eye_slash_fill.cjs.js");require("../../icons/src/icons/Information.cjs.js");require("../../icons/src/icons/More.cjs.js");require("../../icons/src/icons/Plus.cjs.js");require("../../icons/src/icons/Menu.cjs.js");require("../../icons/src/icons/Calendar.cjs.js");require("../../icons/src/icons/Question_circle.cjs.js");require("../../icons/src/icons/Share.cjs.js");require("../../icons/src/icons/Setting_fill.cjs.js");require("../../icons/src/icons/Person_fill.cjs.js");require("../../icons/src/icons/Chevron_up.cjs.js");require("../../icons/src/icons/Store.cjs.js");require("../../icons/src/icons/Re.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("../Input/TextField/index.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.Desktop=e.Desktop;exports.IconWrapper=e.IconWrapper;exports.Item=e.Item;exports.ItemList=e.ItemList;exports.ItemListWrapper=e.ItemListWrapper;exports.ListBottomMargin=e.ListBottomMargin;exports.Mobile=e.Mobile;exports.Wrapper=e.Wrapper;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@emotion/react");require("@emotion/styled");require("../../utils/media.util.cjs.js");require("../../core/Colors/index.cjs.js");require("../../utils/GenerateColorStyle/mini-button.cjs.js");require("../../utils/GenerateColorStyle/datepicker.cjs.js");require("../../chunks/jsx-runtime.CrDL12FN.js");const e=require("../../chunks/index.mqd1GOb5.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("react");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("../../icons/src/icons/Alarm_fill.cjs.js");require("../../icons/src/icons/Cancel_circle.cjs.js");require("../../icons/src/icons/Check.cjs.js");require("../../icons/src/icons/Chevron_left.cjs.js");require("../../icons/src/icons/Chevron_right.cjs.js");require("../../icons/src/icons/Chevron_down.cjs.js");require("../../icons/src/icons/Cart_fill.cjs.js");require("../../icons/src/icons/Chevron_up.cjs.js");require("../../icons/src/icons/Double_Chevron_right.cjs.js");require("../../icons/src/icons/Eye_slash_fill.cjs.js");require("../../icons/src/icons/Filter.cjs.js");require("../../icons/src/icons/Double_Chevron_left.cjs.js");require("../../icons/src/icons/Calendar.cjs.js");require("../../icons/src/icons/Eye_fill.cjs.js");require("../../icons/src/icons/Person_fill.cjs.js");require("../../icons/src/icons/More.cjs.js");require("../../icons/src/icons/Question_circle.cjs.js");require("../../icons/src/icons/Search.cjs.js");require("../../icons/src/icons/Plus.cjs.js");require("../../icons/src/icons/Setting_fill.cjs.js");require("../../icons/src/icons/Share.cjs.js");require("../../icons/src/icons/Information.cjs.js");require("../../icons/src/icons/Re.cjs.js");require("../../icons/src/icons/Menu.cjs.js");require("../../icons/src/icons/Cancel.cjs.js");require("../../icons/src/icons/Store.cjs.js");require("../Control/CheckMark/index.styled.cjs.js");require("../Control/Switch/index.cjs.js");require("../DatePicker/BaseDatePicker/index.styled.cjs.js");require("../DatePicker/BaseDatePicker/YearMonthController/index.styed.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("../Input/TextField/index.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("../../chunks/index.D2jUN9AV.js");require("../ui/bottomSheet.cjs.js");exports.Desktop=e.Desktop;exports.IconWrapper=e.IconWrapper;exports.Item=e.Item;exports.ItemList=e.ItemList;exports.ItemListWrapper=e.ItemListWrapper;exports.ListBottomMargin=e.ListBottomMargin;exports.Mobile=e.Mobile;exports.Wrapper=e.Wrapper;

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

@@ -1,34 +1,34 @@
 export declare const Wrapper: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ItemListWrapper: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ListBottomMargin: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ItemList: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Item: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const IconWrapper: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
 } & {
     rotateArrow: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Desktop: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Mobile: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import('node_modules/@types/react').DetailedHTMLProps<import('node_modules/@types/react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;