@edu-tosel/design 1.0.51 → 1.0.53

package/card/template/ProgressCard.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SVG from "../../asset/SVG";
+import { cn } from "../../util";
+import CardDesign from "../design/Card.design";
+const bg = {
+    green: "bg-green-dark",
+    blue: "bg-blue-navy",
+};
+const bgLight = {
+    green: "bg-green-dark/10",
+    blue: "bg-blue-navy/10",
+};
+const text = {
+    green: "text-green-dark",
+    blue: "text-blue-navy",
+};
+export default function ProgressCard({ titles, steps, theme, }) {
+    const progressBox = {
+        positions: "absolute top-7.5 left-7.5",
+        displays: "flex",
+        sizes: "w-150 h-19",
+    };
+    const stepBox = (flag) => ({
+        displays: "flex-1 flex flex-col justify-between",
+        sizes: "h-full",
+        backgrounds: flag ? bgLight[theme ?? "green"] : "bg-transparent",
+        boundaries: "rounded-md p-2.5",
+        texts: flag ? "text-gray-dark" : "text-gray-medium",
+    });
+    const titleBox = {
+        positions: "absolute top-12 right-12",
+        displays: "flex flex-col items-end gap-y-3",
+    };
+    const occupied = [
+        steps.filter(([_, value]) => !!value).length,
+        steps.length,
+    ].join("/");
+    return (_jsxs(CardDesign, { options: {
+            width: "2xl",
+            height: "2xs",
+        }, children: [_jsx("div", { className: cn(progressBox), children: steps.map(([key, value]) => (_jsxs("div", { className: cn(stepBox(value)), children: [_jsx("div", { children: key }), _jsx(SVG.Operation.Checked, { flag: value, size: 25, theme: theme })] }, key))) }), _jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: `text-xl leading-none font-pretendard-bold ${text[theme ?? "green"]}`, children: titles.title }), _jsx("div", { className: "text-base leading-none", children: titles.subtitle })] }), _jsx("div", { className: "absolute bottom-0 left-0 bg-gray-light w-full h-2.5", children: _jsx("div", { className: `h-full w-${occupied} ${bg[theme ?? "green"]}` }) })] }));
+}

package/globals.css

@@ -1,226 +1,226 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@font-face {
-  font-family: "Pretendard-Medium";
-  src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Pretendard-Bold";
-  src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Pretendard-Light";
-  src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Kostar";
-  src: url("./asset/fonts/Kostar.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "NicoMoji";
-  src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Megrim";
-  src: url("./asset/fonts/Megrim.ttf") format("truetype");
-}
-
-@font-face {
-  font-family: "Times-Newer-Roman-Bold";
-  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Times-Newer-Roman-BoldItalic";
-  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
-}
-
-input[type="date"]::-webkit-inner-spin-button,
-input[type="date"]::-webkit-calendar-picker-indicator {
-  display: none;
-  -webkit-appearance: none;
-}
-
-::-webkit-scrollbar {
-  width: 3px;
-  padding-right: 10px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-::-webkit-scrollbar-thumb {
-  background-color: #808080;
-  opacity: 0.5;
-  border-radius: 10px;
-}
-
-.box-shadow {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
-}
-
-.box-shadow-sm {
-  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
-}
-
-.border-gradient-green-to-red {
-}
-
-.x-shape {
-  position: relative;
-  width: 0.83625rem;
-  height: 0.83625rem;
-}
-
-.x-shape::before,
-.x-shape::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 2.5px;
-  border-radius: 2px;
-  height: 100%;
-  background-color: white;
-  transform-origin: center;
-}
-
-.x-shape::before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-
-.x-shape::after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-
-.border-inner {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-.box-shadow-focus:focus {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-.box-shadow-focus-red:focus {
-  box-shadow: 0px 0px 10px 0px #ff8383;
-}
-.box-green {
-  background: rgba(16, 86, 82, 0.1);
-  color: #105652;
-}
-.box-green-focus:focus {
-  background: white;
-  color: black;
-  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
-}
-/* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
-.box-inner-shadow:hover {
-  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -1px rgba(0, 0, 0, 0.06);
-}
-/* Date Picker Css */
-.react-datepicker__day--selected {
-  background-color: #105652 !important;
-}
-.react-datepicker__header {
-  background: white !important;
-  border: none !important;
-}
-.react-datepicker {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
-  border-radius: 0.375rem !important;
-  border: none !important;
-}
-.react-datepicker__day--keyboard-selected {
-  background-color: white !important;
-  color: black !important;
-}
-.react-datepicker__day--outside-month {
-  color: rgb(161 161 170) !important;
-}
-.react-datepicker__month-container {
-  padding-top: 1rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-bottom: 0.5rem;
-}
-.react-datepicker-popper {
-  transform: translate(0px 295px) !important;
-}
-.react-datepicker__input-container {
-  text-align: center !important;
-  border-radius: 0.375rem !important;
-  transition: all 0.3s;
-}
-.react-datepicker__input-container > input {
-  cursor: pointer !important;
-}
-.react-datepicker__input-container:hover {
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
-}
-.react-datepicker__navigation {
-  top: 18px !important;
-}
-.react-datepicker__navigation--next {
-  right: 20px !important;
-}
-.react-datepicker__navigation--previous {
-  left: 182px !important;
-}
-.react-datepicker__current-month {
-  text-align: left !important;
-  margin-left: 16px !important;
-}
-.react-datepicker__triangle {
-  display: none !important;
-}
-.react-datepicker__children-container {
-  width: 16rem !important;
-}
-/* toggle button */
-.toggle[type="checkbox"]::before {
-  content: "";
-  position: absolute;
-  left: 1px;
-  top: 1px;
-  width: 1.1rem;
-  height: 1.1rem;
-  border-radius: 50%;
-  transform: scale(0.9);
-  background-color: white;
-  transition: left 100ms linear;
-}
-.toggle[type="checkbox"]:checked::before {
-  background-color: white;
-  left: 1.32rem;
-}
-.toggle[type="checkbox"]:checked {
-  background-color: #105652;
-}
-.toggle[type="checkbox"]:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-.toggle[type="checkbox"]:disabled + span {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-/* checkbox */
-.check-box[type="checkbox"]:checked {
-  border-color: transparent;
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
-  background-size: 150%;
-  background-position: 50%;
-  background-repeat: no-repeat;
-}
-.check-box[type="checkbox"]:disabled {
-  background-color: #7f7f7f;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@font-face {
+  font-family: "Pretendard-Medium";
+  src: url("./asset/fonts/Pretendard-Medium.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pretendard-Bold";
+  src: url("./asset/fonts/Pretendard-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Pretendard-Light";
+  src: url("./asset/fonts/Pretendard-Light.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Kostar";
+  src: url("./asset/fonts/Kostar.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "NicoMoji";
+  src: url("./asset/fonts/NicoMoji.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Megrim";
+  src: url("./asset/fonts/Megrim.ttf") format("truetype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-Bold";
+  src: url("./asset/fonts/TimesNewerRoman-Bold.otf") format("opentype");
+}
+
+@font-face {
+  font-family: "Times-Newer-Roman-BoldItalic";
+  src: url("./asset/fonts/TimesNewerRoman-BoldItalic.otf") format("opentype");
+}
+
+input[type="date"]::-webkit-inner-spin-button,
+input[type="date"]::-webkit-calendar-picker-indicator {
+  display: none;
+  -webkit-appearance: none;
+}
+
+::-webkit-scrollbar {
+  width: 3px;
+  padding-right: 10px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #808080;
+  opacity: 0.5;
+  border-radius: 10px;
+}
+
+.box-shadow {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
+}
+
+.box-shadow-sm {
+  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
+}
+
+.border-gradient-green-to-red {
+}
+
+.x-shape {
+  position: relative;
+  width: 0.83625rem;
+  height: 0.83625rem;
+}
+
+.x-shape::before,
+.x-shape::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 2.5px;
+  border-radius: 2px;
+  height: 100%;
+  background-color: white;
+  transform-origin: center;
+}
+
+.x-shape::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.x-shape::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+.border-inner {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.box-shadow-focus:focus {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+.box-shadow-focus-red:focus {
+  box-shadow: 0px 0px 10px 0px #ff8383;
+}
+.box-green {
+  background: rgba(16, 86, 82, 0.1);
+  color: #105652;
+}
+.box-green-focus:focus {
+  background: white;
+  color: black;
+  box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38);
+}
+/* box-shadow: 0px 0px 10px 0px rgba(16, 86, 82, 0.38); */
+.box-inner-shadow:hover {
+  box-shadow: 0 0 0 1px #e5e7eb inset, 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+/* Date Picker Css */
+.react-datepicker__day--selected {
+  background-color: #105652 !important;
+}
+.react-datepicker__header {
+  background: white !important;
+  border: none !important;
+}
+.react-datepicker {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+  border-radius: 0.375rem !important;
+  border: none !important;
+}
+.react-datepicker__day--keyboard-selected {
+  background-color: white !important;
+  color: black !important;
+}
+.react-datepicker__day--outside-month {
+  color: rgb(161 161 170) !important;
+}
+.react-datepicker__month-container {
+  padding-top: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.5rem;
+}
+.react-datepicker-popper {
+  transform: translate(0px 295px) !important;
+}
+.react-datepicker__input-container {
+  text-align: center !important;
+  border-radius: 0.375rem !important;
+  transition: all 0.3s;
+}
+.react-datepicker__input-container > input {
+  cursor: pointer !important;
+}
+.react-datepicker__input-container:hover {
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15) !important;
+}
+.react-datepicker__navigation {
+  top: 18px !important;
+}
+.react-datepicker__navigation--next {
+  right: 20px !important;
+}
+.react-datepicker__navigation--previous {
+  left: 182px !important;
+}
+.react-datepicker__current-month {
+  text-align: left !important;
+  margin-left: 16px !important;
+}
+.react-datepicker__triangle {
+  display: none !important;
+}
+.react-datepicker__children-container {
+  width: 16rem !important;
+}
+/* toggle button */
+.toggle[type="checkbox"]::before {
+  content: "";
+  position: absolute;
+  left: 1px;
+  top: 1px;
+  width: 1.1rem;
+  height: 1.1rem;
+  border-radius: 50%;
+  transform: scale(0.9);
+  background-color: white;
+  transition: left 100ms linear;
+}
+.toggle[type="checkbox"]:checked::before {
+  background-color: white;
+  left: 1.32rem;
+}
+.toggle[type="checkbox"]:checked {
+  background-color: #105652;
+}
+.toggle[type="checkbox"]:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+.toggle[type="checkbox"]:disabled + span {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* checkbox */
+.check-box[type="checkbox"]:checked {
+  border-color: transparent;
+  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
+  background-size: 150%;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+.check-box[type="checkbox"]:disabled {
+  background-color: #7f7f7f;
+}

package/interface/Action.d.ts

@@ -4,12 +4,12 @@ export interface ActionEvent {
     event: string;
     type: "view" | "modal";
 }
-type Event<T extends boolean | string | null | undefined> = [
+type Action<T extends boolean | string | null | undefined> = [
     T,
     React.ReactNode
 ];
-export type Show = Event<boolean | string>;
-export type Replace = Event<boolean | string | null | undefined>;
+export type Show = Action<boolean | string>;
+export type Replace = Action<boolean | string | null | undefined>;
 export interface ShowAction {
     event: string;
     isVisible: boolean;
@@ -20,11 +20,11 @@ export interface ShowProps {
 }
 export interface ReplaceProps {
     actions?: Replace[];
-    children: React.ReactNode;
+    children?: React.ReactNode;
 }
 export interface EventsProps {
-    replaces?: Event<boolean | string | null | undefined>[];
-    shows?: Event<boolean | string>[];
+    replaces?: Action<boolean | string | null | undefined>[];
+    shows?: Action<boolean | string>[];
 }
 export interface DataFieldProps<T> {
     id: string;

package/interface/Card.d.ts

@@ -126,5 +126,7 @@ export interface RollCardProps extends CardProps {
         icon?: string;
     };
     state: State<boolean>;
+    isFixed?: boolean;
+    isDisabled?: boolean;
 }
 export {};

package/interface/Modal.d.ts

@@ -1,4 +1,4 @@
-import { Button, Scripts, Size, Titles } from "./Property";
+import { Button, Scripts, Size, State, Titles } from "./Property";
 import { ShowAction } from "./Action";
 interface Options {
     width: Size;
@@ -27,4 +27,11 @@ interface AlertModalProps extends Omit<ModalProps, "children"> {
         buttons?: Button[];
     };
 }
-export type { ModalProps, ConfirmModalProps, AlertModalProps };
+interface DaumPostcode {
+    address: string;
+    zipcode: string;
+}
+interface DaumPostcodeModalProps extends Omit<ModalProps, "titles" | "children"> {
+    state: State<DaumPostcode>;
+}
+export type { ModalProps, ConfirmModalProps, AlertModalProps, DaumPostcodeModalProps, };

package/interface/Property.d.ts

@@ -27,7 +27,7 @@ export type State<T> = [T, StateAction<T>];
  * @property {"full"} full - Full size
  */
 export type ImageSize = "sub" | "full";
-export type Size = "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
+export type Size = "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}

package/interface/Theme.d.ts

@@ -0,0 +1,2 @@
+type Theme = "green" | "blue";
+export type { Theme };

package/interface/Theme.js

@@ -0,0 +1 @@
+export {};

package/interface/index.d.ts

@@ -4,5 +4,6 @@ export * from "./HTMLElement";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
+export * from "./Theme";
 export * from "./Shelf";
 export * from "./widget";

package/interface/index.js

@@ -4,5 +4,6 @@ export * from "./HTMLElement";
 export * from "./Layout";
 export * from "./Overlay";
 export * from "./Property";
+export * from "./Theme";
 export * from "./Shelf";
 export * from "./widget";

package/layout/widget/dashboard/mypage/Navigate.js

@@ -9,7 +9,7 @@ function Academy({ onClick }) {
             boundary: "box-shadow shadow-green-dark",
             onMouse: [onMouse, _],
             width: "2xs",
-            height: "2xs",
+            height: "3xs",
         }, children: [_jsx("div", { className: "text-gray-medium group-hover:text-green-dark duration-300", children: "\uB098\uC758 \uD559\uC6D0" }), _jsx("svg", { className: "absolute bottom-5 right-5 ", xmlns: "http://www.w3.org/2000/svg", width: "60", height: "60", viewBox: "0 0 60 60", fill: "none", children: _jsx("path", { className: "duration-300", d: "M9 53H52M10.9545 6H50.0455M12.9091 6V53M48.0909 6V53M22.6818 15.7917H26.5909M22.6818 23.625H26.5909M22.6818 31.4583H26.5909M34.4091 15.7917H38.3182M34.4091 23.625H38.3182M34.4091 31.4583H38.3182M22.6818 53V44.1875C22.6818 42.566 23.9953 41.25 25.6136 41.25H35.3864C37.0047 41.25 38.3182 42.566 38.3182 44.1875V53", stroke: !onMouse ? "#7F7F7F" : "#105652", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }) })] }));
 }
 function Payment({ onClick }) {
@@ -18,7 +18,7 @@ function Payment({ onClick }) {
             className: "pt-5 pl-5",
             background: "group bg-green-dark/10 hover:bg-green-dark/30 ",
             width: "2xs",
-            height: "2xs",
+            height: "3xs",
             boundary: "",
         }, children: [_jsx("div", { className: "opacity-0 group-hover:opacity-100 duration-300", children: "\uACB0\uC81C \uC815\uBCF4" }), _jsxs("div", { className: "absolute top-5 group-hover:top-11.25 left-5 flex flex-col gap-1.5 duration-300", children: [_jsx("div", { className: "w-24 h-1.5 bg-green-dark/30 group-hover:bg-green-dark/40 duration-300" }), _jsx("div", { className: "w-14.25 h-1.5 bg-green-dark/30 group-hover:bg-green-dark/40 duration-300" })] }), _jsx("div", { className: "absolute top-5 right-5 w-12.25 h-7 rounded-full bg-[#CFDDDC]" }), _jsx("div", { className: "absolute left-0 bottom-5 w-full h-5 bg-green-dark" })] }));
 }

package/layout/widget/dashboard/mypage/Profile.js

@@ -22,7 +22,7 @@ function Profile({ name, birthday, image, modify }) {
     return (_jsxs(Card, { options: {
             className: "flex gap-x-7.5 items-center pl-5",
             width: "md",
-            height: "2xs",
+            height: "3xs",
             boundary: "border-1 border-black",
         }, children: [_jsxs("button", { onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onClick: modify.image, className: "w-20 h-20 overflow-hidden rounded-md relative", children: [_jsx("img", { src: image, alt: "profile-image", className: "bg-cover" }), transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(hoverBox), children: [_jsx(SVG.Image, {}), _jsx("div", { className: "text-white text-xs leading-none", children: "\uC0AC\uC9C4 \uBC14\uAFB8\uAE30" })] })))] }), _jsxs("div", { className: "flex flex-col h-20", children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold text-gray-dark", children: name }), _jsx("div", { className: "leading-none text-gray-medium mt-1.25", children: birthday }), _jsxs("div", { className: "flex gap-3 mt-auto", children: [_jsx(Label.Button, { title: "\uC2E4\uBA85 \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.name }), _jsx(Label.Button, { title: "\uC0DD\uC77C \uC218\uC815", options: { width: "sm", height: "xs" }, onClick: modify.birthday })] })] })] }));
 }

package/modal/design/Modal.design.js

@@ -11,7 +11,7 @@ const widthSize = {
     xs: "w-2/3 min-w-76 max-w-176",
     sm: "w-2/3 min-w-76 max-w-176",
     md: "w-112.5",
-    lg: "w-full min-w-76 max-w-360",
+    lg: "w-full min-w-76 max-w-240",
     xl: "w-2/3 min-w-76 max-w-360",
     "2xl": "w-2/3 min-w-76 max-w-360",
     full: "w-full",
@@ -21,7 +21,7 @@ const heightSize = {
     sm: "h-100",
     md: "h-72 sm:h-48",
     lg: "h-112.5",
-    xl: "h-180",
+    xl: "h-160",
     "2xl": "max-w-176",
     full: "h-full",
 };

package/modal/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Modal } from "./template";
-export { default as ConfirmModal } from "./template/ConfirmModal";
+export { default as ConfirmModal } from "./template/Confirm";
+export { default as PostcodeModal } from "./template/Postcode";

package/modal/index.js

@@ -1,2 +1,3 @@
 export { default as Modal } from "./template";
-export { default as ConfirmModal } from "./template/ConfirmModal";
+export { default as ConfirmModal } from "./template/Confirm";
+export { default as PostcodeModal } from "./template/Postcode";

package/modal/template/{ConfirmModal → Confirm}/Tag.d.ts

@@ -4,6 +4,7 @@ interface TagModalProps<T> extends Omit<ConfirmModalProps, "children"> {
     tag: {
         state: State<T[]>;
         tags: [T, string][];
+        process?: [boolean, React.ReactNode];
         options?: {
             selectHow?: "one" | "plural";
         };