@team-monolith/cds 1.1.0 → 1.2.1

package/dist/CodleDesignSystemProvider.js

@@ -1,25 +1,10 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Global, ThemeProvider, css } from "@emotion/react";
 import { ThemeProvider as MuiThemeProvider } from "@mui/material";
 import COLOR from "./foundation/color";
 import FONT from "./foundation/font";
 import { createTheme } from "@mui/material";
-export var light = {
+export const light = {
     fontFamily: {
         ui: FONT.pretendard,
         title: FONT.naumSquareNeo,
@@ -92,7 +77,7 @@ export var light = {
 };
 // eslint-disable-next-line import/no-anonymous-default-export
 export default function (props) {
-    var muiTheme = createTheme({
+    const muiTheme = createTheme({
         typography: {
             fontFamily: props.fontFamily,
         },
@@ -104,6 +89,9 @@ export default function (props) {
             },
         },
     });
-    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 })) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Global, { styles: css `
+          body {
+            font-family: ${FONT.pretendard};
+          }
+        ` }), _jsx(MuiThemeProvider, Object.assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, Object.assign({ theme: light }, { children: props.children })) }))] }));
 }
-var templateObject_1;

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -34,17 +19,66 @@ import styled from "@emotion/styled";
 import { MOBILE } from "../../foundation/breakpoints";
 import AlertDialogContext from "./AlertDialogContext";
 import { ZINDEX } from "../../utils/zIndex";
-export var AlertDialog = React.forwardRef(function AlertDialog(props, ref) {
-    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, disableIconPadding = props.disableIconPadding, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon", "disableIconPadding"]);
-    var theme = useTheme();
-    var paddingAreaName = disableIconPadding ? "content" : "iconPadding";
-    return (_jsx(MuiModal, __assign({ open: open, onClose: onClose, ref: ref, sx: {
+export const AlertDialog = React.forwardRef(function AlertDialog(props, ref) {
+    const { className, component: Component = "div", open, onClose, children, icon, disableIconPadding } = props, other = __rest(props, ["className", "component", "open", "onClose", "children", "icon", "disableIconPadding"]);
+    const theme = useTheme();
+    const paddingAreaName = disableIconPadding ? "content" : "iconPadding";
+    return (_jsx(MuiModal, Object.assign({ open: open, onClose: onClose, ref: ref, sx: {
             zIndex: ZINDEX.ALERT,
-        } }, 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
-                ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                  grid-template-columns: 32px 1fr;\n                  grid-template-areas:\n                    \"icon title\"\n                    \"", " content\"\n                    \"actions actions\";\n                "], ["\n                  grid-template-columns: 32px 1fr;\n                  grid-template-areas:\n                    \"icon title\"\n                    \"", " content\"\n                    \"actions actions\";\n                "])), paddingAreaName) : 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 }))] })) })));
+        } }, other, { children: _jsxs(Component, Object.assign({ className: className, css: css `
+            width: 480px;
+            background: ${theme.color.background.neutralBase};
+            box-shadow: ${shadows.shadow04};
+            border-radius: 16px;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            padding: 24px;
+            box-sizing: border-box;
+
+            display: grid;
+            ${icon
+                ? css `
+                  grid-template-columns: 32px 1fr;
+                  grid-template-areas:
+                    "icon title"
+                    "${paddingAreaName} content"
+                    "actions actions";
+                `
+                : css `
+                  grid-template-areas:
+                    "title"
+                    "content"
+                    "actions";
+                `}
+
+            gap: 8px 16px;
+
+            ${MOBILE(css `
+              width: calc(100% - 24px);
+              grid-template-columns: auto;
+              grid-template-areas:
+                "title"
+                "content"
+                "actions";
+            `)}
+          ` }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsx(AlertDialogContext.Provider, Object.assign({ value: { icon } }, { children: children }))] })) })));
 });
-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) {
-    var theme = _a.theme;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    color: ", ";\n  "], ["\n    color: ", ";\n  "])), theme.color.background.infoActive);
-}, MOBILE(css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: none;\n  "], ["\n    display: none;\n  "])))));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+const IconDiv = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-area: icon;
+  ${({ theme }) => css `
+    color: ${theme.color.background.infoActive};
+  `}
+  svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  ${MOBILE(css `
+    display: none;
+  `)}
+`;

package/dist/components/AlertDialog/AlertDialogActions.js

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -28,8 +13,14 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css } from "@emotion/react";
 import React from "react";
-export var AlertDialogActions = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, children = props.children, other = __rest(props, ["className", "component", "children"]);
-    return (_jsx(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        grid-area: actions;\n\n        margin-top: 8px;\n        display: flex;\n        gap: 16px;\n        justify-content: flex-end;\n      "], ["\n        grid-area: actions;\n\n        margin-top: 8px;\n        display: flex;\n        gap: 16px;\n        justify-content: flex-end;\n      "]))) }, { children: children })));
+export const AlertDialogActions = React.forwardRef((props, ref) => {
+    const { className, component: Component = "div", children } = props, other = __rest(props, ["className", "component", "children"]);
+    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
+        grid-area: actions;
+
+        margin-top: 8px;
+        display: flex;
+        gap: 16px;
+        justify-content: flex-end;
+      ` }, { children: children })));
 });
-var templateObject_1;

package/dist/components/AlertDialog/AlertDialogContent.js

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -28,9 +13,15 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
 import { css, useTheme } from "@emotion/react";
 import React from "react";
-export var AlertDialogContent = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, children = props.children, other = __rest(props, ["className", "component", "children"]);
-    var theme = useTheme();
-    return (_jsx(Component, __assign({}, other, { ref: ref, className: className, css: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        grid-area: content;\n\n        font-style: normal;\n        font-size: 18px;\n        line-height: 28px;\n        color: ", ";\n      "], ["\n        grid-area: content;\n\n        font-style: normal;\n        font-size: 18px;\n        line-height: 28px;\n        color: ", ";\n      "])), theme.color.foreground.neutralBase) }, { children: children })));
+export const AlertDialogContent = React.forwardRef((props, ref) => {
+    const { className, component: Component = "div", children } = props, other = __rest(props, ["className", "component", "children"]);
+    const theme = useTheme();
+    return (_jsx(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
+        grid-area: content;
+
+        font-style: normal;
+        font-size: 18px;
+        line-height: 28px;
+        color: ${theme.color.foreground.neutralBase};
+      ` }, { children: children })));
 });
-var templateObject_1;

package/dist/components/AlertDialog/AlertDialogTitle.js

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -32,10 +17,39 @@ import SquareButton from "../SquareButton";
 import { CloseFillIcon } from "../../icons";
 import AlertDialogContext from "./AlertDialogContext";
 import { MOBILE } from "../../foundation/breakpoints";
-export var AlertDialogTitle = React.forwardRef(function (props, ref) {
-    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"]);
-    var icon = React.useContext(AlertDialogContext).icon;
-    var theme = useTheme();
-    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.ui, 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 }))] })) }));
+export const AlertDialogTitle = React.forwardRef((props, ref) => {
+    const { className, component: Component = "div", onClose, children } = props, other = __rest(props, ["className", "component", "onClose", "children"]);
+    const { icon } = React.useContext(AlertDialogContext);
+    const theme = useTheme();
+    return (_jsx(_Fragment, { children: _jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: css `
+            grid-area: title;
+            font-family: ${theme.fontFamily.ui};
+            font-style: normal;
+            font-weight: 500;
+            font-size: 20px;
+            line-height: 36px;
+            color: ${theme.color.foreground.neutralBase};
+
+            display: flex;
+            justify-content: space-between;
+          ` }, { children: [_jsxs("div", Object.assign({ css: css `
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: flex-start;
+              gap: 16px;
+            ` }, { children: [icon && (_jsx("div", Object.assign({ css: css `
+                  display: none;
+                  ${MOBILE(css `
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    color: ${theme.color.background.infoActive};
+
+                    svg {
+                      width: 32px;
+                      height: 32px;
+                    }
+                  `)}
+                ` }, { children: icon }))), children] })), onClose && (_jsx(SquareButton, { color: "icon", size: "small", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })) }));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/Banner.js

@@ -1,18 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -33,37 +18,89 @@ import COLOR from "../foundation/color";
 import { CloseFillIcon } from "../icons";
 import { RESET_BUTTON } from "../utils/reset";
 import SquareButton from "./SquareButton";
-var COLOR_TO_STYLE = function (theme, color) {
-    return ({
-        red: css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), theme.color.container.dangerContainer, theme.color.container.dangerOnContainer),
-        blue: css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), theme.color.container.primaryContainer, theme.color.container.primaryOnContainer),
-        green: css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), theme.color.container.successContainer, theme.color.container.successOnContainer),
-        yellow: css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), theme.color.container.warningContainer, theme.color.container.warningOnContainer),
-    })[color];
-};
+const COLOR_TO_STYLE = (theme, color) => ({
+    red: css `
+      background: ${theme.color.container.dangerContainer};
+      color: ${theme.color.container.dangerOnContainer};
+    `,
+    blue: css `
+      background: ${theme.color.container.primaryContainer};
+      color: ${theme.color.container.primaryOnContainer};
+    `,
+    green: css `
+      background: ${theme.color.container.successContainer};
+      color: ${theme.color.container.successOnContainer};
+    `,
+    yellow: css `
+      background: ${theme.color.container.warningContainer};
+      color: ${theme.color.container.warningOnContainer};
+    `,
+})[color];
 /**
  * [피그마](https://www.figma.com/file/yhrRFizzmhPoHdw9FbYow2/Codle-PD-Kit---Components?type=design&node-id=44-2847&t=bhnL1ombbddld3RQ-0)
  */
-var Banner = React.forwardRef(function (props, ref) {
-    var className = props.className, _a = props.component, Component = _a === void 0 ? "div" : _a, headline = props.headline, content = props.content, icon = props.icon, color = props.color, buttonLabel = props.buttonLabel, onButtonClick = props.onButtonClick, close = props.close, onClose = props.onClose, fullWidth = props.fullWidth, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "onButtonClick", "close", "onClose", "fullWidth"]);
-    var theme = useTheme();
-    return (_jsxs(Component, __assign({}, other, { ref: ref, className: className, css: [
-            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),
+const Banner = React.forwardRef((props, ref) => {
+    const { className, component: Component = "div", headline, content, icon, color, buttonLabel, onButtonClick, close, onClose, fullWidth } = props, other = __rest(props, ["className", "component", "headline", "content", "icon", "color", "buttonLabel", "onButtonClick", "close", "onClose", "fullWidth"]);
+    const theme = useTheme();
+    return (_jsxs(Component, Object.assign({}, other, { ref: ref, className: className, css: [
+            css `
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+            color: ${COLOR.white};
+            line-height: 125%;
+          `,
             COLOR_TO_STYLE(theme, color),
             fullWidth
-                ? 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              "]))),
-        ] }, { 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 }))] })));
-});
-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"])));
-var HeadlineDiv = styled.div(function (_a) {
-    var theme = _a.theme;
-    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.ui);
-});
-var ContentDiv = styled.div(function (_a) {
-    var theme = _a.theme;
-    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.ui);
+                ? css `
+                width: 100%;
+              `
+                : css `
+                border-radius: 12px;
+                width: fit-content;
+              `,
+        ] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx(ContentDiv, { children: content })] }), buttonLabel && (_jsx(BannerButton, Object.assign({ type: "button", onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(SquareButton, { css: css `
+              > button,
+              > button:hover {
+                color: currentColor;
+              }
+            `, color: "icon", size: "medium", icon: _jsx(CloseFillIcon, {}), onClick: onClose }))] })));
 });
-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"])));
-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);
+const IconDiv = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 16px 0px 16px 16px;
+`;
+const HeadlineDiv = styled.div(({ theme }) => css `
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 20px; /* 125% */
+  `);
+const ContentDiv = styled.div(({ theme }) => css `
+    font-family: ${theme.fontFamily.ui};
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  `);
+const TextContainer = styled.div `
+  flex: 1;
+
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 16px;
+  gap: 4px;
+`;
+const BannerButton = styled.button `
+  ${RESET_BUTTON}
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 12px;
+  cursor: pointer;
+  color: currentColor;
+`;
 export default Banner;
-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;