@team-monolith/cds 0.18.2 → 0.19.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.
- package/@types/emotion.d.ts +3 -0
- package/dist/CodleDesignSystemProvider.d.ts +3 -0
- package/dist/CodleDesignSystemProvider.js +11 -3
- package/dist/components/Button.d.ts +1 -1
- package/dist/components/Button.js +16 -14
- package/dist/components/SquareButton.d.ts +1 -1
- package/dist/components/SquareButton.js +15 -14
- package/dist/components/Tag.d.ts +1 -1
- package/dist/icons/Custom.d.ts +12 -0
- package/dist/icons/Custom.js +9 -0
- package/dist/icons/custom/basic-plus.svg +32 -0
- package/dist/icons/custom/basic.svg +3 -0
- package/dist/icons/custom/pro.svg +47 -0
- package/package.json +1 -1
package/@types/emotion.d.ts
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
1
5
|
var __assign = (this && this.__assign) || function () {
|
|
2
6
|
__assign = Object.assign || function(t) {
|
|
3
7
|
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
@@ -9,8 +13,8 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
13
|
};
|
|
10
14
|
return __assign.apply(this, arguments);
|
|
11
15
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import { ThemeProvider } from "@emotion/react";
|
|
16
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
17
|
+
import { Global, ThemeProvider, css } from "@emotion/react";
|
|
14
18
|
import { ThemeProvider as MuiThemeProvider } from "@mui/material";
|
|
15
19
|
import COLOR from "./foundation/color";
|
|
16
20
|
import { createTheme } from "@mui/material";
|
|
@@ -39,6 +43,9 @@ export var light = {
|
|
|
39
43
|
warning: COLOR.yellow06,
|
|
40
44
|
warningActive: COLOR.yellow07,
|
|
41
45
|
warningDisabled: COLOR.yellow03,
|
|
46
|
+
black: COLOR.black,
|
|
47
|
+
blackActive: COLOR.grey08,
|
|
48
|
+
blackDisabled: COLOR.grey04,
|
|
42
49
|
},
|
|
43
50
|
foreground: {
|
|
44
51
|
neutralBase: COLOR.black,
|
|
@@ -92,5 +99,6 @@ export default function (props) {
|
|
|
92
99
|
},
|
|
93
100
|
},
|
|
94
101
|
});
|
|
95
|
-
return (_jsx(MuiThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, __assign({ theme: light }, { children: props.children })) })));
|
|
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 })) }))] }));
|
|
96
103
|
}
|
|
104
|
+
var templateObject_1;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { PolymorphicProps } from "@mui/base";
|
|
3
|
-
export type ButtonColor = "primary" | "
|
|
3
|
+
export type ButtonColor = "primary" | "grey" | "danger" | "textNeutral" | "textDanger" | "textPrimary" | "black";
|
|
4
4
|
export type ButtonSize = "large" | "medium" | "small" | "xsmall";
|
|
5
5
|
export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
|
|
6
6
|
className?: string;
|
|
@@ -34,7 +34,7 @@ var COLOR_TO_BUTTON_STYLE = function (theme, color, disabled) {
|
|
|
34
34
|
return ({
|
|
35
35
|
primary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
36
36
|
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), theme.color.foreground.neutralAlt, theme.color.background.primaryDisabled) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n ", "\n "], ["\n color: ", ";\n background: ", ";\n ", "\n "])), theme.color.foreground.neutralAlt, theme.color.background.primary, HOVER(css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), theme.color.foreground.neutralAlt, theme.color.background.primaryActive)))),
|
|
37
|
-
|
|
37
|
+
grey: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
38
38
|
? css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBaseDisabled) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n ", "\n "], ["\n background: ", ";\n color: ", ";\n ", "\n "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBase, HOVER(css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)))),
|
|
39
39
|
danger: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
40
40
|
? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), theme.color.foreground.neutralAlt, theme.color.background.dangerDisabled) : css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n ", "\n "], ["\n color: ", ";\n background: ", ";\n ", "\n "])), theme.color.foreground.neutralAlt, theme.color.background.danger, HOVER(css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n color: ", ";\n background: ", ";\n "], ["\n color: ", ";\n background: ", ";\n "])), theme.color.foreground.neutralAlt, theme.color.background.dangerActive)))),
|
|
@@ -44,19 +44,21 @@ var COLOR_TO_BUTTON_STYLE = function (theme, color, disabled) {
|
|
|
44
44
|
? css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n background: none;\n color: ", ";\n "], ["\n background: none;\n color: ", ";\n "])), theme.color.foreground.dangerDisabled) : css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n background: none;\n color: ", ";\n ", "\n "], ["\n background: none;\n color: ", ";\n ", "\n "])), theme.color.foreground.danger, HOVER(css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAltActive, theme.color.foreground.danger)))),
|
|
45
45
|
textPrimary: css(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
46
46
|
? 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)))),
|
|
47
|
-
|
|
47
|
+
black: css(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
48
|
+
? 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)))),
|
|
49
|
+
})[color];
|
|
48
50
|
};
|
|
49
51
|
var SIZE_TO_BUTTON_STYLE = {
|
|
50
|
-
large: css(
|
|
51
|
-
medium: css(
|
|
52
|
-
small: css(
|
|
53
|
-
xsmall: css(
|
|
52
|
+
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 "]))),
|
|
53
|
+
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 "]))),
|
|
54
|
+
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 "]))),
|
|
55
|
+
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 "]))),
|
|
54
56
|
};
|
|
55
57
|
var SIZE_TO_LABEL_STYLE = {
|
|
56
|
-
large: css(
|
|
57
|
-
medium: css(
|
|
58
|
-
small: css(
|
|
59
|
-
xsmall: css(
|
|
58
|
+
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 "]))),
|
|
59
|
+
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 "]))),
|
|
60
|
+
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 "]))),
|
|
61
|
+
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 "]))),
|
|
60
62
|
};
|
|
61
63
|
/**
|
|
62
64
|
* [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=20-173&t=cXcCv3QijbX7MkoC-0)
|
|
@@ -65,15 +67,15 @@ var Button = React.forwardRef(function Button(props, ref) {
|
|
|
65
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"]);
|
|
66
68
|
var theme = useTheme();
|
|
67
69
|
return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
|
|
68
|
-
css(
|
|
69
|
-
? 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
72
|
COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
|
|
71
73
|
SIZE_TO_BUTTON_STYLE[size],
|
|
72
74
|
], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
|
|
73
75
|
});
|
|
74
|
-
var Label = styled.span(
|
|
76
|
+
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) {
|
|
75
77
|
var size = _a.size;
|
|
76
78
|
return SIZE_TO_LABEL_STYLE[size];
|
|
77
79
|
});
|
|
78
80
|
export default Button;
|
|
79
|
-
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;
|
|
81
|
+
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;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { PolymorphicProps } from "@mui/base";
|
|
3
|
-
export type SquareButtonColor = "danger" | "primary" | "
|
|
3
|
+
export type SquareButtonColor = "danger" | "primary" | "grey" | "icon" | "black";
|
|
4
4
|
export type SquareButtonSize = "large" | "medium" | "small" | "xsmall";
|
|
5
5
|
export interface SquareButtonOwnProps<RootComponentType extends React.ElementType> {
|
|
6
6
|
className?: string;
|
|
@@ -33,31 +33,32 @@ import { HOVER } from "../utils/hover";
|
|
|
33
33
|
var COLOR_TO_BUTTON_STYLE = function (theme, color) {
|
|
34
34
|
return ({
|
|
35
35
|
danger: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n border: none;\n background: ", ";\n color: ", ";\n\n ", "\n &:disabled {\n background: ", ";\n }\n "], ["\n border: none;\n background: ", ";\n color: ", ";\n\n ", "\n &:disabled {\n background: ", ";\n }\n "])), theme.color.background.danger, theme.color.foreground.neutralAlt, HOVER(css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), theme.color.background.dangerActive)), theme.color.background.dangerDisabled),
|
|
36
|
-
|
|
36
|
+
grey: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background: ", ";\n border: none;\n color: ", ";\n\n ", "\n &:disabled {\n background: ", ";\n color: ", ";\n }\n "], ["\n background: ", ";\n border: none;\n color: ", ";\n\n ", "\n &:disabled {\n background: ", ";\n color: ", ";\n }\n "])), theme.color.background.neutralAlt, theme.color.foreground.neutralBase, HOVER(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)), theme.color.background.neutralAlt, theme.color.foreground.neutralBaseDisabled),
|
|
37
37
|
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),
|
|
38
38
|
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),
|
|
39
|
-
}[color])
|
|
39
|
+
black: css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n ", "\n &:disabled {\n background: ", ";\n color: ", ";\n }\n "], ["\n background: ", ";\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),
|
|
40
|
+
})[color];
|
|
40
41
|
};
|
|
41
42
|
var SIZE_TO_BUTTON_STYLE = {
|
|
42
|
-
large: css(
|
|
43
|
-
medium: css(
|
|
44
|
-
small: css(
|
|
45
|
-
xsmall: css(
|
|
43
|
+
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 "]))),
|
|
44
|
+
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 "]))),
|
|
45
|
+
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 "]))),
|
|
46
|
+
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 "]))),
|
|
46
47
|
};
|
|
47
48
|
var SIZE_TO_LABEL_STYLE = {
|
|
48
|
-
large: css(
|
|
49
|
-
medium: css(
|
|
50
|
-
small: css(
|
|
51
|
-
xsmall: css(
|
|
49
|
+
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 "]))),
|
|
50
|
+
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 "]))),
|
|
51
|
+
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 "]))),
|
|
52
|
+
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 "]))),
|
|
52
53
|
};
|
|
53
54
|
/**
|
|
54
55
|
* [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
|
|
55
56
|
*/
|
|
56
57
|
var SquareButton = React.forwardRef(function SquareButton(props, ref) {
|
|
57
58
|
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"]);
|
|
58
|
-
return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(
|
|
59
|
+
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 })))] })));
|
|
59
60
|
});
|
|
60
|
-
var Button = styled.button(
|
|
61
|
+
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) {
|
|
61
62
|
var theme = _a.theme, color = _a.color;
|
|
62
63
|
return COLOR_TO_BUTTON_STYLE(theme, color);
|
|
63
64
|
}, function (_a) {
|
|
@@ -67,7 +68,7 @@ var Button = styled.button(templateObject_18 || (templateObject_18 = __makeTempl
|
|
|
67
68
|
var fullWidth = _a.fullWidth;
|
|
68
69
|
return fullWidth && "width: 100%;";
|
|
69
70
|
});
|
|
70
|
-
var Label = styled.span(
|
|
71
|
+
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) {
|
|
71
72
|
var theme = _a.theme, disabled = _a.disabled;
|
|
72
73
|
return disabled
|
|
73
74
|
? theme.color.foreground.neutralBaseDisabled
|
|
@@ -77,4 +78,4 @@ var Label = styled.span(templateObject_19 || (templateObject_19 = __makeTemplate
|
|
|
77
78
|
return SIZE_TO_LABEL_STYLE[size];
|
|
78
79
|
});
|
|
79
80
|
export default SquareButton;
|
|
80
|
-
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;
|
|
81
|
+
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;
|
package/dist/components/Tag.d.ts
CHANGED
package/dist/icons/Custom.d.ts
CHANGED
|
@@ -59,3 +59,15 @@ export declare const customAiHelperSvg: string;
|
|
|
59
59
|
export declare const CustomAiHelperIcon: (props: {
|
|
60
60
|
className?: string;
|
|
61
61
|
}) => JSX.Element;
|
|
62
|
+
export declare const customBasicSvg: string;
|
|
63
|
+
export declare const CustomBasicIcon: (props: {
|
|
64
|
+
className?: string;
|
|
65
|
+
}) => JSX.Element;
|
|
66
|
+
export declare const customBasicPlusSvg: string;
|
|
67
|
+
export declare const CustomBasicPlusIcon: (props: {
|
|
68
|
+
className?: string;
|
|
69
|
+
}) => JSX.Element;
|
|
70
|
+
export declare const customProSvg: string;
|
|
71
|
+
export declare const CustomProIcon: (props: {
|
|
72
|
+
className?: string;
|
|
73
|
+
}) => JSX.Element;
|
package/dist/icons/Custom.js
CHANGED
|
@@ -57,3 +57,12 @@ export var CustomTypeHelperIcon = function (props) { return (_jsxs("svg", __assi
|
|
|
57
57
|
import customAiHelperSvgImport from "./custom/ai-helper.svg";
|
|
58
58
|
export var customAiHelperSvg = customAiHelperSvgImport;
|
|
59
59
|
export var CustomAiHelperIcon = function (props) { 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: "#031B20" }), _jsx("path", { d: "M18.127 10.7312C18.3052 10.25 18.3498 9.76875 18.3052 9.2875C18.2607 8.80625 18.0824 8.325 17.8596 7.8875C17.4586 7.23125 16.8793 6.70625 16.2109 6.4C15.4979 6.09375 14.7404 6.00625 13.9829 6.18125C13.6264 5.83125 13.2254 5.525 12.7798 5.30625C12.3342 5.0875 11.7995 5 11.3093 5C10.5518 5 9.79428 5.21875 9.17045 5.65625C8.54661 6.09375 8.10101 6.70625 7.87821 7.40625C7.34349 7.5375 6.8979 7.75625 6.4523 8.01875C6.05126 8.325 5.73934 8.71875 5.47198 9.1125C5.07095 9.76875 4.93727 10.5125 5.02639 11.2562C5.11551 12 5.42742 12.7 5.91758 13.2688C5.73934 13.75 5.69478 14.2312 5.73934 14.7125C5.7839 15.1937 5.96214 15.675 6.18494 16.1125C6.58598 16.7688 7.16525 17.2937 7.83365 17.6C8.54661 17.9062 9.30413 17.9937 10.0616 17.8187C10.4181 18.1687 10.8192 18.475 11.2648 18.6937C11.7104 18.9125 12.2451 19 12.7352 19C13.4928 19 14.2503 18.7812 14.8741 18.3438C15.4979 17.9062 15.9435 17.2937 16.1663 16.5938C16.6565 16.5062 17.1467 16.2875 17.5477 15.9812C17.9487 15.675 18.3052 15.325 18.528 14.8875C18.929 14.2312 19.0627 13.4875 18.9736 12.7438C18.8845 12 18.6171 11.3 18.127 10.7312ZM12.7798 18.0813C12.0668 18.0813 11.5321 17.8625 11.042 17.4688C11.042 17.4688 11.0865 17.425 11.1311 17.425L13.9829 15.8062C14.072 15.7625 14.1166 15.7188 14.1611 15.6312C14.2057 15.5437 14.2057 15.5 14.2057 15.4125V11.475L15.4088 12.175V15.4125C15.4534 16.9437 14.2057 18.0813 12.7798 18.0813ZM7.03157 15.675C6.71966 15.15 6.58598 14.5375 6.71966 13.925C6.71966 13.925 6.76422 13.9688 6.80878 13.9688L9.6606 15.5875C9.74972 15.6312 9.79428 15.6312 9.8834 15.6312C9.97252 15.6312 10.0616 15.6312 10.1062 15.5875L13.5819 13.6187V14.975L10.6855 16.6375C10.0616 16.9875 9.34869 17.075 8.68029 16.9C7.96733 16.725 7.38805 16.2875 7.03157 15.675ZM6.27406 9.59375C6.58598 9.06875 7.07613 8.675 7.65541 8.45625V8.54375V11.7812C7.65541 11.8688 7.65541 11.9562 7.69997 12C7.74453 12.0875 7.78909 12.1312 7.87821 12.175L11.3539 14.1438L10.1508 14.8438L7.29893 13.225C6.6751 12.875 6.2295 12.3063 6.05126 11.65C5.87302 10.9938 5.91758 10.2062 6.27406 9.59375ZM16.1218 11.825L12.6461 9.85625L13.8492 9.15625L16.7011 10.775C17.1467 11.0375 17.5031 11.3875 17.7259 11.825C17.9487 12.2625 18.0824 12.7438 18.0379 13.2688C17.9933 13.75 17.8151 14.2312 17.5031 14.625C17.1912 15.0188 16.7902 15.325 16.3 15.5V12.175C16.3 12.0875 16.3 12 16.2555 11.9562C16.2555 11.9562 16.2109 11.8688 16.1218 11.825ZM17.3249 10.075C17.3249 10.075 17.2803 10.0312 17.2358 10.0312L14.3839 8.4125C14.2948 8.36875 14.2503 8.36875 14.1611 8.36875C14.072 8.36875 13.9829 8.36875 13.9383 8.4125L10.4627 10.3812V9.025L13.3591 7.3625C13.8047 7.1 14.2948 7.0125 14.8295 7.0125C15.3197 7.0125 15.8099 7.1875 16.2555 7.49375C16.6565 7.8 17.013 8.19375 17.1912 8.63125C17.3695 9.06875 17.414 9.59375 17.3249 10.075ZM9.83884 12.525L8.63573 11.825V8.54375C8.63573 8.0625 8.76941 7.5375 9.03677 7.14375C9.30413 6.70625 9.70516 6.4 10.1508 6.18125C10.5964 5.9625 11.1311 5.875 11.6212 5.9625C12.1114 6.00625 12.6016 6.225 13.0026 6.53125C13.0026 6.53125 12.958 6.575 12.9135 6.575L10.0616 8.19375C9.97252 8.2375 9.92796 8.28125 9.8834 8.36875C9.83884 8.45625 9.83884 8.5 9.83884 8.5875V12.525ZM10.4627 11.125L12.0223 10.25L13.5819 11.125V12.875L12.0223 13.75L10.4627 12.875V11.125Z", fill: "#CFF4F6" })] }))); };
|
|
60
|
+
import customBasicSvgImport from "./custom/basic.svg";
|
|
61
|
+
export var customBasicSvg = customBasicSvgImport;
|
|
62
|
+
export var CustomBasicIcon = function (props) { return (_jsx("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: "M14.8262 10.867L11.5506 9.99917V1.20304C11.5506 0.854839 11.152 0.699915 10.9537 0.972161L5 9.13204L8.27563 9.99992V18.7968C8.27563 19.145 8.67423 19.2999 8.8725 19.0277L14.8262 10.8678V10.867Z", fill: "#3E88FF" }) }))); };
|
|
63
|
+
import customBasicPlusSvgImport from "./custom/basic-plus.svg";
|
|
64
|
+
export var customBasicPlusSvg = customBasicPlusSvgImport;
|
|
65
|
+
export var CustomBasicPlusIcon = function (props) { 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({ "clip-path": "url(#clip0_135_79001)" }, { 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_135_79001" }, { children: _jsx("rect", { width: "10", height: "10", fill: "white", transform: "translate(8.95825 0.833252)" }) })) })] }))); };
|
|
66
|
+
import customProSvgImport from "./custom/pro.svg";
|
|
67
|
+
export var customProSvg = customProSvgImport;
|
|
68
|
+
export var CustomProIcon = function (props) { 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("mask", __assign({ id: "mask0_135_78994", 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" }) })), _jsx("g", __assign({ mask: "url(#mask0_135_78994)" }, { children: _jsx("rect", { x: "-2.67505", y: "-4.646", width: "26.1728", height: "29.2564", fill: "url(#pattern0)" }) })), _jsxs("defs", { children: [_jsx("pattern", __assign({ id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1" }, { children: _jsx("use", { transform: "scale(0.00287356 0.00257069)" }) })), _jsx("image", { id: "image0_135_78994", width: "348", height: "389" })] })] }))); };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="20"
|
|
3
|
+
height="20"
|
|
4
|
+
viewBox="0 0 20 20"
|
|
5
|
+
fill="none"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<path
|
|
9
|
+
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"
|
|
10
|
+
fill="#3E88FF"
|
|
11
|
+
/>
|
|
12
|
+
<g clip-path="url(#clip0_135_79001)">
|
|
13
|
+
<path
|
|
14
|
+
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"
|
|
15
|
+
fill="#363636"
|
|
16
|
+
/>
|
|
17
|
+
<path
|
|
18
|
+
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"
|
|
19
|
+
fill="#363636"
|
|
20
|
+
/>
|
|
21
|
+
</g>
|
|
22
|
+
<defs>
|
|
23
|
+
<clipPath id="clip0_135_79001">
|
|
24
|
+
<rect
|
|
25
|
+
width="10"
|
|
26
|
+
height="10"
|
|
27
|
+
fill="white"
|
|
28
|
+
transform="translate(8.95825 0.833252)"
|
|
29
|
+
/>
|
|
30
|
+
</clipPath>
|
|
31
|
+
</defs>
|
|
32
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M14.8262 10.867L11.5506 9.99917V1.20304C11.5506 0.854839 11.152 0.699915 10.9537 0.972161L5 9.13204L8.27563 9.99992V18.7968C8.27563 19.145 8.67423 19.2999 8.8725 19.0277L14.8262 10.8678V10.867Z" fill="#3E88FF" />
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<svg
|
|
2
|
+
width="20"
|
|
3
|
+
height="20"
|
|
4
|
+
viewBox="0 0 20 20"
|
|
5
|
+
fill="none"
|
|
6
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
7
|
+
>
|
|
8
|
+
<mask
|
|
9
|
+
id="mask0_135_78994"
|
|
10
|
+
maskUnits="userSpaceOnUse"
|
|
11
|
+
x="5"
|
|
12
|
+
y="0"
|
|
13
|
+
width="11"
|
|
14
|
+
height="20"
|
|
15
|
+
>
|
|
16
|
+
<path
|
|
17
|
+
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"
|
|
18
|
+
fill="white"
|
|
19
|
+
/>
|
|
20
|
+
</mask>
|
|
21
|
+
<g mask="url(#mask0_135_78994)">
|
|
22
|
+
<rect
|
|
23
|
+
x="-2.67505"
|
|
24
|
+
y="-4.646"
|
|
25
|
+
width="26.1728"
|
|
26
|
+
height="29.2564"
|
|
27
|
+
fill="url(#pattern0)"
|
|
28
|
+
/>
|
|
29
|
+
</g>
|
|
30
|
+
<defs>
|
|
31
|
+
<pattern
|
|
32
|
+
id="pattern0"
|
|
33
|
+
patternContentUnits="objectBoundingBox"
|
|
34
|
+
width="1"
|
|
35
|
+
height="1"
|
|
36
|
+
>
|
|
37
|
+
<use
|
|
38
|
+
transform="scale(0.00287356 0.00257069)"
|
|
39
|
+
/>
|
|
40
|
+
</pattern>
|
|
41
|
+
<image
|
|
42
|
+
id="image0_135_78994"
|
|
43
|
+
width="348"
|
|
44
|
+
height="389"
|
|
45
|
+
/>
|
|
46
|
+
</defs>
|
|
47
|
+
</svg>
|