@reitwagen/design-components 0.2.1 → 0.3.0

package/dist/components/Icons/IconLikeOn.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconLikeOn({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconLikeOn({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconLikeOn;
 //# sourceMappingURL=IconLikeOn.d.ts.map

package/dist/components/Icons/IconLikeOn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconLikeOn.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconLikeOn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,UAAU,CAAC,EAClB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAgBP;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconLikeOn.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconLikeOn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAiB1E;AAED,eAAe,UAAU,CAAC"}

package/dist/components/Icons/IconLikeOn.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconLikeOn({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M8.39 18.49V8.33c0-.4.12-.79.34-1.12l2.73-4.06c.43-.65 1.5-1.11 2.41-.77.98.33 1.63 1.43 1.42 2.41l-.52 3.27c-.04.3.04.57.21.78.17.19.42.31.69.31h4.11c.79 0 1.47.32 1.87.88.38.54.45 1.24.2 1.95l-2.46 7.49c-.31 1.24-1.66 2.25-3 2.25h-3.9c-.67 0-1.61-.23-2.04-.66l-1.28-.99c-.49-.37-.78-.96-.78-1.58M5.21 6.38H4.18C2.63 6.38 2 6.98 2 8.46v10.06c0 1.48.63 2.08 2.18 2.08h1.03c1.55 0 2.18-.6 2.18-2.08V8.46c0-1.48-.63-2.08-2.18-2.08" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconLikeOn({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M8.39 18.49V8.33c0-.4.12-.79.34-1.12l2.73-4.06c.43-.65 1.5-1.11 2.41-.77.98.33 1.63 1.43 1.42 2.41l-.52 3.27c-.04.3.04.57.21.78.17.19.42.31.69.31h4.11c.79 0 1.47.32 1.87.88.38.54.45 1.24.2 1.95l-2.46 7.49c-.31 1.24-1.66 2.25-3 2.25h-3.9c-.67 0-1.61-.23-2.04-.66l-1.28-.99c-.49-.37-.78-.96-.78-1.58M5.21 6.38H4.18C2.63 6.38 2 6.98 2 8.46v10.06c0 1.48.63 2.08 2.18 2.08h1.03c1.55 0 2.18-.6 2.18-2.08V8.46c0-1.48-.63-2.08-2.18-2.08" }) }));
 }
 exports.default = IconLikeOn;

package/dist/components/Icons/IconLocateDefault.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconLocateDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconLocateDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconLocateDefault;
 //# sourceMappingURL=IconLocateDefault.d.ts.map

package/dist/components/Icons/IconLocateDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconLocateDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconLocateDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,iBAAiB,CAAC,EACzB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"IconLocateDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconLocateDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAkBP;AAED,eAAe,iBAAiB,CAAC"}

package/dist/components/Icons/IconLocateDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconLocateDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m.75 3.796a.75.75 0 0 1-1.5 0V3.534a8.5 8.5 0 0 0-7.715 7.716h2.26a.75.75 0 0 1 0 1.5h-2.26a8.5 8.5 0 0 0 7.715 7.715v-2.26a.75.75 0 0 1 1.5 0v2.26a8.5 8.5 0 0 0 7.715-7.715h-2.26a.75.75 0 0 1 0-1.5h2.26a8.5 8.5 0 0 0-7.715-7.716z" }), (0, jsx_runtime_1.jsx)("circle", { cx: 12, cy: 12, r: 2, fill: fill })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconLocateDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m.75 3.796a.75.75 0 0 1-1.5 0V3.534a8.5 8.5 0 0 0-7.715 7.716h2.26a.75.75 0 0 1 0 1.5h-2.26a8.5 8.5 0 0 0 7.715 7.715v-2.26a.75.75 0 0 1 1.5 0v2.26a8.5 8.5 0 0 0 7.715-7.715h-2.26a.75.75 0 0 1 0-1.5h2.26a8.5 8.5 0 0 0-7.715-7.716z" }), (0, jsx_runtime_1.jsx)("circle", { cx: 12, cy: 12, r: 2, fill: "currentColor" })] }));
 }
 exports.default = IconLocateDefault;

package/dist/components/Icons/IconMYDefault.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconMYDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconMYDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconMYDefault;
 //# sourceMappingURL=IconMYDefault.d.ts.map

package/dist/components/Icons/IconMYDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMYDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMYDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,aAAa,CAAC,EACrB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAgBP;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"IconMYDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMYDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,aAAa,CAAC"}

package/dist/components/Icons/IconMYDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconMYDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M12 2C9.38 2 7.25 4.13 7.25 6.75c0 2.57 2.01 4.65 4.63 4.74.08-.01.16-.01.22 0h.07a4.74 4.74 0 0 0 4.58-4.74C16.75 4.13 14.62 2 12 2M17.5 14.15c-2.79-1.86-8.18-1.86-10.99 0-1.27.85-1.97 2-1.97 3.23s.7 2.37 1.96 3.21C7.9 21.53 10.16 22 12 22s4.1-.47 5.5-1.41c1.26-.85 1.96-1.99 1.96-3.23-.01-1.23-.7-2.37-1.96-3.21" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconMYDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12 2C9.38 2 7.25 4.13 7.25 6.75c0 2.57 2.01 4.65 4.63 4.74.08-.01.16-.01.22 0h.07a4.74 4.74 0 0 0 4.58-4.74C16.75 4.13 14.62 2 12 2M17.5 14.15c-2.79-1.86-8.18-1.86-10.99 0-1.27.85-1.97 2-1.97 3.23s.7 2.37 1.96 3.21C7.9 21.53 10.16 22 12 22s4.1-.47 5.5-1.41c1.26-.85 1.96-1.99 1.96-3.23-.01-1.23-.7-2.37-1.96-3.21" }) }));
 }
 exports.default = IconMYDefault;

package/dist/components/Icons/IconMYLine.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconMYLine({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconMYLine({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconMYLine;
 //# sourceMappingURL=IconMYLine.d.ts.map

package/dist/components/Icons/IconMYLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMYLine.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMYLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,UAAU,CAAC,EAClB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconMYLine.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMYLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAkB1E;AAED,eAAe,UAAU,CAAC"}

package/dist/components/Icons/IconMYLine.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconMYLine({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeWidth: 1.5, d: "M12 2.75c2.206 0 4 1.794 4 4a3.99 3.99 0 0 1-3.856 3.99h-.001a1.5 1.5 0 0 0-.253 0C9.676 10.654 8 8.904 8 6.75c0-2.206 1.794-4 4-4ZM12.013 13.505c1.958 0 3.84.448 5.071 1.269 1.035.69 1.552 1.55 1.62 2.419l.006.173c-.002.926-.52 1.853-1.628 2.6-1.23.827-3.325 1.284-5.082 1.284s-3.851-.457-5.082-1.283l-.002-.001c-1.108-.739-1.626-1.668-1.626-2.586s.518-1.856 1.634-2.604c1.242-.822 3.13-1.271 5.089-1.271Z" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconMYLine({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeWidth: 1.5, d: "M12 2.75c2.206 0 4 1.794 4 4a3.99 3.99 0 0 1-3.856 3.99h-.001a1.5 1.5 0 0 0-.253 0C9.676 10.654 8 8.904 8 6.75c0-2.206 1.794-4 4-4ZM12.013 13.505c1.958 0 3.84.448 5.071 1.269 1.035.69 1.552 1.55 1.62 2.419l.006.173c-.002.926-.52 1.853-1.628 2.6-1.23.827-3.325 1.284-5.082 1.284s-3.851-.457-5.082-1.283l-.002-.001c-1.108-.739-1.626-1.668-1.626-2.586s.518-1.856 1.634-2.604c1.242-.822 3.13-1.271 5.089-1.271Z" }) }));
 }
 exports.default = IconMYLine;

package/dist/components/Icons/IconMedal.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconMedal({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconMedal({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconMedal;
 //# sourceMappingURL=IconMedal.d.ts.map

package/dist/components/Icons/IconMedal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMedal.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMedal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,SAAS,CAAC,EACjB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAgBP;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"IconMedal.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMedal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAiBzE;AAED,eAAe,SAAS,CAAC"}

package/dist/components/Icons/IconMedal.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconMedal({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M12 15c3.728 0 6.75-2.91 6.75-6.5S15.728 2 12 2 5.25 4.91 5.25 8.5 8.272 15 12 15M15.79 15.61c.33-.17.71.08.71.45v4.85c0 .9-.63 1.34-1.41.97l-2.68-1.27c-.23-.1-.59-.1-.82 0l-2.68 1.27c-.78.36-1.41-.08-1.41-.98l.02-4.84c0-.37.39-.61.71-.45 1.13.57 2.41.89 3.77.89s2.65-.32 3.79-.89" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconMedal({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12 15c3.728 0 6.75-2.91 6.75-6.5S15.728 2 12 2 5.25 4.91 5.25 8.5 8.272 15 12 15M15.79 15.61c.33-.17.71.08.71.45v4.85c0 .9-.63 1.34-1.41.97l-2.68-1.27c-.23-.1-.59-.1-.82 0l-2.68 1.27c-.78.36-1.41-.08-1.41-.98l.02-4.84c0-.37.39-.61.71-.45 1.13.57 2.41.89 3.77.89s2.65-.32 3.79-.89" }) }));
 }
 exports.default = IconMedal;

package/dist/components/Icons/IconMenuDefault.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconMenuDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconMenuDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconMenuDefault;
 //# sourceMappingURL=IconMenuDefault.d.ts.map

package/dist/components/Icons/IconMenuDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMenuDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMenuDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IconMenuDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMenuDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAoBP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconMenuDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconMenuDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 12h16M4 6h16M4 18h16" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconMenuDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 12h16M4 6h16M4 18h16" }) }));
 }
 exports.default = IconMenuDefault;

package/dist/components/Icons/IconMessage.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconMessage({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconMessage({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconMessage;
 //# sourceMappingURL=IconMessage.d.ts.map

package/dist/components/Icons/IconMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,WAAW,CAAC,EACnB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA2BP;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"IconMessage.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CA4B3E;AAED,eAAe,WAAW,CAAC"}

package/dist/components/Icons/IconMessage.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconMessage({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: [(0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: 10, strokeWidth: 1.5, d: "M22 8v5q0 6-6 6h-.5c-.31 0-.61.15-.8.4l-1.5 2c-.66.88-1.74.88-2.4 0l-1.5-2c-.16-.22-.53-.4-.8-.4H8c-4 0-6-1-6-6V8q0-6 6-6h4" }), (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15.2 4.62c-.33-.99.06-2.21 1.14-2.55.56-.17 1.26-.03 1.66.5.38-.55 1.1-.67 1.66-.5 1.08.33 1.47 1.56 1.14 2.55C20.29 6.19 18.5 7 18 7s-2.27-.8-2.8-2.38M15.997 11h.008M11.996 11h.008M7.995 11h.008" })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconMessage({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: [(0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeMiterlimit: 10, strokeWidth: 1.5, d: "M22 8v5q0 6-6 6h-.5c-.31 0-.61.15-.8.4l-1.5 2c-.66.88-1.74.88-2.4 0l-1.5-2c-.16-.22-.53-.4-.8-.4H8c-4 0-6-1-6-6V8q0-6 6-6h4" }), (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15.2 4.62c-.33-.99.06-2.21 1.14-2.55.56-.17 1.26-.03 1.66.5.38-.55 1.1-.67 1.66-.5 1.08.33 1.47 1.56 1.14 2.55C20.29 6.19 18.5 7 18 7s-2.27-.8-2.8-2.38M15.997 11h.008M11.996 11h.008M7.995 11h.008" })] }));
 }
 exports.default = IconMessage;

package/dist/components/Icons/IconMessageDefault.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconMessageDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconMessageDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconMessageDefault;
 //# sourceMappingURL=IconMessageDefault.d.ts.map

package/dist/components/Icons/IconMessageDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMessageDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMessageDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAgBP;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"IconMessageDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMessageDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,kBAAkB,CAAC"}

package/dist/components/Icons/IconMessageDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconMessageDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M17.5 2.65h-11C3.2 2.65 1 4.3 1 8.15v7.7c0 3.85 2.2 5.5 5.5 5.5h11c3.3 0 5.5-1.65 5.5-5.5v-7.7c0-3.85-2.2-5.5-5.5-5.5m.517 6.699-3.443 2.75c-.726.583-1.65.869-2.574.869s-1.859-.286-2.574-.87l-3.443-2.75a.846.846 0 0 1-.132-1.165.823.823 0 0 1 1.155-.132l3.443 2.75c.836.67 2.255.67 3.091 0l3.443-2.75a.81.81 0 0 1 1.155.132.834.834 0 0 1-.121 1.166" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconMessageDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M17.5 2.65h-11C3.2 2.65 1 4.3 1 8.15v7.7c0 3.85 2.2 5.5 5.5 5.5h11c3.3 0 5.5-1.65 5.5-5.5v-7.7c0-3.85-2.2-5.5-5.5-5.5m.517 6.699-3.443 2.75c-.726.583-1.65.869-2.574.869s-1.859-.286-2.574-.87l-3.443-2.75a.846.846 0 0 1-.132-1.165.823.823 0 0 1 1.155-.132l3.443 2.75c.836.67 2.255.67 3.091 0l3.443-2.75a.81.81 0 0 1 1.155.132.834.834 0 0 1-.121 1.166" }) }));
 }
 exports.default = IconMessageDefault;

package/dist/components/Icons/IconMinusDefault.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconMinusDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconMinusDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconMinusDefault;
 //# sourceMappingURL=IconMinusDefault.d.ts.map

package/dist/components/Icons/IconMinusDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMinusDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMinusDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,gBAAgB,CAAC,EACxB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"IconMinusDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMinusDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAoBP;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/Icons/IconMinusDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconMinusDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M6 12h12" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconMinusDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M6 12h12" }) }));
 }
 exports.default = IconMinusDefault;

package/dist/components/Icons/IconMoreDefault.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconMoreDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconMoreDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconMoreDefault;
 //# sourceMappingURL=IconMoreDefault.d.ts.map

package/dist/components/Icons/IconMoreDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconMoreDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMoreDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAgBP;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IconMoreDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconMoreDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconMoreDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconMoreDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M12 13a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M19 13a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M5 13a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconMoreDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12 13a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M19 13a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3M5 13a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" }) }));
 }
 exports.default = IconMoreDefault;

package/dist/components/Icons/IconNaviDefault.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconNaviDefault({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconNaviDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconNaviDefault;
 //# sourceMappingURL=IconNaviDefault.d.ts.map

package/dist/components/Icons/IconNaviDefault.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconNaviDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconNaviDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAgBP;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IconNaviDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconNaviDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconNaviDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconNaviDefault({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M19.694 4.313q.123.124.195.272c.121.24.149.527.055.8l-.672 1.951q-.015.075-.042.153l-4.412 12.803c-.328.953-1.68.941-1.992-.018l-2.06-6.332-.003-.008-.082-.252a.53.53 0 0 0-.342-.342l-.233-.076a.6.6 0 0 1-.106-.047l-6.274-2.04c-.96-.311-.97-1.663-.018-1.991l12.808-4.41q.049-.017.097-.03l2.005-.69c.39-.134.806-.02 1.076.257" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconNaviDefault({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M19.694 4.313q.123.124.195.272c.121.24.149.527.055.8l-.672 1.951q-.015.075-.042.153l-4.412 12.803c-.328.953-1.68.941-1.992-.018l-2.06-6.332-.003-.008-.082-.252a.53.53 0 0 0-.342-.342l-.233-.076a.6.6 0 0 1-.106-.047l-6.274-2.04c-.96-.311-.97-1.663-.018-1.991l12.808-4.41q.049-.017.097-.03l2.005-.69c.39-.134.806-.02 1.076.257" }) }));
 }
 exports.default = IconNaviDefault;

package/dist/components/Icons/IconNaviLine.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconNaviLine({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconNaviLine({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconNaviLine;
 //# sourceMappingURL=IconNaviLine.d.ts.map

package/dist/components/Icons/IconNaviLine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconNaviLine.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconNaviLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,YAAY,CAAC,EACpB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"IconNaviLine.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconNaviLine.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAkB5E;AAED,eAAe,YAAY,CAAC"}

package/dist/components/Icons/IconNaviLine.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconNaviLine({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeWidth: 1.5, d: "M19.694 4.313q.123.124.195.272c.121.24.149.527.055.8l-.672 1.951q-.015.075-.042.153l-4.412 12.803c-.328.953-1.68.941-1.992-.018l-2.06-6.332-.003-.008-.082-.252a.53.53 0 0 0-.342-.342l-.233-.076a.6.6 0 0 1-.106-.047l-6.274-2.04c-.96-.311-.97-1.663-.018-1.991l12.808-4.41q.049-.017.097-.03l2.005-.69c.39-.134.806-.02 1.076.257Z" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconNaviLine({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeWidth: 1.5, d: "M19.694 4.313q.123.124.195.272c.121.24.149.527.055.8l-.672 1.951q-.015.075-.042.153l-4.412 12.803c-.328.953-1.68.941-1.992-.018l-2.06-6.332-.003-.008-.082-.252a.53.53 0 0 0-.342-.342l-.233-.076a.6.6 0 0 1-.106-.047l-6.274-2.04c-.96-.311-.97-1.663-.018-1.991l12.808-4.41q.049-.017.097-.03l2.005-.69c.39-.134.806-.02 1.076.257Z" }) }));
 }
 exports.default = IconNaviLine;

package/dist/components/Icons/IconNull.d.ts

@@ -1,9 +1,17 @@
 import type { SVGProps } from "react";
 interface Props extends SVGProps<SVGSVGElement> {
-    fill?: string;
+    className: string;
     width?: number;
     height?: number;
 }
-declare function IconNull({ fill, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+declare function IconNull({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconNull;
 //# sourceMappingURL=IconNull.d.ts.map

package/dist/components/Icons/IconNull.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconNull.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconNull.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,QAAQ,CAAC,EAChB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA+BP;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"IconNull.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconNull.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAgCxE;AAED,eAAe,QAAQ,CAAC"}