@via-profit/ui-kit 0.10.0 → 0.11.0

package/Badge/BadgeBase.d.ts

@@ -4,6 +4,7 @@ import { BadgeTextWrapperProps } from './BadgeTextWrapper';
 import { BadgeContainerProps } from './BadgeContainer';
 import { BadgeDeleteButtonProps } from './BadgeDeleteButton';
 import { BadgeDotProps } from './BadgeDot';
+import { BadgeDeleteIconProps } from './BadgeDeleteIcon';
 type BadgeNativeProps = React.HTMLAttributes<HTMLSpanElement>;
 export interface BadgeBaseProps extends Omit<BadgeNativeProps, 'color'> {
     /**
@@ -22,11 +23,11 @@ export interface BadgeBaseProps extends Omit<BadgeNativeProps, 'color'> {
     readonly dot?: boolean;
     /**
      * Badge style variant\
-     * Allowed variants: `standard` or `outlined`\
+     * Allowed variants: `standard`, `outlined` or `soft`\
      * \
-     * **Default**: `standard`
+     * `<Badge>` defaults to `standard`; the bare `<BadgeBase>` has no variant styles
      */
-    readonly variant?: 'standard' | 'outlined' | 'soft';
+    readonly variant?: BadgeContainerProps['variant'];
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
@@ -63,6 +64,10 @@ export interface BadgeBaseOverrides {
      * Icon delete
      */
     readonly ButtonDelete?: React.ComponentType<BadgeDeleteButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    /**
+     * The icon inside the delete button
+     */
+    readonly DeleteIcon?: React.ComponentType<BadgeDeleteIconProps & React.RefAttributes<SVGSVGElement>>;
     /**
      * The dot. Rendered only with `dot`
      */

package/Badge/BadgeBase.js

@@ -20,6 +20,7 @@ const BadgeTextWrapper_1 = __importDefault(require("./BadgeTextWrapper"));
 const BadgeContainer_1 = __importDefault(require("./BadgeContainer"));
 const BadgeDeleteButton_1 = __importDefault(require("./BadgeDeleteButton"));
 const BadgeDot_1 = __importDefault(require("./BadgeDot"));
+const BadgeDeleteIcon_1 = __importDefault(require("./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';
@@ -28,6 +29,7 @@ const BadgeBase = (props, ref) => {
         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,
+        DeleteIcon: (overrides === null || overrides === void 0 ? void 0 : overrides.DeleteIcon) || BadgeDeleteIcon_1.default,
         Dot: (overrides === null || overrides === void 0 ? void 0 : overrides.Dot) || BadgeDot_1.default,
     }), [overrides]);
     // A clickable badge acts as a button, so it is activated by Enter and Space too
@@ -47,14 +49,11 @@ const BadgeBase = (props, ref) => {
         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 }),
+    return (react_1.default.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_1.default.createElement(overridesMap.Dot, null),
         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
-        // 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_1.default.createElement(overridesMap.ButtonDelete, { variant: variant, onClick: handleDelete, color: color, "aria-label": deleteButtonLabel },
+            react_1.default.createElement(overridesMap.DeleteIcon, null)))));
 };
 exports.default = react_1.default.forwardRef(BadgeBase);

package/Badge/BadgeContainer.d.ts

@@ -4,11 +4,19 @@ export type BadgeContainerProps = React.HTMLAttributes<HTMLSpanElement> & {
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
     readonly color?: 'default' | 'primary' | 'secondary' | string;
+    /**
+     * Without a variant the container has only the base styles (the bare `BadgeBase`)
+     */
+    readonly variant?: 'standard' | 'outlined' | 'soft';
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
     /**
      * You can pass the primary, default, secondary name of the colors or your specified color value
      */
     readonly color?: "default" | "primary" | "secondary" | string;
+    /**
+     * Without a variant the container has only the base styles (the bare `BadgeBase`)
+     */
+    readonly variant?: "standard" | "outlined" | "soft";
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Badge/BadgeContainer.js

@@ -16,6 +16,76 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const Color_1 = __importDefault(require("../Color"));
+const 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 };
+        }
+    }
+};
+/**
+ * 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_1.default.span `
   border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
   font-size: 1em;
@@ -27,17 +97,85 @@ const StyledBadge = styled_1.default.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 &&
+    (0, react_2.css) `
+      border-style: solid;
+      border-width: ${tokens_1.BORDER_WIDTH};
+      border-color: ${$background.toString()};
+      --badge-dot-color: ${($variant === 'standard' ? $color : $background).toString()};
+
+      ${$variant === 'soft' &&
+        (0, react_2.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'
+            ? (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 &&
+        (0, react_2.css) `
+        cursor: pointer;
+
+        &:hover {
+          ${$variant === 'soft'
+            ? (0, react_2.css) `
+                background-color: ${$background.alpha(0.3).toString()};
+              `
+            : $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()};
+                `}
+        }
+      `}
+      ${(0, tokens_1.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_1.default.createElement(StyledBadge, Object.assign({}, nativeProps, { ref: ref }), children));
+    const { children, color, variant, onClick } = props, nativeProps = __rest(props, ["children", "color", "variant", "onClick"]);
+    const theme = (0, react_2.useTheme)();
+    const { $background, $color } = react_1.default.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_1.default.createElement(StyledBadge, Object.assign({}, nativeProps, { "$variant": variant, "$clickable": typeof onClick === 'function', "$color": $color, "$background": $background, onClick: onClick, ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(BadgeContainer);

package/Badge/BadgeDeleteButton.d.ts

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

package/Badge/BadgeDeleteButton.js

@@ -19,6 +19,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
 const ButtonBase_1 = __importDefault(require("../Button/ButtonBase"));
 const Color_1 = __importDefault(require("../Color"));
+const BadgeDeleteIcon_1 = __importDefault(require("./BadgeDeleteIcon"));
 const StyledButton = (0, styled_1.default)(ButtonBase_1.default) `
   display: flex;
   padding: 0.3em;
@@ -32,7 +33,9 @@ const StyledButton = (0, styled_1.default)(ButtonBase_1.default) `
   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 = (0, react_2.useTheme)();
     const { $color, $background } = react_1.default.useMemo(() => {
         switch (true) {
@@ -85,8 +88,6 @@ const BadgeDeleteButton = (props, ref) => {
                 };
         }
     }, [color, variant, theme.color]);
-    return (react_1.default.createElement(StyledButton, Object.assign({}, nativeProps, { "$color": $color, "$background": $background, ref: ref }),
-        react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" },
-            react_1.default.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_1.default.createElement(StyledButton, Object.assign({}, nativeProps, { "$color": $color, "$background": $background, ref: ref }), typeof children === 'undefined' ? react_1.default.createElement(BadgeDeleteIcon_1.default, null) : children));
 };
 exports.default = react_1.default.forwardRef(BadgeDeleteButton);

package/Badge/BadgeDeleteIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type BadgeDeleteIconProps = React.SVGProps<SVGSVGElement>;
+declare const _default: React.ForwardRefExoticComponent<Omit<BadgeDeleteIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Badge/BadgeDeleteIcon.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const BadgeDeleteIcon = (props, ref) => (react_1.default.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_1.default.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" })));
+exports.default = react_1.default.forwardRef(BadgeDeleteIcon);

package/Badge/BadgeOutlined.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const BadgeStyled_1 = __importDefault(require("./BadgeStyled"));
+const index_1 = __importDefault(require("./index"));
 /**
  * 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 }));
+const BadgeOutlined = (props, ref) => react_1.default.createElement(index_1.default, Object.assign({}, props, { variant: "outlined", ref: ref }));
 exports.default = react_1.default.forwardRef(BadgeOutlined);

package/Badge/BadgeStandard.js

@@ -4,9 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const BadgeStyled_1 = __importDefault(require("./BadgeStyled"));
+const index_1 = __importDefault(require("./index"));
 /**
  * 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 }));
+const BadgeStandard = (props, ref) => react_1.default.createElement(index_1.default, Object.assign({}, props, { variant: "standard", ref: ref }));
 exports.default = react_1.default.forwardRef(BadgeStandard);

package/Badge/BadgeStyled.d.ts

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

package/Badge/BadgeStyled.js

@@ -1,168 +1,9 @@
 "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 };
-        }
-    }
-};
-/**
- * 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 = (0, styled_1.default)(BadgeBase_1.default) `
-  border-style: solid;
-  border-width: ${tokens_1.BORDER_WIDTH};
-  border-color: ${({ $background }) => $background.toString()};
-  --badge-dot-color: ${({ $variant, $background, $color }) => ($variant === 'standard' ? $color : $background).toString()};
-
-  ${({ $variant, $color, $background }) => $variant === 'soft' &&
-    (0, react_2.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'
-        ? (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 === 'soft'
-        ? (0, react_2.css) `
-              background-color: ${$background.alpha(0.3).toString()};
-            `
-        : $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 === 'soft'
-        ? getSoftColors(color, theme)
-        : 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);
+exports.default = void 0;
+// Preserve the old import path without adding a wrapper around Badge
+var index_1 = require("./index");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(index_1).default; } });

package/Badge/index.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import type { BadgeStandardProps } from './BadgeStandard';
-import type { BadgeOutlinedProps } from './BadgeOutlined';
-export type BadgeProps = (BadgeStandardProps | BadgeOutlinedProps) & {
+import { BadgeBaseProps } from './BadgeBase';
+export type BadgeProps = BadgeBaseProps & {
     /**
      * Badge style variant\
      * Allowed variants: `standard`, `outlined` or `soft` (the pale background of the color)\
@@ -10,7 +9,7 @@ export type BadgeProps = (BadgeStandardProps | BadgeOutlinedProps) & {
      */
     readonly variant?: 'standard' | 'outlined' | 'soft';
 };
-declare const _default: React.ForwardRefExoticComponent<import("./BadgeBase").BadgeBaseProps & {
+declare const _default: React.ForwardRefExoticComponent<BadgeBaseProps & {
     /**
      * Badge style variant\
      * Allowed variants: `standard`, `outlined` or `soft` (the pale background of the color)\

package/Badge/index.js

@@ -1,10 +1,24 @@
 "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 BadgeStyled_1 = __importDefault(require("./BadgeStyled"));
-// 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({}, props, { ref: ref })));
+const BadgeBase_1 = __importDefault(require("./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_1.default.createElement(BadgeBase_1.default, Object.assign({}, props, { variant: variant, ref: ref }));
+};
 exports.default = react_1.default.forwardRef(Badge);

package/CHANGELOG.md

@@ -4,6 +4,24 @@
 
 ## Не выпущено
 
+## 0.11.0 — 2026-11-05
+
+### Добавлено
+
+- **Toast**: `autoClose` у `ToastContainer` принимает время закрытия для каждого типа уведомления — `{ success: 2000, error: false }`. Тип, которого нет в объекте, берёт `default` (если задан), затем 5000 мс; собственный `autoClose` уведомления по-прежнему важнее;
+- **Badge**: часть `DeleteIcon` (`Badge/BadgeDeleteIcon`) — замена иконки удаления отдельно от кнопки. `BadgeDeleteButton` принимает свою иконку через `children`.
+
+### Изменено
+
+- **Badge**: логика `BadgeStyled` объединена с основным компонентом в `Badge/index`. Старый путь `Badge/BadgeStyled` сохранён как реэкспорт без дополнительной обёртки.
+- **Badge**: стили вариантов, расчёт цветов и состояния наведения и фокуса перенесены в `BadgeContainer`. `overrides.Container` получает `variant`, а `styled(BadgeContainer)` перекрывает оформление без повышения специфичности. Внешний вид и поведение по умолчанию сохранены. Переопределение `ButtonDelete` теперь получает исходный `variant="soft"`, а не `outlined`; если оно разбирает варианты самостоятельно, добавьте обработку `soft`. Стандартный `BadgeDeleteButton` оформляет `soft` как прежде.
+
+## 0.10.1 — 2026-10-23
+
+### Исправлено
+
+- **Menu**, **Selectbox**, **DatePicker**, **HintPopover**, модальные окна: возвращая фокус на кнопку или поле после закрытия, кит больше не прокручивает страницу (`focus({ preventScroll: true })`). Если кнопка-якорь стоит в закреплённой шапке (`position: sticky`), Chrome прокручивал страницу к исходному месту шапки в документе, и после закрытия меню щелчком мимо страница прыгала. Список Menu при открытии тоже получает фокус без прокрутки.
+
 ## 0.10.0 — 2026-10-21
 
 ### Добавлено

package/DatePicker/index.js

@@ -130,7 +130,9 @@ const DatePicker = props => {
         var _a, _b;
         setOpenSate(false);
         // Back to the field, so the keyboard user continues from the same place
-        (_b = (readOnly ? inputRef.current : ((_a = buttonRef.current) !== null && _a !== void 0 ? _a : inputRef.current))) === null || _b === void 0 ? void 0 : _b.focus();
+        (_b = (readOnly ? inputRef.current : ((_a = buttonRef.current) !== null && _a !== void 0 ? _a : inputRef.current))) === null || _b === void 0 ? void 0 : _b.focus({
+            preventScroll: true,
+        });
     }, [readOnly]);
     const handlePopperKeyDown = react_1.default.useCallback((event) => {
         if (event.key === 'Escape') {

package/HintPopover/index.js

@@ -54,7 +54,7 @@ const HintPopover = props => {
         const onKeyDown = (event) => {
             if (event.key === 'Escape') {
                 setOpen(false);
-                button === null || button === void 0 ? void 0 : button.focus();
+                button === null || button === void 0 ? void 0 : button.focus({ preventScroll: true });
             }
         };
         document.addEventListener('keydown', onKeyDown);