@via-profit/ui-kit 0.5.0 → 0.6.0

package/ThemeProvider/index.d.ts

@@ -1,23 +1,20 @@
 import React from 'react';
 import { useTheme } from '@emotion/react';
 import type Color from '../Color';
-import type { UIThemeComponents } from './components';
 export { useTheme };
 export * from './createTheme';
-export * from './components';
-export { default as useThemeProps } from './useThemeProps';
 export * from './tokens';
-export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color' | 'spacing' | 'components' | 'typography' | 'focusRing' | 'elevation'>> & {
+export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color' | 'spacing' | 'padding' | 'typography' | 'focusRing' | 'elevation'>> & {
     readonly typography: UIThemeOverrideTypography;
     readonly focusRing: UIThemeOverrideFocusRing;
     readonly elevation: UIThemeOverrideElevation;
-    readonly components: UIThemeComponents;
     readonly isDark: boolean;
     readonly fontSize: Record<keyof UIThemeOverrideFontSize, number>;
     readonly zIndex: Required<UIThemeOverrideZIndex>;
     readonly color: Record<keyof UIThemeOverrideColor, Color>;
     readonly shape: Required<UIThemeOverrideShape>;
     readonly spacing: Required<UIThemeOverrideSpacing>;
+    readonly padding: Record<ThemePadding, Required<UIThemeOverridePaddingValue>>;
 };
 export interface UIThemeOverrideColor {
     readonly backgroundPrimary?: string;
@@ -61,18 +58,24 @@ export interface UIThemeOverrideFocusRing {
     readonly color?: string;
 }
 /**
- * The shadows. Without these values every component has its own shadow
+ * The shadows by the level of the elements. Without a value the components of the level
+ * get the default shadow of the kit: all of them have the same shadow
  */
 export interface UIThemeOverrideElevation {
     /**
-     * The elements over the page: the menus, the calendar of the date picker, the toasts
+     * The elements over the page: Menu, Calendar, Toast, Tooltip, the modal windows
      */
     readonly popup?: string;
     /**
      * The cards and the panels on the page: Surface, Accordion, Table
      */
     readonly surface?: string;
+    /**
+     * The raised parts of the controls: the knob of the Switch
+     */
+    readonly control?: string;
 }
+export type ThemeElevation = keyof UIThemeOverrideElevation;
 export interface UIThemeOverrideZIndex {
     readonly header?: number;
     readonly modal?: number;
@@ -92,6 +95,40 @@ export interface UIThemeOverrideSpacing {
     readonly xl?: string;
 }
 export type ThemeSpacing = keyof UIThemeOverrideSpacing;
+/**
+ * The inner padding of one class of the elements. Any CSS length, `em` is recommended:
+ * the padding grows together with the font size
+ */
+export interface UIThemeOverridePaddingValue {
+    /**
+     * The top and the bottom padding
+     */
+    readonly y?: string;
+    /**
+     * The left and the right padding
+     */
+    readonly x?: string;
+}
+/**
+ * The inner paddings of the components, by the class of the elements.
+ * Smaller paddings make a denser interface without changing the font size
+ */
+export interface UIThemeOverridePadding {
+    /**
+     * The controls: Button, TextField, TextArea, Selectbox, DatePicker, Autocomplete.
+     * `y` sets the height of the controls, all of them have the same height
+     */
+    readonly control?: UIThemeOverridePaddingValue;
+    /**
+     * The rows of the lists: the menu items, the table cells, the tabs, the accordion headers
+     */
+    readonly item?: UIThemeOverridePaddingValue;
+    /**
+     * The content of the panels: Surface, Accordion, the modal windows, Drawer, Toast
+     */
+    readonly container?: UIThemeOverridePaddingValue;
+}
+export type ThemePadding = keyof UIThemeOverridePadding;
 export interface UIThemeOverrideFontSize {
     readonly small?: number;
     readonly normal?: number;
@@ -103,11 +140,6 @@ export interface UIThemeOverrides {
      * **Default:** `false`
      */
     readonly isDark?: boolean;
-    /**
-     * The look of the components: `defaultProps`, the `styles` added to the parts
-     * and the `overrides` that replace the parts. The props of the component instance win over the theme
-     */
-    readonly components?: UIThemeComponents;
     readonly fontSize?: UIThemeOverrideFontSize;
     readonly typography?: UIThemeOverrideTypography;
     readonly focusRing?: UIThemeOverrideFocusRing;
@@ -115,6 +147,7 @@ export interface UIThemeOverrides {
     readonly zIndex?: UIThemeOverrideZIndex;
     readonly shape?: UIThemeOverrideShape;
     readonly spacing?: UIThemeOverrideSpacing;
+    readonly padding?: UIThemeOverridePadding;
     readonly color?: UIThemeOverrideColor;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/ThemeProvider/index.js

@@ -17,14 +17,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useThemeProps = exports.useTheme = void 0;
+exports.useTheme = void 0;
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@emotion/react");
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return react_2.useTheme; } });
 __exportStar(require("./createTheme"), exports);
-__exportStar(require("./components"), exports);
-var useThemeProps_1 = require("./useThemeProps");
-Object.defineProperty(exports, "useThemeProps", { enumerable: true, get: function () { return __importDefault(useThemeProps_1).default; } });
 __exportStar(require("./tokens"), exports);
 const ThemeProvider = props => {
     const { children, theme } = props;

package/ThemeProvider/tokens.d.ts

@@ -1,4 +1,5 @@
 import { Theme } from '@emotion/react';
+import type { ThemePadding, ThemeElevation } from './index';
 /**
  * True if the theme sets the focus ring
  */
@@ -8,8 +9,58 @@ export declare const hasThemeFocusRing: (theme: Theme) => boolean;
  * Put it at the end of the styles: it replaces the own focus of the component.
  * Without `focusRing` in the theme it returns nothing and the component keeps its own focus
  */
-export declare const themeFocusRing: (theme: Theme, selector?: string) => import("@emotion/utils").SerializedStyles | undefined;
+export declare const themeFocusRing: (theme: Theme, selector?: string) => import("@emotion/react").SerializedStyles | undefined;
 /**
- * The shadow of the level: the `elevation` of the theme, or the own shadow of the component
+ * The default shadows of the levels: the components of one level have the same shadow.
+ * In `px`, not in `em`: the tooltip and the toast have a smaller font, but the same shadow as the menu
  */
-export declare const elevation: (theme: Theme, level: 'popup' | 'surface', own: string) => string;
+export declare const defaultElevation: (theme: Theme) => Record<ThemeElevation, string>;
+/**
+ * The shadow of the level: the `elevation` of the theme or the default shadow of the level.
+ * `own` replaces the default shadow, the shadow of the theme wins over both
+ */
+export declare const elevation: (theme: Theme, level: ThemeElevation, own?: string) => string;
+/**
+ * The height of the text line in the controls, in the `em` of the control. Set as a length,
+ * the line height is inherited as is by the text of any size: the label of the button and the value of the field
+ */
+export declare const CONTROL_LINE_HEIGHT = "1.2em";
+/**
+ * The width of the borders of the components: `1px` at the font size of `16px`.
+ * In `em`: the border grows together with the font, and at the usual sizes the browser draws `1px`
+ */
+export declare const BORDER_WIDTH = "0.0625em";
+/**
+ * The border of the buttons. The standard and the plain buttons have no border:
+ * their padding is larger by this width, so all the variants have the same size
+ */
+export declare const CONTROL_BORDER = "0.0625em";
+/**
+ * The size of the text in the fields (TextField, TextArea, Selectbox) relative to the control
+ */
+export declare const FIELD_TEXT_SCALE = 0.9;
+/**
+ * The height of the one-line control: the icon buttons are squares of this size
+ */
+export declare const controlHeight: (theme: Theme) => string;
+/**
+ * The border of the field: the border of the buttons in the `em` of the field with the font size `fontScale`
+ */
+export declare const fieldBorder: (fontScale?: number) => string;
+/**
+ * The padding of the field with the `fieldBorder`, so the field has the height of the button.
+ * `fontScale` is the font size of the element relative to the control: the `em` of the padding are its own
+ */
+export declare const fieldPadding: (theme: Theme, fontScale?: number) => {
+    y: string;
+    x: string;
+};
+/**
+ * The padding of the class for the element with its own font size.
+ * `fontScale` is the font size of the element relative to the parent: the padding is in the `em` of the parent,
+ * so the header with a larger font has the same padding as the content under it
+ */
+export declare const themePadding: (theme: Theme, kind: ThemePadding, fontScale?: number) => {
+    y: string;
+    x: string;
+};

package/ThemeProvider/tokens.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.elevation = exports.themeFocusRing = exports.hasThemeFocusRing = void 0;
+exports.themePadding = exports.fieldPadding = exports.fieldBorder = exports.controlHeight = exports.FIELD_TEXT_SCALE = exports.CONTROL_BORDER = exports.BORDER_WIDTH = exports.CONTROL_LINE_HEIGHT = exports.elevation = exports.defaultElevation = exports.themeFocusRing = exports.hasThemeFocusRing = void 0;
 const react_1 = require("@emotion/react");
 /**
  * True if the theme sets the focus ring
@@ -26,7 +26,65 @@ const themeFocusRing = (theme, selector = '&:focus-visible') => {
 };
 exports.themeFocusRing = themeFocusRing;
 /**
- * The shadow of the level: the `elevation` of the theme, or the own shadow of the component
+ * The default shadows of the levels: the components of one level have the same shadow.
+ * In `px`, not in `em`: the tooltip and the toast have a smaller font, but the same shadow as the menu
  */
-const elevation = (theme, level, own) => { var _a; return (_a = theme.elevation[level]) !== null && _a !== void 0 ? _a : own; };
+const defaultElevation = (theme) => ({
+    popup: `0 8px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`,
+    surface: `0 8px 32px -13px ${theme.color.surface.darken(100).alpha(0.4).toString()}`,
+    control: `0 1px 3px ${theme.color.surface.darken(100).alpha(0.35).toString()}`,
+});
+exports.defaultElevation = defaultElevation;
+/**
+ * The shadow of the level: the `elevation` of the theme or the default shadow of the level.
+ * `own` replaces the default shadow, the shadow of the theme wins over both
+ */
+const elevation = (theme, level, own) => { var _a, _b; return (_b = (_a = theme.elevation[level]) !== null && _a !== void 0 ? _a : own) !== null && _b !== void 0 ? _b : (0, exports.defaultElevation)(theme)[level]; };
 exports.elevation = elevation;
+/**
+ * The height of the text line in the controls, in the `em` of the control. Set as a length,
+ * the line height is inherited as is by the text of any size: the label of the button and the value of the field
+ */
+exports.CONTROL_LINE_HEIGHT = '1.2em';
+/**
+ * The width of the borders of the components: `1px` at the font size of `16px`.
+ * In `em`: the border grows together with the font, and at the usual sizes the browser draws `1px`
+ */
+exports.BORDER_WIDTH = '0.0625em';
+/**
+ * The border of the buttons. The standard and the plain buttons have no border:
+ * their padding is larger by this width, so all the variants have the same size
+ */
+exports.CONTROL_BORDER = exports.BORDER_WIDTH;
+/**
+ * The size of the text in the fields (TextField, TextArea, Selectbox) relative to the control
+ */
+exports.FIELD_TEXT_SCALE = 0.9;
+/**
+ * The height of the one-line control: the icon buttons are squares of this size
+ */
+const controlHeight = (theme) => `calc(${exports.CONTROL_LINE_HEIGHT} + 2 * ${theme.padding.control.y} + 2 * ${exports.CONTROL_BORDER})`;
+exports.controlHeight = controlHeight;
+/**
+ * The border of the field: the border of the buttons in the `em` of the field with the font size `fontScale`
+ */
+const fieldBorder = (fontScale = 1) => `calc(${exports.CONTROL_BORDER} / ${fontScale})`;
+exports.fieldBorder = fieldBorder;
+/**
+ * The padding of the field with the `fieldBorder`, so the field has the height of the button.
+ * `fontScale` is the font size of the element relative to the control: the `em` of the padding are its own
+ */
+const fieldPadding = (theme, fontScale = 1) => (0, exports.themePadding)(theme, 'control', fontScale);
+exports.fieldPadding = fieldPadding;
+/**
+ * The padding of the class for the element with its own font size.
+ * `fontScale` is the font size of the element relative to the parent: the padding is in the `em` of the parent,
+ * so the header with a larger font has the same padding as the content under it
+ */
+const themePadding = (theme, kind, fontScale = 1) => {
+    const { y, x } = theme.padding[kind];
+    return fontScale === 1
+        ? { y, x }
+        : { y: `calc(${y} / ${fontScale})`, x: `calc(${x} / ${fontScale})` };
+};
+exports.themePadding = themePadding;

package/Toast/ToastCard.js

@@ -41,12 +41,15 @@ const StyledCard = styled_1.default.div `
   width: max-content;
   max-width: 100%;
   min-width: 14em;
-  padding: 0.75em 1em;
+  padding: ${({ theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return `calc(${y} * 0.75) ${x}`;
+}};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 1.5}em;
   border: 1px solid ${({ theme }) => theme.color.textPrimary.alpha(0.08).toString()};
   background-color: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
-  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup', `0 0.5em 1.5em rgba(0, 0, 0, ${theme.isDark ? 0.5 : 0.14})`)};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
   font-size: 0.875em;
   line-height: 1.4;
   pointer-events: auto;

package/Toast/ToastContainer.js

@@ -13,7 +13,6 @@ const ToastCloseButton_1 = __importDefault(require("./ToastCloseButton"));
 const ToastAction_1 = __importDefault(require("./ToastAction"));
 const ToastItem_1 = __importDefault(require("./ToastItem"));
 const store_1 = require("./store");
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const POSITIONS = [
     'top-left',
     'top-center',
@@ -90,7 +89,7 @@ const useWindowFocused = () => {
     return isFocused;
 };
 const ToastContainer = props => {
-    const { containerId, position = 'top-right', autoClose = 5000, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = (0, useThemeProps_1.default)('Toast', props);
+    const { containerId, position = 'top-right', autoClose = 5000, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = props;
     const theme = (0, react_2.useTheme)();
     const allToasts = react_1.default.useSyncExternalStore(store_1.toastStore.subscribe, store_1.toastStore.getSnapshot, store_1.toastStore.getServerSnapshot);
     const toasts = react_1.default.useMemo(() => allToasts.filter(item => item.containerId === containerId), [allToasts, containerId]);

package/Tooltip/TooltipContainer.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 appear = (0, react_2.keyframes) `
   from {
     opacity: 0;
@@ -38,6 +39,7 @@ const StyledContainer = styled_1.default.div `
   overflow-wrap: break-word;
   /* Inverted colors: dark on the light theme, light on the dark one */
   background-color: ${({ theme }) => theme.color.textPrimary.toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
   color: ${({ theme }) => theme.color.surface.toString()};
   animation: ${appear} 120ms ease-out;
 

package/Tooltip/index.js

@@ -8,7 +8,7 @@ const react_2 = require("@emotion/react");
 const Popper_1 = __importDefault(require("../Popper"));
 const TooltipContainer_1 = __importDefault(require("./TooltipContainer"));
 const TooltipArrow_1 = __importDefault(require("./TooltipArrow"));
-const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+const getElementRef_1 = __importDefault(require("../utils/getElementRef"));
 /**
  * Pointer types that have the hover. A tap on the touch screen fires `pointerenter` too,
  * the tooltip would flash on every tap
@@ -45,7 +45,7 @@ const setRef = (ref, value) => {
 const isEmptyTitle = (title) => title === null || typeof title === 'undefined' || title === false || title === '';
 const Tooltip = props => {
     var _a;
-    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, offset = 8, zIndex, id, overrides, } = (0, useThemeProps_1.default)('Tooltip', props);
+    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, offset = 8, zIndex, id, overrides, } = props;
     const theme = (0, react_2.useTheme)();
     const generatedId = `tooltip-${react_1.default.useId().replace(/:/g, '')}`;
     const tooltipId = id || generatedId;
@@ -137,8 +137,7 @@ const Tooltip = props => {
     }
     const child = children;
     const childProps = child.props;
-    // React 18 keeps the ref of the element outside of props
-    childRefRef.current = child.ref;
+    childRefRef.current = (0, getElementRef_1.default)(child);
     if (isEmpty) {
         return child;
     }

package/Typography/Base.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 /**
  * @deprecated - Use `Span` instead\
  * Example: `import Span from '@via-profit/ui-kit/Typography/Span'`
  */
 declare const Base: 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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export default Base;

package/Typography/Blockquote.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 declare const Blockquote: 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;
 }, import("react").DetailedHTMLProps<import("react").BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, {}>;
 export default Blockquote;

package/Typography/List.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
 export declare const Ul: 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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export declare const Ol: 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;
 }, import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {}>;
 export declare const Li: 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;
 }, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
 export default Ul;

package/Typography/Paragraph.d.ts

@@ -9,6 +9,6 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     /**
      * if `true` is passed, the margins will be removed
      */
-    readonly noMargin?: boolean | undefined;
+    readonly noMargin?: boolean;
 } & React.RefAttributes<HTMLParagraphElement>>;
 export default _default;

package/Typography/Paragraph.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/Typography/SectionDescription.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const SectionDescription: import("@emotion/styled").StyledComponent<import("react").HTMLAttributes<HTMLParagraphElement> & {
-    readonly noMargin?: boolean | undefined;
+    readonly noMargin?: boolean;
 } & import("react").RefAttributes<HTMLParagraphElement> & {
-    theme?: import("@emotion/react").Theme | undefined;
+    theme?: import("@emotion/react").Theme;
 }, {}, {}>;
 export default SectionDescription;

package/Typography/U.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 declare const U: 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;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export default U;

package/esm/Accordion/AccordionActions.js

@@ -11,11 +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 StyledActions = styled.div `
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem 0')};
+  padding: ${({ $noPadding, theme }) => $noPadding ? '0' : `${themePadding(theme, 'container').y} 0`};
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 `;

package/esm/Accordion/AccordionContainer.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { elevation } from '../ThemeProvider/tokens';
 const StyledAccordionContainer = styled.div `
   display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
   box-sizing: border-box;
@@ -21,20 +22,7 @@ const StyledAccordionContainer = styled.div `
   font-size: 1em;
   position: relative;
   margin-top: 1px;
-  box-shadow:
-    ${({ theme }) => theme.isDark
-    ? theme.color.backgroundSecondary.lighten(80).alpha(0.2).toString()
-    : theme.color.backgroundSecondary.lighten(50).alpha(0.2).toString()}
-      0px 2px 1px -1px,
-    ${({ theme }) => theme.isDark
-    ? theme.color.backgroundSecondary.lighten(80).alpha(0.14).toString()
-    : theme.color.backgroundSecondary.lighten(50).alpha(0.14).toString()}
-      0px 1px 1px 0px,
-    ${({ theme }) => theme.isDark
-    ? theme.color.backgroundSecondary.lighten(80).alpha(0.12).toString()
-    : theme.color.backgroundSecondary.lighten(50).alpha(0.12).toString()}
-      0px 1px 3px 0px;
-  ${({ theme }) => theme.elevation.surface && `box-shadow: ${theme.elevation.surface};`}
+  box-shadow: ${({ theme }) => elevation(theme, 'surface')};
 
   /*
    * Adjacent accordions form a group: the inner corners are square.

package/esm/Accordion/AccordionContent.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { themePadding } from '../ThemeProvider/tokens';
 /**
  * Animates the height with grid rows 0fr -> 1fr: no fixed max-height, so the tall content is not cut.
  * `visibility: hidden` of the collapsed content removes it from the tab order and the accessibility tree
@@ -28,7 +29,10 @@ const Clip = styled.div `
   overflow: hidden;
 `;
 const Wrapper = styled.div `
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem')};
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return $noPadding ? '0' : `${y} ${x}`;
+}};
 `;
 const AccordionContent = (props, ref) => {
     const { children, noPadding, isOpen } = props, nativeProps = __rest(props, ["children", "noPadding", "isOpen"]);

package/esm/Accordion/AccordionHeader.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 import Chevron from './Chevron';
-import { themeFocusRing } from '../ThemeProvider/tokens';
+import { themeFocusRing, themePadding } from '../ThemeProvider/tokens';
 const StyledHeader = styled.div `
   font-size: 1.3rem;
   font-weight: 600;
@@ -27,10 +27,14 @@ const HeaderButton = styled.button `
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  gap: 1rem;
+  gap: 1em;
   width: 100%;
   margin: 0;
-  padding: 1rem;
+  /* The text of the header is aligned with the content */
+  padding: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return `${y} ${x}`;
+}};
   border: 0;
   border-radius: inherit;
   background: none;

package/esm/Accordion/index.js

@@ -14,9 +14,8 @@ import Container from './AccordionContainer';
 import Header from './AccordionHeader';
 import Content from './AccordionContent';
 import Actions from './AccordionActions';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const Accordion = (props, ref) => {
-    const _a = useThemeProps('Accordion', props), { children, header, actions, isOpen, onOpen, overrides, noPadding, defaultOpened } = _a, nativeProps = __rest(_a, ["children", "header", "actions", "isOpen", "onOpen", "overrides", "noPadding", "defaultOpened"]);
+    const { children, header, actions, isOpen, onOpen, overrides, noPadding, defaultOpened } = props, nativeProps = __rest(props, ["children", "header", "actions", "isOpen", "onOpen", "overrides", "noPadding", "defaultOpened"]);
     const hasActions = typeof actions !== 'undefined' && actions !== null;
     const hasHeader = typeof header !== 'undefined' && header !== null;
     const [internalOpened, setInternalOpened] = React.useState(Boolean(defaultOpened));

package/esm/Autocomplete/AutocompleteItem.js

@@ -13,6 +13,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import MenuItem from '../Menu/MenuItem';
+import { BORDER_WIDTH } from '../ThemeProvider/tokens';
 const StyeldMenuItem = styled(MenuItem, {
     shouldForwardProp: p => !['variant'].includes(p),
 }) `
@@ -22,7 +23,7 @@ const StyeldMenuItem = styled(MenuItem, {
       border-color: ${theme.color.accentPrimary.toString()};
       color: ${theme.color.textPrimary.toString()};
       border-style: dashed;
-      border-width: 0.02em;
+      border-width: ${BORDER_WIDTH};
 
       :hover {
         background-color: ${theme.color.accentPrimary.toString()};

package/esm/Avatar/index.js

@@ -14,7 +14,6 @@ import styled from '@emotion/styled';
 import { useTheme, css } from '@emotion/react';
 import Color from '../Color';
 import AvatarBase from './AvatarBase';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const StyledAvatarBase = styled(AvatarBase) `
   position: relative;
   color: ${({ $color }) => $color.toString()};
@@ -50,7 +49,7 @@ const StyledAvatarBase = styled(AvatarBase) `
 }}
 `;
 const Avatar = (props, ref) => {
-    const _a = useThemeProps('Avatar', props), { children, color, onClick, onKeyDown, isOnline, size, src, variant = 'circular', alt, overrides } = _a, restProps = __rest(_a, ["children", "color", "onClick", "onKeyDown", "isOnline", "size", "src", "variant", "alt", "overrides"]);
+    const { children, color, onClick, onKeyDown, isOnline, size, src, variant = 'circular', alt, overrides } = props, restProps = __rest(props, ["children", "color", "onClick", "onKeyDown", "isOnline", "size", "src", "variant", "alt", "overrides"]);
     const theme = useTheme();
     const clickable = React.useMemo(() => typeof onClick === 'function', [onClick]);
     // A clickable avatar acts as a button, so it is activated by Enter and Space too

package/esm/Badge/BadgeStyled.js

@@ -14,7 +14,7 @@ import styled from '@emotion/styled';
 import { useTheme, css } from '@emotion/react';
 import Color from '../Color';
 import BadgeBase from './BadgeBase';
-import { themeFocusRing } from '../ThemeProvider/tokens';
+import { themeFocusRing, BORDER_WIDTH } from '../ThemeProvider/tokens';
 const parseColor = (color, fallback) => {
     try {
         return Color.fromString(color);
@@ -71,7 +71,7 @@ const getOutlinedColors = (color, theme) => {
  */
 const StyledBadge = styled(BadgeBase) `
   border-style: solid;
-  border-width: 0.14em;
+  border-width: ${BORDER_WIDTH};
   border-color: ${({ $background }) => $background.toString()};
 
   ${({ $variant, $color, $background, theme }) => $variant === 'outlined'

package/esm/Badge/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import BadgeStyled from './BadgeStyled';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 // One component for both variants, so changing the variant does not remount the badge
-const Badge = (props, ref) => (React.createElement(BadgeStyled, Object.assign({}, useThemeProps('Badge', props), { ref: ref })));
+const Badge = (props, ref) => (React.createElement(BadgeStyled, Object.assign({}, props, { ref: ref })));
 export default React.forwardRef(Badge);