@team-monolith/cds 1.43.0 → 1.43.2

package/dist/CodleDesignSystemProvider.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { Theme } from "@emotion/react";
 export declare const light: {
     fontFamily: {
         ui: string;
@@ -222,6 +223,7 @@ export declare const dark: {
     };
 };
 interface CodleDesignSystemContext {
+    theme?: Theme;
     lexical?: {
         uploadByFile: (file: File) => Promise<string>;
     };

package/dist/CodleDesignSystemProvider.js

@@ -242,9 +242,10 @@ export default function (props) {
             },
         },
     });
+    const { theme = light } = props;
     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: _jsx(CodleDesignSystemContext.Provider, Object.assign({ value: props }, { children: props.children })) })) }))] }));
+        ` }), _jsx(MuiThemeProvider, Object.assign({ theme: muiTheme }, { children: _jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsx(CodleDesignSystemContext.Provider, Object.assign({ value: props }, { children: props.children })) })) }))] }));
 }

package/dist/components/AlertDialog/AlertDialog.js

@@ -11,7 +11,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 /** @jsxImportSource @emotion/react */
-import { Modal as MuiModal } from "@mui/material";
 import { css, useTheme } from "@emotion/react";
 import React from "react";
 import shadows from "../../foundation/shadows";
@@ -19,13 +18,14 @@ import styled from "@emotion/styled";
 import { MOBILE } from "../../foundation/breakpoints";
 import AlertDialogContext from "./AlertDialogContext";
 import { ZINDEX } from "../../utils/zIndex";
+import { Modal } from "../..";
 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, Object.assign({ className: className, css: css `
+    return (_jsx(Modal, Object.assign({ css: css `
+          z-index: ${ZINDEX.ALERT};
+        `, open: open, onClose: onClose, ref: ref }, other, { children: _jsxs(Component, Object.assign({ className: className, css: css `
             width: 480px;
             background: ${theme.color.background.neutralBase};
             box-shadow: ${shadows.shadow04};

package/dist/components/Modal.d.ts

@@ -0,0 +1 @@
+export declare const Modal: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").ModalTypeMap<"div", {}>>;

package/dist/components/Modal.js

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { Modal as MuiModal, css } from "@mui/material";
+export const Modal = styled(MuiModal)(({ theme }) => css `
+    .MuiModal-backdrop {
+      background-color: ${theme.color.blanket.neutral};
+    }
+  `);

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { default as CheckboxInput } from "./components/CheckboxInput";
 export * from "./components/CheckboxInput";
 export { default as Input } from "./components/Input";
 export * from "./components/Input";
+export * from "./components/Modal";
 export { default as Pagination } from "./components/Pagination";
 export * from "./components/Pagination";
 export { default as PinInput } from "./components/PinInput";
@@ -32,7 +33,7 @@ export { default as color } from "./foundation/color";
 export { default as shadows } from "./foundation/shadows";
 export * from "./foundation/breakpoints";
 export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvider";
-export { light } from "./CodleDesignSystemProvider";
+export * from "./CodleDesignSystemProvider";
 export * from "./icons";
 export * from "./icons/Custom";
 export * from "./utils/hover";

package/dist/index.js

@@ -9,6 +9,7 @@ export { default as CheckboxInput } from "./components/CheckboxInput";
 export * from "./components/CheckboxInput";
 export { default as Input } from "./components/Input";
 export * from "./components/Input";
+export * from "./components/Modal";
 export { default as Pagination } from "./components/Pagination";
 export * from "./components/Pagination";
 export { default as PinInput } from "./components/PinInput";
@@ -32,7 +33,7 @@ export { default as color } from "./foundation/color";
 export { default as shadows } from "./foundation/shadows";
 export * from "./foundation/breakpoints";
 export { default as CodleDesignSystemProvider } from "./CodleDesignSystemProvider";
-export { light } from "./CodleDesignSystemProvider";
+export * from "./CodleDesignSystemProvider";
 export * from "./icons";
 export * from "./icons/Custom";
 export * from "./utils/hover";

package/dist/patterns/Dropdown/DropdownMenu/DropdownMenu.js

@@ -14,8 +14,8 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import React, { useContext } from "react";
-import { shadows } from "../../..";
-import { Modal as MuiModal, Grow as MuiGrow, Portal, } from "@mui/material";
+import { Modal, shadows } from "../../..";
+import { Grow as MuiGrow, Portal } from "@mui/material";
 import { ORIGIN_PROPS_TO_POSITION, ORIGIN_PROPS_TO_TRANSFORM, } from "./style";
 import DropdownContext from "../DropdownContext";
 export const DROPDOWN_MENU_WIDTH = 132;
@@ -46,7 +46,7 @@ const DropdownMenu = React.forwardRef((props, ref) => {
                 nestedIndex,
                 itemState,
                 setItemState,
-            } }, { children: _jsx(MuiModal, Object.assign({ className: className, open: open, onClose: onClose, slotProps: {
+            } }, { children: _jsx(Modal, Object.assign({ className: className, open: open, onClose: onClose, slotProps: {
                     backdrop: {
                         style: {
                             backgroundColor: "transparent",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "1.43.0",
+  "version": "1.43.2",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": false,