@via-profit/ui-kit 0.5.0 → 0.7.0

package/esm/Modal/MessageBox/index.js

@@ -17,9 +17,8 @@ import Footer from './MessageBoxFooter';
 import Header from './MessageBoxHeader';
 import Overlay from '../BaseModal/ModalOverlay';
 import useDialogID from '../BaseModal/useDialogID';
-import useThemeProps from '../../ThemeProvider/useThemeProps';
 const MessageBox = props => {
-    const _a = useThemeProps('MessageBox', props), { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = _a, otherProps = __rest(_a, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
+    const { header, children, onRequestClose, overrides, okButtonLabel, isOpen } = props, otherProps = __rest(props, ["header", "children", "onRequestClose", "overrides", "okButtonLabel", "isOpen"]);
     const dialogID = useDialogID('dialog-message');
     const buttonRef = React.useRef(null);
     React.useEffect(() => {

package/esm/Pagination/PaginationContainer.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+/**
+ * The sizes of the buttons are in `em`, so the small variant only changes the font size.
+ * The height of the buttons is the height of the controls: `theme.padding.control`
+ */
+const StyledNav = styled.nav `
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5em;
+  font-size: ${({ $size }) => ($size === 'small' ? '0.8em' : '1em')};
+`;
+const PaginationContainer = (props, ref) => {
+    const { size = 'medium', children } = props, nativeProps = __rest(props, ["size", "children"]);
+    return (React.createElement(StyledNav, Object.assign({ "$size": size }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(PaginationContainer);

package/esm/Pagination/PaginationGap.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { controlHeight } from '../ThemeProvider/tokens';
+const StyledGap = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.6em;
+  height: ${({ theme }) => controlHeight(theme)};
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+  user-select: none;
+`;
+/**
+ * The skipped range of the pages
+ */
+const PaginationGap = (props, ref) => (React.createElement(StyledGap, Object.assign({ "aria-hidden": true }, props, { ref: ref }), "\u2026"));
+export default React.forwardRef(PaginationGap);

package/esm/Pagination/PaginationIcons.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import styled from '@emotion/styled';
+const Path = styled.path `
+  fill: currentColor;
+`;
+const createIcon = (path, displayName) => {
+    const Icon = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", "aria-hidden": true }, props, { ref: ref }),
+        React.createElement(Path, { d: path })));
+    Icon.displayName = displayName;
+    return React.forwardRef(Icon);
+};
+export const IconPrevious = createIcon('M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z', 'IconPrevious');
+export const IconNext = createIcon('M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z', 'IconNext');
+export const IconFirst = createIcon('M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M12.41,16.59L7.82,12L12.41,7.41L11,6L5,12L11,18L12.41,16.59Z', 'IconFirst');
+export const IconLast = createIcon('M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M11.59,7.41L16.18,12L11.59,16.59L13,18L19,12L13,6L11.59,7.41Z', 'IconLast');

package/esm/Pagination/PaginationItem.js

@@ -0,0 +1,54 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import Button from '../Button';
+import { controlHeight } from '../ThemeProvider/tokens';
+/**
+ * `&&` raises the specificity above the own styles of the button.
+ * The button is a square of the height of the controls, the numbers of several digits make it wider
+ */
+const StyledButton = styled(Button) `
+  && {
+    box-sizing: border-box;
+    min-width: ${({ theme }) => controlHeight(theme)};
+    height: ${({ theme }) => controlHeight(theme)};
+    padding: 0 0.6em;
+    justify-content: center;
+    font-variant-numeric: tabular-nums;
+  }
+
+  ${({ $soft, disabled, theme }) => $soft &&
+    css `
+      && {
+        background-color: ${theme.color.textPrimary.alpha(0.06).toString()};
+        color: ${disabled
+        ? theme.color.textPrimary.alpha(0.3).toString()
+        : theme.color.textPrimary.toString()};
+      }
+
+      &&:hover {
+        background-color: ${disabled
+        ? theme.color.textPrimary.alpha(0.06).toString()
+        : theme.color.textPrimary.alpha(0.1).toString()};
+      }
+    `}
+`;
+/**
+ * The button of the page or of the navigation (first, previous, next, last)
+ */
+const PaginationItem = (props, ref) => {
+    const { selected, soft, kind, page } = props, buttonProps = __rest(props, ["selected", "soft", "kind", "page"]);
+    return (React.createElement(StyledButton, Object.assign({ type: "button", "aria-current": selected ? 'page' : undefined, "data-kind": kind, "$soft": Boolean(soft) }, buttonProps, { ref: ref })));
+};
+export default React.forwardRef(PaginationItem);

package/esm/Pagination/getPaginationItems.js

@@ -0,0 +1,40 @@
+const range = (start, end) => Array.from({ length: Math.max(end - start + 1, 0) }, (_, index) => start + index);
+/**
+ * Returns the items of the pagination: the boundary pages, the current page with the siblings
+ * and the gaps instead of the skipped ranges. The pages start from 1.
+ * The count of the items does not depend on the current page, so the buttons do not jump
+ *
+ * @example getPaginationItems({ count: 10, page: 5, siblings: 1, boundaries: 1 })
+ * // 1 … 4 5 6 … 10
+ */
+const getPaginationItems = (params) => {
+    const { count, siblings, boundaries } = params;
+    const page = Math.min(Math.max(params.page, 1), Math.max(count, 1));
+    // boundaries on both sides + current + siblings + two gaps
+    if (count <= boundaries * 2 + siblings * 2 + 3) {
+        return range(1, count).map(item => ({ type: 'page', page: item }));
+    }
+    const startPages = range(1, boundaries);
+    const endPages = range(count - boundaries + 1, count);
+    // the window of the siblings keeps its size near the start and the end
+    const siblingsStart = Math.max(Math.min(page - siblings, count - boundaries - siblings * 2 - 1), boundaries + 2);
+    const siblingsEnd = Math.min(Math.max(page + siblings, boundaries + siblings * 2 + 2), count - boundaries - 1);
+    const items = startPages.map(item => ({ type: 'page', page: item }));
+    // a gap of one page is shown as the page itself
+    if (siblingsStart > boundaries + 2) {
+        items.push({ type: 'gap-start' });
+    }
+    else if (boundaries + 1 < count - boundaries) {
+        items.push({ type: 'page', page: boundaries + 1 });
+    }
+    range(siblingsStart, siblingsEnd).forEach(item => items.push({ type: 'page', page: item }));
+    if (siblingsEnd < count - boundaries - 1) {
+        items.push({ type: 'gap-end' });
+    }
+    else if (count - boundaries > boundaries) {
+        items.push({ type: 'page', page: count - boundaries });
+    }
+    endPages.forEach(item => items.push({ type: 'page', page: item }));
+    return items;
+};
+export default getPaginationItems;

package/esm/Pagination/index.js

@@ -0,0 +1,77 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import PaginationContainer from './PaginationContainer';
+import PaginationItem from './PaginationItem';
+import PaginationGap from './PaginationGap';
+import { IconFirst, IconLast, IconNext, IconPrevious } from './PaginationIcons';
+import usePagination from './usePagination';
+import getPaginationItems from './getPaginationItems';
+export * from './usePagination';
+export * from './PaginationContainer';
+export * from './PaginationItem';
+export * from './PaginationGap';
+export * from './PaginationIcons';
+export * from './getPaginationItems';
+export { usePagination, getPaginationItems };
+const defaultGetItemLabel = (kind, page, selected) => {
+    switch (kind) {
+        case 'first':
+            return 'Go to first page';
+        case 'previous':
+            return 'Go to previous page';
+        case 'next':
+            return 'Go to next page';
+        case 'last':
+            return 'Go to last page';
+        default:
+            return selected ? `Page ${page}` : `Go to page ${page}`;
+    }
+};
+const navigationIcons = {
+    first: React.createElement(IconFirst, null),
+    previous: React.createElement(IconPrevious, null),
+    next: React.createElement(IconNext, null),
+    last: React.createElement(IconLast, null),
+};
+const Pagination = (props, ref) => {
+    const { count, page, defaultPage, onChange, siblings, boundaries, showPrevNext, showFirstLast, disabled, variant = 'standard', color = 'primary', navigationVariant = 'outlined', navigationColor, size = 'medium', getItemLabel = defaultGetItemLabel, overrides, 'aria-label': ariaLabel = 'Pagination' } = props, nativeProps = __rest(props, ["count", "page", "defaultPage", "onChange", "siblings", "boundaries", "showPrevNext", "showFirstLast", "disabled", "variant", "color", "navigationVariant", "navigationColor", "size", "getItemLabel", "overrides", 'aria-label']);
+    const { items } = usePagination({
+        count,
+        page,
+        defaultPage,
+        onChange,
+        siblings,
+        boundaries,
+        showPrevNext,
+        showFirstLast,
+        disabled,
+    });
+    const overridesMap = React.useMemo(() => ({
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || PaginationContainer,
+        Item: (overrides === null || overrides === void 0 ? void 0 : overrides.Item) || PaginationItem,
+        Gap: (overrides === null || overrides === void 0 ? void 0 : overrides.Gap) || PaginationGap,
+    }), [overrides]);
+    const navColor = navigationColor !== null && navigationColor !== void 0 ? navigationColor : (navigationVariant === 'standard' ? color : 'default');
+    return (React.createElement(overridesMap.Container, Object.assign({ size: size, "aria-label": ariaLabel }, nativeProps, { ref: ref }), items.map(item => {
+        if (item.type === 'gap') {
+            return React.createElement(overridesMap.Gap, { key: `gap-${item.position}` });
+        }
+        const label = getItemLabel(item.type, item.page, item.selected);
+        if (item.type !== 'page') {
+            // The disabled navigation button gets the soft fill, as the not selected page
+            return (React.createElement(overridesMap.Item, { key: item.type, kind: item.type, page: item.page, variant: item.disabled ? 'standard' : navigationVariant, color: item.disabled ? 'default' : navColor, soft: item.disabled, disabled: item.disabled, "aria-label": label, onClick: item.onClick }, navigationIcons[item.type]));
+        }
+        return (React.createElement(overridesMap.Item, { key: item.page, kind: "page", page: item.page, selected: item.selected, variant: item.selected ? 'standard' : variant, color: item.selected ? color : 'default', soft: !item.selected && variant === 'standard', disabled: item.disabled, "aria-label": label, onClick: item.onClick }, item.page));
+    })));
+};
+export default React.forwardRef(Pagination);

package/esm/Pagination/usePagination.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import getPaginationItems from './getPaginationItems';
+/**
+ * The logic of the pagination without the markup: the current page, the buttons and the gaps.
+ * `<Pagination>` is built on it, use it for the pagination of your own design
+ */
+const usePagination = (params) => {
+    const { count, page: controlledPage, defaultPage = 1, onChange, siblings = 1, boundaries = 1, showPrevNext = true, showFirstLast = false, disabled = false, } = params;
+    const [uncontrolledPage, setUncontrolledPage] = React.useState(defaultPage);
+    const isControlled = typeof controlledPage !== 'undefined';
+    const pagesCount = Math.max(Math.floor(count) || 0, 1);
+    const currentPage = Math.min(Math.max(isControlled ? controlledPage : uncontrolledPage, 1), pagesCount);
+    const setPage = React.useCallback((target, event) => {
+        if (disabled || target === currentPage || target < 1 || target > pagesCount) {
+            return;
+        }
+        if (!isControlled) {
+            setUncontrolledPage(target);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(target, event);
+    }, [disabled, currentPage, pagesCount, isControlled, onChange]);
+    const items = React.useMemo(() => {
+        const button = (type, target) => {
+            const selected = type === 'page' && target === currentPage;
+            return {
+                type,
+                page: target,
+                selected,
+                disabled: disabled ||
+                    (type !== 'page' && (target < 1 || target > pagesCount || target === currentPage)),
+                onClick: event => setPage(target, event),
+            };
+        };
+        const pages = getPaginationItems({
+            count: pagesCount,
+            page: currentPage,
+            siblings,
+            boundaries,
+        }).map(item => item.type === 'page'
+            ? button('page', item.page)
+            : { type: 'gap', position: item.type === 'gap-start' ? 'start' : 'end' });
+        return [
+            ...(showFirstLast ? [button('first', 1)] : []),
+            ...(showPrevNext ? [button('previous', currentPage - 1)] : []),
+            ...pages,
+            ...(showPrevNext ? [button('next', currentPage + 1)] : []),
+            ...(showFirstLast ? [button('last', pagesCount)] : []),
+        ];
+    }, [
+        pagesCount,
+        currentPage,
+        siblings,
+        boundaries,
+        showPrevNext,
+        showFirstLast,
+        disabled,
+        setPage,
+    ]);
+    return { page: currentPage, count: pagesCount, items, setPage };
+};
+export default usePagination;

package/esm/Popper/Popper.js

@@ -13,11 +13,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Container from './PopperContainer';
 import { usePopper } from './usePopper';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 export * from './usePopper';
 export const PORTAL_ID = 'ui-kit-portal';
 const Popper = (props, ref) => {
-    const _a = useThemeProps('Popper', props), { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = _a, nativeProps = __rest(_a, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
+    const { isOpen, children, anchorElement, zIndex, overrides, anchorPos = 'auto', positionStrategy = 'fixed', viewportMargin = 30, autoFlip = false, alternativePlacements, offset = 0, onAnchorPosChanged } = props, nativeProps = __rest(props, ["isOpen", "children", "anchorElement", "zIndex", "overrides", "anchorPos", "positionStrategy", "viewportMargin", "autoFlip", "alternativePlacements", "offset", "onAnchorPosChanged"]);
     const [domLoaded, setDomLoaded] = React.useState(false);
     const { actualPlacement, style, popperRef, isVisible } = usePopper({
         anchorElement,

package/esm/Radio/RadioBox.js

@@ -13,7 +13,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 import useRadioColor from './useRadioColor';
-import { themeFocusRing } from '../ThemeProvider/tokens';
+import { themeFocusRing, BORDER_WIDTH } from '../ThemeProvider/tokens';
 const Root = styled.span `
   position: relative;
   display: inline-flex;
@@ -59,7 +59,7 @@ const Circle = styled.span `
   width: 100%;
   height: 100%;
   border-radius: 50%;
-  border-width: 0.1em;
+  border-width: ${BORDER_WIDTH};
   border-style: solid;
   background-color: ${({ theme }) => theme.color.surface.toString()};
   transition: border-color 150ms ease-out;

package/esm/Radio/index.js

@@ -14,11 +14,10 @@ import Container from './RadioContainer';
 import Box from './RadioBox';
 import TextWrapper from './RadioTextWrapper';
 import RadioGroupContext from '../RadioGroup/RadioGroupContext';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const Radio = (props, ref) => {
     var _a;
     const group = React.useContext(RadioGroupContext);
-    const _b = useThemeProps('Radio', props), { children, value, checked, defaultChecked, onChange, disabled, color, labelPosition, error, name, required, overrides, className, style } = _b, nativeProps = __rest(_b, ["children", "value", "checked", "defaultChecked", "onChange", "disabled", "color", "labelPosition", "error", "name", "required", "overrides", "className", "style"]);
+    const { children, value, checked, defaultChecked, onChange, disabled, color, labelPosition, error, name, required, overrides, className, style } = props, nativeProps = __rest(props, ["children", "value", "checked", "defaultChecked", "onChange", "disabled", "color", "labelPosition", "error", "name", "required", "overrides", "className", "style"]);
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
         Box: (overrides === null || overrides === void 0 ? void 0 : overrides.Box) || Box,

package/esm/RadioGroup/index.js

@@ -16,9 +16,8 @@ import Items from './RadioGroupItems';
 import Asterisk from './RadioGroupAsterisk';
 import ErrorText from './RadioGroupErrorText';
 import RadioGroupContext from './RadioGroupContext';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const RadioGroup = (props, ref) => {
-    const _a = useThemeProps('RadioGroup', props), { children, name: inputName, value, defaultValue, onChange, label, orientation = 'vertical', color, disabled, required, requiredAsterisk, error, errorText, overrides } = _a, nativeProps = __rest(_a, ["children", "name", "value", "defaultValue", "onChange", "label", "orientation", "color", "disabled", "required", "requiredAsterisk", "error", "errorText", "overrides"]);
+    const { children, name: inputName, value, defaultValue, onChange, label, orientation = 'vertical', color, disabled, required, requiredAsterisk, error, errorText, overrides } = props, nativeProps = __rest(props, ["children", "name", "value", "defaultValue", "onChange", "label", "orientation", "color", "disabled", "required", "requiredAsterisk", "error", "errorText", "overrides"]);
     const id = React.useId().replace(/:/g, '');
     const name = inputName !== null && inputName !== void 0 ? inputName : `radio-group-${id}`;
     const legendID = `radio-group-${id}-legend`;

package/esm/Selectbox/SelectboxButton.js

@@ -14,13 +14,19 @@ import styled from '@emotion/styled';
 import Button from '../Button';
 import ButtonTextWrapper from '../Button/ButtonTextWrapper';
 import { css } from '@emotion/react';
+import { fieldPadding, CONTROL_LINE_HEIGHT, FIELD_TEXT_SCALE, fieldBorder, } from '../ThemeProvider/tokens';
 const StyledSelectboxButton = styled(Button) `
   flex: 1;
-  padding: 1em 1.2em;
+  padding: ${({ theme }) => {
+    const { y, x } = fieldPadding(theme, FIELD_TEXT_SCALE);
+    return `${y} ${x}`;
+}};
   font-size: 1em;
+  /* The line of the control: the selectbox has the height of the button */
+  line-height: calc(${CONTROL_LINE_HEIGHT} / ${FIELD_TEXT_SCALE});
   background: none;
   width: 100%;
-  border-width: 1px;
+  border-width: ${fieldBorder(FIELD_TEXT_SCALE)};
   border-style: solid;
   box-shadow: none;
   &:hover {
@@ -38,7 +44,6 @@ const StyledSelectboxButton = styled(Button) `
       }
     `}
   transition: none;
-  
 `;
 // The value has the size of the text in the fields, so the selectbox has the height of the TextField
 const StyledButtonTextWrapper = styled(ButtonTextWrapper) `

package/esm/Selectbox/SelectboxButtonWrapper.js

@@ -11,9 +11,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import * as React from 'react';
 import styled from '@emotion/styled';
+import { FIELD_TEXT_SCALE } from '../ThemeProvider/tokens';
 const Wrapper = styled.div `
   min-width: 16em;
-  font-size: 0.9em;
+  font-size: ${FIELD_TEXT_SCALE}em;
   text-align: left;
   max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '16em')};
   display: flex;
@@ -24,8 +25,6 @@ const Wrapper = styled.div `
   background-color: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
   transition: all 180ms ease-out 0s;
-
-
 `;
 const SelectboxButtonWrapper = (props, ref) => {
     const { fullWidth, children, error } = props, nativeProps = __rest(props, ["fullWidth", "children", "error"]);

package/esm/Selectbox/index.js

@@ -21,7 +21,6 @@ import ErrorText from '../TextField/TextFieldErrorText';
 import ButtonWrapper from './SelectboxButtonWrapper';
 import Container from './SelectboxContainer';
 import SelectboxMenu from './SelectboxMenu';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 export { SelectboxItem };
 const DEFAULT_OVERRIDES = {
     Button,
@@ -33,7 +32,7 @@ const DEFAULT_OVERRIDES = {
     Container,
 };
 const Selectbox = React.forwardRef((props, ref) => {
-    const _a = useThemeProps('Selectbox', props), { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, renderValue, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = _a, nativeButtonProps = __rest(_a, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "renderValue", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'bottom-fill', fullWidth = false, children, onChange, selectedItemToString, renderValue, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, requiredAsterisk, error, errorText, notSetLabel = 'Not set', autoFlip = true, positionStrategy } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "renderValue", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "requiredAsterisk", "error", "errorText", "notSetLabel", "autoFlip", "positionStrategy"]);
     const menuRef = React.useRef(null);
     const [anchorElement, setAnchorElement] = React.useState(null);
     const overridesMap = React.useMemo(() => (Object.assign(Object.assign({}, DEFAULT_OVERRIDES), overrides)), [overrides]);

package/esm/Slider/index.js

@@ -17,9 +17,8 @@ import Thumb from './SliderThumb';
 import Mark from './SliderMark';
 import MarkLabel from './SliderMarkLabel';
 import { clamp, snapToStep, valueToPercent } from './utils';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const Slider = (props, ref) => {
-    const _a = useThemeProps('Slider', props), { value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step = 1, marks = false, orientation = 'horizontal', disabled = false, color, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, getAriaLabel, getAriaValueText, overrides, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture } = _a, nativeProps = __rest(_a, ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "orientation", "disabled", "color", "name", 'aria-label', 'aria-labelledby', "getAriaLabel", "getAriaValueText", "overrides", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel", "onLostPointerCapture"]);
+    const { value, defaultValue, onChange, onChangeCommitted, min = 0, max = 100, step = 1, marks = false, orientation = 'horizontal', disabled = false, color, name, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, getAriaLabel, getAriaValueText, overrides, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture } = props, nativeProps = __rest(props, ["value", "defaultValue", "onChange", "onChangeCommitted", "min", "max", "step", "marks", "orientation", "disabled", "color", "name", 'aria-label', 'aria-labelledby', "getAriaLabel", "getAriaValueText", "overrides", "onPointerDown", "onPointerMove", "onPointerUp", "onPointerCancel", "onLostPointerCapture"]);
     const overridesMap = React.useMemo(() => ({
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
         Rail: (overrides === null || overrides === void 0 ? void 0 : overrides.Rail) || Rail,

package/esm/Stack/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 StyledStack = styled.div `
   display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
   flex-direction: ${({ $direction }) => $direction};
@@ -21,13 +25,14 @@ const StyledStack = styled.div `
   gap: ${({ theme, $gap }) => resolveSpacing(theme, $gap)};
   /* A flex child shrinks below its content only with min-width: 0 */
   min-width: 0;
+  ${({ $isList }) => ($isList ? 'margin: 0; padding: 0; list-style: none;' : '')}
 `;
 /**
  * The elements in a column or in a row with the same gap between them.
  * The children stay the plain elements: no wrappers for the items
  */
 const Stack = (props, ref) => {
-    const { children, direction = 'column', gap = 'md', align, justify, wrap = false, inline = false } = props, nativeProps = __rest(props, ["children", "direction", "gap", "align", "justify", "wrap", "inline"]);
-    return (React.createElement(StyledStack, Object.assign({}, nativeProps, { "$direction": direction, "$gap": gap, "$align": align, "$justify": justify, "$wrap": wrap, "$inline": inline, ref: ref }), children));
+    const { children, direction = 'column', gap = 'md', align, justify, wrap = false, inline = false, as } = props, nativeProps = __rest(props, ["children", "direction", "gap", "align", "justify", "wrap", "inline", "as"]);
+    return (React.createElement(StyledStack, Object.assign({}, nativeProps, { "$direction": direction, "$gap": gap, "$align": align, "$justify": justify, "$wrap": wrap, "$inline": inline, "$isList": Boolean(as && LIST_TAGS.includes(as)), as: as, ref: ref }), children));
 };
 export default React.forwardRef(Stack);

package/esm/Surface/SurfaceContainer.js

@@ -19,7 +19,7 @@ const StyledSurfaceContainer = styled.div `
   flex-direction: column;
   background: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
-  box-shadow: ${({ theme }) => elevation(theme, 'surface', `0 0.5em 2em -0.8em ${theme.color.surface.darken(100).alpha(0.4).toString()}`)};
+  box-shadow: ${({ theme }) => elevation(theme, 'surface')};
   border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
   font-size: 1em;
 

package/esm/Surface/SurfaceContent.js

@@ -12,20 +12,27 @@ 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 StyledContent = styled.div `
   flex: 1;
-  ${({ $noPadding }) => (typeof $noPadding === 'undefined' || $noPadding === false) &&
-    css `
-      padding: 1.4rem 1rem 1rem 1rem;
-    `}
+  ${({ $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return (!$noPadding &&
+        css `
+        padding: calc(${y} * 1.4) ${x} ${y} ${x};
+      `);
+}}
 
-  ${({ $rounded, $noPadding }) => $rounded &&
-    css `
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: ${$noPadding ? '0' : '1rem'};
-    `}
+  ${({ $rounded, $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container');
+    return ($rounded &&
+        css `
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: ${$noPadding ? '0' : `${y} ${x}`};
+      `);
+}}
 `;
 const SurfaceContent = (props, ref) => {
     const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);

package/esm/Surface/SurfaceFooter.js

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

package/esm/Surface/SurfaceHeader.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 StyledHeader = styled.div `
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem 1rem 0 1rem')};
-  font-size: 1.3rem;
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container', 1.3);
+    return $noPadding ? '0' : `${y} ${x} 0 ${x}`;
+}};
+  font-size: 1.3em;
   font-weight: 600;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;

package/esm/Surface/SurfaceSubheader.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 StyledHeader = styled.div `
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '0.5em 1rem 0 1rem')};
-  font-size: 0.9rem;
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = themePadding(theme, 'container', 0.9);
+    return $noPadding ? '0' : `calc(${y} / 2) ${x} 0 ${x}`;
+}};
+  font-size: 0.9em;
   font-weight: 200;
   color: ${({ theme }) => theme.color.textSecondary.toString()};
 `;

package/esm/Surface/index.js

@@ -15,9 +15,8 @@ import Header from './SurfaceHeader';
 import Subheader from './SurfaceSubheader';
 import Content from './SurfaceContent';
 import Footer from './SurfaceFooter';
-import useThemeProps from '../ThemeProvider/useThemeProps';
 const Surface = (props, ref) => {
-    const _a = useThemeProps('Surface', props), { children, header, subheader, footer, inline, noPadding, rounded, overrides } = _a, nativeProps = __rest(_a, ["children", "header", "subheader", "footer", "inline", "noPadding", "rounded", "overrides"]);
+    const { children, header, subheader, footer, inline, noPadding, rounded, overrides } = props, nativeProps = __rest(props, ["children", "header", "subheader", "footer", "inline", "noPadding", "rounded", "overrides"]);
     const hasFooter = typeof footer !== 'undefined' && footer !== null;
     const hasHeader = typeof header !== 'undefined' && header !== null;
     const hasSubheader = typeof subheader !== 'undefined' && subheader !== null;