@via-profit/ui-kit 0.1.0-rc.28 → 0.1.0-rc.30

package/Calendar/CalendarPaper.js

@@ -10,7 +10,7 @@ const CalendarPaper = styled_1.default.div `
   flex-direction: column;
   justify-content: stretch;
   background-color: ${({ theme }) => theme.color.surface.toString()};
-  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   padding: 0.4em;
   max-width: 17.6em;
   max-height: 20.4em;

package/Menu/MenuItemInner.js

@@ -21,7 +21,7 @@ const InnerContainer = styled_1.default.div `
   user-select: none;
   padding: 0.4em 0.8em;
   transition: all 240ms ease-out;
-  border-radius: ${({ theme }) => theme.shape.radiusFactor * 1}em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   background-color: ${({ theme, selected, hovered }) => {
     if (selected && hovered) {
         return theme.color.accentPrimary.darken(0.1).toString();

package/Menu/MenuWrapper.js

@@ -22,7 +22,9 @@ const StyledMenuWrapper = styled_1.default.div `
   flex-direction: column;
   display: flex;
   flex-direction: column;
-  transition: visibility 120ms ease-out, opacity 120ms ease-out;
+  transition:
+    visibility 120ms ease-out,
+    opacity 120ms ease-out;
   opacity: ${props => (props.$isOpen ? 1 : 0)};
   visibility: ${props => (props.$isOpen ? 'visible' : 'hidden')};
   background-color: ${({ theme }) => theme.color.surface.toString()};

package/Modal/BaseModal/ModalInner.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface ModalInnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The dialog will remain open as long as the value is true
+     */
+    readonly isOpen: boolean;
+    /**
+     * The function that will be called to close the dialog
+     */
+    readonly onRequestClose: () => void;
+}
+declare const _default: React.ForwardRefExoticComponent<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/BaseModal/ModalInner.js

@@ -0,0 +1,47 @@
+"use strict";
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const StyledModalInner = styled_1.default.div `
+  opacity: 0;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  outline: none;
+  background-color: ${({ theme }) => theme.color.surface.toString()};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  transform: translate(-50%, -30%);
+  transition:
+    transform 240ms ease-out,
+    opacity 100ms ease-out;
+
+  ${({ $isOpen }) => $isOpen &&
+    (0, react_2.css) `
+      opacity: 1;
+      transform: translate(-50%, -50%);
+      ransition:
+        transform 240ms ease-out,
+        opacity 100ms ease-out;
+    `}
+`;
+const ModalInner = (props, ref) => {
+    const { children, isOpen, onRequestClose } = props, restProps = __rest(props, ["children", "isOpen", "onRequestClose"]);
+    return (react_1.default.createElement(StyledModalInner, Object.assign({}, restProps, { "$isOpen": isOpen, ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(ModalInner);

package/Modal/BaseModal/ModalOverlay.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ModalOverlayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The dialog will remain open as long as the value is true
+     */
+    readonly isOpen: boolean;
+    /**
+     * The function that will be called to close the dialog
+     */
+    readonly onRequestClose: () => void;
+    /**
+     * Should the dialog close when overlay mouse click
+     */
+    readonly closeOnOverlayClick: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Modal/BaseModal/ModalOverlay.js

@@ -0,0 +1,33 @@
+"use strict";
+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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const StyledModalOverlay = styled_1.default.div `
+  position: fixed;
+  inset: 0;
+  z-index: ${({ theme }) => theme.zIndex.modal};
+  background-color: ${({ theme }) => theme.isDark
+    ? theme.color.backgroundPrimary.darken(30).alpha(0.8).rgbString()
+    : theme.color.textPrimary.darken(30).alpha(0.8).rgbString()};
+  opacity: ${({ $isOpen }) => ($isOpen ? 1 : 0)};
+  transition: opacity 120ms ease-out;
+`;
+const ModalOverlay = (props, ref) => {
+    const { isOpen, onRequestClose, closeOnOverlayClick } = props, restProps = __rest(props, ["isOpen", "onRequestClose", "closeOnOverlayClick"]);
+    return (react_1.default.createElement(StyledModalOverlay, Object.assign({}, restProps, { ref: ref, "$isOpen": isOpen, onClick: closeOnOverlayClick ? () => onRequestClose() : undefined })));
+};
+exports.default = react_1.default.forwardRef(ModalOverlay);

package/Modal/BaseModal/ModalWrapper.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ModalWrapperProps = {
+    /**
+     * The dialog will remain open as long as the value is true
+     */
+    readonly isOpen: boolean;
+    /**
+     * Timeout (in `milliseconds`), after which the dialog box will be unmounted
+     */
+    readonly destroyTimeout: number;
+    readonly children: React.ReactNode | readonly React.ReactNode[];
+};
+declare const ModalWrapper: React.FC<ModalWrapperProps>;
+export default ModalWrapper;

package/Modal/BaseModal/ModalWrapper.js

@@ -0,0 +1,177 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@emotion/react");
+const context_1 = require("./context");
+const ModalWrapper = props => {
+    const { children, isOpen: isOpenProp } = props;
+    const { state, dispatch } = (0, context_1.useContext)();
+    const [alreadyMounted, setMountState] = react_1.default.useState(true);
+    const { closeOnEsape, isMounted, isOpen, destroyTimeout, onRequestClose } = state;
+    const containerRef = react_1.default.useRef(null);
+    const id = react_1.default.useMemo(() => context_1.PORTAL_ID + ':' + new Date().getTime().toString(), []);
+    const getScrollWidth = react_1.default.useCallback(() => {
+        var _a;
+        const outer = window.document.createElement('div');
+        const inner = window.document.createElement('div');
+        let widthNoScroll = 0;
+        let widthWithScroll = 0;
+        outer.style.visibility = 'hidden';
+        outer.style.width = '100px';
+        window.document.body.appendChild(outer);
+        widthNoScroll = outer.offsetWidth;
+        // force scrollbars
+        outer.style.overflow = 'scroll';
+        // add innerdiv
+        inner.style.width = '100%';
+        outer.appendChild(inner);
+        widthWithScroll = inner.offsetWidth;
+        // remove div
+        (_a = outer.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(outer);
+        return widthNoScroll - widthWithScroll;
+    }, []);
+    /**
+     * Set focus to the next or prev element
+     */
+    const lastIndex = react_1.default.useRef(-1);
+    const nextFocus = react_1.default.useCallback((reverse) => {
+        if (!containerRef.current) {
+            return;
+        }
+        const universe = containerRef.current.querySelectorAll('input, button, select, textarea, a[href]');
+        const list = Array.prototype.filter.call(universe, function (item) {
+            return item.tabIndex >= '0';
+        });
+        if (!reverse) {
+            const nextIndex = lastIndex.current + 1;
+            if (list[nextIndex]) {
+                list[nextIndex].focus();
+                lastIndex.current = nextIndex;
+                return;
+            }
+            // othrwise
+            const nextEl = list[0];
+            if (nextEl) {
+                lastIndex.current = 0;
+                nextEl.focus();
+                return;
+            }
+        }
+        if (reverse) {
+            const nextIndex = lastIndex.current - 1;
+            if (list[nextIndex]) {
+                list[nextIndex].focus();
+                lastIndex.current = nextIndex;
+                return;
+            }
+            // othrwise
+            const nextEl = list[list.length - 1];
+            if (nextEl) {
+                lastIndex.current = list.length - 1;
+                nextEl.focus();
+                return;
+            }
+        }
+    }, []);
+    react_1.default.useEffect(() => {
+        if (containerRef.current) {
+            containerRef.current.focus();
+        }
+        const keydown = (event) => {
+            if (event.key.toLowerCase() !== 'tab') {
+                return;
+            }
+            event.preventDefault();
+            nextFocus(event.shiftKey);
+        };
+        const lastFocused = document.activeElement;
+        window.document.addEventListener('keydown', keydown);
+        return () => {
+            if (lastFocused) {
+                lastFocused.focus();
+            }
+            window.document.removeEventListener('keydown', keydown);
+        };
+    }, [nextFocus]);
+    /**
+     * Component will unmount
+     * Mark component as unmounted
+     */
+    react_1.default.useEffect(() => () => {
+        setMountState(false);
+    }, []);
+    react_1.default.useEffect(() => {
+        /**
+         * The last dialog will be found and closed
+         */
+        const keyDown = (event) => {
+            var _a, _b, _c;
+            if (event.key.toLocaleLowerCase() === 'escape' && closeOnEsape) {
+                const portal = window.document.querySelector(`#${context_1.PORTAL_ID}`);
+                const lastID = (_c = (_a = portal === null || portal === void 0 ? void 0 : portal.children) === null || _a === void 0 ? void 0 : _a[((_b = portal === null || portal === void 0 ? void 0 : portal.childNodes) === null || _b === void 0 ? void 0 : _b.length) - 1]) === null || _c === void 0 ? void 0 : _c.id;
+                if (lastID === id) {
+                    onRequestClose();
+                }
+            }
+        };
+        window.document.addEventListener('keydown', keyDown);
+        return () => {
+            window.document.removeEventListener('keydown', keyDown);
+        };
+    }, [onRequestClose, closeOnEsape, id]);
+    /**
+     * Controller for visibility state.
+     * Waiting n milliseconds after closing the modal, then sets the visibility property to true
+     * and sets visibility property to false otherwise
+     */
+    react_1.default.useEffect(() => {
+        var _a;
+        if (isOpen !== isOpenProp) {
+            /**
+             * Mark as mounted and wait minimum loop of event (15ms) then mark as open
+             */
+            if (isOpenProp) {
+                dispatch((0, context_1.actionSetState)({ isMounted: true }));
+                (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.add('-modal-over');
+                setTimeout(() => {
+                    if (alreadyMounted) {
+                        dispatch((0, context_1.actionSetState)({ isOpen: true }));
+                    }
+                }, 15);
+                return;
+            }
+            /**
+             * Mark as closed and wait destroyTimeout then mark as unmounted
+             */
+            if (!isOpenProp) {
+                dispatch((0, context_1.actionSetState)({ isOpen: false }));
+                setTimeout(() => {
+                    var _a, _b;
+                    if (alreadyMounted) {
+                        const portal = window.document.querySelector(`#${context_1.PORTAL_ID}`);
+                        if (((_a = portal === null || portal === void 0 ? void 0 : portal.children) === null || _a === void 0 ? void 0 : _a.length) === 1) {
+                            (_b = window.document.body) === null || _b === void 0 ? void 0 : _b.classList.remove('-modal-over');
+                        }
+                        dispatch((0, context_1.actionSetState)({ isMounted: false }));
+                    }
+                }, destroyTimeout);
+                return;
+            }
+        }
+    }, [isOpenProp, isOpen, alreadyMounted, destroyTimeout, dispatch, getScrollWidth]);
+    return react_1.default.useMemo(() => isMounted ? (react_1.default.createElement("div", { ref: containerRef, tabIndex: -1, id: id },
+        children,
+        react_1.default.createElement(react_2.Global, { styles: (0, react_2.css) `
+              :root {
+                --modal-scroll-width: ${getScrollWidth()}px;
+              }
+              body.-modal-over {
+                overflow: hidden;
+                margin-right: var(--modal-scroll-width);
+              }
+            ` }))) : null, [children, getScrollWidth, isMounted, id]);
+};
+exports.default = ModalWrapper;

package/Modal/BaseModal/RenderModal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ModalOverlayProps } from './ModalOverlay';
+import { ModalInnerProps } from './ModalInner';
+interface RenderModalProps {
+    readonly children: React.ReactNode | readonly React.ReactNode[];
+    readonly overrides: {
+        readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+        readonly Inner?: React.ForwardRefExoticComponent<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
+    };
+}
+declare const RenderModal: React.FC<RenderModalProps>;
+export default RenderModal;

package/Modal/BaseModal/RenderModal.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const context_1 = require("./context");
+const ModalOverlay_1 = __importDefault(require("./ModalOverlay"));
+const ModalInner_1 = __importDefault(require("./ModalInner"));
+const RenderModal = props => {
+    const { children, overrides } = props;
+    const { state } = (0, context_1.useContext)();
+    const { isOpen, closeOnOverlayClick, onRequestClose } = state;
+    const overridesMap = react_1.default.useMemo(() => (Object.assign({ Overlay: ModalOverlay_1.default,
+        Inner: ModalInner_1.default }, overrides)), [overrides]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.Overlay, { isOpen: isOpen, onRequestClose: onRequestClose, closeOnOverlayClick: closeOnOverlayClick })), [overridesMap, isOpen, closeOnOverlayClick, onRequestClose]),
+        react_1.default.useMemo(() => (react_1.default.createElement(overridesMap.Inner, { isOpen: isOpen, onRequestClose: onRequestClose }, children)), [children, isOpen, overridesMap, onRequestClose])));
+};
+exports.default = RenderModal;

package/Modal/BaseModal/context.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export type State = {
+    readonly isOpen: boolean;
+    readonly isMounted: boolean;
+    readonly destroyTimeout: number;
+    readonly onRequestClose: () => void;
+    readonly closeOnEsape: boolean;
+    readonly closeOnOverlayClick: boolean;
+};
+export type Context = {
+    readonly state: State;
+    readonly dispatch: React.Dispatch<Action>;
+};
+export type ActionSetState = {
+    readonly type: 'setState';
+    readonly payload: Partial<State>;
+};
+export type Action = ActionSetState;
+export declare const PORTAL_ID = "modal-portal";
+export declare const defaultState: State;
+export declare const actionSetState: (payload: ActionSetState['payload']) => ActionSetState;
+export interface ContextProviderProps {
+    readonly children: React.ReactNode | readonly React.ReactNode[];
+    readonly initialState: Omit<State, 'isMounted'>;
+}
+export declare const ContextProvider: React.FC<ContextProviderProps>;
+export declare const useContext: () => {
+    state: State;
+    dispatch: React.Dispatch<ActionSetState>;
+};

package/Modal/BaseModal/context.js

@@ -0,0 +1,44 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useContext = exports.ContextProvider = exports.actionSetState = exports.defaultState = exports.PORTAL_ID = void 0;
+const react_1 = __importDefault(require("react"));
+exports.PORTAL_ID = 'modal-portal';
+exports.defaultState = {
+    isOpen: false,
+    isMounted: false,
+    destroyTimeout: 240,
+    closeOnEsape: true,
+    closeOnOverlayClick: true,
+    onRequestClose: () => undefined,
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case 'setState':
+            return Object.assign(Object.assign({}, state), action.payload);
+        default:
+            return state;
+    }
+};
+const actionSetState = (payload) => ({
+    type: 'setState',
+    payload,
+});
+exports.actionSetState = actionSetState;
+const context = react_1.default.createContext({ state: exports.defaultState, dispatch: () => undefined });
+const ContextProvider = props => {
+    const { children, initialState } = props;
+    const [state, dispatch] = react_1.default.useReducer(reducer, Object.assign(Object.assign({}, exports.defaultState), initialState));
+    return react_1.default.createElement(context.Provider, { value: { state, dispatch } }, children);
+};
+exports.ContextProvider = ContextProvider;
+const useContext = () => {
+    const { state, dispatch } = react_1.default.useContext(context);
+    return {
+        state,
+        dispatch,
+    };
+};
+exports.useContext = useContext;

package/Modal/BaseModal/index.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ModalOverlayProps } from './ModalOverlay';
+import { ModalInnerProps } from './ModalInner';
+export interface BaseModalProps {
+    /**
+     * The dialog will remain open as long as the value is true
+     */
+    readonly isOpen: boolean;
+    /**
+     * The function that will be called to close the dialog
+     */
+    readonly onRequestClose: () => void;
+    /**
+     * Dialog content
+     */
+    readonly children: React.ReactNode;
+    /**
+     * Timeout (in `milliseconds`), after which the dialog box will be unmounted.\
+     * Correct if the value is equal to the length of the transition time\
+     * \
+     * **Default:** `240`
+     */
+    readonly destroyTimeout?: number;
+    /**
+     * Should the dialog close when `escape` key press\
+     * \
+     * **Default**: `true`
+     */
+    readonly closeOnEsape?: boolean;
+    /**
+     * Should the dialog close when overlay mouse click\
+     * \
+     * **Default**: `true`
+     */
+    readonly closeOnOverlayClick?: boolean;
+    /**
+     * Overridable components map
+     */
+    readonly overrides?: BaseModalOverrides;
+}
+export interface BaseModalOverrides {
+    readonly Overlay?: React.ForwardRefExoticComponent<ModalOverlayProps & React.RefAttributes<HTMLDivElement>>;
+    readonly Inner?: React.ForwardRefExoticComponent<ModalInnerProps & React.RefAttributes<HTMLDivElement>>;
+}
+declare const BaseModal: React.FC<BaseModalProps>;
+export default BaseModal;

package/Modal/BaseModal/index.js

@@ -0,0 +1,66 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_dom_1 = __importDefault(require("react-dom"));
+const context_1 = require("./context");
+const ModalOverlay_1 = __importDefault(require("./ModalOverlay"));
+const ModalInner_1 = __importDefault(require("./ModalInner"));
+const ModalWrapper_1 = __importDefault(require("./ModalWrapper"));
+const RenderModal_1 = __importDefault(require("./RenderModal"));
+const NoSSR_1 = __importDefault(require("../../NoSSR"));
+const BaseModal = props => {
+    const { isOpen, children, overrides, onRequestClose, closeOnOverlayClick = context_1.defaultState.closeOnOverlayClick, closeOnEsape = context_1.defaultState.closeOnEsape, destroyTimeout = context_1.defaultState.destroyTimeout, } = props;
+    const destroyTimeoutRef = react_1.default.useRef(null);
+    const [domLoaded, setDomLoaded] = react_1.default.useState(false);
+    const overridesMap = react_1.default.useMemo(() => (Object.assign({ Overlay: ModalOverlay_1.default,
+        Inner: ModalInner_1.default }, overrides)), [overrides]);
+    react_1.default.useEffect(() => {
+        /**
+         * Client render detection
+         */
+        setDomLoaded(true);
+        const timeout = destroyTimeoutRef.current;
+        // unload destroy timeout
+        return () => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
+    }, []);
+    const portalEl = react_1.default.useMemo(() => {
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        const node = window.document.body.querySelector(`#${context_1.PORTAL_ID}`);
+        if (node) {
+            return node;
+        }
+        const newNode = window.document.createElement('div');
+        newNode.setAttribute('id', context_1.PORTAL_ID);
+        window.document.body.appendChild(newNode);
+        return newNode;
+    }, []);
+    react_1.default.useEffect(() => () => {
+        if (typeof window !== 'undefined') {
+            const node = window.document.body.querySelector(`#${context_1.PORTAL_ID}`);
+            if (node) {
+                node.remove();
+            }
+        }
+    }, []);
+    return (react_1.default.createElement(NoSSR_1.default, null, domLoaded &&
+        portalEl &&
+        react_dom_1.default.createPortal(react_1.default.createElement(context_1.ContextProvider, { initialState: {
+                isOpen,
+                destroyTimeout,
+                closeOnEsape,
+                closeOnOverlayClick,
+                onRequestClose,
+            } },
+            react_1.default.createElement(ModalWrapper_1.default, { isOpen: isOpen, destroyTimeout: destroyTimeout },
+                react_1.default.createElement(RenderModal_1.default, { overrides: overridesMap }, children))), portalEl, 'ui-modal-portal')));
+};
+exports.default = BaseModal;

package/Modal/ConfirmBox/ConfirmBoxContainer.js

@@ -16,13 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const Container = styled_1.default.div `
+const StyledConfirmBoxContainer = styled_1.default.div `
   display: flex;
   flex-flow: column;
   min-width: 20em;
 `;
 const ConfirmBoxContainer = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
-    return (react_1.default.createElement(Container, Object.assign({ role: "modal-confirmbox", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledConfirmBoxContainer, Object.assign({ role: "modal-confirmbox", "aria-labelledby": `${dialogID}-title`, "aria-describedby": `${dialogID}-description` }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ConfirmBoxContainer);

package/Modal/ConfirmBox/ConfirmBoxContent.js

@@ -16,12 +16,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const Content = styled_1.default.div `
+const StyledConfirmBoxContent = styled_1.default.div `
   flex: 1;
   padding: 1em 1em;
 `;
 const ConfirmBoxContent = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
-    return (react_1.default.createElement(Content, Object.assign({ id: `${dialogID}-description` }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledConfirmBoxContent, Object.assign({ id: `${dialogID}-description` }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(ConfirmBoxContent);

package/Modal/ConfirmBox/ConfirmBoxFooter.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Button_1 = __importDefault(require("../../Button"));
-const Footer = styled_1.default.div `
+const StyledConfirmBoxFooter = styled_1.default.div `
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -39,7 +39,7 @@ const Footer = styled_1.default.div `
 `;
 const ConfirmBoxFooter = (props, ref) => {
     const { onRequestClose, onRequestYes, dismissButtonLabel, confirmButtonLabel } = props, nativeProps = __rest(props, ["onRequestClose", "onRequestYes", "dismissButtonLabel", "confirmButtonLabel"]);
-    return (react_1.default.createElement(Footer, Object.assign({}, nativeProps, { ref: ref }),
+    return (react_1.default.createElement(StyledConfirmBoxFooter, Object.assign({}, nativeProps, { ref: ref }),
         react_1.default.createElement(Button_1.default, { onClick: onRequestClose }, typeof dismissButtonLabel === 'undefined' ? 'Dismiss' : dismissButtonLabel),
         react_1.default.createElement(Button_1.default, { color: "primary", onClick: onRequestYes }, typeof confirmButtonLabel === 'undefined' ? 'Confirm' : confirmButtonLabel)));
 };

package/Modal/ConfirmBox/ConfirmBoxHeader.js

@@ -16,16 +16,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const Header = styled_1.default.div `
+const StyedConfirmBoxHeader = styled_1.default.div `
   padding: 1em 1em 0 1em;
 `;
-const HeaderTitle = styled_1.default.div `
+const ConfirmBoxTitle = styled_1.default.div `
   font-size: 1.4rem;
   font-weight: 600;
 `;
 const ConfirmBoxHeader = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);
-    return (react_1.default.createElement(Header, Object.assign({}, nativeProps, { ref: ref }),
-        react_1.default.createElement(HeaderTitle, { id: `${dialogID}-title` }, children)));
+    return (react_1.default.createElement(StyedConfirmBoxHeader, Object.assign({}, nativeProps, { ref: ref }),
+        react_1.default.createElement(ConfirmBoxTitle, { id: `${dialogID}-title` }, children)));
 };
 exports.default = react_1.default.forwardRef(ConfirmBoxHeader);