@via-profit/ui-kit 0.3.0 → 0.5.0

package/Autocomplete/context.js

@@ -28,15 +28,15 @@ const reducer = (state, action) => {
 };
 exports.reducer = reducer;
 const createInitialState = (params) => {
-    const { filterItems, isOpen, items, selectedItemToString, value } = params;
-    const inputValue = !value
-        ? ''
-        : selectedItemToString(value);
+    const { filterItems, isOpen, items, selectedItemToString, value, multiple } = params;
+    // With multiple the field holds only the search text, the selected items are tags
+    const inputValue = multiple || value == null ? '' : selectedItemToString(value);
     const data = {
         inputValue: inputValue,
         query: inputValue.trim().toLocaleLowerCase(),
     };
-    const filteredItems = filterItems ? filterItems(items, data) : items;
+    // As while typing: an empty query shows all the items
+    const filteredItems = filterItems && data.query !== '' ? filterItems(items, data) : items;
     return Object.assign(Object.assign({}, exports.defaultState), { filteredItems,
         inputValue, currentValue: value, currentOpen: Boolean(isOpen) });
 };

package/Autocomplete/index.js

@@ -42,6 +42,7 @@ const Autocomplete = react_1.default.forwardRef((props, ref) => {
         filterItems,
         value,
         isOpen,
+        multiple,
     }));
     return (react_1.default.createElement(context_1.ContextProvider, { initialState: initialState },
         react_1.default.createElement(AutocompleteContainer_1.default, Object.assign({}, restProps, { items: items, filterItems: filterItems, isOpen: isOpen, multiple: multiple, selectedItemToString: selectedItemToString, value: value, ref: ref }), children)));

package/Avatar/AvatarBase.js

@@ -28,7 +28,7 @@ const AvatarBase = (props, ref) => {
         Picture: AvatarPicture_1.default }, overrides)), [overrides]);
     return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, ref: ref }),
         typeof src !== 'undefined' && src !== null && (src === null || src === void 0 ? void 0 : src.length) !== 0 && (react_1.default.createElement(overridesMap.IconWrapper, null,
-            react_1.default.createElement(overridesMap.Picture, { src: src, variant: variant }))),
+            react_1.default.createElement(overridesMap.Picture, { src: src, variant: variant, alt: alt }))),
         (!src || src === null || (src === null || src === void 0 ? void 0 : src.length) === 0) && (react_1.default.createElement(overridesMap.TextWrapper, null, children)),
         isOnline && react_1.default.createElement(AvatarOnlineBadge_1.default, null)));
 };

package/Avatar/AvatarContainer.js

@@ -25,20 +25,15 @@ const StyledAvatar = styled_1.default.span `
   transition: all 180ms ease-out 0s;
   background: none;
   position: relative;
-  width: ${({ size }) => size || '2.5em'};
-  height: ${({ size }) => size || '2.5em'};
+  width: ${({ $size }) => $size || '2.5em'};
+  height: ${({ $size }) => $size || '2.5em'};
   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()};
 `;
 const AvatarContainer = (props, ref) => {
-    const { children } = props, nativeProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(StyledAvatar, Object.assign({}, nativeProps, { ref: ref }), children));
+    // The color is applied by <Avatar>, it must not reach the DOM as an attribute
+    const { children, size, color } = props, nativeProps = __rest(props, ["children", "size", "color"]);
+    return (react_1.default.createElement(StyledAvatar, Object.assign({}, nativeProps, { "$size": size, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(AvatarContainer);

package/Avatar/AvatarPicture.d.ts

@@ -27,6 +27,10 @@ export type AvatarPictureProps = React.HTMLAttributes<HTMLPictureElement> & {
      * **Default**: `circular`
      */
     readonly variant?: 'circular' | 'rounded' | 'square';
+    /**
+     * HTML image alt attribute
+     */
+    readonly alt?: string;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLPictureElement> & {
     /**
@@ -49,6 +53,10 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * \
      * **Default**: `circular`
      */
-    readonly variant?: "square" | "circular" | "rounded" | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
+    readonly variant?: "square" | "rounded" | "circular" | undefined;
+    /**
+     * HTML image alt attribute
+     */
+    readonly alt?: string | undefined;
+} & React.RefAttributes<HTMLPictureElement>>;
 export default _default;

package/Avatar/AvatarPicture.js

@@ -47,7 +47,7 @@ const Picture = styled_1.default.picture `
 }}
 `;
 const AvatarPicture = (props, ref) => {
-    const { src, variant } = props, nativeProps = __rest(props, ["src", "variant"]);
+    const { src, variant, alt } = props, nativeProps = __rest(props, ["src", "variant", "alt"]);
     const defaultSrc = react_1.default.useMemo(() => {
         if (typeof src === 'undefined' || (src === null || src === void 0 ? void 0 : src.length) === 0) {
             return null;
@@ -61,13 +61,14 @@ const AvatarPicture = (props, ref) => {
             return retData;
         }
         retData = src.find(src => src.type === 'image/jpeg');
-        return retData ? retData : null;
+        // Without png or jpeg the first image is better than an empty src
+        return retData || src[0] || null;
     }, [src]);
     return (react_1.default.createElement(Picture, Object.assign({}, nativeProps, { "$variant": variant, ref: ref }),
         src.map((_a) => {
             var { isDefault } = _a, srcProps = __rest(_a, ["isDefault"]);
             return (react_1.default.createElement("source", Object.assign({ key: `${srcProps.srcSet}:${srcProps.type}` }, srcProps)));
         }),
-        react_1.default.createElement("img", { src: (defaultSrc === null || defaultSrc === void 0 ? void 0 : defaultSrc.srcSet) || '' })));
+        react_1.default.createElement("img", { src: (defaultSrc === null || defaultSrc === void 0 ? void 0 : defaultSrc.srcSet) || '', alt: alt })));
 };
 exports.default = react_1.default.forwardRef(AvatarPicture);

package/Avatar/index.js

@@ -19,18 +19,11 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const Color_1 = __importDefault(require("../Color"));
 const AvatarBase_1 = __importDefault(require("./AvatarBase"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
 const StyledAvatarBase = (0, styled_1.default)(AvatarBase_1.default) `
   position: relative;
   color: ${({ $color }) => $color.toString()};
   background-color: ${({ $background }) => $background.toString()};
-  ${({ $background }) => {
-    switch (true) {
-        case $background.getLuminance() > 0.49:
-            return $background.darken(40).alpha(0.8).toString();
-        default:
-            return $background.darken(20).alpha(0.5).toString();
-    }
-}};
   &:hover {
     background-color: ${({ $background, $clickable }) => $clickable && $background.darken(30).toString()};
   }
@@ -62,9 +55,17 @@ const StyledAvatarBase = (0, styled_1.default)(AvatarBase_1.default) `
 }}
 `;
 const Avatar = (props, ref) => {
-    const { children, color, onClick, isOnline, size, src, variant = 'circular', alt, overrides } = props, restProps = __rest(props, ["children", "color", "onClick", "isOnline", "size", "src", "variant", "alt", "overrides"]);
+    const _a = (0, useThemeProps_1.default)('Avatar', props), { children, color, onClick, onKeyDown, isOnline, size, src, variant = 'circular', alt, overrides } = _a, restProps = __rest(_a, ["children", "color", "onClick", "onKeyDown", "isOnline", "size", "src", "variant", "alt", "overrides"]);
     const theme = (0, react_2.useTheme)();
     const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
+    // A clickable avatar acts as a button, so it is activated by Enter and Space too
+    const handleKeyDown = react_1.default.useCallback((event) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (clickable && !event.defaultPrevented && (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+    }, [clickable, onKeyDown]);
     const { $background, $color } = react_1.default.useMemo(() => {
         switch (true) {
             case color === 'primary':
@@ -107,6 +108,6 @@ const Avatar = (props, ref) => {
                 };
         }
     }, [color, theme.color]);
-    return (react_1.default.createElement(StyledAvatarBase, Object.assign({ "$clickable": clickable, "$color": $color, "$background": $background, color: color, onClick: onClick, size: size, src: src, variant: variant, alt: alt, tabIndex: clickable ? 0 : -1, ref: ref, overrides: overrides, isOnline: isOnline }, restProps), children));
+    return (react_1.default.createElement(StyledAvatarBase, Object.assign({ "$clickable": clickable, "$color": $color, "$background": $background, color: color, onClick: onClick, onKeyDown: handleKeyDown, size: size, src: src, variant: variant, alt: alt, role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, ref: ref, overrides: overrides, isOnline: isOnline }, restProps), children));
 };
 exports.default = react_1.default.forwardRef(Avatar);

package/Badge/BadgeBase.d.ts

@@ -26,7 +26,16 @@ export interface BadgeBaseProps extends Omit<BadgeNativeProps, 'color'> {
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
     readonly color?: BadgeContainerProps['color'];
+    /**
+     * If passed, the delete button is shown. Its click does not reach `onClick` of the badge
+     */
     readonly onDelete?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Accessible label of the delete button (it contains only an icon)\
+     * \
+     * **Default**: `'Delete'`
+     */
+    readonly deleteButtonLabel?: string;
     /**
      * Overridable components map
      */

package/Badge/BadgeBase.js

@@ -20,16 +20,34 @@ const BadgeTextWrapper_1 = __importDefault(require("./BadgeTextWrapper"));
 const BadgeContainer_1 = __importDefault(require("./BadgeContainer"));
 const BadgeDeleteButton_1 = __importDefault(require("./BadgeDeleteButton"));
 const BadgeBase = (props, ref) => {
-    const { children, startIcon, color, variant, overrides, onDelete } = props, nativeProps = __rest(props, ["children", "startIcon", "color", "variant", "overrides", "onDelete"]);
+    const { children, startIcon, color, variant, overrides, onDelete, deleteButtonLabel = 'Delete', onClick, onKeyDown } = props, nativeProps = __rest(props, ["children", "startIcon", "color", "variant", "overrides", "onDelete", "deleteButtonLabel", "onClick", "onKeyDown"]);
+    const clickable = typeof onClick === 'function';
     const overridesMap = react_1.default.useMemo(() => ({
         TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || BadgeTextWrapper_1.default,
         IconWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.IconWrapper) || BadgeIconWrapper_1.default,
         Container: (overrides === null || overrides === void 0 ? void 0 : overrides.Container) || BadgeContainer_1.default,
         ButtonDelete: (overrides === null || overrides === void 0 ? void 0 : overrides.ButtonDelete) || BadgeDeleteButton_1.default,
     }), [overrides]);
-    return (react_1.default.createElement(overridesMap.Container, Object.assign({}, nativeProps, { color: color, ref: ref }),
+    // A clickable badge acts as a button, so it is activated by Enter and Space too
+    const handleKeyDown = react_1.default.useCallback((event) => {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        // The keys of the focused delete button must not activate the badge
+        if (clickable &&
+            !event.defaultPrevented &&
+            event.target === event.currentTarget &&
+            (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+    }, [clickable, onKeyDown]);
+    const handleDelete = react_1.default.useCallback((event) => {
+        // Deleting is not a click on the badge
+        event.stopPropagation();
+        onDelete === null || onDelete === void 0 ? void 0 : onDelete(event);
+    }, [onDelete]);
+    return (react_1.default.createElement(overridesMap.Container, Object.assign({ role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined }, nativeProps, { onClick: onClick, onKeyDown: handleKeyDown, color: color, ref: ref }),
         typeof startIcon !== 'undefined' && startIcon !== null && (react_1.default.createElement(overridesMap.IconWrapper, null, startIcon)),
         react_1.default.createElement(overridesMap.TextWrapper, null, children),
-        typeof onDelete === 'function' && (react_1.default.createElement(overridesMap.ButtonDelete, { variant: variant, onClick: onDelete, color: color }))));
+        typeof onDelete === 'function' && (react_1.default.createElement(overridesMap.ButtonDelete, { variant: variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel }))));
 };
 exports.default = react_1.default.forwardRef(BadgeBase);

package/Badge/BadgeContainer.js

@@ -36,7 +36,8 @@ const StyledBadge = styled_1.default.span `
 }};
 `;
 const BadgeContainer = (props, ref) => {
-    const { children } = props, nativeProps = __rest(props, ["children"]);
+    // 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_1.default.createElement(StyledBadge, Object.assign({}, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(BadgeContainer);

package/Badge/BadgeDeleteButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 export type BadgeDeleteButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children'> & {
-    readonly color?: 'primary' | 'secondaary' | 'default' | string;
+    readonly color?: 'primary' | 'secondary' | 'default' | string;
     readonly variant?: 'standard' | 'outlined';
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {

package/Badge/BadgeOutlined.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BadgeBaseProps } from './BadgeBase';
+import type { BadgeBaseProps } from './BadgeBase';
 export type BadgeOutlinedProps = BadgeBaseProps;
 declare const _default: React.ForwardRefExoticComponent<BadgeBaseProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Badge/BadgeOutlined.js

@@ -1,87 +1,12 @@
 "use strict";
-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;
-};
 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 styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
-const BadgeBase_1 = __importDefault(require("./BadgeBase"));
-const StyledOutlinedBadge = (0, styled_1.default)(BadgeBase_1.default) `
-  color: ${({ $color }) => $color.darken(30).toString()};
-  border-color: ${({ $background }) => $background.toString()};
-  border-style: solid;
-  border-width: 0.14em;
-  background-color: transparent;
-  &:hover {
-    background-color: ${({ $background }) => $background.darken(20).alpha(0.1).toString()};
-  }
-  &:focus-visible {
-    outline-style: solid;
-    outline-width: 0.14em;
-    outline-color: ${({ $background }) => $background.rgbString()};
-  }
-  ${({ $clickable }) => $clickable &&
-    (0, react_2.css) `
-      cursor: pointer;
-    `}
-`;
-const BadgeOutlined = (props, ref) => {
-    const { children, color, onClick } = props, restProps = __rest(props, ["children", "color", "onClick"]);
-    const theme = (0, react_2.useTheme)();
-    const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
-    const { $background, $color } = react_1.default.useMemo(() => {
-        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_1.default.fromString(theme.color.textPrimary.toString()),
-                    $background: theme.color.textPrimary.lighten(100),
-                };
-            case typeof color === 'string': {
-                let c = theme.color.textPrimary;
-                try {
-                    if (color) {
-                        c = Color_1.default.fromString(color);
-                    }
-                }
-                catch (err) {
-                    console.error(`invalid color value «${color}»`);
-                }
-                return {
-                    $color: c,
-                    $background: c,
-                };
-            }
-            default:
-                return {
-                    $color: theme.color.textPrimary,
-                    $background: theme.color.textPrimary,
-                };
-        }
-    }, [color, theme.color]);
-    return (react_1.default.createElement(StyledOutlinedBadge, Object.assign({ "$color": $color, "$background": $background, "$clickable": clickable, onClick: onClick, color: color, variant: "outlined" }, restProps, { tabIndex: clickable ? 0 : -1, ref: ref }), children));
-};
+const BadgeStyled_1 = __importDefault(require("./BadgeStyled"));
+/**
+ * The badge with the `outlined` variant. Prefer `<Badge variant="outlined">`
+ */
+const BadgeOutlined = (props, ref) => react_1.default.createElement(BadgeStyled_1.default, Object.assign({}, props, { variant: "outlined", ref: ref }));
 exports.default = react_1.default.forwardRef(BadgeOutlined);

package/Badge/BadgeStandard.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BadgeBaseProps } from './BadgeBase';
+import type { BadgeBaseProps } from './BadgeBase';
 export type BadgeStandardProps = BadgeBaseProps;
 declare const _default: React.ForwardRefExoticComponent<BadgeBaseProps & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Badge/BadgeStandard.js

@@ -1,98 +1,12 @@
 "use strict";
-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;
-};
 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 styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Color_1 = __importDefault(require("../Color"));
-const BadgeBase_1 = __importDefault(require("./BadgeBase"));
-const StyledStandardBadge = (0, styled_1.default)(BadgeBase_1.default) `
-  color: ${({ $color }) => $color.toString()};
-  border-color: ${({ $background }) => $background.toString()};
-  border-style: solid;
-  border-width: 0.14em;
-  background-color: ${({ $background }) => $background.toString()};
-  ${({ $background }) => {
-    switch (true) {
-        case $background.getLuminance() > 0.49:
-            return $background.darken(40).alpha(0.8).toString();
-        default:
-            return $background.darken(20).alpha(0.5).toString();
-    }
-}};
-  &:hover {
-    background-color: ${({ $background }) => $background.darken(30).toString()};
-    border-color: ${({ $background }) => $background.darken(30).toString()};
-  }
-  &:focus-visible {
-    outline-color: ${({ theme, $background }) => $background.rgbString() === theme.color.accentPrimary.rgbString()
-    ? theme.color.textPrimary.toString()
-    : theme.color.accentPrimary.toString()};
-  }
-  ${({ $clickable }) => $clickable &&
-    (0, react_2.css) `
-      cursor: pointer;
-    `}
-`;
-const BadgeStandard = (props, ref) => {
-    const { children, color, onClick } = props, restProps = __rest(props, ["children", "color", "onClick"]);
-    const theme = (0, react_2.useTheme)();
-    const clickable = react_1.default.useMemo(() => typeof onClick === 'function', [onClick]);
-    const { $background, $color } = react_1.default.useMemo(() => {
-        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,
-                };
-            case typeof color === 'string': {
-                let $background = theme.color.surface;
-                try {
-                    if (color) {
-                        $background = Color_1.default.fromString(color);
-                    }
-                }
-                catch (err) {
-                    console.error(`invalid color value «${color}»`);
-                }
-                return {
-                    $background,
-                    $color: $background.getContrast(theme.color.textPrimary) > 5
-                        ? theme.color.textPrimary
-                        : theme.color.surface,
-                };
-            }
-            default:
-                return {
-                    $background: theme.color.surface,
-                    $color: theme.color.textPrimary,
-                };
-        }
-    }, [color, theme.color]);
-    return (react_1.default.createElement(StyledStandardBadge, Object.assign({ variant: "standard", "$clickable": clickable, "$color": $color, "$background": $background, color: color, onClick: onClick }, restProps, { tabIndex: clickable ? 0 : -1, ref: ref }), children));
-};
+const BadgeStyled_1 = __importDefault(require("./BadgeStyled"));
+/**
+ * The badge with the `standard` variant. Prefer `<Badge variant="standard">`
+ */
+const BadgeStandard = (props, ref) => react_1.default.createElement(BadgeStyled_1.default, Object.assign({}, props, { variant: "standard", ref: ref }));
 exports.default = react_1.default.forwardRef(BadgeStandard);

package/Badge/BadgeStyled.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BadgeBaseProps } from './BadgeBase';
+export type BadgeStyledProps = BadgeBaseProps;
+declare const _default: React.ForwardRefExoticComponent<BadgeBaseProps & React.RefAttributes<HTMLSpanElement>>;
+export default _default;

package/Badge/BadgeStyled.js

@@ -0,0 +1,127 @@
+"use strict";
+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;
+};
+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 styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const BadgeBase_1 = __importDefault(require("./BadgeBase"));
+const tokens_1 = require("../ThemeProvider/tokens");
+const parseColor = (color, fallback) => {
+    try {
+        return Color_1.default.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_1.default.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 };
+        }
+    }
+};
+/**
+ * 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 = (0, styled_1.default)(BadgeBase_1.default) `
+  border-style: solid;
+  border-width: 0.14em;
+  border-color: ${({ $background }) => $background.toString()};
+
+  ${({ $variant, $color, $background, theme }) => $variant === 'outlined'
+    ? (0, react_2.css) `
+          color: ${$color.darken(30).toString()};
+          background-color: transparent;
+
+          &:focus-visible {
+            outline-style: solid;
+            outline-width: 0.14em;
+            outline-color: ${$background.rgbString()};
+          }
+        `
+    : (0, react_2.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 &&
+    (0, react_2.css) `
+      cursor: pointer;
+
+      &:hover {
+        ${$variant === 'outlined'
+        ? (0, react_2.css) `
+              background-color: ${$background.darken(20).alpha(0.1).toString()};
+            `
+        : (0, react_2.css) `
+              background-color: ${$background.darken(30).toString()};
+              border-color: ${$background.darken(30).toString()};
+            `}
+      }
+    `}
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
+`;
+const BadgeStyled = (props, ref) => {
+    const { children, color, variant = 'standard', onClick } = props, restProps = __rest(props, ["children", "color", "variant", "onClick"]);
+    const theme = (0, react_2.useTheme)();
+    const { $background, $color } = react_1.default.useMemo(() => variant === 'outlined' ? getOutlinedColors(color, theme) : getStandardColors(color, theme), [color, variant, theme]);
+    return (react_1.default.createElement(StyledBadge, Object.assign({ "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, color: color, variant: variant, onClick: onClick }, restProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(BadgeStyled);

package/Badge/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BadgeStandardProps } from './BadgeStandard';
-import { BadgeOutlinedProps } from './BadgeOutlined';
+import type { BadgeStandardProps } from './BadgeStandard';
+import type { BadgeOutlinedProps } from './BadgeOutlined';
 export type BadgeProps = (BadgeStandardProps | BadgeOutlinedProps) & {
     /**
      * Badge style variant\

package/Badge/index.js

@@ -1,27 +1,11 @@
 "use strict";
-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;
-};
 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 BadgeStandard_1 = __importDefault(require("./BadgeStandard"));
-const BadgeOutlined_1 = __importDefault(require("./BadgeOutlined"));
-const Badge = (props, ref) => {
-    const { variant } = props, badgeProps = __rest(props, ["variant"]);
-    if (variant === 'outlined') {
-        return react_1.default.createElement(BadgeOutlined_1.default, Object.assign({}, badgeProps, { ref: ref }));
-    }
-    return react_1.default.createElement(BadgeStandard_1.default, Object.assign({}, badgeProps, { ref: ref }));
-};
+const BadgeStyled_1 = __importDefault(require("./BadgeStyled"));
+const useThemeProps_1 = __importDefault(require("../ThemeProvider/useThemeProps"));
+// One component for both variants, so changing the variant does not remount the badge
+const Badge = (props, ref) => (react_1.default.createElement(BadgeStyled_1.default, Object.assign({}, (0, useThemeProps_1.default)('Badge', props), { ref: ref })));
 exports.default = react_1.default.forwardRef(Badge);