@via-profit/ui-kit 0.5.0 → 0.7.0

package/esm/Button/ButtonContainer.js

@@ -12,11 +12,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import { themeFocusRing } from '../ThemeProvider/tokens';
+import { themeFocusRing, controlHeight, CONTROL_BORDER, CONTROL_LINE_HEIGHT, } from '../ThemeProvider/tokens';
 import { buttonVariantStyles } from './buttonVariants';
+/**
+ * The outlined buttons and all the buttons of the ButtonGroup have a border.
+ * The other ones get its width in the padding, so all the buttons have the same height
+ */
+const buttonPadding = ({ theme, $variant, $group }) => {
+    const { y, x } = theme.padding.control;
+    const hasBorder = $variant === 'outlined' || Boolean($group) || !$variant;
+    return hasBorder ? `${y} ${x}` : `calc(${y} + ${CONTROL_BORDER}) calc(${x} + ${CONTROL_BORDER})`;
+};
 const StyledButton = styled.button `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
-  padding: 0.8em 1em;
+  padding: ${buttonPadding};
+  line-height: ${CONTROL_LINE_HEIGHT};
   cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
   font-size: 1em;
   /* Buttons do not inherit the font by default */
@@ -25,7 +35,13 @@ const StyledButton = styled.button `
   outline-style: solid;
   outline-color: transparent;
   outline-width: 0.14em;
-  transition: all 180ms ease-out 0s;
+  /*
+   * The colors only: the variants have different border and padding, a transition of the sizes
+   * makes the button grow for a moment when the variant changes (the border width changes by whole pixels)
+   */
+  transition-property: color, background-color, border-color, box-shadow, outline-color;
+  transition-duration: 180ms;
+  transition-timing-function: ease-out;
   background: none;
   display: inline-flex;
   align-items: center;
@@ -40,10 +56,11 @@ const StyledButton = styled.button `
 }};
   ${({ iconOnly, theme }) => iconOnly &&
     css `
-      padding: 1em;
+      padding: 0;
       justify-content: center;
-      width: 2.6em;
-      height: 2.6em;
+      box-sizing: border-box;
+      width: ${controlHeight(theme)};
+      height: ${controlHeight(theme)};
       border-radius: ${theme.shape.radiusFactor * 3}em;
     `}
   ${({ $variant, $group, color, disabled, theme }) => $variant && buttonVariantStyles({ variant: $variant, color, disabled, group: $group, theme })}

package/esm/Button/buttonVariants.js

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import Color from '../Color';
+import { CONTROL_BORDER } from '../ThemeProvider/tokens';
 const parseColor = (color, fallback) => {
     try {
         return Color.fromString(color);
@@ -82,7 +83,7 @@ const outlinedStyles = ({ $color, disabled, theme }) => css `
     : $color.toString()};
   background-color: transparent;
   border-style: solid;
-  border-width: 0.14em;
+  border-width: ${CONTROL_BORDER};
 
   ${!disabled &&
     css `
@@ -126,7 +127,7 @@ const plainStyles = ({ $color, disabled, theme }) => css `
 const groupStyles = ({ $group, $variant, $color }) => $group &&
     css `
     border-style: solid;
-    border-width: 0.14em;
+    border-width: ${CONTROL_BORDER};
     ${$variant !== 'outlined' &&
         css `
       border-color: transparent;

package/esm/Button/index.js

@@ -1,24 +1,5 @@
 import React from 'react';
 import ButtonStyled from './ButtonStyled';
-import ButtonGroupContext from '../ButtonGroup/ButtonGroupContext';
-import useThemeProps from '../ThemeProvider/useThemeProps';
-/**
- * The props the ButtonGroup gives to its buttons. Inside the group the theme does not set them:
- * the own props of the button win, then the group, then the theme
- */
-const GROUP_PROPS = ['variant', 'color', 'disabled'];
 // One component for all the variants, so changing the variant does not remount the button
-const Button = (props, ref) => {
-    const group = React.useContext(ButtonGroupContext);
-    const themedProps = useThemeProps('Button', props);
-    if (!group) {
-        return React.createElement(ButtonStyled, Object.assign({}, themedProps, { ref: ref }));
-    }
-    const ownProps = props;
-    const buttonProps = Object.assign({}, themedProps);
-    GROUP_PROPS.forEach(key => {
-        buttonProps[key] = ownProps[key];
-    });
-    return React.createElement(ButtonStyled, Object.assign({}, buttonProps, { ref: ref }));
-};
+const Button = (props, ref) => (React.createElement(ButtonStyled, Object.assign({}, props, { ref: ref })));
 export default React.forwardRef(Button);

package/esm/ButtonGroup/index.js

@@ -13,8 +13,9 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import ButtonGroupContext from './ButtonGroupContext';
+import { CONTROL_BORDER } from '../ThemeProvider/tokens';
 /**
- * The buttons are glued: the inner corners are square and the borders overlap.
+ * The buttons are glued: the inner corners are square and the borders overlap by the width of the border.
  * `:not(...)` raises the specificity above the own styles of the button.
  * `-of-type`, not `-child`: with SSR emotion inserts <style> elements between the children
  */
@@ -39,7 +40,7 @@ const StyledGroup = styled.div `
   ${({ $orientation }) => $orientation === 'vertical'
     ? css `
           & > *:not(:first-of-type) {
-            margin-top: -0.14em;
+            margin-top: calc(-1 * ${CONTROL_BORDER});
             border-top-left-radius: 0;
             border-top-right-radius: 0;
           }
@@ -50,7 +51,7 @@ const StyledGroup = styled.div `
         `
     : css `
           & > *:not(:first-of-type) {
-            margin-left: -0.14em;
+            margin-left: calc(-1 * ${CONTROL_BORDER});
             border-top-left-radius: 0;
             border-bottom-left-radius: 0;
           }

package/esm/Calendar/CalendarComponent.js

@@ -24,7 +24,6 @@ import WeekDaysBar from './CalendarWeekDaysBar';
 import { useCalendar } from './use-calendar';
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 export * from './use-calendar';
 export * from './CalendarWeekDaysBar';
 const viewAppear = keyframes `
@@ -117,7 +116,7 @@ const computeCalendarDate = (params) => {
 };
 const CalendarComponent = React.forwardRef((props, ref) => {
     var _a;
-    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, prevButtonLabel = 'Previous', nextButtonLabel = 'Next', } = useThemeProps('Calendar', props);
+    const { minDate: inputMinDate, maxDate: inputMaxDate, weekStartDay = 'monday', locale = 'ru-RU', displayLeadingZero = false, onChange, badges = [], markToday = true, weekDayLabelFormat = 'short', accentColor = 'primary', defaultValue, value: inputValue, initialView: inputInitialView, view: inputView, views: inputViews, resetButtonLabel, todayButtonLabel, heading, subheading, footer, overrides, range = false, prevButtonLabel = 'Previous', nextButtonLabel = 'Next', } = props;
     /**
      * Validations
      */

package/esm/Calendar/CalendarPaper.js

@@ -20,7 +20,7 @@ const StyledCalendarPaper = styled.div `
   justify-content: stretch;
   background-color: ${({ theme }) => theme.color.surface.toString()};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
-  box-shadow: ${({ theme }) => elevation(theme, 'popup', `0 4px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
+  box-shadow: ${({ theme }) => elevation(theme, 'popup')};
 `;
 const CalendarPaper = (props, ref) => {
     const { children } = props, restProps = __rest(props, ["children"]);

package/esm/Checkbox/CheckboxBox.js

@@ -13,7 +13,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import useCheckboxColor from './useCheckboxColor';
-import { themeFocusRing } from '../ThemeProvider/tokens';
+import { themeFocusRing, BORDER_WIDTH } from '../ThemeProvider/tokens';
 const Root = styled.span `
   position: relative;
   display: inline-flex;
@@ -44,7 +44,7 @@ const Square = styled.span `
   display: flex;
   width: 100%;
   height: 100%;
-  border-width: 0.1em;
+  border-width: ${BORDER_WIDTH};
   border-style: solid;
   /* Scaled down: the square is small, the full radius would turn it into a circle */
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 0.6}em;

package/esm/Checkbox/index.js

@@ -17,9 +17,8 @@ import Icon from './CheckboxIcon';
 import TextWrapper from './CheckboxTextWrapper';
 import Asterisk from './CheckboxAsterisk';
 import ErrorText from './CheckboxErrorText';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const Checkbox = (props, ref) => {
-    const _a = useThemeProps('Checkbox', props), { checked, defaultChecked, onChange, indeterminate = false, disabled, color, labelPosition, error, errorText, requiredAsterisk, overrides, children, className, style } = _a, nativeProps = __rest(_a, ["checked", "defaultChecked", "onChange", "indeterminate", "disabled", "color", "labelPosition", "error", "errorText", "requiredAsterisk", "overrides", "children", "className", "style"]);
+    const { checked, defaultChecked, onChange, indeterminate = false, disabled, color, labelPosition, error, errorText, requiredAsterisk, overrides, children, className, style } = props, nativeProps = __rest(props, ["checked", "defaultChecked", "onChange", "indeterminate", "disabled", "color", "labelPosition", "error", "errorText", "requiredAsterisk", "overrides", "children", "className", "style"]);
     const inputRef = React.useRef(null);
     const [internalChecked, setInternalChecked] = React.useState(Boolean(defaultChecked));
     const isControlled = typeof checked !== 'undefined';

package/esm/ClickOutside/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import getElementRef from '../utils/getElementRef';
 export const mouseEventMap = {
     onClick: 'click',
     onMouseDown: 'mousedown',
@@ -37,7 +38,7 @@ const ClickOutside = props => {
         };
     }, [onOutsideClick, mouseEvent]);
     // Keep the child's own ref working alongside ours
-    const childRef = children.ref;
+    const childRef = getElementRef(children);
     const setRef = React.useCallback((el) => {
         ref.current = el;
         if (typeof childRef === 'function') {
@@ -47,6 +48,8 @@ const ClickOutside = props => {
             childRef.current = el;
         }
     }, [childRef]);
-    return React.createElement(React.Fragment, null, React.cloneElement(children, { ref: setRef }));
+    return (React.createElement(React.Fragment, null, React.cloneElement(children, {
+        ref: setRef,
+    })));
 };
 export default ClickOutside;

package/esm/Grid/index.js

@@ -12,6 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import { resolveSpacing } from '../utils/spacing';
+/**
+ * The lists are the rows of the elements here: no default margins and markers
+ */
+const LIST_TAGS = ['ul', 'ol', 'dl'];
 const StyledGrid = styled.div `
   display: grid;
   grid-template-columns: ${({ $template }) => $template};
@@ -19,6 +23,7 @@ const StyledGrid = styled.div `
   ${({ theme, $rowGap }) => typeof $rowGap !== 'undefined' ? `row-gap: ${resolveSpacing(theme, $rowGap)};` : ''}
   align-items: ${({ $align }) => $align !== null && $align !== void 0 ? $align : 'stretch'};
   min-width: 0;
+  ${({ $isList }) => ($isList ? 'margin: 0; padding: 0; list-style: none;' : '')}
 `;
 const getTemplate = (minColumnWidth, columns) => {
     if (minColumnWidth) {
@@ -32,7 +37,7 @@ const getTemplate = (minColumnWidth, columns) => {
  * The grid of cells with the same gap. The children are the cells: no wrappers for the items
  */
 const Grid = (props, ref) => {
-    const { children, minColumnWidth, columns = 1, gap = 'md', rowGap, align } = props, nativeProps = __rest(props, ["children", "minColumnWidth", "columns", "gap", "rowGap", "align"]);
-    return (React.createElement(StyledGrid, Object.assign({}, nativeProps, { "$template": getTemplate(minColumnWidth, columns), "$gap": gap, "$rowGap": rowGap, "$align": align, ref: ref }), children));
+    const { children, minColumnWidth, columns = 1, gap = 'md', rowGap, align, as } = props, nativeProps = __rest(props, ["children", "minColumnWidth", "columns", "gap", "rowGap", "align", "as"]);
+    return (React.createElement(StyledGrid, Object.assign({}, nativeProps, { "$template": getTemplate(minColumnWidth, columns), "$gap": gap, "$rowGap": rowGap, "$align": align, "$isList": Boolean(as && LIST_TAGS.includes(as)), as: as, ref: ref }), children));
 };
 export default React.forwardRef(Grid);

package/esm/Highlighted/index.js

@@ -14,13 +14,12 @@ import React from 'react';
 import Container from './HighlightedContainer';
 import Mark from './HighlightedMark';
 import Text from './HighlightedText';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 export const escapeRegex = (pattern) => pattern.replace(/[/\-\\^$*+?.()|[\]{}]/g, '\\$&');
 /**
  * The component allows you to highlight text matches in a string
  */
 const Highlighted = (props, ref) => {
-    const _a = useThemeProps('Highlighted', props), { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = _a, nativeProps = __rest(_a, ["text", "highlight", "overrides", "disabledHighlighting", "caseSensitive"]);
+    const { text, highlight, overrides, disabledHighlighting = false, caseSensitive = false } = props, nativeProps = __rest(props, ["text", "highlight", "overrides", "disabledHighlighting", "caseSensitive"]);
     const patterns = React.useMemo(() => (typeof highlight === 'string' ? [highlight] : highlight)
         .filter(h => h.trim() !== '')
         // Longest first: the alternation takes the first matching pattern,

package/esm/Menu/MenuContainer.js

@@ -3,7 +3,6 @@ import useContext, { actionSetmenuState } from './context';
 import List from './MenuList';
 import Popper from '../Popper';
 import ClickOutside from '../ClickOutside';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const onRequestCloseDefault = () => undefined;
 const isEqual = (a, b) => {
     if (a === b) {
@@ -19,7 +18,7 @@ const isEqual = (a, b) => {
     return keysA.every(key => Object.prototype.hasOwnProperty.call(b, key) && a[key] === b[key]);
 };
 const MenuContainer = React.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, } = useThemeProps('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.useMemo(() => ({
         List: (overrides === null || overrides === void 0 ? void 0 : overrides.List) || List,
         Popper: (overrides === null || overrides === void 0 ? void 0 : overrides.Popper) || Popper,
@@ -28,7 +27,7 @@ const MenuContainer = React.forwardRef((props, ref) => {
     const menuPopperRef = React.useRef(null);
     // Starts as `false` so that a menu mounted in the open state is focused and scrolled too
     const isOpenRef = React.useRef(false);
-    const focusTimeoutRef = React.useRef();
+    const focusTimeoutRef = React.useRef(undefined);
     // Whether the focus is inside the list: then it is returned to the anchor on close
     const hasFocusRef = React.useRef(false);
     // The parent often resets the anchor together with isOpen, so the last one is kept

package/esm/Menu/MenuItem.js

@@ -12,12 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import { themePadding } from '../ThemeProvider/tokens';
 const StyledMenuItem = styled.div `
   cursor: pointer;
   user-select: none;
   display: flex;
   align-items: center;
-  padding: 0.4em 0.8em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'item');
+    return `${y} ${x}`;
+}};
   transition: all 240ms ease-out;
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   background-color: ${({ theme, selected, hovered }) => {

package/esm/Menu/MenuList.js

@@ -20,7 +20,7 @@ const StyledMenuList = styled.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 }) => elevation(theme, 'popup', `0 0.5em 1.5em ${theme.color.surface.darken(50).alpha(0.6).toString()}`)};
+  box-shadow: ${({ theme }) => elevation(theme, 'popup')};
 
   ${({ $maxWidth }) => {
     if (typeof $maxWidth === 'number') {

package/esm/Modal/BaseModal/ModalInner.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import { elevation } from '../../ThemeProvider/tokens';
 const StyledModalInner = styled.div `
   opacity: 0;
   z-index: ${({ theme }) => theme.zIndex.modal};
@@ -19,6 +20,7 @@ const StyledModalInner = styled.div `
   pointer-events: all;
   position: relative;
   background-color: ${({ theme }) => theme.color.surface.toString()};
+  box-shadow: ${({ theme }) => elevation(theme, 'popup')};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   margin-top: 2em;
   transition:

package/esm/Modal/BaseModal/ModalWrapper.js

@@ -6,6 +6,32 @@ import TabManager from '../../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 } = useContext();
@@ -29,46 +55,16 @@ const ModalWrapper = props => {
             }
         };
     }, [isOpen, autofocus]);
-    const getScrollWidth = React.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.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.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();
         }
     }, []);
     /**
@@ -160,13 +156,10 @@ const ModalWrapper = props => {
     return React.useMemo(() => isMounted ? (React.createElement("div", { ref: containerRef, tabIndex: -1, id: id },
         children,
         React.createElement(Global, { styles: 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]);
 };
 export default ModalWrapper;

package/esm/Modal/BaseModal/index.js

@@ -7,9 +7,8 @@ import InnerContainer from './ModalInnerContainer';
 import ModalWrapper from './ModalWrapper';
 import RenderModal from './RenderModal';
 import NoSSR from '../../NoSSR';
-import useThemeProps from '../../ThemeProvider/useThemeProps';
 const BaseModal = props => {
-    const { isOpen, children, overrides, autofocus = true, closeOnOverlayClick = defaultState.closeOnOverlayClick, closeOnEscape = defaultState.closeOnEscape, destroyTimeout = defaultState.destroyTimeout, onRequestClose, } = useThemeProps('Modal', props);
+    const { isOpen, children, overrides, autofocus = true, closeOnOverlayClick = defaultState.closeOnOverlayClick, closeOnEscape = defaultState.closeOnEscape, destroyTimeout = defaultState.destroyTimeout, onRequestClose, } = props;
     const [domLoaded, setDomLoaded] = React.useState(false);
     const overridesMap = React.useMemo(() => ({
         Overlay: (overrides === null || overrides === void 0 ? void 0 : overrides.Overlay) || Overlay,

package/esm/Modal/ConfirmBox/ConfirmBoxContent.js

@@ -11,9 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { themePadding } from '../../ThemeProvider/tokens';
 const StyledConfirmBoxContent = styled.div `
   flex: 1;
-  padding: 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
 `;
 const ConfirmBoxContent = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);

package/esm/Modal/ConfirmBox/ConfirmBoxFooter.js

@@ -12,11 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import Button from '../../Button';
+import { themePadding } from '../../ThemeProvider/tokens';
 const StyledConfirmBoxFooter = styled.div `
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 1em 1em 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
 
   & > button {
     border-radius: 0;

package/esm/Modal/ConfirmBox/ConfirmBoxHeader.js

@@ -11,8 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { themePadding } from '../../ThemeProvider/tokens';
 const StyedConfirmBoxHeader = styled.div `
-  padding: 1em 1em 0 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x} 0 ${x}`;
+}};
 `;
 const ConfirmBoxTitle = styled.div `
   font-size: 1.4rem;

package/esm/Modal/ConfirmBox/index.js

@@ -17,9 +17,8 @@ import Footer from './ConfirmBoxFooter';
 import Header from './ConfirmBoxHeader';
 import Overlay from '../BaseModal/ModalOverlay';
 import useDialogID from '../BaseModal/useDialogID';
-import useThemeProps from '../../ThemeProvider/useThemeProps';
 const ConfirmBox = props => {
-    const _a = useThemeProps('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 = useDialogID('dialog-confirm');
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,

package/esm/Modal/Dialog/DialogInner.js

@@ -12,8 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import BaseModalInner from '../BaseModal/ModalInner';
+import { themePadding } from '../../ThemeProvider/tokens';
 const StyledDialogInner = styled(BaseModalInner) `
-  padding: 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
 `;
 const DialogInner = (props, ref) => {
     const { children, dialogID } = props, restProps = __rest(props, ["children", "dialogID"]);

package/esm/Modal/Dialog/index.js

@@ -13,9 +13,8 @@ import * as React from 'react';
 import BaseModal from '../BaseModal';
 import DialogInner from './DialogInner';
 import useDialogID from '../BaseModal/useDialogID';
-import useThemeProps from '../../ThemeProvider/useThemeProps';
 const Dialog = props => {
-    const _a = useThemeProps('Dialog', props), { children, overrides } = _a, restProps = __rest(_a, ["children", "overrides"]);
+    const { children, overrides } = props, restProps = __rest(props, ["children", "overrides"]);
     const dialogID = useDialogID('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/esm/Modal/Drawer/DrawerFooter.js

@@ -11,8 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { themePadding } from '../../ThemeProvider/tokens';
 const StyledDrawerFooter = styled.div `
-  padding: 0.5em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `calc(${y} / 2) ${x}`;
+}};
 `;
 const DrawerFooter = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);

package/esm/Modal/Drawer/DrawerHeader.js

@@ -14,8 +14,12 @@ import styled from '@emotion/styled';
 import Span from '../../Typography/Span';
 import DrawerCloseIcon from './DrawerCloseIcon';
 import Button from '../../Button';
+import { themePadding } from '../../ThemeProvider/tokens';
 const StyledDrawerHeader = styled.div `
-  padding: 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
   display: flex;
   align-items: center;
   justify-content: space-between;

package/esm/Modal/Drawer/index.js

@@ -18,9 +18,8 @@ import Content from './DrawerContent';
 import Footer from './DrawerFooter';
 import Overlay from '../BaseModal/ModalOverlay';
 import useDialogID from '../BaseModal/useDialogID';
-import useThemeProps from '../../ThemeProvider/useThemeProps';
 const Drawer = props => {
-    const _a = useThemeProps('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/esm/Modal/MessageBox/MessageBoxContent.js

@@ -11,9 +11,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { themePadding } from '../../ThemeProvider/tokens';
 const Content = styled.div `
   flex: 1;
-  padding: 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
 `;
 const MessageBoxContent = (props, ref) => {
     const { children, dialogID } = props, nativeProps = __rest(props, ["children", "dialogID"]);

package/esm/Modal/MessageBox/MessageBoxFooter.js

@@ -12,11 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import Button from '../../Button';
+import { themePadding } from '../../ThemeProvider/tokens';
 const Footer = styled.div `
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 1em 1em 1em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
 
   & > button {
     border-radius: 0;

package/esm/Modal/MessageBox/MessageBoxHeader.js

@@ -11,8 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { themePadding } from '../../ThemeProvider/tokens';
 const Header = styled.div `
-  padding: 1em 1em 0 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x} 0 ${x}`;
+}};
 `;
 const HeaderTitle = styled.div `
   font-size: 1.4rem;