@reitwagen/design-components 0.2.2 → 0.3.0

package/dist/components/Icons/IconSmileDefault.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconSmileDefault({ 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: "#FFDB70", d: "M20 11.8a8.2 8.2 0 1 1-16.4 0 8.2 8.2 0 0 1 16.4 0" }), (0, jsx_runtime_1.jsx)("path", { fill: "#FF763F", d: "M15.604 12.155c.599-.162 1.195.286 1.091.897-.063.372-.152.728-.265.975a4.5 4.5 0 0 1-1.087 1.463 5.1 5.1 0 0 1-1.625.978 5.5 5.5 0 0 1-1.918.343 5.5 5.5 0 0 1-1.918-.343 5.1 5.1 0 0 1-1.625-.978 4.5 4.5 0 0 1-1.087-1.463c-.113-.247-.202-.603-.265-.975-.104-.611.492-1.059 1.09-.897 1.067.289 2.63.647 3.805.647s2.738-.358 3.804-.647" }), (0, jsx_runtime_1.jsx)("ellipse", { cx: 9.522, cy: 10.206, fill: "#3C3C4A", rx: 0.911, ry: 1.139 }), (0, jsx_runtime_1.jsx)("ellipse", { cx: 14.078, cy: 10.206, fill: "#3C3C4A", rx: 0.911, ry: 1.139 }), (0, jsx_runtime_1.jsx)("path", { fill: "#fff", d: "M15.444 12.255v.75c0 .373-.228.704-.59.788-.554.13-1.496.285-2.826.285s-2.272-.155-2.825-.284c-.363-.085-.592-.416-.592-.789v-.694c.998.246 2.224.491 3.189.491 1.116 0 2.582-.326 3.64-.605q.003.03.004.058" })] }), (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" }) }) })] }));
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconStarOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconStarOff.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAqB3E;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"IconStarOff.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconStarOff.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,2CAqB3E;AAED,eAAe,WAAW,CAAC"}

package/dist/components/Icons/IconStarOff.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconStarOff({ 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: "m13.104 4.177 1.828 3.65c.179.36.524.608.925.665l4.088.589c1.01.145 1.412 1.37.681 2.07l-2.956 2.841c-.29.28-.423.681-.354 1.076l.698 4.01c.172.992-.884 1.749-1.787 1.28l-3.654-1.895a1.25 1.25 0 0 0-1.146 0l-3.654 1.894c-.903.47-1.959-.287-1.786-1.28l.697-4.01a1.2 1.2 0 0 0-.354-1.075l-2.956-2.84c-.731-.701-.33-1.926.68-2.071l4.089-.589c.4-.057.747-.306.926-.664l1.827-3.651c.452-.903 1.756-.903 2.208 0", clipRule: "evenodd" }) }));
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconStarOn.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconStarOn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAuB1E;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"IconStarOn.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconStarOn.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAuB1E;AAED,eAAe,UAAU,CAAC"}

package/dist/components/Icons/IconStarOn.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconStarOn({ 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: "m13.104 4.177 1.828 3.65c.179.36.524.608.925.665l4.088.589c1.01.145 1.412 1.37.681 2.07l-2.956 2.841c-.29.28-.423.681-.354 1.076l.698 4.01c.172.992-.884 1.749-1.787 1.28l-3.654-1.895a1.25 1.25 0 0 0-1.146 0l-3.654 1.894c-.903.47-1.959-.287-1.786-1.28l.697-4.01a1.2 1.2 0 0 0-.354-1.075l-2.956-2.84c-.731-.701-.33-1.926.68-2.071l4.089-.589c.4-.057.747-.306.926-.664l1.827-3.651c.452-.903 1.756-.903 2.208 0", clipRule: "evenodd" }) }));
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconThumbDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThumbDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA4BP;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"IconThumbDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThumbDefault.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,2CA4BP;AAED,eAAe,gBAAgB,CAAC"}

package/dist/components/Icons/IconThumbDefault.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconThumbDefault({ 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: "#FFDB70", d: "M9.675 5.413c0-1.801 1.32-2.226 2.058-2.213 1.499 0 1.73 1.248 1.854 1.912.154.826.003 2.802-.066 3.709l-.002.026q.148-.035.32-.036h2.582c.969 0 1.758.79 1.758 1.758 0 .501-.16.954-.476 1.274.649.287 1.097.887 1.097 1.58 0 .636-.287 1.194-.848 1.503.512.317.848.848.848 1.449 0 .688-.337 1.285-.992 1.574.232.24.37.596.37 1.114 0 .857-.601 1.555-1.758 1.555h-2.396l-.083-.002h-1.946c-3.186.052-5.62-.641-6.553-2.505-.743-1.488-.743-4.474-.489-5.492.25-.996 1.606-1.964 2.875-2.81.41-.396.67-.749 1.031-1.328.311-.622.622-.932.816-3.068" }), (0, jsx_runtime_1.jsx)("path", { fill: "#F9AE00", d: "M13.83 10.053c-.635.02-2.485-.252-2.485 1.223 0 .777.29 1.214.64 1.456-.35.156-.66.732-.66 1.447 0 .796.66 1.378.66 1.378s-.66.641-.66 1.408c0 .579.254 1.006.66 1.297-.22.125-.66.555-.66 1.285 0 .87.813.979 2.405 1.044-.776-.144-1.152-.37-1.152-1.044 0-.223.01-.504.29-.76h4.068a.31.31 0 0 0 0-.62h-3.983a1.95 1.95 0 0 1-.375-1.172c0-.258.097-.676.339-1.04h4.02a.31.31 0 0 0 0-.62h-3.883c-.32-.342-.476-.824-.476-1.29 0-.223.071-.563.245-.885h4.113a.31.31 0 0 0 0-.622h-3.835c-.35-.37-.524-.921-.524-1.348 0-.503.275-.994 1.253-1.124z" })] }), (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" }) }) })] }));
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconThunder.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThunder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,MAAW,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,2CAmB3E;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"IconThunder.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconThunder.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,2CAmB3E;AAED,eAAe,WAAW,CAAC"}

package/dist/components/Icons/IconThunder.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconThunder({ 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: "M15.793 3.131a.9.9 0 0 0-.078-.595.97.97 0 0 0-.434-.432 1 1 0 0 0-.612-.09.96.96 0 0 0-.537.29L5.244 11.88a.91.91 0 0 0-.195.914.95.95 0 0 0 .276.408c.126.11.28.187.446.221l3.891.214-1.455 6.965c-.042.2-.015.41.078.595a.97.97 0 0 0 .434.432c.19.094.404.126.612.09a.96.96 0 0 0 .537-.29l8.888-9.576a.91.91 0 0 0 .195-.914.95.95 0 0 0-.276-.408 1 1 0 0 0-.446-.221l-3.771-.788z", clipRule: "evenodd" }) }));
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconTimeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconTimeDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CA4BP;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IconTimeDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconTimeDefault.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,2CA4BP;AAED,eAAe,eAAe,CAAC"}

package/dist/components/Icons/IconTimeDefault.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconTimeDefault({ 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: "M21.25 12A9.25 9.25 0 0 1 12 21.25 9.25 9.25 0 0 1 2.75 12 9.25 9.25 0 0 1 12 2.75 9.25 9.25 0 0 1 21.25 12", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m15.431 14.943-3.77-2.25V7.848" })] }));
 }

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IconVoteDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconVoteDefault.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,UAAU,KAAM,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,KAAU,EACV,MAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,2CAiBP;AAED,eAAe,eAAe,CAAC"}
+{"version":3,"file":"IconVoteDefault.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/IconVoteDefault.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/IconVoteDefault.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconVoteDefault({ className, width = 24, height = 24, ...props }) {
     return ((0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M19.54 2.75a3.053 3.053 0 0 1 3.052 3.053v.92a3.05 3.05 0 0 1-1.842 2.801v6.87a5.356 5.356 0 0 1-5.355 5.356H8.947a5.356 5.356 0 0 1-5.355-5.355v-6.87A3.05 3.05 0 0 1 1.75 6.723v-.921A3.053 3.053 0 0 1 4.803 2.75zm-4.01 8.22a.75.75 0 0 0-1.06 0l-3.157 3.153-1.31-1.31a.75.75 0 1 0-1.06 1.06l1.84 1.84a.75.75 0 0 0 1.06.002l3.687-3.685a.75.75 0 0 0 0-1.06" }) }));
 }

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

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

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

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

package/dist/components/Icons/IconYoutubeDefault.js

@@ -1,6 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
 function IconYoutubeDefault({ 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.423 5h-.847c-1.336.01-5.44.068-6.61.416-.775.23-1.385.908-1.592 1.769-.311 1.29-.365 3.742-.374 4.55v.53c.01.806.063 3.258.374 4.549.207.86.817 1.538 1.592 1.768 1.08.322 4.66.396 6.255.413l.945.005c.943-.004 5.607-.042 6.866-.418.775-.23 1.385-.908 1.592-1.768.279-1.155.351-3.24.37-4.244L21 11.9c-.004-.556-.038-3.317-.376-4.715-.207-.861-.817-1.539-1.591-1.769-1.17-.348-5.275-.406-6.61-.416m2.109 7.464a.53.53 0 0 0 0-.928l-4.245-2.348a.53.53 0 0 0-.787.464v4.696c0 .404.434.66.787.464z", clipRule: "evenodd" }) }));
 }

package/dist/components/Toggle/Toggle.d.ts

@@ -1,15 +1,29 @@
 import { ButtonHTMLAttributes } from "react";
 import { type VariantProps } from "class-variance-authority";
-declare const toggleVariants: (props?: ({
-    disabled?: boolean | null | undefined;
-    checked?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+import { toggleVariants } from "./Toggle.styles";
 export interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "disabled">, VariantProps<typeof toggleVariants> {
+    /**
+     * 토글 상태가 변경될 때 호출되는 이벤트 핸들러
+     */
     onCheckedChange?: (checked: boolean) => void;
 }
+/**
+ * `Toggle` 컴포넌트는 즉각적인 상태 전환(켜기/끄기)을 위한 요소로, 활성화/비활성화 기능을 나타냅니다.
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ * // Controlled
+ *  <Toggle
+ *    checked={checked}
+ *    onCheckedChange={setChecked}
+ *  />
+ *  // UnControlled
+ *  <Toggle defaultChecked={true}
+ *  />
+ * ```
+ */
 export declare function Toggle({ checked: controlledChecked, defaultChecked, disabled, onCheckedChange, ...props }: ToggleProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Toggle {
     var displayName: string;
 }
-export {};
 //# sourceMappingURL=Toggle.d.ts.map

package/dist/components/Toggle/Toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAY,MAAM,OAAO,CAAC;AACvD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,cAAc;;;8EAmCnB,CAAC;AA6BF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAmCb;yBAzCe,MAAM"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAY,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAiB,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED;;;;;;;;;;;;;;GAcG;AAEH,wBAAgB,MAAM,CAAC,EACrB,OAAO,EAAE,iBAAiB,EAC1B,cAAc,EACd,QAAQ,EACR,eAAe,EACf,GAAG,KAAK,EACT,EAAE,WAAW,2CAmCb;yBAzCe,MAAM"}

package/dist/components/Toggle/Toggle.js

@@ -4,64 +4,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Toggle = Toggle;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const class_variance_authority_1 = require("class-variance-authority");
 const style_1 = require("../../utils/style");
-const toggleVariants = (0, class_variance_authority_1.cva)("ui:focus:ring-0 ui:ring-0 ui:h-[31px] ui:w-[51px] ui:rounded-full ui:inline-flex ui:items-center ui:rounded-full ui:transition-colors ui:duration-100", {
-    variants: {
-        disabled: {
-            true: "ui:pointer-events-none",
-            false: "ui:cursor-pointer",
-        },
-        checked: {
-            true: "ui:bg-blue-700",
-            false: "ui:bg-gray-100",
-        },
-    },
-    compoundVariants: [
-        {
-            disabled: false,
-            checked: false,
-            className: "ui:active:bg-gray-200",
-        },
-        {
-            disabled: true,
-            checked: false,
-            className: "ui:bg-gray-50",
-        },
-        {
-            disabled: true,
-            checked: true,
-            className: "ui:bg-blue-300",
-        },
-    ],
-    defaultVariants: {
-        disabled: false,
-        checked: false,
-    },
-});
-const thumbVariants = (0, class_variance_authority_1.cva)("ui:focus:ring-0 ui:ring-0 ui:bg-white ui:rounded-full ui:transition-transform", {
-    variants: {
-        disabled: {
-            true: "",
-            false: "",
-        },
-        checked: {
-            true: "ui:w-[25px] ui:h-[25px] ui:translate-x-6",
-            false: "ui:w-[21px] ui:h-[21px] ui:translate-x-1",
-        },
-    },
-    compoundVariants: [
-        {
-            disabled: false,
-            checked: false,
-            className: "ui:active:bg-gray-100",
-        },
-    ],
-    defaultVariants: {
-        disabled: false,
-        checked: false,
-    },
-});
+const Toggle_styles_1 = require("./Toggle.styles");
+/**
+ * `Toggle` 컴포넌트는 즉각적인 상태 전환(켜기/끄기)을 위한 요소로, 활성화/비활성화 기능을 나타냅니다.
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ * // Controlled
+ *  <Toggle
+ *    checked={checked}
+ *    onCheckedChange={setChecked}
+ *  />
+ *  // UnControlled
+ *  <Toggle defaultChecked={true}
+ *  />
+ * ```
+ */
 function Toggle({ checked: controlledChecked, defaultChecked, disabled, onCheckedChange, ...props }) {
     const [uncontrolledChecked, setUncontrolledChecked] = (0, react_1.useState)(defaultChecked);
     const isChecked = controlledChecked ?? uncontrolledChecked;
@@ -74,9 +33,9 @@ function Toggle({ checked: controlledChecked, defaultChecked, disabled, onChecke
         }
         onCheckedChange?.(!isChecked);
     };
-    return ((0, jsx_runtime_1.jsx)("button", { role: "switch", type: "button", onClick: handleClick, "aria-checked": isChecked, className: (0, style_1.cn)(toggleVariants({
+    return ((0, jsx_runtime_1.jsx)("button", { role: "switch", type: "button", onClick: handleClick, "aria-checked": isChecked, className: (0, style_1.cn)((0, Toggle_styles_1.toggleVariants)({
             checked: isChecked,
             disabled,
-        })), disabled: disabled || undefined, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: thumbVariants({ checked: isChecked, disabled }) }) }));
+        })), disabled: disabled || undefined, ...props, children: (0, jsx_runtime_1.jsx)("span", { className: (0, Toggle_styles_1.thumbVariants)({ checked: isChecked, disabled }) }) }));
 }
 Toggle.displayName = "Toggle";

package/dist/components/Toggle/Toggle.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const toggleVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const thumbVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    checked?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=Toggle.styles.d.ts.map

package/dist/components/Toggle/Toggle.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;8EAmC1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;8EAyBzB,CAAC"}

package/dist/components/Toggle/Toggle.styles.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.thumbVariants = exports.toggleVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.toggleVariants = (0, class_variance_authority_1.cva)("ui:focus:ring-0 ui:ring-0 ui:h-[31px] ui:w-[51px] ui:rounded-full ui:inline-flex ui:items-center ui:rounded-full ui:transition-colors ui:duration-100", {
+    variants: {
+        disabled: {
+            true: "ui:pointer-events-none",
+            false: "ui:cursor-pointer",
+        },
+        checked: {
+            true: "ui:bg-blue-700",
+            false: "ui:bg-gray-100",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            checked: false,
+            className: "ui:active:bg-gray-200",
+        },
+        {
+            disabled: true,
+            checked: false,
+            className: "ui:bg-gray-50",
+        },
+        {
+            disabled: true,
+            checked: true,
+            className: "ui:bg-blue-300",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});
+exports.thumbVariants = (0, class_variance_authority_1.cva)("ui:focus:ring-0 ui:ring-0 ui:bg-white ui:rounded-full ui:transition-transform", {
+    variants: {
+        disabled: {
+            true: "",
+            false: "",
+        },
+        checked: {
+            true: "ui:w-[25px] ui:h-[25px] ui:translate-x-6",
+            false: "ui:w-[21px] ui:h-[21px] ui:translate-x-1",
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            checked: false,
+            className: "ui:active:bg-gray-100",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});