@team-monolith/cds 1.0.1 → 1.1.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/README.md +10 -1
- package/dist/components/Button.d.ts +1 -1
- package/dist/components/Button.js +14 -12
- package/dist/components/SquareButton.js +13 -12
- package/dist/patterns/SegmentedControl/SegmentedControlButton.js +1 -1
- package/dist/patterns/SegmentedControl/SegmentedControlGroup.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -23,4 +23,13 @@
|
|
|
23
23
|
- 네이밍은 remixicon 라이브러리의 svg 파일 이름에서 다음과 같이 변환됩니다.
|
|
24
24
|
- string 형태로 export되는 값은 다음 예시와 같이 camel case로 네이밍됩니다. (예: `arrowDownCircleFillSvg`)
|
|
25
25
|
- React JSX 형태로 export되는 값은 다음 예시와 같이 pascal case로 네이밍됩니다. (예: `ArrowDownCircleFillIcon`)
|
|
26
|
-
- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
|
|
26
|
+
- svg 파일 이름이 숫자로 시작하는 경우, 제일 앞에 `i`를 붙입니다. (예: `4k-fill.svg` -> `i4KFillSvg`, `I4KFillIcon`)
|
|
27
|
+
|
|
28
|
+
### 개발 및 배포 절차
|
|
29
|
+
|
|
30
|
+
`npm run storybook` 을 실행하면 스토리북이 실행됩니다. 이곳에서 디버깅을 진행합니다.
|
|
31
|
+
|
|
32
|
+
패키지 특성상 개발환경이 따로 존재하지 않으며 `npm run compile` 후 `npm publish` 를 사용하여 npm 에 배포합니다.
|
|
33
|
+
|
|
34
|
+
이때 npm team-monolith 에 소속되어 있어야 합니다.
|
|
35
|
+
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { PolymorphicProps } from "@mui/base";
|
|
3
|
-
export type ButtonColor = "primary" | "grey" | "danger" | "textNeutral" | "textDanger" | "textPrimary" | "black";
|
|
3
|
+
export type ButtonColor = "primary" | "grey" | "danger" | "textNeutral" | "textDanger" | "textPrimary" | "black" | "white";
|
|
4
4
|
export type ButtonSize = "large" | "medium" | "small" | "xsmall";
|
|
5
5
|
export interface ButtonOwnProps<RootComponentType extends React.ElementType> {
|
|
6
6
|
className?: string;
|
|
@@ -46,19 +46,21 @@ var COLOR_TO_BUTTON_STYLE = function (theme, color, 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
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
|
+
white: css(templateObject_32 || (templateObject_32 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
50
|
+
? 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)))),
|
|
49
51
|
})[color];
|
|
50
52
|
};
|
|
51
53
|
var SIZE_TO_BUTTON_STYLE = {
|
|
52
|
-
large: css(
|
|
53
|
-
medium: css(
|
|
54
|
-
small: css(
|
|
55
|
-
xsmall: css(
|
|
54
|
+
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 "]))),
|
|
55
|
+
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 "]))),
|
|
56
|
+
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 "]))),
|
|
57
|
+
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 "]))),
|
|
56
58
|
};
|
|
57
59
|
var SIZE_TO_LABEL_STYLE = {
|
|
58
|
-
large: css(
|
|
59
|
-
medium: css(
|
|
60
|
-
small: css(
|
|
61
|
-
xsmall: css(
|
|
60
|
+
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 "]))),
|
|
61
|
+
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 "]))),
|
|
62
|
+
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 "]))),
|
|
63
|
+
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 "]))),
|
|
62
64
|
};
|
|
63
65
|
/**
|
|
64
66
|
* [피그마](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) {
|
|
|
67
69
|
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
70
|
var theme = useTheme();
|
|
69
71
|
return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
|
|
70
|
-
css(
|
|
71
|
-
? css(
|
|
72
|
+
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
|
|
73
|
+
? 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"),
|
|
72
74
|
COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
|
|
73
75
|
SIZE_TO_BUTTON_STYLE[size],
|
|
74
76
|
], disabled: disabled }, { children: [startIcon, _jsx(Label, __assign({ size: size }, { children: label })), endIcon] })));
|
|
75
77
|
});
|
|
76
|
-
var Label = styled.span(
|
|
78
|
+
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) {
|
|
77
79
|
var size = _a.size;
|
|
78
80
|
return SIZE_TO_LABEL_STYLE[size];
|
|
79
81
|
});
|
|
80
82
|
export default Button;
|
|
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;
|
|
83
|
+
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;
|
|
@@ -37,28 +37,29 @@ var COLOR_TO_BUTTON_STYLE = function (theme, color) {
|
|
|
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
39
|
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),
|
|
40
|
+
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),
|
|
40
41
|
})[color];
|
|
41
42
|
};
|
|
42
43
|
var SIZE_TO_BUTTON_STYLE = {
|
|
43
|
-
large: css(
|
|
44
|
-
medium: css(
|
|
45
|
-
small: css(
|
|
46
|
-
xsmall: css(
|
|
44
|
+
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 "]))),
|
|
45
|
+
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 "]))),
|
|
46
|
+
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 "]))),
|
|
47
|
+
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 "]))),
|
|
47
48
|
};
|
|
48
49
|
var SIZE_TO_LABEL_STYLE = {
|
|
49
|
-
large: css(
|
|
50
|
-
medium: css(
|
|
51
|
-
small: css(
|
|
52
|
-
xsmall: css(
|
|
50
|
+
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 "]))),
|
|
51
|
+
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 "]))),
|
|
52
|
+
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 "]))),
|
|
53
|
+
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 "]))),
|
|
53
54
|
};
|
|
54
55
|
/**
|
|
55
56
|
* [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=22-374&t=kTLv3t86qtGalHSS-0)
|
|
56
57
|
*/
|
|
57
58
|
var SquareButton = React.forwardRef(function SquareButton(props, ref) {
|
|
58
59
|
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"]);
|
|
59
|
-
return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: css(
|
|
60
|
+
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 })))] })));
|
|
60
61
|
});
|
|
61
|
-
var Button = styled.button(
|
|
62
|
+
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) {
|
|
62
63
|
var theme = _a.theme, color = _a.color;
|
|
63
64
|
return COLOR_TO_BUTTON_STYLE(theme, color);
|
|
64
65
|
}, function (_a) {
|
|
@@ -68,7 +69,7 @@ var Button = styled.button(templateObject_20 || (templateObject_20 = __makeTempl
|
|
|
68
69
|
var fullWidth = _a.fullWidth;
|
|
69
70
|
return fullWidth && "width: 100%;";
|
|
70
71
|
});
|
|
71
|
-
var Label = styled.span(
|
|
72
|
+
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) {
|
|
72
73
|
var theme = _a.theme, disabled = _a.disabled;
|
|
73
74
|
return disabled
|
|
74
75
|
? theme.color.foreground.neutralBaseDisabled
|
|
@@ -78,4 +79,4 @@ var Label = styled.span(templateObject_21 || (templateObject_21 = __makeTemplate
|
|
|
78
79
|
return SIZE_TO_LABEL_STYLE[size];
|
|
79
80
|
});
|
|
80
81
|
export default SquareButton;
|
|
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;
|
|
82
|
+
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;
|
|
@@ -44,6 +44,6 @@ export var SegmentedControlButton = React.forwardRef(function SegmentedControlBu
|
|
|
44
44
|
var isActive = context.multiSelect
|
|
45
45
|
? context.value.includes(props.value)
|
|
46
46
|
: context.value === props.value;
|
|
47
|
-
return (_jsx(Button, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n ", "\n "], ["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n ", "\n "])), isActive && "box-shadow: ".concat(shadows.shadow04, ";")) }, other, { ref: ref, color: isActive ? "
|
|
47
|
+
return (_jsx(Button, __assign({ css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n ", "\n "], ["\n display: flex;\n justify-content: center;\n flex-grow: 1;\n ", "\n "])), isActive && "box-shadow: ".concat(shadows.shadow04, ";")) }, other, { ref: ref, color: isActive ? "white" : "textNeutral", size: context.size, onClick: handleClick })));
|
|
48
48
|
});
|
|
49
49
|
var templateObject_1;
|
|
@@ -33,7 +33,7 @@ import React from "react";
|
|
|
33
33
|
export var SegmentedControlGroup = React.forwardRef(function SegmentedControlGroup(props, ref) {
|
|
34
34
|
var _a = props.component, Component = _a === void 0 ? "div" : _a, className = props.className, children = props.children, fullWidth = props.fullWidth, multiSelect = props.multiSelect;
|
|
35
35
|
var theme = useTheme();
|
|
36
|
-
return (_jsx(Component, __assign({ ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n
|
|
36
|
+
return (_jsx(Component, __assign({ ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n padding: 4px;\n\n width: ", ";\n background-color: ", ";\n border-radius: 8px;\n border: 1px solid ", ";\n "], ["\n display: flex;\n padding: 4px;\n\n width: ", ";\n background-color: ", ";\n border-radius: 8px;\n border: 1px solid ", ";\n "])), fullWidth ? "100%" : "fit-content", theme.color.background.neutralAlt, theme.color.background.neutralAltActive) }, { children: _jsx(SegmentedControlGroupPropsContext.Provider, __assign({ value: __assign(__assign({}, props), { onClick: function (newValue) {
|
|
37
37
|
var _a, _b, _c;
|
|
38
38
|
if (multiSelect) {
|
|
39
39
|
if (props.value.includes(newValue)) {
|