@via-profit/ui-kit 0.4.0 → 0.5.0

package/esm/Swiper/SwiperSlidesRenderer.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+// React 19 supports the boolean `inert`, React 18 passes only the string value to the DOM
+const INERT_VALUE = parseInt(React.version, 10) >= 19 ? true : '';
+const SwiperSlidesRenderer = props => {
+    const { slides, slidesPerView, realIndex, realSlidesCount, getSlideRealIndex, slideLabel, firstVisibleIndex = realIndex, visibleCount = slidesPerView, } = props;
+    const visibilityMap = React.useMemo(() => {
+        const map = new Map();
+        if (realSlidesCount <= visibleCount) {
+            slides.forEach((_, i) => {
+                map.set(i, { isVisible: true, isNearby: false });
+            });
+        }
+        else {
+            const visibleIndices = [];
+            for (let j = 0; j < visibleCount; j++) {
+                visibleIndices.push((firstVisibleIndex + j) % realSlidesCount);
+            }
+            const prevIndex = (firstVisibleIndex - 1 + realSlidesCount) % realSlidesCount;
+            const nextIndex = (firstVisibleIndex + visibleCount) % realSlidesCount;
+            slides.forEach((_, i) => {
+                const slideRealIndex = getSlideRealIndex(i);
+                const isVisible = visibleIndices.includes(slideRealIndex);
+                const isNearby = !isVisible && (slideRealIndex === prevIndex || slideRealIndex === nextIndex);
+                map.set(i, { isVisible, isNearby });
+            });
+        }
+        return map;
+    }, [slides, visibleCount, firstVisibleIndex, realSlidesCount, getSlideRealIndex]);
+    return (React.createElement(React.Fragment, null, slides.map((slide, i) => {
+        const { isVisible, isNearby } = visibilityMap.get(i) || {
+            isVisible: false,
+            isNearby: false,
+        };
+        const slideRealIndex = getSlideRealIndex(i);
+        const isClone = typeof slide.props['data-clone'] !== 'undefined';
+        // The slides out of the view are inert: Tab does not go into them (it would scroll the track)
+        // and screen readers skip them. The clones are always hidden from screen readers
+        return React.cloneElement(slide, {
+            slidesPerView,
+            isVisible,
+            isNearby,
+            role: 'group',
+            'aria-roledescription': 'slide',
+            'aria-label': slideLabel(slideRealIndex, realSlidesCount),
+            'aria-hidden': isClone || !isVisible ? true : undefined,
+            inert: isVisible && !isClone ? undefined : INERT_VALUE,
+            'data-index': i,
+            'data-real-index': slideRealIndex,
+        });
+    })));
+};
+export default React.memo(SwiperSlidesRenderer);

package/esm/Swiper/SwiperTrack.js

@@ -0,0 +1,31 @@
+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 * as React from 'react';
+import styled from '@emotion/styled';
+const StyledTrack = styled.div `
+  display: flex;
+  height: 100%;
+  transition: ${({ $dragging, $disableAnimation, $momentum }) => {
+    if ($dragging || $disableAnimation) {
+        return 'none';
+    }
+    return $momentum ? 'transform 0.6s cubic-bezier(0.25, 1, 0.5, 1)' : 'transform 0.3s ease';
+}};
+  will-change: transform;
+  transform: ${({ $index, $offset, $slidesPerView }) => `translateX(calc(${-(($index * 100) / $slidesPerView)}% + ${$offset}px))`};
+`;
+export const SwiperTrack = React.forwardRef((props, ref) => {
+    const { children, index, offset, dragging, disableAnimation, momentum, slidesPerView } = props, restProps = __rest(props, ["children", "index", "offset", "dragging", "disableAnimation", "momentum", "slidesPerView"]);
+    return (React.createElement(StyledTrack, Object.assign({ "$dragging": dragging, "$index": index, "$offset": offset, "$disableAnimation": disableAnimation, "$momentum": momentum, "$slidesPerView": slidesPerView }, restProps, { ref: ref }), children));
+});
+SwiperTrack.displayName = 'SwiperTrack';
+export default SwiperTrack;

package/esm/Swiper/SwiperWrapper.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 * as React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+import { themeFocusRing } from '../ThemeProvider/tokens';
+export const StyledWrapper = styled.div `
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+
+  ${({ $draggable }) => $draggable &&
+    css `
+      touch-action: pan-y;
+    `};
+
+  /* Inside: the container clips the outer outline */
+  &:focus-visible {
+    outline: 0.14em solid ${({ theme }) => theme.color.accentPrimary.toString()};
+    outline-offset: -0.14em;
+  }
+  ${({ theme }) => themeFocusRing(theme)}
+`;
+const SwiperWrapper = React.forwardRef((props, ref) => {
+    // slidesPerView is for the overrides only, it is not a DOM attribute
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { children, draggable, slidesPerView } = props, restProps = __rest(props, ["children", "draggable", "slidesPerView"]);
+    return (React.createElement(StyledWrapper, Object.assign({}, restProps, { ref: ref, "$draggable": draggable }), children));
+});
+SwiperWrapper.displayName = 'SwiperWrapper';
+export default SwiperWrapper;

package/esm/Swiper/index.js

@@ -0,0 +1,7 @@
+import Swiper from './Swiper';
+export * from './Swiper';
+export * from './SwiperContainer';
+export * from './SwiperSlide';
+export * from './SwiperTrack';
+export * from './SwiperWrapper';
+export default Swiper;

package/esm/Switch/SwitchAsterisk.js

@@ -0,0 +1,25 @@
+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 * as React from 'react';
+import styled from '@emotion/styled';
+const Asterisk = styled.span `
+  font-size: 0.8em;
+  margin-left: 0.2em;
+  position: relative;
+  top: -0.4em;
+  color: ${({ theme }) => theme.color.error.toString()};
+`;
+const SwitchAsterisk = (props, ref) => {
+    const { children, error, focused } = props, nativeProps = __rest(props, ["children", "error", "focused"]);
+    return (React.createElement(Asterisk, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, ref: ref }), children));
+};
+export default React.forwardRef(SwitchAsterisk);

package/esm/Switch/SwitchContainer.js

@@ -0,0 +1,47 @@
+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 StyledContainer = styled.label `
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
+  font-size: 1em;
+  padding-right: 1em;
+  display: inline-flex;
+  align-items: center;
+  opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
+  ${({ $labelPosition }) => {
+    let direction = 'row';
+    switch ($labelPosition) {
+        case 'bottom':
+            direction = 'column';
+            break;
+        case 'start':
+            direction = 'row-reverse';
+            break;
+        case 'top':
+            direction = 'column-reverse';
+            break;
+        default:
+            //do nothing
+            break;
+    }
+    return css `
+      flex-direction: ${direction};
+    `;
+}}
+`;
+const SwitchContainer = (props, ref) => {
+    const { children, labelPosition, disabled } = props, nativeProps = __rest(props, ["children", "labelPosition", "disabled"]);
+    return (React.createElement(StyledContainer, Object.assign({}, nativeProps, { "$labelPosition": labelPosition, "$disabled": disabled, ref: ref }), children));
+};
+export default React.forwardRef(SwitchContainer);

package/esm/Switch/SwitchDot.js

@@ -0,0 +1,100 @@
+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 useSwitchColor from './useSwitchColor';
+const ToggleContainer = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: transparent;
+  vertical-align: middle;
+  text-decoration: none;
+  padding: 0.8rem;
+  border-radius: 50%;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 1;
+  color: rgb(255, 255, 255);
+  transition:
+    left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform: ${({ $checked }) => ($checked ? 'translateX(1.5rem)' : 'translateX(0)')};
+`;
+const Dot = styled.span `
+  width: 1.4rem;
+  height: 1.4rem;
+  border-radius: 50%;
+  box-shadow:
+    rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
+    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
+    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+  background-color: ${({ $color, $checked, theme }) => {
+    switch (true) {
+        case $checked:
+            return $color ? $color.toString() : theme.color.accentPrimary.toString();
+        default:
+            return theme.isDark ? theme.color.textPrimary.toString() : theme.color.surface.toString();
+    }
+}};
+  &:before {
+    content: '';
+    position: absolute;
+    width: 1.4rem;
+    height: 1.4rem;
+    border-radius: 50%;
+    transition: all 0.3s ease-out;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    background-color: ${({ $color, $checked, theme }) => {
+    switch (true) {
+        case $checked:
+            return $color
+                ? $color.alpha(0.2).toString()
+                : theme.color.accentPrimary.alpha(0.2).toString();
+        default:
+            return theme.color.textPrimary.alpha(0.2).toString();
+    }
+}};
+  }
+  &:after {
+    content: '';
+    position: absolute;
+    width: 1.4rem;
+    height: 1.4rem;
+    border-radius: 50%;
+    transition: all 0.3s ease-out;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    background-color: ${({ $color, $checked, theme }) => {
+    switch (true) {
+        case $checked:
+            return $color
+                ? $color.alpha(0.1).toString()
+                : theme.color.accentPrimary.alpha(0.1).toString();
+        default:
+            return theme.color.textPrimary.alpha(0.1).toString();
+    }
+}};
+  }
+`;
+const SwitchDot = (props, ref) => {
+    const { children, color, checked } = props, nativeProps = __rest(props, ["children", "color", "checked"]);
+    const $color = useSwitchColor(color);
+    return (React.createElement(ToggleContainer, Object.assign({ "data-switch-thumb": "" }, nativeProps, { ref: ref, "$color": $color, "$checked": checked }),
+        React.createElement(Dot, { "data-switch-dot": "", "$color": $color, "$checked": checked }, children)));
+};
+export default React.forwardRef(SwitchDot);

package/esm/Switch/SwitchErrorText.js

@@ -0,0 +1,48 @@
+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 * as React from 'react';
+import styled from '@emotion/styled';
+import NoSSR from '../NoSSR';
+const ErrorTextContainer = styled.div `
+  margin-left: 0.5em;
+  max-height: 0;
+  max-height: ${({ $maxHeight }) => typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+  transition: max-height 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
+  overflow: hidden;
+`;
+const ErrorTextInner = styled.div `
+  color: ${({ theme }) => theme.color.error.toString()};
+  font-size: 0.8em;
+  transform: translateY(${({ $error }) => ($error ? 0 : '0.2em')});
+  opacity: ${({ $error }) => ($error ? 1 : 0)};
+  transition: all 240ms 240ms ease-out;
+`;
+const SwitchErrorText = (props, ref) => {
+    const { children, error } = props, nativeProps = __rest(props, ["children", "error"]);
+    const innerRef = React.useRef(null);
+    const [maxHeight, setMaxHeight] = React.useState('initial');
+    React.useEffect(() => {
+        const updateMaxHeight = () => {
+            if (innerRef.current && innerRef.current.getBoundingClientRect().height > 0) {
+                setMaxHeight(innerRef.current.getBoundingClientRect().height);
+            }
+        };
+        updateMaxHeight();
+        window.addEventListener('resize', updateMaxHeight);
+        return () => {
+            window.removeEventListener('resize', updateMaxHeight);
+        };
+    }, [children]);
+    return (React.createElement(ErrorTextContainer, Object.assign({}, nativeProps, { "$maxHeight": error ? maxHeight : 0, ref: ref }),
+        React.createElement(ErrorTextInner, { ref: innerRef, "$error": Boolean(error) }, children ? React.createElement(NoSSR, null, children) : React.createElement(React.Fragment, null, "\u00A0"))));
+};
+export default React.forwardRef(SwitchErrorText);

package/esm/Switch/SwitchTextWrapper.js

@@ -0,0 +1,25 @@
+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';
+// type StyleProps = {};
+const TextWrapper = styled.span `
+  font-size: 0.86em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+const SwitchTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SwitchTextWrapper);

package/esm/Switch/SwitchToggleWrapper.js

@@ -0,0 +1,53 @@
+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 { themeFocusRing } from '../ThemeProvider/tokens';
+const ToggleWrapper = styled.span `
+  font-size: 0.86em;
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  position: relative;
+  height: 3rem;
+  width: 4.5rem;
+  padding: 1.1rem;
+  overflow: hidden;
+  box-sizing: border-box;
+  /* Data attributes, not class names: emotion labels are absent in the published package */
+  &:hover [data-switch-dot]:after {
+    transform: translate(-50%, -50%) scale(1.7);
+  }
+`;
+const StyledInput = styled.input `
+  cursor: inherit;
+  position: absolute;
+  width: 100%;
+  opacity: 0;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+  margin: 0px;
+  padding: 0px;
+  z-index: 1;
+  &:focus-visible ~ [data-switch-thumb] [data-switch-dot]:before {
+    transform: translate(-50%, -50%) scale(1.7);
+  }
+  ${({ theme }) => themeFocusRing(theme, '&:focus-visible + *')}
+`;
+const SwitchToggleWrapper = (props, ref) => {
+    const { children, disabled } = props, nativeProps = __rest(props, ["children", "disabled"]);
+    return (React.createElement(ToggleWrapper, null,
+        React.createElement(StyledInput, Object.assign({ role: "switch" }, nativeProps, { disabled: disabled, type: "checkbox", ref: ref })),
+        children));
+};
+export default React.forwardRef(SwitchToggleWrapper);

package/esm/Switch/SwitchTrack.js

@@ -0,0 +1,39 @@
+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 useSwitchColor from './useSwitchColor';
+const Track = styled.span `
+  height: 100%;
+  width: 100%;
+  border-radius: 7px;
+  transition:
+    opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  background-color: ${({ $color, $checked, theme }) => {
+    switch (true) {
+        case $checked:
+            return $color ? $color.toString() : theme.color.accentPrimary.toString();
+        default:
+            return theme.isDark
+                ? theme.color.textPrimary.darken(10).toString()
+                : theme.color.surface.darken(200).toString();
+    }
+}};
+  opacity: 0.5;
+`;
+const SwitchTrack = (props, ref) => {
+    const { color, checked, children } = props, nativeProps = __rest(props, ["color", "checked", "children"]);
+    const $color = useSwitchColor(color);
+    return (React.createElement(Track, Object.assign({}, nativeProps, { ref: ref, "$color": $color, "$checked": checked }), children));
+};
+export default React.forwardRef(SwitchTrack);

package/esm/Switch/SwitchWrapper.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 StyledWrapper = styled.span `
+  font-size: 1em;
+  padding-right: 1em;
+  display: inline-flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+`;
+const SwitchWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(SwitchWrapper);

package/esm/Switch/index.js

@@ -0,0 +1,62 @@
+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 './SwitchContainer';
+import ToggleWrapper from './SwitchToggleWrapper';
+import TextWrapper from './SwitchTextWrapper';
+import Dot from './SwitchDot';
+import Track from './SwitchTrack';
+import Wrapper from './SwitchWrapper';
+import ErrorText from './SwitchErrorText';
+import Asterisk from './SwitchAsterisk';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const Switch = (props, ref) => {
+    const _a = useThemeProps('Switch', props), { checked, onChange, defaultChecked, overrides, disabled, labelPosition, children, color, name, error, errorText, requiredAsterisk } = _a, nativeProps = __rest(_a, ["checked", "onChange", "defaultChecked", "overrides", "disabled", "labelPosition", "children", "color", "name", "error", "errorText", "requiredAsterisk"]);
+    const [internalChecked, setInternalChecked] = React.useState(typeof defaultChecked !== 'undefined' ? defaultChecked : false);
+    const overridesMap = React.useMemo(() => ({
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || TextWrapper,
+        ToggleWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.ToggleWrapper) || ToggleWrapper,
+        Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
+        Track: (overrides === null || overrides === void 0 ? void 0 : overrides.Track) || Track,
+        Dot: (overrides === null || overrides === void 0 ? void 0 : overrides.Dot) || Dot,
+        ErrorText: (overrides === null || overrides === void 0 ? void 0 : overrides.ErrorText) || ErrorText,
+        Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || Asterisk,
+        Wrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.Wrapper) || Wrapper,
+    }), [overrides]);
+    const isControlled = typeof checked !== 'undefined';
+    const isChecked = isControlled ? Boolean(checked) : internalChecked;
+    // 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 «checked» to make component controlled');
+        }
+    }, [isControlledWithoutOnChange]);
+    // The input is always controlled by isChecked, so the input, the picture and the form value match.
+    // In the uncontrolled mode the own state is updated even when onChange is passed
+    const handleChange = event => {
+        if (!isControlled) {
+            setInternalChecked(event.currentTarget.checked);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    return (React.createElement(overridesMap.Wrapper, null,
+        React.createElement(overridesMap.Container, { labelPosition: labelPosition, disabled: disabled },
+            React.createElement(overridesMap.ToggleWrapper, Object.assign({}, nativeProps, { disabled: disabled, onChange: handleChange, checked: isChecked, "aria-invalid": error || undefined, name: name, ref: ref }),
+                React.createElement(overridesMap.Track, { color: color, checked: isChecked }),
+                React.createElement(overridesMap.Dot, { color: color, checked: isChecked })),
+            React.createElement(overridesMap.TextWrapper, null,
+                children,
+                requiredAsterisk != null && requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        React.createElement(overridesMap.ErrorText, { error: error }, errorText)));
+};
+export default React.forwardRef(Switch);

package/esm/Switch/useSwitchColor.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useTheme } from '@emotion/react';
+import Color from '../Color';
+/**
+ * Resolves the `color` property of the Switch to the Color instance
+ */
+const useSwitchColor = (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 useSwitchColor;

package/esm/Table/Table.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';
+/**
+ * `border-collapse: separate`: with `collapse` browsers ignore the border-radius of the table.
+ * So the row lines are the bottom borders of the cells (the borders of `<tr>` are not drawn in this mode)
+ */
+const StyledTable = styled.table `
+  box-sizing: border-box;
+  border-spacing: 0;
+  border-collapse: separate;
+  border: none;
+  text-align: start;
+  overflow: hidden;
+  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;
+  ${({ $fullWidth }) => $fullWidth &&
+    css `
+      width: 100%;
+    `};
+`;
+const Table = (props, ref) => {
+    const { children, fullWidth } = props, nativeProps = __rest(props, ["children", "fullWidth"]);
+    return (React.createElement(StyledTable, Object.assign({ "$fullWidth": fullWidth }, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(Table);

package/esm/Table/TableBody.js

@@ -0,0 +1,27 @@
+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 StyledTableBody = styled.tbody `
+  vertical-align: middle;
+
+  /* No line under the last row: the table has its own edge */
+  & > tr:last-of-type > th,
+  & > tr:last-of-type > td {
+    border-bottom: none;
+  }
+`;
+const TableBody = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(StyledTableBody, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(TableBody);