@edu-tosel/design 1.0.154 → 1.0.156

package/asset/SVG.d.ts

@@ -1,13 +1,11 @@
 import Close from "./svg/Close";
 import Direction from "./svg/Direction";
 import Email from "./svg/Email";
-import { IconProps } from "./svg/Icon";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
 import Operation from "./svg/Operation";
 import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
-import { SymbolProps } from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
 declare const SVG: {
     TOSEL: typeof TOSEL;
@@ -17,13 +15,17 @@ declare const SVG: {
         Asc: () => import("react/jsx-runtime").JSX.Element;
         Desc: () => import("react/jsx-runtime").JSX.Element;
     };
+    Eye: {
+        Open: ({ onClick, className }: import("./svg/Eye").EyeProps) => import("react/jsx-runtime").JSX.Element;
+        Close: ({ onClick, className }: import("./svg/Eye").EyeProps) => import("react/jsx-runtime").JSX.Element;
+    };
     Email: typeof Email;
     Icon: {
-        Calendar: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
-        Notification: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
-        Search: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
-        Browser: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
-        Event: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
+        Calendar: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Notification: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Search: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Browser: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
+        Event: ({ size, onClick }: import("./svg/Icon").IconProps) => import("react/jsx-runtime").JSX.Element;
         Document: ({ theme }: {
             theme: "red" | "blue";
         }) => import("react/jsx-runtime").JSX.Element;
@@ -43,8 +45,8 @@ declare const SVG: {
     Phone: typeof Phone;
     Profile: typeof Profile;
     Symbol: {
-        LessThan: ({ className, onClick }: SymbolProps) => import("react/jsx-runtime").JSX.Element;
-        GreaterThan: ({ className, onClick }: SymbolProps) => import("react/jsx-runtime").JSX.Element;
+        LessThan: ({ className, onClick }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
+        GreaterThan: ({ className, onClick }: import("./svg/Symbol").SymbolProps) => import("react/jsx-runtime").JSX.Element;
     };
 };
 export default SVG;

package/asset/SVG.js

@@ -1,6 +1,7 @@
 import Close from "./svg/Close";
 import Direction from "./svg/Direction";
 import Email from "./svg/Email";
+import Eye from "./svg/Eye";
 import Icon from "./svg/Icon";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
@@ -13,6 +14,7 @@ const SVG = {
     TOSEL,
     Close,
     Direction,
+    Eye,
     Email,
     Icon,
     Image,

package/asset/SVG.tsx

@@ -1,19 +1,21 @@
 import Close from "./svg/Close";
 import Direction from "./svg/Direction";
 import Email from "./svg/Email";
-import Icon, { IconProps } from "./svg/Icon";
+import Eye from "./svg/Eye";
+import Icon from "./svg/Icon";
 import Image from "./svg/Image";
 import Notification from "./svg/Notification";
 import Operation from "./svg/Operation";
 import Phone from "./svg/Phone";
 import Profile from "./svg/Profile";
-import Symbol, { SymbolProps } from "./svg/Symbol";
+import Symbol from "./svg/Symbol";
 import TOSEL from "./svg/TOSEL";
 
 const SVG = {
   TOSEL,
   Close,
   Direction,
+  Eye,
   Email,
   Icon,
   Image,

package/asset/svg/Eye.d.ts

@@ -0,0 +1,12 @@
+import { OnClick } from "../../interface";
+export interface EyeProps {
+    onClick: OnClick;
+    className?: string;
+}
+declare function Open({ onClick, className }: EyeProps): import("react/jsx-runtime").JSX.Element;
+declare function Close({ onClick, className }: EyeProps): import("react/jsx-runtime").JSX.Element;
+declare const Eye: {
+    Open: typeof Open;
+    Close: typeof Close;
+};
+export default Eye;

package/asset/svg/Eye.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../util";
+function Open({ onClick, className = "" }) {
+    return (_jsxs("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#7F7F7F", className: cn(className, "size-6"), children: [_jsx("path", { d: "M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" }), _jsx("path", { fillRule: "evenodd", d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z", clipRule: "evenodd" })] }));
+}
+function Close({ onClick, className = "" }) {
+    return (_jsxs("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#7F7F7F", className: cn(className, "size-6"), children: [_jsx("path", { d: "M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" }), _jsx("path", { d: "M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" }), _jsx("path", { d: "M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" })] }));
+}
+const Eye = {
+    Open,
+    Close,
+};
+export default Eye;

package/asset/svg/Eye.tsx

@@ -0,0 +1,48 @@
+import { OnClick } from "../../interface";
+import { cn } from "../../util";
+
+export interface EyeProps {
+  onClick: OnClick;
+  className?: string;
+}
+function Open({ onClick, className = "" }: EyeProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#7F7F7F"
+      className={cn(className, "size-6")}
+    >
+      <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
+      <path
+        fillRule="evenodd"
+        d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 0 1 0-1.113ZM17.25 12a5.25 5.25 0 1 1-10.5 0 5.25 5.25 0 0 1 10.5 0Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+function Close({ onClick, className = "" }: EyeProps) {
+  return (
+    <svg
+      onClick={onClick}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="#7F7F7F"
+      className={cn(className, "size-6")}
+    >
+      <path d="M3.53 2.47a.75.75 0 0 0-1.06 1.06l18 18a.75.75 0 1 0 1.06-1.06l-18-18ZM22.676 12.553a11.249 11.249 0 0 1-2.631 4.31l-3.099-3.099a5.25 5.25 0 0 0-6.71-6.71L7.759 4.577a11.217 11.217 0 0 1 4.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113Z" />
+      <path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0 1 15.75 12ZM12.53 15.713l-4.243-4.244a3.75 3.75 0 0 0 4.244 4.243Z" />
+      <path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 0 0-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 0 1 6.75 12Z" />
+    </svg>
+  );
+}
+
+const Eye = {
+  Open,
+  Close,
+};
+
+export default Eye;

package/asset/svg/Icon.d.ts

@@ -1,5 +1,6 @@
-import { OnClick } from "../../interface";
+import { OnClick, Size } from "../../interface";
 export interface IconProps {
+    size?: Size;
     onClick?: OnClick;
 }
 declare const Icon: {
@@ -11,11 +12,11 @@ declare const Icon: {
     Document: typeof Document;
 };
 export default Icon;
-declare function Calendar({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
-declare function Notification({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
-declare function Search({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
-declare function Browser({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
-declare function Event({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Calendar({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Notification({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Search({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Browser({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare function Event({ size, onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
 declare function Document({ theme }: {
     theme: "blue" | "red";
 }): import("react/jsx-runtime").JSX.Element;

package/asset/svg/Icon.js

@@ -8,20 +8,20 @@ const Icon = {
     Document,
 };
 export default Icon;
-function Calendar({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function Calendar({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function Notification({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M14.8565 17.082C16.7197 16.8614 18.5504 16.4217 20.3105 15.772C18.8199 14.1208 17.9962 11.9745 17.9995 9.75V9C17.9995 7.4087 17.3674 5.88258 16.2421 4.75736C15.1169 3.63214 13.5908 3 11.9995 3C10.4082 3 8.88208 3.63214 7.75686 4.75736C6.63164 5.88258 5.9995 7.4087 5.9995 9V9.75C6.00252 11.9746 5.17849 14.121 3.6875 15.772C5.4205 16.412 7.2475 16.857 9.1425 17.082M14.8565 17.082C12.9585 17.3071 11.0405 17.3071 9.1425 17.082M14.8565 17.082C15.0006 17.5319 15.0364 18.0094 14.9611 18.4757C14.8857 18.942 14.7013 19.384 14.4229 19.7656C14.1444 20.1472 13.7798 20.4576 13.3587 20.6716C12.9376 20.8856 12.4719 20.9972 11.9995 20.9972C11.5271 20.9972 11.0614 20.8856 10.6403 20.6716C10.2192 20.4576 9.85457 20.1472 9.57612 19.7656C9.29767 19.384 9.11326 18.942 9.03791 18.4757C8.96256 18.0094 8.9984 17.5319 9.1425 17.082", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function Notification({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M14.8565 17.082C16.7197 16.8614 18.5504 16.4217 20.3105 15.772C18.8199 14.1208 17.9962 11.9745 17.9995 9.75V9C17.9995 7.4087 17.3674 5.88258 16.2421 4.75736C15.1169 3.63214 13.5908 3 11.9995 3C10.4082 3 8.88208 3.63214 7.75686 4.75736C6.63164 5.88258 5.9995 7.4087 5.9995 9V9.75C6.00252 11.9746 5.17849 14.121 3.6875 15.772C5.4205 16.412 7.2475 16.857 9.1425 17.082M14.8565 17.082C12.9585 17.3071 11.0405 17.3071 9.1425 17.082M14.8565 17.082C15.0006 17.5319 15.0364 18.0094 14.9611 18.4757C14.8857 18.942 14.7013 19.384 14.4229 19.7656C14.1444 20.1472 13.7798 20.4576 13.3587 20.6716C12.9376 20.8856 12.4719 20.9972 11.9995 20.9972C11.5271 20.9972 11.0614 20.8856 10.6403 20.6716C10.2192 20.4576 9.85457 20.1472 9.57612 19.7656C9.29767 19.384 9.11326 18.942 9.03791 18.4757C8.96256 18.0094 8.9984 17.5319 9.1425 17.082", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function Search({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function Search({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21.0008 21L15.8038 15.803M15.8038 15.803C17.2104 14.3965 18.0006 12.4887 18.0006 10.4995C18.0006 8.51035 17.2104 6.60262 15.8038 5.19605C14.3972 3.78947 12.4895 2.99927 10.5003 2.99927C8.51108 2.99927 6.60336 3.78947 5.19678 5.19605C3.79021 6.60262 3 8.51035 3 10.4995C3 12.4887 3.79021 14.3965 5.19678 15.803C6.60336 17.2096 8.51108 17.9998 10.5003 17.9998C12.4895 17.9998 14.3972 17.2096 15.8038 15.803Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
-function Browser({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M3 8.25V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H18.75C19.3467 20.25 19.919 20.0129 20.341 19.591C20.7629 19.169 21 18.5967 21 18V8.25M3 8.25V6C3 5.40326 3.23705 4.83097 3.65901 4.40901C4.08097 3.98705 4.65326 3.75 5.25 3.75H18.75C19.3467 3.75 19.919 3.98705 20.341 4.40901C20.7629 4.83097 21 5.40326 21 6V8.25M3 8.25H21M5.25 6H5.258V6.008H5.25V6ZM7.5 6H7.508V6.008H7.5V6ZM9.75 6H9.758V6.008H9.75V6Z", stroke: "white", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
+function Browser({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M3 8.25V18C3 18.5967 3.23705 19.169 3.65901 19.591C4.08097 20.0129 4.65326 20.25 5.25 20.25H18.75C19.3467 20.25 19.919 20.0129 20.341 19.591C20.7629 19.169 21 18.5967 21 18V8.25M3 8.25V6C3 5.40326 3.23705 4.83097 3.65901 4.40901C4.08097 3.98705 4.65326 3.75 5.25 3.75H18.75C19.3467 3.75 19.919 3.98705 20.341 4.40901C20.7629 4.83097 21 5.40326 21 6V8.25M3 8.25H21M5.25 6H5.258V6.008H5.25V6ZM7.5 6H7.508V6.008H7.5V6ZM9.75 6H9.758V6.008H9.75V6Z", stroke: "white", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) }));
 }
-function Event({ onClick }) {
-    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 11.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V11.25M12 4.875C12 4.35583 11.846 3.84831 11.5576 3.41663C11.2692 2.98495 10.8592 2.6485 10.3795 2.44982C9.89989 2.25114 9.37209 2.19915 8.86289 2.30044C8.35369 2.40173 7.88596 2.65173 7.51884 3.01885C7.15173 3.38596 6.90172 3.85369 6.80044 4.36289C6.69915 4.87209 6.75114 5.39989 6.94982 5.87954C7.1485 6.3592 7.48495 6.76917 7.91663 7.05761C8.34831 7.34605 8.85582 7.5 9.375 7.5H12M12 4.875V7.5M12 4.875C12 4.35583 12.154 3.84831 12.4424 3.41663C12.7308 2.98495 13.1408 2.6485 13.6205 2.44982C14.1001 2.25114 14.6279 2.19915 15.1371 2.30044C15.6463 2.40173 16.114 2.65173 16.4812 3.01885C16.8483 3.38596 17.0983 3.85369 17.1996 4.36289C17.3008 4.87209 17.2489 5.39989 17.0502 5.87954C16.8515 6.3592 16.5151 6.76917 16.0834 7.05761C15.6517 7.34605 15.1442 7.5 14.625 7.5H12M12 7.5V21M3.375 11.25H21.375C21.996 11.25 22.5 10.746 22.5 10.125V8.625C22.5 8.004 21.996 7.5 21.375 7.5H3.375C2.754 7.5 2.25 8.004 2.25 8.625V10.125C2.25 10.746 2.754 11.25 3.375 11.25Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+function Event({ size = "md", onClick }) {
+    return (_jsx("svg", { onClick: onClick, xmlns: "http://www.w3.org/2000/svg", width: size === "lg" ? 36 : 24, height: size === "lg" ? 36 : 24, viewBox: "0 0 24 24", fill: "none", children: _jsx("path", { d: "M21 11.25V19.5C21 19.8978 20.842 20.2794 20.5607 20.5607C20.2794 20.842 19.8978 21 19.5 21H5.25C4.85218 21 4.47064 20.842 4.18934 20.5607C3.90804 20.2794 3.75 19.8978 3.75 19.5V11.25M12 4.875C12 4.35583 11.846 3.84831 11.5576 3.41663C11.2692 2.98495 10.8592 2.6485 10.3795 2.44982C9.89989 2.25114 9.37209 2.19915 8.86289 2.30044C8.35369 2.40173 7.88596 2.65173 7.51884 3.01885C7.15173 3.38596 6.90172 3.85369 6.80044 4.36289C6.69915 4.87209 6.75114 5.39989 6.94982 5.87954C7.1485 6.3592 7.48495 6.76917 7.91663 7.05761C8.34831 7.34605 8.85582 7.5 9.375 7.5H12M12 4.875V7.5M12 4.875C12 4.35583 12.154 3.84831 12.4424 3.41663C12.7308 2.98495 13.1408 2.6485 13.6205 2.44982C14.1001 2.25114 14.6279 2.19915 15.1371 2.30044C15.6463 2.40173 16.114 2.65173 16.4812 3.01885C16.8483 3.38596 17.0983 3.85369 17.1996 4.36289C17.3008 4.87209 17.2489 5.39989 17.0502 5.87954C16.8515 6.3592 16.5151 6.76917 16.0834 7.05761C15.6517 7.34605 15.1442 7.5 14.625 7.5H12M12 7.5V21M3.375 11.25H21.375C21.996 11.25 22.5 10.746 22.5 10.125V8.625C22.5 8.004 21.996 7.5 21.375 7.5H3.375C2.754 7.5 2.25 8.004 2.25 8.625V10.125C2.25 10.746 2.754 11.25 3.375 11.25Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 }
 function Document({ theme }) {
     const color = {

package/asset/svg/Icon.tsx

@@ -1,7 +1,8 @@
-import { OnClick } from "../../interface";
+import { OnClick, Size } from "../../interface";
 import { cn } from "../../util";
 
 export interface IconProps {
+  size?: Size;
   onClick?: OnClick;
 }
 
@@ -16,13 +17,13 @@ const Icon = {
 
 export default Icon;
 
-function Calendar({ onClick }: IconProps) {
+function Calendar({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >
@@ -37,13 +38,13 @@ function Calendar({ onClick }: IconProps) {
   );
 }
 
-function Notification({ onClick }: IconProps) {
+function Notification({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >
@@ -58,13 +59,13 @@ function Notification({ onClick }: IconProps) {
   );
 }
 
-function Search({ onClick }: IconProps) {
+function Search({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >
@@ -79,13 +80,13 @@ function Search({ onClick }: IconProps) {
   );
 }
 
-function Browser({ onClick }: IconProps) {
+function Browser({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >
@@ -100,13 +101,13 @@ function Browser({ onClick }: IconProps) {
   );
 }
 
-function Event({ onClick }: IconProps) {
+function Event({ size = "md", onClick }: IconProps) {
   return (
     <svg
       onClick={onClick}
       xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
+      width={size === "lg" ? 36 : 24}
+      height={size === "lg" ? 36 : 24}
       viewBox="0 0 24 24"
       fill="none"
     >

package/card/design/Card.design.js

@@ -13,8 +13,10 @@ const widthSize = {
     sm: "w-full md:w-90",
     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",
+    xl: "w-full lg:w-156",
+    "2xl": "w-full lg:w-187.5",
+    "3xl": "w-full lg:w-247.5",
+    "4xl": "w-full lg:w-247.5",
     full: "w-full",
     auto: "w-auto",
 };

package/card/design/RollCard.design.js

@@ -25,7 +25,7 @@ export default function RollCardDesign({ titles, state, disabled, isFixed, child
     };
     const isMobile = useMobile();
     return (_jsxs(Card, { option: {
-            width: "2xl",
+            width: "3xl",
             height: !isMobile ? (!isFixed && isOpen ? "2xs" : "4xs") : "2xs",
             background: isDisabled || flag ? "bg-green-dark/10" : "bg-white",
             className: "p-7.5 flex flex-col gap-y-6",

package/card/template/InfoCard/Finance.js

@@ -12,7 +12,7 @@ export default function Finance({ titles, data, }) {
             subtitle: titles.subtitle,
         }, option: {
             titleBorder: "border-green-dark",
-            width: "2xl",
+            width: "3xl",
             height: "xl",
         }, topRight: _jsxs("div", { className: "flex items-center gap-2.5 text-xs ", children: [_jsx("button", { onClick: () => setTaxOn(!taxOn), className: cn("w-4 h-4 rounded-md", taxOn ? "bg-green-dark" : "border-1") }), _jsxs("div", { children: ["\uC0AC\uC5C5\uC18C\uB4DD\uC138 ", taxRate, "%"] })] }), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "flex gap-7.5 mt-4.25 border-b-1 border-green-dark pb-2.5 ", children: dataSets?.map(({ title, sum, tax, total, rate, amount, number, result }, index) => (_jsxs("div", { className: "flex flex-col gap-2.5", children: [_jsx("div", { className: "font-pretendard-bold text-green-dark", children: title }), _jsxs("div", { className: "flex gap-2.5", children: [_jsxs("div", { className: "flex flex-col justify-between w-20", children: [number && (_jsx(Numbers, { title: number.title, dataSet: number.dataSet, dataField: number.dataField })), _jsx(Result, { title: "\uBE44\uC728", amount: `${rate}%` })] }), amount && (_jsxs("div", { className: "flex flex-col", children: [_jsx(Amount, { title: amount.title, dataSet: amount.dataSet, dataField: amount.dataField }), _jsxs("div", { className: "flex flex-col gap-1.5 mt-2.5", children: [_jsx(Result, { title: "\uD569\uACC4", amount: sum, cnTitle: "text-gray-dim" }), _jsx(Result, { title: "\uC0AC\uC5C5\uC18C\uB4DD\uC138", amount: `${typeof tax === "number" && tax ? "-" : ""}${tax.toLocaleString()}`, cnTitle: "text-gray-dim", cnAmount: "text-crimson-burgundy" }), _jsx(Result, { title: "\uCD1D\uACC4", amount: total, background: "bg-green-dark/10", cnTitle: "font-pretendard-bold" })] }), _jsx(Result, { title: "\uC9C0\uAE09\uBD84", amount: result, background: "bg-green-dark", cnTitle: "font-pretendard-bold text-white", className: "text-white mt-5" })] }))] })] }, id + index))) }), _jsx("div", { className: "flex items-center w-full h-15.5", children: _jsxs("div", { className: "flex w-full justify-between items-end", children: [_jsx("div", { className: "w-45 h-10 bg-gray-light rounded-md flex justify-center items-center text-sm font-pretendard-bold text-green-dark", children: data.result }), _jsxs("div", { className: "flex items-center gap-2.5", children: [_jsxs("div", { className: "text-xs text-gray-dim", children: ["\uB9C8\uC9C0\uB9C9 \uB2E4\uC6B4\uB85C\uB4DC: ", data.latestDownloadDate] }), _jsx("button", { onClick: data.refresh, className: "w-6.25 h-6.25 rounded-md box-shadow flex justify-center items-center", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: _jsx("path", { d: "M13.3526 7.78995H17.5126L14.8618 5.13745C14.0084 4.28401 12.9453 3.67028 11.7795 3.35795C10.6137 3.04563 9.38616 3.04572 8.22037 3.35822C7.05459 3.67072 5.99162 4.28461 5.13832 5.13817C4.28501 5.99174 3.67145 7.0549 3.35932 8.22078M2.48765 16.3699V12.2099M2.48765 12.2099H6.64765M2.48765 12.2099L5.13765 14.8624C5.99108 15.7159 7.05414 16.3296 8.21997 16.6419C9.3858 16.9543 10.6133 16.9542 11.7791 16.6417C12.9449 16.3292 14.0078 15.7153 14.8611 14.8617C15.7145 14.0082 16.328 12.945 16.6402 11.7791M17.5126 3.62995V7.78828", stroke: "#105652", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { className: "bg-green-dark text-white w-22.5 h-6.25 text-xs rounded-md", onClick: data.download, children: "\uC5D1\uC140 \uB2E4\uC6B4\uB85C\uB4DC" }), _jsx(Toggle, { labels: [
                                             [true, "잠금"],

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

@@ -1,11 +1,11 @@
 import { InfoCardProps, OnClick } from "./../../../interface";
 interface Data {
     belong: string;
-    birthday: string;
+    academy: string;
 }
 interface StudentInfo extends Omit<InfoCardProps, "children"> {
     data: Partial<Data>;
     onClick?: OnClick;
 }
-export default function Student({ titles, image, data, onClick }: StudentInfo): import("react/jsx-runtime").JSX.Element;
+export default function Student({ titles, image, data, option, }: StudentInfo): import("react/jsx-runtime").JSX.Element;
 export {};

package/card/template/InfoCard/Student.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Label } from "../../../widget";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../util";
 import { InfoCardDesign } from "../../design/InfoCard.design";
-import { label } from "./static/label";
-export default function Student({ titles, image, data, onClick }) {
+export default function Student({ titles, image, data, 
+// onClick,
+option, }) {
     const container = {
         positions: "relative",
         displays: "flex flex-col justify-between mt-2.5",
@@ -18,11 +18,6 @@ export default function Student({ titles, image, data, onClick }) {
             titleBorder: "border-blue-navy",
             width: "sm",
             height: "xs",
-        }, children: _jsxs(_Fragment, { children: [_jsx("div", { className: cn(container), children: _jsx("div", { className: "flex items-center gap-5", children: _jsx("span", { className: "text-sm", children: data.belong }) }) }), _jsx(Label.Button, { title: "\uC0C1\uC138\uBCF4\uAE30", onClick: onClick, option: {
-                        width: "sm",
-                        height: "xs",
-                        text: "text-white hover:text-blue-navy",
-                        background: "bg-blue-navy hover:bg-gray-light",
-                        className: cn(label),
-                    } })] }) }));
+            ...option,
+        }, children: _jsx("div", { className: cn(container), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm", children: data.academy }), _jsx("span", { className: "text-sm", children: data.belong })] }) }) }));
 }

package/card/template/NavCard.js

@@ -3,7 +3,7 @@ import NavCardDesign from "../design/NavCard.design";
 function Banner({ titles, option }) {
     return (_jsx(NavCardDesign, { titles: titles, option: {
             ...option,
-            width: option?.width ?? "xl",
+            width: option?.width ?? "2xl",
             height: option?.height ?? "sm",
             image: option?.image && {
                 ...option?.image,

package/card/template/ProgressCard/Large.js

@@ -35,7 +35,7 @@ export default function ProgressCardLG({ titles, checks, displays, theme, option
     const occupied = Math.round((checks.filter((value) => !!value).length / displays.length) * 100);
     return (_jsxs(CardDesign, { option: {
             ...option,
-            width: "2xl",
+            width: "3xl",
             height: "2xs",
         }, children: [_jsx("div", { className: cn(progressBox), children: displays.map(({ title }, index) => (_jsxs("div", { className: cn(stepBox(checks[index])), children: [_jsx("div", { children: title }), _jsx(SVG.Operation.Checked, { flag: checks[index], size: 25, theme: theme })] }, title))) }), _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 ${widthSizes[occupied]} ${bg[theme ?? "green"]}` }) })] }));
 }

package/interface/Property.d.ts

@@ -31,7 +31,7 @@ export type State<T> = [T, StateAction<T>];
  * @property {"full"} full - Full size
  * @property {"full"} full - Full size
  */
-export type Size = "xxxs" | "xxs" | "mmd" | "xm" | "ml" | "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "auto";
+export type Size = "xxxs" | "xxs" | "mmd" | "xm" | "ml" | "5xs" | "4xs" | "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full" | "auto";
 /**
  * Image size type
  * @enum {string}

package/layout/design/Row.design/index.js

@@ -36,6 +36,7 @@ export default function RowDesign({ item, stateAction, dataField, option, onClic
                         text: option?.text ?? "text-white",
                         width: "xs",
                         height: "xs",
+                        ...option,
                     } }, rowId + title))) })] }));
 }
 function RowElement(props) {

package/layout/index.d.ts

@@ -19,3 +19,4 @@ export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
+export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";

package/layout/index.js

@@ -19,3 +19,4 @@ export { default as OlympiadLayout } from "./template/Olympiad/Olympiad.layout";
 export { default as Gomito } from "./template/Gomito";
 export { default as RegexamLayout } from "./template/Regexam/Regexam.layout";
 export { default as LegacyLayout } from "./template/Legacy/Legacy.layout";
+export { default as MonthlyProgressReport } from "./template/MonthlyProgressReport";

package/layout/template/Archive/Header.js

@@ -4,62 +4,87 @@ import { Input, Select } from "../../../widget";
 import { useResponsive } from "../../../hook";
 export default function Header({ state, seriesState, levelState, }) {
     const container = {
-        displays: "flex justify-between items-start",
-        sizes: "w-full h-15",
+        displays: "flex justify-between items-start flex-wrap flex-none gap-y-5 gap-x-5",
+        sizes: "w-full h-fit",
         boundaries: "px-5 pb-5",
     };
+    const selectWrapper = {
+        display: "flex flex-row gap-3.5",
+    };
+    const ghostSelect = {
+        sizes: "w-[152px], h-[36px] relative",
+    };
     const res = useResponsive();
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex gap-x-3.5", children: [_jsx(Input, { state: state, placeholder: res ? "키워드를 입력하세요" : "", option: {
-                            width: "sm",
-                        } }), _jsx(Select, { selectOptions: [
-                            ["TOSEL VOCA Series", "Voca Series"],
-                            ["Story Series", "Story Series"],
-                            ["Listening Series", "Listening Series"],
-                            ["Speaking Series", "Speaking Series"],
-                            ["실전문제집1", "실전문제집1"],
-                            ["TOSEL 실전문제집2", "실전문제집2"],
-                            ["유형분석집", "유형분석집1"],
-                            ["유형분석집2", "유형분석집2"],
-                            ["예상문제집", "예상문제집"],
-                            ["심화문제집", "심화문제집"],
-                            ["기출연습", "기출연습"],
-                            ["기출모의고사", "기출모의고사"],
-                        ], state: seriesState, placeholder: "\uC2DC\uB9AC\uC988" }), _jsx(Select, { selectOptions: [
-                            {
-                                title: "Pre-Starter",
-                                value: "PS",
-                            },
-                            {
-                                title: "Starter",
-                                value: "ST",
-                            },
-                            {
-                                title: "Basic",
-                                value: "BA",
-                            },
-                            {
-                                title: "Junior",
-                                value: "JR",
-                            },
-                            {
-                                title: "High Junior",
-                                value: "HJ",
-                            },
-                        ], state: levelState, placeholder: "\uB808\uBCA8" })] }), _jsx(ContentBox, { contents: [
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Input, { state: state, placeholder: res ? "키워드를 입력하세요" : "", option: {
+                    width: "md",
+                } }), _jsxs("div", { className: cn(selectWrapper), children: [_jsx("div", { className: cn(ghostSelect), children: _jsx(Select, { selectOptions: [
+                                ["TOSEL VOCA Series", "Voca Series"],
+                                ["Story Series", "Story Series"],
+                                ["Listening Series", "Listening Series"],
+                                ["Speaking Series", "Speaking Series"],
+                                ["실전문제집1", "실전문제집1"],
+                                ["TOSEL 실전문제집2", "실전문제집2"],
+                                ["유형분석집", "유형분석집1"],
+                                ["유형분석집2", "유형분석집2"],
+                                ["예상문제집", "예상문제집"],
+                                ["심화문제집", "심화문제집"],
+                                ["기출연습", "기출연습"],
+                                ["기출모의고사", "기출모의고사"],
+                            ], state: seriesState, placeholder: "\uC2DC\uB9AC\uC988" }) }), _jsx("div", { className: cn(ghostSelect), children: _jsx(Select, { selectOptions: [
+                                {
+                                    title: "Pre-Starter",
+                                    value: "PS",
+                                },
+                                {
+                                    title: "Starter",
+                                    value: "ST",
+                                },
+                                {
+                                    title: "Basic",
+                                    value: "BA",
+                                },
+                                {
+                                    title: "Junior",
+                                    value: "JR",
+                                },
+                                {
+                                    title: "High Junior",
+                                    value: "HJ",
+                                },
+                            ], state: levelState, placeholder: "\uB808\uBCA8" }) })] }), _jsx(ContentBox, { contents: [
                     {
                         title: "교재 음원",
                         onClick: () => { },
+                        disabled: false,
+                    },
+                    {
+                        title: "정오표",
+                        onClick: () => { },
+                        disabled: true,
+                    },
+                    {
+                        title: "홍보자료",
+                        onClick: () => { },
+                        disabled: true,
+                    },
+                    {
+                        title: "기타 자료",
+                        onClick: () => { },
+                        disabled: true,
                     },
                 ] })] }));
 }
 function ContentBox({ contents }) {
     const container = {
-        sizes: "h-[38px]",
+        sizes: "flex flex-1 flex-nowrap flex-row items-center justify-start w-fit flex-none",
     };
     const buttonBox = {
+        displays: "flex flex-none",
         boundaries: "p-3 rounded-[8px]",
         fonts: "leading-none text-[12px]",
-        backgrounds: "bg-green-dark/10",
+        other: contents.map((content) => content.disabled)
+            ? "bg-green-dark/10 text-green-dark"
+            : "bg-none text-gray-medium",
     };
     return (_jsx("div", { className: cn(container), children: contents.map((content) => (_jsx("button", { className: cn(buttonBox), children: content.title }, content.title))) }));
 }

package/layout/template/BbsLayout.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useActionStore } from "../../store";
 import { cn } from "../../util";
 export default function BbsLayout({ title, icon, topRight, children, }) {
+    const { setFlag } = useActionStore();
     const container = {
         displays: "flex flex-col items-center",
         sizes: "w-full min-h-screen",
@@ -14,5 +16,5 @@ export default function BbsLayout({ title, icon, topRight, children, }) {
         sizes: "w-full  h-[188px]",
         boundaries: "px-12 pb-10",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(header), children: [_jsxs("div", { className: "flex gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }), topRight] }), children] }) }));
+    return (_jsx("div", { className: cn(container), onClick: setFlag, children: _jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(header), children: [_jsxs("div", { className: "flex gap-x-5 items-center", children: [icon, _jsx("div", { className: "text-[40px] leading-none font-pretendard-bold text-green-dark", children: title })] }), topRight] }), children] }) }));
 }