@team-monolith/cds 0.4.4 → 0.4.6
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.
|
@@ -50,7 +50,7 @@ var Banner = React.forwardRef(function (props, ref) {
|
|
|
50
50
|
css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n color: ", ";\n line-height: 125%;\n "], ["\n box-sizing: border-box;\n display: flex;\n align-items: center;\n color: ", ";\n line-height: 125%;\n "])), COLOR.white),
|
|
51
51
|
COLOR_TO_STYLE(theme, color),
|
|
52
52
|
fullWidth
|
|
53
|
-
? 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
|
|
53
|
+
? 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 "]))),
|
|
54
54
|
] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, __assign({ setPaddingRight: !close && !buttonLabel }, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx("div", { children: content })] })), buttonLabel && (_jsx(BannerButton, __assign({ onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(CloseButton, __assign({ onClick: onClose }, { children: _jsx(StyledCloseFillIcon, {}) })))] })));
|
|
55
55
|
});
|
|
56
56
|
var StyledCloseFillIcon = styled(CloseFillIcon)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: block;\n padding: 14px;\n width: 20px;\n height: 20px;\n\n color: currentColor;\n"], ["\n display: block;\n padding: 14px;\n width: 20px;\n height: 20px;\n\n color: currentColor;\n"])));
|
package/dist/components/Input.js
CHANGED
|
@@ -54,7 +54,7 @@ var Input = React.forwardRef(function (props, ref) {
|
|
|
54
54
|
var _className = props.className, inputBaseProps = __rest(props, ["className"]);
|
|
55
55
|
return (_jsxs(InputWrapper, __assign({ className: props.className, size: props.size, fullWidth: props.fullWidth, ref: ref }, other, { children: [label ? (_jsxs(Label, __assign({ disabled: props.disabled }, { children: [label, " ", _jsx(InputBase, __assign({}, inputBaseProps))] }))) : (_jsx(InputBase, __assign({}, inputBaseProps))), hintText && (_jsxs(Hint, __assign({ color: props.color, disabled: props.disabled }, { children: [hintIcon, hintText] })))] })));
|
|
56
56
|
});
|
|
57
|
-
var InputWrapper = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display:
|
|
57
|
+
var InputWrapper = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 8px;\n ", "\n ", "\n\n position: relative;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 8px;\n ", "\n ", "\n\n position: relative;\n"])), function (_a) {
|
|
58
58
|
var size = _a.size;
|
|
59
59
|
return SIZE_TO_FONT_STYLES(size);
|
|
60
60
|
}, function (_a) {
|
|
@@ -29,11 +29,11 @@ var COLOR_TO_INPUT_STYLES = function (theme, color, disabled) {
|
|
|
29
29
|
activeSuccess: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "], ["\n border: 2px solid ", ";\n background: ", ";\n color: ", ";\n "])), theme.color.foreground.success, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
|
|
30
30
|
}[color];
|
|
31
31
|
};
|
|
32
|
-
var SIZE_TO_STYLES = function (size) {
|
|
32
|
+
var SIZE_TO_STYLES = function (size, fullWidth) {
|
|
33
33
|
return ({
|
|
34
|
-
small: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-top: 8px;\n padding-bottom: 8px;\n
|
|
35
|
-
medium: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-top: 12px;\n padding-bottom: 12px;\n
|
|
36
|
-
large: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-top: 14px;\n padding-bottom: 14px;\n
|
|
34
|
+
small: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n padding-top: 8px;\n padding-bottom: 8px;\n ", ";\n height: 36px;\n "], ["\n padding-top: 8px;\n padding-bottom: 8px;\n ", ";\n height: 36px;\n "])), !fullWidth && "max-width: 300px"),
|
|
35
|
+
medium: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n padding-top: 12px;\n padding-bottom: 12px;\n ", ";\n height: 48px;\n "], ["\n padding-top: 12px;\n padding-bottom: 12px;\n ", ";\n height: 48px;\n "])), !fullWidth && "max-width: 375px"),
|
|
36
|
+
large: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n padding-top: 14px;\n padding-bottom: 14px;\n ", ";\n height: 56px;\n "], ["\n padding-top: 14px;\n padding-bottom: 14px;\n ", ";\n height: 56px;\n "])), !fullWidth && "max-width: 375px"),
|
|
37
37
|
}[size]);
|
|
38
38
|
};
|
|
39
39
|
export function InputBase(props) {
|
|
@@ -42,11 +42,11 @@ export function InputBase(props) {
|
|
|
42
42
|
}
|
|
43
43
|
var InputContainer = styled.div(function (_a) {
|
|
44
44
|
var theme = _a.theme, color = _a.color, inputSize = _a.inputSize, disabled = _a.disabled, fullWidth = _a.fullWidth;
|
|
45
|
-
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n\n box-sizing: border-box;\n padding: 14px 16px;\n border-radius: 8px;\n ", "\n ", "\n ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n "], ["\n display: flex;\n align-items: center;\n gap: 16px;\n\n box-sizing: border-box;\n padding: 14px 16px;\n border-radius: 8px;\n ", "\n ", "\n ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n "])), COLOR_TO_INPUT_STYLES(theme, color, disabled), SIZE_TO_STYLES(inputSize), fullWidth && "width: inherit;");
|
|
45
|
+
return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n\n box-sizing: border-box;\n padding: 14px 16px;\n border-radius: 8px;\n ", "\n ", "\n ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n "], ["\n display: flex;\n align-items: center;\n gap: 16px;\n\n box-sizing: border-box;\n padding: 14px 16px;\n border-radius: 8px;\n ", "\n ", "\n ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n "])), COLOR_TO_INPUT_STYLES(theme, color, disabled), SIZE_TO_STYLES(inputSize, fullWidth), fullWidth && "width: inherit;");
|
|
46
46
|
});
|
|
47
47
|
var StyledInput = styled.input(function (_a) {
|
|
48
48
|
var theme = _a.theme;
|
|
49
|
-
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n appearance: none;\n flex: 1;\n
|
|
49
|
+
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n appearance: none;\n flex: 1;\n width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container\n border: none;\n padding: 0;\n background-color: transparent;\n font: inherit;\n color: currentColor;\n\n &:focus-visible {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n }\n "], ["\n appearance: none;\n flex: 1;\n width: 0; // https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container\n border: none;\n padding: 0;\n background-color: transparent;\n font: inherit;\n color: currentColor;\n\n &:focus-visible {\n outline: none;\n }\n &::placeholder {\n color: ", ";\n }\n "])), theme.color.foreground.neutralBaseDisabled);
|
|
50
50
|
});
|
|
51
51
|
var ClearButton = styled.button(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n color: currentColor;\n &:not(:disabled) {\n cursor: pointer;\n }\n display: flex;\n align-items: center;\n"], ["\n ", "\n color: currentColor;\n &:not(:disabled) {\n cursor: pointer;\n }\n display: flex;\n align-items: center;\n"])), RESET_BUTTON);
|
|
52
52
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|