@synerise/ds-tag 1.4.16 → 1.4.18

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.4.18](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tag@1.4.17...@synerise/ds-tag@1.4.18) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-tag
+
+## [1.4.17](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tag@1.4.16...@synerise/ds-tag@1.4.17) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-tag
+
 ## [1.4.16](https://github.com/Synerise/synerise-design/compare/@synerise/ds-tag@1.4.15...@synerise/ds-tag@1.4.16) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-tag

package/README.md

@@ -11,6 +11,8 @@ Tag UI Component
 npm i @synerise/ds-tag
 or
 yarn add @synerise/ds-tag
+or
+pnpm add @synerise/ds-tag
 ```
 
 ## Usage
@@ -38,10 +40,15 @@ import Tag from '@synerise/ds-tag'
 | onClick      | onClick event on tag body                       | () => void                        | -                      |
 | onRemove     | callback when tag is removed                    | (tagKey: string / number) => void | -                      |
 | removable    | show remove button                              | boolean                           | -                      |
-| shape        | shape of the tag                                | TagShape                          | TagShape.DEFAULT_ROUND |
+| shape        | shape of the tag                                | TagShape                          | TagShape.DEFAULT_SQUARE |
 | textColor    | color of tag name label                         | string                            | -                      |
+| image        | src of image shown before content (DEFAULT_ROUND/SQUARE only) | string             | -                      |
+| prefixel     | leading slot content                            | ReactNode                         | -                      |
+| suffixel     | trailing slot content (hidden on remove hover)  | ReactNode                         | -                      |
+| texts        | i18n overrides for internal labels              | Partial<TagTexts>           | -                      |
+| asPill       | disable hover brightness effect                 | boolean                           | -                      |
 | dashed       | make border dashed                              | boolean                           | -                      |
-| tooltipProps | tooltip to show over entire tag. see ds-tooltip | TooltipProps                      |                        |
+| tooltipProps | tooltip to show over entire tag. see ds-tooltip | TooltipProps                      | -                      |
 
 ## TagShape Enum
 

package/dist/Tag.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 import { TagShape } from './Tag.types';
 declare const Tag: React.ForwardRefExoticComponent<{
     id?: string | number;
@@ -14,9 +14,9 @@ declare const Tag: React.ForwardRefExoticComponent<{
     onRemove?: (tag: string | number) => void;
     prefixel?: React.ReactNode;
     suffixel?: React.ReactNode;
-    texts?: import("./Tag.types").TagTexts;
+    texts?: import('./Tag.types').TagTexts;
     asPill?: boolean;
     dashed?: boolean;
-    tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "id" | "color" | "onClick" | "name" | "textColor" | "image" | "shape" | "removable" | "disabled" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>;
+    tooltipProps?: import('@synerise/ds-tooltip').TooltipProps;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "id" | "color" | "onClick" | "name" | "textColor" | "image" | "shape" | "removable" | "disabled" | "onRemove" | "prefixel" | "suffixel" | "texts" | "asPill" | "dashed" | "tooltipProps"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;
 export default Tag;

package/dist/Tag.js

@@ -1,110 +1,70 @@
-var _excluded = ["id", "name", "className", "disabled", "removable", "image", "shape", "color", "textColor", "onRemove", "onClick", "prefixel", "suffixel", "texts", "asPill", "dashed", "tooltipProps"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, useState } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { CloseS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './Tag.styles';
-import { getColorText } from './Tag.styles';
-import { TagShape } from './Tag.types';
-import { useDefaultTexts } from './hooks/useDefaultTexts';
-var Tag = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-    name = _ref.name,
-    className = _ref.className,
-    disabled = _ref.disabled,
-    removable = _ref.removable,
-    image = _ref.image,
-    _ref$shape = _ref.shape,
-    shape = _ref$shape === void 0 ? TagShape.DEFAULT_ROUND && TagShape.DEFAULT_SQUARE : _ref$shape,
-    color = _ref.color,
-    textColor = _ref.textColor,
-    onRemove = _ref.onRemove,
-    onClick = _ref.onClick,
-    prefixel = _ref.prefixel,
-    suffixel = _ref.suffixel,
-    texts = _ref.texts,
-    asPill = _ref.asPill,
-    dashed = _ref.dashed,
-    tooltipProps = _ref.tooltipProps,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var theme = useTheme();
-  var allTexts = useDefaultTexts(texts);
-  var isDefaultType = shape && [TagShape.DEFAULT_ROUND, TagShape.DEFAULT_SQUARE].includes(shape);
-  var isDefaultRound = shape === TagShape.DEFAULT_ROUND;
-  var isDefaultSquare = shape === TagShape.DEFAULT_SQUARE;
-  var isStatusShape = shape && [TagShape.STATUS_ERROR, TagShape.STATUS_NEUTRAL, TagShape.STATUS_SUCCESS, TagShape.STATUS_WARNING].includes(shape);
-  var isRemovable = removable && (isDefaultRound || isDefaultSquare);
-  var isActionable = !disabled && isRemovable;
-  var _useState = useState(false),
-    isIconHovered = _useState[0],
-    setIsIconHovered = _useState[1];
-  var onRemoveCall = function onRemoveCall() {
-    return !!onRemove && !!id && onRemove(id);
-  };
-  var renderPrefixel = function renderPrefixel() {
-    if (typeof prefixel === 'string' || typeof prefixel === 'number') {
-      return /*#__PURE__*/React.createElement(S.PrefixWrapper, {
-        iconHover: isIconHovered
-      }, prefixel);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { CloseS } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { Tag as Tag$1, Content, TagName, RemoveButton, getColorText, PrefixWrapper, DefaultPrefixWrapper, SuffixWrapper, DefaultSuffixWrapper } from "./Tag.styles.js";
+import { TagShape } from "./Tag.types.js";
+import { useDefaultTexts } from "./hooks/useDefaultTexts.js";
+const Tag = forwardRef(({
+  id,
+  name,
+  className,
+  disabled,
+  removable,
+  image,
+  shape = TagShape.DEFAULT_ROUND && TagShape.DEFAULT_SQUARE,
+  color,
+  textColor,
+  onRemove,
+  onClick,
+  prefixel,
+  suffixel,
+  texts,
+  asPill,
+  dashed,
+  tooltipProps,
+  ...htmlAttributes
+}, ref) => {
+  const theme = useTheme();
+  const allTexts = useDefaultTexts(texts);
+  const isDefaultType = shape && [TagShape.DEFAULT_ROUND, TagShape.DEFAULT_SQUARE].includes(shape);
+  const isDefaultRound = shape === TagShape.DEFAULT_ROUND;
+  const isDefaultSquare = shape === TagShape.DEFAULT_SQUARE;
+  const isStatusShape = shape && [TagShape.STATUS_ERROR, TagShape.STATUS_NEUTRAL, TagShape.STATUS_SUCCESS, TagShape.STATUS_WARNING].includes(shape);
+  const isRemovable = removable && (isDefaultRound || isDefaultSquare);
+  const isActionable = !disabled && isRemovable;
+  const [isIconHovered, setIsIconHovered] = useState(false);
+  const onRemoveCall = () => !!onRemove && !!id && onRemove(id);
+  const renderPrefixel = () => {
+    if (typeof prefixel === "string" || typeof prefixel === "number") {
+      return /* @__PURE__ */ jsx(PrefixWrapper, { iconHover: isIconHovered, children: prefixel });
     }
-    return /*#__PURE__*/React.createElement(S.DefaultPrefixWrapper, {
-      iconHover: isIconHovered
-    }, prefixel);
+    return /* @__PURE__ */ jsx(DefaultPrefixWrapper, { iconHover: isIconHovered, children: prefixel });
   };
-  var renderSuffixel = function renderSuffixel() {
-    if (typeof suffixel === 'string' || typeof suffixel === 'number') {
-      return /*#__PURE__*/React.createElement(S.SuffixWrapper, null, suffixel);
+  const renderSuffixel = () => {
+    if (typeof suffixel === "string" || typeof suffixel === "number") {
+      return /* @__PURE__ */ jsx(SuffixWrapper, { children: suffixel });
     }
-    return /*#__PURE__*/React.createElement(S.DefaultSuffixWrapper, null, suffixel);
+    return /* @__PURE__ */ jsx(DefaultSuffixWrapper, { children: suffixel });
   };
-  var handleMouseOver = function handleMouseOver(event) {
+  const handleMouseOver = (event) => {
     setIsIconHovered(true);
-    htmlAttributes.onMouseOver == null || htmlAttributes.onMouseOver(event);
+    htmlAttributes.onMouseOver?.(event);
   };
-  var handleMouseLeave = function handleMouseLeave(event) {
+  const handleMouseLeave = (event) => {
     setIsIconHovered(false);
-    htmlAttributes.onMouseLeave == null || htmlAttributes.onMouseLeave(event);
+    htmlAttributes.onMouseLeave?.(event);
   };
-  var renderedTag = /*#__PURE__*/React.createElement(S.Tag, _extends({
-    ref: ref,
-    className: "ds-tag " + (className != null ? className : ''),
-    isStatusShape: isStatusShape,
-    shape: shape,
-    color: color,
-    textColor: textColor,
-    removable: removable,
-    disabled: disabled,
-    isActionable: isActionable,
-    onClick: onClick,
-    "data-testid": typeof id !== 'undefined' ? "tag-" + id : 'tag',
-    preffixel: !!prefixel,
-    suffixel: !!suffixel,
-    hasImage: !!image,
-    iconHover: isIconHovered,
-    asPill: asPill,
-    dashed: dashed
-  }, htmlAttributes), /*#__PURE__*/React.createElement(S.Content, {
-    iconHover: isIconHovered
-  }, image && isDefaultType && /*#__PURE__*/React.createElement("img", {
-    src: image,
-    alt: ""
-  }), !!prefixel && renderPrefixel(), /*#__PURE__*/React.createElement(S.TagName, null, name), !!suffixel && renderSuffixel(), isRemovable && /*#__PURE__*/React.createElement(Tooltip, {
-    title: allTexts.deleteTooltip,
-    open: isIconHovered,
-    zIndex: parseInt(theme.variables['@zindex-tooltip'], 10) + 1
-  }, /*#__PURE__*/React.createElement(S.RemoveButton, {
-    onClick: onRemoveCall,
-    onMouseOver: handleMouseOver,
-    onMouseLeave: handleMouseLeave,
-    "data-testid": "remove-btn"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: "icon",
-    component: /*#__PURE__*/React.createElement(CloseS, null),
-    size: 24,
-    color: getColorText(theme, color)
-  })))));
-  return tooltipProps ? /*#__PURE__*/React.createElement(Tooltip, tooltipProps, renderedTag) : renderedTag;
+  const renderedTag = /* @__PURE__ */ jsx(Tag$1, { ref, className: `ds-tag ${className ?? ""}`, isStatusShape, shape, color, textColor, removable, disabled, isActionable, onClick, "data-testid": typeof id !== "undefined" ? `tag-${id}` : "tag", preffixel: !!prefixel, suffixel: !!suffixel, hasImage: !!image, iconHover: isIconHovered, asPill, dashed, ...htmlAttributes, children: /* @__PURE__ */ jsxs(Content, { iconHover: isIconHovered, children: [
+    image && isDefaultType && /* @__PURE__ */ jsx("img", { src: image, alt: "" }),
+    !!prefixel && renderPrefixel(),
+    /* @__PURE__ */ jsx(TagName, { children: name }),
+    !!suffixel && renderSuffixel(),
+    isRemovable && /* @__PURE__ */ jsx(Tooltip, { title: allTexts.deleteTooltip, open: isIconHovered, zIndex: parseInt(theme.variables["@zindex-tooltip"], 10) + 1, children: /* @__PURE__ */ jsx(RemoveButton, { onClick: onRemoveCall, onMouseOver: handleMouseOver, onMouseLeave: handleMouseLeave, "data-testid": "remove-btn", children: /* @__PURE__ */ jsx(Icon, { className: "icon", component: /* @__PURE__ */ jsx(CloseS, {}), size: 24, color: getColorText(theme, color) }) }) })
+  ] }) });
+  return tooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...tooltipProps, children: renderedTag }) : renderedTag;
 });
-export default Tag;
+export {
+  Tag as default
+};

package/dist/Tag.styles.d.ts

@@ -1,8 +1,8 @@
-import { type ThemeProps, type ThemePropsVars } from '@synerise/ds-core';
+import { ThemeProps, ThemePropsVars } from '@synerise/ds-core';
 import { TagShape } from './Tag.types';
 export declare const getColorText: (theme: ThemePropsVars, color?: string) => string;
-export declare const TagName: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const RemoveButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TagName: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const RemoveButton: import('styled-components').StyledComponent<"div", any, {}, never>;
 type TagProps = {
     isStatusShape?: boolean;
     shape?: TagShape;
@@ -18,17 +18,17 @@ type TagProps = {
     asPill?: boolean;
     dashed?: boolean;
 } & ThemeProps;
-export declare const Content: import("styled-components").StyledComponent<"div", any, {
+export declare const Content: import('styled-components').StyledComponent<"div", any, {
     iconHover?: boolean;
 }, never>;
-export declare const PrefixWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const PrefixWrapper: import('styled-components').StyledComponent<"div", any, {
     iconHover?: boolean;
 }, never>;
-export declare const SuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DefaultSuffixWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DefaultPrefixWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const SuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DefaultSuffixWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DefaultPrefixWrapper: import('styled-components').StyledComponent<"div", any, {
     iconHover?: boolean;
 }, never>;
-export declare const Tag: import("styled-components").StyledComponent<"div", any, TagProps, never>;
-export declare const DeleteButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Tag: import('styled-components').StyledComponent<"div", any, TagProps, never>;
+export declare const DeleteButton: import('styled-components').StyledComponent<"div", any, {}, never>;
 export {};

package/dist/Tag.styles.js

@@ -1,131 +1,139 @@
-import styled, { css } from 'styled-components';
-import { TagShape } from './Tag.types';
-var defaultStatusStyles = css(["border-radius:9px;font-size:10px;height:18px;font-weight:500;line-height:18px;text-transform:uppercase;letter-spacing:0.1px;padding:0 8px;line-height:18px;"]);
-export var getColorText = function getColorText(theme, color) {
-  return color === theme.palette['grey-200'] ? theme.palette['grey-600'] : theme.palette.white;
+import styled, { css } from "styled-components";
+import { TagShape } from "./Tag.types.js";
+const defaultStatusStyles = /* @__PURE__ */ css(["border-radius:9px;font-size:10px;height:18px;font-weight:500;line-height:18px;text-transform:uppercase;letter-spacing:0.1px;padding:0 8px;line-height:18px;"]);
+const getColorText = (theme, color) => {
+  return color === theme.palette["grey-200"] ? theme.palette["grey-600"] : theme.palette.white;
 };
-var getWidthOnHover = function getWidthOnHover(props) {
+const getWidthOnHover = (props) => {
   if (props.suffixel && props.preffixel || props.hasImage) {
-    return 'calc(100% - 23px)';
+    return "calc(100% - 23px)";
   }
   if (props.preffixel) {
-    return 'calc(100% - 35px)';
+    return "calc(100% - 35px)";
   }
   if (props.suffixel) {
-    return 'calc(100% - 4px)';
+    return "calc(100% - 4px)";
   }
-  return 'calc(100% - 10px)';
+  return "calc(100% - 10px)";
 };
-var getFilterColor = function getFilterColor(props) {
-  if (props.iconHover && props.color === props.theme.palette['grey-200']) {
-    return 'brightness(100%)';
+const getFilterColor = (props) => {
+  if (props.iconHover && props.color === props.theme.palette["grey-200"]) {
+    return "brightness(100%)";
   }
-  if (props.color === props.theme.palette['grey-200']) {
-    return 'brightness(90%)';
+  if (props.color === props.theme.palette["grey-200"]) {
+    return "brightness(90%)";
   }
   if (props.iconHover) {
-    return 'brightness(100%)';
+    return "brightness(100%)";
   }
-  return 'brightness(110%)';
+  return "brightness(110%)";
 };
-var addonStyles = function addonStyles(props) {
-  return "\n  border: 1px solid;\n  border-radius: 10px;\n  height: 50%;\n  padding: 0 3px;\n  border-color: " + props.theme.palette.white + ";\n  font-size: 9px;\n  line-height: 10px;\n  text-align: center;\n";
-};
-export var TagName = styled.span.withConfig({
+const addonStyles = (props) => `
+  border: 1px solid;
+  border-radius: 10px;
+  height: 50%;
+  padding: 0 3px;
+  border-color: ${props.theme.palette.white};
+  font-size: 9px;
+  line-height: 10px;
+  text-align: center;
+`;
+const TagName = /* @__PURE__ */ styled.span.withConfig({
   displayName: "Tagstyles__TagName",
   componentId: "sc-1xw3den-0"
 })(["white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"]);
-export var RemoveButton = styled.div.withConfig({
+const RemoveButton = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagstyles__RemoveButton",
   componentId: "sc-1xw3den-1"
-})(["color:", ";height:18px;width:18px;border-radius:10px;padding:0;border:none;outline:none;margin:3px 3px 3px 5px;text-align:center;cursor:pointer;position:relative;overflow:hidden;display:none;opacity:0.8;&:before{color:", ";filter:brightness(70%);opacity:0.3;content:'';position:absolute;top:0;left:0;width:100%;height:100%;}&&&:hover{.ds-icon svg{fill:", " !important;}}.icon{&&{transform:translate(1px,-3px);}}"], function (_ref) {
-  var color = _ref.color,
-    theme = _ref.theme;
-  return getColorText(theme, color);
-}, function (props) {
-  return props.color || props.theme.palette['red-600'];
-}, function (props) {
-  return props.theme.palette['red-600'];
-});
-var insertShapeStyles = function insertShapeStyles(props) {
+})(["color:", ";height:18px;width:18px;border-radius:10px;padding:0;border:none;outline:none;margin:3px 3px 3px 5px;text-align:center;cursor:pointer;position:relative;overflow:hidden;display:none;opacity:0.8;&:before{color:", ";filter:brightness(70%);opacity:0.3;content:'';position:absolute;top:0;left:0;width:100%;height:100%;}&&&:hover{.ds-icon svg{fill:", " !important;}}.icon{&&{transform:translate(1px,-3px);}}"], ({
+  color,
+  theme
+}) => getColorText(theme, color), (props) => props.color || props.theme.palette["red-600"], (props) => props.theme.palette["red-600"]);
+const insertShapeStyles = (props) => {
   switch (props.shape) {
     case TagShape.SMALL_SQUARE:
-      return css(["color:", ";border-radius:3px;font-size:10px;height:14px;line-height:14px;text-transform:uppercase;font-weight:500;letter-spacing:0.1px;padding:0 4px;"], props.textColor || '#fff');
+      return css(["color:", ";border-radius:3px;font-size:10px;height:14px;line-height:14px;text-transform:uppercase;font-weight:500;letter-spacing:0.1px;padding:0 4px;"], props.textColor || "#fff");
     case TagShape.SMALL_ROUND:
-      return css(["color:", ";border-radius:8px;font-size:10px;height:14px;line-height:14px;text-transform:uppercase;letter-spacing:0.1px;padding:0 4px;"], props.textColor || '#fff');
+      return css(["color:", ";border-radius:8px;font-size:10px;height:14px;line-height:14px;text-transform:uppercase;letter-spacing:0.1px;padding:0 4px;"], props.textColor || "#fff");
     case TagShape.MEDIUM_ROUND:
       return css(["color:", ";", ""], props.textColor || getColorText(props.theme, props.color), defaultStatusStyles);
     case TagShape.DEFAULT_ROUND:
-      return css(["color:", ";border-radius:12px;font-size:13px;height:24px;line-height:24px;padding:", ";", "{padding:", ";padding-left:", ";padding-right:", ";}", ""], props.textColor || getColorText(props.theme, props.color), props.removable ? '0' : '0 12px', TagName, props.removable ? '0 12px' : '0', props.removable && props.preffixel && '4px', props.removable && props.suffixel && '4px', props.isActionable && css(["&:hover{padding:", ";", "{display:inline-block;padding:", ";padding-left:", ";padding-right:", ";width:", ";}padding-right:", ";", "{margin-left:0px;margin-right:", ";.icon{position:absolute;left:-3px;top:-3px;}}}"], props.removable && props.suffixel && '0 15px 0 0px', TagName, props.removable ? '0 7px 0 12px' : '0', props.removable && props.preffixel && '4px', props.removable && props.suffixel && '10px', getWidthOnHover(props), !props.suffixel && '5px', RemoveButton, props.suffixel ? '2px' : '-2px'));
+      return css(["color:", ";border-radius:12px;font-size:13px;height:24px;line-height:24px;padding:", ";", "{padding:", ";padding-left:", ";padding-right:", ";}", ""], props.textColor || getColorText(props.theme, props.color), props.removable ? "0" : "0 12px", TagName, props.removable ? "0 12px" : "0", props.removable && props.preffixel && "4px", props.removable && props.suffixel && "4px", props.isActionable && css(["&:hover{padding:", ";", "{display:inline-block;padding:", ";padding-left:", ";padding-right:", ";width:", ";}padding-right:", ";", "{margin-left:0px;margin-right:", ";.icon{position:absolute;left:-3px;top:-3px;}}}"], props.removable && props.suffixel && "0 15px 0 0px", TagName, props.removable ? "0 7px 0 12px" : "0", props.removable && props.preffixel && "4px", props.removable && props.suffixel && "10px", getWidthOnHover(props), !props.suffixel && "5px", RemoveButton, props.suffixel ? "2px" : "-2px"));
     case TagShape.DEFAULT_SQUARE:
-      return css(["color:", ";border-radius:3px;font-size:13px;height:24px;line-height:24px;padding:", ";", "{padding:", ";padding-left:", ";padding-right:", ";}", ""], props.textColor || getColorText(props.theme, props.color), props.removable ? '0' : '0 12px', TagName, props.removable ? '0 12px' : '0', props.removable && props.preffixel && '4px', props.removable && props.suffixel && '4px', props.isActionable && css(["&:hover{padding-right:", ";", "{display:inline-block;padding:", ";padding-left:", ";padding-right:", ";width:", ";}padding-right:", ";", "{margin-left:0px;margin-right:", ";.icon{position:absolute;left:-3px;top:-3px;}}}"], props.removable && props.suffixel && '15px', TagName, props.removable ? '0 7px 0 12px' : '0', props.removable && props.preffixel && '4px', props.removable && props.suffixel && '10px', getWidthOnHover(props), !props.suffixel && '5px', RemoveButton, props.suffixel ? '2px' : '-2px'));
+      return css(["color:", ";border-radius:3px;font-size:13px;height:24px;line-height:24px;padding:", ";", "{padding:", ";padding-left:", ";padding-right:", ";}", ""], props.textColor || getColorText(props.theme, props.color), props.removable ? "0" : "0 12px", TagName, props.removable ? "0 12px" : "0", props.removable && props.preffixel && "4px", props.removable && props.suffixel && "4px", props.isActionable && css(["&:hover{padding-right:", ";", "{display:inline-block;padding:", ";padding-left:", ";padding-right:", ";width:", ";}padding-right:", ";", "{margin-left:0px;margin-right:", ";.icon{position:absolute;left:-3px;top:-3px;}}}"], props.removable && props.suffixel && "15px", TagName, props.removable ? "0 7px 0 12px" : "0", props.removable && props.preffixel && "4px", props.removable && props.suffixel && "10px", getWidthOnHover(props), !props.suffixel && "5px", RemoveButton, props.suffixel ? "2px" : "-2px"));
     case TagShape.SINGLE_CHARACTER_ROUND:
       return css(["color:", ";border-radius:12px;font-size:13px;height:24px;width:24px;line-height:24px;justify-content:center;"], props.textColor || getColorText(props.theme, props.color));
     case TagShape.SINGLE_CHARACTER_SQUARE:
       return css(["color:", ";border-radius:3px;font-size:13px;height:24px;width:24px;line-height:24px;justify-content:center;"], props.textColor || getColorText(props.theme, props.color));
     case TagShape.STATUS_NEUTRAL:
-      return css(["border:1px solid ", ";color:", ";", ""], props.color || props.theme.palette['grey-500'], props.textColor || props.color || props.theme.palette['grey-500'], defaultStatusStyles);
+      return css(["border:1px solid ", ";color:", ";", ""], props.color || props.theme.palette["grey-500"], props.textColor || props.color || props.theme.palette["grey-500"], defaultStatusStyles);
     case TagShape.STATUS_SUCCESS:
-      return css(["border:1px solid ", ";color:", ";", ""], props.theme.palette['green-600'], props.theme.palette['green-600'], defaultStatusStyles);
+      return css(["border:1px solid ", ";color:", ";", ""], props.theme.palette["green-600"], props.theme.palette["green-600"], defaultStatusStyles);
     case TagShape.STATUS_ERROR:
-      return css(["border:1px solid ", ";color:", ";", ""], props.theme.palette['red-600'], props.theme.palette['red-600'], defaultStatusStyles);
+      return css(["border:1px solid ", ";color:", ";", ""], props.theme.palette["red-600"], props.theme.palette["red-600"], defaultStatusStyles);
     case TagShape.STATUS_WARNING:
-      return css(["border:1px solid ", ";color:", ";", ""], props.theme.palette['yellow-600'], props.theme.palette['yellow-600'], defaultStatusStyles);
+      return css(["border:1px solid ", ";color:", ";", ""], props.theme.palette["yellow-600"], props.theme.palette["yellow-600"], defaultStatusStyles);
     default:
       return css([""]);
   }
 };
-export var Content = styled.div.withConfig({
+const Content = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagstyles__Content",
   componentId: "sc-1xw3den-2"
-})(["position:relative;display:flex;align-items:center;flex-grow:0;flex-shrink:1;max-width:100%;", ""], function (props) {
-  return !!props.iconHover && "\n    &&& {\n     color:" + props.theme.palette['red-600'] + ";\n   }\n";
-});
-export var PrefixWrapper = styled.div.withConfig({
+})(["position:relative;display:flex;align-items:center;flex-grow:0;flex-shrink:1;max-width:100%;", ""], (props) => !!props.iconHover && `
+    &&& {
+     color:${props.theme.palette["red-600"]};
+   }
+`);
+const PrefixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagstyles__PrefixWrapper",
   componentId: "sc-1xw3den-3"
-})(["", ";", ""], function (props) {
-  return addonStyles(props);
-}, function (props) {
-  return !!props.iconHover && ".ant-scroll-number{ \n    color: " + props.theme.palette['red-600'] + "!important;\n    box-shadow: 0 0 0 1px " + props.theme.palette['red-600'] + "!important;\n    }\n  .ds-icon svg {\n  fill: " + props.theme.palette['red-600'] + ";\n}";
-});
-export var SuffixWrapper = styled.div.withConfig({
+})(["", ";", ""], (props) => addonStyles(props), (props) => !!props.iconHover && `.ant-scroll-number{ 
+    color: ${props.theme.palette["red-600"]}!important;
+    box-shadow: 0 0 0 1px ${props.theme.palette["red-600"]}!important;
+    }
+  .ds-icon svg {
+  fill: ${props.theme.palette["red-600"]};
+}`);
+const SuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagstyles__SuffixWrapper",
   componentId: "sc-1xw3den-4"
-})(["", ";"], function (props) {
-  return addonStyles(props);
-});
-export var DefaultSuffixWrapper = styled.div.withConfig({
+})(["", ";"], (props) => addonStyles(props));
+const DefaultSuffixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagstyles__DefaultSuffixWrapper",
   componentId: "sc-1xw3den-5"
 })([""]);
-export var DefaultPrefixWrapper = styled.div.withConfig({
+const DefaultPrefixWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagstyles__DefaultPrefixWrapper",
   componentId: "sc-1xw3den-6"
-})(["", ""], function (props) {
-  return !!props.iconHover && ".ant-scroll-number{ \n    color: " + props.theme.palette['red-600'] + "!important;\n    box-shadow: 0 0 0 1px " + props.theme.palette['red-600'] + "!important;\n    }\n.ds-icon svg {\n  fill: " + props.theme.palette['red-600'] + ";\n}";
-});
-export var Tag = styled.div.withConfig({
+})(["", ""], (props) => !!props.iconHover && `.ant-scroll-number{ 
+    color: ${props.theme.palette["red-600"]}!important;
+    box-shadow: 0 0 0 1px ${props.theme.palette["red-600"]}!important;
+    }
+.ds-icon svg {
+  fill: ${props.theme.palette["red-600"]};
+}`);
+const Tag = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagstyles__Tag",
   componentId: "sc-1xw3den-7"
-})(["position:relative;margin:4px;display:inline-flex;font-weight:500;overflow:hidden;cursor:default;", " ", ";", " ", " ", " .icon1{margin:0 -2px 0 1px;}", ";", ",", "{margin:", ";}", ",", "{margin:", ";}"], function (props) {
-  return !props.asPill && css(["cursor:pointer;&:hover:before{filter:", ";}"], getFilterColor);
-}, function (props) {
-  return insertShapeStyles(props);
-}, function (props) {
-  return !!props.iconHover && "\n    &&&:before{\n     background-color:" + props.theme.palette['red-050'] + ";\n   }\n";
-}, function (props) {
-  return !!props.disabled && css(["opacity:0.4;cursor:not-allowed;"]);
-}, function (props) {
-  return !props.isStatusShape && css(["&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";}", ";"], props.color || props.theme.palette['grey-500'], props.isActionable && css(["&:hover:before{filter:", ";}"], getFilterColor));
-}, function (props) {
-  return !!props.isActionable && css(["&:hover{", ",", "{display:none;}", "{position:absolute;top:0;right:", ";display:inline-block;}}"], SuffixWrapper, DefaultSuffixWrapper, RemoveButton, props.removable && props.suffixel ? '-15px' : '0');
-}, SuffixWrapper, DefaultSuffixWrapper, function (props) {
-  return !props.removable && props.suffixel ? '0px -8px 3px 5px' : '0 4px 3px 1px';
-}, PrefixWrapper, DefaultPrefixWrapper, function (props) {
-  return !props.removable && props.preffixel ? '0px 5px 3px -8px' : '0 1px 3px 4px';
-});
-export var DeleteButton = styled.div.withConfig({
+})(["position:relative;margin:4px;display:inline-flex;font-weight:500;overflow:hidden;cursor:default;", " ", ";", " ", " ", " .icon1{margin:0 -2px 0 1px;}", ";", ",", "{margin:", ";}", ",", "{margin:", ";}"], (props) => !props.asPill && css(["cursor:pointer;&:hover:before{filter:", ";}"], getFilterColor), (props) => insertShapeStyles(props), (props) => !!props.iconHover && `
+    &&&:before{
+     background-color:${props.theme.palette["red-050"]};
+   }
+`, (props) => !!props.disabled && css(["opacity:0.4;cursor:not-allowed;"]), (props) => !props.isStatusShape && css(["&:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:", ";}", ";"], props.color || props.theme.palette["grey-500"], props.isActionable && css(["&:hover:before{filter:", ";}"], getFilterColor)), (props) => !!props.isActionable && css(["&:hover{", ",", "{display:none;}", "{position:absolute;top:0;right:", ";display:inline-block;}}"], SuffixWrapper, DefaultSuffixWrapper, RemoveButton, props.removable && props.suffixel ? "-15px" : "0"), SuffixWrapper, DefaultSuffixWrapper, (props) => !props.removable && props.suffixel ? "0px -8px 3px 5px" : "0 4px 3px 1px", PrefixWrapper, DefaultPrefixWrapper, (props) => !props.removable && props.preffixel ? "0px 5px 3px -8px" : "0 1px 3px 4px");
+const DeleteButton = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Tagstyles__DeleteButton",
   componentId: "sc-1xw3den-8"
-})([""]);
+})([""]);
+export {
+  Content,
+  DefaultPrefixWrapper,
+  DefaultSuffixWrapper,
+  DeleteButton,
+  PrefixWrapper,
+  RemoveButton,
+  SuffixWrapper,
+  Tag,
+  TagName,
+  getColorText
+};

package/dist/Tag.types.d.ts

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
-import { type TooltipProps } from '@synerise/ds-tooltip';
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import { ReactNode } from 'react';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type TagTexts = {
     addButtonLabel?: ReactNode;
     searchPlaceholder?: string;

package/dist/Tag.types.js

@@ -1,14 +1,17 @@
-export var TagShape = /*#__PURE__*/function (TagShape) {
-  TagShape["SINGLE_CHARACTER_ROUND"] = "single_character_round";
-  TagShape["SINGLE_CHARACTER_SQUARE"] = "single_character_square";
-  TagShape["DEFAULT_ROUND"] = "default_round";
-  TagShape["DEFAULT_SQUARE"] = "default_square";
-  TagShape["MEDIUM_ROUND"] = "medium_round";
-  TagShape["SMALL_ROUND"] = "small_round";
-  TagShape["SMALL_SQUARE"] = "small_square";
-  TagShape["STATUS_NEUTRAL"] = "status_custom";
-  TagShape["STATUS_SUCCESS"] = "status_active";
-  TagShape["STATUS_ERROR"] = "status_inactive";
-  TagShape["STATUS_WARNING"] = "status_paused";
-  return TagShape;
-}({});
+var TagShape = /* @__PURE__ */ ((TagShape2) => {
+  TagShape2["SINGLE_CHARACTER_ROUND"] = "single_character_round";
+  TagShape2["SINGLE_CHARACTER_SQUARE"] = "single_character_square";
+  TagShape2["DEFAULT_ROUND"] = "default_round";
+  TagShape2["DEFAULT_SQUARE"] = "default_square";
+  TagShape2["MEDIUM_ROUND"] = "medium_round";
+  TagShape2["SMALL_ROUND"] = "small_round";
+  TagShape2["SMALL_SQUARE"] = "small_square";
+  TagShape2["STATUS_NEUTRAL"] = "status_custom";
+  TagShape2["STATUS_SUCCESS"] = "status_active";
+  TagShape2["STATUS_ERROR"] = "status_inactive";
+  TagShape2["STATUS_WARNING"] = "status_paused";
+  return TagShape2;
+})(TagShape || {});
+export {
+  TagShape
+};

package/dist/hooks/useDefaultTexts.d.ts

@@ -1,2 +1,2 @@
-import { type TagTexts } from '../Tag.types';
+import { TagTexts } from '../Tag.types';
 export declare const useDefaultTexts: (texts?: Partial<TagTexts>) => TagTexts;

package/dist/hooks/useDefaultTexts.js

@@ -1,44 +1,26 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useMemo } from 'react';
-import { FormattedMessage, useIntl } from 'react-intl';
-export var useDefaultTexts = function useDefaultTexts(texts) {
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var allTexts = useMemo(function () {
-    return _extends({
-      searchPlaceholder: formatMessage({
-        id: 'DS.TAG.SEARCH-PLACEHOLDER',
-        defaultMessage: 'Search'
-      }),
-      addButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.TAG.ADD-BUTTON-LABEL",
-        defaultMessage: "Add tag"
-      }),
-      manageLinkLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.TAG.MANAGE-LINK-LABEL",
-        defaultMessage: "Manage tags"
-      }),
-      createTagButtonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.TAG.CREATE-TAG-LABEL",
-        defaultMessage: "Create tag"
-      }),
-      dropdownNoTags: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.TAG.NO-TAGS",
-        defaultMessage: "No data"
-      }),
-      clearTooltip: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.TAG.CLEAR-TOOLTIP",
-        defaultMessage: "Clear"
-      }),
-      deleteTooltip: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.TAG.DELETE-TOOLTIP",
-        defaultMessage: "Delete"
-      }),
-      noResultsLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "DS.TAG.NO-SEARCH-RESULTS",
-        defaultMessage: "No tags found"
-      })
-    }, texts || {});
-  }, [texts, formatMessage]);
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useIntl, FormattedMessage } from "react-intl";
+const useDefaultTexts = (texts) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const allTexts = useMemo(() => ({
+    searchPlaceholder: formatMessage({
+      id: "DS.TAG.SEARCH-PLACEHOLDER",
+      defaultMessage: "Search"
+    }),
+    addButtonLabel: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TAG.ADD-BUTTON-LABEL", defaultMessage: "Add tag" }),
+    manageLinkLabel: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TAG.MANAGE-LINK-LABEL", defaultMessage: "Manage tags" }),
+    createTagButtonLabel: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TAG.CREATE-TAG-LABEL", defaultMessage: "Create tag" }),
+    dropdownNoTags: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TAG.NO-TAGS", defaultMessage: "No data" }),
+    clearTooltip: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TAG.CLEAR-TOOLTIP", defaultMessage: "Clear" }),
+    deleteTooltip: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TAG.DELETE-TOOLTIP", defaultMessage: "Delete" }),
+    noResultsLabel: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TAG.NO-SEARCH-RESULTS", defaultMessage: "No tags found" }),
+    ...texts || {}
+  }), [texts, formatMessage]);
   return allTexts;
-};
+};
+export {
+  useDefaultTexts
+};

package/dist/index.js

@@ -1,3 +1,8 @@
-export { default } from './Tag';
-export { TagShape } from './Tag.types';
-export { useDefaultTexts } from './hooks/useDefaultTexts';
+import { default as default2 } from "./Tag.js";
+import { TagShape } from "./Tag.types.js";
+import { useDefaultTexts } from "./hooks/useDefaultTexts.js";
+export {
+  TagShape,
+  default2 as default,
+  useDefaultTexts
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom/extend-expect';
+import "@testing-library/jest-dom/extend-expect";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-tag",
-  "version": "1.4.16",
+  "version": "1.4.18",
   "description": "Tag UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,14 +35,15 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.14.1",
-    "@synerise/ds-tooltip": "^1.4.8",
-    "@synerise/ds-utils": "^1.6.0"
+    "@synerise/ds-icon": "^1.15.1",
+    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-utils": "^1.7.1",
+    "react-intl": "^6.8.7"
   },
   "peerDependencies": {
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8dfafc5d7278f09d430f1e7499782d05c76b47c0"
+  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
 }