@team-monolith/cds 0.23.0 → 0.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/@types/emotion.d.ts +6 -0
  2. package/dist/CodleDesignSystemProvider.d.ts +4 -0
  3. package/dist/CodleDesignSystemProvider.js +6 -1
  4. package/dist/components/AlertDialog/AlertDialogTitle.js +1 -1
  5. package/dist/components/Banner.js +12 -5
  6. package/dist/components/Button.js +2 -2
  7. package/dist/components/Tooltip.js +1 -1
  8. package/dist/foundation/font.d.ts +5 -0
  9. package/dist/foundation/font.js +5 -0
  10. package/dist/icons/Custom.js +8 -7
  11. package/package.json +13 -11
  12. package/dist/utils/uniqueId.d.ts +0 -2
  13. package/dist/utils/uniqueId.js +0 -4
package/@types/emotion.d.ts CHANGED
@@ -1,5 +1,10 @@
1
1
  import "@emotion/react";
2
2
 
3
+ interface CodleFontFamilies {
4
+ uiFont: string;
5
+ titleFont: string;
6
+ }
7
+
3
8
  interface CodleColors {
4
9
  background: {
5
10
  neutralBase: string;
@@ -69,5 +74,6 @@ interface CodleColors {
69
74
  declare module "@emotion/react" {
70
75
  export interface Theme {
71
76
  color: CodleColors;
77
+ fontFamily: CodleFontFamilies;
72
78
  }
73
79
  }
package/dist/CodleDesignSystemProvider.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  /// <reference types="react" />
2
2
  export declare const light: {
3
+ fontFamily: {
4
+ uiFont: string;
5
+ titleFont: string;
6
+ };
3
7
  color: {
4
8
  background: {
5
9
  neutralBase: string;
package/dist/CodleDesignSystemProvider.js CHANGED
@@ -17,8 +17,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
17
17
  import { Global, ThemeProvider, css } from "@emotion/react";
18
18
  import { ThemeProvider as MuiThemeProvider } from "@mui/material";
19
19
  import COLOR from "./foundation/color";
20
+ import FONT from "./foundation/font";
20
21
  import { createTheme } from "@mui/material";
21
22
  export var light = {
23
+ fontFamily: {
24
+ uiFont: FONT.pretendard,
25
+ titleFont: FONT.naumSquareNeo,
26
+ },
22
27
  color: {
23
28
  background: {
24
29
  neutralBase: COLOR.white,
@@ -99,6 +104,6 @@ export default function (props) {
99
104
  },
100
105
  },
101
106
  });
102
- 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 })) }))] }));
107
+ 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 })) }))] }));
103
108
  }
104
109
  var templateObject_1;
package/dist/components/AlertDialog/AlertDialogTitle.js CHANGED
@@ -36,6 +36,6 @@ export var AlertDialogTitle = React.forwardRef(function (props, ref) {
36
36
  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"]);
37
37
  var icon = React.useContext(AlertDialogContext).icon;
38
38
  var theme = useTheme();
39
- 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 }))] })) }));
39
+ 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.uiFont, 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 }))] })) }));
40
40
  });
41
41
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/Banner.js CHANGED
@@ -52,11 +52,18 @@ var Banner = React.forwardRef(function (props, ref) {
52
52
  COLOR_TO_STYLE(theme, color),
53
53
  fullWidth
54
54
  ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n width: 100%;\n "], ["\n width: 100%;\n "]))) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n border-radius: 12px;\n width: fit-content;\n "], ["\n border-radius: 12px;\n width: fit-content;\n "]))),
55
- ] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx("div", { 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 }))] })));
55
+ ] }, { 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 }))] })));
56
56
  });
57
57
  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"])));
58
- var HeadlineDiv = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n font-weight: 700;\n"], ["\n font-weight: 700;\n"])));
59
- var TextContainer = styled.div(templateObject_11 || (templateObject_11 = __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"])));
60
- var BannerButton = styled.button(templateObject_12 || (templateObject_12 = __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);
58
+ var HeadlineDiv = styled.div(function (_a) {
59
+ var theme = _a.theme;
60
+ 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.uiFont);
61
+ });
62
+ var ContentDiv = styled.div(function (_a) {
63
+ var theme = _a.theme;
64
+ 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.uiFont);
65
+ });
66
+ 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"])));
67
+ 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);
61
68
  export default Banner;
62
- 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;
69
+ 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;
package/dist/components/Button.js CHANGED
@@ -67,8 +67,8 @@ var Button = React.forwardRef(function Button(props, ref) {
67
67
  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"]);
68
68
  var theme = useTheme();
69
69
  return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
70
- 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
71
- ? 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"),
70
+ 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: ", ";\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
71
+ ? 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 "]))), theme.fontFamily.uiFont, fullWidth ? "100%" : "auto"),
72
72
  COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
73
73
  SIZE_TO_BUTTON_STYLE[size],
74
74
  ], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
package/dist/components/Tooltip.js CHANGED
@@ -43,7 +43,7 @@ var StyledTooltip = styled(function (_a) {
43
43
  return (_jsx(MuiTooltip, __assign({}, props, { classes: { popper: className } })));
44
44
  })(function (_a) {
45
45
  var theme = _a.theme;
46
- 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);
46
+ 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.uiFont);
47
47
  });
48
48
  var TitleDiv = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-weight: 700;\n"], ["\n font-weight: 700;\n"])));
49
49
  export default Tooltip;
package/dist/foundation/font.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ declare const _default: {
2
+ pretendard: string;
3
+ naumSquareNeo: string;
4
+ };
5
+ export default _default;
package/dist/foundation/font.js ADDED
@@ -0,0 +1,5 @@
1
+ // eslint-disable-next-line import/no-anonymous-default-export
2
+ export default {
3
+ pretendard: "Pretendard",
4
+ naumSquareNeo: "NanumSquareNeo",
5
+ };
package/dist/icons/Custom.js CHANGED
@@ -10,11 +10,11 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
- import getUniqueId from "../utils/uniqueId";
13
+ import { uid } from "uid";
14
14
  import customClassSvgImport from "./custom/class.svg";
15
15
  export var customClassSvg = customClassSvgImport;
16
16
  export var CustomClassIcon = function (props) {
17
- var uniqueId = getUniqueId();
17
+ var uniqueId = useMemo(uid, []);
18
18
  return (_jsxs("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("rect", { x: "1.5", y: "1.5", width: "21", height: "21", rx: "10", fill: "#FFFAE6" }), _jsxs("g", __assign({ clipPath: "url(#clip0_".concat(uniqueId, ")") }, { children: [_jsx("path", { d: "M11.799 12.0505C11.5969 11.6463 11.1122 11.5053 10.7086 11.7074L9.214 12.4747C9.214 12.4747 8.3862 11.889 8.12359 11.7074C7.96202 11.5864 7.45736 11.1822 6.97208 11.0207C6.44685 10.8391 5.07326 10.7175 4.68962 11.6264C4.28541 12.5758 4.34651 15.0192 4.36649 16.7764C4.36649 16.938 4.46754 17.0391 4.6291 17.0391H7.51728C7.69882 17.0391 7.75992 16.938 7.7799 16.7964C7.79987 16.7153 7.96144 14.7161 7.94146 13.8477V13.5446L8.70874 14.0698C8.85033 14.1709 8.99133 14.2114 9.1529 14.2114C9.27392 14.2114 9.39554 14.1914 9.51656 14.1303L11.4553 13.1204C11.8595 12.9183 12.0005 12.4336 11.7984 12.05L11.799 12.0505Z", fill: "#FF9100" }), _jsx("path", { d: "M19.1646 7.1225H9.9543C9.69168 7.1225 9.4696 7.34457 9.4696 7.60719V10.8167L9.83503 10.6293C10.1335 10.4801 10.4531 10.4043 10.7703 10.4043C11.5312 10.4043 12.215 10.8232 12.5575 11.4977C12.8019 11.9688 12.8489 12.5276 12.6862 13.0322C12.5211 13.5463 12.1627 13.9628 11.678 14.2049L9.75689 15.2054C9.66289 15.2524 9.56654 15.2894 9.47019 15.3206V16.4932C9.47019 16.7558 9.69227 16.9779 9.95488 16.9779H19.1646C19.4272 16.9779 19.6493 16.7558 19.6493 16.4932V7.60719C19.6493 7.34457 19.4272 7.1225 19.1646 7.1225Z", fill: "#FFE98A" }), _jsx("path", { d: "M6.36587 10.4754C7.33636 10.4754 8.1231 9.68866 8.1231 8.71817C8.1231 7.74768 7.33636 6.96094 6.36587 6.96094C5.39538 6.96094 4.60864 7.74768 4.60864 8.71817C4.60864 9.68866 5.39538 10.4754 6.36587 10.4754Z", fill: "#FF9100" })] })), _jsx("defs", { children: _jsx("clipPath", __assign({ id: "clip0_".concat(uniqueId) }, { children: _jsx("rect", { width: "18", height: "18", fill: "white", transform: "translate(3 3)" }) })) })] })));
19
19
  };
20
20
  import customMaterialSvgImport from "./custom/material.svg";
@@ -38,13 +38,13 @@ export var CustomJudgeColorIcon = function (props) { return (_jsxs("svg", __assi
38
38
  import customResourceSvgImport from "./custom/resource.svg";
39
39
  export var customResourceSvg = customResourceSvgImport;
40
40
  export var CustomResourceIcon = function (props) {
41
- var uniqueId = getUniqueId();
41
+ var uniqueId = useMemo(uid, []);
42
42
  return (_jsxs("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsxs("g", __assign({ clipPath: "url(#clip0_".concat(uniqueId, ")") }, { children: [_jsx("path", { d: "M11.8576 13.0612L7.64236 11.0937C7.54909 11.0499 7.446 11.0264 7.34127 11.0264H3.68564C3.30764 11.0264 3 11.3191 3 11.6807V20.3457C3 20.7073 3.30764 21 3.68564 21H20.3144C20.6924 21 21 20.7073 21 20.3457V13.7828C21 13.4212 20.6924 13.1285 20.3144 13.1285H12.1587C12.054 13.1285 11.9509 13.1066 11.8576 13.0612Z", fill: "currentColor" }), _jsx("path", { d: "M7.34127 9.37983C7.446 9.37983 7.54909 9.40174 7.64236 9.44713L11.8576 11.4146C11.9525 11.4584 12.0556 11.4819 12.1587 11.4819H19.0085V3.63235C19.0085 3.2833 18.7124 3 18.3458 3H5.65418C5.28927 3 4.99146 3.2833 4.99146 3.63235V9.37983H7.34127Z", fill: "currentColor" })] })), _jsx("defs", { children: _jsx("clipPath", __assign({ id: "clip0_".concat(uniqueId) }, { children: _jsx("rect", { width: "18", height: "18", fill: "white", transform: "translate(3 3)" }) })) })] })));
43
43
  };
44
44
  import customFabSvgImport from "./custom/fab.svg";
45
45
  export var customFabSvg = customFabSvgImport;
46
46
  export var CustomFabIcon = function (props) {
47
- var uniqueId = getUniqueId();
47
+ var uniqueId = useMemo(uid, []);
48
48
  return (_jsxs("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("g", __assign({ clipPath: "url(#clip0_".concat(uniqueId, ")") }, { children: _jsx("path", { d: "M12.002 2C6.47589 2 2 6.47589 2 12.002C2 17.5281 6.47589 22.004 12.002 22.004C17.5281 22.004 22.004 17.5281 22.004 12.002C22.004 6.47589 17.5281 2 12.002 2ZM19.5035 12.002C18.9284 11.3769 18.2282 10.8268 17.4281 10.3767C17.7907 9.47649 18.0657 8.62632 18.2658 7.87617C19.0534 9.06391 19.516 10.4767 19.516 12.002H19.5035ZM17.253 6.66343C17.0655 7.5136 16.7529 8.62633 16.2779 9.82657C15.0026 9.31396 13.5398 9.0139 11.9895 9.0139C10.4392 9.0139 8.9889 9.31396 7.70114 9.82657C7.22604 8.62633 6.92599 7.5136 6.72595 6.66343C8.07622 5.32566 9.93909 4.5005 11.977 4.5005C14.0149 4.5005 15.8778 5.32566 17.228 6.66343H17.253ZM15.7778 10.9643C15.2527 12.052 14.59 13.1522 13.7273 14.1149C13.1897 14.7275 12.6021 15.2401 11.9895 15.6902C11.3894 15.2401 10.8018 14.7275 10.2517 14.1149C9.38898 13.1522 8.72634 12.052 8.20124 10.9643C9.32646 10.5142 10.6142 10.2642 11.9895 10.2642C13.3648 10.2642 14.6525 10.5142 15.7778 10.9643ZM5.73825 7.87617C5.93829 8.62632 6.21334 9.47649 6.57591 10.3767C5.77575 10.8268 5.06311 11.3769 4.5005 12.002C4.5005 10.4767 4.96309 9.06391 5.75075 7.87617H5.73825ZM4.71304 13.7774C5.22565 12.8897 6.05081 12.1145 7.07601 11.5144C7.65113 12.6896 8.37628 13.8899 9.32647 14.9526C9.82657 15.5152 10.3517 15.9903 10.9018 16.4279C9.63903 17.1905 8.38878 17.6656 7.43859 17.9532C6.10082 16.928 5.12563 15.4652 4.71304 13.7774ZM8.83887 18.8034C9.80156 18.4533 10.9018 17.9407 12.002 17.2155C13.1022 17.9282 14.2024 18.4408 15.1651 18.8034C14.2024 19.2534 13.1397 19.516 12.002 19.516C10.8643 19.516 9.80156 19.2534 8.83887 18.8034ZM16.5654 17.9532C15.6152 17.6656 14.365 17.1905 13.1022 16.4279C13.6398 15.9903 14.1774 15.5027 14.6775 14.9526C15.6277 13.8899 16.3529 12.7021 16.928 11.5144C17.9532 12.1145 18.7784 12.8897 19.291 13.7774C18.8784 15.4652 17.9032 16.928 16.5654 17.9532Z", fill: "currentColor" }) })), _jsx("defs", { children: _jsx("clipPath", __assign({ id: "clip0_".concat(uniqueId) }, { children: _jsx("rect", { width: "24", height: "24", fill: "white" }) })) })] })));
49
49
  };
50
50
  import customJudgeSvgImport from "./custom/judge.svg";
@@ -62,7 +62,7 @@ export var CustomEmptyIcon = function (props) { return (_jsx("svg", __assign({},
62
62
  import customTypeHelperSvgImport from "./custom/type-helper.svg";
63
63
  export var customTypeHelperSvg = customTypeHelperSvgImport;
64
64
  export var CustomTypeHelperIcon = function (props) {
65
- var uniqueId = getUniqueId();
65
+ var uniqueId = useMemo(uid, []);
66
66
  return (_jsxs("svg", __assign({}, props, { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10", fill: "#FFEDE7" }), _jsx("mask", __assign({ id: "mask0_".concat(uniqueId), style: {
67
67
  maskType: "alpha",
68
68
  }, maskUnits: "userSpaceOnUse", x: "5", y: "5", width: "14", height: "14" }, { children: _jsx("rect", { x: "5.33337", y: "5.33331", width: "13.3333", height: "13.3333", fill: "#D9D9D9" }) })), _jsx("g", __assign({ mask: "url(#mask0_".concat(uniqueId, ")") }, { children: _jsx("path", { d: "M16.2222 17L12.7222 13.5C12.4444 13.7222 12.125 13.8981 11.7639 14.0278C11.4028 14.1574 11.0185 14.2222 10.6111 14.2222C9.60185 14.2222 8.74769 13.8727 8.04861 13.1736C7.34954 12.4745 7 11.6204 7 10.6111C7 9.60185 7.34954 8.74769 8.04861 8.04861C8.74769 7.34954 9.60185 7 10.6111 7C11.6204 7 12.4745 7.34954 13.1736 8.04861C13.8727 8.74769 14.2222 9.60185 14.2222 10.6111C14.2222 11.0185 14.1574 11.4028 14.0278 11.7639C13.8981 12.125 13.7222 12.4444 13.5 12.7222L17 16.2222L16.2222 17ZM10.6111 13.1111C11.3056 13.1111 11.8958 12.8681 12.3819 12.3819C12.8681 11.8958 13.1111 11.3056 13.1111 10.6111C13.1111 9.91667 12.8681 9.32639 12.3819 8.84028C11.8958 8.35417 11.3056 8.11111 10.6111 8.11111C9.91667 8.11111 9.32639 8.35417 8.84028 8.84028C8.35417 9.32639 8.11111 9.91667 8.11111 10.6111C8.11111 11.3056 8.35417 11.8958 8.84028 12.3819C9.32639 12.8681 9.91667 13.1111 10.6111 13.1111Z", fill: "#FF8C55" }) }))] })));
@@ -76,13 +76,14 @@ export var CustomBasicIcon = function (props) { return (_jsx("svg", __assign({},
76
76
  import customBasicPlusSvgImport from "./custom/basic-plus.svg";
77
77
  export var customBasicPlusSvg = customBasicPlusSvgImport;
78
78
  export var CustomBasicPlusIcon = function (props) {
79
- var uniqueId = getUniqueId();
79
+ var uniqueId = useMemo(uid, []);
80
80
  return (_jsxs("svg", __assign({}, props, { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M10.868 10.867L7.59232 9.99917V1.20304C7.59232 0.854839 7.19372 0.699915 6.99545 0.972161L1.04175 9.13204L4.31738 9.99992V18.7968C4.31738 19.145 4.71598 19.2999 4.91425 19.0277L10.868 10.8678V10.867Z", fill: "#3E88FF" }), _jsxs("g", __assign({ clipPath: "url(#clip0_".concat(uniqueId, ")") }, { children: [_jsx("path", { d: "M18.5356 4.58325H9.38095C9.1475 4.58325 8.95825 4.79386 8.95825 5.05366V6.61285C8.95825 6.87264 9.1475 7.08325 9.38095 7.08325H18.5356C18.769 7.08325 18.9583 6.87264 18.9583 6.61285V5.05366C18.9583 4.79386 18.769 4.58325 18.5356 4.58325Z", fill: "#363636" }), _jsx("path", { d: "M15.2083 10.4105V1.25595C15.2083 1.0225 14.9976 0.833252 14.7378 0.833252L13.1787 0.833252C12.9189 0.833252 12.7083 1.0225 12.7083 1.25595V10.4105C12.7083 10.644 12.9189 10.8333 13.1787 10.8333H14.7378C14.9976 10.8333 15.2083 10.644 15.2083 10.4105Z", fill: "#363636" })] })), _jsx("defs", { children: _jsx("clipPath", __assign({ id: "clip0_".concat(uniqueId) }, { children: _jsx("rect", { width: "10", height: "10", fill: "white", transform: "translate(8.95825 0.833252)" }) })) })] })));
81
81
  };
82
82
  import customProSvgImport from "./custom/pro.svg";
83
+ import { useMemo } from "react";
83
84
  export var customProSvg = customProSvgImport;
84
85
  export var CustomProIcon = function (props) {
85
- var uniqueId = getUniqueId();
86
+ var uniqueId = useMemo(uid, []);
86
87
  return (_jsxs("svg", __assign({}, props, { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink" }, { children: [_jsx("mask", __assign({ id: "mask0_".concat(uniqueId), style: {
87
88
  maskType: "luminance"
88
89
  }, maskUnits: "userSpaceOnUse", x: "5", y: "0", width: "11", height: "20" }, { children: _jsx("path", { d: "M15.8091 10.8675L12.2058 9.99954V1.20306C12.2058 0.85484 11.7673 0.699909 11.5492 0.972167L5 9.13163L8.60328 9.99954V18.7968C8.60328 19.145 9.04175 19.2999 9.25986 19.0277L15.8091 10.8675Z", fill: "white", style: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@team-monolith/cds",
3
- "version": "0.23.0",
3
+ "version": "0.25.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "sideEffects": false,
@@ -14,7 +14,8 @@
14
14
  "react": "^17.0.2",
15
15
  "react-dom": "^17.0.2",
16
16
  "remixicon": "^3.4.0",
17
- "typescript": "^4.5.5"
17
+ "typescript": "^4.5.5",
18
+ "uid": "^2.0.2"
18
19
  },
19
20
  "files": [
20
21
  "dist/**/*",
@@ -51,19 +52,20 @@
51
52
  "@babel/preset-env": "^7.22.7",
52
53
  "@babel/preset-react": "^7.22.5",
53
54
  "@babel/preset-typescript": "^7.22.5",
54
- "@storybook/addon-essentials": "^7.0.26",
55
- "@storybook/addon-interactions": "^7.0.26",
56
- "@storybook/addon-links": "^7.0.26",
57
- "@storybook/blocks": "^7.0.26",
58
- "@storybook/react": "^7.0.26",
59
- "@storybook/react-webpack5": "^7.0.26",
60
- "@storybook/testing-library": "^0.0.14-next.2",
55
+ "@storybook/addon-essentials": "^7.4.6",
56
+ "@storybook/addon-interactions": "^7.4.6",
57
+ "@storybook/addon-links": "^7.4.6",
58
+ "@storybook/blocks": "^7.4.6",
59
+ "@storybook/react": "^7.4.6",
60
+ "@storybook/react-webpack5": "^7.4.6",
61
+ "@storybook/testing-library": "^0.2.2",
62
+ "chromatic": "^7.1.0",
61
63
  "copyfiles": "^2.4.1",
62
- "eslint-plugin-storybook": "^0.6.12",
64
+ "eslint-plugin-storybook": "^0.6.15",
63
65
  "pascalcase": "^2.0.0",
64
66
  "prettier": "^3.0.2",
65
67
  "prop-types": "^15.8.1",
66
68
  "rimraf": "^5.0.1",
67
- "storybook": "^7.0.26"
69
+ "storybook": "^7.4.6"
68
70
  }
69
71
  }
package/dist/utils/uniqueId.d.ts DELETED
@@ -1,2 +0,0 @@
1
- /** svg id를 중복하지 않기 위해 uniqueId를 랜덤으로 생성합니다. */
2
- export default function getUniqueId(): string;
package/dist/utils/uniqueId.js DELETED
@@ -1,4 +0,0 @@
1
- /** svg id를 중복하지 않기 위해 uniqueId를 랜덤으로 생성합니다. */
2
- export default function getUniqueId() {
3
- return Math.random().toString(36).substring(2, 15);
4
- }