@via-profit/ui-kit 0.5.0 → 0.6.0

package/LoadingIndicator/LoadingOverlay.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)

package/LoadingIndicator/Spinner.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)

package/LoadingIndicator/SpinnerCircle.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const DEFAULT_SIZE = "2.4em";
 export declare const toCssSize: (size: number | string) => string;
 /**
@@ -6,8 +5,8 @@ export declare const toCssSize: (size: number | string) => string;
  * A span, so the spinner can be placed inside phrasing content (e.g. a button)
  */
 declare const SpinnerCircle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     readonly $size: string;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/Menu/MenuContainer.d.ts

@@ -260,6 +260,6 @@ export type GetOptionSelected<T> = (payload: {
 export type OnSelectItem<T, Multiple extends boolean | undefined = undefined> = (value: Multiple extends undefined ? T : readonly T[]) => void;
 export type OnRequestClose = (event?: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | KeyboardEvent | MouseEvent) => void;
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: MenuProps<T, Multiple> & {
-    ref?: React.Ref<MenuRef> | undefined;
-}) => JSX.Element;
+    ref?: React.Ref<MenuRef>;
+}) => React.JSX.Element;
 export default _default;

package/Menu/MenuContainer.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -31,7 +41,6 @@ const context_1 = __importStar(require("./context"));
 const MenuList_1 = __importDefault(require("./MenuList"));
 const Popper_1 = __importDefault(require("../Popper"));
 const ClickOutside_1 = __importDefault(require("../ClickOutside"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const onRequestCloseDefault = () => undefined;
 const isEqual = (a, b) => {
     if (a === b) {
@@ -47,7 +56,7 @@ const isEqual = (a, b) => {
     return keysA.every(key => Object.prototype.hasOwnProperty.call(b, key) && a[key] === b[key]);
 };
 const MenuContainer = react_1.default.forwardRef((props, ref) => {
-    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, } = (0, useThemeProps_1.default)('Menu', props);
+    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, } = props;
     const overridesMap = react_1.default.useMemo(() => ({
         List: (overrides === null || overrides === void 0 ? void 0 : overrides.List) || MenuList_1.default,
         Popper: (overrides === null || overrides === void 0 ? void 0 : overrides.Popper) || Popper_1.default,
@@ -56,7 +65,7 @@ const MenuContainer = react_1.default.forwardRef((props, ref) => {
     const menuPopperRef = react_1.default.useRef(null);
     // Starts as `false` so that a menu mounted in the open state is focused and scrolled too
     const isOpenRef = react_1.default.useRef(false);
-    const focusTimeoutRef = react_1.default.useRef();
+    const focusTimeoutRef = react_1.default.useRef(undefined);
     // Whether the focus is inside the list: then it is returned to the anchor on close
     const hasFocusRef = react_1.default.useRef(false);
     // The parent often resets the anchor together with isOpen, so the last one is kept

package/Menu/MenuItem.js

@@ -18,12 +18,16 @@ exports.MenuItem = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledMenuItem = styled_1.default.div `
   cursor: pointer;
   user-select: none;
   display: flex;
   align-items: center;
-  padding: 0.4em 0.8em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'item');
+    return `${y} ${x}`;
+}};
   transition: all 240ms ease-out;
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   background-color: ${({ theme, selected, hovered }) => {

package/Menu/MenuList.js

@@ -26,7 +26,7 @@ const StyledMenuList = styled_1.default.div `
   opacity: ${props => (props.$isOpen ? 1 : 0)};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup', `0 0.5em 1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
 
   ${({ $maxWidth }) => {
     if (typeof $maxWidth === 'number') {

package/Menu/context.d.ts

@@ -9,7 +9,7 @@ interface ActionSetMenuState {
     readonly type: 'setMenuState';
     readonly payload: Partial<MenuState>;
 }
-export declare const actionSetmenuState: (payload: ActionSetMenuState['payload']) => ActionSetMenuState;
+export declare const actionSetmenuState: (payload: ActionSetMenuState["payload"]) => ActionSetMenuState;
 export declare const defaultState: MenuState;
 interface MenuContextProviderProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];

package/Menu/index.d.ts

@@ -6,6 +6,6 @@ export * from './MenuContainer';
 export * from './MenuItem';
 export * from './MenuList';
 declare const _default: <T, Multiple extends boolean | undefined = undefined>(props: MenuProps<T, Multiple> & {
-    ref?: React.Ref<MenuRef> | undefined;
+    ref?: React.Ref<MenuRef>;
 }) => React.ReactElement;
 export default _default;

package/Modal/BaseModal/ModalInner.js

@@ -17,6 +17,7 @@ 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 tokens_1 = require("../../ThemeProvider/tokens");
 const StyledModalInner = styled_1.default.div `
   opacity: 0;
   z-index: ${({ theme }) => theme.zIndex.modal};
@@ -24,6 +25,7 @@ const StyledModalInner = styled_1.default.div `
   pointer-events: all;
   position: relative;
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   margin-top: 2em;
   transition:

package/Modal/BaseModal/ModalWrapper.js

@@ -11,6 +11,32 @@ const TabManager_1 = __importDefault(require("../../utils/TabManager"));
  * Count of the modals which lock the body scroll
  */
 let bodyLocksCount = 0;
+const SCROLL_WIDTH_PROPERTY = '--modal-scroll-width';
+/**
+ * The first modal hides the scrollbar of the page and puts the margin of the same width instead,
+ * so the page does not move. The width is measured before the scrollbar is hidden:
+ * the scrollbar of the window, not of the body (`0` for the overlay scrollbars)
+ */
+const lockPageScroll = () => {
+    var _a;
+    if (bodyLocksCount === 0) {
+        const scrollWidth = Math.max(window.innerWidth - window.document.documentElement.clientWidth, 0);
+        window.document.documentElement.style.setProperty(SCROLL_WIDTH_PROPERTY, `${scrollWidth}px`);
+        (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.add('-modal-over');
+    }
+    bodyLocksCount += 1;
+};
+/**
+ * The last modal returns the scrollbar of the page
+ */
+const unlockPageScroll = () => {
+    var _a;
+    bodyLocksCount = Math.max(0, bodyLocksCount - 1);
+    if (bodyLocksCount === 0) {
+        (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.remove('-modal-over');
+        window.document.documentElement.style.removeProperty(SCROLL_WIDTH_PROPERTY);
+    }
+};
 const ModalWrapper = props => {
     const { children, isOpen: isOpenProp, autofocus = true } = props;
     const { state, dispatch } = (0, context_1.useContext)();
@@ -34,46 +60,16 @@ const ModalWrapper = props => {
             }
         };
     }, [isOpen, autofocus]);
-    const getScrollWidth = react_1.default.useCallback(() => {
-        var _a;
-        const outer = window.document.createElement('div');
-        const inner = window.document.createElement('div');
-        const isVerticalScrollbar = window.document.body.scrollHeight > window.document.body.clientHeight;
-        if (!isVerticalScrollbar) {
-            return 0;
-        }
-        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;
-    }, []);
     const lockBody = react_1.default.useCallback(() => {
-        var _a;
         if (!bodyLockedRef.current) {
             bodyLockedRef.current = true;
-            bodyLocksCount += 1;
-            (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.add('-modal-over');
+            lockPageScroll();
         }
     }, []);
     const unlockBody = react_1.default.useCallback(() => {
-        var _a;
         if (bodyLockedRef.current) {
             bodyLockedRef.current = false;
-            bodyLocksCount = Math.max(0, bodyLocksCount - 1);
-            if (bodyLocksCount === 0) {
-                (_a = window.document.body) === null || _a === void 0 ? void 0 : _a.classList.remove('-modal-over');
-            }
+            unlockPageScroll();
         }
     }, []);
     /**
@@ -165,13 +161,10 @@ const ModalWrapper = props => {
     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);
+                margin-right: var(${SCROLL_WIDTH_PROPERTY}, 0px);
               }
-            ` }))) : null, [children, getScrollWidth, isMounted, id]);
+            ` }))) : null, [children, isMounted, id]);
 };
 exports.default = ModalWrapper;

package/Modal/BaseModal/context.d.ts

@@ -18,7 +18,7 @@ export type ActionSetState = {
 };
 export type Action = ActionSetState;
 export declare const defaultState: State;
-export declare const actionSetState: (payload: ActionSetState['payload']) => ActionSetState;
+export declare const actionSetState: (payload: ActionSetState["payload"]) => ActionSetState;
 export interface ContextProviderProps {
     readonly children: React.ReactNode | readonly React.ReactNode[];
     readonly initialState: Omit<State, 'isMounted'>;

package/Modal/BaseModal/index.js

@@ -12,9 +12,8 @@ const ModalInnerContainer_1 = __importDefault(require("./ModalInnerContainer"));
 const ModalWrapper_1 = __importDefault(require("./ModalWrapper"));
 const RenderModal_1 = __importDefault(require("./RenderModal"));
 const NoSSR_1 = __importDefault(require("../../NoSSR"));
-const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const BaseModal = props => {
-    const { isOpen, children, overrides, autofocus = true, closeOnOverlayClick = context_1.defaultState.closeOnOverlayClick, closeOnEscape = context_1.defaultState.closeOnEscape, destroyTimeout = context_1.defaultState.destroyTimeout, onRequestClose, } = (0, useThemeProps_1.default)('Modal', props);
+    const { isOpen, children, overrides, autofocus = true, closeOnOverlayClick = context_1.defaultState.closeOnOverlayClick, closeOnEscape = context_1.defaultState.closeOnEscape, destroyTimeout = context_1.defaultState.destroyTimeout, onRequestClose, } = props;
     const [domLoaded, setDomLoaded] = react_1.default.useState(false);
     const overridesMap = react_1.default.useMemo(() => ({
         Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || ModalOverlay_1.default,

package/Modal/ConfirmBox/ConfirmBoxContent.js

@@ -16,9 +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 tokens_1 = require("../../ThemeProvider/tokens");
 const StyledConfirmBoxContent = styled_1.default.div `
   flex: 1;
-  padding: 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 `;
 const ConfirmBoxContent = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);

package/Modal/ConfirmBox/ConfirmBoxFooter.js

@@ -17,11 +17,15 @@ 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 tokens_1 = require("../../ThemeProvider/tokens");
 const StyledConfirmBoxFooter = styled_1.default.div `
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 1em 1em 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 
   & > button {
     border-radius: 0;

package/Modal/ConfirmBox/ConfirmBoxHeader.js

@@ -16,8 +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 tokens_1 = require("../../ThemeProvider/tokens");
 const StyedConfirmBoxHeader = styled_1.default.div `
-  padding: 1em 1em 0 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x} 0 ${x}`;
+}};
 `;
 const ConfirmBoxTitle = styled_1.default.div `
   font-size: 1.4rem;

package/Modal/ConfirmBox/index.js

@@ -22,9 +22,8 @@ const ConfirmBoxFooter_1 = __importDefault(require("./ConfirmBoxFooter"));
 const ConfirmBoxHeader_1 = __importDefault(require("./ConfirmBoxHeader"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
-const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const ConfirmBox = props => {
-    const _a = (0, useThemeProps_1.default)('ConfirmBox', props), { header, children, onRequestYes, onRequestClose, overrides, isOpen, dismissButtonLabel, confirmButtonLabel } = _a, otherProps = __rest(_a, ["header", "children", "onRequestYes", "onRequestClose", "overrides", "isOpen", "dismissButtonLabel", "confirmButtonLabel"]);
+    const { header, children, onRequestYes, onRequestClose, overrides, isOpen, dismissButtonLabel, confirmButtonLabel } = props, otherProps = __rest(props, ["header", "children", "onRequestYes", "onRequestClose", "overrides", "isOpen", "dismissButtonLabel", "confirmButtonLabel"]);
     const dialogID = (0, useDialogID_1.default)('dialog-confirm');
     const overridesMap = react_1.default.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || ConfirmBoxContainer_1.default,

package/Modal/Dialog/DialogInner.js

@@ -17,8 +17,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const ModalInner_1 = __importDefault(require("../BaseModal/ModalInner"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const StyledDialogInner = (0, styled_1.default)(ModalInner_1.default) `
-  padding: 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 `;
 const DialogInner = (props, ref) => {
     const { children, dialogID } = props, restProps = __rest(props, ["children", "dialogID"]);

package/Modal/Dialog/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)
@@ -41,9 +51,8 @@ const React = __importStar(require("react"));
 const BaseModal_1 = __importDefault(require("../BaseModal"));
 const DialogInner_1 = __importDefault(require("./DialogInner"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
-const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const Dialog = props => {
-    const _a = (0, useThemeProps_1.default)('Dialog', props), { children, overrides } = _a, restProps = __rest(_a, ["children", "overrides"]);
+    const { children, overrides } = props, restProps = __rest(props, ["children", "overrides"]);
     const dialogID = (0, useDialogID_1.default)('dialog');
     // Created once: a component created during the render is a new type on every render,
     // so React would remount the whole dialog content (inputs lose the focus and the state)

package/Modal/Drawer/DrawerCloseIcon.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_1 = require("react");

package/Modal/Drawer/DrawerFooter.js

@@ -16,8 +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 tokens_1 = require("../../ThemeProvider/tokens");
 const StyledDrawerFooter = styled_1.default.div `
-  padding: 0.5em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `calc(${y} / 2) ${x}`;
+}};
 `;
 const DrawerFooter = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);

package/Modal/Drawer/DrawerHeader.d.ts

@@ -31,20 +31,20 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttribute
     /**
      * Display close button in the header
      */
-    readonly showCloseButton?: boolean | undefined;
+    readonly showCloseButton?: boolean;
     /**
      * Accessible label of the close button\
      * \
      * **Default**: `'Close'`
      */
-    readonly closeButtonLabel?: string | undefined;
+    readonly closeButtonLabel?: string;
     /**
      * Drawer unique ID, the title gets the `${dialogID}-title` id for `aria-labelledby`
      */
-    readonly dialogID?: string | undefined;
+    readonly dialogID?: string;
     /**
      * On close request
      */
-    readonly onRequestClose?: ((event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
+    readonly onRequestClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Modal/Drawer/DrawerHeader.js

@@ -19,8 +19,12 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const Span_1 = __importDefault(require("../../Typography/Span"));
 const DrawerCloseIcon_1 = __importDefault(require("./DrawerCloseIcon"));
 const Button_1 = __importDefault(require("../../Button"));
+const tokens_1 = require("../../ThemeProvider/tokens");
 const StyledDrawerHeader = styled_1.default.div `
-  padding: 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
   display: flex;
   align-items: center;
   justify-content: space-between;

package/Modal/Drawer/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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)
@@ -46,9 +56,8 @@ const DrawerContent_1 = __importDefault(require("./DrawerContent"));
 const DrawerFooter_1 = __importDefault(require("./DrawerFooter"));
 const ModalOverlay_1 = __importDefault(require("../BaseModal/ModalOverlay"));
 const useDialogID_1 = __importDefault(require("../BaseModal/useDialogID"));
-const useThemeProps_1 = __importDefault(require("../../ThemeProvider/useThemeProps"));
 const Drawer = props => {
-    const _a = (0, useThemeProps_1.default)('Drawer', props), { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = _a, otherProps = __rest(_a, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
+    const { children, onRequestClose, showCloseButton, header, closeButtonLabel, anchor, toolbar, footer, overrides } = props, otherProps = __rest(props, ["children", "onRequestClose", "showCloseButton", "header", "closeButtonLabel", "anchor", "toolbar", "footer", "overrides"]);
     const hasFooter = React.useMemo(() => typeof footer !== 'undefined' && footer !== null, [footer]);
     const hasHeader = React.useMemo(() => typeof header !== 'undefined' ||
         typeof toolbar !== 'undefined' ||

package/Modal/MessageBox/MessageBoxContent.js

@@ -16,9 +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 tokens_1 = require("../../ThemeProvider/tokens");
 const Content = styled_1.default.div `
   flex: 1;
-  padding: 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 `;
 const MessageBoxContent = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);

package/Modal/MessageBox/MessageBoxFooter.js

@@ -17,11 +17,15 @@ 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 tokens_1 = require("../../ThemeProvider/tokens");
 const Footer = styled_1.default.div `
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 1em 1em 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x}`;
+}};
 
   & > button {
     border-radius: 0;

package/Modal/MessageBox/MessageBoxHeader.js

@@ -16,8 +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 tokens_1 = require("../../ThemeProvider/tokens");
 const Header = styled_1.default.div `
-  padding: 1em 1em 0 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `${y} ${x} 0 ${x}`;
+}};
 `;
 const HeaderTitle = styled_1.default.div `
   font-size: 1.4rem;