npm - @bikdotai/bik-component-library - Versions diffs - 0.0.870-beta.1 → 0.0.871 - Mend

@bikdotai/bik-component-library 0.0.870-beta.1 → 0.0.871

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 (173) hide show

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

@@ -1,18 +1,18 @@
-import { jsx as l, jsxs as S } from "react/jsx-runtime";
+import { jsx as l, jsxs as J } from "react/jsx-runtime";
 import m from "react";
-import { Tooltip as u } from "../tooltips/Tooltip.js";
-import { AiBodyTiny as B, AiBodyCaption as C, BodyTiny as E, BodyCaption as T } from "../TypographyStyle.js";
-import { ValidTagTypeMap as U } from "./model.js";
-import { Tag as W } from "./Tag.styled.js";
-import { getTagIconColor as X } from "./themes.js";
-const Y = ({
+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 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,
-  onLeadingIconClicked: w = void 0,
-  leadingIconId: o,
+  onLeadingIconClicked: N = void 0,
+  leadingIconId: a,
   trailingIconId: p,
-  onTrailingIconClicked: f = void 0,
+  onTrailingIconClicked: w = void 0,
   theme: d = "light",
   type: t = "neutral",
   variant: c = "regular",
@@ -25,33 +25,30 @@ const Y = ({
   padding: P,
   height: R,
   leadingIconTooltip: g,
-  trailingIconTooltip: $,
-  tagColor: y,
+  trailingIconTooltip: f,
+  tagColor: C,
   numberOfLines: r,
   backgroundColor: V,
   borderRadius: q,
-  size: a = "regular",
-  borderStyle: D,
-  gap: F,
-  hoverBackgroundColor: G,
-  ...J
+  size: o = "regular",
+  hoverBackgroundColor: D
 }) => {
   let i = k;
-  const K = d;
-  let N = t;
-  U[c][t] || (N = "neutral"), c === "circle" && typeof i == "number" && i > 99 && (i = "99+");
-  const Q = X(d, N), s = {
+  const F = d;
+  let y = t;
+  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: Q,
+    color: G,
     style: { display: "block" }
   };
   return /* @__PURE__ */ l(
-    W,
+    Q,
     {
       cursor: j,
-      theme: K,
-      type: N,
+      theme: F,
+      type: y,
       variant: c,
       version: x,
       alignIcon: A,
@@ -61,42 +58,38 @@ const Y = ({
       height: R,
       backgroundColor: V,
       borderRadius: q,
-      size: a,
-      borderStyle: D,
-      gap: F,
-      tagColor: y,
-      hoverBackgroundColor: G,
-      ...J,
-      children: /* @__PURE__ */ S("div", { className: "container", children: [
-        h && (g ? /* @__PURE__ */ l(u, { ...g, children: /* @__PURE__ */ l(
+      size: o,
+      hoverBackgroundColor: D,
+      children: /* @__PURE__ */ J("div", { className: "container", children: [
+        h && (g ? /* @__PURE__ */ l($, { ...g, children: /* @__PURE__ */ l(
           "button",
           {
             className: "icon-leading",
-            onClick: w,
-            id: `${o}-wrapper` || "leading-icon-wrapper",
+            onClick: N,
+            id: `${a}-wrapper` || "leading-icon-wrapper",
             children: m.createElement(h, {
               ...s,
-              id: o || "leading-icon"
+              id: a || "leading-icon"
             })
           }
         ) }) : /* @__PURE__ */ l(
           "button",
           {
             className: "icon-leading",
-            onClick: w,
-            id: `${o}-wrapper` || "leading-icon-wrapper",
+            onClick: N,
+            id: `${a}-wrapper` || "leading-icon-wrapper",
             children: m.createElement(h, {
               ...s,
-              id: o || "leading-icon"
+              id: a || "leading-icon"
             })
           }
         )),
-        e && (t === "ai" && d === "light" ? a === "small" ? /* @__PURE__ */ l(B, { numberOfLines: r, children: e }) : /* @__PURE__ */ l(C, { numberOfLines: r, children: e }) : a === "small" ? /* @__PURE__ */ l(E, { className: "text", numberOfLines: r, children: e }) : /* @__PURE__ */ l(T, { className: "text", numberOfLines: r, children: e })),
-        !e && i !== "" && (t === "ai" && d === "light" ? a === "small" ? /* @__PURE__ */ l(B, { numberOfLines: r, children: i }) : /* @__PURE__ */ l(C, { numberOfLines: r, children: i }) : a === "small" ? /* @__PURE__ */ l(
+        e && (t === "ai" && d === "light" ? o === "small" ? /* @__PURE__ */ l(u, { numberOfLines: r, children: e }) : /* @__PURE__ */ l(B, { numberOfLines: r, children: e }) : o === "small" ? /* @__PURE__ */ l(E, { className: "text", numberOfLines: r, children: e }) : /* @__PURE__ */ l(T, { className: "text", numberOfLines: r, children: e })),
+        !e && i !== "" && (t === "ai" && d === "light" ? o === "small" ? /* @__PURE__ */ l(u, { numberOfLines: r, children: i }) : /* @__PURE__ */ l(B, { numberOfLines: r, children: i }) : o === "small" ? /* @__PURE__ */ l(
           E,
           {
             className: "text",
-            color: y,
+            color: C,
             numberOfLines: r,
             children: i
           }
@@ -104,16 +97,16 @@ const Y = ({
           T,
           {
             className: "text",
-            color: y,
+            color: C,
             numberOfLines: r,
             children: i
           }
         )),
-        n && ($ ? /* @__PURE__ */ l(u, { ...$, children: /* @__PURE__ */ l(
+        n && (f ? /* @__PURE__ */ l($, { ...f, children: /* @__PURE__ */ l(
           "button",
           {
             className: "icon-trailing",
-            onClick: f,
+            onClick: w,
             id: `${p}-wrapper` || "trailing-icon-wrapper",
             children: m.createElement(n, {
               ...s,
@@ -124,7 +117,7 @@ const Y = ({
           "button",
           {
             className: "icon-trailing",
-            onClick: f,
+            onClick: w,
             id: `${p}-wrapper` || "trailing-icon-wrapper",
             children: m.createElement(n, {
               ...s,
@@ -136,8 +129,8 @@ const Y = ({
     }
   );
 };
-Y.displayName = "Tag";
+U.displayName = "Tag";
 export {
-  Y 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\~~tborderStyle,\n\tgap,\n\~~thoverBackgroundColor,\n~~\t...rest\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\~~tborderStyle={borderStyle}\n\t\t\tgap={gap}\n\t\t\ttagColor={tagColor}\n\t\t\~~thoverBackgroundColor={hoverBackgroundColor}\n\t\t~~\t{...rest}\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","~~borderStyle","gap","~~hoverBackgroundColor","~~rest","~~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,~~aAAAC;AAAA,EACA,KAAAC;AAAA,EACA,~~sBAAAC;~~AAAA~~,~~EACA,GAAGC;AACJ,~~MAAgB;AACf,MAAIC,~~IAAiB7B~~;AACrB,~~QAAM8B~~,~~IAAevB~~;AACrB,~~MAAIwB~~,~~IAAcvB~~;AAElB,~~EAAKwB~~,~~EAAgBvB~~,CAAO,EAAED,CAAI,~~MACjCuB~~,IAAc,~~YAGXtB~~,MAAY,YACX,~~OAAOoB~~,KAAmB,YAAYA,IAAiB,OAC1DA,IAAiB;AAInB,QAAMI,IAAYC,~~EAAgB3B~~,~~GAAOwB~~,CAAW,GAC9CI,IAAY;AAAA,IACjB,~~QAAQ1B~~,MAAY,eAAe,KAAK;AAAA,IACxC,OAAOA,MAAY,eAAe,KAAK;AAAA,IACvC,~~OAAOwB~~;AAAA,IACP,OAAO,EAAE,SAAS,QAAA;AAAA,EAAQ;AAG3B,SACC,gBAAAG;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,~~QAAA1B~~;AAAA,MACA,~~OAAOmB~~;AAAA,MACP,MAAMC;AAAA,MACN,~~SAAAtB~~;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,~~aAAAC~~;AAAA,~~MACA~~,~~KAAAC;AAAA,MACA,UAAAN;AAAA,MACA,sBAAAO;AAAA,MACC,GAAGC;AAAA,MAEJ,~~UAAA,gBAAAU,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,~~QAAArC~~,MACCiB,IACA,~~gBAAAkB~~,EAACG,GAAA,EAAS,~~GAAGrB~~,GACZ,UAAA,~~gBAAAkB~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~SAASjC~~;AAAA,YACT,IAAI,GAAGC,CAAa,cAAc;AAAA,YAEjC,~~UAAAoC~~,EAAM,~~cAAcvC~~,GAAa;AAAA,cACjC,~~GAAGkC~~;AAAA,cACH,~~IAAI/B~~,KAAiB;AAAA,YAAA,CACrB;AAAA,UAAA;AAAA,QAAA,GAEH,IAEA,~~gBAAAgC~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~SAASjC~~;AAAA,YACT,IAAI,GAAGC,CAAa,cAAc;AAAA,YAEjC,~~UAAAoC~~,EAAM,~~cAAcvC~~,GAAa;AAAA,cACjC,~~GAAGkC~~;AAAA,cACH,~~IAAI/B~~,KAAiB;AAAA,YAAA,CACrB;AAAA,UAAA;AAAA,QAAA;AAAA,QAIHU,MACCN,MAAS,QAAQD,MAAU,UAC3BiB,MAAS,UACR,~~gBAAAY~~,EAACK,GAAA,EAAW,~~eAAApB~~,GACV,UAAAP,EAAA,CACF,~~sBAEC4B~~,GAAA,EAAc,~~eAAArB~~,GACb,UAAAP,EAAA,CACF,IAEEU,MAAS,UACZ,~~gBAAAY~~,EAACO,GAAA,EAAS,WAAU,QAAO,~~eAAAtB~~,GACzB,UAAAP,EAAA,CACF,IAEA,~~gBAAAsB~~,EAACQ,GAAA,EAAY,WAAU,QAAO,~~eAAAvB~~,GAC5B,UAAAP,EAAA,CACF;AAAA,QAGD,CAACA,~~KACDe~~,MAAmB,~~OAClBrB~~,MAAS,QAAQD,MAAU,UAC3BiB,MAAS,~~4BACPiB~~,GAAA,EAAW,~~eAAApB~~,GACV,aACF,IAEA,~~gBAAAe~~,EAACM,KAAc,~~eAAArB~~,GACb,~~UAAAQ~~,EAAA,CACF,~~IAEEL~~,MAAS,UACZ,~~gBAAAY~~;AAAA,UAACO;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~OAAOvB~~;AAAA,YACP,eAAAC;AAAA,YAEC,~~UAAAQ~~;AAAA,UAAA;AAAA,QAAA,IAGF,gBAAAO;AAAA,UAACQ;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~OAAOxB~~;AAAA,YACP,eAAAC;AAAA,YAEC,~~UAAAQ~~;AAAA,UAAA;AAAA,QAAA;AAAA,~~QAIH3B~~,MACCiB,IACA,~~gBAAAiB~~,EAACG,GAAA,EAAS,~~GAAGpB~~,GACZ,UAAA,~~gBAAAiB~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~SAAS9B~~;AAAA,YACT,IAAI,GAAGD,CAAc,cAAc;AAAA,YAElC,~~UAAAmC~~,EAAM,~~cAActC~~,GAAc;AAAA,cAClC,~~GAAGiC~~;AAAA,cACH,~~IAAI9B~~,KAAkB;AAAA,YAAA,CACtB;AAAA,UAAA;AAAA,QAAA,GAEH,IAEA,~~gBAAA+B~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,WAAU;AAAA,YACV,~~SAAS9B~~;AAAA,YACT,IAAI,GAAGD,CAAc,cAAc;AAAA,YAElC,~~UAAAmC~~,EAAM,~~cAActC~~,GAAc;AAAA,cAClC,~~GAAGiC~~;AAAA,cACH,~~IAAI9B~~,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

@@ -1,5 +1,7 @@
 import { TagTheme, TagType, TagVariant } from './model';
-export declare const Tag: import('styled-components').StyledComponent<"div", any, {
+export declare const Tag: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     theme: TagTheme;
     type: TagType;
     variant: TagVariant;
@@ -13,8 +15,5 @@ export declare const Tag: import('styled-components').StyledComponent<"div", any
     backgroundColor?: string | undefined;
     borderRadius?: string | number | undefined;
     size?: "small" | "regular" | undefined;
-    borderStyle?: "dashed" | "solid" | undefined;
-    gap?: number | undefined;
-    tagColor?: string | undefined;
     hoverBackgroundColor?: string | undefined;
-}, never>;
+}>> & string;

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 d, generateBorder as t, getTextColor as n } from "./themes.js";
-const g = 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;
@@ -8,17 +8,20 @@ const g = i.div`
 	.container {
 		display: flex;
 		align-items: ${(e) => e.alignIcon ? e.alignIcon : "center"};
-		gap: ${(e) => e.gap ?? 6}px;
+		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 ?? 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 ${e.borderStyle ?? "solid"} ${t(e.type, e.theme)};`}
+		${(e) => !e.noBorder && e.theme === "light" && `border: ${e.version === "2.0" ? 0.5 : 1}px solid ${n(
+  e.type,
+  e.theme
+)};`}
 		.text {
-			color: ${(e) => e.tagColor ?? n(e.theme, e.type)};
+			color: ${(e) => t(e.theme, e.type)};
 		}
 		.icon-trailing {
@@ -37,6 +40,6 @@ const g = i.div`
 	}
 `;
 export {
-  g 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\~~tborderStyle?: 'solid' \| 'dashed';\n\tgap?: number;\n\ttagColor?: string;\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: ~~${(props) => props.gap ?? 6}px~~;\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 ${\n\t\t\t\tprops.~~borderStyle ?? 'solid'\~~n\t\t\t~~} ${generateBorder(props~~.~~type, props.~~theme)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) ~~=>\n\t\t\t\tprops.tagColor~~ ?? 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,~~WAmBf~~,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~~,SACjE,CAACA,MAAUA,EAAM,OAAO,CAAC~~;AAAA,~~IAC9B~~,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,~~MAC3CA~~,~~EAAM~~,~~eAAe,OACtB,IAAIG,EAAeH,~~EAAM,~~MAAMA~~,EAAM,~~KAAK,~~CAAC,GAAG;AAAA;AAAA;AAAA,~~YAGrC~~,CAACA,~~MACTA~~,~~EAAM,YAAYI,~~EAAaJ,EAAM,OAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~IAavD~~,CAACA,MACFA,EAAM,wBACN;AAAA,kBACeA,EAAM,oBAAoB;AAAA,KACvC;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,17 +118,6 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
      * @default 'regular'
      */
     size?: 'regular' | 'small';
-    /**
-     * Border style of the tag container. 'dashed' marks an action that is not
-     * configured yet, e.g. an "Add custom" affordance.
-     * @default 'solid'
-     */
-    borderStyle?: 'solid' | 'dashed';
-    /**
-     * Gap in px between the leading icon, text and trailing icon.
-     * @default 6
-     */
-    gap?: number;
     /**
      * Background color on hover.
      * @default undefined (no hover effect)

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\t/\n\t Border style of the tag container. 'dashed' marks an action that is not\n\t * configured yet, e.g. an \"Add custom\" affordance.\n\t * @default 'solid'\n\t /\n\tborderStyle?: 'solid' \| 'dashed';\n\t/\n\t Gap in px between the leading icon, text and trailing icon.\n\t * @default 6\n\t /\n\tgap?: number;\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;"}
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/dist/esm/components/template-context-mapper/Badge/index.d.ts CHANGED Viewed

@@ -1,6 +1,9 @@
-export declare const BadgeContainer: import('styled-components').StyledComponent<"div", any, {
+/// <reference types="react" />
+export declare const BadgeContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     padding?: string | undefined;
-}, never>;
+}>> & string;
 export interface BadgeProps {
     errorText: string;
     padding?: string;

package/dist/esm/components/template-context-mapper/modalElements/EditMediaV2.style.d.ts CHANGED Viewed

@@ -1,6 +1,15 @@
-export declare const RightComponent: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const ImageContainer: import('styled-components').StyledComponent<"div", any, {
+/// <reference types="react" />
+export declare const RightComponent: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const ImageContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     error: boolean;
-}, never>;
-export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const EditTemplateMediaContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
+}>> & string;
+export declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const EditTemplateMediaContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;

package/dist/esm/components/template-context-mapper/modalElements/VariableConnector.d.ts CHANGED Viewed

@@ -3,10 +3,12 @@ import { ButtonPlaceHolderOptions, CUSTOM_VARIABLE } from '../../template-previe
 import { WEB_PUSH_COMPONENT_TYPE } from '../../template-preview/models/WebpushTemplate';
 import { BUTTON_TYPE } from '../../template-preview/models/WhatsAppTemplate';
 import { ComponentType } from './modal';
-export declare const Container: import('styled-components').StyledComponent<"div", any, {
+export declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     focused?: boolean | undefined;
     channel?: CHANNEL_TYPE | undefined;
-}, never>;
+}>> & string;
 /** COMPONENT BELOW */
 export interface VariableConnectorProps {
     onFocus?: () => void;

package/dist/esm/components/template-context-mapper/modalElements/VariableConnectorsPanel.d.ts CHANGED Viewed

@@ -1,4 +1,7 @@
-export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const Container: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
 export interface VariableConnectorsProps {
     onFocus?: (variableIndex: number) => void;
     showVariableModal?: boolean;
@@ -7,4 +10,6 @@ export interface VariableConnectorsProps {
 }
 declare const VariableConnectors: ({ onFocus, showVariableModal, discountCode, setDiscountCode, }: VariableConnectorsProps) => import("react/jsx-runtime").JSX.Element;
 export default VariableConnectors;
-export declare const AddVariableStyled: import('styled-components').StyledComponent<"button", any, {}, never>;
+export declare const AddVariableStyled: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;

package/dist/esm/components/template-context-mapper/styles/TemplateAnalyticsStyles.d.ts CHANGED Viewed

@@ -1,9 +1,27 @@
-export declare const TemplateContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const RightPanelContainer: import('styled-components').StyledComponent<"div", any, {
+/// <reference types="react" />
+export declare const TemplateContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const RightPanelContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     fullWidth?: boolean | undefined;
-}, never>;
-export declare const LeftPanelContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const CustomTitleMedium: import('styled-components').StyledComponent<"div", any, {
+}>> & string;
+export declare const LeftPanelContainer: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const CustomTitleMedium: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<Omit<import('styled-components').FastOmit<import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     numberOfLines?: number | undefined;
     color?: string | undefined;
-}, never>;
+}>, "as" | "forwardedAs"> & {
+    as?: import('styled-components').WebTarget | undefined;
+    forwardedAs?: import('styled-components').WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | (import('react').CSSProperties & {
+        [key: `--${string}`]: string | number | undefined;
+    }) | undefined;
+}> & string;

package/dist/esm/components/template-context-mapper/utils/TemplateConstants.d.ts CHANGED Viewed

@@ -2,40 +2,48 @@ export declare const TEMPLATE_QUALITY_MAP: {
     YELLOW: {
         Icon: import('react').FunctionComponent<import('react').SVGAttributes<SVGElement>>;
         title: string;
-        sublineTextType: import('styled-components').StyledComponent<"div", any, {
+        sublineTextType: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+            style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+        }, {
             numberOfLines?: number | undefined;
             color?: string | undefined;
-        }, never>;
+        }>> & string;
         sublineColor: string;
         subline: string;
     };
     RED: {
         Icon: import('react').FunctionComponent<import('react').SVGAttributes<SVGElement>>;
         title: string;
-        sublineTextType: import('styled-components').StyledComponent<"div", any, {
+        sublineTextType: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+            style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+        }, {
             numberOfLines?: number | undefined;
             color?: string | undefined;
-        }, never>;
+        }>> & string;
         sublineColor: string;
         subline: string;
     };
     GREEN: {
         Icon: import('react').FunctionComponent<import('react').SVGAttributes<SVGElement>>;
         title: string;
-        sublineTextType: import('styled-components').StyledComponent<"div", any, {
+        sublineTextType: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+            style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+        }, {
             numberOfLines?: number | undefined;
             color?: string | undefined;
-        }, never>;
+        }>> & string;
         sublineColor: string;
         subline: string;
     };
     UNKNOWN: {
         Icon: import('react').FunctionComponent<import('react').SVGAttributes<SVGElement>>;
         title: string;
-        sublineTextType: import('styled-components').StyledComponent<"div", any, {
+        sublineTextType: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+            style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+        }, {
             numberOfLines?: number | undefined;
             color?: string | undefined;
-        }, never>;
+        }>> & string;
         sublineColor: string;
         subline: string;
     };

package/dist/esm/components/template-preview/EmailTemplatePreview.styled.d.ts CHANGED Viewed

@@ -1,14 +1,27 @@
-export declare const Header: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const ImageContainer: import('styled-components').StyledComponent<"div", any, {
+/// <reference types="react" />
+export declare const Header: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const ImageContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     hideHeader?: boolean | undefined;
-}, never>;
-export declare const CardLoadingContainer: import('styled-components').StyledComponent<"div", any, {
+}>> & string;
+export declare const CardLoadingContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     hideHeader?: boolean | undefined;
-}, never>;
-export declare const IframeContainer: import('styled-components').StyledComponent<"div", any, {
+}>> & string;
+export declare const IframeContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     applyBorderBottom?: boolean | undefined;
-}, never>;
-export declare const ViewButton: import('styled-components').StyledComponent<"div", any, {}, never>;
-export declare const EmailContainer: import('styled-components').StyledComponent<"div", any, {
+}>> & string;
+export declare const ViewButton: import('styled-components/dist/types').IStyledComponentBase<"web", Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const EmailContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Merged<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import('react').CSSProperties | import('styled-components/dist/types').CSSPropertiesWithVars | undefined;
+}, {
     hideHeader?: boolean | undefined;
-}, never>;
+}>> & string;