@via-profit/ui-kit 0.3.0 → 0.5.0

package/esm/Avatar/AvatarIconWrapper.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Wrapper = styled.span `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+`;
+const AvatarIconWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(AvatarIconWrapper);

package/esm/Avatar/AvatarOnlineBadge.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const OnlineBadge = styled.span `
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  bottom: 14%;
+  right: 7%;
+  width: 0.6em;
+  height: 0.6em;
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transform: scale(1) translate(50%, 50%);
+  transform-origin: 100% 100%;
+  background-color: ${({ theme }) => theme.color.success.toString()};
+`;
+const AvatarOnlineBadge = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return React.createElement(OnlineBadge, Object.assign({}, nativeProps, { ref: ref }));
+};
+export default React.forwardRef(AvatarOnlineBadge);

package/esm/Avatar/AvatarPicture.js

@@ -0,0 +1,69 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+const Picture = styled.picture `
+  background-position: center;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+  & img {
+    width: 100%;
+    height: 100%;
+  }
+
+  ${({ $variant, theme }) => {
+    switch ($variant) {
+        case 'rounded':
+            return css `
+          border-radius: ${theme.shape.radiusFactor * 0.8}em;
+          overflow: hidden;
+        `;
+        case 'square':
+            return css `
+          border-radius: inherit;
+        `;
+        default:
+            return css `
+          border-radius: 100%;
+          overflow: hidden;
+        `;
+    }
+}}
+`;
+const AvatarPicture = (props, ref) => {
+    const { src, variant, alt } = props, nativeProps = __rest(props, ["src", "variant", "alt"]);
+    const defaultSrc = React.useMemo(() => {
+        if (typeof src === 'undefined' || (src === null || src === void 0 ? void 0 : src.length) === 0) {
+            return null;
+        }
+        let retData = src.find(({ isDefault }) => isDefault);
+        if (retData) {
+            return retData;
+        }
+        retData = src.find(src => src.type === 'image/png');
+        if (retData) {
+            return retData;
+        }
+        retData = src.find(src => src.type === 'image/jpeg');
+        // Without png or jpeg the first image is better than an empty src
+        return retData || src[0] || null;
+    }, [src]);
+    return (React.createElement(Picture, Object.assign({}, nativeProps, { "$variant": variant, ref: ref }),
+        src.map((_a) => {
+            var { isDefault } = _a, srcProps = __rest(_a, ["isDefault"]);
+            return (React.createElement("source", Object.assign({ key: `${srcProps.srcSet}:${srcProps.type}` }, srcProps)));
+        }),
+        React.createElement("img", { src: (defaultSrc === null || defaultSrc === void 0 ? void 0 : defaultSrc.srcSet) || '', alt: alt })));
+};
+export default React.forwardRef(AvatarPicture);

package/esm/Avatar/AvatarTextWrapper.js

@@ -0,0 +1,31 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const TextWrapper = styled.span `
+  font-size: 1.5em;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: relative;
+  user-select: none;
+  position: absolute;
+  top: 50%;
+`;
+const AvatarTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(AvatarTextWrapper);

package/esm/Avatar/index.js

@@ -0,0 +1,108 @@
+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 AvatarBase from './AvatarBase';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+const StyledAvatarBase = styled(AvatarBase) `
+  position: relative;
+  color: ${({ $color }) => $color.toString()};
+  background-color: ${({ $background }) => $background.toString()};
+  &:hover {
+    background-color: ${({ $background, $clickable }) => $clickable && $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 &&
+    css `
+      cursor: pointer;
+    `}
+
+  ${({ variant, theme }) => {
+    switch (variant) {
+        case 'rounded':
+            return css `
+          border-radius: ${theme.shape.radiusFactor * 0.8}em;
+        `;
+        case 'square':
+            return css `
+          border-radius: inherit;
+        `;
+        default:
+            return css `
+          border-radius: 100%;
+        `;
+    }
+}}
+`;
+const Avatar = (props, ref) => {
+    const _a = useThemeProps('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 = useTheme();
+    const clickable = React.useMemo(() => typeof onClick === 'function', [onClick]);
+    // A clickable avatar acts as a button, so it is activated by Enter and Space too
+    const handleKeyDown = React.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.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.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.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));
+};
+export default React.forwardRef(Avatar);

package/esm/Badge/BadgeBase.js

@@ -0,0 +1,48 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import IconWrapper from './BadgeIconWrapper';
+import TextWrapper from './BadgeTextWrapper';
+import Container from './BadgeContainer';
+import ButtonDelete from './BadgeDeleteButton';
+const BadgeBase = (props, ref) => {
+    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.useMemo(() => ({
+        TextWrapper: (overrides === null || overrides === void 0 ? void 0 : overrides.TextWrapper) || TextWrapper,
+        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,
+    }), [overrides]);
+    // A clickable badge acts as a button, so it is activated by Enter and Space too
+    const handleKeyDown = React.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.useCallback((event) => {
+        // Deleting is not a click on the badge
+        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 }),
+        typeof startIcon !== 'undefined' && startIcon !== null && (React.createElement(overridesMap.IconWrapper, null, startIcon)),
+        React.createElement(overridesMap.TextWrapper, null, children),
+        typeof onDelete === 'function' && (React.createElement(overridesMap.ButtonDelete, { variant: variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel }))));
+};
+export default React.forwardRef(BadgeBase);

package/esm/Badge/BadgeContainer.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const StyledBadge = styled.span `
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2.5}em;
+  font-size: 1em;
+  border-width: 0;
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 0.14em;
+  transition: all 180ms ease-out 0s;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  color: ${({ color, theme }) => {
+    switch (true) {
+        case typeof color === 'undefined':
+        default:
+            return theme.color.textPrimary.toString();
+    }
+}};
+`;
+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));
+};
+export default React.forwardRef(BadgeContainer);

package/esm/Badge/BadgeDeleteButton.js

@@ -0,0 +1,87 @@
+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 } from '@emotion/react';
+import ButtonBase from '../Button/ButtonBase';
+import Color from '../Color';
+const StyledButton = styled(ButtonBase) `
+  display: flex;
+  padding: 0.3em;
+  font-size: 1em;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.1em;
+  margin-right: 0.14em;
+  background-color: ${({ $background }) => $background.toString()};
+  color: ${({ $color }) => $color.toString()};
+  position: relative;
+`;
+const BadgeDeleteButton = (props, ref) => {
+    const { color = 'default', variant = 'standard' } = props, nativeProps = __rest(props, ["color", "variant"]);
+    const theme = useTheme();
+    const { $color, $background } = React.useMemo(() => {
+        switch (true) {
+            case variant === 'standard' && color === 'default':
+                return {
+                    $color: theme.color.textPrimary,
+                    $background: theme.color.surface.darken(20),
+                };
+            case variant === 'standard' && color === 'primary':
+                return {
+                    $color: theme.color.accentPrimaryContrast,
+                    $background: theme.color.accentPrimary,
+                };
+            case variant === 'standard' && color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondaryContrast,
+                    $background: theme.color.accentSecondary,
+                };
+            case variant === 'outlined' && color === 'default':
+                return {
+                    $color: theme.color.textPrimary,
+                    $background: theme.color.surface,
+                };
+            case variant === 'outlined' && color === 'primary':
+                return {
+                    $color: theme.color.accentPrimary.darken(10),
+                    $background: Color.fromString('rgba(0,0,0,0)'),
+                };
+            case variant === 'outlined' && color === 'secondary':
+                return {
+                    $color: theme.color.accentSecondary.darken(10),
+                    $background: Color.fromString('rgba(0,0,0,0)'),
+                };
+            case variant === 'outlined' && typeof color === 'string':
+                return {
+                    $color: Color.fromString(color),
+                    $background: Color.fromString(color).alpha(0),
+                };
+            case variant === 'standard' && typeof color === 'string':
+                return {
+                    $color: Color.fromString(color).getContrast(theme.color.textPrimary) > 5
+                        ? theme.color.textPrimary
+                        : theme.color.surface,
+                    $background: Color.fromString(color),
+                };
+            default:
+                return {
+                    $color: theme.color.textPrimary,
+                    $background: theme.color.textPrimary,
+                };
+        }
+    }, [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" }))));
+};
+export default React.forwardRef(BadgeDeleteButton);

package/esm/Badge/BadgeIconWrapper.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const Wrapper = styled.span `
+  display: flex;
+  padding: 0.3em 0 0.3em 0.3em;
+  align-items: center;
+  justify-content: center;
+`;
+const BadgeIconWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(BadgeIconWrapper);

package/esm/Badge/BadgeOutlined.js

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

package/esm/Badge/BadgeStandard.js

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

package/esm/Badge/BadgeStyled.js

@@ -0,0 +1,122 @@
+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 } 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 };
+        }
+    }
+};
+/**
+ * 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: 0.14em;
+  border-color: ${({ $background }) => $background.toString()};
+
+  ${({ $variant, $color, $background, theme }) => $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 === '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 === '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);

package/esm/Badge/BadgeTextWrapper.js

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import styled from '@emotion/styled';
+const TextWrapper = styled.span `
+  font-size: 0.86em;
+  padding: 0.3em 0.5em;
+  display: flex;
+  align-items: center;
+  user-select: none;
+`;
+const BadgeTextWrapper = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (React.createElement(TextWrapper, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+export default React.forwardRef(BadgeTextWrapper);

package/esm/Badge/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import BadgeStyled from './BadgeStyled';
+import useThemeProps from '../ThemeProvider/useThemeProps';
+// One component for both variants, so changing the variant does not remount the badge
+const Badge = (props, ref) => (React.createElement(BadgeStyled, Object.assign({}, useThemeProps('Badge', props), { ref: ref })));
+export default React.forwardRef(Badge);