@via-profit/ui-kit 0.9.1 → 0.10.0

package/Tabs/Tabs.js

@@ -27,7 +27,7 @@ const StyledTabs = styled_1.default.div `
  */
 const escapeId = (value) => value.replace(/[^\w-]/g, char => `_${char.charCodeAt(0).toString(16)}`);
 const Tabs = (props, ref) => {
-    const { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, color, children } = props, nativeProps = __rest(props, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "color", "children"]);
+    const { value, defaultValue, onChange, orientation = 'horizontal', activation = 'auto', fullWidth = false, variant = 'underline', size = 'm', color, children } = props, nativeProps = __rest(props, ["value", "defaultValue", "onChange", "orientation", "activation", "fullWidth", "variant", "size", "color", "children"]);
     const isControlled = typeof value !== 'undefined';
     const [internalValue, setInternalValue] = react_1.default.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
     const currentValue = isControlled ? value : internalValue;
@@ -60,6 +60,8 @@ const Tabs = (props, ref) => {
         orientation,
         activation,
         fullWidth,
+        variant,
+        size,
         color: $color,
         getTabId: tabValue => `${baseId}-tab-${escapeId(tabValue)}`,
         getPanelId: tabValue => `${baseId}-panel-${escapeId(tabValue)}`,
@@ -71,6 +73,8 @@ const Tabs = (props, ref) => {
         orientation,
         activation,
         fullWidth,
+        variant,
+        size,
         $color,
         baseId,
     ]);

package/Tabs/context.d.ts

@@ -1,6 +1,22 @@
 import React from 'react';
 import Color from '../Color';
 export type TabsOrientation = 'horizontal' | 'vertical';
+/**
+ * `underline` — the line under the selected tab, `segmented` — the tabs in the tray, the selected one is the plate
+ */
+export type TabsVariant = 'underline' | 'segmented';
+/**
+ * The height of the tab at the text of 14px: `s` — 32px, `m` — 40px, `l` — 48px
+ */
+export type TabsSize = 's' | 'm' | 'l';
+/**
+ * The size of the text and the paddings of the tab, in the `em` of the tabs
+ */
+export declare const TAB_SIZES: Record<TabsSize, {
+    readonly fontSize: string;
+    readonly y: string;
+    readonly x: string;
+}>;
 export interface TabsContextValue {
     /**
      * The selected tab or `null` if nothing is selected
@@ -15,6 +31,8 @@ export interface TabsContextValue {
     readonly orientation: TabsOrientation;
     readonly activation: 'auto' | 'manual';
     readonly fullWidth: boolean;
+    readonly variant: TabsVariant;
+    readonly size: TabsSize;
     readonly color: Color;
     readonly getTabId: (value: string) => string;
     readonly getPanelId: (value: string) => string;

package/Tabs/context.js

@@ -3,8 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTabsContext = exports.TabsContext = void 0;
+exports.useTabsContext = exports.TabsContext = exports.TAB_SIZES = void 0;
 const react_1 = __importDefault(require("react"));
+/**
+ * The size of the text and the paddings of the tab, in the `em` of the tabs
+ */
+exports.TAB_SIZES = {
+    s: { fontSize: '0.857em', y: '0.5em', x: '0.7em' },
+    m: { fontSize: '0.929em', y: '0.75em', x: '0.9em' },
+    l: { fontSize: '1em', y: '1em', x: '1.05em' },
+};
 exports.TabsContext = react_1.default.createContext(null);
 const useTabsContext = (component) => {
     const context = react_1.default.useContext(exports.TabsContext);

package/Tabs/index.d.ts

@@ -6,5 +6,5 @@ export type { TabsProps } from './Tabs';
 export type { TabProps } from './Tab';
 export type { TabListProps } from './TabList';
 export type { TabPanelProps } from './TabPanel';
-export type { TabsOrientation } from './context';
+export type { TabsOrientation, TabsVariant, TabsSize } from './context';
 export default Tabs;

package/ThemeProvider/index.d.ts

@@ -63,9 +63,14 @@ export interface UIThemeOverrideFocusRing {
  */
 export interface UIThemeOverrideElevation {
     /**
-     * The elements over the page: Menu, Calendar, Toast, Tooltip, the modal windows
+     * The elements over the page: Menu, Calendar, Toast, Tooltip
      */
     readonly popup?: string;
+    /**
+     * The modal windows over the page: Dialog, Drawer, MessageBox, ConfirmBox.
+     * Without a value the windows get the `popup` shadow of the theme, then the default shadow of the level
+     */
+    readonly modal?: string;
     /**
      * The cards and the panels on the page: Surface, Accordion, Table
      */

package/ThemeProvider/tokens.js

@@ -31,6 +31,7 @@ exports.themeFocusRing = themeFocusRing;
  */
 const defaultElevation = (theme) => ({
     popup: `0 8px 24px ${theme.color.surface.darken(50).alpha(0.6).toString()}`,
+    modal: `0 16px 48px -12px ${theme.color.surface.darken(100).alpha(0.5).toString()}`,
     surface: `0 8px 32px -13px ${theme.color.surface.darken(100).alpha(0.4).toString()}`,
     control: `0 1px 3px ${theme.color.surface.darken(100).alpha(0.35).toString()}`,
 });

package/esm/Badge/BadgeContainer.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import styled from '@emotion/styled';
 const StyledBadge = styled.span `
-  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2.5}em;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   font-size: 1em;
   border-width: 0;
   outline-style: solid;

package/esm/Badge/BadgeTextWrapper.js

@@ -13,7 +13,9 @@ import React from 'react';
 import styled from '@emotion/styled';
 const TextWrapper = styled.span `
   font-size: 0.86em;
-  padding: 0.3em 0.5em;
+  /* the badge is about the height of the line of the text around it, not taller */
+  line-height: 1.35;
+  padding: 0.15em 0.5em;
   display: flex;
   align-items: center;
   user-select: none;

package/esm/Button/buttonVariants.js

@@ -37,7 +37,7 @@ const getStandardColors = (color, theme) => {
     }
 };
 /**
- * The main color of the outlined and plain variants (text and border)
+ * The main color of the outlined, plain and soft variants (text and border)
  */
 const getAccentColor = (color, theme) => {
     switch (true) {
@@ -76,11 +76,23 @@ const standardStyles = ({ $color, $background, disabled, theme }) => css `
     }
   `}
 `;
-const outlinedStyles = ({ $color, disabled, theme }) => css `
-  color: ${disabled ? theme.color.textPrimary.alpha(0.4).toString() : $color.darken(30).toString()};
+/**
+ * The border of the neutral outlined button: light, as the lines of the tables. The dark border
+ * of the text color makes «Отмена», «Сбросить» and the groups of the filters heavy;
+ * the colored outlined buttons keep the border of their color
+ */
+const neutralBorder = (theme) => theme.color.textPrimary.alpha(0.18).toString();
+const outlinedStyles = ({ $color, $neutral, disabled, theme }) => css `
+  color: ${disabled
+    ? theme.color.textPrimary.alpha(0.4).toString()
+    : $neutral
+        ? $color.toString()
+        : $color.darken(30).toString()};
   border-color: ${disabled
     ? theme.color.surface.darken(80).alpha(0.4).toString()
-    : $color.toString()};
+    : $neutral
+        ? neutralBorder(theme)
+        : $color.toString()};
   background-color: transparent;
   border-style: solid;
   border-width: ${CONTROL_BORDER};
@@ -88,10 +100,18 @@ const outlinedStyles = ({ $color, disabled, theme }) => css `
   ${!disabled &&
     css `
     &:hover {
-      background-color: ${$color.darken(20).alpha(0.1).toString()};
+      background-color: ${$neutral
+        ? $color.alpha(0.05).toString()
+        : $color.darken(20).alpha(0.1).toString()};
+      ${$neutral &&
+        css `
+        border-color: ${theme.color.textPrimary.alpha(0.35).toString()};
+      `}
     }
     &:active {
-      background-color: ${$color.darken(50).alpha(0.3).toString()};
+      background-color: ${$neutral
+        ? $color.alpha(0.12).toString()
+        : $color.darken(50).alpha(0.3).toString()};
     }
     &:focus-visible {
       outline-color: ${focusOutlineColor($color, theme)};
@@ -120,6 +140,32 @@ const plainStyles = ({ $color, disabled, theme }) => css `
     }
   `}
 `;
+/**
+ * The tonal button: the pale background of its color and the text of the same hue,
+ * as the plain button under the cursor. Quieter than the standard button, more visible than the plain one
+ */
+const softStyles = ({ $color, disabled, theme }) => css `
+  box-shadow: none;
+  color: ${disabled ? $color.alpha(0.4).toString() : $color.darken(30).toString()};
+  background-color: ${disabled ? $color.alpha(0.05).toString() : $color.alpha(0.1).toString()};
+
+  ${!disabled &&
+    css `
+    &:hover {
+      color: ${$color.darken(50).toString()};
+      background-color: ${$color.alpha(0.18).toString()};
+    }
+    &:active {
+      color: ${$color.darken(80).toString()};
+      background-color: ${$color.alpha(0.3).toString()};
+    }
+    &:focus-visible {
+      outline-style: solid;
+      outline-width: 0.14em;
+      outline-color: ${focusOutlineColor($color, theme)};
+    }
+  `}
+`;
 /**
  * Inside the ButtonGroup all the variants have the same border width, so the buttons have the same size
  * and the selected (standard) button does not shrink. Two adjacent standard buttons are separated by a thin line
@@ -150,13 +196,16 @@ export const buttonVariantStyles = (params) => {
     const colors = variant === 'standard'
         ? getStandardColors(color, theme)
         : { $color: getAccentColor(color, theme), $background: getAccentColor(color, theme) };
-    const props = Object.assign(Object.assign({}, colors), { $variant: variant, $group: group, disabled, theme });
+    const props = Object.assign(Object.assign({}, colors), { $variant: variant, $group: group, $neutral: typeof color === 'undefined' || color === 'default', disabled,
+        theme });
     return css `
     ${variant === 'outlined'
         ? outlinedStyles(props)
         : variant === 'plain'
             ? plainStyles(props)
-            : standardStyles(props)}
+            : variant === 'soft'
+                ? softStyles(props)
+                : standardStyles(props)}
     ${groupStyles(props)}
   `;
 };

package/esm/Calendar/CalendarWeekDayLabel.js

@@ -4,7 +4,7 @@ const CalendarWeekDayLabel = styled.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 200;
+  font-weight: 300;
   font-size: 0.8em;
   user-select: none;
   width: 3em;

package/esm/Menu/MenuContainer.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import useContext, { actionSetmenuState } from './context';
 import List from './MenuList';
+import Separator from './MenuSeparator';
 import Popper from '../Popper';
 import ClickOutside from '../ClickOutside';
 const onRequestCloseDefault = () => undefined;
@@ -18,11 +19,27 @@ const isEqual = (a, b) => {
     return keysA.every(key => Object.prototype.hasOwnProperty.call(b, key) && a[key] === b[key]);
 };
 const MenuContainer = React.forwardRef((props, ref) => {
-    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, } = props;
+    const { items, value, anchorElement = null, overrides, children, closeOutsideClick = true, closeOnAnchorClick = false, isOpen = false, anchorPos = 'bottom', alternativePlacements = ['bottom', 'top'], positionStrategy, autoFlip, viewportMargin, offset, multiple = false, autofocus = true, closeOnSelect = !multiple, onRequestClose = onRequestCloseDefault, onAnchorPosChanged, zIndex, onSelectItem, getOptionSelected, maxWidth, maxHeight, isSeparator, } = props;
     const overridesMap = React.useMemo(() => ({
         List: (overrides === null || overrides === void 0 ? void 0 : overrides.List) || List,
         Popper: (overrides === null || overrides === void 0 ? void 0 : overrides.Popper) || Popper,
-    }), [overrides === null || overrides === void 0 ? void 0 : overrides.List, overrides === null || overrides === void 0 ? void 0 : overrides.Popper]);
+        Separator: (overrides === null || overrides === void 0 ? void 0 : overrides.Separator) || Separator,
+    }), [overrides === null || overrides === void 0 ? void 0 : overrides.List, overrides === null || overrides === void 0 ? void 0 : overrides.Popper, overrides === null || overrides === void 0 ? void 0 : overrides.Separator]);
+    // The separators are not the options: the keyboard skips them, they are not selected
+    const isOption = React.useCallback((index) => index >= 0 &&
+        index < items.length &&
+        !(typeof isSeparator === 'function' && isSeparator(items[index])), [items, isSeparator]);
+    /**
+     * The nearest option from the index in the direction (1 — down, -1 — up), -1 when there is none
+     */
+    const findOption = React.useCallback((from, direction) => {
+        for (let index = from; index >= 0 && index < items.length; index += direction) {
+            if (isOption(index)) {
+                return index;
+            }
+        }
+        return -1;
+    }, [items.length, isOption]);
     const menuListRef = React.useRef(null);
     const menuPopperRef = React.useRef(null);
     // Starts as `false` so that a menu mounted in the open state is focused and scrolled too
@@ -96,7 +113,7 @@ const MenuContainer = React.forwardRef((props, ref) => {
             return;
         const item = items[index];
         // Falsy items such as 0 or an empty string are valid options
-        if (item === undefined)
+        if (item === undefined || !isOption(index))
             return;
         if (typeof onSelectItem === 'function') {
             if (multiple) {
@@ -117,7 +134,7 @@ const MenuContainer = React.forwardRef((props, ref) => {
                 onRequestClose();
             }
         }
-    }, [onSelectItem, onRequestClose, compareFunc, closeOnSelect, items, value, multiple]);
+    }, [onSelectItem, onRequestClose, compareFunc, closeOnSelect, items, value, multiple, isOption]);
     const highlightIndex = React.useCallback((index) => {
         const validIndex = Math.max(-1, Math.min(index, items.length - 1));
         isKeyboardNavigationRef.current = true;
@@ -127,20 +144,21 @@ const MenuContainer = React.forwardRef((props, ref) => {
         dispatch(actionSetmenuState({ markedIndex: validIndex, hoveredIndex: -1 }));
         scrollToIndex(validIndex);
     }, [dispatch, items.length, scrollToIndex]);
+    // Without the previous (next) option the highlight stays where it is
     const highlightPrevItem = React.useCallback(() => {
-        const newIndex = markedIndex - 1;
-        highlightIndex(newIndex >= 0 ? newIndex : 0);
-    }, [markedIndex, highlightIndex]);
+        const newIndex = findOption(markedIndex - 1, -1);
+        highlightIndex(newIndex >= 0 ? newIndex : findOption(0, 1));
+    }, [markedIndex, highlightIndex, findOption]);
     const highlightNextItem = React.useCallback(() => {
-        const newIndex = markedIndex + 1;
-        highlightIndex(newIndex < items.length ? newIndex : items.length - 1);
-    }, [markedIndex, items.length, highlightIndex]);
+        const newIndex = findOption(markedIndex + 1, 1);
+        highlightIndex(newIndex >= 0 ? newIndex : findOption(items.length - 1, -1));
+    }, [markedIndex, items.length, highlightIndex, findOption]);
     const highlightFirstItem = React.useCallback(() => {
-        highlightIndex(0);
-    }, [highlightIndex]);
+        highlightIndex(findOption(0, 1));
+    }, [highlightIndex, findOption]);
     const highlightLastItem = React.useCallback(() => {
-        highlightIndex(items.length - 1);
-    }, [highlightIndex, items.length]);
+        highlightIndex(findOption(items.length - 1, -1));
+    }, [highlightIndex, items.length, findOption]);
     const selectHighlightedItem = React.useCallback(() => {
         if (markedIndex > -1 && markedIndex < items.length) {
             selectItem(markedIndex);
@@ -329,7 +347,10 @@ const MenuContainer = React.forwardRef((props, ref) => {
             onAnchorPosChanged(newPlacement);
         }
     }, [onAnchorPosChanged]);
-    const renderedChildren = React.useMemo(() => items.map((item, index) => children({ item, index }, {
+    const SeparatorComponent = overridesMap.Separator;
+    const renderedChildren = React.useMemo(() => items.map((item, index) => 
+    // the separator stays among the children: the index of the child is the index of the item
+    !isOption(index) ? (React.createElement(SeparatorComponent, { key: index })) : (children({ item, index }, {
         key: index,
         onMouseEnter: itemMouseEnterHandler(index),
         // mouseenter is skipped during the keyboard navigation, so the item under a moving
@@ -339,8 +360,10 @@ const MenuContainer = React.forwardRef((props, ref) => {
         onClick: itemClickHandler(index),
         selected: selectedIndexes.includes(index),
         hovered: markedIndex === index,
-    })), [
+    }))), [
         items,
+        isOption,
+        SeparatorComponent,
         children,
         selectedIndexes,
         markedIndex,
@@ -359,7 +382,7 @@ const MenuContainer = React.forwardRef((props, ref) => {
     const ListComponent = overridesMap.List;
     return (React.createElement(ClickOutside, { onOutsideClick: onRequestClose, mouseEvent: isOpen && closeOutsideClick ? 'onMouseDown' : false, ignoreElements: closeOnAnchorClick ? undefined : [anchorElement] },
         React.createElement(PopperComponent, { isOpen: Boolean(isOpen), ref: menuPopperRef, zIndex: zIndex, anchorPos: anchorPos, alternativePlacements: alternativePlacements, anchorElement: anchorElement, onAnchorPosChanged: onAnchorPosChangedMemo, positionStrategy: positionStrategy, autoFlip: autoFlip, viewportMargin: viewportMargin, offset: offset },
-            React.createElement(ListComponent, { anchorPos: anchorPos, isOpen: Boolean(isOpen), ref: menuListRef, maxWidth: maxWidth, onKeyDown: listKeydownEvent, onMouseMoveCapture: listMouseMoveHandler, onFocus: listFocusHandler, onBlur: listBlurHandler, role: "listbox", "aria-multiselectable": multiple || undefined }, renderedChildren))));
+            React.createElement(ListComponent, { anchorPos: anchorPos, isOpen: Boolean(isOpen), ref: menuListRef, maxWidth: maxWidth, maxHeight: maxHeight, onKeyDown: listKeydownEvent, onMouseMoveCapture: listMouseMoveHandler, onFocus: listFocusHandler, onBlur: listBlurHandler, role: "listbox", "aria-multiselectable": multiple || undefined }, renderedChildren))));
 });
 MenuContainer.displayName = 'MenuContainer';
 export default MenuContainer;

package/esm/Menu/MenuList.js

@@ -71,11 +71,11 @@ const StyledMenuList = styled.div `
   box-sizing: border-box;
   overflow-y: auto;
   padding: 0.4em;
-  max-height: 18em;
+  max-height: ${({ $maxHeight = '18em' }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
 `;
 export const MenuList = React.forwardRef((props, ref) => {
-    const { isOpen, anchorPos, maxWidth, children } = props, nativeProps = __rest(props, ["isOpen", "anchorPos", "maxWidth", "children"]);
-    return (React.createElement(StyledMenuList, Object.assign({ tabIndex: -1, "$isOpen": isOpen, "$maxWidth": maxWidth, "$anchorPos": anchorPos }, nativeProps, { ref: ref }), children));
+    const { isOpen, anchorPos, maxWidth, maxHeight, children } = props, nativeProps = __rest(props, ["isOpen", "anchorPos", "maxWidth", "maxHeight", "children"]);
+    return (React.createElement(StyledMenuList, Object.assign({ tabIndex: -1, "$isOpen": isOpen, "$maxWidth": maxWidth, "$maxHeight": maxHeight, "$anchorPos": anchorPos }, nativeProps, { ref: ref }), children));
 });
 MenuList.displayName = 'MenuList';
 export default MenuList;

package/esm/Menu/MenuSeparator.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { themePadding } from '../ThemeProvider/tokens';
+/**
+ * The line between the groups of the items. The space around it separates the groups:
+ * a line flush with the items is not seen
+ */
+const StyledMenuSeparator = styled.div `
+  flex: none;
+  height: 1px;
+  margin: ${({ theme }) => {
+    const { y, x } = themePadding(theme, 'item');
+    return `${y} ${x}`;
+}};
+  background-color: ${({ theme }) => theme.color.textPrimary.alpha(0.12).toString()};
+`;
+/**
+ * The separator of the menu: not an option — it is not highlighted, selected or announced
+ * (a listbox may contain the options only, so it is hidden from the screen readers)
+ */
+export const MenuSeparator = React.forwardRef((props, ref) => (React.createElement(StyledMenuSeparator, Object.assign({ role: "presentation", "aria-hidden": true }, props, { ref: ref }))));
+MenuSeparator.displayName = 'MenuSeparator';
+export default MenuSeparator;

package/esm/Menu/index.js

@@ -4,6 +4,7 @@ import MenuContainer from './MenuContainer';
 export * from './MenuContainer';
 export * from './MenuItem';
 export * from './MenuList';
+export * from './MenuSeparator';
 const Menu = React.forwardRef((props, ref) => (React.createElement(MenuContextProvider, null,
     React.createElement(MenuContainer, Object.assign({}, props, { ref: ref })))));
 Menu.displayName = 'Menu';

package/esm/Modal/BaseModal/ModalInner.js

@@ -20,7 +20,8 @@ const StyledModalInner = styled.div `
   pointer-events: all;
   position: relative;
   background-color: ${({ theme }) => theme.color.surface.toString()};
-  box-shadow: ${({ theme }) => elevation(theme, 'popup')};
+  /* the themes made before the modal level keep the popup shadow for the windows */
+  box-shadow: ${({ theme }) => elevation(theme, 'modal', theme.elevation.popup)};
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   margin-top: 2em;
   transition:

package/esm/Stepper/Step.js

@@ -0,0 +1,164 @@
+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 { StepIndexContext, StepperContext } from './context';
+const Container = styled.div `
+  position: relative;
+  display: flex;
+  ${({ $orientation, $alternativeLabel, $last }) => $orientation === 'vertical'
+    ? css `
+          flex-direction: column;
+        `
+    : $alternativeLabel
+        ? css `
+            flex: 1 1 0;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+          `
+        : css `
+            flex: ${$last ? '0 0 auto' : '1 1 auto'};
+            align-items: center;
+          `}
+`;
+const Head = styled.div `
+  display: flex;
+  align-items: ${({ $alternativeLabel }) => ($alternativeLabel ? 'center' : 'flex-start')};
+  flex-direction: ${({ $alternativeLabel }) => ($alternativeLabel ? 'column' : 'row')};
+  gap: ${({ $alternativeLabel }) => ($alternativeLabel ? '0.35em' : '0.5em')};
+  flex-shrink: 0;
+`;
+/**
+ * The circle of the step: the check of the completed one, the number of the others
+ */
+const Icon = styled.span `
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 1.6em;
+  height: 1.6em;
+  border-radius: 50%;
+  font-size: 1em;
+  font-weight: 600;
+  ${({ theme, $state, $color, $contrastColor, $status }) => {
+    // the attention (warning, error) colors the step that is not completed
+    const main = $status ? theme.color[$status] : $color;
+    switch ($state) {
+        // done: the pale plate of the color and the check of the color
+        case 'completed':
+            return css `
+          background-color: ${$color.alpha(0.15).toString()};
+          color: ${$color.toString()};
+        `;
+        // now: the contrast plate of the color, the border and the number of the color
+        case 'active':
+            return css `
+          border: 2px solid ${main.toString()};
+          background-color: ${($status ? theme.color.surface : $contrastColor).toString()};
+          color: ${main.toString()};
+        `;
+        // ahead: pale grey
+        default:
+            return $status
+                ? css `
+              border: 1.5px solid ${main.toString()};
+              background-color: ${theme.color.surface.toString()};
+              color: ${main.darken(20).toString()};
+            `
+                : css `
+              background-color: ${theme.color.textPrimary.alpha(0.06).toString()};
+              color: ${theme.color.textSecondary.alpha(0.7).toString()};
+            `;
+    }
+}}
+  & > span {
+    font-size: 0.75em;
+  }
+  & > svg {
+    width: 0.85em;
+    height: 0.85em;
+  }
+`;
+const Label = styled.span `
+  display: flex;
+  flex-direction: column;
+  padding-top: 0.15em;
+  line-height: 1.3;
+  font-size: 0.929em;
+  font-weight: ${({ $state }) => ($state === 'active' ? 600 : 400)};
+  color: ${({ theme, $state }) => ($state === 'pending' ? theme.color.textSecondary : theme.color.textPrimary).toString()};
+`;
+const Caption = styled.span `
+  font-size: 0.857em;
+  font-weight: 400;
+  color: ${({ theme }) => theme.color.textSecondary.toString()};
+`;
+/**
+ * The line to the next step: accented after the completed step
+ */
+const Connector = styled.span `
+  background-color: ${({ theme, $done, $color }) => ($done ? $color : theme.color.textPrimary.alpha(0.15)).toString()};
+  ${({ $orientation, $alternativeLabel }) => $orientation === 'vertical'
+    ? css `
+          width: 1.5px;
+          min-height: 0.75em;
+          margin: 0.25em 0 0.25em calc(0.8em - 0.75px);
+          flex: 1 1 auto;
+        `
+    : $alternativeLabel
+        ? css `
+            position: absolute;
+            top: calc(0.8em - 0.75px);
+            left: calc(50% + 1.1em);
+            right: calc(-50% + 1.1em);
+            height: 1.5px;
+          `
+        : css `
+            flex: 1 1 auto;
+            min-width: 1em;
+            height: 1.5px;
+            margin: 0 0.5em;
+          `}
+`;
+const Check = () => (React.createElement("svg", { viewBox: "0 0 24 24", "aria-hidden": true },
+    React.createElement("path", { d: "M5 12.5l4.5 4.5L19 7.5", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" })));
+/**
+ * One step of the `<Stepper>`
+ */
+const Step = (props, ref) => {
+    const { children, caption, completed, status, icon } = props, nativeProps = __rest(props, ["children", "caption", "completed", "status", "icon"]);
+    const stepper = React.useContext(StepperContext);
+    const { index, last } = React.useContext(StepIndexContext);
+    if (!stepper) {
+        throw new Error('<Step> should be placed inside <Stepper>');
+    }
+    const { activeStep, orientation, alternativeLabel, color, contrastColor } = stepper;
+    const state = completed || (typeof completed === 'undefined' && index < activeStep)
+        ? 'completed'
+        : index === activeStep
+            ? 'active'
+            : 'pending';
+    return (React.createElement(Container, Object.assign({ role: "listitem", "aria-current": state === 'active' ? 'step' : undefined }, nativeProps, { "$orientation": orientation, "$alternativeLabel": alternativeLabel, "$last": last, ref: ref }),
+        React.createElement(Head, { "$alternativeLabel": alternativeLabel },
+            React.createElement(Icon, { "$state": state, "$color": color, "$contrastColor": contrastColor, "$status": status !== null && status !== void 0 ? status : null }, state === 'completed' ? React.createElement(Check, null) : (icon !== null && icon !== void 0 ? icon : React.createElement("span", null, index + 1))),
+            React.createElement(Label, { "$state": state },
+                children,
+                caption && React.createElement(Caption, null, caption))),
+        !last && (React.createElement(Connector, { "$orientation": orientation, "$alternativeLabel": alternativeLabel, "$done": state === 'completed', "$color": color }))));
+};
+export default React.forwardRef(Step);