@reitwagen/design-components 0.2.1 → 0.3.0

package/dist/components/Icons/IconCheckDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCheckDefault({ 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 12 3.995 4L18 8" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCheckDefault({ 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 12 3.995 4L18 8" }) }));
 }
 exports.default = IconCheckDefault;

package/dist/components/Icons/IconChevronDown.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 IconChevronDown({ 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 IconChevronDown({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconChevronDown;
 //# sourceMappingURL=IconChevronDown.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconChevronDown.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconChevronDown.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":"IconChevronDown.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconChevronDown.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/IconChevronDown.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconChevronDown({ 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: "m19 8.5-7 7-7-7" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconChevronDown({ 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: "m19 8.5-7 7-7-7" }) }));
 }
 exports.default = IconChevronDown;

package/dist/components/Icons/IconChevronLeft.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 IconChevronLeft({ 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 IconChevronLeft({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconChevronLeft;
 //# sourceMappingURL=IconChevronLeft.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconChevronLeft.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconChevronLeft.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":"IconChevronLeft.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconChevronLeft.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/IconChevronLeft.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconChevronLeft({ 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: "m15.5 19-7-7 7-7" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconChevronLeft({ 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: "m15.5 19-7-7 7-7" }) }));
 }
 exports.default = IconChevronLeft;

package/dist/components/Icons/IconChevronRight.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 IconChevronRight({ 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 IconChevronRight({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconChevronRight;
 //# sourceMappingURL=IconChevronRight.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconChevronRight.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconChevronRight.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":"IconChevronRight.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconChevronRight.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/IconChevronRight.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconChevronRight({ 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: "m8.5 5 7 7-7 7" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconChevronRight({ 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: "m8.5 5 7 7-7 7" }) }));
 }
 exports.default = IconChevronRight;

package/dist/components/Icons/IconChevronUp.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 IconChevronUp({ 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 IconChevronUp({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconChevronUp;
 //# sourceMappingURL=IconChevronUp.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconChevronUp.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconChevronUp.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,2CAmBP;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"IconChevronUp.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconChevronUp.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,2CAoBP;AAED,eAAe,aAAa,CAAC"}

package/dist/components/Icons/IconChevronUp.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconChevronUp({ 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: "m5 15.5 7-7 7 7" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconChevronUp({ 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: "m5 15.5 7-7 7 7" }) }));
 }
 exports.default = IconChevronUp;

package/dist/components/Icons/IconCloseCircle.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 IconCloseCircle({ 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 IconCloseCircle({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconCloseCircle;
 //# sourceMappingURL=IconCloseCircle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconCloseCircle.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCloseCircle.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":"IconCloseCircle.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCloseCircle.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/IconCloseCircle.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCloseCircle({ 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 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2m3.36 12.3c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22s-.38-.07-.53-.22l-2.3-2.3-2.3 2.3c-.15.15-.34.22-.53.22s-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l2.3-2.3-2.3-2.3a.754.754 0 0 1 0-1.06c.29-.29.77-.29 1.06 0l2.3 2.3 2.3-2.3c.29-.29.77-.29 1.06 0s.29.77 0 1.06l-2.3 2.3z" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCloseCircle({ 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 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2m3.36 12.3c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22s-.38-.07-.53-.22l-2.3-2.3-2.3 2.3c-.15.15-.34.22-.53.22s-.38-.07-.53-.22a.754.754 0 0 1 0-1.06l2.3-2.3-2.3-2.3a.754.754 0 0 1 0-1.06c.29-.29.77-.29 1.06 0l2.3 2.3 2.3-2.3c.29-.29.77-.29 1.06 0s.29.77 0 1.06l-2.3 2.3z" }) }));
 }
 exports.default = IconCloseCircle;

package/dist/components/Icons/IconCloseDefault.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 IconCloseDefault({ 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 IconCloseDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconCloseDefault;
 //# sourceMappingURL=IconCloseDefault.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconCloseDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCloseDefault.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,2CAkBP;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"IconCloseDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCloseDefault.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,2CAmBP;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/Icons/IconCloseDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCloseDefault({ 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", strokeWidth: 1.5, d: "m5 5 14 14M19 5 5 19" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCloseDefault({ 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", strokeWidth: 1.5, d: "m5 5 14 14M19 5 5 19" }) }));
 }
 exports.default = IconCloseDefault;

package/dist/components/Icons/IconCloseSmall.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 IconCloseSmall({ 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 IconCloseSmall({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconCloseSmall;
 //# sourceMappingURL=IconCloseSmall.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconCloseSmall.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCloseSmall.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,cAAc,CAAC,EACtB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAkBP;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"IconCloseSmall.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCloseSmall.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,cAAc,CAAC,EACtB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP;AAED,eAAe,cAAc,CAAC"}

package/dist/components/Icons/IconCloseSmall.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCloseSmall({ 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", strokeWidth: 1.5, d: "m8.5 8 7 7M15.5 8 12 11.5 8.5 15" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCloseSmall({ 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", strokeWidth: 1.5, d: "m8.5 8 7 7M15.5 8 12 11.5 8.5 15" }) }));
 }
 exports.default = IconCloseSmall;

package/dist/components/Icons/IconCommentOff.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 IconCommentOff({ 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 IconCommentOff({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconCommentOff;
 //# sourceMappingURL=IconCommentOff.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconCommentOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCommentOff.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,cAAc,CAAC,EACtB,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA2BP;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"IconCommentOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCommentOff.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,cAAc,CAAC,EACtB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA4BP;AAED,eAAe,cAAc,CAAC"}

package/dist/components/Icons/IconCommentOff.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCommentOff({ 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", strokeWidth: 1.5, d: "M19.071 19.07c-3.056 3.056-7.581 3.717-11.285 2.004-.546-.22-.995-.398-1.42-.398-1.188.007-2.665 1.158-3.433.391-.767-.768.384-2.246.384-3.44 0-.427-.17-.867-.39-1.415C1.212 12.51 1.873 7.982 4.93 4.927c3.902-3.903 10.24-3.903 14.141 0 3.909 3.908 3.902 10.241 0 14.143", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.94 12.413h.008M11.93 12.413h.01M7.921 12.413h.01" })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCommentOff({ 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", strokeWidth: 1.5, d: "M19.071 19.07c-3.056 3.056-7.581 3.717-11.285 2.004-.546-.22-.995-.398-1.42-.398-1.188.007-2.665 1.158-3.433.391-.767-.768.384-2.246.384-3.44 0-.427-.17-.867-.39-1.415C1.212 12.51 1.873 7.982 4.93 4.927c3.902-3.903 10.24-3.903 14.141 0 3.909 3.908 3.902 10.241 0 14.143", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.94 12.413h.008M11.93 12.413h.01M7.921 12.413h.01" })] }));
 }
 exports.default = IconCommentOff;

package/dist/components/Icons/IconCommentOn.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 IconCommentOn({ 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 IconCommentOn({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconCommentOn;
 //# sourceMappingURL=IconCommentOn.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconCommentOn.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCommentOn.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,2CAkBP;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"IconCommentOn.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCommentOn.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,2CAmBP;AAED,eAAe,aAAa,CAAC"}

package/dist/components/Icons/IconCommentOn.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCommentOn({ 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, fillRule: "evenodd", d: "M4.401 4.396c4.194-4.195 11.007-4.195 15.201 0 4.202 4.201 4.194 11.01 0 15.205-3.28 3.279-8.13 3.99-12.104 2.165-.58-.234-.88-.34-1.13-.34-.186.001-.418.05-.712.14q-.216.066-.451.148c-.155.053-.323.111-.488.163-.32.1-.705.203-1.09.203-.36 0-.746-.09-1.082-.356l-.141-.126c-.366-.366-.484-.813-.484-1.225 0-.385.102-.77.202-1.09.051-.165.11-.333.162-.487q.082-.237.148-.452c.09-.297.136-.53.136-.717 0-.254-.103-.553-.337-1.135-1.82-3.971-1.107-8.82 2.17-12.096m3.52 7.017a1 1 0 0 0 0 2h.01a1 1 0 0 0 0-2zm4.01 0a1 1 0 0 0 0 2h.01a1 1 0 0 0 0-2zm4.008 0a1 1 0 0 0 0 2h.01a1 1 0 0 0 0-2z", clipRule: "evenodd" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCommentOn({ 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", fillRule: "evenodd", d: "M4.401 4.396c4.194-4.195 11.007-4.195 15.201 0 4.202 4.201 4.194 11.01 0 15.205-3.28 3.279-8.13 3.99-12.104 2.165-.58-.234-.88-.34-1.13-.34-.186.001-.418.05-.712.14q-.216.066-.451.148c-.155.053-.323.111-.488.163-.32.1-.705.203-1.09.203-.36 0-.746-.09-1.082-.356l-.141-.126c-.366-.366-.484-.813-.484-1.225 0-.385.102-.77.202-1.09.051-.165.11-.333.162-.487q.082-.237.148-.452c.09-.297.136-.53.136-.717 0-.254-.103-.553-.337-1.135-1.82-3.971-1.107-8.82 2.17-12.096m3.52 7.017a1 1 0 0 0 0 2h.01a1 1 0 0 0 0-2zm4.01 0a1 1 0 0 0 0 2h.01a1 1 0 0 0 0-2zm4.008 0a1 1 0 0 0 0 2h.01a1 1 0 0 0 0-2z", clipRule: "evenodd" }) }));
 }
 exports.default = IconCommentOn;

package/dist/components/Icons/IconCommunityDefault.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 IconCommunityDefault({ 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 IconCommunityDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconCommunityDefault;
 //# sourceMappingURL=IconCommunityDefault.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconCommunityDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCommunityDefault.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,oBAAoB,CAAC,EAC5B,IAAgB,EAChB,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAkBP;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"IconCommunityDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCommunityDefault.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,oBAAoB,CAAC,EAC5B,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAmBP;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/Icons/IconCommunityDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCommunityDefault({ 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, fillRule: "evenodd", d: "M2 12.015C2 6.747 6.21 2 12.02 2 17.7 2 22 6.657 22 11.985 22 18.165 16.96 22 12 22c-1.64 0-3.46-.44-4.92-1.302-.51-.31-.94-.54-1.49-.36l-2.02.6c-.51.16-.97-.24-.82-.78l.67-2.244c.11-.31.09-.641-.07-.902C2.49 15.43 2 13.698 2 12.016m8.7 0c0 .711.57 1.282 1.28 1.292.71 0 1.28-.58 1.28-1.282 0-.711-.57-1.282-1.28-1.282-.7-.01-1.28.571-1.28 1.272m4.61.01c0 .701.57 1.282 1.28 1.282s1.28-.58 1.28-1.282c0-.711-.57-1.282-1.28-1.282s-1.28.571-1.28 1.282m-7.94 1.282c-.7 0-1.28-.58-1.28-1.282 0-.711.57-1.282 1.28-1.282s1.28.571 1.28 1.282a1.29 1.29 0 0 1-1.28 1.282", clipRule: "evenodd" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCommunityDefault({ 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", fillRule: "evenodd", d: "M2 12.015C2 6.747 6.21 2 12.02 2 17.7 2 22 6.657 22 11.985 22 18.165 16.96 22 12 22c-1.64 0-3.46-.44-4.92-1.302-.51-.31-.94-.54-1.49-.36l-2.02.6c-.51.16-.97-.24-.82-.78l.67-2.244c.11-.31.09-.641-.07-.902C2.49 15.43 2 13.698 2 12.016m8.7 0c0 .711.57 1.282 1.28 1.292.71 0 1.28-.58 1.28-1.282 0-.711-.57-1.282-1.28-1.282-.7-.01-1.28.571-1.28 1.272m4.61.01c0 .701.57 1.282 1.28 1.282s1.28-.58 1.28-1.282c0-.711-.57-1.282-1.28-1.282s-1.28.571-1.28 1.282m-7.94 1.282c-.7 0-1.28-.58-1.28-1.282 0-.711.57-1.282 1.28-1.282s1.28.571 1.28 1.282a1.29 1.29 0 0 1-1.28 1.282", clipRule: "evenodd" }) }));
 }
 exports.default = IconCommunityDefault;

package/dist/components/Icons/IconCopyDefault.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 IconCopyDefault({ 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 IconCopyDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconCopyDefault;
 //# sourceMappingURL=IconCopyDefault.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconCopyDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCopyDefault.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":"IconCopyDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCopyDefault.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/IconCopyDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCopyDefault({ 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: "M8.4 8.4V5.88c0-1.008 0-1.512.196-1.897a1.8 1.8 0 0 1 .787-.787C9.768 3 10.272 3 11.28 3h6.84c1.008 0 1.512 0 1.897.196a1.8 1.8 0 0 1 .787.787C21 4.368 21 4.872 21 5.88v6.84c0 1.008 0 1.512-.196 1.897a1.8 1.8 0 0 1-.787.787c-.385.196-.889.196-1.897.196H15.6M5.88 21h6.84c1.008 0 1.512 0 1.897-.196a1.8 1.8 0 0 0 .787-.787c.196-.385.196-.889.196-1.897v-6.84c0-1.008 0-1.512-.196-1.897a1.8 1.8 0 0 0-.787-.787c-.385-.196-.889-.196-1.897-.196H5.88c-1.008 0-1.512 0-1.897.196a1.8 1.8 0 0 0-.787.787C3 9.768 3 10.272 3 11.28v6.84c0 1.008 0 1.512.196 1.897a1.8 1.8 0 0 0 .787.787C4.368 21 4.872 21 5.88 21" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCopyDefault({ 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: "M8.4 8.4V5.88c0-1.008 0-1.512.196-1.897a1.8 1.8 0 0 1 .787-.787C9.768 3 10.272 3 11.28 3h6.84c1.008 0 1.512 0 1.897.196a1.8 1.8 0 0 1 .787.787C21 4.368 21 4.872 21 5.88v6.84c0 1.008 0 1.512-.196 1.897a1.8 1.8 0 0 1-.787.787c-.385.196-.889.196-1.897.196H15.6M5.88 21h6.84c1.008 0 1.512 0 1.897-.196a1.8 1.8 0 0 0 .787-.787c.196-.385.196-.889.196-1.897v-6.84c0-1.008 0-1.512-.196-1.897a1.8 1.8 0 0 0-.787-.787c-.385-.196-.889-.196-1.897-.196H5.88c-1.008 0-1.512 0-1.897.196a1.8 1.8 0 0 0-.787.787C3 9.768 3 10.272 3 11.28v6.84c0 1.008 0 1.512.196 1.897a1.8 1.8 0 0 0 .787.787C4.368 21 4.872 21 5.88 21" }) }));
 }
 exports.default = IconCopyDefault;

package/dist/components/Icons/IconCouponDefault.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 IconCouponDefault({ 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 IconCouponDefault({ className, width, height, ...props }: Props): import("react/jsx-runtime").JSX.Element;
 export default IconCouponDefault;
 //# sourceMappingURL=IconCouponDefault.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconCouponDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCouponDefault.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,2CAgBP;AAED,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"IconCouponDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconCouponDefault.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,2CAiBP;AAED,eAAe,iBAAiB,CAAC"}

package/dist/components/Icons/IconCouponDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCouponDefault({ 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.2 4.05c1.01 0 1.864.038 2.569.162.707.125 1.328.348 1.82.769.991.85 1.16 2.253 1.16 4.02v.998a.75.75 0 0 1-.75.75 1.751 1.751 0 0 0 0 3.501.75.75 0 0 1 .75.75c0 1.766-.169 3.17-1.16 4.02-.492.42-1.113.643-1.82.768-.705.125-1.56.162-2.569.162h-10c-.993 0-1.866-.005-2.601-.075-.731-.069-1.405-.207-1.965-.52-1.234-.69-1.584-2.01-1.584-3.855V15a.75.75 0 0 1 .75-.75 1.751 1.751 0 0 0 0-3.5.75.75 0 0 1-.75-.75v-.5c0-1.864.357-3.327 1.464-4.271C3.584 4.316 5.18 4.05 7.2 4.05zM8.4 16.2a.6.6 0 0 0-.6.6v2.4a.6.6 0 0 0 1.2 0v-2.4a.6.6 0 0 0-.6-.6m0-6a.6.6 0 0 0-.6.6v2.4a.6.6 0 0 0 1.2 0v-2.4a.6.6 0 0 0-.6-.6m0-6a.6.6 0 0 0-.6.6v2.4a.6.6 0 0 0 1.2 0V4.8a.6.6 0 0 0-.6-.6" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCouponDefault({ 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.2 4.05c1.01 0 1.864.038 2.569.162.707.125 1.328.348 1.82.769.991.85 1.16 2.253 1.16 4.02v.998a.75.75 0 0 1-.75.75 1.751 1.751 0 0 0 0 3.501.75.75 0 0 1 .75.75c0 1.766-.169 3.17-1.16 4.02-.492.42-1.113.643-1.82.768-.705.125-1.56.162-2.569.162h-10c-.993 0-1.866-.005-2.601-.075-.731-.069-1.405-.207-1.965-.52-1.234-.69-1.584-2.01-1.584-3.855V15a.75.75 0 0 1 .75-.75 1.751 1.751 0 0 0 0-3.5.75.75 0 0 1-.75-.75v-.5c0-1.864.357-3.327 1.464-4.271C3.584 4.316 5.18 4.05 7.2 4.05zM8.4 16.2a.6.6 0 0 0-.6.6v2.4a.6.6 0 0 0 1.2 0v-2.4a.6.6 0 0 0-.6-.6m0-6a.6.6 0 0 0-.6.6v2.4a.6.6 0 0 0 1.2 0v-2.4a.6.6 0 0 0-.6-.6m0-6a.6.6 0 0 0-.6.6v2.4a.6.6 0 0 0 1.2 0V4.8a.6.6 0 0 0-.6-.6" }) }));
 }
 exports.default = IconCouponDefault;