react-science 0.19.2 → 0.20.0

package/lib/components/color-picker/color-picker-dropdown/ColorPickerDropdown.js

@@ -27,10 +27,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPickerDropdown = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("react");
 const useModifiedPopper_1 = require("../../hooks/useModifiedPopper");
 const useOnClickOutside_1 = require("../../hooks/useOnClickOutside");
 const useOnOff_1 = require("../../hooks/useOnOff");
@@ -38,24 +37,22 @@ const Portal_1 = require("../../root-layout/Portal");
 const FixedColorPreview_1 = __importDefault(require("../preview/FixedColorPreview"));
 const ColorPicker_1 = require("../react-color/ColorPicker");
 const colorHelper = __importStar(require("../react-color/helpers/color"));
-const colorPickerDropdownCss = {
-    root: (0, react_1.css) `
-    position: relative;
-    width: 100%;
-    border: 1px solid darkgray;
-    border-radius: 0.25rem;
-    height: 30px;
-    padding: 5px;
-  `,
-    preview: (0, react_1.css) `
-    height: 100%;
-    width: 100%;
-    border-radius: 0.125rem;
-  `,
-};
+const ColorPickerRoot = styled_1.default.button `
+  position: relative;
+  width: 100%;
+  border: 1px solid darkgray;
+  border-radius: 0.25rem;
+  height: 30px;
+  padding: 5px;
+`;
+const ColorPickerPreview = styled_1.default.div `
+  height: 100%;
+  width: 100%;
+  border-radius: 0.125rem;
+`;
 function ColorPickerDropdown(props) {
     const { color, ...otherProps } = props;
-    const ref = (0, react_2.useRef)(null);
+    const ref = (0, react_1.useRef)(null);
     const [isOpened, , close, toggle] = (0, useOnOff_1.useOnOff)(false);
     const { hex } = colorHelper.toState(color || 'white');
     const { setReferenceElement, setPopperElement, popperProps } = (0, useModifiedPopper_1.useModifiedPopper)({
@@ -63,7 +60,7 @@ function ColorPickerDropdown(props) {
         offset: 6,
     });
     (0, useOnClickOutside_1.useOnClickOutside)(ref, close);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { type: "button", ref: setReferenceElement, css: colorPickerDropdownCss.root, onClick: toggle, children: (0, jsx_runtime_1.jsx)("div", { css: colorPickerDropdownCss.preview, children: (0, jsx_runtime_1.jsx)(FixedColorPreview_1.default, { color: hex }) }) }), isOpened && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: (div) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ColorPickerRoot, { type: "button", ref: setReferenceElement, onClick: toggle, children: (0, jsx_runtime_1.jsx)(ColorPickerPreview, { children: (0, jsx_runtime_1.jsx)(FixedColorPreview_1.default, { color: hex }) }) }), isOpened && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: (div) => {
                         setPopperElement(div);
                         ref.current = div;
                     }, ...popperProps, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { color: color, ...otherProps }) }) }))] }));

package/lib/components/drop-zone/DropZone.js

@@ -1,47 +1,53 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropZoneContainer = exports.DropZone = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
-const react_2 = require("react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("react");
 const react_dropzone_1 = require("react-dropzone");
 const fa_1 = require("react-icons/fa");
-const dropZoneCss = {
-    root: (0, react_1.css) `
-    position: relative;
-    height: 100%;
-    width: 100%;
-  `,
-    dragActive: (0, react_1.css) `
-    font-size: 1.5em;
-    font-weight: 600;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    opacity: 0.7;
-    background-color: white;
-    border: 5px dashed;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  `,
-    empty: (0, react_1.css) `
-    font-size: 1.5em;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    padding: 1em;
-    border: 5px dashed;
-    cursor: pointer;
-  `,
-};
+const DropzoneRoot = styled_1.default.div `
+  position: relative;
+  height: 100%;
+  width: 100%;
+`;
+const DropzoneDragActive = styled_1.default.div `
+  font-size: 1.5em;
+  font-weight: 600;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  opacity: 0.7;
+  background-color: white;
+  border: 5px dashed;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  border-color: ${({ borderColor }) => borderColor};
+  color: ${({ color }) => color};
+`;
+const DropzoneEmpty = styled_1.default.div `
+  font-size: 1.5em;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 1em;
+  border: 5px dashed;
+  cursor: pointer;
+
+  border-color: ${({ borderColor }) => borderColor};
+  color: ${({ color }) => color};
+`;
 function DropZone(props) {
     return (0, jsx_runtime_1.jsx)(DropZoneContent, { ...props });
 }
@@ -53,7 +59,7 @@ exports.DropZoneContainer = DropZoneContainer;
 function DropZoneContent(props) {
     const { color = 'black', borderColor = 'gray', children = null, onDrop, emptyText = 'Click or drag and drop to add data.', onClick, fileValidator, } = props;
     const hasChildren = children !== null;
-    const handleOnDrop = (0, react_2.useCallback)((acceptedFiles, rejectedFiles) => {
+    const handleOnDrop = (0, react_1.useCallback)((acceptedFiles, rejectedFiles) => {
         onDrop?.(acceptedFiles, rejectedFiles);
     }, [onDrop]);
     const { getRootProps, getInputProps, isDragActive } = (0, react_dropzone_1.useDropzone)({
@@ -61,16 +67,10 @@ function DropZoneContent(props) {
         validator: fileValidator,
         onDrop: handleOnDrop,
     });
-    const getPropsOptions = (0, react_2.useMemo)(() => {
+    const getPropsOptions = (0, react_1.useMemo)(() => {
         if (onClick) {
             return { onClick };
         }
     }, [onClick]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ...getRootProps(getPropsOptions), css: dropZoneCss.root, children: [children, isDragActive ? ((0, jsx_runtime_1.jsxs)("div", { css: dropZoneCss.dragActive, style: {
-                    borderColor,
-                    color,
-                }, children: [(0, jsx_runtime_1.jsx)(fa_1.FaCloudUploadAlt, { size: 70 }), (0, jsx_runtime_1.jsx)("p", { children: "Drop the files here." })] })) : !hasChildren ? ((0, jsx_runtime_1.jsx)("div", { css: dropZoneCss.empty, style: {
-                    borderColor,
-                    color,
-                }, children: emptyText })) : null, (0, jsx_runtime_1.jsx)("input", { ...getInputProps() })] }));
+    return ((0, jsx_runtime_1.jsxs)(DropzoneRoot, { ...getRootProps(getPropsOptions), children: [children, isDragActive ? ((0, jsx_runtime_1.jsxs)(DropzoneDragActive, { borderColor: borderColor, color: color, children: [(0, jsx_runtime_1.jsx)(fa_1.FaCloudUploadAlt, { size: 70 }), (0, jsx_runtime_1.jsx)("p", { children: "Drop the files here." })] })) : !hasChildren ? ((0, jsx_runtime_1.jsx)(DropzoneEmpty, { borderColor: borderColor, color: color, children: emptyText })) : null, (0, jsx_runtime_1.jsx)("input", { ...getInputProps() })] }));
 }

package/lib/components/dropdown-menu/DropdownMenu.js

@@ -30,10 +30,10 @@ function DropdownContextMenu(props) {
     const { isPopperElementOpen, closePopperElement, handleContextMenu, setPopperElement, styles, attributes, } = (0, useContextMenuPlacement_1.useContextMenuPlacement)(otherProps.placement || 'right-start');
     const ref = (0, react_2.useRef)(null);
     (0, useOnClickOutside_1.useOnClickOutside)(ref, closePopperElement);
-    return ((0, jsx_runtime_1.jsxs)(HandleMenuContextDiv, { onContextMenu: handleContextMenu, children: [isPopperElementOpen && ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: (0, jsx_runtime_1.jsx)(react_1.Menu, { children: (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { itemsStatic: true, onSelect: (selected) => {
-                                closePopperElement();
-                                onSelect(selected);
-                            }, ...otherProps }) }) }) })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(HandleMenuContextDiv, { onContextMenu: handleContextMenu, children: [isPopperElementOpen && ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)("div", { ref: setPopperElement, style: styles.popper, ...attributes.popper, children: (0, jsx_runtime_1.jsx)(react_1.Menu, { children: (0, jsx_runtime_1.jsx)(MenuItems_1.MenuItems, { itemsStatic: true, onSelect: (selected) => {
+                                    closePopperElement();
+                                    onSelect(selected);
+                                }, ...otherProps }) }) }) }) })), children] }));
 }
 function DropdownClickMenu(props) {
     const { placement = 'bottom-start', onSelect, ...otherProps } = props;

package/lib/components/forms/Input.js

@@ -0,0 +1,150 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const index_1 = require("../index");
+const FieldsContext_1 = require("./context/FieldsContext");
+const LabelStyled = styled_1.default.label `
+  padding: ${(props) => props.variant === 'default'
+    ? props.hasTrailing
+        ? '2px 9px 4px 9px'
+        : '2px 9px'
+    : props.hasTrailing
+        ? '1px 7px 1px 7px'
+        : '1px 7px'};
+
+  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
+  line-height: '17px';
+
+  background-color: white;
+  border-width: 1px;
+  align-items: center;
+  flex-direction: row;
+  flex: 1 1 0%;
+  display: flex;
+  position: relative;
+
+  border-top-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-bottom-right-radius: ${(props) => props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-top-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-bottom-left-radius: ${(props) => props.hasTrailing && !props.hasLeading && '0.375rem'};
+
+  border-radius: ${(props) => !props.hasLeading && !props.hasTrailing && '0.375rem'};
+
+  border-color: var(--custom-border-color);
+`;
+function getStyleColor(hasError, hasValid) {
+    if (hasError) {
+        return {
+            default: '#ffa39e',
+            hover: '#f95d55',
+        };
+    }
+    if (hasValid) {
+        return {
+            default: '#6adc24',
+            hover: '#62cb21',
+        };
+    }
+    return {
+        default: 'rgb(217, 217, 217)',
+        hover: '#4096ff',
+    };
+}
+const GroupStyled = styled_1.default.div `
+  display: flex;
+  border-radius: 0.375rem;
+  margin-top: 0.25rem;
+
+  .addon {
+    color: ${({ hasError }) => hasError && '#f95d55'};
+  }
+
+  --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).default};
+
+  :hover,
+  :focus-within {
+    --custom-border-color: ${({ hasError, hasValid }) => getStyleColor(hasError, hasValid).hover};
+  }
+`;
+const InputStyled = styled_1.default.input `
+  padding: 0;
+  flex: 1 1 0%;
+  border: none;
+  position: relative;
+  outline: none;
+`;
+const LeadingAddonStyled = styled_1.default.div `
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border-right-width: 0px;
+  border-width: 1px;
+  border-top-left-radius: 0.375rem;
+  border-bottom-left-radius: 0.375rem;
+  align-items: center;
+  display: inline-flex;
+
+  border-right: none;
+
+  border-color: var(--custom-border-color);
+`;
+const TrailingAddonStyled = styled_1.default.div `
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border-left-width: 0px;
+  border-width: 1px;
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  align-items: center;
+  display: inline-flex;
+
+  border-left: none;
+
+  border-color: var(--custom-border-color);
+`;
+const LeadingInlineAddonStyled = styled_1.default.div `
+  display: flex;
+  align-items: center;
+  padding-right: 0.5rem;
+`;
+const TrailingInlineAddonStyled = styled_1.default.div `
+  display: flex;
+  align-items: center;
+  padding-left: 0.5rem;
+`;
+const RootInput = styled_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+function Input(props) {
+    const { variant: variantProps, trailingAddon, leadingAddon, help, error, valid, loading, ...otherProps } = props;
+    const { name, variant: contextVariant } = (0, FieldsContext_1.useFieldsContext)();
+    const hasLeading = (leadingAddon && !leadingAddon.inline) || false;
+    const hasTrailing = (trailingAddon && !trailingAddon.inline) || false;
+    const variant = variantProps || contextVariant;
+    return ((0, jsx_runtime_1.jsxs)(RootInput, { children: [(0, jsx_runtime_1.jsxs)(GroupStyled, { hasError: !!error, hasValid: !!valid, children: [leadingAddon && !leadingAddon.inline && ((0, jsx_runtime_1.jsx)(LeadingAddonStyled, { children: leadingAddon.addon })), (0, jsx_runtime_1.jsxs)(LabelStyled, { variant: variant, hasLeading: hasLeading, hasTrailing: hasTrailing, children: [leadingAddon?.inline && ((0, jsx_runtime_1.jsx)(LeadingInlineAddonStyled, { className: "addon", children: leadingAddon.addon })), (0, jsx_runtime_1.jsx)(InputStyled, { id: name, name: name, ...otherProps }), trailingAddon?.inline && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { className: "addon", children: trailingAddon.addon })), loading && ((0, jsx_runtime_1.jsx)(TrailingInlineAddonStyled, { style: { height: variant === 'default' ? 20 : 10 }, children: (0, jsx_runtime_1.jsx)(index_1.FullSpinner, { height: variant === 'default' ? 20 : 10, width: variant === 'default' ? 20 : 10 }) }))] }), trailingAddon && !trailingAddon.inline && ((0, jsx_runtime_1.jsx)(TrailingAddonStyled, { children: trailingAddon.addon }))] }), (0, jsx_runtime_1.jsx)(SubText, { error: error, help: help, valid: valid })] }));
+}
+exports.Input = Input;
+function SubText(props) {
+    const { error, help, valid: validProps } = props;
+    const valid = typeof validProps === 'string' ? validProps : undefined;
+    const text = error || valid || help;
+    return (0, jsx_runtime_1.jsx)("p", { style: { color: getColor(error, validProps) }, children: text });
+}
+function getColor(error, valid) {
+    if (error) {
+        return '#f95d55';
+    }
+    if (valid && typeof valid !== 'boolean') {
+        return '#62cb21';
+    }
+    return 'gray';
+}

package/lib/components/forms/context/FieldsContext.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Field = exports.useFieldsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("react");
+const context = (0, react_1.createContext)(null);
+const FieldContextRoot = styled_1.default.div `
+  display: flex;
+  flex-flow: row;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  gap: 5px;
+`;
+const Label = styled_1.default.label `
+  position: relative;
+  display: inline-flex;
+  max-width: 100%;
+  line-height: ${(props) => (props.variant === 'small' ? '28px' : '32px')};
+  font-size: ${(props) => (props.variant === 'small' ? '1em' : '1.125em')};
+  white-space: nowrap;
+  text-align: end;
+`;
+const LabelContainer = styled_1.default.div `
+  flex-grow: 0;
+  display: inline-block;
+  overflow: hidden;
+  text-align: end;
+  vertical-align: middle;
+  white-space: nowrap;
+`;
+const FieldContextRequired = styled_1.default.span `
+  color: red;
+`;
+function useFieldsContext() {
+    const ctx = (0, react_1.useContext)(context);
+    if (!ctx) {
+        return { name: undefined, variant: 'default' };
+    }
+    return ctx;
+}
+exports.useFieldsContext = useFieldsContext;
+function Field(props) {
+    const { label, name, children, required, variant } = props;
+    const memoized = (0, react_1.useMemo)(() => {
+        return { name, variant: variant || 'default' };
+    }, [name, variant]);
+    return ((0, jsx_runtime_1.jsx)(context.Provider, { value: memoized, children: (0, jsx_runtime_1.jsxs)(FieldContextRoot, { children: [(0, jsx_runtime_1.jsx)(LabelContainer, { children: (0, jsx_runtime_1.jsxs)(Label, { htmlFor: name, variant: memoized.variant, children: [label, " ", required && (0, jsx_runtime_1.jsx)(FieldContextRequired, { children: "*" }), ":", ' '] }) }), children] }) }));
+}
+exports.Field = Field;

package/lib/components/forms/context/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./FieldsContext"), exports);

package/lib/components/forms/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Input"), exports);
+__exportStar(require("./context"), exports);

package/lib/components/index.js

@@ -32,6 +32,7 @@ __exportStar(require("./button/index"), exports);
 __exportStar(require("./color-picker/index"), exports);
 __exportStar(require("./drop-zone/index"), exports);
 __exportStar(require("./dropdown-menu/index"), exports);
+__exportStar(require("./forms/index"), exports);
 __exportStar(require("./fullscreen/index"), exports);
 __exportStar(require("./header/index"), exports);
 __exportStar(require("./hooks/index"), exports);

package/lib/components/modal/ConfirmModal.js

@@ -1,11 +1,47 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConfirmModal = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
 const __1 = require("..");
 const useDialog_1 = require("./useDialog");
+const ConfirmModalDialog = styled_1.default.dialog `
+  display: flex;
+  position: fixed;
+  background-color: transparent;
+
+  ::backdrop {
+    background-color: rgba(113, 113, 122, 0.75);
+  }
+`;
+const ConfirmModalOpened = styled_1.default.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  max-height: 90%;
+  width: 100%;
+  border-width: 1px;
+  border-color: transparent;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+  border-top: 10px solid ${({ headerColor }) => headerColor};
+`;
+const ConfirmModalChildrenRoot = styled_1.default.div `
+  color: ${({ headerColor }) => headerColor};
+  display: flex;
+  flex: 1 1 0%;
+`;
+const ConfirmModalFooter = styled_1.default.div `
+  border-top: 2px solid rgb(247, 247, 247);
+  padding: 10px 20px 10px 20px;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 10px;
+`;
 function ConfirmModal(props) {
     const { isOpen, saveText = 'Save', cancelText = 'Cancel', headerColor, maxWidth, onRequestClose, onCancel = onRequestClose, onConfirm, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, } = props;
     const { ref, onClick } = (0, useDialog_1.useDialog)({
@@ -14,32 +50,7 @@ function ConfirmModal(props) {
         requestCloseOnBackdrop,
         onRequestClose,
     });
-    return ((0, jsx_runtime_1.jsx)("dialog", { ref: ref, style: {
-            display: 'flex',
-            position: 'fixed',
-            backgroundColor: 'transparent',
-        }, css: (0, react_1.css) `
-        ::backdrop: rgba(113, 113, 122, 0.75);
-      `, onClick: onClick, children: isOpen ? ((0, jsx_runtime_1.jsxs)("div", { style: {
-                position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                backgroundColor: 'white',
-                maxHeight: '90%',
-                width: '100%',
-                maxWidth: maxWidth || undefined,
-                borderWidth: 1,
-                borderColor: 'transparent',
-                borderRadius: '0.5rem',
-                boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
-                borderTop: `10px solid ${headerColor}`,
-            }, children: [(0, jsx_runtime_1.jsx)("div", { style: { color: headerColor, display: 'flex', flex: '1 1 0%' }, children: children }), (0, jsx_runtime_1.jsxs)("div", { style: {
-                        borderTop: '2px solid rgb(247, 247, 247)',
-                        padding: '10px 20px 10px 20px',
-                        display: 'flex',
-                        flexDirection: 'row-reverse',
-                        gap: 10,
-                    }, children: [(0, jsx_runtime_1.jsx)(__1.Button, { onClick: onConfirm, backgroundColor: {
+    return ((0, jsx_runtime_1.jsx)(ConfirmModalDialog, { ref: ref, onClick: onClick, children: isOpen ? ((0, jsx_runtime_1.jsxs)(ConfirmModalOpened, { headerColor: headerColor, style: { maxWidth }, children: [(0, jsx_runtime_1.jsx)(ConfirmModalChildrenRoot, { headerColor: headerColor, children: children }), (0, jsx_runtime_1.jsxs)(ConfirmModalFooter, { children: [(0, jsx_runtime_1.jsx)(__1.Button, { onClick: onConfirm, backgroundColor: {
                                 basic: 'hsla(243deg, 75%, 58%, 1)',
                                 hover: 'hsla(245deg, 58%, 50%, 1)',
                             }, color: { basic: 'white' }, children: saveText }), (0, jsx_runtime_1.jsx)(__1.Button, { onClick: onCancel, backgroundColor: {

package/lib/components/modal/Modal.js

@@ -4,56 +4,67 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = void 0;
-const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-/** @jsxImportSource @emotion/react */
-const react_1 = require("@emotion/react");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = __importDefault(require("@emotion/styled"));
 const ModalCloseButton_1 = __importDefault(require("./ModalCloseButton"));
 const useDialog_1 = require("./useDialog");
+const DialogRoot = styled_1.default.dialog `
+  display: flex;
+  position: fixed;
+  background-color: transparent;
+
+  ::backdrop {
+    background-color: rgba(113, 113, 122, 0.75);
+  }
+`;
+const DialogOpened = styled_1.default.div `
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  max-height: 90%;
+  border-width: 1px;
+  border-color: transparent;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0 0, 0 8px 16px rgba(0, 0, 0, 0.3);
+`;
+const ModalHeaderStyled = styled_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 20px 10px 20px;
+  border-bottom: 2px solid rgb(247, 247, 247);
+`;
+const ModalBodyStyled = styled_1.default.div `
+  display: flex;
+  flex: 1 1 0%;
+  overflow-y: auto;
+`;
+const ModalFooterStyled = styled_1.default.div `
+  border-top: 2px solid rgb(247, 247, 247);
+  padding: 10px 20px 10px 20px;
+`;
 function Modal(props) {
-    const { isOpen, onRequestClose, hasCloseButton = true, requestCloseOnBackdrop = true, requestCloseOnEsc = true, maxWidth, width, height, children, } = props;
+    const { isOpen, onRequestClose, hasCloseButton = true, requestCloseOnBackdrop = true, requestCloseOnEsc = true, children, width, maxWidth, height, } = props;
     const { ref, onClick } = (0, useDialog_1.useDialog)({
         isOpen,
         requestCloseOnEsc,
         requestCloseOnBackdrop,
         onRequestClose,
     });
-    return ((0, jsx_runtime_1.jsx)("dialog", { ref: ref, style: {
-            display: 'flex',
-            position: 'fixed',
-            backgroundColor: 'transparent',
-        }, css: (0, react_1.css) `
-        ::backdrop: rgba(113, 113, 122, 0.75);
-      `, onClick: onClick, children: isOpen ? ((0, jsx_runtime_1.jsxs)("div", { style: {
-                position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                backgroundColor: 'white',
-                maxHeight: '90%',
-                width: width || '100%',
-                maxWidth: maxWidth || undefined,
+    return ((0, jsx_runtime_1.jsx)(DialogRoot, { ref: ref, onClick: onClick, children: isOpen ? ((0, jsx_runtime_1.jsxs)(DialogOpened, { style: {
+                maxWidth,
                 height: height || 'max-content',
-                borderWidth: 1,
-                borderColor: 'transparent',
-                borderRadius: '0.5rem',
-                boxShadow: '0 0 0 0,0 8px 16px rgba(0, 0, 0, 0.3)',
+                width: width || '100%',
             }, children: [children, hasCloseButton && (0, jsx_runtime_1.jsx)(ModalCloseButton_1.default, { onClick: onRequestClose })] })) : null }));
 }
 exports.Modal = Modal;
 Modal.Header = function ModalHeader(props) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '10px 20px 10px 20px',
-            borderBottom: '2px solid rgb(247, 247, 247)',
-        }, children: props.children }));
+    return (0, jsx_runtime_1.jsx)(ModalHeaderStyled, { children: props.children });
 };
 Modal.Body = function ModalBody(props) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flex: '1 1 0%', overflowY: 'auto' }, children: props.children }));
+    return (0, jsx_runtime_1.jsx)(ModalBodyStyled, { children: props.children });
 };
 Modal.Footer = function ModalFooter(props) {
-    return ((0, jsx_runtime_1.jsx)("div", { style: {
-            borderTop: '2px solid rgb(247, 247, 247)',
-            padding: '10px 20px 10px 20px',
-        }, children: props.children }));
+    return (0, jsx_runtime_1.jsx)(ModalFooterStyled, { children: props.children });
 };

package/lib/components/root-layout/RootLayout.js

@@ -28,6 +28,6 @@ function RootLayout(props) {
             setRootRef(node);
         }
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(emotion_esm_1.default.div, { style: { ...style, ...props.style }, children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: preflight_1.preflight }), (0, jsx_runtime_1.jsx)("div", { ref: ref, css: customPreflight_1.customDivPreflight, style: { width: '100%', height: '100%', position: 'relative' }, children: (0, jsx_runtime_1.jsx)(RootLayoutContext_1.RootLayoutProvider, { innerRef: rootRef, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(AccordionContext_1.AccordionProvider, { children: props.children }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(emotion_esm_1.default.div, { style: { ...style, ...props.style }, children: [(0, jsx_runtime_1.jsx)(react_1.Global, { styles: preflight_1.preflight }), (0, jsx_runtime_1.jsx)(customPreflight_1.CustomDivPreflight, { ref: ref, children: (0, jsx_runtime_1.jsx)(RootLayoutContext_1.RootLayoutProvider, { innerRef: rootRef, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient_1.queryClient, children: (0, jsx_runtime_1.jsx)(AccordionContext_1.AccordionProvider, { children: props.children }) }) }) })] }));
 }
 exports.RootLayout = RootLayout;