@edu-tosel/design 1.0.61 → 1.0.62

package/asset/svg/Operation.js

@@ -14,7 +14,7 @@ function Checked({ flag, size, theme, }) {
         green: "#105652",
         blue: "#173A8B",
     };
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size ?? "40", height: size ?? "40", viewBox: "0 0 48 48", fill: "none", children: [_jsx("path", { d: "M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z", fill: flag ? color[theme ?? "green"] : "#F0F0F0" }), _jsx("path", { d: "M30.5 18.5L24 30.5L18 24", stroke: "white", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round" })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: size ?? "40", height: size ?? "40", viewBox: "0 0 48 48", fill: "none", children: [_jsx("path", { d: "M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z", fill: flag ? color[theme ?? "green"] : "#F0F0F0" }), _jsx("path", { d: "M30.5 18.5L24 30.5L18 24", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 }
 function RightArrow({ onClick }) {
     return (_jsxs("svg", { className: cn(container), onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "48", height: "48", viewBox: "0 0 48 48", fill: "none", children: [_jsx("path", { d: "M42 24C42 26.3638 41.5344 28.7044 40.6298 30.8883C39.7253 33.0722 38.3994 35.0565 36.7279 36.7279C35.0565 38.3994 33.0722 39.7253 30.8883 40.6298C28.7044 41.5344 26.3638 42 24 42C21.6362 42 19.2956 41.5344 17.1117 40.6298C14.9278 39.7253 12.9435 38.3994 11.2721 36.7279C9.60062 35.0565 8.27475 33.0722 7.37017 30.8883C6.46558 28.7044 6 26.3638 6 24C6 19.2261 7.89642 14.6477 11.2721 11.2721C14.6477 7.89642 19.2261 6 24 6C28.7739 6 33.3523 7.89642 36.7279 11.2721C40.1036 14.6477 42 19.2261 42 24Z", fill: "#105652" }), _jsx("path", { d: "M20 24H28M24 20L28 24L24 28", stroke: "white", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })] }));

package/asset/svg/Operation.tsx

@@ -88,9 +88,9 @@ function Checked({
       <path
         d="M30.5 18.5L24 30.5L18 24"
         stroke="white"
-        stroke-width="3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="3"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

package/board/design/Board.design.d.ts

@@ -1,2 +1,2 @@
 import { BoardProps } from "../../interface/Board";
-export declare function Board<B>({ children, action, options, debug, buttons, }: BoardProps<B>): import("react/jsx-runtime").JSX.Element;
+export declare function Board<B>({ children, action, option, debug, buttons, }: BoardProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/design/Board.design.js

@@ -21,9 +21,9 @@ const heightSize = {
     full: "min-h-screen h-full",
     auto: "h-auto",
 };
-export function Board({ children, action, options, debug, buttons, }) {
+export function Board({ children, action, option, debug, buttons, }) {
     const { shows } = action ?? {};
-    const { width, height, isRounded, className, noMobile, background, border } = options ?? {};
+    const { width, height, isRounded, className, noMobile, background, boundary, } = option ?? {};
     const container = {
         positions: "relative",
         width: widthSize[width ?? "full"],
@@ -34,15 +34,15 @@ export function Board({ children, action, options, debug, buttons, }) {
         positions: "relative",
         sizes: `w-full ${heightSize[height ?? "xl"]} overflow-hidden `,
         background: `${background ?? "bg-white"} dark:bg-black/80`,
-        border: border && border,
         styles: "text-black",
         rounded: `rounded-none ${isRounded ? "xl:rounded-xl" : ""}`,
+        boundary,
     };
     const button = {
         positions: "fixed bottom-20 right-4 xl:absolute xl:-bottom-18.5 xl:right-0",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), children: _jsx(Action.Show, { actions: shows, children: _jsx("div", { className: `h-full ${className}`, children: children }) }) }), _jsx("div", { className: cn(button), children: buttons?.map(({ title, onClick, options }) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
-                        ...options,
+    return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(body), children: _jsx(Action.Show, { actions: shows, children: _jsx("div", { className: `h-full ${className}`, children: children }) }) }), _jsx("div", { className: cn(button), children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
+                        ...option,
                         text: "text-white",
                         background: "bg-crimson-burgundy",
                     } }))) })] }));

package/board/design/Header.design.d.ts

@@ -1,2 +1,2 @@
 import { BoardHeaderProps } from "../../interface/Board";
-export default function BoardHeader<B>({ titles, tag, options, }: BoardHeaderProps<B>): import("react/jsx-runtime").JSX.Element;
+export default function BoardHeader<B>({ titles, tag, option, }: BoardHeaderProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/design/Header.design.js

@@ -1,21 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Input, Select } from "../../widget";
-export default function BoardHeader({ titles, tag, options, }) {
+export default function BoardHeader({ titles, tag, option, }) {
     const { title, icon, titleColor } = titles ?? {};
     const { selects, inputs } = tag ?? {};
-    const { colors, titleBorder } = options ?? {};
-    const { bgColor, textColor } = colors ?? {};
+    const { background, text, boundary } = option ?? {};
     const container = {
         positions: "fixed top-15 xl:top-0 left-0 z-30 xl:relative flex items-center",
         paddings: "px-7.5",
-        styles: `${bgColor ?? "bg-white"} ${textColor ?? "text-black"}`,
+        backgrounds: background ?? "bg-white",
+        texts: text ?? "text-black",
         sizes: "w-full h-19",
-        border: `border-b-2 ${titleBorder ?? "border-green-dark"}`,
+        boundary: boundary ?? "border-b-2 border-green-dark",
     };
     const block = {
         displays: "xl:hidden block ",
         sizes: "w-full h-19",
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, options, state }, index) => (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Select, { options: options, selectOptions: selectOptions, state: state }, title) }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [icon && _jsx("img", { src: icon, className: "fill-blue-500" }), _jsx("div", { className: `text-2xl font-pretendard-bold ${titleColor}`, children: title })] }), _jsxs("div", { className: "flex items-center ml-auto gap-4", children: [selects?.map(({ selectOptions, option, state }, index) => (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Select, { option: option, selectOptions: selectOptions, state: state }, title) }, index))), inputs?.map((prop, index) => (_jsx(Input, { ...prop }, index)))] })] }), _jsx("div", { className: cn(block) })] }));
 }

package/board/template/CanvasBoard.d.ts

@@ -1,2 +1,2 @@
 import { CanvasBoardProps } from "../../interface/Board";
-export default function CanvasBoard<B>({ header, children, action, buttons, options, }: CanvasBoardProps<B>): import("react/jsx-runtime").JSX.Element;
+export default function CanvasBoard<B>({ header, children, action, buttons, option, }: CanvasBoardProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/template/CanvasBoard.js

@@ -3,13 +3,13 @@ import { Action } from "../..";
 import { cn } from "../../util";
 import { Board } from "../design/Board.design";
 import BoardHeader from "../design/Header.design";
-export default function CanvasBoard({ header, children, action, buttons, options, }) {
+export default function CanvasBoard({ header, children, action, buttons, option, }) {
     const body = {
         displays: "flex flex-col lg:flex-row lg:flex-wrap gap-7.5",
         sizes: "h-full",
         paddings: `${header ? "pb-55 xl:pb-25" : "pb-36 xl:pb-6"} px-2 xs:px-4 xl:px-7.5 pt-2 xs:pt-4 xl:pt-7.5`,
         styles: "overflow-y-scroll",
-        classNames: options?.className,
+        classNames: option?.className,
     };
-    return (_jsxs(Board, { action: action, buttons: buttons, options: { ...options, className: "", isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Action.Replace, { actions: action?.replaces, children: _jsx("div", { className: cn(body), children: children }) })] }));
+    return (_jsxs(Board, { action: action, buttons: buttons, option: { ...option, className: "", isRounded: true }, children: [header && _jsx(BoardHeader, { ...header }), _jsx(Action.Replace, { actions: action?.replaces, children: _jsx("div", { className: cn(body), children: children }) })] }));
 }

package/board/template/ManageBoard.d.ts

@@ -1,4 +1,4 @@
 import { ManageBoardProps } from "../../interface/Board";
 export default function ManageBoard<B, K extends string, T extends {
     [p in K]: any;
-}>({ header, dataSets, dataField, action, options, buttons, }: ManageBoardProps<B, K, T>): import("react/jsx-runtime").JSX.Element;
+}>({ header, dataSets, dataField, action, option, buttons, }: ManageBoardProps<B, K, T>): import("react/jsx-runtime").JSX.Element;

package/board/template/ManageBoard.js

@@ -5,8 +5,8 @@ import BoardHeader from "../design/Header.design";
 import { cn, sortByOrder } from "../../util";
 import { useActionStore } from "../../store";
 import { useId } from "react";
-export default function ManageBoard({ header, dataSets, dataField, action, options, buttons, }) {
-    const { className, noPadding } = options ?? {};
+export default function ManageBoard({ header, dataSets, dataField, action, option, buttons, }) {
+    const { className, noPadding } = option ?? {};
     const { order } = useActionStore();
     const id = useId();
     const orders = order[id] ?? [];
@@ -16,9 +16,9 @@ export default function ManageBoard({ header, dataSets, dataField, action, optio
         paddings: `${!noPadding ? "pt-7.5 pb-60 px-2 xs:pl-4 xl:pl-7.5 xl:pb-7.5 " : ""} `,
         styles: "overflow-y-scroll",
     };
-    return (_jsxs(Board, { action: action, buttons: buttons, options: {
-            ...options,
+    return (_jsxs(Board, { action: action, buttons: buttons, option: {
+            ...option,
             isRounded: true,
-        }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(DataField.Board, { id: id, dataField: dataField }), _jsx("div", { className: cn(container), children: _jsx(Action.Replace, { actions: action?.replaces, children: dataSets.map(({ titles, items, renderItem, interaction }, index) => (_jsxs(Shelf.Wrap, { titles: titles, options: { gap: "x" }, className: className, children: [items &&
+        }, children: [header && _jsx(BoardHeader, { ...header }), dataField && _jsx(DataField.Board, { id: id, dataField: dataField }), _jsx("div", { className: cn(container), children: _jsx(Action.Replace, { actions: action?.replaces, children: dataSets.map(({ titles, items, renderItem, interaction }, index) => (_jsxs(Shelf.Wrap, { titles: titles, option: { gap: "x" }, className: className, children: [items &&
                                 sortByOrder({ items, orders })?.map((item) => renderItem(item)), interaction] }, id + index))) }) })] }));
 }

package/board/template/PaperBoard.d.ts

@@ -1,2 +1,2 @@
 import { PaperBoardProps } from "../../interface/Board";
-export default function PaperBoard<B>({ children, debug, options, }: PaperBoardProps<B>): import("react/jsx-runtime").JSX.Element;
+export default function PaperBoard<B>({ children, debug, option, }: PaperBoardProps<B>): import("react/jsx-runtime").JSX.Element;

package/board/template/PaperBoard.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Board } from "../design/Board.design";
-export default function PaperBoard({ children, debug, options, }) {
-    const { className } = options ?? {};
+export default function PaperBoard({ children, debug, option, }) {
+    const { className } = option ?? {};
     const container = {
         displays: "flex flex-col gap-7.5",
     };
-    return (_jsx(Board, { options: { width: "full", height: "full", isRounded: false, className }, debug: debug, children: _jsx("div", { className: cn(container), children: children }) }));
+    return (_jsx(Board, { option: { width: "full", height: "full", isRounded: false, className }, debug: debug, children: _jsx("div", { className: cn(container), children: children }) }));
 }

package/card/design/Card.design.d.ts

@@ -1,2 +1,2 @@
 import { CardProps } from "../../interface/Card";
-export default function CardDesign({ header, children, options, debug, }: CardProps): import("react/jsx-runtime").JSX.Element;
+export default function CardDesign({ header, children, option, debug, }: CardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/Card.design.js

@@ -7,28 +7,30 @@ const widthSize = {
     "2xs": "w-53.75",
     xs: "w-full md:w-60",
     sm: "w-full md:w-90",
-    md: "w-full md:w-112.5",
-    lg: "w-full lg:w-127.5",
+    md: "w-full md:w-112.5", // 450px
+    lg: "w-full lg:w-127.5", // 510px
     xl: "w-full lg:w-187.5",
     "2xl": "w-full lg:w-247.5",
     full: "w-full",
     auto: "w-auto",
 };
 const heightSize = {
+    "4xs": "h-21",
     "3xs": "h-30",
     "2xs": "h-40",
     xs: "h-45",
     sm: "h-52.5",
     md: "h-67.5",
-    lg: "h-67.5",
+    lg: "h-112.5",
     xl: "h-125.5",
-    "2xl": "",
+    "2xl": "h-127.5",
+    "3xl": "h-138.5",
     full: "h-full",
     auto: "h-auto min-h-80",
 };
-export default function CardDesign({ header, children, options, debug, }) {
+export default function CardDesign({ header, children, option, debug, }) {
     const { setIsOwn } = useActionStore();
-    const { className, boundary, rounded, height, width, text, background, onClick, onMouse, overflow, } = options ?? {};
+    const { className, boundary, rounded, height, width, text, background, onClick, onMouse, overflow, } = option ?? {};
     const container = {
         positions: "relative",
         sizes: `${widthSize[width ?? "sm"]} ${heightSize[height ?? "xs"]}`,

package/card/design/InfoCard.design.d.ts

@@ -1,2 +1,2 @@
 import { InfoCardProps } from "../../interface/Card";
-export declare function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, image, options, children, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, image, option, children, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/InfoCard.design.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import Card from "./Card.design";
-export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, image, options, children, }) {
-    const { titleBorder, text } = options ?? {};
+export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, image, option, children, }) {
+    const { titleBorder, text } = option ?? {};
     const container = {
         displays: "flex flex-col",
         paddings: "pt-5 px-5",
@@ -20,5 +20,5 @@ export function InfoCardDesign({ titles: { title, subtitle }, topRight, debug, i
             displays: "flex flex-col-reverse",
         },
     };
-    return (_jsxs(Card, { options: { ...options, className: cn(container) }, debug: debug, children: [_jsxs("div", { className: cn(topBox.container), children: [_jsxs("div", { className: "text-gray-dim ", children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }), topRight] }), image && (_jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: image }) }) })), children] }));
+    return (_jsxs(Card, { option: { ...option, className: cn(container) }, debug: debug, children: [_jsxs("div", { className: cn(topBox.container), children: [_jsxs("div", { className: "text-gray-dim ", children: [_jsx("div", { className: cn(topBox.titleText), children: title }), _jsx("div", { className: cn(topBox.subtitleText), children: subtitle ?? "" })] }), topRight] }), image && (_jsx("div", { className: "absolute right-5 top-5 w-22.5 h-22.5", children: _jsx("div", { className: "relative h-full w-full rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md ", src: image }) }) })), children] }));
 }

package/card/design/NavCard.design.d.ts

@@ -1,2 +1,2 @@
 import { NavCardProps } from "../../interface";
-export default function NavCardDesign({ titles, options }: NavCardProps): import("react/jsx-runtime").JSX.Element;
+export default function NavCardDesign({ titles, option }: NavCardProps): import("react/jsx-runtime").JSX.Element;

package/card/design/NavCard.design.js

@@ -3,9 +3,9 @@ import { Label } from "../../widget";
 import { LineBreaks } from "../../text";
 import { cn } from "../../util";
 import Card from "./Card.design";
-export default function NavCardDesign({ titles, options }) {
+export default function NavCardDesign({ titles, option }) {
     const { title, subtitle, color, titleColor, subtitleColor } = titles;
-    const { width, image, buttonInLay } = options ?? {};
+    const { width, image, buttonInLay } = option ?? {};
     const flag = !buttonInLay && width === "xl";
     const textBox = {
         container: {
@@ -28,7 +28,7 @@ export default function NavCardDesign({ titles, options }) {
         positions: image?.position ?? "bottom-0 right-0",
         sizes: image?.size,
     };
-    return (_jsxs(Card, { options: options, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: cn(textBox.subtitle), texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, options: {
+    return (_jsxs(Card, { option: option, children: [_jsxs("div", { className: cn(textBox.container), children: [_jsx("div", { className: cn(textBox.title), children: title }), _jsx(LineBreaks, { className: cn(textBox.subtitle), texts: subtitle ?? "" })] }), buttonInLay && (_jsx(Label.Button, { title: buttonInLay.title, onClick: buttonInLay.onClick, option: {
                     disabled: buttonInLay.disabled,
                     className: "absolute bottom-7.5 left-7.5",
                     background: buttonInLay?.background,

package/card/design/RollCard.design.js

@@ -22,7 +22,7 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
         sizes: "h-full",
         styles: isFixed && "hidden",
     };
-    return (_jsxs(Card, { options: {
+    return (_jsxs(Card, { option: {
             width: "2xl",
             height: !isFixed && isOpen ? "xs" : "3xs",
             background: isDisabled || flag ? "bg-green-dark/10" : "bg-white",
@@ -33,7 +33,7 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
                                             ? "추가됨"
                                             : "수정하기"
                                         : "접수중"
-                                    : "접수 완료", options: {
+                                    : "접수 완료", option: {
                                     background: isDisabled || flag ? "bg-green-dark" : "bg-green-dark/10",
                                     text: isDisabled || flag ? "text-white" : "bg-green-dark",
                                 } }), _jsx(Action.Replace, { actions: [

package/card/design/TableCard.design.d.ts

@@ -1,2 +1,2 @@
 import { TableCardProps } from "../../interface";
-export default function TableCardDesign<T>({ dataSet, dataField, options, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;
+export default function TableCardDesign<T>({ dataSet, dataField, option, }: TableCardProps<T>): import("react/jsx-runtime").JSX.Element;

package/card/design/TableCard.design.js

@@ -4,21 +4,21 @@ import { useActionStore } from "../../store";
 import { cn, sortByOrder } from "../../util";
 import Card from "./Card.design";
 import { DataField, Action, Row } from "../..";
-export default function TableCardDesign({ dataSet, dataField, options, }) {
-    const { width, height, padding, boundary } = options ?? {};
+export default function TableCardDesign({ dataSet, dataField, option, }) {
+    const { width, height, padding, boundary } = option ?? {};
     const { order } = useActionStore();
     const id = useId();
     const orders = order[id] ?? [];
     const container = {
-        paddings: padding ?? "pt-4 pb-14",
-        className: options?.className,
+        className: option?.className,
+        paddings: padding ?? "pb-10",
     };
-    return (_jsx(Card, { header: !options?.noHeader && _jsx(DataField.Card, { id: id, dataField: dataField }), options: {
+    return (_jsx(Card, { header: !option?.noHeader && _jsx(DataField.Card, { id: id, dataField: dataField }), option: {
             boundary,
             className: cn(container),
             width: width ?? "lg",
-            height: height ?? "lg",
+            height: height ?? "3xl",
             overflow: "overflow-y-scroll overflow-x-hidden",
             noPadding: true,
-        }, children: _jsx(Action.Replace, { actions: dataSet?.replaces, children: sortByOrder({ items: dataSet?.items, orders }).map((item, index) => dataSet.renderItem ? (dataSet.renderItem(item)) : (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: options?.rowHeight, noHover: options?.noHover, noPadding: options?.noRowPadding }, id + index))) }) }));
+        }, children: _jsx(Action.Replace, { actions: dataSet?.replaces, children: sortByOrder({ items: dataSet?.items, orders }).map((item, index) => dataSet.renderItem ? (dataSet.renderItem(item)) : (_jsx(Row.Card, { item: item, onClick: () => dataSet.onClick?.(item), dataField: dataField, height: option?.rowHeight, noHover: option?.noHover, noPadding: option?.noRowPadding }, id + index))) }) }));
 }

package/card/index.d.ts

@@ -1,5 +1,6 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
+export { default as ConfirmCard } from "./template/ConfirmCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";

package/card/index.js

@@ -1,5 +1,6 @@
 export { default as AddCard } from "./template/AddCard";
 export { default as ChartCard } from "./template/ChartCard";
+export { default as ConfirmCard } from "./template/ConfirmCard";
 export { default as InfoCard } from "./template/InfoCard";
 export { default as NavCard } from "./template/NavCard";
 export { default as ProgressCard } from "./template/ProgressCard";

package/card/template/AddCard.d.ts

@@ -1,2 +1,2 @@
 import { AddCardProps } from "../../interface";
-export default function AddCard({ title, icon, onClick, options, }: AddCardProps): import("react/jsx-runtime").JSX.Element;
+export default function AddCard({ title, icon, onClick, option, }: AddCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/AddCard.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import Card from "../design/Card.design";
-export default function AddCard({ title, icon, onClick, options, }) {
-    const { width } = options ?? {};
+export default function AddCard({ title, icon, onClick, option, }) {
+    const { width } = option ?? {};
     const container = {
         displays: "flex flex-col justify-center items-center gap-2",
         text: "text-xs",
@@ -13,5 +13,5 @@ export default function AddCard({ title, icon, onClick, options, }) {
         sizes: "w-9 h-9",
         styles: "bg-gray-light rounded-full",
     };
-    return (_jsxs(Card, { options: { width, className: cn(container), onClick }, children: [icon && (_jsx("div", { className: cn(iconBody), children: _jsx("img", { src: icon }) })), title && _jsx("div", { children: title })] }));
+    return (_jsxs(Card, { option: { width, className: cn(container), onClick }, children: [icon && (_jsx("div", { className: cn(iconBody), children: _jsx("img", { src: icon }) })), title && _jsx("div", { children: title })] }));
 }

package/card/template/ChartCard.d.ts

@@ -1,2 +1,2 @@
 import { ChartCardProps } from "../../interface/Card";
-export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, options, average, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;
+export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, option, average, }: ChartCardProps): import("react/jsx-runtime").JSX.Element;

package/card/template/ChartCard.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Area, Bar, ComposedChart, Legend, Line, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis, } from "recharts";
 import Card from "../design/Card.design";
-export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, options, average, }) {
-    const { width, height } = options ?? {};
-    return (_jsxs(Card, { options: {
+export default function ChartCard({ data, xAxis, yAxis, lines, bars, areas, option, average, }) {
+    const { width, height } = option ?? {};
+    return (_jsxs(Card, { option: {
             className: "pt-4 pr-4",
             width: width ?? "full",
             height: height ?? "lg",

package/card/template/ConfirmCard/index.d.ts

@@ -0,0 +1,9 @@
+import { ActionProps, LabelWidget, Titles } from "../../../interface";
+interface ConfirmCardProps {
+    titles: Titles;
+    action?: Omit<ActionProps, "shows">;
+    children?: React.ReactNode;
+    buttons: [LabelWidget, LabelWidget];
+}
+export default function ConfirmCard(props: ConfirmCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/card/template/ConfirmCard/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../util";
+import { LineBreaks, Action, Label } from "../../..";
+import CardDesign from "../../design/Card.design";
+export default function ConfirmCard(props) {
+    const { action } = props ?? {};
+    return (_jsxs(CardDesign, { option: {
+            width: "md",
+            height: "lg",
+            className: "p-5",
+        }, children: [_jsx(Header, { titles: props.titles }), _jsx(Action.Replace, { actions: action?.replaces, children: props.children }), _jsx("div", { className: "absolute bottom-5 left-5 flex justify-between gap-2.5", children: props.buttons.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: { ...option, width: "lg", height: "sm" } }, title))) })] }));
+}
+function Header({ titles }) {
+    const titleBox = {
+        displays: "flex flex-col items-end",
+        sizes: "w-full",
+    };
+    return (_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-xl leading-none font-pretendard-bold", children: titles.title }), _jsx("div", { className: "bg-gray-light w-13.75 h-2 mt-3" }), _jsx(LineBreaks, { texts: titles.subtitle, className: "mt-5 text-base leading-none text-end font-pretendard-bold" })] }));
+}

package/card/template/InfoCard/Academy.js

@@ -3,13 +3,13 @@ import { InfoCardDesign } from "../../design/InfoCard.design";
 import SVG from "../../../asset/SVG";
 import { Label } from "../../../widget";
 function Academy({ titles, data, buttons }) {
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, option: {
             titleBorder: "border-green-dark",
             background: "",
             boundary: "",
             width: "xs",
             height: "md",
-        }, children: _jsxs("div", { className: "mt-2.5 flex flex-col gap-2.5", children: [_jsx("div", { className: "w-full", children: data.address }), _jsx("div", { className: "flex gap-2.5", children: buttons.map(({ title, onClick }, index) => (_jsx(Label.Button, { title: title, onClick: onClick, options: {
+        }, children: _jsxs("div", { className: "mt-2.5 flex flex-col gap-2.5", children: [_jsx("div", { className: "w-full", children: data.address }), _jsx("div", { className: "flex gap-2.5", children: buttons.map(({ title, onClick }, index) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
                             background: !index ? "bg-gray-medium" : "bg-green-dark",
                             text: "text-white",
                             width: "sm",
@@ -17,9 +17,9 @@ function Academy({ titles, data, buttons }) {
                         } }, index))) })] }) }));
 }
 function Digital({ image, data }) {
-    return (_jsx(InfoCardDesign, { options: {
+    return (_jsx(InfoCardDesign, { option: {
             width: "md",
-            height: "lg",
+            height: "md",
             titleBorder: "border-crimson-burgundy",
             boundary: "border-2 border-crimson-burgundy",
         }, titles: {

package/card/template/InfoCard/Exam.d.ts

@@ -12,5 +12,5 @@ interface Data {
 export interface ExamProps extends Omit<InfoCardProps, "children"> {
     data: Data;
 }
-export default function Exam({ titles, data, options }: ExamProps): import("react/jsx-runtime").JSX.Element;
+export default function Exam({ titles, data, option }: ExamProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/card/template/InfoCard/Exam.js

@@ -3,19 +3,19 @@ import { Label } from "../../../widget";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 import { label } from "./static/label";
-export default function Exam({ titles, data, options }) {
+export default function Exam({ titles, data, option }) {
     const { button, isPublic, manager, examDate, endDate } = data;
-    const { onClick, titleBorder } = options ?? {};
+    const { onClick, titleBorder } = option ?? {};
     const container = {
         positions: "relative",
         displays: "flex flex-col justify-between mt-2.5",
         sizes: "h-19.25 w-full",
     };
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, option: {
             titleBorder: titleBorder ?? "border-red-crimson",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-pretendard-bold ", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-xs", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-xs", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] })] }), _jsx(Label.Button, { title: button.title, hoverTitle: button.hoverTitle, onClick: onClick, options: {
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-4 font-pretendard-bold ", children: [manager, " / ", isPublic ? "공개시험" : "비공개시험"] }), _jsxs("div", { children: [_jsxs("div", { className: "text-xs", children: ["\uC811\uC218\uB9C8\uAC10: ", endDate] }), _jsxs("div", { className: "text-xs", children: ["\uC2DC\uD5D8\uC77C: ", examDate] })] })] }), _jsx(Label.Button, { title: button.title, hoverTitle: button.hoverTitle, onClick: onClick, option: {
                         width: "sm",
                         height: "xs",
                         className: cn(label),

package/card/template/InfoCard/ExamData.js

@@ -22,7 +22,7 @@ function ExamDataREG({ titles, data }) {
             "text-gray-dim border-t border-dashed border-gray-dim pt-1",
         ],
     ];
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, option: {
             width: "xs",
             height: "md",
             titleBorder: "border-crimson-burgundy",
@@ -43,7 +43,7 @@ function ExamDataOLY({ titles, data }) {
         displays: "flex flex-col justify-between items-center",
         sizes: "h-20",
     };
-    return (_jsx(InfoCardDesign, { titles: titles, options: { width: "xs", height: "md", titleBorder: "border-green-dark" }, children: _jsx(Action.Replace, { actions: [
+    return (_jsx(InfoCardDesign, { titles: titles, option: { width: "xs", height: "md", titleBorder: "border-green-dark" }, children: _jsx(Action.Replace, { actions: [
                 [
                     !data,
                     _jsx(NoData.Sign, { script: "\uC774\uC804 \uAE30\uB85D\uC774 \uC5C6\uC2B5\uB2C8\uB2E4.", color: "#105652", className: "text-[#105652] mt-12" }),

package/card/template/InfoCard/Finance.js

@@ -10,7 +10,7 @@ export default function Finance({ titles, data, }) {
     return (_jsx(InfoCardDesign, { titles: {
             title: titles.title,
             subtitle: titles.subtitle,
-        }, options: {
+        }, option: {
             titleBorder: "border-green-dark",
             width: "2xl",
             height: "xl",

package/card/template/InfoCard/Grade.js

@@ -15,11 +15,11 @@ export default function Grade({ titles, image, data }) {
         styles: "bg-white-off text-sm rounded-md",
         text: data.levelColor,
     };
-    return (_jsx(InfoCardDesign, { titles: titles, image: image, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, image: image, option: {
             titleBorder: "border-blue-navy",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: cn(levelBox), children: data.levelString }), _jsxs("span", { className: "text-sm", children: [data.position, ", ", data.age, "\uC138"] })] }), _jsxs("div", { className: "absolute bottom-0 left-0 flex items-end gap-8 text-blue-navy", children: [_jsxs("div", { className: "w-20 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "w-14 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.grade }), _jsx("div", { children: "\uB4F1\uAE09" })] })] })] }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: () => { }, options: {
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: cn(levelBox), children: data.levelString }), _jsxs("span", { className: "text-sm", children: [data.position, ", ", data.age, "\uC138"] })] }), _jsxs("div", { className: "absolute bottom-0 left-0 flex items-end gap-8 text-blue-navy", children: [_jsxs("div", { className: "w-20 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.score }), _jsx("div", { children: "\uC810" })] }), _jsxs("div", { className: "w-14 h-12 flex justify-end items-end", children: [_jsx("div", { className: "leading-none text-4xl font-pretendard-bold", children: data.grade }), _jsx("div", { children: "\uB4F1\uAE09" })] })] })] }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: () => { }, option: {
                         width: "sm",
                         height: "xs",
                         text: "text-white hover:text-blue-navy",

package/card/template/InfoCard/Item.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { InfoCardDesign } from "../../design/InfoCard.design";
 export default function Item({ titles, data }) {
     const { item } = data;
-    return (_jsx(InfoCardDesign, { titles: titles, options: {
+    return (_jsx(InfoCardDesign, { titles: titles, option: {
             titleBorder: "border-blue-navy",
             width: "xs",
             height: "xs",

package/card/template/InfoCard/PersonalInformation.js

@@ -34,13 +34,13 @@ export default function PersonalInformation({ titles, theme = "red", button, dat
             fonts: "text-xs text-gray-dim",
         },
     };
-    return (_jsx(InfoCardDesign, { titles: titles, topRight: _jsxs("div", { className: "flex items-end gap-2.5", children: [_jsx("div", { className: `text-sm underline leading-none ${color.text[theme]}`, children: "\uC218\uC815\uD558\uAE30" }), _jsxs("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_3677_836)", children: [_jsx("path", { d: "M18.3495 25H1.3316C1.14591 25 1 24.8525 1 24.6647V4.61373C1 4.53326 1.03979 4.43938 1.09285 4.38573L5.33737 0.0938841C5.33737 0.0938841 5.48328 0 5.56286 0H18.3362C18.5219 0 18.6678 0.147532 18.6678 0.3353V9.2677C18.6678 9.45547 18.5219 9.603 18.3362 9.603C18.1505 9.603 18.0046 9.45547 18.0046 9.2677V0.670601H5.70877L1.66321 4.76127V24.3294H18.0179V15.8396C18.0179 15.6518 18.1638 15.5043 18.3495 15.5043C18.5352 15.5043 18.6811 15.6518 18.6811 15.8396V24.6647C18.6811 24.8525 18.5352 25 18.3495 25Z", fill: color[theme] }), _jsx("path", { d: "M1.33158 4.9489C1.252 4.9489 1.15915 4.92208 1.09283 4.85502C0.960187 4.7209 0.960187 4.50631 1.09283 4.3856L5.33735 0.0937542C5.46999 -0.040366 5.68222 -0.040366 5.80159 0.0937542C5.93424 0.227874 5.93424 0.442467 5.80159 0.563175L1.57034 4.85502C1.57034 4.85502 1.42443 4.9489 1.33158 4.9489Z", fill: color[theme] }), _jsx("path", { d: "M5.56286 4.96245H1.3316C1.14591 4.94903 1 4.8015 1 4.61373C1 4.42597 1.14591 4.27843 1.3316 4.27843H5.23126V0.3353C5.23126 0.147532 5.37716 0 5.56286 0C5.74856 0 5.89446 0.147532 5.89446 0.3353V4.62715C5.89446 4.72103 5.85467 4.8015 5.80161 4.86856C5.74856 4.93562 5.65571 4.96245 5.56286 4.96245Z", fill: color[theme] }), _jsx("path", { d: "M13.4019 18.0259C13.3091 18.0259 13.2295 17.9857 13.1632 17.932C13.0836 17.8516 13.0571 17.7443 13.0703 17.637L13.4417 15.719C13.4417 15.719 13.4815 15.5983 13.5346 15.5447L20.233 8.77162C20.233 8.77162 20.3789 8.67773 20.4717 8.67773C20.5646 8.67773 20.6442 8.71797 20.7105 8.77162L22.2491 10.3274C22.3818 10.4615 22.3818 10.6761 22.2491 10.7968L15.5507 17.5699C15.5507 17.5699 15.4446 17.6504 15.3783 17.6638L13.4815 18.0393C13.4815 18.0393 13.4417 18.0393 13.4152 18.0393L13.4019 18.0259ZM14.0784 15.9336L13.8264 17.2614L15.1395 17.0066L21.5328 10.542L20.4717 9.46904L14.0784 15.9336Z", fill: color[theme] }), _jsx("path", { d: "M22.7665 10.1129C22.6736 10.1129 22.594 10.0726 22.5277 10.019L20.9891 8.46318C20.8564 8.32906 20.8564 8.11447 20.9891 7.99376L21.891 7.08174C22.0104 6.96103 22.2359 6.96103 22.3553 7.08174L23.8939 8.63754C23.8939 8.63754 23.9868 8.78507 23.9868 8.87895C23.9868 8.97284 23.947 9.05331 23.8939 9.12037L22.992 10.0324C22.992 10.0324 22.846 10.1263 22.7532 10.1263L22.7665 10.1129ZM21.7053 8.22176L22.7665 9.29472L23.2042 8.85213L22.143 7.77917L21.7053 8.22176Z", fill: color[theme] }), _jsx("path", { d: "M18.4689 12.9026C18.3893 12.9026 18.2964 12.8757 18.2301 12.8087C18.0975 12.6745 18.0975 12.46 18.2301 12.3392L21.0023 9.53614C21.1349 9.40202 21.3472 9.40202 21.4665 9.53614C21.5992 9.67026 21.5992 9.88485 21.4665 10.0056L18.6943 12.8087C18.6943 12.8087 18.5484 12.9026 18.4556 12.9026H18.4689Z", fill: color[theme] }), _jsx("path", { d: "M15.2987 17.6504C15.2192 17.6504 15.1263 17.6235 15.06 17.5565L13.5214 16.0007C13.3887 15.8666 13.3887 15.652 13.5214 15.5313C13.654 15.3971 13.8662 15.3971 13.9856 15.5313L15.5242 17.087C15.6569 17.2212 15.6569 17.4358 15.5242 17.5565C15.4579 17.6235 15.3783 17.6504 15.2855 17.6504H15.2987Z", fill: color[theme] }), _jsx("path", { d: "M15.763 8.30244H3.90485C3.71915 8.30244 3.57324 8.1549 3.57324 7.96714C3.57324 7.77937 3.71915 7.63184 3.90485 7.63184H15.763C15.9487 7.63184 16.0946 7.77937 16.0946 7.96714C16.0946 8.1549 15.9487 8.30244 15.763 8.30244Z", fill: color[theme] }), _jsx("path", { d: "M15.763 11.32H3.90485C3.71915 11.32 3.57324 11.1725 3.57324 10.9847C3.57324 10.7969 3.71915 10.6494 3.90485 10.6494H15.763C15.9487 10.6494 16.0946 10.7969 16.0946 10.9847C16.0946 11.1725 15.9487 11.32 15.763 11.32Z", fill: color[theme] }), _jsx("path", { d: "M13.1102 14.3513H3.90485C3.71915 14.3513 3.57324 14.2037 3.57324 14.016C3.57324 13.8282 3.71915 13.6807 3.90485 13.6807H13.1102C13.2958 13.6807 13.4418 13.8282 13.4418 14.016C13.4418 14.2037 13.2958 14.3513 13.1102 14.3513Z", fill: color[theme] }), _jsx("path", { d: "M11.7837 17.3688H3.90485C3.71915 17.3688 3.57324 17.2213 3.57324 17.0335C3.57324 16.8458 3.71915 16.6982 3.90485 16.6982H11.7837C11.9694 16.6982 12.1153 16.8458 12.1153 17.0335C12.1153 17.2213 11.9694 17.3688 11.7837 17.3688Z", fill: color[theme] }), _jsx("path", { d: "M15.763 20.3864H3.90485C3.71915 20.3864 3.57324 20.2389 3.57324 20.0511C3.57324 19.8634 3.71915 19.7158 3.90485 19.7158H15.763C15.9487 19.7158 16.0946 19.8634 16.0946 20.0511C16.0946 20.2389 15.9487 20.3864 15.763 20.3864Z", fill: color[theme] })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_3677_836", children: _jsx("rect", { width: "25", height: "25", fill: "white" }) }) })] })] }), options: {
+    return (_jsx(InfoCardDesign, { titles: titles, topRight: _jsxs("div", { className: "flex items-end gap-2.5", children: [_jsx("div", { className: `text-sm underline leading-none ${color.text[theme]}`, children: "\uC218\uC815\uD558\uAE30" }), _jsxs("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_3677_836)", children: [_jsx("path", { d: "M18.3495 25H1.3316C1.14591 25 1 24.8525 1 24.6647V4.61373C1 4.53326 1.03979 4.43938 1.09285 4.38573L5.33737 0.0938841C5.33737 0.0938841 5.48328 0 5.56286 0H18.3362C18.5219 0 18.6678 0.147532 18.6678 0.3353V9.2677C18.6678 9.45547 18.5219 9.603 18.3362 9.603C18.1505 9.603 18.0046 9.45547 18.0046 9.2677V0.670601H5.70877L1.66321 4.76127V24.3294H18.0179V15.8396C18.0179 15.6518 18.1638 15.5043 18.3495 15.5043C18.5352 15.5043 18.6811 15.6518 18.6811 15.8396V24.6647C18.6811 24.8525 18.5352 25 18.3495 25Z", fill: color[theme] }), _jsx("path", { d: "M1.33158 4.9489C1.252 4.9489 1.15915 4.92208 1.09283 4.85502C0.960187 4.7209 0.960187 4.50631 1.09283 4.3856L5.33735 0.0937542C5.46999 -0.040366 5.68222 -0.040366 5.80159 0.0937542C5.93424 0.227874 5.93424 0.442467 5.80159 0.563175L1.57034 4.85502C1.57034 4.85502 1.42443 4.9489 1.33158 4.9489Z", fill: color[theme] }), _jsx("path", { d: "M5.56286 4.96245H1.3316C1.14591 4.94903 1 4.8015 1 4.61373C1 4.42597 1.14591 4.27843 1.3316 4.27843H5.23126V0.3353C5.23126 0.147532 5.37716 0 5.56286 0C5.74856 0 5.89446 0.147532 5.89446 0.3353V4.62715C5.89446 4.72103 5.85467 4.8015 5.80161 4.86856C5.74856 4.93562 5.65571 4.96245 5.56286 4.96245Z", fill: color[theme] }), _jsx("path", { d: "M13.4019 18.0259C13.3091 18.0259 13.2295 17.9857 13.1632 17.932C13.0836 17.8516 13.0571 17.7443 13.0703 17.637L13.4417 15.719C13.4417 15.719 13.4815 15.5983 13.5346 15.5447L20.233 8.77162C20.233 8.77162 20.3789 8.67773 20.4717 8.67773C20.5646 8.67773 20.6442 8.71797 20.7105 8.77162L22.2491 10.3274C22.3818 10.4615 22.3818 10.6761 22.2491 10.7968L15.5507 17.5699C15.5507 17.5699 15.4446 17.6504 15.3783 17.6638L13.4815 18.0393C13.4815 18.0393 13.4417 18.0393 13.4152 18.0393L13.4019 18.0259ZM14.0784 15.9336L13.8264 17.2614L15.1395 17.0066L21.5328 10.542L20.4717 9.46904L14.0784 15.9336Z", fill: color[theme] }), _jsx("path", { d: "M22.7665 10.1129C22.6736 10.1129 22.594 10.0726 22.5277 10.019L20.9891 8.46318C20.8564 8.32906 20.8564 8.11447 20.9891 7.99376L21.891 7.08174C22.0104 6.96103 22.2359 6.96103 22.3553 7.08174L23.8939 8.63754C23.8939 8.63754 23.9868 8.78507 23.9868 8.87895C23.9868 8.97284 23.947 9.05331 23.8939 9.12037L22.992 10.0324C22.992 10.0324 22.846 10.1263 22.7532 10.1263L22.7665 10.1129ZM21.7053 8.22176L22.7665 9.29472L23.2042 8.85213L22.143 7.77917L21.7053 8.22176Z", fill: color[theme] }), _jsx("path", { d: "M18.4689 12.9026C18.3893 12.9026 18.2964 12.8757 18.2301 12.8087C18.0975 12.6745 18.0975 12.46 18.2301 12.3392L21.0023 9.53614C21.1349 9.40202 21.3472 9.40202 21.4665 9.53614C21.5992 9.67026 21.5992 9.88485 21.4665 10.0056L18.6943 12.8087C18.6943 12.8087 18.5484 12.9026 18.4556 12.9026H18.4689Z", fill: color[theme] }), _jsx("path", { d: "M15.2987 17.6504C15.2192 17.6504 15.1263 17.6235 15.06 17.5565L13.5214 16.0007C13.3887 15.8666 13.3887 15.652 13.5214 15.5313C13.654 15.3971 13.8662 15.3971 13.9856 15.5313L15.5242 17.087C15.6569 17.2212 15.6569 17.4358 15.5242 17.5565C15.4579 17.6235 15.3783 17.6504 15.2855 17.6504H15.2987Z", fill: color[theme] }), _jsx("path", { d: "M15.763 8.30244H3.90485C3.71915 8.30244 3.57324 8.1549 3.57324 7.96714C3.57324 7.77937 3.71915 7.63184 3.90485 7.63184H15.763C15.9487 7.63184 16.0946 7.77937 16.0946 7.96714C16.0946 8.1549 15.9487 8.30244 15.763 8.30244Z", fill: color[theme] }), _jsx("path", { d: "M15.763 11.32H3.90485C3.71915 11.32 3.57324 11.1725 3.57324 10.9847C3.57324 10.7969 3.71915 10.6494 3.90485 10.6494H15.763C15.9487 10.6494 16.0946 10.7969 16.0946 10.9847C16.0946 11.1725 15.9487 11.32 15.763 11.32Z", fill: color[theme] }), _jsx("path", { d: "M13.1102 14.3513H3.90485C3.71915 14.3513 3.57324 14.2037 3.57324 14.016C3.57324 13.8282 3.71915 13.6807 3.90485 13.6807H13.1102C13.2958 13.6807 13.4418 13.8282 13.4418 14.016C13.4418 14.2037 13.2958 14.3513 13.1102 14.3513Z", fill: color[theme] }), _jsx("path", { d: "M11.7837 17.3688H3.90485C3.71915 17.3688 3.57324 17.2213 3.57324 17.0335C3.57324 16.8458 3.71915 16.6982 3.90485 16.6982H11.7837C11.9694 16.6982 12.1153 16.8458 12.1153 17.0335C12.1153 17.2213 11.9694 17.3688 11.7837 17.3688Z", fill: color[theme] }), _jsx("path", { d: "M15.763 20.3864H3.90485C3.71915 20.3864 3.57324 20.2389 3.57324 20.0511C3.57324 19.8634 3.71915 19.7158 3.90485 19.7158H15.763C15.9487 19.7158 16.0946 19.8634 16.0946 20.0511C16.0946 20.2389 15.9487 20.3864 15.763 20.3864Z", fill: color[theme] })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_3677_836", children: _jsx("rect", { width: "25", height: "25", fill: "white" }) }) })] })] }), option: {
             titleBorder: color.border[theme],
             width: "md",
             height: "md",
             background: color.background[theme],
             boundary: `border-3 ${color.border[theme]}`,
-        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsx("div", { className: cn(body.belong), children: data.info }), _jsx("div", { className: cn(body.username), children: data.username }), _jsx("div", { className: cn(body.name), children: data.name }), _jsxs("div", { className: cn(body.subInfo), children: [_jsx("div", { children: data.email }), _jsx("div", { children: data.phone })] })] }), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, options: {
+        }, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsx("div", { className: cn(body.belong), children: data.info }), _jsx("div", { className: cn(body.username), children: data.username }), _jsx("div", { className: cn(body.name), children: data.name }), _jsxs("div", { className: cn(body.subInfo), children: [_jsx("div", { children: data.email }), _jsx("div", { children: data.phone })] })] }), button && (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
                         width: "md",
                         background: color.background.button[theme],
                         text: "text-white",