@via-profit/ui-kit 0.4.0 → 0.6.0

package/Calendar/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 __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };

package/Checkbox/CheckboxAsterisk.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/Checkbox/CheckboxBox.d.ts

@@ -13,10 +13,10 @@ declare const _default: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttr
     /**
      * Shows the dash instead of the check mark (e.g. «select all» when only some items are selected)
      */
-    readonly indeterminate?: boolean | undefined;
+    readonly indeterminate?: boolean;
     /**
      * Paints the border with the error color
      */
-    readonly error?: boolean | undefined;
+    readonly error?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/Checkbox/CheckboxBox.js

@@ -18,6 +18,7 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const useCheckboxColor_1 = __importDefault(require("./useCheckboxColor"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const Root = styled_1.default.span `
   position: relative;
   display: inline-flex;
@@ -41,13 +42,14 @@ const StyledInput = styled_1.default.input `
     outline: 0.14em solid ${({ theme }) => theme.color.accentPrimary.toString()};
     outline-offset: 0.14em;
   }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme, '&:focus-visible + [data-checkbox-square]')}
 `;
 const Square = styled_1.default.span `
   box-sizing: border-box;
   display: flex;
   width: 100%;
   height: 100%;
-  border-width: 0.1em;
+  border-width: ${tokens_1.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/Checkbox/CheckboxContainer.d.ts

@@ -17,11 +17,11 @@ declare const _default: React.ForwardRefExoticComponent<React.LabelHTMLAttribute
      * Position of the label relative to the checkbox
      * Default: `end`
      */
-    readonly labelPosition?: CheckboxLabelPosition | undefined;
+    readonly labelPosition?: CheckboxLabelPosition;
     /**
      * If `true` the checkbox state can not be changed
      * Default: false;
      */
-    readonly disabled?: boolean | undefined;
+    readonly disabled?: boolean;
 } & React.RefAttributes<HTMLLabelElement>>;
 export default _default;

package/Checkbox/CheckboxErrorText.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/Checkbox/index.d.ts

@@ -94,41 +94,41 @@ declare const _default: React.ForwardRefExoticComponent<Omit<CheckboxBoxProps, "
      * The state of the controlled checkbox. Pass it together with `onChange`
      * Default: undefined
      */
-    readonly checked?: boolean | undefined;
+    readonly checked?: boolean;
     /**
      * The initial state of the uncontrolled checkbox
      * Default: false
      */
-    readonly defaultChecked?: boolean | undefined;
+    readonly defaultChecked?: boolean;
     /**
      * Called when the user toggles the checkbox. The new value is `event.currentTarget.checked`
      */
-    readonly onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined;
+    readonly onChange?: React.ChangeEventHandler<HTMLInputElement>;
     /**
      * Shows the dash instead of the check mark, e.g. «select all» when only some items are selected.\
      * Only the look changes: `checked` keeps its value
      * Default: false
      */
-    readonly indeterminate?: boolean | undefined;
+    readonly indeterminate?: boolean;
     /**
      * If `true` the checkbox state can not be changed
      * Default: false
      */
-    readonly disabled?: boolean | undefined;
+    readonly disabled?: boolean;
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      * Default: `default`
      */
-    readonly color?: string | undefined;
+    readonly color?: "default" | "primary" | "secondary" | string;
     /**
      * Position of the label relative to the checkbox
      * Default: `end`
      */
-    readonly labelPosition?: CheckboxLabelPosition | undefined;
+    readonly labelPosition?: CheckboxLabelPosition;
     /**
      * If true then `errorText` value will be displayed under the checkbox
      */
-    readonly error?: boolean | undefined;
+    readonly error?: boolean;
     /**
      * Text or ReactNode to show in the error element.\
      * Will be displayed only if `error` property is true
@@ -138,7 +138,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<CheckboxBoxProps, "
      * If is true then the asterisk will be displayed in label\
      * If is ReactNode then ReactNode will be displayed in label
      */
-    readonly requiredAsterisk?: React.ReactNode;
-    readonly overrides?: CheckboxOverrides | undefined;
+    readonly requiredAsterisk?: boolean | React.ReactNode;
+    readonly overrides?: CheckboxOverrides;
 } & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/Checkbox/useCheckboxColor.d.ts

@@ -2,5 +2,5 @@ import Color from '../Color';
 /**
  * Resolves the `color` property of the Checkbox to the Color instance
  */
-declare const useCheckboxColor: (color: 'default' | 'primary' | 'secondary' | string | undefined) => Color;
+declare const useCheckboxColor: (color: "default" | "primary" | "secondary" | string | undefined) => Color;
 export default useCheckboxColor;

package/ClickOutside/index.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mouseEventMap = void 0;
 const react_1 = __importDefault(require("react"));
+const getElementRef_1 = __importDefault(require("../utils/getElementRef"));
 exports.mouseEventMap = {
     onClick: 'click',
     onMouseDown: 'mousedown',
@@ -43,7 +44,7 @@ const ClickOutside = props => {
         };
     }, [onOutsideClick, mouseEvent]);
     // Keep the child's own ref working alongside ours
-    const childRef = children.ref;
+    const childRef = (0, getElementRef_1.default)(children);
     const setRef = react_1.default.useCallback((el) => {
         ref.current = el;
         if (typeof childRef === 'function') {
@@ -53,6 +54,8 @@ const ClickOutside = props => {
             childRef.current = el;
         }
     }, [childRef]);
-    return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(children, { ref: setRef }));
+    return (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.cloneElement(children, {
+        ref: setRef,
+    })));
 };
 exports.default = ClickOutside;

package/DatePicker/index.d.ts

@@ -97,7 +97,7 @@ export type DatePickerProps = Omit<TextFieldProps, 'value' | 'onChange' | 'overr
     /**
      * Custom footer elements
      */
-    readonly footer?: JSX.Element;
+    readonly footer?: React.JSX.Element;
     /**
      * Overridable components map
      */

package/ErrorBoundary/RenderError.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 type RenderErrorProps = {
     readonly error?: Error | unknown;
+    readonly title?: React.ReactNode;
+    readonly description?: React.ReactNode;
 };
 declare const RenderError: React.FC<RenderErrorProps>;
 export default RenderError;

package/ErrorBoundary/RenderError.js

@@ -15,19 +15,28 @@ 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 };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
-const react_intl_1 = require("react-intl");
 const styled_1 = __importDefault(require("@emotion/styled"));
 const createTheme_1 = __importDefault(require("../ThemeProvider/createTheme"));
 const H1_1 = __importDefault(require("../Typography/H1"));
@@ -46,7 +55,7 @@ const StyledHeading = (0, styled_1.default)(H1_1.default) `
   margin-top: 0;
 `;
 const RenderError = props => {
-    const { error } = props;
+    const { error, title = 'Something went wrong', description = 'Please let the developers know', } = props;
     const isDev = process.env.NODE_ENV === 'development';
     const { name, message, stack } = React.useMemo(() => {
         let name = '';
@@ -72,9 +81,7 @@ const RenderError = props => {
                 React.createElement(StyledHeading, null, name),
                 React.createElement(Strong_1.default, null, message),
                 stack !== '' && React.createElement(Paragraph_1.default, null, stack))) : (React.createElement(React.Fragment, null,
-                React.createElement(StyledHeading, null,
-                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u0440\u043E\u0438\u0437\u043E\u0448\u043B\u0430 \u043E\u0448\u0438\u0431\u043A\u0430" })),
-                React.createElement(Paragraph_1.default, null,
-                    React.createElement(react_intl_1.FormattedMessage, { defaultMessage: "\u041F\u043E\u0436\u0430\u043B\u0443\u0439\u0441\u0442\u0430, \u0441\u043E\u043E\u0431\u0449\u0438\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043E\u0442\u0447\u0438\u043A\u0430\u043C" }))))))));
+                React.createElement(StyledHeading, null, title),
+                React.createElement(Paragraph_1.default, null, description)))))));
 };
 exports.default = RenderError;

package/ErrorBoundary/index.d.ts

@@ -1,15 +1,28 @@
 import React from 'react';
 type State = {
     readonly error: Error | null;
-    readonly errorInfo: React.ErrorInfo | null;
 };
-type Props = {
+export type ErrorBoundaryProps = {
     readonly children: React.ReactNode;
-    readonly fallback?: React.ReactNode | undefined | null;
+    /**
+     * What is shown instead of the children after an error. Without it the error message is shown:
+     * the name, the message and the stack in the development mode, `title` and `description` in production
+     */
+    readonly fallback?: React.ReactNode;
+    /**
+     * The heading of the error message in production
+     * Default: `Something went wrong`
+     */
+    readonly title?: React.ReactNode;
+    /**
+     * The text of the error message in production
+     * Default: `Please let the developers know`
+     */
+    readonly description?: React.ReactNode;
 };
-declare class ErrorBoundary extends React.Component<Props, State> {
-    constructor(props: Props);
-    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
-    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+declare class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): State;
+    render(): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 }
 export default ErrorBoundary;

package/ErrorBoundary/index.js

@@ -10,20 +10,19 @@ class ErrorBoundary extends react_1.default.Component {
         super(props);
         this.state = {
             error: null,
-            errorInfo: null,
         };
     }
-    componentDidCatch(error, errorInfo) {
-        this.setState({
-            error,
-            errorInfo,
-        });
+    static getDerivedStateFromError(error) {
+        return { error };
     }
     render() {
         const { error } = this.state;
-        const { children } = this.props;
+        const { children, fallback, title, description } = this.props;
         if (error) {
-            return react_1.default.createElement(RenderError_1.default, { error: error });
+            if (typeof fallback !== 'undefined') {
+                return fallback;
+            }
+            return react_1.default.createElement(RenderError_1.default, { error: error, title: title, description: description });
         }
         return children;
     }

package/Grid/index.d.ts

@@ -28,6 +28,12 @@ export type GridProps = React.HTMLAttributes<HTMLDivElement> & {
      * **Default:** `stretch`
      */
     readonly align?: React.CSSProperties['alignItems'];
+    /**
+     * The element of the grid: `ul`, `ol`, `dl`, `nav`, `section` and others.
+     * The lists lose the default margins and markers\
+     * **Default:** `div`
+     */
+    readonly as?: React.ElementType;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
@@ -35,26 +41,32 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * On a narrow screen the columns become one column by themselves, without breakpoints.\
      * Wins over `columns`
      */
-    readonly minColumnWidth?: string | undefined;
+    readonly minColumnWidth?: string;
     /**
      * A number — that many equal columns, a string — the `grid-template-columns` value
      * (e.g. `'2fr 1fr'` or `'auto 1fr'`)\
      * **Default:** `1`
      */
-    readonly columns?: string | number | undefined;
+    readonly columns?: number | string;
     /**
      * The gap between the cells: a step of the theme spacing scale or any CSS length\
      * **Default:** `md`
      */
-    readonly gap?: Spacing | undefined;
+    readonly gap?: Spacing;
     /**
      * The gap between the rows, if it differs from `gap`
      */
-    readonly rowGap?: Spacing | undefined;
+    readonly rowGap?: Spacing;
     /**
      * The vertical alignment of the cells in a row (`align-items`)\
      * **Default:** `stretch`
      */
-    readonly align?: import("csstype").Property.AlignItems | undefined;
+    readonly align?: React.CSSProperties["alignItems"];
+    /**
+     * The element of the grid: `ul`, `ol`, `dl`, `nav`, `section` and others.
+     * The lists lose the default margins and markers\
+     * **Default:** `div`
+     */
+    readonly as?: React.ElementType;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Grid/index.js

@@ -17,6 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const spacing_1 = require("../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_1.default.div `
   display: grid;
   grid-template-columns: ${({ $template }) => $template};
@@ -24,6 +28,7 @@ const StyledGrid = styled_1.default.div `
   ${({ theme, $rowGap }) => typeof $rowGap !== 'undefined' ? `row-gap: ${(0, spacing_1.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) {
@@ -37,7 +42,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_1.default.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_1.default.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));
 };
 exports.default = react_1.default.forwardRef(Grid);

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 };
 };
@@ -55,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

@@ -18,6 +18,7 @@ exports.MenuList = 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 StyledMenuList = styled_1.default.div `
   display: flex;
   flex-direction: column;
@@ -25,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: 0 0.5em 1.5em ${({ theme }) => theme.color.surface.darken(50).alpha(0.6).toString()};
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'popup')};
 
   ${({ $maxWidth }) => {
     if (typeof $maxWidth === 'number') {