@team-monolith/cds 1.0.0 → 1.1.0

package/@types/emotion.d.ts

@@ -1,5 +1,10 @@
 import "@emotion/react";
 
+interface CodleFontFamilies {
+  ui: string;
+  title: string;
+}
+
 interface CodleColors {
   background: {
     neutralBase: string;
@@ -69,5 +74,6 @@ interface CodleColors {
 declare module "@emotion/react" {
   export interface Theme {
     color: CodleColors;
+    fontFamily: CodleFontFamilies;
   }
 }

package/README.md

@@ -23,4 +23,13 @@
 - 네이밍은 remixicon 라이브러리의 svg 파일 이름에서 다음과 같이 변환됩니다.
 - string 형태로 export되는 값은 다음 예시와 같이 camel case로 네이밍됩니다. (예: `arrowDownCircleFillSvg`)
 - React JSX 형태로 export되는 값은 다음 예시와 같이 pascal case로 네이밍됩니다. (예: `ArrowDownCircleFillIcon`)
-- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
+- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
+
+### 개발 및 배포 절차
+
+`npm run storybook` 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.
+
+패키지 특성상 개발환경이 따로 존재하지 않으며 `npm run compile` 후 `npm publish` 를 사용하여 npm 에 배포합니다.
+
+이때 npm team-monolith 에 소속되어 있어야 합니다.
+

package/dist/CodleDesignSystemProvider.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 export declare const light: {
+    fontFamily: {
+        ui: string;
+        title: string;
+    };
     color: {
         background: {
             neutralBase: string;

package/dist/CodleDesignSystemProvider.js

@@ -17,8 +17,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Global, ThemeProvider, css } from "@emotion/react";
 import { ThemeProvider as MuiThemeProvider } from "@mui/material";
 import COLOR from "./foundation/color";
+import FONT from "./foundation/font";
 import { createTheme } from "@mui/material";
 export var light = {
+    fontFamily: {
+        ui: FONT.pretendard,
+        title: FONT.naumSquareNeo,
+    },
     color: {
         background: {
             neutralBase: COLOR.white,
@@ -99,6 +104,6 @@ export default function (props) {
             },
         },
     });
-    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          body {\n            font-family: Pretendard;\n          }\n        "], ["\n          body {\n            font-family: Pretendard;\n          }\n        "]))) }), _jsx(MuiThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, __assign({ theme: light }, { children: props.children })) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          body {\n            font-family: ", ";\n          }\n        "], ["\n          body {\n            font-family: ", ";\n          }\n        "])), FONT.pretendard) }), _jsx(MuiThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, __assign({ theme: light }, { children: props.children })) }))] }));
 }
 var templateObject_1;

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -36,6 +36,6 @@ export var AlertDialogTitle = React.forwardRef(function (props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, onClose = props.onClose, children = props.children, other = __rest(props, ["className", "component", "onClose", "children"]);
     var icon = React.useContext(AlertDialogContext).icon;
     var theme = useTheme();
-    return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            grid-area: title;\n            font-family: \"Pretendard\";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "], ["\n            grid-area: title;\n            font-family: \"Pretendard\";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "])), theme.color.foreground.neutralBase) }, { children: [_jsxs("div", __assign({ css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "], ["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "]))) }, { children: [icon && (_jsx("div", __assign({ css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  display: none;\n                  ", "\n                "], ["\n                  display: none;\n                  ", "\n                "])), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "], ["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "])), theme.color.background.infoActive))) }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
+    return (_jsx(_Fragment, { children: _jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            grid-area: title;\n            font-family: ", ";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "], ["\n            grid-area: title;\n            font-family: ", ";\n            font-style: normal;\n            font-weight: 500;\n            font-size: 20px;\n            line-height: 36px;\n            color: ", ";\n\n            display: flex;\n            justify-content: space-between;\n          "])), theme.fontFamily.ui, theme.color.foreground.neutralBase) }, { children: [_jsxs("div", __assign({ css: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "], ["\n              display: flex;\n              flex-direction: column;\n              justify-content: center;\n              align-items: flex-start;\n              gap: 16px;\n            "]))) }, { children: [icon && (_jsx("div", __assign({ css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                  display: none;\n                  ", "\n                "], ["\n                  display: none;\n                  ", "\n                "])), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "], ["\n                    display: flex;\n                    justify-content: center;\n                    align-items: center;\n                    color: ", ";\n\n                    svg {\n                      width: 32px;\n                      height: 32px;\n                    }\n                  "])), theme.color.background.infoActive))) }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Banner.js

@@ -55,8 +55,14 @@ var Banner = React.forwardRef(function (props, ref) {
         ] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx(ContentDiv, { children: content })] }), buttonLabel && (_jsx(BannerButton, __assign({ type: "button", onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(SquareButton, { css: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n              > button,\n              > button:hover {\n                color: currentColor;\n              }\n            "], ["\n              > button,\n              > button:hover {\n                color: currentColor;\n              }\n            "]))), color: "icon", size: "medium", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
 });
 var IconDiv = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 16px 0px 16px 16px;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 16px 0px 16px 16px;\n"])));
-var HeadlineDiv = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-family: Pretendard;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 20px; /* 125% */\n"], ["\n  font-family: Pretendard;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 700;\n  line-height: 20px; /* 125% */\n"])));
-var ContentDiv = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-family: Pretendard;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; /* 150% */\n"], ["\n  font-family: Pretendard;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; /* 150% */\n"])));
+var HeadlineDiv = styled.div(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 20px; /* 125% */\n  "], ["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 700;\n    line-height: 20px; /* 125% */\n  "])), theme.fontFamily.ui);
+});
+var ContentDiv = styled.div(function (_a) {
+    var theme = _a.theme;
+    return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px; /* 150% */\n  "], ["\n    font-family: ", ";\n    font-size: 16px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 24px; /* 150% */\n  "])), theme.fontFamily.ui);
+});
 var TextContainer = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  flex: 1;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 16px;\n  gap: 4px;\n"], ["\n  flex: 1;\n\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 16px;\n  gap: 4px;\n"])));
 var BannerButton = styled.button(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 12px;\n  cursor: pointer;\n  color: currentColor;\n"], ["\n  ", "\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 10px 12px;\n  cursor: pointer;\n  color: currentColor;\n"])), RESET_BUTTON);
 export default Banner;

package/dist/components/Button.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { PolymorphicProps } from "@mui/base";
-export type ButtonColor = "primary" | "grey" | "danger" | "textNeutral" | "textDanger" | "textPrimary" | "black";
+export type ButtonColor = "primary" | "grey" | "danger" | "textNeutral" | "textDanger" | "textPrimary" | "black" | "white";
 export type ButtonSize = "large" | "medium" | "small" | "xsmall";
 export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
     className?: string;

package/dist/components/Button.js

@@ -46,19 +46,21 @@ var COLOR_TO_BUTTON_STYLE = function (theme, color, disabled) {
             ? css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n            background: none;\n            color: ", ";\n          "], ["\n            background: none;\n            color: ", ";\n          "])), theme.color.foreground.primaryDisabled) : css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n            background: none;\n            color: ", ";\n            ", "\n          "], ["\n            background: none;\n            color: ", ";\n            ", "\n          "])), theme.color.foreground.primary, HOVER(css(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n              background: ", ";\n              color: ", ";\n            "], ["\n              background: ", ";\n              color: ", ";\n            "])), theme.color.background.neutralAltActive, theme.color.foreground.primary)))),
         black: css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), disabled
             ? css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n            background: ", ";\n            color: ", ";\n          "], ["\n            background: ", ";\n            color: ", ";\n          "])), theme.color.background.blackDisabled, theme.color.foreground.neutralAltDisabled) : css(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n            background: ", ";\n            color: ", ";\n            ", "\n          "], ["\n            background: ", ";\n            color: ", ";\n            ", "\n          "])), theme.color.background.black, theme.color.foreground.neutralAlt, HOVER(css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n              background: ", ";\n              color: ", ";\n            "], ["\n              background: ", ";\n              color: ", ";\n            "])), theme.color.background.blackActive, theme.color.foreground.neutralAlt)))),
+        white: css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), disabled
+            ? css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n            background: ", ";\n            color: ", ";\n          "], ["\n            background: ", ";\n            color: ", ";\n          "])), theme.color.background.neutralAltDisabled, theme.color.foreground.neutralBaseDisabled) : css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n            background: ", ";\n            color: ", ";\n            ", "\n          "], ["\n            background: ", ";\n            color: ", ";\n            ", "\n          "])), theme.color.background.neutralBase, theme.color.foreground.neutralBase, HOVER(css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n              background: ", ";\n              color: ", ";\n            "], ["\n              background: ", ";\n              color: ", ";\n            "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)))),
     })[color];
 };
 var SIZE_TO_BUTTON_STYLE = {
-    large: css(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
-    medium: css(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
-    small: css(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
-    xsmall: css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
+    large: css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    padding: 16px 20px;\n    gap: 10px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
+    medium: css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    padding: 14px 16px;\n    gap: 8px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
+    small: css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    padding: 10px 12px;\n    gap: 8px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
+    xsmall: css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    padding: 6px 8px;\n    gap: 4px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
 };
 var SIZE_TO_LABEL_STYLE = {
-    large: css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    font-size: 20px;\n    line-height: 24px;\n  "], ["\n    font-size: 20px;\n    line-height: 24px;\n  "]))),
-    medium: css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 20px;\n  "], ["\n    font-size: 18px;\n    line-height: 20px;\n  "]))),
-    small: css(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
-    xsmall: css(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
+    large: css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n    font-size: 20px;\n    line-height: 24px;\n  "], ["\n    font-size: 20px;\n    line-height: 24px;\n  "]))),
+    medium: css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 20px;\n  "], ["\n    font-size: 18px;\n    line-height: 20px;\n  "]))),
+    small: css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
+    xsmall: css(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 16px;\n  "], ["\n    font-size: 14px;\n    line-height: 16px;\n  "]))),
 };
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
@@ -67,15 +69,15 @@ var Button = React.forwardRef(function Button(props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "button" : _a, disabled = props.disabled, color = props.color, size = props.size, startIcon = props.startIcon, endIcon = props.endIcon, label = props.label, fullWidth = props.fullWidth, other = __rest(props, ["className", "component", "disabled", "color", "size", "startIcon", "endIcon", "label", "fullWidth"]);
     var theme = useTheme();
     return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
-            css(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: Pretendard;\n          text-decoration: none;\n\n          width: ", ";\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: Pretendard;\n          text-decoration: none;\n\n          width: ", ";\n        "])), disabled
-                ? css(templateObject_37 || (templateObject_37 = __makeTemplateObject(["\n                cursor: default;\n                pointer-events: none;\n              "], ["\n                cursor: default;\n                pointer-events: none;\n              "]))) : css(templateObject_38 || (templateObject_38 = __makeTemplateObject(["\n                cursor: pointer;\n              "], ["\n                cursor: pointer;\n              "]))), fullWidth ? "100%" : "auto"),
+            css(templateObject_43 || (templateObject_43 = __makeTemplateObject(["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: ", ";\n          text-decoration: none;\n\n          width: ", ";\n        "], ["\n          display: inline-flex;\n          align-items: center;\n          justify-content: center;\n          gap: 8px;\n\n          border: none;\n          border-radius: 8px;\n\n          ", "\n\n          font-family: ", ";\n          text-decoration: none;\n\n          width: ", ";\n        "])), disabled
+                ? css(templateObject_41 || (templateObject_41 = __makeTemplateObject(["\n                cursor: default;\n                pointer-events: none;\n              "], ["\n                cursor: default;\n                pointer-events: none;\n              "]))) : css(templateObject_42 || (templateObject_42 = __makeTemplateObject(["\n                cursor: pointer;\n              "], ["\n                cursor: pointer;\n              "]))), theme.fontFamily.ui, fullWidth ? "100%" : "auto"),
             COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
             SIZE_TO_BUTTON_STYLE[size],
         ], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
 });
-var Label = styled.span(templateObject_40 || (templateObject_40 = __makeTemplateObject(["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"], ["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
+var Label = styled.span(templateObject_44 || (templateObject_44 = __makeTemplateObject(["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"], ["\n  font-weight: 400;\n  white-space: nowrap;\n  ", "\n"])), function (_a) {
     var size = _a.size;
     return SIZE_TO_LABEL_STYLE[size];
 });
 export default Button;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44;

package/dist/components/SquareButton.js

@@ -37,28 +37,29 @@ var COLOR_TO_BUTTON_STYLE = function (theme, color) {
         primary: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", ";\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "], ["\n      background: ", ";\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: ", ";\n      }\n    "])), theme.color.background.primary, theme.color.foreground.neutralAlt, HOVER(css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n        background: ", ";\n      "], ["\n        background: ", ";\n      "])), theme.color.background.primaryActive)), theme.color.background.primaryDisabled),
         icon: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: none;\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "], ["\n      background: none;\n      border: none;\n      color: ", ";\n\n      ", "\n      &:disabled {\n        background: none;\n        color: ", ";\n      }\n    "])), theme.color.foreground.neutralBase, HOVER(css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)), theme.color.foreground.neutralBaseDisabled),
         black: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      background: ", ";\n      border: none;\n      color: ", ";\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      background: ", ";\n      border: none;\n      color: ", ";\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "])), theme.color.background.black, theme.color.foreground.neutralAlt, HOVER(css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.blackActive, theme.color.foreground.neutralAlt)), theme.color.background.blackDisabled, theme.color.foreground.neutralAltDisabled),
+        white: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      background: ", ";\n      border: none;\n      color: ", ";\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      background: ", ";\n      border: none;\n      color: ", ";\n      ", "\n      &:disabled {\n        background: ", ";\n        color: ", ";\n      }\n    "])), theme.color.background.neutralBase, theme.color.foreground.neutralBase, HOVER(css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n        background: ", ";\n        color: ", ";\n      "], ["\n        background: ", ";\n        color: ", ";\n      "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)), theme.color.background.neutralAltDisabled, theme.color.foreground.neutralBaseDisabled),
     })[color];
 };
 var SIZE_TO_BUTTON_STYLE = {
-    large: css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
-    medium: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
-    small: css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
-    xsmall: css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    width: 28px;\n    height: 28px;\n    padding: 8px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    width: 28px;\n    height: 28px;\n    padding: 8px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
+    large: css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "], ["\n    width: 56px;\n    height: 56px;\n    padding: 16px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  "]))),
+    medium: css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "], ["\n    width: 48px;\n    height: 48px;\n    padding: 14px;\n\n    svg {\n      width: 20px;\n      height: 20px;\n    }\n  "]))),
+    small: css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "], ["\n    width: 36px;\n    height: 36px;\n    padding: 10px;\n\n    svg {\n      width: 16px;\n      height: 16px;\n    }\n  "]))),
+    xsmall: css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    width: 28px;\n    height: 28px;\n    padding: 8px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "], ["\n    width: 28px;\n    height: 28px;\n    padding: 8px;\n\n    svg {\n      width: 12px;\n      height: 12px;\n    }\n  "]))),
 };
 var SIZE_TO_LABEL_STYLE = {
-    large: css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
-    medium: css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
-    small: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
-    xsmall: css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 22px;\n  "], ["\n    font-size: 14px;\n    line-height: 22px;\n  "]))),
+    large: css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
+    medium: css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
+    small: css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n    font-size: 18px;\n    line-height: 28px;\n  "], ["\n    font-size: 18px;\n    line-height: 28px;\n  "]))),
+    xsmall: css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n    font-size: 14px;\n    line-height: 22px;\n  "], ["\n    font-size: 14px;\n    line-height: 22px;\n  "]))),
 };
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
  */
 var SquareButton = React.forwardRef(function SquareButton(props, ref) {
     var className = props.className, _a = props.component, Component = _a === void 0 ? "span" : _a, disabled = props.disabled, color = props.color, size = props.size, icon = props.icon, label = props.label, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["className", "component", "disabled", "color", "size", "icon", "label", "fullWidth", "onClick"]);
-    return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "], ["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "])), fullWidth ? "100%" : "fit-content") }, { children: [_jsx(Button, __assign({ type: "button", color: color, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, { children: icon })), label && (_jsx(Label, __assign({ disabled: disabled, size: size }, { children: label })))] })));
+    return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "], ["\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 8px;\n\n          width: ", ";\n        "])), fullWidth ? "100%" : "fit-content") }, { children: [_jsx(Button, __assign({ type: "button", color: color, size: size, disabled: disabled, fullWidth: fullWidth, onClick: onClick }, { children: icon })), label && (_jsx(Label, __assign({ disabled: disabled, size: size }, { children: label })))] })));
 });
-var Button = styled.button(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"], ["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
+var Button = styled.button(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"], ["\n  border-radius: 8px;\n  cursor: pointer;\n  &:disabled {\n    cursor: default;\n  }\n  ", "\n  ", "\n  ", "\n"])), function (_a) {
     var theme = _a.theme, color = _a.color;
     return COLOR_TO_BUTTON_STYLE(theme, color);
 }, function (_a) {
@@ -68,7 +69,7 @@ var Button = styled.button(templateObject_20 || (templateObject_20 = __makeTempl
     var fullWidth = _a.fullWidth;
     return fullWidth && "width: 100%;";
 });
-var Label = styled.span(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"], ["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"])), function (_a) {
+var Label = styled.span(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"], ["\n  font-weight: 400;\n  color: ", ";\n  ", "\n"])), function (_a) {
     var theme = _a.theme, disabled = _a.disabled;
     return disabled
         ? theme.color.foreground.neutralBaseDisabled
@@ -78,4 +79,4 @@ var Label = styled.span(templateObject_21 || (templateObject_21 = __makeTemplate
     return SIZE_TO_LABEL_STYLE[size];
 });
 export default SquareButton;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;

package/dist/components/Tooltip.js

@@ -43,7 +43,7 @@ var StyledTooltip = styled(function (_a) {
     return (_jsx(MuiTooltip, __assign({}, props, { classes: { popper: className } })));
 })(function (_a) {
     var theme = _a.theme;
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-family: Pretendard;\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "], ["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-family: Pretendard;\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "])), theme.color.foreground.neutralBase, theme.color.background.neutralBase);
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-family: ", ";\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "], ["\n    .MuiTooltip-tooltip {\n      background: ", ";\n      border-radius: 8px;\n      padding: 6px 10px;\n\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      color: ", ";\n      font-family: ", ";\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 22px;\n    }\n  "])), theme.color.foreground.neutralBase, theme.color.background.neutralBase, theme.fontFamily.ui);
 });
 var TitleDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: 700;\n"], ["\n  font-weight: 700;\n"])));
 export default Tooltip;

package/dist/foundation/font.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    pretendard: string;
+    naumSquareNeo: string;
+};
+export default _default;

package/dist/foundation/font.js

@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/no-anonymous-default-export
+export default {
+    pretendard: "Pretendard",
+    naumSquareNeo: "NanumSquareNeo",
+};

package/dist/icons/Arrows/ArrowDownCircleFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDownCircleFillSvg: string;
 export declare const ArrowDownCircleFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDownCircleLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDownCircleLineSvg: string;
 export declare const ArrowDownCircleLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDownDoubleFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDownDoubleFillSvg: string;
 export declare const ArrowDownDoubleFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDownDoubleLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDownDoubleLineSvg: string;
 export declare const ArrowDownDoubleLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDownFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDownFillSvg: string;
 export declare const ArrowDownFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDownLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDownLineSvg: string;
 export declare const ArrowDownLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDownSFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDownSFillSvg: string;
 export declare const ArrowDownSFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDownSLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDownSLineSvg: string;
 export declare const ArrowDownSLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDropDownFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDropDownFillSvg: string;
 export declare const ArrowDropDownFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDropDownLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDropDownLineSvg: string;
 export declare const ArrowDropDownLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDropLeftFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDropLeftFillSvg: string;
 export declare const ArrowDropLeftFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDropLeftLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDropLeftLineSvg: string;
 export declare const ArrowDropLeftLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDropRightFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDropRightFillSvg: string;
 export declare const ArrowDropRightFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDropRightLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDropRightLineSvg: string;
 export declare const ArrowDropRightLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDropUpFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDropUpFillSvg: string;
 export declare const ArrowDropUpFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowDropUpLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowDropUpLineSvg: string;
 export declare const ArrowDropUpLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowGoBackFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowGoBackFillSvg: string;
 export declare const ArrowGoBackFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowGoBackLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowGoBackLineSvg: string;
 export declare const ArrowGoBackLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowGoForwardFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowGoForwardFillSvg: string;
 export declare const ArrowGoForwardFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowGoForwardLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowGoForwardLineSvg: string;
 export declare const ArrowGoForwardLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftCircleFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftCircleFillSvg: string;
 export declare const ArrowLeftCircleFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftCircleLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftCircleLineSvg: string;
 export declare const ArrowLeftCircleLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftDoubleFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftDoubleFillSvg: string;
 export declare const ArrowLeftDoubleFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftDoubleLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftDoubleLineSvg: string;
 export declare const ArrowLeftDoubleLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftDownFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftDownFillSvg: string;
 export declare const ArrowLeftDownFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftDownLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftDownLineSvg: string;
 export declare const ArrowLeftDownLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftFillSvg: string;
 export declare const ArrowLeftFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftLineSvg: string;
 export declare const ArrowLeftLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftRightFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftRightFillSvg: string;
 export declare const ArrowLeftRightFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftRightLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftRightLineSvg: string;
 export declare const ArrowLeftRightLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftSFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftSFillSvg: string;
 export declare const ArrowLeftSFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftSLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftSLineSvg: string;
 export declare const ArrowLeftSLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftUpFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftUpFillSvg: string;
 export declare const ArrowLeftUpFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowLeftUpLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowLeftUpLineSvg: string;
 export declare const ArrowLeftUpLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowRightCircleFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowRightCircleFillSvg: string;
 export declare const ArrowRightCircleFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowRightCircleLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowRightCircleLineSvg: string;
 export declare const ArrowRightCircleLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowRightDoubleFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowRightDoubleFillSvg: string;
 export declare const ArrowRightDoubleFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowRightDoubleLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowRightDoubleLineSvg: string;
 export declare const ArrowRightDoubleLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowRightDownFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowRightDownFillSvg: string;
 export declare const ArrowRightDownFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowRightDownLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowRightDownLineSvg: string;
 export declare const ArrowRightDownLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowRightFill.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowRightFillSvg: string;
 export declare const ArrowRightFillIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/icons/Arrows/ArrowRightLine.d.ts

@@ -2,4 +2,5 @@ import React from "react";
 export declare const arrowRightLineSvg: string;
 export declare const ArrowRightLineIcon: React.ForwardRefExoticComponent<{
     className?: string | undefined;
+    color?: string | undefined;
 } & React.RefAttributes<any>>;