@team-monolith/cds 0.18.0 → 0.18.2
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.
|
@@ -33,10 +33,13 @@ import shadows from "../../foundation/shadows";
|
|
|
33
33
|
import styled from "@emotion/styled";
|
|
34
34
|
import { MOBILE } from "../../foundation/breakpoints";
|
|
35
35
|
import AlertDialogContext from "./AlertDialogContext";
|
|
36
|
+
import { ZINDEX } from "../../utils/zIndex";
|
|
36
37
|
export var AlertDialog = React.forwardRef(function AlertDialog(props, ref) {
|
|
37
38
|
var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, open = props.open, onClose = props.onClose, children = props.children, icon = props.icon, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon"]);
|
|
38
39
|
var theme = useTheme();
|
|
39
|
-
return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref
|
|
40
|
+
return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref, sx: {
|
|
41
|
+
zIndex: ZINDEX.ALERT,
|
|
42
|
+
} }, other, { children: _jsxs(Component, __assign({ className: className, css: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 480px;\n background: ", ";\n box-shadow: ", ";\n border-radius: 16px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 24px;\n box-sizing: border-box;\n\n display: grid;\n ", "\n\n gap: 8px 16px;\n\n ", "\n "], ["\n width: 480px;\n background: ", ";\n box-shadow: ", ";\n border-radius: 16px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 24px;\n box-sizing: border-box;\n\n display: grid;\n ", "\n\n gap: 8px 16px;\n\n ", "\n "])), theme.color.background.neutralBase, shadows.shadow04, icon
|
|
40
43
|
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n grid-template-columns: 32px 1fr;\n grid-template-areas:\n \"icon title\"\n \"iconPadding content\"\n \"actions actions\";\n "], ["\n grid-template-columns: 32px 1fr;\n grid-template-areas:\n \"icon title\"\n \"iconPadding content\"\n \"actions actions\";\n "]))) : css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "], ["\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "]))), MOBILE(css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: calc(100% - 24px);\n grid-template-columns: auto;\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "], ["\n width: calc(100% - 24px);\n grid-template-columns: auto;\n grid-template-areas:\n \"title\"\n \"content\"\n \"actions\";\n "]))))) }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsx(AlertDialogContext.Provider, __assign({ value: { icon: icon } }, { children: children }))] })) })));
|
|
41
44
|
});
|
|
42
45
|
var IconDiv = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n grid-area: icon;\n ", "\n svg {\n width: 32px;\n height: 32px;\n }\n\n ", "\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n grid-area: icon;\n ", "\n svg {\n width: 32px;\n height: 32px;\n }\n\n ", "\n"])), function (_a) {
|
|
@@ -32,12 +32,12 @@ import React from "react";
|
|
|
32
32
|
import { HOVER } from "../utils/hover";
|
|
33
33
|
var COLOR_TO_BUTTON_STYLE = function (theme, color, disabled) {
|
|
34
34
|
return ({
|
|
35
|
-
primary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n
|
|
36
|
-
? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), theme.color.background.primaryDisabled) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background: ", ";\n ", "\n "], ["\n background: ", ";\n ", "\n "])), theme.color.background.primary, HOVER(css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), theme.color.background.primaryActive)))),
|
|
35
|
+
primary: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
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
|
secondary: 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
|
-
danger: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n
|
|
40
|
-
? css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), theme.color.background.dangerDisabled) : css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background: ", ";\n ", "\n "], ["\n background: ", ";\n ", "\n "])), theme.color.background.danger, HOVER(css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), theme.color.background.dangerActive)))),
|
|
39
|
+
danger: css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
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)))),
|
|
41
41
|
textNeutral: css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
42
42
|
? css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background: none;\n color: ", ";\n "], ["\n background: none;\n color: ", ";\n "])), theme.color.foreground.neutralBaseDisabled) : css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background: none;\n color: ", ";\n ", "\n "], ["\n background: none;\n color: ", ";\n ", "\n "])), theme.color.foreground.neutralBase, HOVER(css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background: ", ";\n color: ", ";\n "], ["\n background: ", ";\n color: ", ";\n "])), theme.color.background.neutralAltActive, theme.color.foreground.neutralBase)))),
|
|
43
43
|
textDanger: css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), disabled
|
|
@@ -65,7 +65,7 @@ var Button = React.forwardRef(function Button(props, ref) {
|
|
|
65
65
|
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
66
|
var theme = useTheme();
|
|
67
67
|
return (_jsxs(Component, __assign({ type: "button" }, other, { className: className, ref: ref, css: [
|
|
68
|
-
css(templateObject_35 || (templateObject_35 = __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:
|
|
68
|
+
css(templateObject_35 || (templateObject_35 = __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
|
|
69
69
|
? css(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n cursor: default;\n pointer-events: none;\n "], ["\n cursor: default;\n pointer-events: none;\n "]))) : css(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n cursor: pointer;\n "], ["\n cursor: pointer;\n "]))), fullWidth ? "100%" : "auto"),
|
|
70
70
|
COLOR_TO_BUTTON_STYLE(theme, color, Boolean(disabled)),
|
|
71
71
|
SIZE_TO_BUTTON_STYLE[size],
|