@reitwagen/design-components 0.2.1 → 0.3.0

package/dist/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkIconVariants = exports.checkboxVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.checkboxVariants = (0, class_variance_authority_1.cva)("ui:focus:ring-0 ui:ring-0 ui:w-[22px] ui:h-[22px] ui:rounded-full ui:flex ui:items-center ui:justify-center", {
+    variants: {
+        disabled: {
+            true: "ui:cursor-default",
+            false: "ui:cursor-pointer",
+        },
+        checked: {
+            true: "",
+            false: "ui:border-[1.5px]",
+        },
+    },
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: false,
+            className: "ui:bg-blue-700 ui:active:bg-blue-800",
+        },
+        {
+            checked: false,
+            disabled: false,
+            className: "ui:bg-white ui:border-gray-200 ui:active:bg-gray-100 ui:active:border-gray-300",
+        },
+        {
+            checked: true,
+            disabled: true,
+            className: "ui:bg-blue-300 ui:active:bg-blue-300",
+        },
+        {
+            checked: false,
+            disabled: true,
+            className: "ui:border-gray-100 ui:active:border-gray-100",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});
+exports.checkIconVariants = (0, class_variance_authority_1.cva)("", {
+    variants: {
+        disabled: {
+            true: "ui:text-gray-100",
+            false: "ui:text-white",
+        },
+        checked: {
+            true: "ui:text-white ui:active:text-gray-100",
+            false: "ui:text-gray-200 ui:active:text-gray-300",
+        },
+    },
+    compoundVariants: [
+        {
+            checked: true,
+            disabled: true,
+            className: "ui:active:text-white",
+        },
+        {
+            checked: false,
+            disabled: true,
+            className: "ui:active:text-gray-200",
+        },
+    ],
+    defaultVariants: {
+        disabled: false,
+        checked: false,
+    },
+});

package/dist/components/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/Checkbox/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+var Checkbox_1 = require("./Checkbox");
+Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return Checkbox_1.Checkbox; } });

package/dist/components/Chip/Chip.d.ts

@@ -1,15 +1,8 @@
 import { ElementType, ReactNode } from "react";
-import { PolymorphicComponentProps } from "../../types/props";
+import { ChildrenProps, PolymorphicComponentProps } from "../../types/props";
 import { VariantProps } from "class-variance-authority";
-declare const chipVariants: (props?: ({
-    variant?: "fill" | "text" | "line" | null | undefined;
-    size?: "large" | "medium" | "small" | null | undefined;
-    disabled?: boolean | null | undefined;
-    isSelected?: boolean | null | undefined;
-    isActive?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type ChipOwnProps = VariantProps<typeof chipVariants> & {
-    children?: ReactNode;
+import { chipVariants } from "./Chip.styles";
+type ChipOwnProps = VariantProps<typeof chipVariants> & ChildrenProps & {
     leftContent?: ReactNode;
     rightContent?: ReactNode;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG7D,QAAA,MAAM,YAAY;;;;;;8EA4HjB,CAAC;AAEF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IACtD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEF,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC/D,CAAC,EACD,YAAY,CACb,CAAC;AAEF,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACrD,SAAS,EACT,EAAE,EACF,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,2CAuBd;yBAnCe,IAAI"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,GACnD,aAAa,GAAG;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B,CAAC;AAEJ,KAAK,SAAS,CAAC,CAAC,SAAS,WAAW,IAAI,yBAAyB,CAC/D,CAAC,EACD,YAAY,CACb,CAAC;AAEF,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EACrD,SAAS,EACT,EAAE,EACF,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,CAAC,CAAC,2CAuBd;yBAnCe,IAAI"}

package/dist/components/Chip/Chip.js

@@ -2,132 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = Chip;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const class_variance_authority_1 = require("class-variance-authority");
 const style_1 = require("../../utils/style");
-const chipVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-center ui:justify-center ui:gap-1 ui:select-none", {
-    variants: {
-        variant: {
-            fill: "ui:transition-colors ui:duration-300 ui:rounded-full",
-            line: "ui:transition-colors ui:duration-100 ui:rounded-full",
-            text: "ui:rounded-[8px]",
-        },
-        size: {
-            large: "ui:text-button2 ui:h-[38px] ui:px-[18px] ui:py-[9px]",
-            medium: "ui:text-button3 ui:h-[32px] ui:px-[14px] ui:py-[7px]",
-            small: "ui:text-button3 ui:h-[26px] ui:px-[10px] ui:py-[4.5px]",
-        },
-        disabled: {
-            true: "ui:pointer-events-none",
-            false: "ui:cursor-pointer",
-        },
-        isSelected: {
-            true: "",
-            false: "",
-        },
-        isActive: {
-            true: "",
-            false: "",
-        },
-    },
-    compoundVariants: [
-        {
-            variant: "fill",
-            isSelected: false,
-            isActive: false,
-            className: "ui:bg-gray-50 ui:text-gray-500",
-        },
-        {
-            variant: "fill",
-            isSelected: true,
-            isActive: false,
-            className: "ui:bg-blue-50 ui:text-blue-700",
-        },
-        {
-            variant: "fill",
-            isSelected: false,
-            isActive: true,
-            className: "ui:bg-gray-100 ui:text-gray-600",
-        },
-        {
-            variant: "fill",
-            isSelected: true,
-            isActive: true,
-            className: "ui:bg-blue-100 ui:text-blue-800",
-        },
-        {
-            variant: "fill",
-            isSelected: true,
-            isActive: false,
-            disabled: true,
-            className: "ui:bg-blue-50 ui:text-blue-300",
-        },
-        {
-            variant: "fill",
-            isSelected: false,
-            isActive: false,
-            disabled: true,
-            className: "ui:bg-gray-50 ui:text-gray-300",
-        },
-        {
-            variant: "line",
-            isSelected: false,
-            isActive: false,
-            className: "ui:border ui:border-gray-100 ui:text-gray-500 ui:bg-white",
-        },
-        {
-            variant: "line",
-            isSelected: false,
-            isActive: true,
-            className: "ui:border ui:border-gray-200 ui:text-gray-700 ui:bg-gray-100",
-        },
-        {
-            variant: "line",
-            isSelected: true,
-            isActive: false,
-            className: "ui:text-white ui:bg-gray-700",
-        },
-        {
-            variant: "line",
-            isSelected: true,
-            isActive: true,
-            className: "ui:text-gray-200 ui:bg-gray-800",
-        },
-        {
-            variant: "text",
-            isSelected: false,
-            isActive: false,
-            className: "ui:text-gray-500 ui:bg-white",
-        },
-        {
-            variant: "text",
-            isSelected: true,
-            isActive: false,
-            className: "ui:text-gray-700 ui:bg-gray-100",
-        },
-        {
-            variant: "text",
-            isSelected: false,
-            isActive: true,
-            className: "ui:text-gray-600 ui:bg-gray-50",
-        },
-        {
-            variant: "text",
-            isSelected: true,
-            isActive: true,
-            className: "ui:text-gray-800 ui:bg-gray-200",
-        },
-    ],
-    defaultVariants: {
-        variant: "fill",
-        size: "large",
-        isSelected: false,
-        isActive: false,
-        disabled: false,
-    },
-});
+const Chip_styles_1 = require("./Chip.styles");
 function Chip({ className, as, children, variant, size, disabled, isSelected, isActive, leftContent, rightContent, ...props }) {
     const Component = as || "button";
-    return ((0, jsx_runtime_1.jsxs)(Component, { className: (0, style_1.cn)(chipVariants({
+    return ((0, jsx_runtime_1.jsxs)(Component, { className: (0, style_1.cn)((0, Chip_styles_1.chipVariants)({
             variant,
             disabled,
             isSelected,

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

@@ -0,0 +1,8 @@
+export declare const chipVariants: (props?: ({
+    variant?: "fill" | "text" | "line" | null | undefined;
+    size?: "small" | "large" | "medium" | null | undefined;
+    disabled?: boolean | null | undefined;
+    isSelected?: boolean | null | undefined;
+    isActive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=Chip.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;8EA4HxB,CAAC"}

package/dist/components/Chip/Chip.styles.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chipVariants = void 0;
+const class_variance_authority_1 = require("class-variance-authority");
+exports.chipVariants = (0, class_variance_authority_1.cva)("ui:flex ui:items-center ui:justify-center ui:gap-1 ui:select-none", {
+    variants: {
+        variant: {
+            fill: "ui:transition-colors ui:duration-300 ui:rounded-full",
+            line: "ui:transition-colors ui:duration-100 ui:rounded-full",
+            text: "ui:rounded-[8px]",
+        },
+        size: {
+            large: "ui:text-button2 ui:h-[38px] ui:px-[18px] ui:py-[9px]",
+            medium: "ui:text-button3 ui:h-[32px] ui:px-[14px] ui:py-[7px]",
+            small: "ui:text-button3 ui:h-[26px] ui:px-[10px] ui:py-[4.5px]",
+        },
+        disabled: {
+            true: "ui:pointer-events-none",
+            false: "ui:cursor-pointer",
+        },
+        isSelected: {
+            true: "",
+            false: "",
+        },
+        isActive: {
+            true: "",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "fill",
+            isSelected: false,
+            isActive: false,
+            className: "ui:bg-gray-50 ui:text-gray-500",
+        },
+        {
+            variant: "fill",
+            isSelected: true,
+            isActive: false,
+            className: "ui:bg-blue-50 ui:text-blue-700",
+        },
+        {
+            variant: "fill",
+            isSelected: false,
+            isActive: true,
+            className: "ui:bg-gray-100 ui:text-gray-600",
+        },
+        {
+            variant: "fill",
+            isSelected: true,
+            isActive: true,
+            className: "ui:bg-blue-100 ui:text-blue-800",
+        },
+        {
+            variant: "fill",
+            isSelected: true,
+            isActive: false,
+            disabled: true,
+            className: "ui:bg-blue-50 ui:text-blue-300",
+        },
+        {
+            variant: "fill",
+            isSelected: false,
+            isActive: false,
+            disabled: true,
+            className: "ui:bg-gray-50 ui:text-gray-300",
+        },
+        {
+            variant: "line",
+            isSelected: false,
+            isActive: false,
+            className: "ui:border ui:border-gray-100 ui:text-gray-500 ui:bg-white",
+        },
+        {
+            variant: "line",
+            isSelected: false,
+            isActive: true,
+            className: "ui:border ui:border-gray-200 ui:text-gray-700 ui:bg-gray-100",
+        },
+        {
+            variant: "line",
+            isSelected: true,
+            isActive: false,
+            className: "ui:text-white ui:bg-gray-700",
+        },
+        {
+            variant: "line",
+            isSelected: true,
+            isActive: true,
+            className: "ui:text-gray-200 ui:bg-gray-800",
+        },
+        {
+            variant: "text",
+            isSelected: false,
+            isActive: false,
+            className: "ui:text-gray-500 ui:bg-white",
+        },
+        {
+            variant: "text",
+            isSelected: true,
+            isActive: false,
+            className: "ui:text-gray-700 ui:bg-gray-100",
+        },
+        {
+            variant: "text",
+            isSelected: false,
+            isActive: true,
+            className: "ui:text-gray-600 ui:bg-gray-50",
+        },
+        {
+            variant: "text",
+            isSelected: true,
+            isActive: true,
+            className: "ui:text-gray-800 ui:bg-gray-200",
+        },
+    ],
+    defaultVariants: {
+        variant: "fill",
+        size: "large",
+        isSelected: false,
+        isActive: false,
+        disabled: false,
+    },
+});

package/dist/components/Icons/Icon.stories.d.ts

@@ -1,19 +1,27 @@
-export declare const Icon: ({ width, height, fill, }: {
+export declare const Icon: ({ width, height, className, }: {
     width?: number;
     height?: number;
-    fill?: string;
+    className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const meta: {
     title: string;
-    component: ({ width, height, fill, }: {
+    component: ({ width, height, className, }: {
         width?: number;
         height?: number;
-        fill?: string;
+        className?: string;
     }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
     args: {
         width: number;
         height: number;
-        fill: string;
+        className: string;
     };
     argTypes: {
         width: {
@@ -26,8 +34,10 @@ declare const meta: {
                 type: "number";
             };
         };
-        fill: {
-            control: "color";
+        className: {
+            control: {
+                type: "text";
+            };
         };
     };
 };

package/dist/components/Icons/Icon.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/Icon.stories.tsx"],"names":[],"mappings":"AA0KA,eAAO,MAAM,IAAI,GAAI,0BAIlB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,4CAoBA,CAAC;AAEF,QAAA,MAAM,IAAI;;0CA1BP;QACD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;;;;;;;;;;;;;;;;;;;;;CAmC4B,CAAC;AAE9B,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Icons/Icon.stories.tsx"],"names":[],"mappings":"AA0KA,eAAO,MAAM,IAAI,GAAI,+BAIlB;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAuBA,CAAC;AAEF,QAAA,MAAM,IAAI;;+CA7BP;QACD,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgD4B,CAAC;AAE9B,eAAe,IAAI,CAAC"}

package/dist/components/Icons/Icon.stories.js

@@ -171,11 +171,14 @@ const iconSet = {
     IconChatDefault: IconChatDefault_1.default,
     IconRevolvingLightDefault: IconRevolvingLightDefault_1.default,
 };
-const Icon = ({ width = 24, height = 24, fill = "#04041B", }) => {
+const Icon = ({ width = 24, height = 24, className = "text-gray-900", }) => {
     const commonProps = {
         width,
         height,
-        fill,
+        className: className
+            .split(" ")
+            .map((cn) => `ui:${cn}`)
+            .join(" "),
     };
     return ((0, jsx_runtime_1.jsx)("div", { className: "ui:flex ui:flex-wrap ui:gap-5", children: Object.entries(iconSet).map(([iconName, IconComponent]) => ((0, jsx_runtime_1.jsxs)("div", { className: "ui:flex ui:flex-col ui:items-center ui:min-w-[200px]", children: [(0, jsx_runtime_1.jsx)("div", { children: iconName }), (0, jsx_runtime_1.jsx)(IconComponent, { ...commonProps })] }, iconName))) }));
 };
@@ -183,15 +186,25 @@ exports.Icon = Icon;
 const meta = {
     title: "Components/Icons",
     component: exports.Icon,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+아이콘의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+`,
+            },
+        },
+    },
     args: {
         width: 24,
         height: 24,
-        fill: "#04041B",
+        className: "text-gray-900",
     },
     argTypes: {
         width: { control: { type: "number" } },
         height: { control: { type: "number" } },
-        fill: { control: "color" },
+        className: { control: { type: "text" } },
     },
 };
 exports.default = meta;

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

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

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

package/dist/components/Icons/IconAlarmOff.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconAlarmOff({ fill = "#04041B", width = 24, height = 24, ...props }) {
-    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M12 1.75c4.645 0 7.516 3.7 7.516 6.99a1 1 0 0 1-.007.105c-.232 1.62.18 2.777.676 3.746.127.248.26.482.392.717.13.23.264.466.382.696.23.449.45.973.45 1.547a2.3 2.3 0 0 1-.772 1.76c-.483.438-1.15.723-1.919.921-1.534.396-3.787.518-6.717.518L12 18.749c-2.93 0-5.184-.121-6.718-.517-.769-.198-1.435-.483-1.918-.921a2.3 2.3 0 0 1-.773-1.76c0-.574.221-1.098.45-1.547.118-.23.253-.467.383-.696.132-.235.264-.47.391-.717.496-.97.908-2.125.677-3.746a1 1 0 0 1-.008-.106c0-3.289 2.872-6.989 7.517-6.989" }), (0, jsx_runtime_1.jsx)("path", { fill: fill, fillRule: "evenodd", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", d: "M15 20c-1.16 3-4.914 3-6 0z", clipRule: "evenodd" })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconAlarmOff({ className, width = 24, height = 24, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: "none", viewBox: "0 0 24 24", className: className, ...props, children: [(0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12 1.75c4.645 0 7.516 3.7 7.516 6.99a1 1 0 0 1-.007.105c-.232 1.62.18 2.777.676 3.746.127.248.26.482.392.717.13.23.264.466.382.696.23.449.45.973.45 1.547a2.3 2.3 0 0 1-.772 1.76c-.483.438-1.15.723-1.919.921-1.534.396-3.787.518-6.717.518L12 18.749c-2.93 0-5.184-.121-6.718-.517-.769-.198-1.435-.483-1.918-.921a2.3 2.3 0 0 1-.773-1.76c0-.574.221-1.098.45-1.547.118-.23.253-.467.383-.696.132-.235.264-.47.391-.717.496-.97.908-2.125.677-3.746a1 1 0 0 1-.008-.106c0-3.289 2.872-6.989 7.517-6.989" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", fillRule: "evenodd", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M15 20c-1.16 3-4.914 3-6 0z", clipRule: "evenodd" })] }));
 }
 exports.default = IconAlarmOff;

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

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

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

package/dist/components/Icons/IconAlarmOn.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconAlarmOn({ 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", stroke: fill, strokeLinecap: "round", strokeLinejoin: "round", d: "M15 20c-1.16 3-4.914 3-6 0z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "#F74444", d: "M22 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0" }), (0, jsx_runtime_1.jsx)("path", { fill: fill, d: "M12.001 1.75c1.695 0 3.152.495 4.321 1.28A3.5 3.5 0 0 0 19.467 8q.048.372.05.74 0 .053-.008.106c-.231 1.62.181 2.777.677 3.746.126.248.259.482.391.717.13.23.264.466.382.696.23.449.451.973.451 1.547a2.3 2.3 0 0 1-.773 1.76c-.483.438-1.15.723-1.918.921-1.535.396-3.788.518-6.718.518L12 18.749c-2.93 0-5.183-.121-6.718-.517-.769-.198-1.435-.483-1.918-.921a2.3 2.3 0 0 1-.773-1.76c0-.574.221-1.098.451-1.547.118-.23.252-.467.382-.696.132-.235.265-.47.391-.717.496-.969.908-2.125.677-3.746a1 1 0 0 1-.008-.106c0-3.289 2.873-6.989 7.517-6.989" })] }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconAlarmOn({ 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", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", d: "M15 20c-1.16 3-4.914 3-6 0z", clipRule: "evenodd" }), (0, jsx_runtime_1.jsx)("path", { fill: "#F74444", d: "M22 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0" }), (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M12.001 1.75c1.695 0 3.152.495 4.321 1.28A3.5 3.5 0 0 0 19.467 8q.048.372.05.74 0 .053-.008.106c-.231 1.62.181 2.777.677 3.746.126.248.259.482.391.717.13.23.264.466.382.696.23.449.451.973.451 1.547a2.3 2.3 0 0 1-.773 1.76c-.483.438-1.15.723-1.918.921-1.535.396-3.788.518-6.718.518L12 18.749c-2.93 0-5.183-.121-6.718-.517-.769-.198-1.435-.483-1.918-.921a2.3 2.3 0 0 1-.773-1.76c0-.574.221-1.098.451-1.547.118-.23.252-.467.382-.696.132-.235.265-.47.391-.717.496-.969.908-2.125.677-3.746a1 1 0 0 1-.008-.106c0-3.289 2.873-6.989 7.517-6.989" })] }));
 }
 exports.default = IconAlarmOn;

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

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

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

package/dist/components/Icons/IconAppleDefault.js

@@ -1,7 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function IconAppleDefault({ 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.713 12.481c-.01-1.626.742-2.85 2.26-3.754-.85-1.192-2.134-1.848-3.826-1.974-1.603-.124-3.357.915-3.999.915-.678 0-2.23-.872-3.45-.872-2.52.038-5.198 1.969-5.198 5.897q0 1.742.65 3.595c.578 1.626 2.665 5.609 4.842 5.545 1.138-.027 1.943-.792 3.424-.792 1.437 0 2.181.792 3.451.792 2.196-.031 4.083-3.652 4.633-5.283-2.945-1.36-2.787-3.985-2.787-4.069m-2.556-7.27C16.39 3.776 16.278 2.47 16.24 2c-1.09.062-2.349.727-3.066 1.545-.79.877-1.255 1.961-1.155 3.184 1.177.088 2.252-.505 3.137-1.518" }) }));
+/**
+ * `Icon-` 컴포넌트의 기본 사이즈는 24px을 기준으로 합니다. className 속성으로 text color를 지정하여 색상을 변경할 수 있습니다.
+ * @example
+ * ```tsx
+ * <Icon width={24} height={24} className="text-gray-500" />
+ * <Icon className="text-gray-500" />
+ * ```
+ */
+function IconAppleDefault({ 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.713 12.481c-.01-1.626.742-2.85 2.26-3.754-.85-1.192-2.134-1.848-3.826-1.974-1.603-.124-3.357.915-3.999.915-.678 0-2.23-.872-3.45-.872-2.52.038-5.198 1.969-5.198 5.897q0 1.742.65 3.595c.578 1.626 2.665 5.609 4.842 5.545 1.138-.027 1.943-.792 3.424-.792 1.437 0 2.181.792 3.451.792 2.196-.031 4.083-3.652 4.633-5.283-2.945-1.36-2.787-3.985-2.787-4.069m-2.556-7.27C16.39 3.776 16.278 2.47 16.24 2c-1.09.062-2.349.727-3.066 1.545-.79.877-1.255 1.961-1.155 3.184 1.177.088 2.252-.505 3.137-1.518" }) }));
 }
 exports.default = IconAppleDefault;

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