npm - @bikdotai/bik-component-library - Versions diffs - 0.0.861 → 0.0.862 - Mend

@bikdotai/bik-component-library 0.0.861 → 0.0.862

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/dist/esm/components/tag/Tag.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { TagProps } from './model';
 export declare const Tag: {
-    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: TagProps): import("react/jsx-runtime").JSX.Element;
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, hoverBackgroundColor, }: TagProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/esm/components/tag/Tag.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { jsx as l, jsxs as G } from "react/jsx-runtime";
+import { jsx as l, jsxs as J } from "react/jsx-runtime";
 import m from "react";
 import { Tooltip as $ } from "../tooltips/Tooltip.js";
 import { AiBodyTiny as u, AiBodyCaption as B, BodyTiny as E, BodyCaption as T } from "../TypographyStyle.js";
-import { ValidTagTypeMap as J } from "./model.js";
-import { Tag as K } from "./Tag.styled.js";
-import { getTagIconColor as Q } from "./themes.js";
-const S = ({
+import { ValidTagTypeMap as K } from "./model.js";
+import { Tag as Q } from "./Tag.styled.js";
+import { getTagIconColor as S } from "./themes.js";
+const U = ({
   tagText: k,
   LeadingIcon: h,
   TrailingIcon: n,
@@ -30,23 +30,24 @@ const S = ({
   numberOfLines: r,
   backgroundColor: V,
   borderRadius: q,
-  size: o = "regular"
+  size: o = "regular",
+  hoverBackgroundColor: D
 }) => {
   let i = k;
-  const D = d;
+  const F = d;
   let y = t;
-  J[c][t] || (y = "neutral"), c === "circle" && typeof i == "number" && i > 99 && (i = "99+");
-  const F = Q(d, y), s = {
+  K[c][t] || (y = "neutral"), c === "circle" && typeof i == "number" && i > 99 && (i = "99+");
+  const G = S(d, y), s = {
     height: c === "compressed" ? 12 : 16,
     width: c === "compressed" ? 12 : 16,
-    color: F,
+    color: G,
     style: { display: "block" }
   };
   return /* @__PURE__ */ l(
-    K,
+    Q,
     {
       cursor: j,
-      theme: D,
+      theme: F,
       type: y,
       variant: c,
       version: x,
@@ -58,7 +59,8 @@ const S = ({
       backgroundColor: V,
       borderRadius: q,
       size: o,
-      children: /* @__PURE__ */ G("div", { className: "container", children: [
+      hoverBackgroundColor: D,
+      children: /* @__PURE__ */ J("div", { className: "container", children: [
         h && (g ? /* @__PURE__ */ l($, { ...g, children: /* @__PURE__ */ l(
           "button",
           {
@@ -127,8 +129,8 @@ const S = ({
     }
   );
 };
-S.displayName = "Tag";
+U.displayName = "Tag";
 export {
-  S as Tag
+  U as Tag
 };
 //# sourceMappingURL=Tag.js.map

package/dist/esm/components/tag/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":";;;;;;;AAYO,MAAMA,IAAM,CAAC;AAAA,EACnB,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,uBAAAC,IAAwB;AAAA,EACxB,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;~~AACR~~,MAAgB;AACf,MAAIC,~~IAAiBzB~~;AACrB,~~QAAM0B~~,~~IAAenB~~;AACrB,~~MAAIoB~~,~~IAAcnB~~;AAElB,~~EAAKoB~~,~~EAAgBnB~~,CAAO,EAAED,CAAI,~~MACjCmB~~,IAAc,~~YAGXlB~~,MAAY,YACX,~~OAAOgB~~,KAAmB,YAAYA,IAAiB,OAC1DA,IAAiB;AAInB,QAAMI,IAAYC,~~EAAgBvB~~,~~GAAOoB~~,CAAW,GAC9CI,IAAY;AAAA,IACjB,~~QAAQtB~~,MAAY,eAAe,KAAK;AAAA,IACxC,OAAOA,MAAY,eAAe,KAAK;AAAA,IACvC,~~OAAOoB~~;AAAA,IACP,OAAO,EAAE,SAAS,QAAA;AAAA,EAAQ;AAG3B,SACC,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,~~QAAAtB~~;AAAA,MACA,~~OAAOe~~;AAAA,MACP,MAAMC;AAAA,MACN,~~SAAAlB~~;AAAA,MACA,SAAAC;AAAA,MACA,WAAAE;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAE;AAAA,MACA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,iBAAAK;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MAEA,UAAA,gBAAAU,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,~~QAAAjC~~,MACCiB,IACA,~~gBAAAc~~,EAACG,GAAA,EAAS,~~GAAGjB~~,GACZ,UAAA,~~gBAAAc~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~SAAS7B~~;AAAA,YACT,IAAI,GAAGC,CAAa,cAAc;AAAA,YAEjC,~~UAAAgC~~,EAAM,~~cAAcnC~~,GAAa;AAAA,cACjC,~~GAAG8B~~;AAAA,cACH,~~IAAI3B~~,KAAiB;AAAA,YAAA,CACrB;AAAA,UAAA;AAAA,QAAA,GAEH,IAEA,~~gBAAA4B~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~SAAS7B~~;AAAA,YACT,IAAI,GAAGC,CAAa,cAAc;AAAA,YAEjC,~~UAAAgC~~,EAAM,~~cAAcnC~~,GAAa;AAAA,cACjC,~~GAAG8B~~;AAAA,cACH,~~IAAI3B~~,KAAiB;AAAA,YAAA,CACrB;AAAA,UAAA;AAAA,QAAA;AAAA,QAIHU,MACCN,MAAS,QAAQD,MAAU,UAC3BiB,MAAS,UACR,~~gBAAAQ~~,EAACK,GAAA,EAAW,~~eAAAhB~~,GACV,UAAAP,EAAA,CACF,~~sBAECwB~~,GAAA,EAAc,~~eAAAjB~~,GACb,UAAAP,EAAA,CACF,IAEEU,MAAS,UACZ,~~gBAAAQ~~,EAACO,GAAA,EAAS,WAAU,QAAO,~~eAAAlB~~,GACzB,UAAAP,EAAA,CACF,IAEA,~~gBAAAkB~~,EAACQ,GAAA,EAAY,WAAU,QAAO,~~eAAAnB~~,GAC5B,UAAAP,EAAA,CACF;AAAA,QAGD,CAACA,~~KACDW~~,MAAmB,~~OAClBjB~~,MAAS,QAAQD,MAAU,UAC3BiB,MAAS,~~4BACPa~~,GAAA,EAAW,~~eAAAhB~~,GACV,aACF,IAEA,~~gBAAAW~~,EAACM,KAAc,~~eAAAjB~~,GACb,~~UAAAI~~,EAAA,CACF,~~IAEED~~,MAAS,UACZ,~~gBAAAQ~~;AAAA,UAACO;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~OAAOnB~~;AAAA,YACP,eAAAC;AAAA,YAEC,~~UAAAI~~;AAAA,UAAA;AAAA,QAAA,IAGF,gBAAAO;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~OAAOpB~~;AAAA,YACP,eAAAC;AAAA,YAEC,~~UAAAI~~;AAAA,UAAA;AAAA,QAAA;AAAA,~~QAIHvB~~,MACCiB,IACA,~~gBAAAa~~,EAACG,GAAA,EAAS,~~GAAGhB~~,GACZ,UAAA,~~gBAAAa~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~SAAS1B~~;AAAA,YACT,IAAI,GAAGD,CAAc,cAAc;AAAA,YAElC,~~UAAA+B~~,EAAM,~~cAAclC~~,GAAc;AAAA,cAClC,~~GAAG6B~~;AAAA,cACH,~~IAAI1B~~,KAAkB;AAAA,YAAA,CACtB;AAAA,UAAA;AAAA,QAAA,GAEH,IAEA,~~gBAAA2B~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~SAAS1B~~;AAAA,YACT,IAAI,GAAGD,CAAc,cAAc;AAAA,YAElC,~~UAAA+B~~,EAAM,~~cAAclC~~,GAAc;AAAA,cAClC,~~GAAG6B~~;AAAA,cACH,~~IAAI1B~~,KAAkB;AAAA,YAAA,CACtB;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CAEH;AAAA,IAAA;AAAA,EAAA;AAGH;AAEAN,EAAI,cAAc;"}
1	+ {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n\thoverBackgroundColor,\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t\thoverBackgroundColor={hoverBackgroundColor}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","hoverBackgroundColor","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":";;;;;;;AAYO,MAAMA,IAAM,CAAC;AAAA,EACnB,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,uBAAAC,IAAwB;AAAA,EACxB,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,sBAAAC;AACD,MAAgB;AACf,MAAIC,IAAiB1B;AACrB,QAAM2B,IAAepB;AACrB,MAAIqB,IAAcpB;AAElB,EAAKqB,EAAgBpB,CAAO,EAAED,CAAI,MACjCoB,IAAc,YAGXnB,MAAY,YACX,OAAOiB,KAAmB,YAAYA,IAAiB,OAC1DA,IAAiB;AAInB,QAAMI,IAAYC,EAAgBxB,GAAOqB,CAAW,GAC9CI,IAAY;AAAA,IACjB,QAAQvB,MAAY,eAAe,KAAK;AAAA,IACxC,OAAOA,MAAY,eAAe,KAAK;AAAA,IACvC,OAAOqB;AAAA,IACP,OAAO,EAAE,SAAS,QAAA;AAAA,EAAQ;AAG3B,SACC,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,QAAAvB;AAAA,MACA,OAAOgB;AAAA,MACP,MAAMC;AAAA,MACN,SAAAnB;AAAA,MACA,SAAAC;AAAA,MACA,WAAAE;AAAA,MACA,UAAAC;AAAA,MACA,gBAAAE;AAAA,MACA,SAAAC;AAAA,MACA,QAAAC;AAAA,MACA,iBAAAK;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,sBAAAC;AAAA,MAEA,UAAA,gBAAAU,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAlC,MACCiB,IACA,gBAAAe,EAACG,GAAA,EAAS,GAAGlB,GACZ,UAAA,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAS9B;AAAA,YACT,IAAI,GAAGC,CAAa,cAAc;AAAA,YAEjC,UAAAiC,EAAM,cAAcpC,GAAa;AAAA,cACjC,GAAG+B;AAAA,cACH,IAAI5B,KAAiB;AAAA,YAAA,CACrB;AAAA,UAAA;AAAA,QAAA,GAEH,IAEA,gBAAA6B;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAS9B;AAAA,YACT,IAAI,GAAGC,CAAa,cAAc;AAAA,YAEjC,UAAAiC,EAAM,cAAcpC,GAAa;AAAA,cACjC,GAAG+B;AAAA,cACH,IAAI5B,KAAiB;AAAA,YAAA,CACrB;AAAA,UAAA;AAAA,QAAA;AAAA,QAIHU,MACCN,MAAS,QAAQD,MAAU,UAC3BiB,MAAS,UACR,gBAAAS,EAACK,GAAA,EAAW,eAAAjB,GACV,UAAAP,EAAA,CACF,sBAECyB,GAAA,EAAc,eAAAlB,GACb,UAAAP,EAAA,CACF,IAEEU,MAAS,UACZ,gBAAAS,EAACO,GAAA,EAAS,WAAU,QAAO,eAAAnB,GACzB,UAAAP,EAAA,CACF,IAEA,gBAAAmB,EAACQ,GAAA,EAAY,WAAU,QAAO,eAAApB,GAC5B,UAAAP,EAAA,CACF;AAAA,QAGD,CAACA,KACDY,MAAmB,OAClBlB,MAAS,QAAQD,MAAU,UAC3BiB,MAAS,4BACPc,GAAA,EAAW,eAAAjB,GACV,aACF,IAEA,gBAAAY,EAACM,KAAc,eAAAlB,GACb,UAAAK,EAAA,CACF,IAEEF,MAAS,UACZ,gBAAAS;AAAA,UAACO;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAOpB;AAAA,YACP,eAAAC;AAAA,YAEC,UAAAK;AAAA,UAAA;AAAA,QAAA,IAGF,gBAAAO;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAOrB;AAAA,YACP,eAAAC;AAAA,YAEC,UAAAK;AAAA,UAAA;AAAA,QAAA;AAAA,QAIHxB,MACCiB,IACA,gBAAAc,EAACG,GAAA,EAAS,GAAGjB,GACZ,UAAA,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAS3B;AAAA,YACT,IAAI,GAAGD,CAAc,cAAc;AAAA,YAElC,UAAAgC,EAAM,cAAcnC,GAAc;AAAA,cAClC,GAAG8B;AAAA,cACH,IAAI3B,KAAkB;AAAA,YAAA,CACtB;AAAA,UAAA;AAAA,QAAA,GAEH,IAEA,gBAAA4B;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAS3B;AAAA,YACT,IAAI,GAAGD,CAAc,cAAc;AAAA,YAElC,UAAAgC,EAAM,cAAcnC,GAAc;AAAA,cAClC,GAAG8B;AAAA,cACH,IAAI3B,KAAkB;AAAA,YAAA,CACtB;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,EAAA,CAEH;AAAA,IAAA;AAAA,EAAA;AAGH;AAEAN,EAAI,cAAc;"}

package/dist/esm/components/tag/Tag.styled.d.ts CHANGED Viewed

@@ -13,4 +13,5 @@ export declare const Tag: import('styled-components').StyledComponent<"div", any
     backgroundColor?: string | undefined;
     borderRadius?: string | number | undefined;
     size?: "small" | "regular" | undefined;
+    hoverBackgroundColor?: string | undefined;
 }, never>;

package/dist/esm/components/tag/Tag.styled.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import i from "styled-components";
-import { getPadding as a, getBackgroundColor as t, generateBorder as d, getTextColor as n } from "./themes.js";
-const r = i.div`
+import { getPadding as a, getBackgroundColor as d, generateBorder as n, getTextColor as t } from "./themes.js";
+const o = i.div`
 	cursor: ${(e) => e.cursor ?? "default"};
 	${(e) => e.size !== "small" && (e.variant === "regular" ? `display: block;
 		     min-height: 26px;
@@ -11,17 +11,17 @@ const r = i.div`
 		gap: 6px;
 		${(e) => e.height ? `height: ${e.height}px; box-sizing: border-box;` : e.size === "small" ? "height: 16px; box-sizing: border-box;" : ""}
 		padding: ${(e) => e.padding ? e.padding : e.size === "small" ? "2px 6px" : e.contentPadding ? `${e.contentPadding}px` : a(e.variant)};
-		background: ${(e) => e.backgroundColor ?? t(e.theme, e.type)};
+		background: ${(e) => e.backgroundColor ?? d(e.theme, e.type)};
 		border-radius: ${(e) => e.borderRadius !== void 0 ? typeof e.borderRadius == "number" ? `${e.borderRadius}px` : e.borderRadius : e.variant === "regular" ? "4px" : "12px"};
-		${(e) => !e.noBorder && e.theme === "light" && `border: ${e.version === "2.0" ? 0.5 : 1}px solid ${d(
+		${(e) => !e.noBorder && e.theme === "light" && `border: ${e.version === "2.0" ? 0.5 : 1}px solid ${n(
   e.type,
   e.theme
 )};`}
 		.text {
-			color: ${(e) => n(e.theme, e.type)};
+			color: ${(e) => t(e.theme, e.type)};
 		}
 		.icon-trailing {
@@ -33,9 +33,13 @@ const r = i.div`
 			all: unset;
 			display: flex;
 		}
+		${(e) => e.hoverBackgroundColor && `&:hover {
+				background: ${e.hoverBackgroundColor};
+			}`}
 	}
 `;
 export {
-  r as Tag
+  o as Tag
 };
 //# sourceMappingURL=Tag.styled.js.map

package/dist/esm/components/tag/Tag.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string \| number;\n\tsize?: 'regular' \| 'small';\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n`;\n"],"names":["Tag","styled","props","getPadding","getBackgroundColor","generateBorder","getTextColor"],"mappings":";;AASO,MAAMA,IAAMC,EAAO;AAAA,~~WAef~~,CAACC,MAAUA,EAAM,UAAU,SAAS;AAAA,GAC5C,CAACA,MACFA,EAAM,SAAS,YACdA,EAAM,YAAY,YAChB;AAAA;AAAA,MAGA,oBAAoB;AAAA;AAAA;AAAA,iBAGR,CAACA,MAAWA,EAAM,YAAYA,EAAM,YAAY,QAAS;AAAA;AAAA,IAEtE,CAACA,MACFA,EAAM,SACH,WAAWA,EAAM,MAAM,gCACvBA,EAAM,SAAS,UACf,0CACA,EAAE;AAAA,aACK,CAACA,MACXA,EAAM,UACHA,EAAM,UACNA,EAAM,SAAS,UACf,YACAA,EAAM,iBACN,GAAGA,EAAM,cAAc,OACvBC,EAAWD,EAAM,OAAO,CAAC;AAAA,gBACf,CAACA,MACdA,EAAM,mBAAmBE,EAAmBF,EAAM,OAAOA,EAAM,IAAI,CAAC;AAAA;AAAA,mBAEpD,CAACA,MACjBA,EAAM,iBAAiB,SACpB,OAAOA,EAAM,gBAAiB,WAC7B,GAAGA,EAAM,YAAY,OACrBA,EAAM,eACPA,EAAM,YAAY,YAClB,QACA,MAAM;AAAA;AAAA,IAER,CAACA,MACF,CAACA,EAAM,YACPA,EAAM,UAAU,WAChB,WAAWA,EAAM,YAAY,QAAQ,MAAM,CAAC,YAAYG;AAAA,EACvDH,EAAM;AAAA,EACNA,EAAM;AACP,CAAC,GAAG;AAAA;AAAA;AAAA,YAGK,CAACA,MAAUI,EAAaJ,EAAM,OAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string \| number;\n\tsize?: 'regular' \| 'small';\n\thoverBackgroundColor?: string;\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t${(props) =>\n\t\t\tprops.hoverBackgroundColor &&\n\t\t\t`&:hover {\n\t\t\t\tbackground: ${props.hoverBackgroundColor};\n\t\t\t}`}\n\t}\n`;\n"],"names":["Tag","styled","props","getPadding","getBackgroundColor","generateBorder","getTextColor"],"mappings":";;AASO,MAAMA,IAAMC,EAAO;AAAA,WAgBf,CAACC,MAAUA,EAAM,UAAU,SAAS;AAAA,GAC5C,CAACA,MACFA,EAAM,SAAS,YACdA,EAAM,YAAY,YAChB;AAAA;AAAA,MAGA,oBAAoB;AAAA;AAAA;AAAA,iBAGR,CAACA,MAAWA,EAAM,YAAYA,EAAM,YAAY,QAAS;AAAA;AAAA,IAEtE,CAACA,MACFA,EAAM,SACH,WAAWA,EAAM,MAAM,gCACvBA,EAAM,SAAS,UACf,0CACA,EAAE;AAAA,aACK,CAACA,MACXA,EAAM,UACHA,EAAM,UACNA,EAAM,SAAS,UACf,YACAA,EAAM,iBACN,GAAGA,EAAM,cAAc,OACvBC,EAAWD,EAAM,OAAO,CAAC;AAAA,gBACf,CAACA,MACdA,EAAM,mBAAmBE,EAAmBF,EAAM,OAAOA,EAAM,IAAI,CAAC;AAAA;AAAA,mBAEpD,CAACA,MACjBA,EAAM,iBAAiB,SACpB,OAAOA,EAAM,gBAAiB,WAC7B,GAAGA,EAAM,YAAY,OACrBA,EAAM,eACPA,EAAM,YAAY,YAClB,QACA,MAAM;AAAA;AAAA,IAER,CAACA,MACF,CAACA,EAAM,YACPA,EAAM,UAAU,WAChB,WAAWA,EAAM,YAAY,QAAQ,MAAM,CAAC,YAAYG;AAAA,EACvDH,EAAM;AAAA,EACNA,EAAM;AACP,CAAC,GAAG;AAAA;AAAA;AAAA,YAGK,CAACA,MAAUI,EAAaJ,EAAM,OAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaxD,CAACA,MACFA,EAAM,wBACN;AAAA,kBACeA,EAAM,oBAAoB;AAAA,KACvC;AAAA;AAAA;"}

package/dist/esm/components/tag/model.d.ts CHANGED Viewed

@@ -118,4 +118,9 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
      * @default 'regular'
      */
     size?: 'regular' | 'small';
+    /**
+     * Background color on hover.
+     * @default undefined (no hover effect)
+     */
+    hoverBackgroundColor?: string;
 }

package/dist/esm/components/tag/model.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' \| 'dark';\n\nexport type TagVariant = 'regular' \| 'circle' \| 'compressed';\n\nexport type TagType =\n\t\| 'negative'\n\t\| 'warning'\n\t\| 'positive'\n\t\| 'neutral'\n\t\| 'white'\n\t\| 'purple'\n\t\| 'blue'\n\t\| 'grey'\n\t\| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/*\n\t Set the theme of the Tag\n\t * @default default light\n\t /\n\ttheme?: TagTheme;\n\n\t/\n\t Set the color of the Tag\n\t * @default default neutral\n\t /\n\ttype?: TagType;\n\n\t/\n\t Set the color of the Tag\n\t * @default default regular\n\t /\n\tvariant?: TagVariant;\n\n\t/\n\t The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t /\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/\n\t The right icon id,\n\t * @default trailing-icon\n\t /\n\ttrailingIconId?: string;\n\t/\n\t The right icon on click event, defaults to () => {}\n\t /\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/\n\t Tooltip props for the trailing icon\n\t * @default undefined\n\t /\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/\n\t The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t /\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/\n\t The right icon on click event, defaults to () => {}\n\t /\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/\n\t The left icon id,\n\t * @default leading-icon\n\t /\n\tleadingIconId?: string;\n\t/\n\t Tooltip props for the leading icon\n\t * @default undefined\n\t /\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string \| number;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\t/* Custom CSS padding string, e.g. '4px 8px' /\n\tpadding?: string;\n\t/* Custom height in px /\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/\n\t Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t /\n\tbackgroundColor?: string;\n\t/\n\t Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t /\n\tborderRadius?: string \| number;\n\t/\n\t Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' \| 'small';\n}\n"],"names":["ValidTagTypeMap"],"mappings":"AAmBO,MAAMA,IAAkB;AAAA,EAC9B,SAAS;AAAA,IACR,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAAA,EAEL,QAAQ;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAAA,EAEL,YAAY;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAEN;"}
1	+ {"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' \| 'dark';\n\nexport type TagVariant = 'regular' \| 'circle' \| 'compressed';\n\nexport type TagType =\n\t\| 'negative'\n\t\| 'warning'\n\t\| 'positive'\n\t\| 'neutral'\n\t\| 'white'\n\t\| 'purple'\n\t\| 'blue'\n\t\| 'grey'\n\t\| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/*\n\t Set the theme of the Tag\n\t * @default default light\n\t /\n\ttheme?: TagTheme;\n\n\t/\n\t Set the color of the Tag\n\t * @default default neutral\n\t /\n\ttype?: TagType;\n\n\t/\n\t Set the color of the Tag\n\t * @default default regular\n\t /\n\tvariant?: TagVariant;\n\n\t/\n\t The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t /\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/\n\t The right icon id,\n\t * @default trailing-icon\n\t /\n\ttrailingIconId?: string;\n\t/\n\t The right icon on click event, defaults to () => {}\n\t /\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/\n\t Tooltip props for the trailing icon\n\t * @default undefined\n\t /\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/\n\t The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t /\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/\n\t The right icon on click event, defaults to () => {}\n\t /\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/\n\t The left icon id,\n\t * @default leading-icon\n\t /\n\tleadingIconId?: string;\n\t/\n\t Tooltip props for the leading icon\n\t * @default undefined\n\t /\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string \| number;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\t/* Custom CSS padding string, e.g. '4px 8px' /\n\tpadding?: string;\n\t/* Custom height in px /\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/\n\t Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t /\n\tbackgroundColor?: string;\n\t/\n\t Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t /\n\tborderRadius?: string \| number;\n\t/\n\t Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t /\n\tsize?: 'regular' \| 'small';\n\t/\n\t Background color on hover.\n\t * @default undefined (no hover effect)\n\t */\n\thoverBackgroundColor?: string;\n}\n"],"names":["ValidTagTypeMap"],"mappings":"AAmBO,MAAMA,IAAkB;AAAA,EAC9B,SAAS;AAAA,IACR,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAAA,EAEL,QAAQ;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAAA,EAEL,YAAY;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAEN;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.861",
+	"version": "0.0.862",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",