@synerise/ds-badge 1.0.55 → 1.0.57

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.57](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@1.0.56...@synerise/ds-badge@1.0.57) (2026-06-17)
+
+**Note:** Version bump only for package @synerise/ds-badge
+
+## [1.0.56](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@1.0.55...@synerise/ds-badge@1.0.56) (2026-06-11)
+
+**Note:** Version bump only for package @synerise/ds-badge
+
 ## [1.0.55](https://github.com/Synerise/synerise-design/compare/@synerise/ds-badge@1.0.54...@synerise/ds-badge@1.0.55) (2026-05-26)
 
 **Note:** Version bump only for package @synerise/ds-badge

package/README.md

@@ -42,7 +42,7 @@ import Badge from '@synerise/ds-badge'
 <Badge
   count={10}
   overflowCount={11}
-  showZero={false}
+  status="processing"
 />
 
 ```
@@ -71,22 +71,28 @@ import Badge from '@synerise/ds-badge'
 
 | Property           | Description                                                        | Type                                                                                                 | Default |
 | ------------------ | ------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | ------- |
-| backgroundColor    | Customize the badge color                                          | Color                                                                                                | -       |
-| backgroundColorHue | Customize brightness of color                                      | `900` / `800` / `700` / `600` / `500` / `400` / `300` / `200` / `100` / `050`                        | -       |
-| customColor        | Customize the badge dot color                                      | `BadgeColor` or `DefaultColor` (e.g. `'blue-600'`)                                                   | -       |
-| count              | Number to show in the badge counter                                | ReactNode                                                                                            |         |
-| dot                | Display a red dot instead of a counter                             | boolean                                                                                              | `false` |
-| flag               | Show the badge as a flag                                           | boolean                                                                                              | `false` |
-| offset             | The offset of the badge dot in [x, y] format                       | [number, number]                                                                                     | -       |
-| outlined           | Add outline to the badge counter                                   | boolean                                                                                              | `false` |
+| status             | Status that drives the dot/count colour                            | `active` / `inactive` / `blocked` / `processing` / `warning`                                         | -       |
+| customColor        | Override the badge colour — palette token or any raw CSS colour    | `BadgeColor` / `DefaultColor` / CSS colour (e.g. `'blue-600'`, `'#FF0000'`)                          | -       |
+| count              | Number to show in the badge counter (hidden when `0`)              | ReactNode                                                                                            | -       |
+| dot                | Display a dot instead of a counter (auto-enabled by `status`)      | boolean                                                                                              | `false` |
+| flag               | Show the badge as a flag (halo rings)                              | boolean                                                                                              | `false` |
+| offset             | The offset of the badge in [x, y] format                           | [number, number]                                                                                     | -       |
+| outlined           | Add a white outline to the badge counter                           | boolean                                                                                              | `false` |
 | overflowCount      | Maximum number to show in the counter                              | number                                                                                               | 99      |
 | pulsing            | Enable pulsing animation                                           | boolean                                                                                              | `false` |
-| showZero           | Show the badge when the counter is zero                            | boolean                                                                                              | `false` |
-| status             | Set badge as a status dot                                          | `active` / `inactive` / `blocked` / `processing` / `warning`                                         | -       |
-| text               | If `status` is set, `text` sets the display text of the status dot | string                                                                                               | ''      |
-| textColor          | Customize text color in badge                                      | `red` / `green` / `grey` / `yellow` / `blue` / `pink`/ `mars`/ `orange`/ `fern`/ `cyan`/ `purple` / `violet` / `white` / `transparent` | -       |
-| textColorHue       | Customize brightness of color                                      | `900` / `800` / `700` / `600` / `500` / `400` / `300` / `200` / `100` / `050`                        | -       |
-| title              | Text shown when a cursor is hovered over the badge                 | string                                                                                               | count   |
+| data-\* / aria-\*  | Forwarded to the outermost wrapper element                         | string / number / boolean                                                                            | -       |
+
+> **Removed in the antd-free version:** `backgroundColor`, `backgroundColorHue`, `textColor`, `textColorHue` (count colour is now driven by `status`), `text` (use the `BadgeWithLabel` export instead), `showZero`, `title`. The component no longer extends antd's Badge props.
+
+### `BadgeWithLabel`
+
+A status dot aligned next to a text label — the replacement for the old `text` prop. Owns the dot↔label alignment so consumers don't.
+
+```
+import { BadgeWithLabel } from '@synerise/ds-badge'
+
+<BadgeWithLabel status="warning">Needs review</BadgeWithLabel>
+```
 
 ### Color
 

package/dist/Badge.d.ts

@@ -1,4 +1,12 @@
 import { default as React } from 'react';
 import { BadgeProps } from './Badge.types';
-declare const Badge: ({ dot, ...props }: BadgeProps) => React.JSX.Element;
+/**
+ * Public Badge.
+ *
+ * When `text` is provided the badge renders as a status/dot badge aligned next to that label —
+ * delegating to `BadgeWithLabel` (this restores the legacy antd `status` + `text` API so consumers
+ * don't have to switch to `BadgeWithLabel` by hand). Otherwise it renders the dot/count badge
+ * (`BadgeCore`).
+ */
+declare const Badge: ({ text, ...props }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/dist/Badge.js

@@ -1,15 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import StyledBadge from "./Badge.styles.js";
-import "./style/index.css";
+import BadgeCore from "./BadgeCore.js";
+import BadgeWithLabel from "./BadgeWithLabel.js";
 const Badge = ({
-  dot,
+  text,
   ...props
 }) => {
-  const {
-    status
-  } = props;
-  const isDot = dot !== void 0 ? dot : status !== void 0;
-  return /* @__PURE__ */ jsx(StyledBadge, { ...props, dot: isDot });
+  const hasText = text !== void 0 && text !== null && text !== false && text !== "";
+  if (hasText) {
+    return /* @__PURE__ */ jsx(BadgeWithLabel, { status: props.status, customColor: props.customColor, flag: props.flag, pulsing: props.pulsing, dot: props.dot, className: props.className, style: props.style, children: text });
+  }
+  return /* @__PURE__ */ jsx(BadgeCore, { ...props });
 };
 export {
   Badge as default

package/dist/Badge.styles.d.ts

@@ -1,5 +1,22 @@
-import { default as React } from 'react';
+import { Status } from './Badge.types';
+type ColorProps = {
+    $status?: Status;
+    $customColor?: string;
+};
+type PositionProps = {
+    $standalone?: boolean;
+};
 export declare const afterElementAnimation: import('styled-components').Keyframes;
 export declare const beforeElementAnimation: import('styled-components').Keyframes;
-declare const _default: import('styled-components').StyledComponent<({ flag, outlined, backgroundColor, textColor, backgroundColorHue, textColorHue, pulsing, customColor, ...rest }: any) => React.JSX.Element, any, {}, never>;
-export default _default;
+export declare const Wrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CountSup: import('styled-components').StyledComponent<"sup", any, ColorProps & PositionProps & {
+    $outlined?: boolean;
+}, never>;
+export declare const ScrollNumberOnly: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Current: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const CustomCountSup: import('styled-components').StyledComponent<"sup", any, PositionProps, never>;
+export declare const DotSup: import('styled-components').StyledComponent<"sup", any, ColorProps & PositionProps & {
+    $flag?: boolean;
+    $pulsing?: boolean;
+}, never>;
+export {};

package/dist/Badge.styles.js

@@ -1,34 +1,64 @@
-import { jsx } from "react/jsx-runtime";
-import { Badge } from "antd";
 import styled, { css, keyframes } from "styled-components";
 import { macro } from "@synerise/ds-typography";
-const getBackgroundColor = (props) => {
-  if (props.backgroundColor === "transparent") {
-    return "transparent";
+const STATUS_COLOR_TOKEN = {
+  active: "green-600",
+  inactive: "grey-400",
+  blocked: "red-600",
+  processing: "blue-600",
+  warning: "yellow-600"
+};
+const resolveCustomColor = (theme, customColor) => {
+  const paletteColor = customColor.indexOf("-") >= 0 ? theme.palette[customColor] : theme.palette[`${customColor}-600`];
+  return paletteColor ?? customColor;
+};
+const resolveColor = (props) => {
+  const {
+    theme,
+    $customColor,
+    $status
+  } = props;
+  if ($customColor) {
+    return resolveCustomColor(theme, $customColor);
   }
-  if (props.backgroundColor === "white") {
-    return props.theme.palette.white;
+  if ($status) {
+    return theme.palette[STATUS_COLOR_TOKEN[$status]];
   }
-  return props.theme.palette[`${props.backgroundColor}-${props.backgroundColorHue}`];
+  return theme.palette["red-600"];
 };
+const indicatorPosition = (standalone) => standalone ? css(["position:relative;top:auto;right:auto;display:inline-block;vertical-align:middle;transform:none;"]) : css(["position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0%;"]);
 const afterElementAnimation = /* @__PURE__ */ keyframes(["0%{transform:translate3d(-5px,-5px,0) scale(0.3);opacity:0.9;}100%{transform:translate3d(-5px,-5px,0) scale(1.5);opacity:0;}"]);
 const beforeElementAnimation = /* @__PURE__ */ keyframes(["0%{transform:translate3d(-2px,-2px,0) scale(0.5);opacity:0.9;}100%{transform:translate3d(-2px,-2px,0) scale(1.5);opacity:0;}"]);
-const StyledBadge = styled(({
-  flag,
-  outlined,
-  backgroundColor,
-  textColor,
-  backgroundColorHue,
-  textColorHue,
-  pulsing,
-  customColor,
-  ...rest
-}) => /* @__PURE__ */ jsx(Badge, { ...rest })).withConfig({
-  displayName: "Badgestyles",
+const Wrapper = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Badgestyles__Wrapper",
   componentId: "sc-1ci72bj-0"
-})(["&&{.ant-scroll-number-only{height:16px;&:last-of-type:not(:first-of-type) > p{padding-right:1px;}& > p{", ";color:inherit;line-height:16px;height:16px;font-weight:400;}}.ant-badge-count{box-shadow:none;height:16px;padding:0 3px;line-height:16px;min-width:16px;font-size:13px;background-color:", ";color:", ";}", ""], macro.h200, (props) => getBackgroundColor(props), (props) => props.theme.palette[`${props.textColor}-${props.textColorHue}`], (props) => css(["", " ", " ", " ", " ", " ", " ", ";"], props.customColor && css([".ant-badge-dot,.ant-badge-status-dot{background-color:", ";}"], props.customColor.indexOf("-") >= 0 ? props.theme.palette[props.customColor] : props.theme.palette[`${props.customColor}-600`]), props.status === "active" && !props.customColor && css([".ant-badge-status-active{background-color:", ";}"], props.theme.palette["green-600"]), props.status === "inactive" && !props.customColor && css([".ant-badge-status-inactive{background-color:", ";}"], props.theme.palette["grey-400"]), props.status === "blocked" && !props.customColor && css([".ant-badge-status-blocked{background-color:", ";}"], props.theme.palette["red-600"]), props.status === "processing" && !props.customColor && css([".ant-badge-status-processing{background-color:", ";}"], props.theme.palette["blue-600"]), props.outlined && css([".ant-badge-count{box-shadow:0 0 0 1px ", ";}"], props.theme.palette.white), (!!props.flag || !!props.status) && css([".ant-badge-dot{box-shadow:none;&.ant-badge-status-processing{display:inline-block;position:absolute;}}.ant-badge-dot,.ant-badge-status-dot{overflow:visible;border:2px solid ", ";width:10px;height:10px;&::before{display:flex;content:", ";transform:translate3d(-2px,-2px,0);", " transform-origin:center;}&::after{display:flex;content:", ";transform:translate3d(-5px,-5px,0);", " transform-origin:center;}}"], props.theme.palette.white, props.flag ? '""' : "none", props.pulsing && css(["animation:", " 2s infinite;position:absolute;top:0;left:0;width:10px;height:10px;background-color:inherit;border-radius:50%;"], beforeElementAnimation), props.flag ? '""' : "none", props.pulsing && css(["animation:", " 2s infinite;position:absolute;top:0;left:0;width:16px;height:16px;background-color:inherit;border-radius:50%;"], afterElementAnimation))));
+})(["position:relative;display:inline-block;line-height:1;"]);
+const CountSup = /* @__PURE__ */ styled.sup.withConfig({
+  displayName: "Badgestyles__CountSup",
+  componentId: "sc-1ci72bj-1"
+})(["z-index:auto;", ";min-width:16px;height:16px;padding:0 3px;white-space:nowrap;text-align:center;border-radius:8px;background-color:", ";color:", ";box-shadow:", ";"], (props) => indicatorPosition(props.$standalone), (props) => resolveColor(props), (props) => props.theme.palette.white, (props) => props.$outlined ? `0 0 0 1px ${props.theme.palette.white}` : "none");
+const ScrollNumberOnly = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Badgestyles__ScrollNumberOnly",
+  componentId: "sc-1ci72bj-2"
+})(["display:inline-block;height:16px;"]);
+const Current = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "Badgestyles__Current",
+  componentId: "sc-1ci72bj-3"
+})(["", ";height:16px;line-height:16px;font-weight:400;color:inherit;"], macro.h200);
+const CustomCountSup = /* @__PURE__ */ styled.sup.withConfig({
+  displayName: "Badgestyles__CustomCountSup",
+  componentId: "sc-1ci72bj-4"
+})(["z-index:auto;", ";"], (props) => indicatorPosition(props.$standalone));
+const DotSup = /* @__PURE__ */ styled.sup.withConfig({
+  displayName: "Badgestyles__DotSup",
+  componentId: "sc-1ci72bj-5"
+})(["z-index:auto;", ";width:6px;height:6px;border-radius:50%;background-color:", ";", ""], (props) => indicatorPosition(props.$standalone), (props) => resolveColor(props), (props) => (!!props.$flag || !!props.$status) && css(["box-sizing:border-box;width:10px;height:10px;overflow:visible;border:2px solid ", ";box-shadow:none;&::before{display:", ";content:", ";transform:translate3d(-2px,-2px,0);transform-origin:center;", "}&::after{display:", ";content:", ";transform:translate3d(-5px,-5px,0);transform-origin:center;", "}"], props.theme.palette.white, props.$flag ? "flex" : "none", props.$flag ? "''" : "none", props.$pulsing && css(["position:absolute;top:0;left:0;width:10px;height:10px;background-color:inherit;border-radius:50%;animation:", " 2s infinite;"], beforeElementAnimation), props.$flag ? "flex" : "none", props.$flag ? "''" : "none", props.$pulsing && css(["position:absolute;top:0;left:0;width:16px;height:16px;background-color:inherit;border-radius:50%;animation:", " 2s infinite;"], afterElementAnimation)));
 export {
+  CountSup,
+  Current,
+  CustomCountSup,
+  DotSup,
+  ScrollNumberOnly,
+  Wrapper,
   afterElementAnimation,
-  beforeElementAnimation,
-  StyledBadge as default
+  beforeElementAnimation
 };

package/dist/Badge.types.d.ts

@@ -1,17 +1,60 @@
-import { BadgeProps as AntBadgeProps } from 'antd';
+import { CSSProperties, ReactNode } from 'react';
 import { DefaultColor } from '@synerise/ds-core';
+import { LiteralStringUnion, PassthroughAttributes } from '@synerise/ds-utils';
 export declare const color: readonly ["red", "green", "grey", "yellow", "blue", "pink", "mars", "orange", "fern", "cyan", "purple", "violet", "white", "transparent"];
 export type Color = (typeof color)[number];
 export type ColorHue = '900' | '800' | '700' | '600' | '500' | '400' | '300' | '200' | '100' | '050';
 export type Status = 'active' | 'inactive' | 'blocked' | 'processing' | 'warning' | undefined;
-export type BadgeProps = Omit<AntBadgeProps, 'status'> & {
-    flag?: boolean;
+export type BadgeOwnProps = {
+    /**
+     * Content the badge is positioned over. When omitted, the badge renders inline (standalone).
+     */
+    children?: ReactNode;
+    /**
+     * When set, the badge renders as a status/dot badge aligned next to this label (delegating to
+     * `BadgeWithLabel`). Restores the legacy antd `status` + `text` API. Takes precedence over
+     * `count` / `children` — only `status`, `customColor`, `flag`, `pulsing`, `dot`, `className` and
+     * `style` apply in this mode.
+     */
+    text?: ReactNode;
+    /**
+     * DS status — drives the dot / count colour.
+     */
     status?: Status;
-    outlined?: boolean;
-    backgroundColor?: Color;
-    textColor?: Color;
-    backgroundColorHue?: ColorHue;
-    textColorHue?: ColorHue;
+    /**
+     * Renders the dot with `::before`/`::after` halo rings. Requires dot/status to be active.
+     */
+    flag?: boolean;
+    /**
+     * Adds a repeating pulse animation to the halo rings. Only visible when `flag` or `status` is set.
+     */
     pulsing?: boolean;
-    customColor?: Color | DefaultColor;
+    /**
+     * Adds a white outline ring around the count badge.
+     */
+    outlined?: boolean;
+    /**
+     * Overrides the badge colour. Accepts a palette token (`'blue'` → `blue-600`, or a full key like
+     * `'blue-600'`), or any raw CSS colour (`'#FF0000'`, `'rgb(…)'`, …) for colours outside the palette.
+     */
+    customColor?: LiteralStringUnion<Color | DefaultColor>;
+    /**
+     * Number (or node) shown inside the count badge.
+     */
+    count?: ReactNode;
+    /**
+     * Forces dot mode. Auto-enabled when `status` is provided.
+     */
+    dot?: boolean;
+    /**
+     * Maximum number before the count is shown as `N+`.
+     */
+    overflowCount?: number;
+    /**
+     * `[x, y]` pixel offset of the badge relative to its children.
+     */
+    offset?: [number | string, number | string];
+    className?: string;
+    style?: CSSProperties;
 };
+export type BadgeProps = BadgeOwnProps & PassthroughAttributes;

package/dist/BadgeCore.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { BadgeProps } from './Badge.types';
+/**
+ * DS-native, antd-free badge core (status dot / count). Renders DS styled-components (no styling via
+ * class selectors). Each element carries `ds-badge-*` class hooks for DS consumers (avatar, tabs,
+ * tag, …), external CSS and ui-tests. The legacy `ant-badge-*` / `ant-scroll-number-*` hooks have
+ * been dropped so a parent app still on the old antd-based badge can no longer leak its global
+ * `.ant-badge*` styles onto this one.
+ *
+ * Public entry is `./Badge` — it delegates here, or to `BadgeWithLabel` when `text` is set.
+ */
+declare const BadgeCore: ({ children, status, count, dot, flag, pulsing, outlined, customColor, overflowCount, offset, className, style, ...passthrough }: BadgeProps) => React.JSX.Element;
+export default BadgeCore;

package/dist/BadgeCore.js

@@ -0,0 +1,47 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { Wrapper, CustomCountSup, CountSup, ScrollNumberOnly, Current, DotSup } from "./Badge.styles.js";
+const DEFAULT_OVERFLOW_COUNT = 99;
+const toOffsetUnit = (value) => typeof value === "number" ? `${value}px` : value;
+const renderCount = (count, overflowCount) => {
+  if (typeof count === "number" && count > overflowCount) {
+    return `${overflowCount}+`;
+  }
+  return count;
+};
+const BadgeCore = ({
+  children,
+  status,
+  count,
+  dot,
+  flag,
+  pulsing,
+  outlined,
+  customColor,
+  overflowCount = DEFAULT_OVERFLOW_COUNT,
+  offset,
+  className,
+  style,
+  ...passthrough
+}) => {
+  const hasCount = count !== void 0 && count !== null && count !== false && count !== 0 && count !== "0";
+  const isDot = dot !== void 0 ? dot : status !== void 0 && !hasCount;
+  const hasChildren = children !== void 0 && children !== null && children !== false;
+  const standalone = !hasChildren;
+  const showCount = !isDot && hasCount;
+  const isCustomCount = React.isValidElement(count);
+  const wrapperClassName = ["ds-badge", standalone && "ds-badge-not-a-wrapper", className].filter(Boolean).join(" ");
+  const indicatorStyle = offset && hasChildren ? {
+    transform: `translate(calc(50% + ${toOffsetUnit(offset[0])}), calc(-50% + ${toOffsetUnit(offset[1])}))`,
+    ...style
+  } : style;
+  const statusClassName = status ? ` ds-badge-status-dot ds-badge-status-${status}` : "";
+  return /* @__PURE__ */ jsxs(Wrapper, { className: wrapperClassName, ...passthrough, children: [
+    children,
+    showCount && (isCustomCount ? /* @__PURE__ */ jsx(CustomCountSup, { className: "ds-badge-scroll-number-custom-component", $standalone: standalone, style: indicatorStyle, children: count }) : /* @__PURE__ */ jsx(CountSup, { className: "ds-badge-scroll-number ds-badge-count", $standalone: standalone, $status: status, $customColor: customColor, $outlined: outlined, title: typeof count === "string" || typeof count === "number" ? String(count) : void 0, style: indicatorStyle, children: /* @__PURE__ */ jsx(ScrollNumberOnly, { className: "ds-badge-scroll-number-only", children: /* @__PURE__ */ jsx(Current, { className: "current", children: renderCount(count, overflowCount) }) }) })),
+    isDot && /* @__PURE__ */ jsx(DotSup, { className: `ds-badge-dot${statusClassName}`, $standalone: standalone, $status: status, $customColor: customColor, $flag: flag, $pulsing: pulsing, style: indicatorStyle })
+  ] });
+};
+export {
+  BadgeCore as default
+};

package/dist/BadgeWithLabel.d.ts

@@ -0,0 +1,14 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+import { BadgeProps } from './Badge.types';
+export type BadgeWithLabelProps = Pick<BadgeProps, 'status' | 'customColor' | 'flag' | 'pulsing' | 'dot'> & {
+    /** Label rendered next to the badge dot. */
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * A status/dot `Badge` aligned next to a text label — the antd-free replacement for the old
+ * `Badge` `text` prop. Owns the dot↔label alignment so consumers don't have to.
+ */
+declare const BadgeWithLabel: ({ children, className, style, ...badgeProps }: BadgeWithLabelProps) => React.JSX.Element;
+export default BadgeWithLabel;

package/dist/BadgeWithLabel.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import BadgeCore from "./BadgeCore.js";
+import { Wrapper, Label } from "./BadgeWithLabel.styles.js";
+const BadgeWithLabel = ({
+  children,
+  className,
+  style,
+  ...badgeProps
+}) => /* @__PURE__ */ jsxs(Wrapper, { className, style, children: [
+  /* @__PURE__ */ jsx(BadgeCore, { ...badgeProps }),
+  /* @__PURE__ */ jsx(Label, { children })
+] });
+export {
+  BadgeWithLabel as default
+};

package/dist/BadgeWithLabel.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const Wrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/BadgeWithLabel.styles.js

@@ -0,0 +1,13 @@
+import styled from "styled-components";
+const Wrapper = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "BadgeWithLabelstyles__Wrapper",
+  componentId: "sc-14o8m20-0"
+})(["display:inline-flex;align-items:center;gap:8px;"]);
+const Label = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "BadgeWithLabelstyles__Label",
+  componentId: "sc-14o8m20-1"
+})(["line-height:1;color:", ";"], (props) => props.theme.palette["grey-600"]);
+export {
+  Label,
+  Wrapper
+};

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './Badge';
+export { default as BadgeWithLabel, type BadgeWithLabelProps, } from './BadgeWithLabel';
 export type { Status as BadgeStatus, BadgeProps, Color as BadgeColor, ColorHue as BadgeColorHue, } from './Badge.types';

package/dist/index.js

@@ -1,4 +1,6 @@
 import { default as default2 } from "./Badge.js";
+import { default as default3 } from "./BadgeWithLabel.js";
 export {
+  default3 as BadgeWithLabel,
   default2 as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-badge",
-  "version": "1.0.55",
+  "version": "1.0.57",
   "description": "Badge UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -41,15 +41,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.18.2",
-    "@synerise/ds-typography": "^1.1.24"
+    "@synerise/ds-icon": "^1.18.4",
+    "@synerise/ds-typography": "^1.1.26",
+    "@synerise/ds-utils": "^1.10.1"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
-    "antd": "4.24.16",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3",
     "vitest": "4"
   },
-  "gitHead": "be94b7e7ec28b566a3279e24248e610d87d8c0a5"
+  "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
 }

package/dist/style/index.css

@@ -1 +0,0 @@
-.ant-badge{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:relative;display:inline-block;line-height:1}.ant-badge-count{z-index:auto;min-width:20px;height:20px;padding:0 6px;color:#fff;font-weight:400;font-size:11px;line-height:20px;white-space:nowrap;text-align:center;background:#ff4d4f;border-radius:10px;box-shadow:0 0 0 1px #fff}.ant-badge-count a,.ant-badge-count a:hover{color:#fff}.ant-badge-count-sm{min-width:14px;height:14px;padding:0;font-size:11px;line-height:14px;border-radius:7px}.ant-badge-multiple-words{padding:0 8px}.ant-badge-dot{z-index:auto;width:6px;min-width:6px;height:6px;background:#ff4d4f;border-radius:100%;box-shadow:0 0 0 1px #fff}.ant-badge-dot.ant-scroll-number{transition:background 1.5s}.ant-badge .ant-scroll-number-custom-component,.ant-badge-count,.ant-badge-dot{position:absolute;top:0;right:0;transform:translate(50%,-50%);transform-origin:100% 0%}.ant-badge .ant-scroll-number-custom-component.anticon-spin,.ant-badge-count.anticon-spin,.ant-badge-dot.anticon-spin{animation:antBadgeLoadingCircle 1s infinite linear}.ant-badge-status{line-height:inherit;vertical-align:baseline}.ant-badge-status-dot{position:relative;top:-1px;display:inline-block;width:6px;height:6px;vertical-align:middle;border-radius:50%}.ant-badge-status-success{background-color:#54cb0b}.ant-badge-status-processing{position:relative;background-color:#1890ff}.ant-badge-status-processing::after{position:absolute;top:0;left:0;width:100%;height:100%;border:1px solid #1890ff;border-radius:50%;animation:antStatusProcessing 1.2s infinite ease-in-out;content:''}.ant-badge-status-default{background-color:#d9d9d9}.ant-badge-status-error{background-color:#f52922}.ant-badge-status-warning{background-color:#fab700}.ant-badge-status-pink{background:#eb2f96}.ant-badge-status-magenta{background:#eb2f96}.ant-badge-status-red{background:#f5222d}.ant-badge-status-volcano{background:#fa541c}.ant-badge-status-orange{background:#fa8c16}.ant-badge-status-yellow{background:#fadb14}.ant-badge-status-gold{background:#faad14}.ant-badge-status-cyan{background:#13c2c2}.ant-badge-status-lime{background:#a0d911}.ant-badge-status-green{background:#52c41a}.ant-badge-status-blue{background:#1890ff}.ant-badge-status-geekblue{background:#2f54eb}.ant-badge-status-purple{background:#722ed1}.ant-badge-status-text{margin-left:8px;color:#6a7580;font-size:13px}.ant-badge-zoom-appear,.ant-badge-zoom-enter{animation:antZoomBadgeIn .3s cubic-bezier(.12,.4,.29,1.46);animation-fill-mode:both}.ant-badge-zoom-leave{animation:antZoomBadgeOut .3s cubic-bezier(.71,-.46,.88,.6);animation-fill-mode:both}.ant-badge-not-a-wrapper .ant-badge-zoom-appear,.ant-badge-not-a-wrapper .ant-badge-zoom-enter{animation:antNoWrapperZoomBadgeIn .3s cubic-bezier(.12,.4,.29,1.46)}.ant-badge-not-a-wrapper .ant-badge-zoom-leave{animation:antNoWrapperZoomBadgeOut .3s cubic-bezier(.71,-.46,.88,.6)}.ant-badge-not-a-wrapper:not(.ant-badge-status){vertical-align:middle}.ant-badge-not-a-wrapper .ant-badge-count,.ant-badge-not-a-wrapper .ant-scroll-number-custom-component{transform:none}.ant-badge-not-a-wrapper .ant-scroll-number,.ant-badge-not-a-wrapper .ant-scroll-number-custom-component{position:relative;top:auto;display:block;transform-origin:50% 50%}@keyframes antStatusProcessing{0%{transform:scale(.8);opacity:.5}100%{transform:scale(2.4);opacity:0}}.ant-scroll-number{overflow:hidden;direction:ltr}.ant-scroll-number-only{position:relative;display:inline-block;height:20px;transition:all .3s cubic-bezier(.645, .045, .355, 1);-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden}.ant-scroll-number-only>p.ant-scroll-number-only-unit{height:20px;margin:0;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden}.ant-scroll-number-symbol{vertical-align:top}@keyframes antZoomBadgeIn{0%{transform:scale(0) translate(50%,-50%);opacity:0}100%{transform:scale(1) translate(50%,-50%)}}@keyframes antZoomBadgeOut{0%{transform:scale(1) translate(50%,-50%)}100%{transform:scale(0) translate(50%,-50%);opacity:0}}@keyframes antNoWrapperZoomBadgeIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1)}}@keyframes antNoWrapperZoomBadgeOut{0%{transform:scale(1)}100%{transform:scale(0);opacity:0}}@keyframes antBadgeLoadingCircle{0%{transform-origin:50%}100%{transform:translate(50%,-50%) rotate(360deg);transform-origin:50%}}.ant-ribbon-wrapper{position:relative}.ant-ribbon{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:absolute;top:8px;height:22px;padding:0 8px;color:#fff;line-height:22px;white-space:nowrap;background-color:#0b68ff;border-radius:3px}.ant-ribbon-text{color:#fff}.ant-ribbon-corner{position:absolute;top:100%;width:8px;height:8px;color:currentcolor;border:4px solid;transform:scaleY(.75);transform-origin:top}.ant-ribbon-corner::after{position:absolute;top:-4px;left:-4px;width:inherit;height:inherit;color:rgba(0,0,0,.25);border:inherit;content:''}.ant-ribbon-color-pink{color:#eb2f96;background:#eb2f96}.ant-ribbon-color-magenta{color:#eb2f96;background:#eb2f96}.ant-ribbon-color-red{color:#f5222d;background:#f5222d}.ant-ribbon-color-volcano{color:#fa541c;background:#fa541c}.ant-ribbon-color-orange{color:#fa8c16;background:#fa8c16}.ant-ribbon-color-yellow{color:#fadb14;background:#fadb14}.ant-ribbon-color-gold{color:#faad14;background:#faad14}.ant-ribbon-color-cyan{color:#13c2c2;background:#13c2c2}.ant-ribbon-color-lime{color:#a0d911;background:#a0d911}.ant-ribbon-color-green{color:#52c41a;background:#52c41a}.ant-ribbon-color-blue{color:#1890ff;background:#1890ff}.ant-ribbon-color-geekblue{color:#2f54eb;background:#2f54eb}.ant-ribbon-color-purple{color:#722ed1;background:#722ed1}.ant-ribbon.ant-ribbon-placement-end{right:-8px;border-bottom-right-radius:0}.ant-ribbon.ant-ribbon-placement-end .ant-ribbon-corner{right:0;border-color:currentcolor transparent transparent currentcolor}.ant-ribbon.ant-ribbon-placement-start{left:-8px;border-bottom-left-radius:0}.ant-ribbon.ant-ribbon-placement-start .ant-ribbon-corner{left:0;border-color:currentcolor currentcolor transparent transparent}.ant-badge-rtl{direction:rtl}.ant-badge-rtl.ant-badge:not(.ant-badge-not-a-wrapper) .ant-badge-count,.ant-badge-rtl.ant-badge:not(.ant-badge-not-a-wrapper) .ant-badge-dot,.ant-badge-rtl.ant-badge:not(.ant-badge-not-a-wrapper) .ant-scroll-number-custom-component{right:auto;left:0;direction:ltr;transform:translate(-50%,-50%);transform-origin:0% 0%}.ant-badge-rtl.ant-badge:not(.ant-badge-not-a-wrapper) .ant-scroll-number-custom-component{right:auto;left:0;transform:translate(-50%,-50%);transform-origin:0% 0%}.ant-badge-rtl .ant-badge-status-text{margin-right:8px;margin-left:0}.ant-badge:not(.ant-badge-not-a-wrapper).ant-badge-rtl .ant-badge-zoom-appear,.ant-badge:not(.ant-badge-not-a-wrapper).ant-badge-rtl .ant-badge-zoom-enter{animation-name:antZoomBadgeInRtl}.ant-badge:not(.ant-badge-not-a-wrapper).ant-badge-rtl .ant-badge-zoom-leave{animation-name:antZoomBadgeOutRtl}.ant-ribbon-rtl{direction:rtl}.ant-ribbon-rtl.ant-ribbon-placement-end{right:unset;left:-8px;border-bottom-right-radius:3px;border-bottom-left-radius:0}.ant-ribbon-rtl.ant-ribbon-placement-end .ant-ribbon-corner{right:unset;left:0;border-color:currentcolor currentcolor transparent transparent}.ant-ribbon-rtl.ant-ribbon-placement-end .ant-ribbon-corner::after{border-color:currentcolor currentcolor transparent transparent}.ant-ribbon-rtl.ant-ribbon-placement-start{right:-8px;left:unset;border-bottom-right-radius:0;border-bottom-left-radius:3px}.ant-ribbon-rtl.ant-ribbon-placement-start .ant-ribbon-corner{right:0;left:unset;border-color:currentcolor transparent transparent currentcolor}.ant-ribbon-rtl.ant-ribbon-placement-start .ant-ribbon-corner::after{border-color:currentcolor transparent transparent currentcolor}@keyframes antZoomBadgeInRtl{0%{transform:scale(0) translate(-50%,-50%);opacity:0}100%{transform:scale(1) translate(-50%,-50%)}}@keyframes antZoomBadgeOutRtl{0%{transform:scale(1) translate(-50%,-50%)}100%{transform:scale(0) translate(-50%,-50%);opacity:0}}