@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/Slider/SliderMark.js

@@ -0,0 +1,35 @@
+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 { useTheme } from '@emotion/react';
+const Mark = styled.span `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.25em;
+  height: 0.25em;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+`;
+const SliderMark = (props, ref) => {
+    const { children, orientation, position, inTrack, style } = props, nativeProps = __rest(props, ["children", "orientation", "position", "inTrack", "style"]);
+    const theme = useTheme();
+    // On the track the mark is light, on the rail it repeats the rail color, so it stays visible on both
+    const backgroundColor = inTrack
+        ? theme.color.surface.alpha(0.8).toString()
+        : theme.color.textPrimary.alpha(0.3).toString();
+    return (React.createElement(Mark, Object.assign({ "aria-hidden": true }, nativeProps, { style: Object.assign(Object.assign({ backgroundColor }, (orientation === 'vertical'
+            ? { top: 'auto', bottom: `${position}%`, transform: 'translate(-50%, 50%)' }
+            : { left: `${position}%` })), style), ref: ref }), children));
+};
+export default React.forwardRef(SliderMark);

package/esm/Slider/SliderMarkLabel.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';
+const MarkLabel = styled.span `
+  position: absolute;
+  font-size: 0.8em;
+  line-height: 1;
+  white-space: nowrap;
+  color: ${({ theme, $inTrack }) => $inTrack ? theme.color.textPrimary.toString() : theme.color.textSecondary.toString()};
+`;
+const SliderMarkLabel = (props, ref) => {
+    const { children, orientation, position, inTrack, style } = props, nativeProps = __rest(props, ["children", "orientation", "position", "inTrack", "style"]);
+    // Below the rail for the horizontal slider, to the right of it for the vertical one
+    const placement = orientation === 'vertical'
+        ? { left: '2.4em', bottom: `${position}%`, transform: 'translateY(50%)' }
+        : { top: '2.2em', left: `${position}%`, transform: 'translateX(-50%)' };
+    return (React.createElement(MarkLabel, Object.assign({ "aria-hidden": true }, nativeProps, { style: Object.assign(Object.assign({}, placement), style), "$inTrack": inTrack, ref: ref }), children));
+};
+export default React.forwardRef(SliderMarkLabel);

package/esm/Slider/SliderRail.js

@@ -0,0 +1,44 @@
+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, useTheme } from '@emotion/react';
+import useSliderColor from './useSliderColor';
+const Rail = styled.span `
+  position: absolute;
+  display: block;
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? css `
+          top: 0;
+          bottom: 0;
+          left: 50%;
+          width: 0.25em;
+          margin-left: -0.125em;
+        `
+    : css `
+          left: 0;
+          right: 0;
+          top: 50%;
+          height: 0.25em;
+          margin-top: -0.125em;
+        `}
+  border-radius: 1em;
+  background-color: ${({ $color }) => $color.toString()};
+  opacity: 0.3;
+`;
+const SliderRail = (props, ref) => {
+    const { children, color, orientation, disabled } = props, nativeProps = __rest(props, ["children", "color", "orientation", "disabled"]);
+    const theme = useTheme();
+    const $color = useSliderColor(color);
+    return (React.createElement(Rail, Object.assign({}, nativeProps, { "$color": disabled ? theme.color.textPrimary.alpha(0.5) : $color, "$orientation": orientation, ref: ref }), children));
+};
+export default React.forwardRef(SliderRail);

package/esm/Slider/SliderThumb.js

@@ -0,0 +1,66 @@
+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, useTheme } from '@emotion/react';
+import useSliderColor from './useSliderColor';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+const Thumb = styled.span `
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 1.15em;
+  height: 1.15em;
+  border-radius: 50%;
+  background-color: ${({ $color }) => $color.toString()};
+  outline: 0;
+  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? css `
+          left: 50%;
+          transform: translate(-50%, 50%);
+        `
+    : css `
+          top: 50%;
+          transform: translate(-50%, -50%);
+        `}
+  ${({ $color, $active, $disabled }) => !$disabled &&
+    css `
+      &:hover {
+        box-shadow: 0 0 0 0.45em ${$color.alpha(0.16).toString()};
+      }
+      &:focus-visible {
+        box-shadow: 0 0 0 0.6em ${$color.alpha(0.24).toString()};
+        /* The halo is invisible in the forced colors mode, the outline is shown instead */
+        outline: 2px solid transparent;
+      }
+      ${$active &&
+        css `
+        &,
+        &:hover,
+        &:focus-visible {
+          box-shadow: 0 0 0 0.7em ${$color.alpha(0.16).toString()};
+        }
+      `}
+    `}
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const SliderThumb = (props, ref) => {
+    const { children, color, orientation, disabled, position, active, index, style } = props, nativeProps = __rest(props, ["children", "color", "orientation", "disabled", "position", "active", "index", "style"]);
+    const theme = useTheme();
+    const $color = useSliderColor(color);
+    return (React.createElement(Thumb, Object.assign({ "data-slider-thumb": index }, nativeProps, { style: Object.assign({ [orientation === 'vertical' ? 'bottom' : 'left']: `${position}%` }, style), "$color": disabled ? theme.color.textPrimary.mix(theme.color.surface, 0.55) : $color, "$orientation": orientation, "$active": active, "$disabled": disabled, ref: ref }), children));
+};
+export default React.forwardRef(SliderThumb);

package/esm/Slider/SliderTrack.js

@@ -0,0 +1,43 @@
+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, useTheme } from '@emotion/react';
+import useSliderColor from './useSliderColor';
+const Track = styled.span `
+  position: absolute;
+  display: block;
+  border-radius: 1em;
+  background-color: ${({ $color }) => $color.toString()};
+  ${({ $orientation }) => $orientation === 'vertical'
+    ? css `
+          left: 50%;
+          width: 0.25em;
+          margin-left: -0.125em;
+        `
+    : css `
+          top: 50%;
+          height: 0.25em;
+          margin-top: -0.125em;
+        `}
+`;
+const SliderTrack = (props, ref) => {
+    const { children, color, orientation, disabled, start, end, style } = props, nativeProps = __rest(props, ["children", "color", "orientation", "disabled", "start", "end", "style"]);
+    const theme = useTheme();
+    const $color = useSliderColor(color);
+    // The position changes on every pointer move: an inline style, not a new emotion class per value
+    const position = orientation === 'vertical'
+        ? { bottom: `${start}%`, height: `${end - start}%` }
+        : { left: `${start}%`, width: `${end - start}%` };
+    return (React.createElement(Track, Object.assign({}, nativeProps, { style: Object.assign(Object.assign({}, position), style), "$color": disabled ? theme.color.textPrimary.mix(theme.color.surface, 0.55) : $color, "$orientation": orientation, ref: ref }), children));
+};
+export default React.forwardRef(SliderTrack);

package/esm/Slider/index.js

@@ -0,0 +1,245 @@
+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 Container from './SliderContainer';
+import Rail from './SliderRail';
+import Track from './SliderTrack';
+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 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,
+        Track: (overrides === null || overrides === void 0 ? void 0 : overrides.Track) || Track,
+        Thumb: (overrides === null || overrides === void 0 ? void 0 : overrides.Thumb) || Thumb,
+        Mark: (overrides === null || overrides === void 0 ? void 0 : overrides.Mark) || Mark,
+        MarkLabel: (overrides === null || overrides === void 0 ? void 0 : overrides.MarkLabel) || MarkLabel,
+    }), [overrides]);
+    const isControlled = typeof value !== 'undefined';
+    const isRange = Array.isArray(isControlled ? value : defaultValue);
+    const [internalValues, setInternalValues] = React.useState(() => typeof defaultValue === 'undefined'
+        ? [min]
+        : typeof defaultValue === 'number'
+            ? [defaultValue]
+            : [...defaultValue]);
+    const rawValues = isControlled
+        ? typeof value === 'number'
+            ? [value]
+            : [...value]
+        : internalValues;
+    // The value from the props may be out of the bounds or in the wrong order: the slider shows the corrected one
+    const values = rawValues.map(v => clamp(v, min, max)).sort((a, b) => a - b);
+    // The pointer events may come faster than the renders: the handlers read the latest values from the ref
+    const valuesRef = React.useRef(values);
+    valuesRef.current = values;
+    const containerRef = React.useRef(null);
+    const thumbRefs = React.useRef([]);
+    const dragRef = React.useRef(null);
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    React.useImperativeHandle(ref, () => containerRef.current);
+    // Warn once, not on every render
+    const isControlledWithoutOnChange = isControlled && typeof onChange === 'undefined';
+    React.useEffect(() => {
+        if (isControlledWithoutOnChange) {
+            console.error('The property «onChange» should be passed with prop «value» to make component controlled');
+        }
+    }, [isControlledWithoutOnChange]);
+    React.useEffect(() => {
+        if (!(step > 0)) {
+            console.error(`The property «step» should be greater than zero, got «${step}»`);
+        }
+    }, [step]);
+    const toPublicValue = (next) => isRange ? [next[0], next[1]] : next[0];
+    /**
+     * Moves the thumb to the value. A range thumb can not pass the other one
+     */
+    const changeValue = (index, nextValue, event) => {
+        const current = valuesRef.current;
+        const lower = isRange && index === 1 ? current[0] : min;
+        const upper = isRange && index === 0 ? current[1] : max;
+        const bounded = clamp(nextValue, lower, upper);
+        if (bounded === current[index]) {
+            return;
+        }
+        const next = current.map((v, i) => (i === index ? bounded : v));
+        valuesRef.current = next;
+        if (!isControlled) {
+            setInternalValues(next);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(toPublicValue(next), event, index);
+    };
+    const getValueFromPointer = (event) => {
+        const rect = containerRef.current.getBoundingClientRect();
+        const ratio = orientation === 'vertical'
+            ? (rect.bottom - event.clientY) / rect.height
+            : (event.clientX - rect.left) / rect.width;
+        return clamp(snapToStep(min + clamp(ratio, 0, 1) * (max - min), min, step), min, max);
+    };
+    const startDragOf = (index) => {
+        var _a;
+        setActiveIndex(index);
+        (_a = thumbRefs.current[index]) === null || _a === void 0 ? void 0 : _a.focus({ preventScroll: true });
+    };
+    const handlePointerDown = event => {
+        onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown(event);
+        // Only the main mouse button, a finger or a pen
+        if (disabled || event.button !== 0 || event.defaultPrevented) {
+            return;
+        }
+        // Prevents the text selection and the focus on the container, the thumb gets the focus below
+        event.preventDefault();
+        const pointerValue = getValueFromPointer(event);
+        const current = valuesRef.current;
+        let index = 0;
+        if (isRange) {
+            if (current[0] === current[1]) {
+                // The thumbs are in the same place: the left one can only go left, the right one can only go right
+                index = pointerValue < current[0] ? 0 : pointerValue > current[1] ? 1 : null;
+            }
+            else {
+                index = Math.abs(pointerValue - current[0]) <= Math.abs(pointerValue - current[1]) ? 0 : 1;
+            }
+        }
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragRef.current = { pointerId: event.pointerId, index };
+        if (index === null) {
+            startDragOf(1);
+            return;
+        }
+        startDragOf(index);
+        changeValue(index, pointerValue, event);
+    };
+    const handlePointerMove = event => {
+        onPointerMove === null || onPointerMove === void 0 ? void 0 : onPointerMove(event);
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        const pointerValue = getValueFromPointer(event);
+        let { index } = drag;
+        if (index === null) {
+            const current = valuesRef.current[0];
+            if (pointerValue === current) {
+                return;
+            }
+            index = pointerValue < current ? 0 : 1;
+            dragRef.current = { pointerId: drag.pointerId, index };
+            startDragOf(index);
+        }
+        changeValue(index, pointerValue, event);
+    };
+    const finishDrag = (event) => {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId) {
+            return;
+        }
+        dragRef.current = null;
+        setActiveIndex(null);
+        onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(toPublicValue(valuesRef.current), event);
+    };
+    const handlePointerUp = event => {
+        onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp(event);
+        finishDrag(event);
+    };
+    const handlePointerCancel = event => {
+        onPointerCancel === null || onPointerCancel === void 0 ? void 0 : onPointerCancel(event);
+        finishDrag(event);
+    };
+    const handleLostPointerCapture = event => {
+        onLostPointerCapture === null || onLostPointerCapture === void 0 ? void 0 : onLostPointerCapture(event);
+        finishDrag(event);
+    };
+    const handleKeyDown = (index, event) => {
+        if (disabled) {
+            return;
+        }
+        const current = valuesRef.current[index];
+        // About ten big steps along the whole slider
+        const bigStep = step * Math.max(1, Math.round((max - min) / 10 / step));
+        let next;
+        switch (event.key) {
+            case 'ArrowRight':
+            case 'ArrowUp':
+                next = snapToStep(current + (event.shiftKey ? bigStep : step), min, step);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowDown':
+                next = snapToStep(current - (event.shiftKey ? bigStep : step), min, step);
+                break;
+            case 'PageUp':
+                next = snapToStep(current + bigStep, min, step);
+                break;
+            case 'PageDown':
+                next = snapToStep(current - bigStep, min, step);
+                break;
+            case 'Home':
+                next = min;
+                break;
+            case 'End':
+                next = max;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        const before = valuesRef.current;
+        changeValue(index, next, event);
+        if (valuesRef.current !== before) {
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(toPublicValue(valuesRef.current), event);
+        }
+    };
+    const markItems = React.useMemo(() => {
+        if (marks === true) {
+            if (!(step > 0)) {
+                return [];
+            }
+            const count = Math.floor((max - min) / step) + 1;
+            return Array.from({ length: count }, (_, i) => ({
+                value: snapToStep(min + i * step, min, step),
+            }));
+        }
+        if (Array.isArray(marks)) {
+            return marks.filter(mark => mark.value >= min && mark.value <= max);
+        }
+        return [];
+    }, [marks, min, max, step]);
+    const hasMarkLabels = markItems.some(mark => mark.label != null && mark.label !== false);
+    const trackStart = isRange ? valueToPercent(values[0], min, max) : 0;
+    const trackEnd = valueToPercent(values[values.length - 1], min, max);
+    const isInTrack = (v) => (isRange ? v >= values[0] && v <= values[1] : v <= values[0]);
+    return (React.createElement(overridesMap.Container, Object.assign({}, nativeProps, { orientation: orientation, disabled: disabled, hasMarkLabels: hasMarkLabels, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerCancel, onLostPointerCapture: handleLostPointerCapture, ref: containerRef }),
+        React.createElement(overridesMap.Rail, { color: color, orientation: orientation, disabled: disabled }),
+        React.createElement(overridesMap.Track, { color: color, orientation: orientation, disabled: disabled, start: trackStart, end: trackEnd }),
+        markItems.map(mark => (React.createElement(React.Fragment, { key: mark.value },
+            React.createElement(overridesMap.Mark, { orientation: orientation, position: valueToPercent(mark.value, min, max), inTrack: isInTrack(mark.value) }),
+            mark.label != null && mark.label !== false && (React.createElement(overridesMap.MarkLabel, { orientation: orientation, position: valueToPercent(mark.value, min, max), inTrack: isInTrack(mark.value) }, mark.label))))),
+        values.map((thumbValue, index) => (React.createElement(overridesMap.Thumb
+        // The thumb is identified by its place: the first or the second
+        // eslint-disable-next-line react/no-array-index-key
+        , { 
+            // The thumb is identified by its place: the first or the second
+            // eslint-disable-next-line react/no-array-index-key
+            key: index, role: "slider", tabIndex: disabled ? -1 : 0, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": thumbValue, "aria-valuetext": getAriaValueText === null || getAriaValueText === void 0 ? void 0 : getAriaValueText(thumbValue, index), "aria-orientation": orientation, "aria-disabled": disabled || undefined, "aria-label": getAriaLabel ? getAriaLabel(index) : ariaLabel, "aria-labelledby": ariaLabelledby, color: color, orientation: orientation, disabled: disabled, position: valueToPercent(thumbValue, min, max), active: activeIndex === index, index: index, 
+            // The dragged thumb is above the other one, so the thumbs in the same place stay reachable
+            style: activeIndex === index ? { zIndex: 2 } : undefined, onKeyDown: event => handleKeyDown(index, event), ref: (node) => {
+                thumbRefs.current[index] = node;
+            } }))),
+        typeof name !== 'undefined' &&
+            values.map((thumbValue, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            React.createElement("input", { key: index, type: "hidden", name: name, value: thumbValue, disabled: disabled })))));
+};
+export default React.forwardRef(Slider);

package/esm/Slider/useSliderColor.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Slider to the Color instance
+ */
+const useSliderColor = (color) => {
+    const theme = useTheme();
+    return React.useMemo(() => {
+        switch (true) {
+            case color === 'secondary':
+                return theme.color.accentSecondary;
+            case typeof color === 'undefined':
+            case color === 'default':
+            case color === 'primary':
+                return theme.color.accentPrimary;
+            default:
+                try {
+                    return Color.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+export default useSliderColor;

package/esm/Slider/utils.js

@@ -0,0 +1,25 @@
+/**
+ * Number of digits after the point, e.g. 2 for 0.05
+ */
+const countDecimals = (value) => {
+    if (Number.isInteger(value)) {
+        return 0;
+    }
+    const [mantissa, exponent] = String(value).split('e-');
+    const fraction = (mantissa.split('.')[1] || '').length;
+    return exponent ? fraction + Number(exponent) : fraction;
+};
+export const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * Snaps the value to the nearest step counted from `min`.
+ * The result is rounded to the precision of `step` and `min`: 0.1 + 0.2 gives 0.3, not 0.30000000000000004
+ */
+export const snapToStep = (value, min, step) => {
+    const snapped = Math.round((value - min) / step) * step + min;
+    const decimals = Math.max(countDecimals(step), countDecimals(min));
+    return Number(snapped.toFixed(decimals));
+};
+/**
+ * The position of the value on the rail, from 0 to 100
+ */
+export const valueToPercent = (value, min, max) => max === min ? 0 : ((value - min) * 100) / (max - min);

package/esm/Stack/index.js

@@ -0,0 +1,33 @@
+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 { resolveSpacing } from '../utils/spacing';
+const StyledStack = styled.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  flex-direction: ${({ $direction }) => $direction};
+  flex-wrap: ${({ $wrap }) => ($wrap ? 'wrap' : 'nowrap')};
+  align-items: ${({ $align, $direction }) => $align !== null && $align !== void 0 ? $align : ($direction === 'row' ? 'center' : 'stretch')};
+  justify-content: ${({ $justify }) => $justify !== null && $justify !== void 0 ? $justify : 'flex-start'};
+  gap: ${({ theme, $gap }) => resolveSpacing(theme, $gap)};
+  /* A flex child shrinks below its content only with min-width: 0 */
+  min-width: 0;
+`;
+/**
+ * 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));
+};
+export default React.forwardRef(Stack);

package/esm/Surface/SurfaceContainer.js

@@ -0,0 +1,41 @@
+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 { elevation } from '../ThemeProvider/tokens';
+const StyledSurfaceContainer = styled.div `
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  box-sizing: border-box;
+  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()}`)};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  font-size: 1em;
+
+  ${({ $rounded }) => $rounded &&
+    css `
+      border-radius: 100%;
+    `}
+
+  ${({ $noPadding }) => $noPadding &&
+    css `
+      /* The content reaches the edges, so it must follow the rounded corners */
+      overflow: hidden;
+    `}
+`;
+const SurfaceContainer = (props, ref) => {
+    const { inline, children, rounded, noPadding } = props, nativeProps = __rest(props, ["inline", "children", "rounded", "noPadding"]);
+    return (React.createElement(StyledSurfaceContainer, Object.assign({ "$inline": inline, "$rounded": rounded, "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SurfaceContainer);

package/esm/Surface/SurfaceContent.js

@@ -0,0 +1,34 @@
+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';
+const StyledContent = styled.div `
+  flex: 1;
+  ${({ $noPadding }) => (typeof $noPadding === 'undefined' || $noPadding === false) &&
+    css `
+      padding: 1.4rem 1rem 1rem 1rem;
+    `}
+
+  ${({ $rounded, $noPadding }) => $rounded &&
+    css `
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: ${$noPadding ? '0' : '1rem'};
+    `}
+`;
+const SurfaceContent = (props, ref) => {
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
+    return (React.createElement(StyledContent, Object.assign({ "$noPadding": noPadding, "$rounded": rounded }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SurfaceContent);

package/esm/Surface/SurfaceFooter.js

@@ -0,0 +1,26 @@
+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';
+const StyledFooter = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem')};
+  border-bottom-left-radius: inherit;
+  border-bottom-right-radius: inherit;
+`;
+const SurfaceFooter = (props, ref) => {
+    const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);
+    return (React.createElement(StyledFooter, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SurfaceFooter);