@reitwagen/design-components 0.2.1 → 0.3.0

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

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

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

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

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

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

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

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

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

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

package/dist/components/Icons/IconArrowRight.js

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

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

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

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

package/dist/components/Icons/IconArrowUp.js

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

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

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

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

package/dist/components/Icons/IconBikeDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconBikeDefault({ 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.jsxs)("g", { clipPath: "url(#prefix__a)", children: [(0, jsx_runtime_1.jsx)("path", { fill: "#3C3C4A", fillRule: "evenodd", d: "M5.598 12.226a2.77 2.77 0 0 1 2.624 2.762l-.004.142a2.77 2.77 0 0 1-2.762 2.623l-.142-.003a2.77 2.77 0 0 1-2.62-2.62l-.003-.142a2.77 2.77 0 0 1 2.765-2.766zm-.142 2.07a.692.692 0 1 0 .071.004z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "#3C3C4A", d: "M19.234 12.222A2.77 2.77 0 0 1 22 14.988a2.77 2.77 0 0 1-2.766 2.765 2.77 2.77 0 0 1-2.765-2.765 2.77 2.77 0 0 1 2.765-2.766" }), (0, jsx_runtime_1.jsx)("path", { fill: "#9D9DA8", d: "M5.579 14.627a.346.346 0 0 0 .481.087l2.507-1.737a.346.346 0 0 0-.394-.568l-2.507 1.737a.346.346 0 0 0-.087.481M19.252 14.48a.345.345 0 0 1-.393-.15l-1.419-2.3a.346.346 0 0 1 .59-.359l1.419 2.299a.346.346 0 0 1-.197.51m-.724.326a.35.35 0 0 1-.33-.075l-1.729-1.56a.345.345 0 1 1 .464-.513l1.729 1.56a.345.345 0 0 1-.134.588" }), (0, jsx_runtime_1.jsx)("path", { fill: "#9D9DA8", d: "M5.81 15.059a.345.345 0 0 0 .409.268l3.004-.629a.345.345 0 1 0-.141-.677l-3.005.629a.345.345 0 0 0-.267.409" }), (0, jsx_runtime_1.jsx)("path", { fill: "#4878FF", fillRule: "evenodd", d: "M14.527 6.122a.35.35 0 0 1 .39-.099l1.962.769c2.153.842 3.638 2.432 3.785 4.738a.347.347 0 0 1-.424.358 4.2 4.2 0 0 0-1.572-.067c-1.73.248-3.154 1.618-3.462 3.331a4.3 4.3 0 0 0-.058 1.093.347.347 0 0 1-.345.373h-4.87a1.04 1.04 0 0 1-1.037-1.038v-.818c0-1.215-.595-1.91-1.59-2.603l-1.75-1.048L3.333 12l-.7.76a.345.345 0 1 1-.575-.383l.691-1.038q.057-.085.152-.126l1.699-.729-1.745-1.079-.006-.004-.011-.008a.4.4 0 0 1-.042-.034l-.008-.008a.3.3 0 0 1-.035-.042q-.01-.015-.018-.032-.008-.014-.015-.029a.3.3 0 0 1-.019-.053L2.7 9.188a.35.35 0 0 1-.002-.145l.002-.009.005-.02.004-.013a.3.3 0 0 1 .034-.072l.004-.006.007-.01a.34.34 0 0 1 .191-.135l.019-.005a.4.4 0 0 1 .069-.007h3.806c.109 0 .212.051.277.138l.933 1.244h2.713c.423-1.191 1.914-2.074 3.682-2.074.348 0 .693.035 1.025.102l-.976-1.655a.35.35 0 0 1 .034-.4m3.392 2.046c-.08.646.143 1.33.704 1.842.28.255.637.405 1.012.46a5.3 5.3 0 0 0-1.716-2.302", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M5.456 16.025a1.04 1.04 0 0 1-1.037-1.037c0-.572.465-1.037 1.037-1.037s1.037.465 1.037 1.037-.465 1.037-1.037 1.037M19.234 13.951c.572 0 1.038.465 1.038 1.037s-.466 1.037-1.038 1.037a1.038 1.038 0 0 1 0-2.074" }), (0, jsx_runtime_1.jsx)("path", { fill: "#A0CBFF", fillRule: "evenodd", d: "M17.949 7.318c1.307.763 2.24 1.878 2.58 3.337a2.444 2.444 0 0 1-2.58-3.337", clipRule: "evenodd" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "prefix__a", children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconBikeDefault({ 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.jsxs)("g", { clipPath: "url(#prefix__a)", children: [(0, jsx_runtime_1.jsx)("path", { fill: "#3C3C4A", fillRule: "evenodd", d: "M5.598 12.226a2.77 2.77 0 0 1 2.624 2.762l-.004.142a2.77 2.77 0 0 1-2.762 2.623l-.142-.003a2.77 2.77 0 0 1-2.62-2.62l-.003-.142a2.77 2.77 0 0 1 2.765-2.766zm-.142 2.07a.692.692 0 1 0 .071.004z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "#3C3C4A", d: "M19.234 12.222A2.77 2.77 0 0 1 22 14.988a2.77 2.77 0 0 1-2.766 2.765 2.77 2.77 0 0 1-2.765-2.765 2.77 2.77 0 0 1 2.765-2.766" }), (0, jsx_runtime_1.jsx)("path", { fill: "#9D9DA8", d: "M5.579 14.627a.346.346 0 0 0 .481.087l2.507-1.737a.346.346 0 0 0-.394-.568l-2.507 1.737a.346.346 0 0 0-.087.481M19.252 14.48a.345.345 0 0 1-.393-.15l-1.419-2.3a.346.346 0 0 1 .59-.359l1.419 2.299a.346.346 0 0 1-.197.51m-.724.326a.35.35 0 0 1-.33-.075l-1.729-1.56a.345.345 0 1 1 .464-.513l1.729 1.56a.345.345 0 0 1-.134.588" }), (0, jsx_runtime_1.jsx)("path", { fill: "#9D9DA8", d: "M5.81 15.059a.345.345 0 0 0 .409.268l3.004-.629a.345.345 0 1 0-.141-.677l-3.005.629a.345.345 0 0 0-.267.409" }), (0, jsx_runtime_1.jsx)("path", { fill: "#4878FF", fillRule: "evenodd", d: "M14.527 6.122a.35.35 0 0 1 .39-.099l1.962.769c2.153.842 3.638 2.432 3.785 4.738a.347.347 0 0 1-.424.358 4.2 4.2 0 0 0-1.572-.067c-1.73.248-3.154 1.618-3.462 3.331a4.3 4.3 0 0 0-.058 1.093.347.347 0 0 1-.345.373h-4.87a1.04 1.04 0 0 1-1.037-1.038v-.818c0-1.215-.595-1.91-1.59-2.603l-1.75-1.048L3.333 12l-.7.76a.345.345 0 1 1-.575-.383l.691-1.038q.057-.085.152-.126l1.699-.729-1.745-1.079-.006-.004-.011-.008a.4.4 0 0 1-.042-.034l-.008-.008a.3.3 0 0 1-.035-.042q-.01-.015-.018-.032-.008-.014-.015-.029a.3.3 0 0 1-.019-.053L2.7 9.188a.35.35 0 0 1-.002-.145l.002-.009.005-.02.004-.013a.3.3 0 0 1 .034-.072l.004-.006.007-.01a.34.34 0 0 1 .191-.135l.019-.005a.4.4 0 0 1 .069-.007h3.806c.109 0 .212.051.277.138l.933 1.244h2.713c.423-1.191 1.914-2.074 3.682-2.074.348 0 .693.035 1.025.102l-.976-1.655a.35.35 0 0 1 .034-.4m3.392 2.046c-.08.646.143 1.33.704 1.842.28.255.637.405 1.012.46a5.3 5.3 0 0 0-1.716-2.302", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M5.456 16.025a1.04 1.04 0 0 1-1.037-1.037c0-.572.465-1.037 1.037-1.037s1.037.465 1.037 1.037-.465 1.037-1.037 1.037M19.234 13.951c.572 0 1.038.465 1.038 1.037s-.466 1.037-1.038 1.037a1.038 1.038 0 0 1 0-2.074" }), (0, jsx_runtime_1.jsx)("path", { fill: "#A0CBFF", fillRule: "evenodd", d: "M17.949 7.318c1.307.763 2.24 1.878 2.58 3.337a2.444 2.444 0 0 1-2.58-3.337", clipRule: "evenodd" })] }), (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: "prefix__a", children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })] }));
 }
 exports.default = IconBikeDefault;

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

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

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

package/dist/components/Icons/IconBookmarkOff.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconBookmarkOff({ 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.739 6.154c0-2.751-1.88-3.854-4.589-3.854H8.791C6.167 2.3 4.2 3.328 4.2 5.97v14.724a.95.95 0 0 0 1.413.828l6.382-3.58 6.327 3.574a.95.95 0 0 0 1.417-.827z", clipRule: "evenodd" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconBookmarkOff({ 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.739 6.154c0-2.751-1.88-3.854-4.589-3.854H8.791C6.167 2.3 4.2 3.328 4.2 5.97v14.724a.95.95 0 0 0 1.413.828l6.382-3.58 6.327 3.574a.95.95 0 0 0 1.417-.827z", clipRule: "evenodd" }) }));
 }
 exports.default = IconBookmarkOff;

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

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

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

package/dist/components/Icons/IconBookmarkOn.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconBookmarkOn({ 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", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.739 6.154c0-2.751-1.88-3.854-4.589-3.854H8.791C6.167 2.3 4.2 3.328 4.2 5.97v14.724a.95.95 0 0 0 1.413.828l6.382-3.58 6.327 3.574a.95.95 0 0 0 1.417-.827z", clipRule: "evenodd" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconBookmarkOn({ 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", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.739 6.154c0-2.751-1.88-3.854-4.589-3.854H8.791C6.167 2.3 4.2 3.328 4.2 5.97v14.724a.95.95 0 0 0 1.413.828l6.382-3.58 6.327 3.574a.95.95 0 0 0 1.417-.827z", clipRule: "evenodd" }) }));
 }
 exports.default = IconBookmarkOn;

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

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

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

package/dist/components/Icons/IconCafeDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCafeDefault({ 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, fillRule: "evenodd", d: "M18.534 9.945c0 .101.08.184.182.187a3.548 3.548 0 0 1-.182 7.09h-.448c-.357 0-.683.194-.884.488a7.64 7.64 0 0 1-13.95-4.308v-3.366a1 1 0 0 1 1-1h13.73c.305 0 .552.247.552.552zm0 3.457a7.6 7.6 0 0 1-.234 1.876.245.245 0 0 0 .234.307 1.91 1.91 0 0 0 .955-3.565c-.478-.277-.955.192-.955.744z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M10.524 3.096a.794.794 0 0 1 1.076.32l.145.267c.39.718.292 1.603-.243 2.22a.37.37 0 0 0-.046.423l.144.267a.794.794 0 0 1-1.396.757l-.145-.267a1.96 1.96 0 0 1 .243-2.22.37.37 0 0 0 .046-.423l-.144-.267a.795.795 0 0 1 .32-1.077" })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCafeDefault({ 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", fillRule: "evenodd", d: "M18.534 9.945c0 .101.08.184.182.187a3.548 3.548 0 0 1-.182 7.09h-.448c-.357 0-.683.194-.884.488a7.64 7.64 0 0 1-13.95-4.308v-3.366a1 1 0 0 1 1-1h13.73c.305 0 .552.247.552.552zm0 3.457a7.6 7.6 0 0 1-.234 1.876.245.245 0 0 0 .234.307 1.91 1.91 0 0 0 .955-3.565c-.478-.277-.955.192-.955.744z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M10.524 3.096a.794.794 0 0 1 1.076.32l.145.267c.39.718.292 1.603-.243 2.22a.37.37 0 0 0-.046.423l.144.267a.794.794 0 0 1-1.396.757l-.145-.267a1.96 1.96 0 0 1 .243-2.22.37.37 0 0 0 .046-.423l-.144-.267a.795.795 0 0 1 .32-1.077" })] }));
 }
 exports.default = IconCafeDefault;

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

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

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

package/dist/components/Icons/IconCalendarDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCalendarDefault({ 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: "M3.093 9.404h17.824M16.442 13.31h.01M12.005 13.31h.009M7.558 13.31h.01M16.442 17.196h.01M12.005 17.196h.009M7.558 17.196h.01M16.044 2v3.29M7.965 2v3.29" }), (0, jsx_runtime_1.jsx)("path", { stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M16.238 3.58H7.771C4.834 3.58 3 5.214 3 8.221v9.05C3 20.326 4.834 22 7.771 22h8.458C19.175 22 21 20.355 21 17.348V8.222c.01-3.007-1.816-4.643-4.762-4.643", clipRule: "evenodd" })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCalendarDefault({ 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: "M3.093 9.404h17.824M16.442 13.31h.01M12.005 13.31h.009M7.558 13.31h.01M16.442 17.196h.01M12.005 17.196h.009M7.558 17.196h.01M16.044 2v3.29M7.965 2v3.29" }), (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M16.238 3.58H7.771C4.834 3.58 3 5.214 3 8.221v9.05C3 20.326 4.834 22 7.771 22h8.458C19.175 22 21 20.355 21 17.348V8.222c.01-3.007-1.816-4.643-4.762-4.643", clipRule: "evenodd" })] }));
 }
 exports.default = IconCalendarDefault;

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

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

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

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCallDefault({ 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.384 2.48a2.4 2.4 0 0 1 2.793 1.134l.089.18.794 1.764a3 3 0 0 1-.53 3.262l-.16.158-1.252 1.168c-.225.214-.056 1.04.76 2.454.734 1.272 1.332 1.866 1.626 1.898h.052l.063-.012 2.46-.752a1.8 1.8 0 0 1 1.877.53l.11.137 1.628 2.256a2.4 2.4 0 0 1-.15 2.997l-.147.15-.65.618a4.2 4.2 0 0 1-4.458.846c-2.322-.936-4.432-3.075-6.348-6.394-1.92-3.328-2.718-6.228-2.362-8.712a4.2 4.2 0 0 1 2.713-3.347l.232-.077z" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconCallDefault({ 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.384 2.48a2.4 2.4 0 0 1 2.793 1.134l.089.18.794 1.764a3 3 0 0 1-.53 3.262l-.16.158-1.252 1.168c-.225.214-.056 1.04.76 2.454.734 1.272 1.332 1.866 1.626 1.898h.052l.063-.012 2.46-.752a1.8 1.8 0 0 1 1.877.53l.11.137 1.628 2.256a2.4 2.4 0 0 1-.15 2.997l-.147.15-.65.618a4.2 4.2 0 0 1-4.458.846c-2.322-.936-4.432-3.075-6.348-6.394-1.92-3.328-2.718-6.228-2.362-8.712a4.2 4.2 0 0 1 2.713-3.347l.232-.077z" }) }));
 }
 exports.default = IconCallDefault;

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

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

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

package/dist/components/Icons/IconCameraDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconCameraDefault({ 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: "M12 2c.652 0 1.31.026 1.876.079.54.05 1.08.131 1.442.275.758.302 1.194.953 1.466 1.44.136.243.264.51.353.682.106.208.162.292.188.32.114.125.263.218.42.28.16.063.296.08.358.08A3.9 3.9 0 0 1 22 9.052v7.795a4.97 4.97 0 0 1-4.97 4.97H6.97A4.97 4.97 0 0 1 2 16.847V9.052a3.9 3.9 0 0 1 3.898-3.896c.06 0 .197-.017.357-.08.156-.062.305-.155.421-.28l.063-.092c.03-.05.071-.123.125-.228.088-.172.215-.44.351-.682.272-.487.709-1.138 1.467-1.44.362-.144.903-.225 1.442-.275.567-.053 1.225-.08 1.876-.08m0 7.199a3.93 3.93 0 1 0 0 7.859 3.93 3.93 0 0 0 0-7.859m5.495-.7a1 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 IconCameraDefault({ 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: "M12 2c.652 0 1.31.026 1.876.079.54.05 1.08.131 1.442.275.758.302 1.194.953 1.466 1.44.136.243.264.51.353.682.106.208.162.292.188.32.114.125.263.218.42.28.16.063.296.08.358.08A3.9 3.9 0 0 1 22 9.052v7.795a4.97 4.97 0 0 1-4.97 4.97H6.97A4.97 4.97 0 0 1 2 16.847V9.052a3.9 3.9 0 0 1 3.898-3.896c.06 0 .197-.017.357-.08.156-.062.305-.155.421-.28l.063-.092c.03-.05.071-.123.125-.228.088-.172.215-.44.351-.682.272-.487.709-1.138 1.467-1.44.362-.144.903-.225 1.442-.275.567-.053 1.225-.08 1.876-.08m0 7.199a3.93 3.93 0 1 0 0 7.859 3.93 3.93 0 0 0 0-7.859m5.495-.7a1 1 0 0 0 0 2h.01a1 1 0 0 0 0-2z", clipRule: "evenodd" }) }));
 }
 exports.default = IconCameraDefault;

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

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

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

package/dist/components/Icons/IconChatDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconChatDefault({ 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: "#A0CBFF", d: "m17.999 16.605.332 2.686c.085.705-.672 1.198-1.276.833l-3.56-2.117q-.587 0-1.148-.076a4.13 4.13 0 0 0 1.003-2.686c0-2.414-2.091-4.369-4.675-4.369a4.83 4.83 0 0 0-2.652.774 5 5 0 0 1-.034-.646C5.989 7.136 9.346 4 13.494 4S21 7.136 21 11.004c0 2.295-1.181 4.326-3 5.601", opacity: 0.4 }), (0, jsx_runtime_1.jsx)("path", { fill: "#4878FF", d: "M14.216 14.178a4.9 4.9 0 0 1-1.189 3.184c-.997 1.21-2.58 1.985-4.352 1.985l-2.63 1.561c-.443.272-1.007-.1-.947-.614l.252-1.985c-1.35-.937-2.216-2.438-2.216-4.13 0-1.774.947-3.335 2.397-4.262A5.73 5.73 0 0 1 8.675 9c3.063 0 5.54 2.317 5.54 5.178" }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M11.857 14.007a.711.711 0 1 1-1.422 0 .711.711 0 0 1 1.422 0M9.416 14.007a.711.711 0 1 1-1.423 0 .711.711 0 0 1 1.422 0M6.927 14.007a.711.711 0 1 1-1.422 0 .711.711 0 0 1 1.422 0" })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconChatDefault({ 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: "#A0CBFF", d: "m17.999 16.605.332 2.686c.085.705-.672 1.198-1.276.833l-3.56-2.117q-.587 0-1.148-.076a4.13 4.13 0 0 0 1.003-2.686c0-2.414-2.091-4.369-4.675-4.369a4.83 4.83 0 0 0-2.652.774 5 5 0 0 1-.034-.646C5.989 7.136 9.346 4 13.494 4S21 7.136 21 11.004c0 2.295-1.181 4.326-3 5.601", opacity: 0.4 }), (0, jsx_runtime_1.jsx)("path", { fill: "#4878FF", d: "M14.216 14.178a4.9 4.9 0 0 1-1.189 3.184c-.997 1.21-2.58 1.985-4.352 1.985l-2.63 1.561c-.443.272-1.007-.1-.947-.614l.252-1.985c-1.35-.937-2.216-2.438-2.216-4.13 0-1.774.947-3.335 2.397-4.262A5.73 5.73 0 0 1 8.675 9c3.063 0 5.54 2.317 5.54 5.178" }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M11.857 14.007a.711.711 0 1 1-1.422 0 .711.711 0 0 1 1.422 0M9.416 14.007a.711.711 0 1 1-1.423 0 .711.711 0 0 1 1.422 0M6.927 14.007a.711.711 0 1 1-1.422 0 .711.711 0 0 1 1.422 0" })] }));
 }
 exports.default = IconChatDefault;

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

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

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