npm - @bikdotai/bik-component-library - Versions diffs - 0.0.838-beta.0 → 0.0.838-beta.2 - Mend

@bikdotai/bik-component-library 0.0.838-beta.0 → 0.0.838-beta.2

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

package/dist/esm/components/tabs/Tabs.js CHANGED Viewed

@@ -1,157 +1,135 @@
-import { jsxs as N, jsx as r } from "react/jsx-runtime";
-import { useCallback as q, useState as P, useEffect as z } from "react";
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import { useCallback as N, useState as q, useEffect as v } from "react";
 import { DEFAULT_THEME as S } from "../../constants/Theme.js";
-import { TabItem as F, TrailingNumberContainer as f, TabItemText as L, TabHeader as j, EmptyTab as H, RightComponent as R } from "./Tabs.styles.js";
-import { Tag as h } from "../tag/Tag.js";
-const V = (e) => {
+import { TabItem as P, TrailingNumberContainer as y, TabItemText as z, TabHeader as F, EmptyTab as L, RightComponent as j } from "./Tabs.styles.js";
+import { Tag as f } from "../tag/Tag.js";
+const H = (e) => {
   const {
     tabs: t,
-    initialTab: s,
-    onTabSelected: c,
-    TabItemStyledProps: u,
+    initialTab: d,
+    onTabSelected: l,
+    TabItemStyledProps: m,
     selectedTab: a,
-    extendedBorder: d,
-    rightComponent: m,
-    size: b = "default",
-    isSquared: g = !1,
-    containerStyles: T,
-    gap: n,
-    selectedNumberBackground: o
-  } = e, [l, C] = P(s || t[0].key), { colorsV2: y } = S;
-  z(() => {
-    a && a !== l && C(a);
-  }, [a, l]);
-  const E = e.backgroundColor, I = e.selectedTextColor ?? y.background.brand, v = e.textColor ?? y.content.secondary;
-  return /* @__PURE__ */ N(
-    j,
+    extendedBorder: i,
+    rightComponent: b,
+    size: u = "default",
+    isSquared: T = !1,
+    containerStyles: g
+  } = e, [n, r] = q(d || t[0].key), { colorsV2: c } = S;
+  v(() => {
+    a && a !== n && r(a);
+  }, [a, n]);
+  const p = e.backgroundColor, E = e.selectedTextColor ?? c.background.brand, I = e.textColor ?? c.content.secondary;
+  return /* @__PURE__ */ h(
+    F,
     {
-      style: T ?? {},
-      bgColor: E,
-      tabGap: n,
+      style: g ?? {},
+      bgColor: p,
       "data-test": e["data-test"],
       children: [
-        t.map((i, k) => /* @__PURE__ */ r(
-          B,
+        t.map((s, C) => /* @__PURE__ */ o(
+          k,
           {
             hasEqualSpacing: e.hasEqualSpacing,
-            uniformBorder: !!n,
-            selectedTextColor: I,
-            textColor: v,
-            tab: i,
-            currentTab: l,
-            TabItemStyledProps: u,
-            IconComponent: i.icon,
-            size: b,
-            selectedNumberBackground: o,
+            selectedTextColor: E,
+            textColor: I,
+            tab: s,
+            currentTab: n,
+            TabItemStyledProps: m,
+            IconComponent: s.icon,
+            size: u,
             setCurrentTab: (x) => {
-              C(x), c && c(x);
+              r(x), l && l(x);
             },
-            isSquared: g,
-            isFirstlement: k == 0,
-            isLastElement: k == t.length - 1,
-            iconPosition: i.iconPosition ?? "left"
+            isSquared: T,
+            isFirstlement: C == 0,
+            isLastElement: C == t.length - 1,
+            iconPosition: s.iconPosition ?? "left"
           },
-          i.key
+          s.key
         )),
-        d && /* @__PURE__ */ r(H, {}),
-        /* @__PURE__ */ r(R, { children: m })
+        i && /* @__PURE__ */ o(L, {}),
+        /* @__PURE__ */ o(j, { children: b })
       ]
     }
   );
-}, B = (e) => {
+}, k = (e) => {
   const {
     tab: t,
-    currentTab: s,
-    setCurrentTab: c,
-    TabItemStyledProps: u,
+    currentTab: d,
+    setCurrentTab: l,
+    TabItemStyledProps: m,
     IconComponent: a,
-    iconPosition: d = "left",
-    size: m = "default",
-    isSquared: b = !1,
-    isFirstlement: g,
-    isLastElement: T
-  } = e, n = t.key === s, { colorsV2: o } = S, l = q(() => ({
-    ...u,
-    borderRadius: e.isSquared ? g ? "4px 0px 0px 4px" : T ? "0px 4px 4px 0px" : "" : ""
+    iconPosition: i = "left",
+    size: b = "default",
+    isSquared: u = !1,
+    isFirstlement: T,
+    isLastElement: g
+  } = e, n = t.key === d, { colorsV2: r } = S, c = N(() => ({
+    ...m,
+    borderRadius: e.isSquared ? T ? "4px 0px 0px 4px" : g ? "0px 4px 4px 0px" : "" : ""
   }), []);
-  return /* @__PURE__ */ N(
-    F,
+  return /* @__PURE__ */ h(
+    P,
     {
-      style: l(),
+      style: c(),
       selected: n,
-      uniformBorder: e.uniformBorder,
       hasEqualSpacing: e.hasEqualSpacing,
-      onClick: () => c(e.tab.key),
+      onClick: () => l(e.tab.key),
       selectedTextColor: e.selectedTextColor,
-      isSquared: b,
+      isSquared: u,
       "data-test": e["data-test"],
       children: [
-        a && d === "left" && /* @__PURE__ */ r(
+        a && i === "left" && /* @__PURE__ */ o(
           a,
           {
-            selected: n ? o.background.brand : o.content.secondary
+            selected: n ? r.background.brand : r.content.secondary
           }
         ),
-        t.leadingNumber !== void 0 && t.leadingNumber !== null && /* @__PURE__ */ r(
+        t.leadingNumber !== void 0 && t.leadingNumber !== null && /* @__PURE__ */ o(y, { selected: n, children: /* @__PURE__ */ o(
           f,
           {
-            selected: n,
-            selectedBackground: e.selectedNumberBackground,
-            children: /* @__PURE__ */ r(
-              h,
-              {
-                tagText: t?.leadingNumber ?? 0,
-                theme: "dark",
-                type: t.numberTagType,
-                variant: "circle",
-                color: o.content.primaryInverse,
-                backgroundColor: n ? e.selectedNumberBackground : e.selectedNumberBackground ? o.content.secondary : void 0
-              }
-            )
+            tagText: t?.leadingNumber ?? 0,
+            theme: "dark",
+            type: t.numberTagType,
+            variant: "circle",
+            color: r.content.primaryInverse
           }
-        ),
-        /* @__PURE__ */ r(
-          L,
+        ) }),
+        /* @__PURE__ */ o(
+          z,
           {
-            style: m === "small" ? { fontSize: 14, fontStyle: "normal", fontWeight: 600 } : void 0,
+            style: b === "small" ? { fontSize: 14, fontStyle: "normal", fontWeight: 600 } : void 0,
             textColor: e.textColor,
             selectedTextColor: e.selectedTextColor,
             selected: n,
             children: t.title
           }
         ),
-        t.trailingNumber !== void 0 && t.trailingNumber !== null && /* @__PURE__ */ r(
+        t.trailingNumber !== void 0 && t.trailingNumber !== null && /* @__PURE__ */ o(y, { selected: n, children: /* @__PURE__ */ o(
           f,
           {
-            selected: n,
-            selectedBackground: e.selectedNumberBackground,
-            children: /* @__PURE__ */ r(
-              h,
-              {
-                tagText: t?.trailingNumber ?? 0,
-                theme: "dark",
-                type: t.numberTagType,
-                variant: "circle",
-                color: o.content.primaryInverse,
-                backgroundColor: n ? e.selectedNumberBackground : e.selectedNumberBackground ? o.content.secondary : void 0
-              }
-            )
+            tagText: t?.trailingNumber ?? 0,
+            theme: "dark",
+            type: t.numberTagType,
+            variant: "circle",
+            color: r.content.primaryInverse
           }
-        ),
-        a && d === "right" && /* @__PURE__ */ r(
+        ) }),
+        a && i === "right" && /* @__PURE__ */ o(
           a,
           {
-            selected: n ? o.background.brand : o.content.secondary
+            selected: n ? r.background.brand : r.content.secondary
           }
         )
       ]
     }
   );
 };
-V.displayName = "Tabs";
-B.displayName = "TabItemComponent";
+H.displayName = "Tabs";
+k.displayName = "TabItemComponent";
 export {
-  B as TabItemComponent,
-  V as Tabs
+  k as TabItemComponent,
+  H as Tabs
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/esm/components/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t~~\tgap,\n\t\tselectedNumberBackground,\n\t~~} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab \|\| tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\~~ttabGap={gap}\n\t\t\~~tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\~~tuniformBorder={!!gap}\n\t\t\t\t\~~tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\~~tselectedNumberBackground={selectedNumberBackground}\n\t\t\t\t\~~tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\~~tuniformBorder={props.uniformBorder}\n\t\t\~~thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer~~\n\t\t\t\t\tselected~~={selected}~~\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t~~>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t\tbackgroundColor={\n\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t? props.selectedNumberBackground\n\t\t\t\t\t\t\t\t: props.selectedNumberBackground\n\t\t\t\t\t\t\t\t? colorsV2.content.secondary\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer~~\n\t\t\t\t\tselected~~={selected}~~\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t~~>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t\tbackgroundColor={\n\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t? props.selectedNumberBackground\n\t\t\t\t\t\t\t\t: props.selectedNumberBackground\n\t\t\t\t\t\t\t\t? colorsV2.content.secondary\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","~~gap","selectedNumberBackground","~~currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":";;;;;AAaO,MAAMA,IAAqC,CAACC,MAAU;AAC5D,QAAM;AAAA,IACL,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,~~IACA,KAAAC;AAAA,IACA,0BAAAC;AAAA,~~EAAA,~~IACGZ~~,GACE,~~CAACa~~,GAAYC,CAAa,IAAIC,~~EAASb~~,KAAcD,EAAK,CAAC,EAAE,GAAG,GAChE,EAAE,~~UAAAe~~,MAAaC;AAErB,EAAAC,EAAU,MAAM;AACf,~~IAAIb~~,KAAeA,~~MAAgBQ~~,KAClCC,~~EAAcT~~,CAAW;AAAA,EAE3B,GAAG,CAACA,~~GAAaQ~~,CAAU,CAAC;AAE5B,QAAMM,~~IAAkBnB~~,EAAM,~~iBACxBoB~~,~~IACLpB~~,EAAM,~~qBAAqBgB~~,EAAS,WAAW,OAC1CK,~~IAAYrB~~,EAAM,~~aAAagB~~,EAAS,QAAQ;AAEtD,SACC,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,~~OAAOb~~,KAAmB,CAAA;AAAA,MAC1B,~~SAASS~~;AAAA,MACT,~~QAAQR;AAAA~~,~~MACR,aAAWX,~~EAAM,WAAW;AAAA,MAE3B,UAAA;AAAA,QAAAC,EAAK,IAAI,~~CAACuB~~,GAAKC,MACf,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,~~iBAAiB3B~~,EAAM;AAAA,YACvB,~~eAAe,CAAC,CAACW~~;AAAA,~~YACjB,mBAAAS;AAAA,~~YACA,WAAAC;AAAA,YAEA,KAAAG;AAAA,YACA,YAAAX;AAAA,YACA,~~oBAAAT~~;AAAA,YACA,~~eAAeoB~~,EAAI;AAAA,YACnB,~~MAAAhB~~;AAAA,YACA,~~0BAAAI;AAAA,YACA,~~eAAe,~~CAACgB~~,MAAW;AAC1B,cAAAd,EAAcc,CAAM,~~GAChBzB~~,KACHA,~~EAAcyB~~,CAAgB;AAAA,YAEhC;AAAA,YACA,~~WAAAnB~~;AAAA,YACA,~~eAAegB~~,KAAS;AAAA,YACxB,eAAeA,~~KAASxB~~,EAAK,SAAS;AAAA,YACtC,~~cAAcuB~~,EAAI,gBAAgB;AAAA,UAAA;AAAA,~~UAhB7BA~~,EAAI;AAAA,QAAA,~~CAkBV~~;AAAA,~~QACAlB~~,~~uBAAmBuB~~,GAAA,EAAS;AAAA,QAC7B,gBAAAH,EAACI,KAAgB,~~UAAAvB~~,EAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnC,~~GAEaoB~~,IAAoD,~~CAAC3B~~,MAAU;AAC3E,QAAM;AAAA,IACL,~~KAAAwB~~;AAAA,IACA,YAAAX;AAAA,IACA,eAAAC;AAAA,IACA,~~oBAAAV~~;AAAA,IACA,~~eAAA2B~~;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,~~MAAAxB~~,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,~~eAAAwB~~;AAAA,IACA,eAAAC;AAAA,EAAA,~~IACGlC~~,~~GACEmC~~,IAAWX,EAAI,QAAQX,GACvB,EAAE,UAAAG,MAAaC,GAEfmB,IAAYC,EAAY,OACtB;AAAA,IACN,~~GAAGjC~~;AAAA,IACH,cAAcJ,EAAM,~~YACjBiC~~,IACC,oBACAC,IACA,oBACA,KACD;AAAA,EAAA,IAGF,CAAA,CAAE;AAEL,SACC,gBAAAZ;AAAA,IAACgB;AAAA,IAAA;AAAA,MACA,OAAOF,EAAA;AAAA,MACP,UAAAD;AAAA,MACA,~~eAAenC~~,EAAM;AAAA,~~MACrB,iBAAiBA,EAAM;AAAA,~~MACvB,SAAS,~~MAAMc~~,~~EAAcd~~,EAAM,IAAI,GAAG;AAAA,MAC1C,mBAAmBA,EAAM;AAAA,MACzB,WAAAS;AAAA,MACA,aAAWT,EAAM,WAAW;AAAA,MAE3B,UAAA;AAAA,~~QAAA+B~~,KAAiBC,MAAiB,UAClC,gBAAAN;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,UACCI,IAAWnB,EAAS,WAAW,QAAQA,EAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAI1DQ,EAAI,kBAAkB,UAAaA,EAAI,kBAAkB,QACzD,gBAAAE~~;AAAA~~,~~UAACa;AAAA~~,~~UAAA;AAAA~~,~~YACA,~~UAAAJ~~;AAAA~~,~~YACA~~,~~oBAAoBnC,EAAM;AAAA,YAE1B,~~UAAA,~~gBAAA0B~~;AAAA,~~cAACc~~;AAAA,~~cAAA~~;AAAA,~~gBACA~~,SAAShB,GAAK,iBAAiB;AAAA,~~gBAC~~/B,OAAM;AAAA,~~gBACN~~,MAAMA,EAAI;AAAA,~~gBACV~~,SAAQ;AAAA,~~gBACR~~,OAAOR,EAAS,QAAQ;AAAA,~~gBACxB,iBACCmB,IACGnC,EAAM,2BACNA,EAAM,2BACNgB,EAAS,QAAQ,YACjB~~;AAAA,~~cAAA;AAAA~~,~~YAAA~~;AAAA,~~UAEL;AAAA~~,~~QAAA;AAAA,QAGF,~~gBAAAU;AAAA,UAACe;AAAA,UAAA;AAAA,YACA,~~OACCjC~~,MAAS,UACN,EAAE,UAAU,IAAI,WAAW,UAAU,YAAY,IAAA,IACjD;AAAA,YAEJ,WAAWR,EAAM;AAAA,YACjB,mBAAmBA,EAAM;AAAA,YACzB,~~UAAAmC~~;AAAA,YAEC,UAAAX,EAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAELA,EAAI,mBAAmB,UAAaA,EAAI,mBAAmB,QAC3D,gBAAAE~~;AAAA~~,~~UAACa;AAAA~~,~~UAAA;AAAA~~,~~YACA,~~UAAAJ~~;AAAA~~,~~YACA~~,~~oBAAoBnC,EAAM;AAAA,YAE1B,~~UAAA,~~gBAAA0B~~;AAAA,~~cAACc~~;AAAA,~~cAAA~~;AAAA,~~gBACA~~,SAAShB,GAAK,kBAAkB;AAAA,~~gBAChC~~,OAAM;AAAA,~~gBACN~~,MAAMA,EAAI;AAAA,~~gBACV~~,SAAQ;AAAA,~~gBACR~~,OAAOR,EAAS,QAAQ;AAAA,~~gBACxB,iBACCmB,IACGnC,EAAM,2BACNA,EAAM,2BACNgB,EAAS,QAAQ,YACjB~~;AAAA,~~cAAA;AAAA~~,~~YAAA~~;AAAA,~~UAEL;AAAA~~,~~QAAA;AAAA,QAGDe,~~KAAiBC,MAAiB,WAClC,gBAAAN;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,UACCI,IAAWnB,EAAS,WAAW,QAAQA,EAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MAE1D;AAAA,IAAA;AAAA,EAAA;AAIJ;~~AAEAjB~~,EAAK,cAAc;~~AAEnB4B~~,EAAiB,cAAc;"}
1	+ {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab \|\| tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer selected={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"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"}

package/dist/esm/components/tabs/Tabs.model.d.ts CHANGED Viewed

@@ -5,7 +5,6 @@ export interface TabItemProps {
     selected: boolean;
     selectedTextColor: string;
     isSquared?: boolean;
-    uniformBorder?: boolean;
 }
 export interface TabItemTextProps {
     selected: boolean;
@@ -42,14 +41,10 @@ export interface TabViewHeaderProps {
     size?: 'small' | 'default';
     isSquared?: boolean;
     containerStyles?: React.CSSProperties;
-    gap?: number;
-    /** Overrides the background of the leading/trailing number badge on the selected tab. */
-    selectedNumberBackground?: string;
     'data-test'?: string;
 }
 export interface TabItemComponentProps {
     hasEqualSpacing?: boolean;
-    uniformBorder?: boolean;
     tab: TabInterface;
     currentTab: string;
     setCurrentTab: (tabKey: string) => void;
@@ -65,6 +60,4 @@ export interface TabItemComponentProps {
     isLastElement?: boolean;
     'data-test'?: string;
     iconPosition?: 'left' | 'right';
-    /** Overrides the background of the leading/trailing number badge on the selected tab. */
-    selectedNumberBackground?: string;
 }

package/dist/esm/components/tabs/Tabs.styles.d.ts CHANGED Viewed

@@ -1,12 +1,10 @@
 import { TabItemProps, TabItemTextProps } from './Tabs.model';
 export declare const TabHeader: import('styled-components').StyledComponent<"div", any, {
     bgColor?: string | undefined;
-    tabGap?: number | undefined;
 }, never>;
 export declare const TabItem: import('styled-components').StyledComponent<"div", any, TabItemProps, never>;
 export declare const TrailingNumberContainer: import('styled-components').StyledComponent<"div", any, {
     selected: boolean;
-    selectedBackground?: string | undefined;
 }, never>;
 export declare const TabItemText: import('styled-components').StyledComponent<"div", any, {
     numberOfLines?: number | undefined;

package/dist/esm/components/tabs/Tabs.styles.js CHANGED Viewed

@@ -1,25 +1,11 @@
 import t from "styled-components";
 import { DEFAULT_THEME as o } from "../../constants/Theme.js";
 import { ButtonLarge as r } from "../TypographyStyle.js";
-const c = t.div`
+const n = t.div`
 	display: flex;
 	flex-direction: row;
 	background-color: ${(e) => e.bgColor};
-	${(e) => e.tabGap ? `
-		gap: ${e.tabGap}px;
-		position: relative;
-		&::after {
-			content: '';
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			height: 1px;
-			background: ${o.colorsV2.background.inactive};
-			z-index: -1;
-		}
-	` : ""}
-`, a = t.div`
+`, l = t.div`
 	display: flex;
 	flex-direction: row;
 	column-gap: 8px;
@@ -28,8 +14,8 @@ const c = t.div`
 	align-items: center;
 	justify-content: center;
 	width: ${(e) => e.hasEqualSpacing ? "50%" : "auto"};
-	border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : e.uniformBorder ? "transparent" : o.colorsV2.background.inactive};
-	border-bottom-width: ${(e) => e.isSquared ? "" : e.selected || e.uniformBorder ? "2px" : "1px"};
+	border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : o.colorsV2.background.inactive};
+	border-bottom-width: ${(e) => e.isSquared ? "" : e.selected ? "2px" : "1px"};
 	border-bottom-style: ${(e) => e.isSquared ? "" : "solid"};
 	border: ${(e) => e.isSquared ? e.selected ? `1px solid ${e.selectedTextColor}` : `1px solid ${o.colorsV2.background.inactive}` : ""};
 	flex-direction: row;
@@ -39,7 +25,7 @@ const c = t.div`
 		background-color: rgba(0, 0, 0, 0.03);
 	}
 	background-color: ${(e) => e.isSquared && e.selected ? `${o.colorsV2.background.brandLight}` : ""};
-`, l = t.div`
+`, a = t.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -47,7 +33,7 @@ const c = t.div`
 	justify-content: center;
 	min-width: 20px;
 	height: 20px;
-	background: ${(e) => e.selected ? e.selectedBackground ?? o.colorsV2.background.inverseLight : o.colorsV2.content.secondary};
+	background: ${(e) => e.selected ? o.colorsV2.background.inverseLight : o.colorsV2.content.secondary};
 	color: ${o.colorsV2.content.primaryInverse};
 	border-radius: 10px;
 `, s = t(r)`
@@ -63,9 +49,9 @@ const c = t.div`
 export {
   x as EmptyTab,
   b as RightComponent,
-  c as TabHeader,
-  a as TabItem,
+  n as TabHeader,
+  l as TabItem,
   s as TabItemText,
-  l as TrailingNumberContainer
+  a as TrailingNumberContainer
 };
 //# sourceMappingURL=Tabs.styles.js.map

package/dist/esm/components/tabs/Tabs.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string; ~~tabGap?: number~~ }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n\t${(props) =>\n\t\tprops.tabGap\n\t\t\t? `\n\t\tgap: ${props.tabGap}px;\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 1px;\n\t\t\tbackground: ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\t\tz-index: -1;\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: ~~props.uniformBorder\n\t\t\t? 'transparent'\n\t\t\t:~~ DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared~~\n\t\t\t~~? ''~~\n\t\t\t~~: props.selected ~~\|\| props.uniformBorder\n\t\t\t~~? '2px'~~\n\t\t\t~~: '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n~~\tselectedBackground?: string;\n~~}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? ~~props.selectedBackground ??\n\t\t\t~~ DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","~~DEFAULT_THEME~~","~~TabItem~~","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":";;;AAKO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,qBAGX,CAACC,MAAUA,EAAM,OAAO;AAAA,~~GAC1C~~,~~CAACA~~,~~MACFA,EAAM,SACH;AAAA,SACIA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASJC,EAAc,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,KAItD,EAAE;AAAA,GAGMC,IAAUH,~~EAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,CAACC,MAAWA,EAAM,YAAY,aAAa,qBAAsB;AAAA,mBAC1D,CAACA,MAClBA,EAAM,YAAY,KAAKA,EAAM,WAAW,SAAS,MAAM;AAAA;AAAA;AAAA,UAG/C,CAACA,MAAWA,EAAM,kBAAkB,QAAQ,MAAO;AAAA,wBACrC,CAACA,MACvBA,EAAM,YACH,KACAA,EAAM,WACNA,EAAM,~~oBACNA~~,~~EAAM,gBACN,gBACAC,~~EAAc,SAAS,WAAW,QAAQ;AAAA,wBACvB,~~CAACD~~,MACvBA,EAAM,~~YACH~~,~~KACAA~~,EAAM,~~YAAYA~~,~~EAAM~~,~~gBACxB,QACA,~~KAAK;AAAA,~~wBACc~~,CAACA,MAAWA,EAAM,YAAY,KAAK,OAAQ;AAAA,WACxD,CAACA,MACVA,EAAM,YACHA,EAAM,WACL,aAAaA,EAAM,iBAAiB,KACpC,~~aAAaC~~,EAAc,SAAS,WAAW,QAAQ,KACxD,EAAE;AAAA;AAAA;AAAA,cAGO,~~CAACD~~,MAAWA,EAAM,YAAY,UAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAIpC,CAACA,MACpBA,EAAM,aACHA,EAAM,WACL,~~GAAGC~~,EAAc,SAAS,WAAW,UAAU,KAEhD,EAAE;AAAA,~~GAGME~~,IAA0BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~eAW~~/B,CAACC,MACdA,EAAM,~~WACHA~~,~~EAAM,sBACNC,~~EAAc,SAAS,WAAW,eAClCA,EAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,EAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,~~GAI1CG~~,IAAcL,EAAOM,CAAW;AAAA,UACnC,CAACL,MACTA,EAAM,WAAWA,EAAM,oBAAoBA,EAAM,SAAS;AAAA,GAG/CM,IAAWP,EAAO;AAAA;AAAA,~~4BAEHE~~,EAAc,SAAS,WAAW,QAAQ;AAAA,~~GAGzDM~~,IAAiBR,EAAO;AAAA;AAAA;AAAA,~~4BAGTE~~,EAAc,SAAS,WAAW,QAAQ;AAAA;"}
1	+ {"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '2px' : '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","TabItem","DEFAULT_THEME","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":";;;AAKO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,qBAGX,CAACC,MAAUA,EAAM,OAAO;AAAA,GAGhCC,IAAUF,EAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,CAACC,MAAWA,EAAM,YAAY,aAAa,qBAAsB;AAAA,mBAC1D,CAACA,MAClBA,EAAM,YAAY,KAAKA,EAAM,WAAW,SAAS,MAAM;AAAA;AAAA;AAAA,UAG/C,CAACA,MAAWA,EAAM,kBAAkB,QAAQ,MAAO;AAAA,wBACrC,CAACA,MACvBA,EAAM,YACH,KACAA,EAAM,WACNA,EAAM,oBACNE,EAAc,SAAS,WAAW,QAAQ;AAAA,wBACvB,CAACF,MACvBA,EAAM,YAAY,KAAKA,EAAM,WAAW,QAAQ,KAAK;AAAA,wBAC/B,CAACA,MAAWA,EAAM,YAAY,KAAK,OAAQ;AAAA,WACxD,CAACA,MACVA,EAAM,YACHA,EAAM,WACL,aAAaA,EAAM,iBAAiB,KACpC,aAAaE,EAAc,SAAS,WAAW,QAAQ,KACxD,EAAE;AAAA;AAAA;AAAA,cAGO,CAACF,MAAWA,EAAM,YAAY,UAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAIpC,CAACA,MACpBA,EAAM,aACHA,EAAM,WACL,GAAGE,EAAc,SAAS,WAAW,UAAU,KAEhD,EAAE;AAAA,GAGMC,IAA0BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU/B,CAACC,MACdA,EAAM,WACHE,EAAc,SAAS,WAAW,eAClCA,EAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,EAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,GAI1CE,IAAcL,EAAOM,CAAW;AAAA,UACnC,CAACL,MACTA,EAAM,WAAWA,EAAM,oBAAoBA,EAAM,SAAS;AAAA,GAG/CM,IAAWP,EAAO;AAAA;AAAA,4BAEHG,EAAc,SAAS,WAAW,QAAQ;AAAA,GAGzDK,IAAiBR,EAAO;AAAA;AAAA;AAAA,4BAGTG,EAAc,SAAS,WAAW,QAAQ;AAAA;"}

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

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

@@ -13,5 +13,4 @@ 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 d, generateBorder as n, getTextColor as t } from "./themes.js";
-const o = i.div`
+import { getPadding as a, getBackgroundColor as t, generateBorder as d, getTextColor as n } from "./themes.js";
+const r = i.div`
 	cursor: ${(e) => e.cursor ?? "default"};
 	${(e) => e.size !== "small" && (e.variant === "regular" ? `display: block;
 		     min-height: 26px;
@@ -11,17 +11,17 @@ const o = 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 ?? d(e.theme, e.type)};
+		background: ${(e) => e.backgroundColor ?? t(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 ${n(
+		${(e) => !e.noBorder && e.theme === "light" && `border: ${e.version === "2.0" ? 0.5 : 1}px solid ${d(
   e.type,
   e.theme
 )};`}
 		.text {
-			color: ${(e) => t(e.theme, e.type)};
+			color: ${(e) => n(e.theme, e.type)};
 		}
 		.icon-trailing {
@@ -33,13 +33,9 @@ const o = i.div`
 			all: unset;
 			display: flex;
 		}
-		${(e) => e.hoverBackgroundColor && `&:hover {
-				background: ${e.hoverBackgroundColor};
-			}`}
 	}
 `;
 export {
-  o as Tag
+  r 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~~\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;~~"}
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;"}