@via-profit/ui-kit 0.10.1 → 0.12.0

package/Popper/Popper.js

@@ -81,19 +81,24 @@ const Popper = (props, ref) => {
         }
     }, [actualPlacement]);
     const childrenMemo = react_1.default.useMemo(() => children, [children]);
-    const renderNode = react_1.default.useCallback(() => (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, pointerEvents: isVisible ? 'auto' : 'none' }), (positionStrategy === 'fixed' && {
-            position: 'fixed',
-        })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
-            popperRef.current = el;
-            if (ref) {
-                if (typeof ref === 'function') {
-                    ref(el);
+    const renderNode = react_1.default.useCallback(() => {
+        var _a, _b;
+        return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), nativeProps.style), { opacity: isVisible ? 1 : 0, 
+                // A hidden popper never intercepts the pointer; a visible one lets the caller opt out
+                pointerEvents: !isVisible ? 'none' : ((_b = (_a = nativeProps.style) === null || _a === void 0 ? void 0 : _a.pointerEvents) !== null && _b !== void 0 ? _b : 'auto') }), (positionStrategy === 'fixed' && {
+                position: 'fixed',
+            })), zIndex: zIndex, positionStrategy: positionStrategy, "data-popper-placement": actualPlacement, "data-popper-strategy": positionStrategy, ref: el => {
+                popperRef.current = el;
+                if (ref) {
+                    if (typeof ref === 'function') {
+                        ref(el);
+                    }
+                    if (typeof ref === 'object') {
+                        ref.current = el;
+                    }
                 }
-                if (typeof ref === 'object') {
-                    ref.current = el;
-                }
-            }
-        } }), childrenMemo)), [
+            } }), childrenMemo));
+    }, [
         overridesMap,
         nativeProps,
         style,

package/ThemeProvider/tokens.d.ts

@@ -31,7 +31,7 @@ export declare const CONTROL_LINE_HEIGHT = "1.2em";
  */
 export declare 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 declare const CONTROL_BORDER = "0.0625em";

package/ThemeProvider/tokens.js

@@ -53,7 +53,7 @@ exports.CONTROL_LINE_HEIGHT = '1.2em';
  */
 exports.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
  */
 exports.CONTROL_BORDER = exports.BORDER_WIDTH;

package/Toast/ToastContainer.d.ts

@@ -3,7 +3,7 @@ import { ToastCardProps } from './ToastCard';
 import { ToastIconProps } from './ToastIcon';
 import { ToastCloseButtonProps } from './ToastCloseButton';
 import { ToastActionProps } from './ToastAction';
-import { ToastPosition } from './store';
+import { ToastAutoClose, ToastPosition } from './store';
 export interface ToastContainerProps {
     /**
      * The container shows only the toasts with the same `containerId`.
@@ -17,10 +17,12 @@ export interface ToastContainerProps {
      */
     readonly position?: ToastPosition;
     /**
-     * The time in ms before the toast closes, or `false` to keep the toasts until the user closes them
+     * The time in ms before the toast closes, or `false` to keep the toasts until the user closes them.
+     * The object sets the time for each type, e.g. `{ success: 2000, error: false }`;
+     * a type not listed uses `default` — then 5000
      * Default: 5000
      */
-    readonly autoClose?: number | false;
+    readonly autoClose?: ToastAutoClose;
     /**
      * The maximum number of the toasts on the screen. The rest wait in the queue
      * Default: undefined (no limit)

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/Tooltip/index.d.ts

@@ -49,6 +49,12 @@ export type TooltipProps = {
      * Default: false
      */
     readonly describeChild?: boolean;
+    /**
+     * Lets the pointer move onto the tooltip, e.g. to select its text or click a link inside.
+     * When `false`, the tooltip does not receive pointer events and cannot block the elements under it
+     * Default: false
+     */
+    readonly interactive?: boolean;
     /**
      * Default: 8
      */

package/Tooltip/index.js

@@ -45,7 +45,7 @@ const setRef = (ref, value) => {
 const isEmptyTitle = (title) => title === null || typeof title === 'undefined' || title === false || title === '';
 const Tooltip = props => {
     var _a;
-    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, offset = 8, zIndex, id, overrides, } = props;
+    const { title, children, placement = 'top', arrow = false, enterDelay = 400, leaveDelay = 100, isOpen, onOpenChange, describeChild = false, interactive = false, offset = 8, zIndex, id, overrides, } = props;
     const theme = (0, react_2.useTheme)();
     const generatedId = `tooltip-${react_1.default.useId().replace(/:/g, '')}`;
     const tooltipId = id || generatedId;
@@ -182,12 +182,15 @@ const Tooltip = props => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         anchor,
         react_1.default.createElement(Popper_1.default, { isOpen: open, anchorElement: anchorElement, anchorPos: placement, autoFlip: true, offset: offset, viewportMargin: 8, zIndex: zIndex !== null && zIndex !== void 0 ? zIndex : theme.zIndex.modal + 1, onAnchorPosChanged: setActualPlacement, id: tooltipId, role: "tooltip", 
-            // The pointer can move from the element onto the tooltip without hiding it
-            onPointerEnter: clearTimer, onPointerLeave: event => {
-                if (isHoverPointer(event)) {
-                    hide(leaveDelay);
+            // Without `interactive` the tooltip must not intercept the pointer: otherwise it
+            // blocks the elements under it and sticks under the cursor that moves across it
+            style: interactive ? undefined : { pointerEvents: 'none' }, onPointerEnter: interactive ? clearTimer : undefined, onPointerLeave: interactive
+                ? event => {
+                    if (isHoverPointer(event)) {
+                        hide(leaveDelay);
+                    }
                 }
-            } },
+                : undefined },
             react_1.default.createElement(overridesMap.Container, null,
                 title,
                 arrow && react_1.default.createElement(overridesMap.Arrow, { placement: actualPlacement })))));

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);