@via-profit/ui-kit 0.10.1 → 0.11.0

package/Toast/ToastContainer.js

@@ -89,7 +89,7 @@ const useWindowFocused = () => {
     return isFocused;
 };
 const ToastContainer = props => {
-    const { containerId, position = 'top-right', autoClose = 5000, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = props;
+    const { containerId, position = 'top-right', autoClose = store_1.TOAST_DEFAULT_AUTO_CLOSE, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = props;
     const theme = (0, react_2.useTheme)();
     const allToasts = react_1.default.useSyncExternalStore(store_1.toastStore.subscribe, store_1.toastStore.getSnapshot, store_1.toastStore.getServerSnapshot);
     const toasts = react_1.default.useMemo(() => allToasts.filter(item => item.containerId === containerId), [allToasts, containerId]);

package/Toast/ToastItem.d.ts

@@ -3,7 +3,7 @@ import { ToastCardProps } from './ToastCard';
 import { ToastIconProps } from './ToastIcon';
 import { ToastCloseButtonProps } from './ToastCloseButton';
 import { ToastActionProps } from './ToastAction';
-import { ToastPosition, ToastState } from './store';
+import { ToastAutoClose, ToastPosition, ToastState } from './store';
 export interface ToastItemComponents {
     readonly Toast: React.ComponentType<ToastCardProps & React.RefAttributes<HTMLDivElement>>;
     readonly Icon: React.ComponentType<ToastIconProps & React.RefAttributes<HTMLSpanElement>>;
@@ -11,7 +11,7 @@ export interface ToastItemComponents {
     readonly Action: React.ComponentType<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
 }
 export interface ToastDefaults {
-    readonly autoClose: number | false;
+    readonly autoClose: ToastAutoClose;
     readonly closeButton: boolean;
     readonly closeOnClick: boolean;
     readonly pauseOnHover: boolean;

package/Toast/ToastItem.js

@@ -28,12 +28,22 @@ const Actions = styled_1.default.div `
  * The clicks on these elements are actions, not the click on the toast
  */
 const INTERACTIVE = 'a, button, input, select, textarea, label, summary, [role="button"], [contenteditable="true"]';
+/**
+ * The `autoClose` of the toast type: the own value of the type, then `default`, then 5000
+ */
+const getAutoClose = (autoClose, type) => {
+    var _a, _b;
+    if (typeof autoClose === 'number' || autoClose === false) {
+        return autoClose;
+    }
+    return (_b = (_a = autoClose[type]) !== null && _a !== void 0 ? _a : autoClose.default) !== null && _b !== void 0 ? _b : store_1.TOAST_DEFAULT_AUTO_CLOSE;
+};
 const ToastItem = props => {
     var _a, _b, _c, _d, _e;
     const { toast, position, defaults, components, isWindowFocused } = props;
     const { toastId, content, type = 'default', isLoading = false, description, actions, icon, onClick, onOpen, isClosing, version, } = toast;
     // The loading toast waits for `toast.update`: it can not be closed by the timer or by the click
-    const autoClose = isLoading ? false : ((_a = toast.autoClose) !== null && _a !== void 0 ? _a : defaults.autoClose);
+    const autoClose = isLoading ? false : ((_a = toast.autoClose) !== null && _a !== void 0 ? _a : getAutoClose(defaults.autoClose, type));
     const closeButton = isLoading ? false : ((_b = toast.closeButton) !== null && _b !== void 0 ? _b : defaults.closeButton);
     const closeOnClick = isLoading ? false : ((_c = toast.closeOnClick) !== null && _c !== void 0 ? _c : defaults.closeOnClick);
     const pauseOnHover = (_d = toast.pauseOnHover) !== null && _d !== void 0 ? _d : defaults.pauseOnHover;

package/Toast/index.d.ts

@@ -1,6 +1,6 @@
 import ToastContainer from './ToastContainer';
 export { toast } from './store';
-export type { ToastId, ToastType, ToastPosition, ToastOptions, ToastUpdateOptions, ToastContent, ToastContentProps, ToastAction as ToastActionItem, ToastState, } from './store';
+export type { ToastId, ToastType, ToastPosition, ToastAutoClose, ToastAutoCloseByType, ToastOptions, ToastUpdateOptions, ToastContent, ToastContentProps, ToastAction as ToastActionItem, ToastState, } from './store';
 export { ToastContainer };
 export type { ToastContainerProps, ToastOverrides } from './ToastContainer';
 export default ToastContainer;

package/Toast/store.d.ts

@@ -2,6 +2,21 @@ import React from 'react';
 export type ToastId = string | number;
 export type ToastType = 'default' | 'info' | 'success' | 'warning' | 'error';
 export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+/**
+ * The time to close the toasts for each type. A type not listed uses `default`
+ */
+export type ToastAutoCloseByType = {
+    readonly [type in ToastType]?: number | false;
+};
+/**
+ * The time in ms before the toast closes, `false` to keep it until the user closes it,
+ * or the time for each type of the toast
+ */
+export type ToastAutoClose = number | false | ToastAutoCloseByType;
+/**
+ * The time to close the toast when `autoClose` does not set one
+ */
+export declare const TOAST_DEFAULT_AUTO_CLOSE = 5000;
 export interface ToastContentProps {
     /**
      * Closes this toast

package/Toast/store.js

@@ -11,7 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toast = exports.toastStore = void 0;
+exports.toast = exports.toastStore = exports.TOAST_DEFAULT_AUTO_CLOSE = void 0;
+/**
+ * The time to close the toast when `autoClose` does not set one
+ */
+exports.TOAST_DEFAULT_AUTO_CLOSE = 5000;
 let toasts = [];
 const listeners = new Set();
 let idCounter = 0;

package/esm/Badge/BadgeBase.js

@@ -15,6 +15,7 @@ import TextWrapper from './BadgeTextWrapper';
 import Container from './BadgeContainer';
 import ButtonDelete from './BadgeDeleteButton';
 import Dot from './BadgeDot';
+import DeleteIcon from './BadgeDeleteIcon';
 const BadgeBase = (props, ref) => {
     const { children, startIcon, dot = false, color, variant, overrides, onDelete, deleteButtonLabel = 'Delete', onClick, onKeyDown } = props, nativeProps = __rest(props, ["children", "startIcon", "dot", "color", "variant", "overrides", "onDelete", "deleteButtonLabel", "onClick", "onKeyDown"]);
     const clickable = typeof onClick === 'function';
@@ -23,6 +24,7 @@ const BadgeBase = (props, ref) => {
         IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || IconWrapper,
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || Container,
         ButtonDelete: (overrides === null || overrides === void 0 ? void 0 : overrides.ButtonDelete) || ButtonDelete,
+        DeleteIcon: (overrides === null || overrides === void 0 ? void 0 : overrides.DeleteIcon) || DeleteIcon,
         Dot: (overrides === null || overrides === void 0 ? void 0 : overrides.Dot) || Dot,
     }), [overrides]);
     // A clickable badge acts as a button, so it is activated by Enter and Space too
@@ -42,14 +44,11 @@ const BadgeBase = (props, ref) => {
         event.stopPropagation();
         onDelete === null || onDelete === void 0 ? void 0 : onDelete(event);
     }, [onDelete]);
-    return (React.createElement(overridesMap.Container, Object.assign({ role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, nativeProps, { onClick: onClick, onKeyDown: handleKeyDown, color: color, ref: ref }),
+    return (React.createElement(overridesMap.Container, Object.assign({ role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, nativeProps, { onClick: onClick, onKeyDown: handleKeyDown, color: color, variant: variant, ref: ref }),
         dot && React.createElement(overridesMap.Dot, null),
         typeof startIcon !== 'undefined' && startIcon !== null && (React.createElement(overridesMap.IconWrapper, null, startIcon)),
         React.createElement(overridesMap.TextWrapper, null, children),
-        typeof onDelete === 'function' && (React.createElement(overridesMap.ButtonDelete
-        // the pale soft badge has the colored icon, as the outlined one
-        , { 
-            // the pale soft badge has the colored icon, as the outlined one
-            variant: variant === 'soft' ? 'outlined' : variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel }))));
+        typeof onDelete === 'function' && (React.createElement(overridesMap.ButtonDelete, { variant: variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel },
+            React.createElement(overridesMap.DeleteIcon, null)))));
 };
 export default React.forwardRef(BadgeBase);

package/esm/Badge/BadgeContainer.js

@@ -11,6 +11,76 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import styled from '@emotion/styled';
+import { useTheme, css } from '@emotion/react';
+import Color from '../Color';
+import { themeFocusRing, BORDER_WIDTH } from '../ThemeProvider/tokens';
+const parseColor = (color, fallback) => {
+    try {
+        return Color.fromString(color);
+    }
+    catch (err) {
+        console.error(`invalid color value «${color}»`);
+        return fallback;
+    }
+};
+const getStandardColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return {
+                $color: theme.color.accentSecondaryContrast,
+                $background: theme.color.accentSecondary,
+            };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return { $background: theme.color.surface.darken(10), $color: theme.color.textPrimary };
+        default: {
+            const $background = parseColor(String(color), theme.color.surface);
+            return {
+                $background,
+                $color: $background.getContrast(theme.color.textPrimary) > 5
+                    ? theme.color.textPrimary
+                    : theme.color.surface,
+            };
+        }
+    }
+};
+const getOutlinedColors = (color, theme) => {
+    switch (true) {
+        case color === 'primary':
+            return { $color: theme.color.accentPrimary, $background: theme.color.accentPrimary };
+        case color === 'secondary':
+            return { $color: theme.color.accentSecondary, $background: theme.color.accentSecondary };
+        case typeof color === 'undefined':
+        case color === 'default':
+            return {
+                $color: Color.fromString(theme.color.textPrimary.toString()),
+                $background: theme.color.textPrimary.lighten(100),
+            };
+        default: {
+            const c = parseColor(String(color), theme.color.textPrimary);
+            return { $color: c, $background: c };
+        }
+    }
+};
+/**
+ * The pale background of the color and the text of the same hue: dark on the light theme,
+ * light on the dark one. `$background` is the color itself
+ */
+const getSoftColors = (color, theme) => {
+    const base = color === 'primary'
+        ? theme.color.accentPrimary
+        : color === 'secondary'
+            ? theme.color.accentSecondary
+            : typeof color === 'undefined' || color === 'default'
+                ? theme.color.textPrimary
+                : parseColor(String(color), theme.color.textPrimary);
+    return {
+        $background: base,
+        $color: theme.isDark ? base.lighten(60) : base.darken(60),
+    };
+};
 const StyledBadge = styled.span `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   font-size: 1em;
@@ -22,17 +92,85 @@ const StyledBadge = styled.span `
   background: none;
   display: inline-flex;
   align-items: center;
-  color: ${({ color, theme }) => {
-    switch (true) {
-        case typeof color === 'undefined':
-        default:
-            return theme.color.textPrimary.toString();
-    }
-}};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+
+  /* One styled element for all variants: switching them must not lose focus */
+  ${({ $variant, $color, $background, $clickable, theme }) => $variant &&
+    css `
+      border-style: solid;
+      border-width: ${BORDER_WIDTH};
+      border-color: ${$background.toString()};
+      --badge-dot-color: ${($variant === 'standard' ? $color : $background).toString()};
+
+      ${$variant === 'soft' &&
+        css `
+        color: ${$color.toString()};
+        background-color: ${$background.alpha(0.18).toString()};
+        border-color: transparent;
+
+        &:focus-visible {
+          outline-style: solid;
+          outline-width: 0.14em;
+          outline-color: ${$background.alpha(0.6).toString()};
+        }
+      `}
+
+      ${$variant === 'soft'
+        ? ''
+        : $variant === 'outlined'
+            ? css `
+              color: ${$color.darken(30).toString()};
+              background-color: transparent;
+
+              &:focus-visible {
+                outline-style: solid;
+                outline-width: 0.14em;
+                outline-color: ${$background.rgbString()};
+              }
+            `
+            : css `
+              color: ${$color.toString()};
+              background-color: ${$background.toString()};
+
+              &:focus-visible {
+                outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
+                ? theme.color.textPrimary.toString()
+                : theme.color.accentPrimary.toString()};
+              }
+            `}
+
+      ${$clickable &&
+        css `
+        cursor: pointer;
+
+        &:hover {
+          ${$variant === 'soft'
+            ? css `
+                background-color: ${$background.alpha(0.3).toString()};
+              `
+            : $variant === 'outlined'
+                ? css `
+                  background-color: ${$background.darken(20).alpha(0.1).toString()};
+                `
+                : css `
+                  background-color: ${$background.darken(30).toString()};
+                  border-color: ${$background.darken(30).toString()};
+                `}
+        }
+      `}
+      ${themeFocusRing(theme)}
+    `}
 `;
 const BadgeContainer = (props, ref) => {
-    // The color is applied by the badge variant, it must not reach the DOM as an attribute
-    const { children, color } = props, nativeProps = __rest(props, ["children", "color"]);
-    return (React.createElement(StyledBadge, Object.assign({}, nativeProps, { ref: ref }), children));
+    const { children, color, variant, onClick } = props, nativeProps = __rest(props, ["children", "color", "variant", "onClick"]);
+    const theme = useTheme();
+    const { $background, $color } = React.useMemo(() => !variant
+        ? { $background: theme.color.surface, $color: theme.color.textPrimary }
+        : variant === 'soft'
+            ? getSoftColors(color, theme)
+            : variant === 'outlined'
+                ? getOutlinedColors(color, theme)
+                : getStandardColors(color, theme), [color, variant, theme]);
+    return (React.createElement(StyledBadge, Object.assign({}, nativeProps, { "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, onClick: onClick, ref: ref }), children));
 };
 export default React.forwardRef(BadgeContainer);

package/esm/Badge/BadgeDeleteButton.js

@@ -14,6 +14,7 @@ import styled from '@emotion/styled';
 import { useTheme } from '@emotion/react';
 import ButtonBase from '../Button/ButtonBase';
 import Color from '../Color';
+import DeleteIcon from './BadgeDeleteIcon';
 const StyledButton = styled(ButtonBase) `
   display: flex;
   padding: 0.3em;
@@ -27,7 +28,9 @@ const StyledButton = styled(ButtonBase) `
   position: relative;
 `;
 const BadgeDeleteButton = (props, ref) => {
-    const { color = 'default', variant = 'standard' } = props, nativeProps = __rest(props, ["color", "variant"]);
+    const { children, color = 'default', variant: badgeVariant = 'standard' } = props, nativeProps = __rest(props, ["children", "color", "variant"]);
+    // The pale soft badge has the colored icon, as the outlined one
+    const variant = badgeVariant === 'soft' ? 'outlined' : badgeVariant;
     const theme = useTheme();
     const { $color, $background } = React.useMemo(() => {
         switch (true) {
@@ -80,8 +83,6 @@ const BadgeDeleteButton = (props, ref) => {
                 };
         }
     }, [color, variant, theme.color]);
-    return (React.createElement(StyledButton, Object.assign({}, nativeProps, { "$color": $color, "$background": $background, ref: ref }),
-        React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" },
-            React.createElement("path", { d: "m256 0c-141.11 0-256 114.89-256 256s114.89 256 256 256 256-114.89 256-256-114.89-256-256-256zm0 39.385c119.81 0 216.62 96.805 216.62 216.62s-96.805 216.62-216.62 216.62-216.62-96.805-216.62-216.62 96.805-216.62 216.62-216.62zm-78.769 118.15a19.692 19.692 0 0 0-5.0961 0.67068 19.692 19.692 0 0 0-8.8293 5.0961 19.692 19.692 0 0 0 0 27.851l64.844 64.844-64.844 64.844a19.692 19.692 0 0 0 0 27.851 19.692 19.692 0 0 0 27.851 0l64.844-64.844 64.844 64.844a19.692 19.692 0 0 0 27.851 0 19.692 19.692 0 0 0 0-27.851l-64.844-64.844 64.844-64.844a19.692 19.692 0 0 0 0-27.851 19.692 19.692 0 0 0-27.851 0l-64.844 64.844-64.844-64.844a19.692 19.692 0 0 0-13.925-5.7669z", fill: "currentColor" }))));
+    return (React.createElement(StyledButton, Object.assign({}, nativeProps, { "$color": $color, "$background": $background, ref: ref }), typeof children === 'undefined' ? React.createElement(DeleteIcon, null) : children));
 };
 export default React.forwardRef(BadgeDeleteButton);

package/esm/Badge/BadgeDeleteIcon.js

@@ -0,0 +1,4 @@
+import React from 'react';
+const BadgeDeleteIcon = (props, ref) => (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512", "aria-hidden": true, focusable: "false" }, props, { ref: ref }),
+    React.createElement("path", { d: "m256 0c-141.11 0-256 114.89-256 256s114.89 256 256 256 256-114.89 256-256-114.89-256-256-256zm0 39.385c119.81 0 216.62 96.805 216.62 216.62s-96.805 216.62-216.62 216.62-216.62-96.805-216.62-216.62 96.805-216.62 216.62-216.62zm-78.769 118.15a19.692 19.692 0 0 0-5.0961 0.67068 19.692 19.692 0 0 0-8.8293 5.0961 19.692 19.692 0 0 0 0 27.851l64.844 64.844-64.844 64.844a19.692 19.692 0 0 0 0 27.851 19.692 19.692 0 0 0 27.851 0l64.844-64.844 64.844 64.844a19.692 19.692 0 0 0 27.851 0 19.692 19.692 0 0 0 0-27.851l-64.844-64.844 64.844-64.844a19.692 19.692 0 0 0 0-27.851 19.692 19.692 0 0 0-27.851 0l-64.844 64.844-64.844-64.844a19.692 19.692 0 0 0-13.925-5.7669z", fill: "currentColor" })));
+export default React.forwardRef(BadgeDeleteIcon);

package/esm/Badge/BadgeOutlined.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import BadgeStyled from './BadgeStyled';
+import Badge from './index';
 /**
  * The badge with the `outlined` variant. Prefer `<Badge variant="outlined">`
  */
-const BadgeOutlined = (props, ref) => React.createElement(BadgeStyled, Object.assign({}, props, { variant: "outlined", ref: ref }));
+const BadgeOutlined = (props, ref) => React.createElement(Badge, Object.assign({}, props, { variant: "outlined", ref: ref }));
 export default React.forwardRef(BadgeOutlined);

package/esm/Badge/BadgeStandard.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import BadgeStyled from './BadgeStyled';
+import Badge from './index';
 /**
  * The badge with the `standard` variant. Prefer `<Badge variant="standard">`
  */
-const BadgeStandard = (props, ref) => React.createElement(BadgeStyled, Object.assign({}, props, { variant: "standard", ref: ref }));
+const BadgeStandard = (props, ref) => React.createElement(Badge, Object.assign({}, props, { variant: "standard", ref: ref }));
 export default React.forwardRef(BadgeStandard);

package/esm/Badge/BadgeStyled.js

@@ -1,163 +1,2 @@
-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, css } from '@emotion/react';
-import Color from '../Color';
-import BadgeBase from './BadgeBase';
-import { themeFocusRing, BORDER_WIDTH } from '../ThemeProvider/tokens';
-const parseColor = (color, fallback) => {
-    try {
-        return Color.fromString(color);
-    }
-    catch (err) {
-        console.error(`invalid color value «${color}»`);
-        return fallback;
-    }
-};
-const getStandardColors = (color, theme) => {
-    switch (true) {
-        case color === 'primary':
-            return { $color: theme.color.accentPrimaryContrast, $background: theme.color.accentPrimary };
-        case color === 'secondary':
-            return {
-                $color: theme.color.accentSecondaryContrast,
-                $background: theme.color.accentSecondary,
-            };
-        case typeof color === 'undefined':
-        case color === 'default':
-            return { $background: theme.color.surface.darken(10), $color: theme.color.textPrimary };
-        default: {
-            const $background = parseColor(String(color), theme.color.surface);
-            return {
-                $background,
-                $color: $background.getContrast(theme.color.textPrimary) > 5
-                    ? theme.color.textPrimary
-                    : theme.color.surface,
-            };
-        }
-    }
-};
-const getOutlinedColors = (color, theme) => {
-    switch (true) {
-        case color === 'primary':
-            return { $color: theme.color.accentPrimary, $background: theme.color.accentPrimary };
-        case color === 'secondary':
-            return { $color: theme.color.accentSecondary, $background: theme.color.accentSecondary };
-        case typeof color === 'undefined':
-        case color === 'default':
-            return {
-                $color: Color.fromString(theme.color.textPrimary.toString()),
-                $background: theme.color.textPrimary.lighten(100),
-            };
-        default: {
-            const c = parseColor(String(color), theme.color.textPrimary);
-            return { $color: c, $background: c };
-        }
-    }
-};
-/**
- * The pale background of the color and the text of the same hue: dark on the light theme,
- * light on the dark one. `$background` is the color itself
- */
-const getSoftColors = (color, theme) => {
-    const base = color === 'primary'
-        ? theme.color.accentPrimary
-        : color === 'secondary'
-            ? theme.color.accentSecondary
-            : typeof color === 'undefined' || color === 'default'
-                ? theme.color.textPrimary
-                : parseColor(String(color), theme.color.textPrimary);
-    return {
-        $background: base,
-        $color: theme.isDark ? base.lighten(60) : base.darken(60),
-    };
-};
-/**
- * Both variants are one styled component: switching the variant (e.g. a toggling filter badge)
- * must not remount the element, otherwise the focused badge loses the focus
- */
-const StyledBadge = styled(BadgeBase) `
-  border-style: solid;
-  border-width: ${BORDER_WIDTH};
-  border-color: ${({ $background }) => $background.toString()};
-  --badge-dot-color: ${({ $variant, $background, $color }) => ($variant === 'standard' ? $color : $background).toString()};
-
-  ${({ $variant, $color, $background }) => $variant === 'soft' &&
-    css `
-      color: ${$color.toString()};
-      background-color: ${$background.alpha(0.18).toString()};
-      border-color: transparent;
-
-      &:focus-visible {
-        outline-style: solid;
-        outline-width: 0.14em;
-        outline-color: ${$background.alpha(0.6).toString()};
-      }
-    `}
-
-  ${({ $variant, $color, $background, theme }) => $variant === 'soft'
-    ? ''
-    : $variant === 'outlined'
-        ? css `
-            color: ${$color.darken(30).toString()};
-            background-color: transparent;
-
-            &:focus-visible {
-              outline-style: solid;
-              outline-width: 0.14em;
-              outline-color: ${$background.rgbString()};
-            }
-          `
-        : css `
-            color: ${$color.toString()};
-            background-color: ${$background.toString()};
-
-            &:focus-visible {
-              outline-color: ${$background.rgbString() === theme.color.accentPrimary.rgbString()
-            ? theme.color.textPrimary.toString()
-            : theme.color.accentPrimary.toString()};
-            }
-          `}
-
-  ${({ $clickable, $variant, $background }) => $clickable &&
-    css `
-      cursor: pointer;
-
-      &:hover {
-        ${$variant === 'soft'
-        ? css `
-              background-color: ${$background.alpha(0.3).toString()};
-            `
-        : $variant === 'outlined'
-            ? css `
-                background-color: ${$background.darken(20).alpha(0.1).toString()};
-              `
-            : css `
-                background-color: ${$background.darken(30).toString()};
-                border-color: ${$background.darken(30).toString()};
-              `}
-      }
-    `}
-  ${({ theme }) => themeFocusRing(theme)}
-`;
-const BadgeStyled = (props, ref) => {
-    const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);
-    const theme = useTheme();
-    const { $background, $color } = React.useMemo(() => variant === 'soft'
-        ? getSoftColors(color, theme)
-        : variant === 'outlined'
-            ? getOutlinedColors(color, theme)
-            : getStandardColors(color, theme), [color, variant, theme]);
-    return (React.createElement(StyledBadge, Object.assign({ "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, color: color, variant: variant, onClick: onClick }, restProps, { ref: ref }), children));
-};
-export default React.forwardRef(BadgeStyled);
+// Preserve the old import path without adding a wrapper around Badge
+export { default } from './index';

package/esm/Badge/index.js

@@ -1,5 +1,19 @@
+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 BadgeStyled from './BadgeStyled';
-// One component for both variants, so changing the variant does not remount the badge
-const Badge = (props, ref) => (React.createElement(BadgeStyled, Object.assign({}, props, { ref: ref })));
+import BadgeBase from './BadgeBase';
+// One component for all variants, so changing the variant does not remount the badge
+const Badge = (_a, ref) => {
+    var { variant = 'standard' } = _a, props = __rest(_a, ["variant"]);
+    return React.createElement(BadgeBase, Object.assign({}, props, { variant: variant, ref: ref }));
+};
 export default React.forwardRef(Badge);

package/esm/ThemeProvider/tokens.js

@@ -46,7 +46,7 @@ export const CONTROL_LINE_HEIGHT = '1.2em';
  */
 export const BORDER_WIDTH = '0.0625em';
 /**
- * The border of the buttons. The standard and the plain buttons have no border:
+ * The border of the buttons. The standard, plain and soft buttons have no border:
  * their padding is larger by this width, so all the variants have the same size
  */
 export const CONTROL_BORDER = BORDER_WIDTH;

package/esm/Toast/ToastContainer.js

@@ -7,7 +7,7 @@ import Icon from './ToastIcon';
 import CloseButton from './ToastCloseButton';
 import Action from './ToastAction';
 import ToastItem from './ToastItem';
-import { toastStore } from './store';
+import { toastStore, TOAST_DEFAULT_AUTO_CLOSE, } from './store';
 const POSITIONS = [
     'top-left',
     'top-center',
@@ -84,7 +84,7 @@ const useWindowFocused = () => {
     return isFocused;
 };
 const ToastContainer = props => {
-    const { containerId, position = 'top-right', autoClose = 5000, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = props;
+    const { containerId, position = 'top-right', autoClose = TOAST_DEFAULT_AUTO_CLOSE, limit, closeButton = true, closeButtonLabel = 'Close', closeOnClick = true, pauseOnHover = true, pauseOnFocusLoss = true, newestOnTop = false, hotkey = 'F8', label = 'Notifications', zIndex, overrides, } = props;
     const theme = useTheme();
     const allToasts = React.useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot, toastStore.getServerSnapshot);
     const toasts = React.useMemo(() => allToasts.filter(item => item.containerId === containerId), [allToasts, containerId]);

package/esm/Toast/ToastItem.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { TOAST_ANIMATION_MS } from './ToastCard';
-import { toast as toastApi, toastStore } from './store';
+import { toast as toastApi, toastStore, TOAST_DEFAULT_AUTO_CLOSE, } from './store';
 const Body = styled.div `
   flex: 1;
   min-width: 0;
@@ -23,12 +23,22 @@ const Actions = styled.div `
  * The clicks on these elements are actions, not the click on the toast
  */
 const INTERACTIVE = 'a, button, input, select, textarea, label, summary, [role="button"], [contenteditable="true"]';
+/**
+ * The `autoClose` of the toast type: the own value of the type, then `default`, then 5000
+ */
+const getAutoClose = (autoClose, type) => {
+    var _a, _b;
+    if (typeof autoClose === 'number' || autoClose === false) {
+        return autoClose;
+    }
+    return (_b = (_a = autoClose[type]) !== null && _a !== void 0 ? _a : autoClose.default) !== null && _b !== void 0 ? _b : TOAST_DEFAULT_AUTO_CLOSE;
+};
 const ToastItem = props => {
     var _a, _b, _c, _d, _e;
     const { toast, position, defaults, components, isWindowFocused } = props;
     const { toastId, content, type = 'default', isLoading = false, description, actions, icon, onClick, onOpen, isClosing, version, } = toast;
     // The loading toast waits for `toast.update`: it can not be closed by the timer or by the click
-    const autoClose = isLoading ? false : ((_a = toast.autoClose) !== null && _a !== void 0 ? _a : defaults.autoClose);
+    const autoClose = isLoading ? false : ((_a = toast.autoClose) !== null && _a !== void 0 ? _a : getAutoClose(defaults.autoClose, type));
     const closeButton = isLoading ? false : ((_b = toast.closeButton) !== null && _b !== void 0 ? _b : defaults.closeButton);
     const closeOnClick = isLoading ? false : ((_c = toast.closeOnClick) !== null && _c !== void 0 ? _c : defaults.closeOnClick);
     const pauseOnHover = (_d = toast.pauseOnHover) !== null && _d !== void 0 ? _d : defaults.pauseOnHover;

package/esm/Toast/store.js

@@ -9,6 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+/**
+ * The time to close the toast when `autoClose` does not set one
+ */
+export const TOAST_DEFAULT_AUTO_CLOSE = 5000;
 let toasts = [];
 const listeners = new Set();
 let idCounter = 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -150,6 +150,11 @@
       "import": "./esm/Badge/BadgeDeleteButton.js",
       "require": "./Badge/BadgeDeleteButton.js"
     },
+    "./Badge/BadgeDeleteIcon": {
+      "types": "./Badge/BadgeDeleteIcon.d.ts",
+      "import": "./esm/Badge/BadgeDeleteIcon.js",
+      "require": "./Badge/BadgeDeleteIcon.js"
+    },
     "./Badge/BadgeDot": {
       "types": "./Badge/BadgeDot.d.ts",
       "import": "./esm/Badge/BadgeDot.js",