@via-profit/ui-kit 0.3.0 → 0.5.0

package/Swiper/SwiperTrack.js

@@ -43,13 +43,18 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTrack = styled_1.default.div `
   display: flex;
   height: 100%;
-  transition: ${({ $dragging, $disableAnimation }) => $dragging || $disableAnimation ? 'none' : 'transform 0.3s ease'};
+  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))`};
 `;
 exports.SwiperTrack = React.forwardRef((props, ref) => {
-    const { children, index, offset, dragging, disableAnimation, slidesPerView } = props, restProps = __rest(props, ["children", "index", "offset", "dragging", "disableAnimation", "slidesPerView"]);
-    return (React.createElement(StyledTrack, Object.assign({ "$dragging": dragging, "$index": index, "$offset": offset, "$disableAnimation": disableAnimation, "$slidesPerView": slidesPerView }, restProps, { ref: ref }), children));
+    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));
 });
 exports.SwiperTrack.displayName = 'SwiperTrack';
 exports.default = exports.SwiperTrack;

package/Swiper/SwiperWrapper.js

@@ -41,6 +41,7 @@ exports.StyledWrapper = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
 exports.StyledWrapper = styled_1.default.div `
   width: 100%;
   height: 100%;
@@ -51,9 +52,18 @@ exports.StyledWrapper = styled_1.default.div `
     (0, react_1.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 }) => (0, tokens_1.themeFocusRing)(theme)}
 `;
 const SwiperWrapper = React.forwardRef((props, ref) => {
-    const { children, draggable } = props, restProps = __rest(props, ["children", "draggable"]);
+    // 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(exports.StyledWrapper, Object.assign({}, restProps, { ref: ref, "$draggable": draggable }), children));
 });
 SwiperWrapper.displayName = 'SwiperWrapper';

package/Switch/SwitchContainer.d.ts

@@ -16,7 +16,7 @@ declare const _default: React.ForwardRefExoticComponent<React.LabelHTMLAttribute
      * This property changes position of switch and its label.
      * Default: `end`
      */
-    readonly labelPosition?: "bottom" | "top" | "start" | "end" | undefined;
+    readonly labelPosition?: "bottom" | "top" | "end" | "start" | undefined;
     /**
      * if `true` switch state can not be changed
      * Default: false;

package/Switch/SwitchContainer.js

@@ -18,15 +18,15 @@ const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const StyledContainer = styled_1.default.label `
-  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  cursor: ${({ $disabled }) => ($disabled ? 'default' : 'pointer')};
   font-size: 1em;
   padding-right: 1em;
   display: inline-flex;
   align-items: center;
-  opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
-  ${({ labelPosition }) => {
+  opacity: ${({ $disabled }) => ($disabled ? 0.6 : 1)};
+  ${({ $labelPosition }) => {
     let direction = 'row';
-    switch (labelPosition) {
+    switch ($labelPosition) {
         case 'bottom':
             direction = 'column';
             break;
@@ -47,6 +47,6 @@ const StyledContainer = styled_1.default.label `
 `;
 const SwitchContainer = (props, ref) => {
     const { children, labelPosition, disabled } = props, nativeProps = __rest(props, ["children", "labelPosition", "disabled"]);
-    return (react_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { labelPosition: labelPosition, disabled: disabled, ref: ref }), children));
+    return (react_1.default.createElement(StyledContainer, Object.assign({}, nativeProps, { "$labelPosition": labelPosition, "$disabled": disabled, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(SwitchContainer);

package/Switch/SwitchDot.js

@@ -16,8 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
+const useSwitchColor_1 = __importDefault(require("./useSwitchColor"));
 const ToggleContainer = styled_1.default.span `
   display: inline-flex;
   align-items: center;
@@ -36,7 +35,7 @@ const ToggleContainer = styled_1.default.span `
   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)')};
+  transform: ${({ $checked }) => ($checked ? 'translateX(1.5rem)' : 'translateX(0)')};
 `;
 const Dot = styled_1.default.span `
   width: 1.4rem;
@@ -46,9 +45,9 @@ const Dot = styled_1.default.span `
     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 }) => {
+  background-color: ${({ $color, $checked, theme }) => {
     switch (true) {
-        case checked:
+        case $checked:
             return $color ? $color.toString() : theme.color.accentPrimary.toString();
         default:
             return theme.isDark ? theme.color.textPrimary.toString() : theme.color.surface.toString();
@@ -64,16 +63,14 @@ const Dot = styled_1.default.span `
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0);
-    background-color: ${({ $color, checked, theme }) => {
+    background-color: ${({ $color, $checked, theme }) => {
     switch (true) {
-        case checked:
+        case $checked:
             return $color
                 ? $color.alpha(0.2).toString()
                 : theme.color.accentPrimary.alpha(0.2).toString();
         default:
-            return theme.isDark
-                ? theme.color.textPrimary.alpha(0.2).toString()
-                : theme.color.surface.alpha(0.2).toString();
+            return theme.color.textPrimary.alpha(0.2).toString();
     }
 }};
   }
@@ -87,59 +84,22 @@ const Dot = styled_1.default.span `
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0);
-    background-color: ${({ $color, checked, theme }) => {
+    background-color: ${({ $color, $checked, theme }) => {
     switch (true) {
-        case checked:
+        case $checked:
             return $color
                 ? $color.alpha(0.1).toString()
                 : theme.color.accentPrimary.alpha(0.1).toString();
         default:
-            return theme.isDark
-                ? theme.color.textPrimary.alpha(0.1).toString()
-                : theme.color.surface.alpha(0.1).toString();
+            return theme.color.textPrimary.alpha(0.1).toString();
     }
 }};
   }
 `;
 const SwitchDot = (props, ref) => {
     const { children, color, checked } = props, nativeProps = __rest(props, ["children", "color", "checked"]);
-    const theme = (0, react_2.useTheme)();
-    const { $color } = react_1.default.useMemo(() => {
-        switch (true) {
-            case color === 'primary':
-                return {
-                    $color: theme.color.accentPrimary,
-                };
-            case color === 'secondary':
-                return {
-                    $color: theme.color.accentSecondary,
-                };
-            case typeof color === 'undefined':
-            case color === 'default':
-                return {
-                    $color: theme.color.accentPrimary,
-                };
-            case typeof color === 'string': {
-                let $color = theme.color.surface;
-                try {
-                    if (color) {
-                        $color = Color_1.default.fromString(color);
-                    }
-                }
-                catch (err) {
-                    console.error(`invalid color value «${color}»`);
-                }
-                return {
-                    $color,
-                };
-            }
-            default:
-                return {
-                    $color: theme.color.surface,
-                };
-        }
-    }, [color, theme.color]);
-    return (react_1.default.createElement(ToggleContainer, Object.assign({}, nativeProps, { ref: ref, "$color": $color, checked: checked }),
-        react_1.default.createElement(Dot, { "$color": $color, checked: checked }, children)));
+    const $color = (0, useSwitchColor_1.default)(color);
+    return (react_1.default.createElement(ToggleContainer, Object.assign({ "data-switch-thumb": "" }, nativeProps, { ref: ref, "$color": $color, "$checked": checked }),
+        react_1.default.createElement(Dot, { "data-switch-dot": "", "$color": $color, "$checked": checked }, children)));
 };
 exports.default = react_1.default.forwardRef(SwitchDot);

package/Switch/SwitchToggleWrapper.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export type SwitchToggleWrapperProps = React.InputHTMLAttributes<HTMLInputElement>;
-declare const _default: React.ForwardRefExoticComponent<SwitchToggleWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+declare const _default: React.ForwardRefExoticComponent<SwitchToggleWrapperProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/Switch/SwitchToggleWrapper.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const ToggleWrapper = styled_1.default.span `
   font-size: 0.86em;
   display: inline-flex;
@@ -27,7 +28,8 @@ const ToggleWrapper = styled_1.default.span `
   padding: 1.1rem;
   overflow: hidden;
   box-sizing: border-box;
-  &:hover span[class*='ToggleContainer'] > span[class*='Dot']:after {
+  /* 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);
   }
 `;
@@ -42,16 +44,15 @@ const StyledInput = styled_1.default.input `
   margin: 0px;
   padding: 0px;
   z-index: 1;
-  &:focus-visible ~ span[class*='ToggleContainer'] > span[class*='Dot']:before {
+  &:focus-visible ~ [data-switch-thumb] [data-switch-dot]:before {
     transform: translate(-50%, -50%) scale(1.7);
   }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme, '&:focus-visible + *')}
 `;
 const SwitchToggleWrapper = (props, ref) => {
     const { children, disabled } = props, nativeProps = __rest(props, ["children", "disabled"]);
-    return (react_1.default.createElement(ToggleWrapper, { ref: ref },
-        react_1.default.createElement(StyledInput, Object.assign({}, nativeProps, { disabled: disabled, onChange: e => {
-                (nativeProps === null || nativeProps === void 0 ? void 0 : nativeProps.onChange) && nativeProps.onChange(e);
-            }, type: "checkbox" })),
+    return (react_1.default.createElement(ToggleWrapper, null,
+        react_1.default.createElement(StyledInput, Object.assign({ role: "switch" }, nativeProps, { disabled: disabled, type: "checkbox", ref: ref })),
         children));
 };
 exports.default = react_1.default.forwardRef(SwitchToggleWrapper);

package/Switch/SwitchTrack.js

@@ -16,8 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
+const useSwitchColor_1 = __importDefault(require("./useSwitchColor"));
 const Track = styled_1.default.span `
   height: 100%;
   width: 100%;
@@ -25,9 +24,9 @@ const Track = styled_1.default.span `
   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 }) => {
+  background-color: ${({ $color, $checked, theme }) => {
     switch (true) {
-        case checked:
+        case $checked:
             return $color ? $color.toString() : theme.color.accentPrimary.toString();
         default:
             return theme.isDark
@@ -39,42 +38,7 @@ const Track = styled_1.default.span `
 `;
 const SwitchTrack = (props, ref) => {
     const { color, checked, children } = props, nativeProps = __rest(props, ["color", "checked", "children"]);
-    const theme = (0, react_2.useTheme)();
-    const { $color } = react_1.default.useMemo(() => {
-        switch (true) {
-            case color === 'primary':
-                return {
-                    $color: theme.color.accentPrimary,
-                };
-            case color === 'secondary':
-                return {
-                    $color: theme.color.accentSecondary,
-                };
-            case typeof color === 'undefined':
-            case color === 'default':
-                return {
-                    $color: theme.color.accentPrimary,
-                };
-            case typeof color === 'string': {
-                let $color = theme.color.surface;
-                try {
-                    if (color) {
-                        $color = Color_1.default.fromString(color);
-                    }
-                }
-                catch (err) {
-                    console.error(`invalid color value «${color}»`);
-                }
-                return {
-                    $color,
-                };
-            }
-            default:
-                return {
-                    $color: theme.color.surface,
-                };
-        }
-    }, [color, theme.color]);
-    return (react_1.default.createElement(Track, Object.assign({}, nativeProps, { ref: ref, "$color": $color, checked: checked }), children));
+    const $color = (0, useSwitchColor_1.default)(color);
+    return (react_1.default.createElement(Track, Object.assign({}, nativeProps, { ref: ref, "$color": $color, "$checked": checked }), children));
 };
 exports.default = react_1.default.forwardRef(SwitchTrack);

package/Switch/index.d.ts

@@ -58,11 +58,11 @@ export interface SwitchOverrides {
     /**
      * Element container
      */
-    readonly Container?: React.ComponentType<SwitchContainerProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly Container?: React.ComponentType<SwitchContainerProps & React.RefAttributes<HTMLLabelElement>>;
     /**
      * Element toggle
      */
-    readonly ToggleWrapper?: React.ComponentType<SwitchToggleWrapperProps & React.RefAttributes<HTMLSpanElement>>;
+    readonly ToggleWrapper?: React.ComponentType<SwitchToggleWrapperProps & React.RefAttributes<HTMLInputElement>>;
     /**
      * text wrapper
      */
@@ -88,7 +88,7 @@ export interface SwitchOverrides {
      */
     readonly Wrapper?: React.ComponentType<SwitchWrapperProps & React.RefAttributes<HTMLSpanElement>>;
 }
-declare const _default: React.ForwardRefExoticComponent<Omit<SwitchToggleWrapperProps, "onChange" | "disabled" | "checked"> & {
+declare const _default: React.ForwardRefExoticComponent<Omit<SwitchToggleWrapperProps, "onChange" | "checked" | "disabled"> & {
     /**
      * If true then `errorText` value will be displayed under the Switch element
      */
@@ -132,7 +132,7 @@ declare const _default: React.ForwardRefExoticComponent<Omit<SwitchToggleWrapper
      * This property changes position of switch and its label.
      * Default: `end`
      */
-    readonly labelPosition?: "bottom" | "top" | "start" | "end" | undefined;
+    readonly labelPosition?: "bottom" | "top" | "end" | "start" | undefined;
     readonly overrides?: SwitchOverrides | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/Switch/index.js

@@ -23,8 +23,9 @@ const SwitchTrack_1 = __importDefault(require("./SwitchTrack"));
 const SwitchWrapper_1 = __importDefault(require("./SwitchWrapper"));
 const SwitchErrorText_1 = __importDefault(require("./SwitchErrorText"));
 const SwitchAsterisk_1 = __importDefault(require("./SwitchAsterisk"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const Switch = (props, ref) => {
-    const { checked, onChange, defaultChecked, overrides, disabled, labelPosition, children, color, name, error, errorText, requiredAsterisk } = props, nativeProps = __rest(props, ["checked", "onChange", "defaultChecked", "overrides", "disabled", "labelPosition", "children", "color", "name", "error", "errorText", "requiredAsterisk"]);
+    const _a = (0, useThemeProps_1.default)('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_1.default.useState(typeof defaultChecked !== 'undefined' ? defaultChecked : false);
     const overridesMap = react_1.default.useMemo(() => ({
         TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || SwitchTextWrapper_1.default,
@@ -36,21 +37,31 @@ const Switch = (props, ref) => {
         Asterisk: (overrides === null || overrides === void 0 ? void 0 : overrides.Asterisk) || SwitchAsterisk_1.default,
         Wrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.Wrapper) || SwitchWrapper_1.default,
     }), [overrides]);
-    if (typeof checked !== 'undefined' && typeof onChange === 'undefined') {
-        console.error('The property «onChange» should be passed with prop «checked» to make component controlled');
-    }
+    const isControlled = typeof checked !== 'undefined';
+    const isChecked = isControlled ? Boolean(checked) : internalChecked;
+    // Warn once, not on every render
+    const isControlledWithoutOnChange = isControlled && typeof onChange === 'undefined';
+    react_1.default.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_1.default.createElement(overridesMap.Wrapper, null,
         react_1.default.createElement(overridesMap.Container, { labelPosition: labelPosition, disabled: disabled },
-            react_1.default.createElement(overridesMap.ToggleWrapper, Object.assign({}, nativeProps, { disabled: disabled, onChange: typeof onChange !== 'undefined'
-                    ? onChange
-                    : () => {
-                        setInternalChecked(!internalChecked);
-                    }, checked: typeof checked !== 'undefined' ? checked : defaultChecked ? true : undefined, name: name, ref: ref }),
-                react_1.default.createElement(overridesMap.Track, { color: color, checked: typeof checked !== 'undefined' ? checked : internalChecked }),
-                react_1.default.createElement(overridesMap.Dot, { color: color, checked: typeof checked !== 'undefined' ? checked : internalChecked })),
+            react_1.default.createElement(overridesMap.ToggleWrapper, Object.assign({}, nativeProps, { disabled: disabled, onChange: handleChange, checked: isChecked, "aria-invalid": error || undefined, name: name, ref: ref }),
+                react_1.default.createElement(overridesMap.Track, { color: color, checked: isChecked }),
+                react_1.default.createElement(overridesMap.Dot, { color: color, checked: isChecked })),
             react_1.default.createElement(overridesMap.TextWrapper, null,
                 children,
-                typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (react_1.default.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+                requiredAsterisk != null && requiredAsterisk !== false && (react_1.default.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
         react_1.default.createElement(overridesMap.ErrorText, { error: error }, errorText)));
 };
 exports.default = react_1.default.forwardRef(Switch);

package/Switch/useSwitchColor.d.ts

@@ -0,0 +1,7 @@
+import Color from '../Color';
+import type { SwitchProps } from './index';
+/**
+ * Resolves the `color` property of the Switch to the Color instance
+ */
+declare const useSwitchColor: (color: SwitchProps['color']) => Color;
+export default useSwitchColor;

package/Switch/useSwitchColor.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+/**
+ * Resolves the `color` property of the Switch to the Color instance
+ */
+const useSwitchColor = (color) => {
+    const theme = (0, react_2.useTheme)();
+    return react_1.default.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_1.default.fromString(String(color));
+                }
+                catch (err) {
+                    console.error(`invalid color value «${color}»`);
+                    return theme.color.accentPrimary;
+                }
+        }
+    }, [color, theme.color]);
+};
+exports.default = useSwitchColor;

package/Table/Table.d.ts

@@ -1,8 +1,14 @@
 import React from 'react';
 export type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {
+    /**
+     * The table takes the full width of the parent
+     */
     readonly fullWidth?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.TableHTMLAttributes<HTMLTableElement> & {
+    /**
+     * The table takes the full width of the parent
+     */
     readonly fullWidth?: boolean | undefined;
 } & React.RefAttributes<HTMLTableElement>>;
 export default _default;

package/Table/Table.js

@@ -17,84 +17,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
+/**
+ * `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_1.default.table `
-  display: table;
   box-sizing: border-box;
-  text-indent: initial;
   border-spacing: 0;
-  border-collapse: collapse;
-  table-layout: fixed;
-  margin-bottom: 1.5em;
+  border-collapse: separate;
   border: none;
-  text-align: left;
+  text-align: start;
   overflow: hidden;
   background: ${({ theme }) => theme.color.surface.toString()};
   color: ${({ theme }) => theme.color.textPrimary.toString()};
-  box-shadow: ${({ theme }) => `0 0.5em 2em -0.8em ${theme.color.surface.darken(100).alpha(0.4).toString()}`};
+  box-shadow: ${({ theme }) => (0, tokens_1.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 &&
     (0, react_2.css) `
       width: 100%;
     `};
-
-  @media only screen and (max-width: 1200px) {
-    /* Force table to not be like tables anymore */
-    table,
-    thead,
-    tbody,
-    th,
-    td,
-    tr {
-      display: block;
-    }
-
-    /* Hide table headers (but not display: none;, for accessibility) */
-    thead tr {
-      position: absolute;
-      top: -9999px;
-      left: -9999px;
-    }
-
-    tr {
-      margin: 0 0 1rem 0;
-      background: ${({ theme }) => theme.color.surface.toString()};
-    }
-
-    tr:nth-of-type(odd) {
-      background: ${({ theme }) => theme.color.surface.darken(30).toString()};
-    }
-
-    td {
-      /* Behave  like a "row" */
-      border: none;
-      border-bottom: 1px solid
-        ${({ theme }) => theme.color.surface.darken(20).alpha(0.8).toString()};
-      position: relative;
-      padding-left: 50%;
-      text-align: left !important;
-    }
-
-    tr:nth-of-type(odd) td {
-      border-bottom: 1px solid
-        ${({ theme }) => theme.color.surface.darken(50).alpha(0.8).toString()};
-    }
-
-    td:before {
-      /* Now like a table header */
-      position: absolute;
-      /* Top/left values mimic padding */
-      top: 50%;
-      transform: translateY(-50%);
-      left: 1em;
-      width: 45%;
-      padding-right: 1em;
-      white-space: nowrap;
-    }
-  }
 `;
 const Table = (props, ref) => {
     const { children, fullWidth } = props, nativeProps = __rest(props, ["children", "fullWidth"]);
-    return (react_1.default.createElement(StyledTable, Object.assign({ role: "table", "$fullWidth": fullWidth }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledTable, Object.assign({ "$fullWidth": fullWidth }, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(Table);

package/Table/TableBody.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-export type TableBodyProps = React.TableHTMLAttributes<HTMLTableSectionElement>;
+export type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;
 declare const _default: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
 export default _default;

package/Table/TableBody.js

@@ -17,9 +17,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTableBody = styled_1.default.tbody `
-  display: table-row-group;
   vertical-align: middle;
-  & > [role='row']:last-of-type {
+
+  /* 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;
   }
 `;

package/Table/TableCaption.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-export type TableCaptionProps = React.HTMLAttributes<HTMLElement>;
-declare const _default: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLElement>>;
+export type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;
+declare const _default: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
 export default _default;

package/Table/TableCaption.js

@@ -17,9 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTableCaption = styled_1.default.caption `
-  display: table-caption;
-  text-align: center;
-  padding: 0.26em;
+  text-align: start;
+  padding: 0.8em;
   font-size: 1.2em;
   font-weight: 700;
 `;

package/Table/TableCell.js

@@ -17,15 +17,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTableCell = styled_1.default.td `
-  display: table-cell;
   vertical-align: inherit;
   padding: 0.8em;
-  @media all and (max-width: 1200px) {
-    padding: 0.4em;
-  }
+  border-bottom: 0.1em solid ${({ theme }) => theme.color.surface.darken(20).toString()};
 `;
 const TableCell = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(StyledTableCell, Object.assign({ role: "cell" }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledTableCell, Object.assign({}, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(TableCell);