@bikdotai/bik-component-library 0.0.836-beta.3 → 0.0.837-0

package/dist/esm/components/product-picker-v2/product.js

@@ -3,19 +3,19 @@ import { COLORS as D } from "../../constants/Theme.js";
 import B from "../../assets/icons/info.svg.js";
 import { TitleSmall as $, BodyCaption as R } from "../TypographyStyle.js";
 import { CurrencySymbols as O } from "./constants.js";
-import { ProductHelper as K } from "./helpers/ProductHelper.js";
-import { ProductPickerTag as L } from "./ProductPickerTag.js";
+import { ProductHelper as L } from "./helpers/ProductHelper.js";
+import { ProductPickerTag as K } from "./ProductPickerTag.js";
 import { ProductCardStyle as E, ProductInfo as G, ProductSubTitle as H, SKUIDBadge as _, EllipsedBodyTiny as q } from "./style.js";
 import { shouldShowVariant as V, getSkuId as z } from "./utility.js";
 import { CheckBox as J } from "../checkBox/CheckBox.js";
 import { ShimmerImage as M } from "../shimmer-image/ShimmerImage.js";
 import { Tooltip as A } from "../tooltips/Tooltip.js";
 import { IconButton as N } from "../icon-button/IconButton.js";
-const lt = (v) => {
+const le = (v) => {
   const {
     collectionId: c,
-    productId: e,
-    data: t,
+    productId: t,
+    data: e,
     selectedData: o,
     selectedCollectionsDispatch: a,
     viewOnly: n,
@@ -24,18 +24,18 @@ const lt = (v) => {
     hideProductCheckbox: l,
     outOfStockAction: y,
     hideVariantCheckbox: p,
-    hideProductVariants: h,
+    hideProductVariants: m,
     pickerType: P,
     onProductDetailClick: s,
     showProductDetailInfoIcon: C
-  } = v, g = () => !!o?.[c]?.products?.[e], S = (i) => o?.[c]?.products?.[e] ? !!o?.[c]?.products?.[e]?.variants?.[i] : !1, b = !h && V(t) ? "" : `${t.currency ? O[t.currency] ?? "" : ""}${Object.values(t.variants ?? {})?.[0]?.price ?? Object.values(t.variants ?? {})?.[0]?.actualPrice ?? ""}`;
+  } = v, g = () => !!o?.[c]?.products?.[t], S = (i) => o?.[c]?.products?.[t] ? !!o?.[c]?.products?.[t]?.variants?.[i] : !1, b = !m && V(e) ? "" : `${e.currency ? O[e.currency] ?? "" : ""}${Object.values(e.variants ?? {})?.[0]?.price ?? Object.values(e.variants ?? {})?.[0]?.actualPrice ?? ""}`;
   return /* @__PURE__ */ u("div", { children: [
     /* @__PURE__ */ r(
       U,
       {
         isVariant: !1,
-        data: t,
-        productId: e,
+        data: e,
+        productId: t,
         collectionId: c,
         isSelected: g(),
         isPartiallyChecked: f,
@@ -44,28 +44,28 @@ const lt = (v) => {
         viewOnly: n,
         hideProductCheckbox: l,
         hideVariantCheckbox: p,
-        hideProductVariants: h,
+        hideProductVariants: m,
         pickerType: P,
         outOfStockAction: y,
         onProductDetailClick: s,
         showProductDetailInfoIcon: C,
         currencyAndPrice: b
       },
-      e
+      t
     ),
-    h ? null : V(t) && Object.keys(t.variants || []).map((i) => {
-      const m = `${t.currency ? O[t.currency] ?? "" : ""}${t.variants?.[i]?.price ?? t.variants?.[i]?.actualPrice ?? ""}`;
+    m ? null : V(e) && Object.keys(e.variants || []).map((i) => {
+      const h = `${e.currency ? O[e.currency] ?? "" : ""}${e.variants?.[i]?.price ?? e.variants?.[i]?.actualPrice ?? ""}`;
       return /* @__PURE__ */ r(
         U,
         {
           isVariant: !0,
           hideVariantCheckbox: p,
           data: {
-            ...t.variants[i],
-            currency: t.currency
+            ...e.variants[i],
+            currency: e.currency
           },
           variantId: i,
-          productId: e,
+          productId: t,
           viewOnly: n,
           upliftAdditions: d,
           collectionId: c,
@@ -74,7 +74,7 @@ const lt = (v) => {
           outOfStockAction: y,
           onProductDetailClick: s,
           showProductDetailInfoIcon: C,
-          currencyAndPrice: m
+          currencyAndPrice: h
         },
         i
       );
@@ -83,8 +83,8 @@ const lt = (v) => {
 }, U = (v) => {
   const {
     isVariant: c,
-    data: e,
-    productId: t,
+    data: t,
+    productId: e,
     collectionId: o,
     variantId: a,
     isSelected: n,
@@ -93,7 +93,7 @@ const lt = (v) => {
     upliftAdditions: l,
     isPartiallyChecked: y,
     hideProductCheckbox: p,
-    outOfStockAction: h,
+    outOfStockAction: m,
     hideVariantCheckbox: P,
     hideProductVariants: s,
     pickerType: C = "PRODUCT",
@@ -102,44 +102,44 @@ const lt = (v) => {
     currencyAndPrice: b
   } = v, {
     isVariantForProductPickerTag: i,
-    dataForProductPickerTag: m,
+    dataForProductPickerTag: h,
     tagText: I,
     tagType: w
-  } = K.getDataForProductPickerTag(
-    e,
+  } = L.getDataForProductPickerTag(
+    t,
     c,
-    h
-  ), x = z(e, c);
+    m
+  ), x = z(t, c);
   return /* @__PURE__ */ u(
     E,
     {
       isVariant: c,
       onClick: (k) => {
         if (k.stopPropagation(), C === "PRODUCT" && (p || P)) {
-          const T = Object.keys(e.variants);
+          const T = Object.keys(t.variants);
           s ? n ? d({
             type: "productUnselected",
             data: {
-              productId: t,
+              productId: e,
               collectionId: o
             }
           }) : l("productSelected", {
-            productId: t,
+            productId: e,
             variantId: a,
             collectionId: o,
-            product: e
+            product: t
           }) : n ? d({
             type: "variantUnselected",
             data: {
-              productId: t,
+              productId: e,
               variantId: a,
               collectionId: o
             }
           }) : l("variantSelected", {
-            productId: t,
+            productId: e,
             variantId: a || T[0],
             collectionId: o,
-            variant: e
+            variant: t
           });
         }
       },
@@ -150,30 +150,31 @@ const lt = (v) => {
           {
             isChecked: n,
             isPartiallyChecked: y || !1,
+            ariaLabel: t.name,
             onValueChange: function(k, T, j) {
               j?.stopPropagation(), c ? k ? l(
                 s ? "productSelected" : "variantSelected",
                 {
-                  productId: t,
+                  productId: e,
                   variantId: a,
                   collectionId: o,
-                  variant: e
+                  variant: t
                 }
               ) : d({
                 type: s ? "productUnselected" : "variantUnselected",
                 data: {
-                  productId: t,
+                  productId: e,
                   variantId: a,
                   collectionId: o
                 }
               }) : k ? l("productSelected", {
-                productId: t,
+                productId: e,
                 collectionId: o,
-                product: e
+                product: t
               }) : d({
                 type: "productUnselected",
                 data: {
-                  productId: t,
+                  productId: e,
                   collectionId: o
                 }
               });
@@ -185,7 +186,7 @@ const lt = (v) => {
           {
             width: 40,
             height: 40,
-            imageUrl: e.image,
+            imageUrl: t.image,
             alt: "Item",
             borderRadius: 4
           }
@@ -213,7 +214,7 @@ const lt = (v) => {
                       A,
                       {
                         variant: "light",
-                        body: e.name,
+                        body: t.name,
                         placement: "bottom",
                         delay: 400,
                         children: /* @__PURE__ */ r(
@@ -223,17 +224,17 @@ const lt = (v) => {
                               flex: 1
                             },
                             numberOfLines: 1,
-                            children: e.name
+                            children: t.name
                           }
                         )
                       }
                     ),
                     /* @__PURE__ */ u(G, { children: [
                       /* @__PURE__ */ r(
-                        L,
+                        K,
                         {
                           isVariant: i,
-                          data: m,
+                          data: h,
                           tagText: I,
                           tagType: w
                         }
@@ -242,7 +243,7 @@ const lt = (v) => {
                         N,
                         {
                           onClick: () => {
-                            g?.(e);
+                            g?.(t);
                           },
                           Icon: () => /* @__PURE__ */ r(
                             B,
@@ -259,7 +260,7 @@ const lt = (v) => {
                 }
               ),
               /* @__PURE__ */ u(H, { children: [
-                !m?.fbStatus && i || I ? null : /* @__PURE__ */ r(R, { color: D.content.secondary, children: b }),
+                !h?.fbStatus && i || I ? null : /* @__PURE__ */ r(R, { color: D.content.secondary, children: b }),
                 x && /* @__PURE__ */ r(A, { body: x, placement: "top", children: /* @__PURE__ */ r(_, { children: /* @__PURE__ */ r(q, { children: `SKU ID: ${x}` }) }) })
               ] })
             ]
@@ -271,6 +272,6 @@ const lt = (v) => {
 };
 export {
   U as ProductCard,
-  lt as ProductGroup
+  le as ProductGroup
 };
 //# sourceMappingURL=product.js.map

package/dist/esm/components/product-picker-v2/product.js.map

@@ -1 +1 @@
-{"version":3,"file":"product.js","sources":["../../../../src/components/product-picker-v2/product.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { CheckBox } from '../checkBox';\nimport { IconButton } from '../icon-button';\nimport { ShimmerImage } from '../shimmer-image';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { CurrencySymbols } from './constants';\nimport { ProductHelper } from './helpers/ProductHelper';\nimport { ProductPickerTag } from './ProductPickerTag';\nimport type { SelectedCollectionsActions } from './reducers';\nimport {\n\tEllipsedBodyTiny,\n\tProductCardStyle,\n\tProductInfo,\n\tProductSubTitle,\n\tSKUIDBadge,\n} from './style';\nimport {\n\tOUT_OF_STOCK_ACTION,\n\ttype Product,\n\ttype ProductVariant,\n\ttype SelectedItems,\n} from './type';\nimport { getSkuId, shouldShowVariant } from './utility';\n\ninterface ProductGroupInterface {\n\tcollectionId: string;\n\tproductId: string;\n\tdata: Product;\n\tselectedData: SelectedItems;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tviewOnly: boolean;\n\tisProductPartiallyChecked?: boolean;\n\tupliftAdditions: any;\n\thideProductCheckbox?: boolean;\n\toutOfStockAction?: OUT_OF_STOCK_ACTION;\n\thideVariantCheckbox?: boolean;\n\thideProductVariants?: boolean;\n\tshowProductDetailInfoIcon?: boolean;\n\tpickerType?: 'COLLECTION' | 'PRODUCT';\n\tonProductDetailClick?: (productData: Product | ProductVariant) => void;\n}\n\nexport const ProductGroup = (props: ProductGroupInterface) => {\n\tconst {\n\t\tcollectionId,\n\t\tproductId,\n\t\tdata,\n\t\tselectedData,\n\t\tselectedCollectionsDispatch,\n\t\tviewOnly,\n\t\tupliftAdditions,\n\t\tisProductPartiallyChecked,\n\t\thideProductCheckbox,\n\t\toutOfStockAction,\n\t\thideVariantCheckbox,\n\t\thideProductVariants,\n\t\tpickerType,\n\t\tonProductDetailClick,\n\t\tshowProductDetailInfoIcon,\n\t} = props;\n\n\tconst containsProduct = () => {\n\t\tconst product = selectedData?.[collectionId]?.['products']?.[productId];\n\t\treturn product ? true : false;\n\t};\n\n\tconst containsVariant = (variantId: string) => {\n\t\tconst product = selectedData?.[collectionId]?.['products']?.[productId];\n\t\tif (!product) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst variant =\n\t\t\tselectedData?.[collectionId]?.['products']?.[productId]?.['variants']?.[\n\t\t\t\tvariantId\n\t\t\t];\n\n\t\treturn variant ? true : false;\n\t};\n\n\tconst currencyAndPriceForProduct = !(\n\t\t!hideProductVariants && shouldShowVariant(data)\n\t)\n\t\t? `${data.currency ? CurrencySymbols[data.currency] ?? '' : ''}${\n\t\t\t\tObject.values(data['variants'] ?? {})?.[0]?.price ??\n\t\t\t\tObject.values(data['variants'] ?? {})?.[0]?.actualPrice ??\n\t\t\t\t''\n\t\t  }`\n\t\t: '';\n\n\treturn (\n\t\t<div>\n\t\t\t<ProductCard\n\t\t\t\tisVariant={false}\n\t\t\t\tdata={data}\n\t\t\t\tproductId={productId}\n\t\t\t\tcollectionId={collectionId}\n\t\t\t\tisSelected={containsProduct()}\n\t\t\t\tisPartiallyChecked={isProductPartiallyChecked}\n\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\tkey={productId}\n\t\t\t\tupliftAdditions={upliftAdditions}\n\t\t\t\tviewOnly={viewOnly}\n\t\t\t\thideProductCheckbox={hideProductCheckbox}\n\t\t\t\thideVariantCheckbox={hideVariantCheckbox}\n\t\t\t\thideProductVariants={hideProductVariants}\n\t\t\t\tpickerType={pickerType}\n\t\t\t\toutOfStockAction={outOfStockAction}\n\t\t\t\tonProductDetailClick={onProductDetailClick}\n\t\t\t\tshowProductDetailInfoIcon={showProductDetailInfoIcon}\n\t\t\t\tcurrencyAndPrice={currencyAndPriceForProduct}\n\t\t\t/>\n\n\t\t\t{hideProductVariants\n\t\t\t\t? null\n\t\t\t\t: shouldShowVariant(data) &&\n\t\t\t\t  Object.keys(data['variants'] || []).map((variantId: any) => {\n\t\t\t\t\t\tconst currencyAndPriceForVariant = `${\n\t\t\t\t\t\t\tdata.currency ? CurrencySymbols[data.currency] ?? '' : ''\n\t\t\t\t\t\t}${\n\t\t\t\t\t\t\tdata['variants']?.[variantId]?.price ??\n\t\t\t\t\t\t\tdata['variants']?.[variantId]?.actualPrice ??\n\t\t\t\t\t\t\t''\n\t\t\t\t\t\t}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ProductCard\n\t\t\t\t\t\t\t\tisVariant={true}\n\t\t\t\t\t\t\t\tkey={variantId}\n\t\t\t\t\t\t\t\thideVariantCheckbox={hideVariantCheckbox}\n\t\t\t\t\t\t\t\tdata={{\n\t\t\t\t\t\t\t\t\t...(data['variants'] as { [key: string]: ProductVariant })[\n\t\t\t\t\t\t\t\t\t\tvariantId\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\tcurrency: data.currency,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tvariantId={variantId}\n\t\t\t\t\t\t\t\tproductId={productId}\n\t\t\t\t\t\t\t\tviewOnly={viewOnly}\n\t\t\t\t\t\t\t\tupliftAdditions={upliftAdditions}\n\t\t\t\t\t\t\t\tcollectionId={collectionId}\n\t\t\t\t\t\t\t\tisSelected={containsVariant(variantId)}\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\t\t\t\t\toutOfStockAction={outOfStockAction}\n\t\t\t\t\t\t\t\tonProductDetailClick={onProductDetailClick}\n\t\t\t\t\t\t\t\tshowProductDetailInfoIcon={showProductDetailInfoIcon}\n\t\t\t\t\t\t\t\tcurrencyAndPrice={currencyAndPriceForVariant}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t  })}\n\t\t</div>\n\t);\n};\n\ninterface ProductCardInterface {\n\tisVariant: boolean;\n\tdata: Product | ProductVariant;\n\tproductId: string;\n\tcollectionId: string;\n\tvariantId?: string;\n\tisSelected: boolean;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tviewOnly: boolean;\n\tisPartiallyChecked?: boolean;\n\tupliftAdditions: any;\n\thideProductCheckbox?: boolean;\n\toutOfStockAction?: OUT_OF_STOCK_ACTION;\n\thideVariantCheckbox?: boolean;\n\thideProductVariants?: boolean;\n\tshowProductDetailInfoIcon?: boolean;\n\tpickerType?: 'COLLECTION' | 'PRODUCT';\n\tonProductDetailClick?: (productData: Product | ProductVariant) => void;\n\tcurrencyAndPrice?: string;\n}\n\nexport const ProductCard = (props: ProductCardInterface) => {\n\tconst {\n\t\tisVariant,\n\t\tdata,\n\t\tproductId,\n\t\tcollectionId,\n\t\tvariantId,\n\t\tisSelected,\n\t\tselectedCollectionsDispatch,\n\t\tviewOnly,\n\t\tupliftAdditions,\n\t\tisPartiallyChecked,\n\t\thideProductCheckbox,\n\t\toutOfStockAction,\n\t\thideVariantCheckbox,\n\t\thideProductVariants,\n\t\tpickerType = 'PRODUCT',\n\t\tonProductDetailClick,\n\t\tshowProductDetailInfoIcon,\n\t\tcurrencyAndPrice,\n\t} = props;\n\tconst {\n\t\tisVariantForProductPickerTag,\n\t\tdataForProductPickerTag,\n\t\ttagText,\n\t\ttagType,\n\t} = ProductHelper.getDataForProductPickerTag(\n\t\tdata,\n\t\tisVariant,\n\t\toutOfStockAction,\n\t);\n\n\t//show skuid for every variant\n\t//show skuid for product if there is only one variant (as the product itself is the variant)\n\tconst skuId = getSkuId(data, isVariant);\n\n\tconst onProductCardClick = (event) => {\n\t\tevent.stopPropagation();\n\n\t\tif (\n\t\t\tpickerType === 'PRODUCT' &&\n\t\t\t(hideProductCheckbox || hideVariantCheckbox)\n\t\t) {\n\t\t\tconst keys = Object.keys(data['variants']);\n\t\t\tif (hideProductVariants) {\n\t\t\t\tif (!isSelected) {\n\t\t\t\t\tupliftAdditions('productSelected', {\n\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\tproduct: data,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\ttype: 'productUnselected',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (!isSelected) {\n\t\t\t\t\tupliftAdditions('variantSelected', {\n\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\tvariantId: variantId || keys[0],\n\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\tvariant: data,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\ttype: 'variantUnselected',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<ProductCardStyle\n\t\t\tisVariant={isVariant}\n\t\t\tonClick={onProductCardClick}\n\t\t\tisActive={isSelected}\n\t\t>\n\t\t\t{(isVariant && !(viewOnly || hideVariantCheckbox)) ||\n\t\t\t(!isVariant && !(viewOnly || hideProductCheckbox)) ? (\n\t\t\t\t<CheckBox\n\t\t\t\t\tisChecked={isSelected}\n\t\t\t\t\tisPartiallyChecked={isPartiallyChecked || false}\n\t\t\t\t\tonValueChange={function (checked: boolean, _val, event): void {\n\t\t\t\t\t\tevent?.stopPropagation();\n\n\t\t\t\t\t\tif (!isVariant) {\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\ttype: 'productUnselected',\n\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tupliftAdditions('productSelected', {\n\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\tproduct: data,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\ttype: hideProductVariants\n\t\t\t\t\t\t\t\t\t\t? 'productUnselected'\n\t\t\t\t\t\t\t\t\t\t: 'variantUnselected',\n\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tupliftAdditions(\n\t\t\t\t\t\t\t\t\thideProductVariants ? 'productSelected' : 'variantSelected',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t\tvariant: data,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t<div>\n\t\t\t\t<ShimmerImage\n\t\t\t\t\twidth={40}\n\t\t\t\t\theight={40}\n\t\t\t\t\timageUrl={data.image}\n\t\t\t\t\talt=\"Item\"\n\t\t\t\t\tborderRadius={4}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: 1,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tvariant={'light'}\n\t\t\t\t\t\tbody={data.name}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t\tdelay={400}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tnumberOfLines={1}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{data.name}\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t<ProductInfo>\n\t\t\t\t\t\t<ProductPickerTag\n\t\t\t\t\t\t\tisVariant={isVariantForProductPickerTag}\n\t\t\t\t\t\t\tdata={dataForProductPickerTag}\n\t\t\t\t\t\t\ttagText={tagText}\n\t\t\t\t\t\t\ttagType={tagType}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{showProductDetailInfoIcon && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tonProductDetailClick?.(data);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ProductInfo>\n\t\t\t\t</div>\n\t\t\t\t<ProductSubTitle>\n\t\t\t\t\t{/* in the cases where we show tags, do not show the currency and price and sku id */}\n\t\t\t\t\t{(!(dataForProductPickerTag as ProductVariant)?.fbStatus &&\n\t\t\t\t\t\tisVariantForProductPickerTag) ||\n\t\t\t\t\ttagText ? null : (\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t{currencyAndPrice}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t)}\n\t\t\t\t\t{skuId && (\n\t\t\t\t\t\t<Tooltip body={skuId} placement=\"top\">\n\t\t\t\t\t\t\t<SKUIDBadge>\n\t\t\t\t\t\t\t\t<EllipsedBodyTiny>{`SKU ID: ${skuId}`}</EllipsedBodyTiny>\n\t\t\t\t\t\t\t</SKUIDBadge>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t)}\n\t\t\t\t</ProductSubTitle>\n\t\t\t</div>\n\t\t</ProductCardStyle>\n\t);\n};\n"],"names":["ProductGroup","props","collectionId","productId","data","selectedData","selectedCollectionsDispatch","viewOnly","upliftAdditions","isProductPartiallyChecked","hideProductCheckbox","outOfStockAction","hideVariantCheckbox","hideProductVariants","pickerType","onProductDetailClick","showProductDetailInfoIcon","containsProduct","containsVariant","variantId","currencyAndPriceForProduct","shouldShowVariant","CurrencySymbols","jsx","ProductCard","currencyAndPriceForVariant","isVariant","isSelected","isPartiallyChecked","currencyAndPrice","isVariantForProductPickerTag","dataForProductPickerTag","tagText","tagType","ProductHelper","skuId","getSkuId","jsxs","ProductCardStyle","event","keys","CheckBox","checked","_val","Fragment","ShimmerImage","Tooltip","TitleSmall","ProductInfo","ProductPickerTag","IconButton","InfoIcon","COLORS","ProductSubTitle","BodyCaption","SKUIDBadge","EllipsedBodyTiny"],"mappings":"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"}
+{"version":3,"file":"product.js","sources":["../../../../src/components/product-picker-v2/product.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { CheckBox } from '../checkBox';\nimport { IconButton } from '../icon-button';\nimport { ShimmerImage } from '../shimmer-image';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { CurrencySymbols } from './constants';\nimport { ProductHelper } from './helpers/ProductHelper';\nimport { ProductPickerTag } from './ProductPickerTag';\nimport type { SelectedCollectionsActions } from './reducers';\nimport {\n\tEllipsedBodyTiny,\n\tProductCardStyle,\n\tProductInfo,\n\tProductSubTitle,\n\tSKUIDBadge,\n} from './style';\nimport {\n\tOUT_OF_STOCK_ACTION,\n\ttype Product,\n\ttype ProductVariant,\n\ttype SelectedItems,\n} from './type';\nimport { getSkuId, shouldShowVariant } from './utility';\n\ninterface ProductGroupInterface {\n\tcollectionId: string;\n\tproductId: string;\n\tdata: Product;\n\tselectedData: SelectedItems;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tviewOnly: boolean;\n\tisProductPartiallyChecked?: boolean;\n\tupliftAdditions: any;\n\thideProductCheckbox?: boolean;\n\toutOfStockAction?: OUT_OF_STOCK_ACTION;\n\thideVariantCheckbox?: boolean;\n\thideProductVariants?: boolean;\n\tshowProductDetailInfoIcon?: boolean;\n\tpickerType?: 'COLLECTION' | 'PRODUCT';\n\tonProductDetailClick?: (productData: Product | ProductVariant) => void;\n}\n\nexport const ProductGroup = (props: ProductGroupInterface) => {\n\tconst {\n\t\tcollectionId,\n\t\tproductId,\n\t\tdata,\n\t\tselectedData,\n\t\tselectedCollectionsDispatch,\n\t\tviewOnly,\n\t\tupliftAdditions,\n\t\tisProductPartiallyChecked,\n\t\thideProductCheckbox,\n\t\toutOfStockAction,\n\t\thideVariantCheckbox,\n\t\thideProductVariants,\n\t\tpickerType,\n\t\tonProductDetailClick,\n\t\tshowProductDetailInfoIcon,\n\t} = props;\n\n\tconst containsProduct = () => {\n\t\tconst product = selectedData?.[collectionId]?.['products']?.[productId];\n\t\treturn product ? true : false;\n\t};\n\n\tconst containsVariant = (variantId: string) => {\n\t\tconst product = selectedData?.[collectionId]?.['products']?.[productId];\n\t\tif (!product) {\n\t\t\treturn false;\n\t\t}\n\n\t\tconst variant =\n\t\t\tselectedData?.[collectionId]?.['products']?.[productId]?.['variants']?.[\n\t\t\t\tvariantId\n\t\t\t];\n\n\t\treturn variant ? true : false;\n\t};\n\n\tconst currencyAndPriceForProduct = !(\n\t\t!hideProductVariants && shouldShowVariant(data)\n\t)\n\t\t? `${data.currency ? CurrencySymbols[data.currency] ?? '' : ''}${\n\t\t\t\tObject.values(data['variants'] ?? {})?.[0]?.price ??\n\t\t\t\tObject.values(data['variants'] ?? {})?.[0]?.actualPrice ??\n\t\t\t\t''\n\t\t  }`\n\t\t: '';\n\n\treturn (\n\t\t<div>\n\t\t\t<ProductCard\n\t\t\t\tisVariant={false}\n\t\t\t\tdata={data}\n\t\t\t\tproductId={productId}\n\t\t\t\tcollectionId={collectionId}\n\t\t\t\tisSelected={containsProduct()}\n\t\t\t\tisPartiallyChecked={isProductPartiallyChecked}\n\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\tkey={productId}\n\t\t\t\tupliftAdditions={upliftAdditions}\n\t\t\t\tviewOnly={viewOnly}\n\t\t\t\thideProductCheckbox={hideProductCheckbox}\n\t\t\t\thideVariantCheckbox={hideVariantCheckbox}\n\t\t\t\thideProductVariants={hideProductVariants}\n\t\t\t\tpickerType={pickerType}\n\t\t\t\toutOfStockAction={outOfStockAction}\n\t\t\t\tonProductDetailClick={onProductDetailClick}\n\t\t\t\tshowProductDetailInfoIcon={showProductDetailInfoIcon}\n\t\t\t\tcurrencyAndPrice={currencyAndPriceForProduct}\n\t\t\t/>\n\n\t\t\t{hideProductVariants\n\t\t\t\t? null\n\t\t\t\t: shouldShowVariant(data) &&\n\t\t\t\t  Object.keys(data['variants'] || []).map((variantId: any) => {\n\t\t\t\t\t\tconst currencyAndPriceForVariant = `${\n\t\t\t\t\t\t\tdata.currency ? CurrencySymbols[data.currency] ?? '' : ''\n\t\t\t\t\t\t}${\n\t\t\t\t\t\t\tdata['variants']?.[variantId]?.price ??\n\t\t\t\t\t\t\tdata['variants']?.[variantId]?.actualPrice ??\n\t\t\t\t\t\t\t''\n\t\t\t\t\t\t}`;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ProductCard\n\t\t\t\t\t\t\t\tisVariant={true}\n\t\t\t\t\t\t\t\tkey={variantId}\n\t\t\t\t\t\t\t\thideVariantCheckbox={hideVariantCheckbox}\n\t\t\t\t\t\t\t\tdata={{\n\t\t\t\t\t\t\t\t\t...(data['variants'] as { [key: string]: ProductVariant })[\n\t\t\t\t\t\t\t\t\t\tvariantId\n\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\tcurrency: data.currency,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tvariantId={variantId}\n\t\t\t\t\t\t\t\tproductId={productId}\n\t\t\t\t\t\t\t\tviewOnly={viewOnly}\n\t\t\t\t\t\t\t\tupliftAdditions={upliftAdditions}\n\t\t\t\t\t\t\t\tcollectionId={collectionId}\n\t\t\t\t\t\t\t\tisSelected={containsVariant(variantId)}\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch={selectedCollectionsDispatch}\n\t\t\t\t\t\t\t\toutOfStockAction={outOfStockAction}\n\t\t\t\t\t\t\t\tonProductDetailClick={onProductDetailClick}\n\t\t\t\t\t\t\t\tshowProductDetailInfoIcon={showProductDetailInfoIcon}\n\t\t\t\t\t\t\t\tcurrencyAndPrice={currencyAndPriceForVariant}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t  })}\n\t\t</div>\n\t);\n};\n\ninterface ProductCardInterface {\n\tisVariant: boolean;\n\tdata: Product | ProductVariant;\n\tproductId: string;\n\tcollectionId: string;\n\tvariantId?: string;\n\tisSelected: boolean;\n\tselectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;\n\tviewOnly: boolean;\n\tisPartiallyChecked?: boolean;\n\tupliftAdditions: any;\n\thideProductCheckbox?: boolean;\n\toutOfStockAction?: OUT_OF_STOCK_ACTION;\n\thideVariantCheckbox?: boolean;\n\thideProductVariants?: boolean;\n\tshowProductDetailInfoIcon?: boolean;\n\tpickerType?: 'COLLECTION' | 'PRODUCT';\n\tonProductDetailClick?: (productData: Product | ProductVariant) => void;\n\tcurrencyAndPrice?: string;\n}\n\nexport const ProductCard = (props: ProductCardInterface) => {\n\tconst {\n\t\tisVariant,\n\t\tdata,\n\t\tproductId,\n\t\tcollectionId,\n\t\tvariantId,\n\t\tisSelected,\n\t\tselectedCollectionsDispatch,\n\t\tviewOnly,\n\t\tupliftAdditions,\n\t\tisPartiallyChecked,\n\t\thideProductCheckbox,\n\t\toutOfStockAction,\n\t\thideVariantCheckbox,\n\t\thideProductVariants,\n\t\tpickerType = 'PRODUCT',\n\t\tonProductDetailClick,\n\t\tshowProductDetailInfoIcon,\n\t\tcurrencyAndPrice,\n\t} = props;\n\tconst {\n\t\tisVariantForProductPickerTag,\n\t\tdataForProductPickerTag,\n\t\ttagText,\n\t\ttagType,\n\t} = ProductHelper.getDataForProductPickerTag(\n\t\tdata,\n\t\tisVariant,\n\t\toutOfStockAction,\n\t);\n\n\t//show skuid for every variant\n\t//show skuid for product if there is only one variant (as the product itself is the variant)\n\tconst skuId = getSkuId(data, isVariant);\n\n\tconst onProductCardClick = (event) => {\n\t\tevent.stopPropagation();\n\n\t\tif (\n\t\t\tpickerType === 'PRODUCT' &&\n\t\t\t(hideProductCheckbox || hideVariantCheckbox)\n\t\t) {\n\t\t\tconst keys = Object.keys(data['variants']);\n\t\t\tif (hideProductVariants) {\n\t\t\t\tif (!isSelected) {\n\t\t\t\t\tupliftAdditions('productSelected', {\n\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\tproduct: data,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\ttype: 'productUnselected',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tif (!isSelected) {\n\t\t\t\t\tupliftAdditions('variantSelected', {\n\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\tvariantId: variantId || keys[0],\n\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\tvariant: data,\n\t\t\t\t\t});\n\t\t\t\t} else {\n\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\ttype: 'variantUnselected',\n\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t},\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<ProductCardStyle\n\t\t\tisVariant={isVariant}\n\t\t\tonClick={onProductCardClick}\n\t\t\tisActive={isSelected}\n\t\t>\n\t\t\t{(isVariant && !(viewOnly || hideVariantCheckbox)) ||\n\t\t\t(!isVariant && !(viewOnly || hideProductCheckbox)) ? (\n\t\t\t\t<CheckBox\n\t\t\t\t\tisChecked={isSelected}\n\t\t\t\t\tisPartiallyChecked={isPartiallyChecked || false}\n\t\t\t\t\tariaLabel={data.name}\n\t\t\t\t\tonValueChange={function (checked: boolean, _val, event): void {\n\t\t\t\t\t\tevent?.stopPropagation();\n\n\t\t\t\t\t\tif (!isVariant) {\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\ttype: 'productUnselected',\n\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tupliftAdditions('productSelected', {\n\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\tproduct: data,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tif (!checked) {\n\t\t\t\t\t\t\t\tselectedCollectionsDispatch({\n\t\t\t\t\t\t\t\t\ttype: hideProductVariants\n\t\t\t\t\t\t\t\t\t\t? 'productUnselected'\n\t\t\t\t\t\t\t\t\t\t: 'variantUnselected',\n\t\t\t\t\t\t\t\t\tdata: {\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tupliftAdditions(\n\t\t\t\t\t\t\t\t\thideProductVariants ? 'productSelected' : 'variantSelected',\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tproductId: productId,\n\t\t\t\t\t\t\t\t\t\tvariantId: variantId,\n\t\t\t\t\t\t\t\t\t\tcollectionId: collectionId,\n\t\t\t\t\t\t\t\t\t\tvariant: data,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<></>\n\t\t\t)}\n\t\t\t<div>\n\t\t\t\t<ShimmerImage\n\t\t\t\t\twidth={40}\n\t\t\t\t\theight={40}\n\t\t\t\t\timageUrl={data.image}\n\t\t\t\t\talt=\"Item\"\n\t\t\t\t\tborderRadius={4}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: 1,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\tgap: 16,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tvariant={'light'}\n\t\t\t\t\t\tbody={data.name}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t\tdelay={400}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tnumberOfLines={1}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{data.name}\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t</Tooltip>\n\n\t\t\t\t\t<ProductInfo>\n\t\t\t\t\t\t<ProductPickerTag\n\t\t\t\t\t\t\tisVariant={isVariantForProductPickerTag}\n\t\t\t\t\t\t\tdata={dataForProductPickerTag}\n\t\t\t\t\t\t\ttagText={tagText}\n\t\t\t\t\t\t\ttagType={tagType}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{showProductDetailInfoIcon && (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tonProductDetailClick?.(data);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tIcon={() => (\n\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</ProductInfo>\n\t\t\t\t</div>\n\t\t\t\t<ProductSubTitle>\n\t\t\t\t\t{/* in the cases where we show tags, do not show the currency and price and sku id */}\n\t\t\t\t\t{(!(dataForProductPickerTag as ProductVariant)?.fbStatus &&\n\t\t\t\t\t\tisVariantForProductPickerTag) ||\n\t\t\t\t\ttagText ? null : (\n\t\t\t\t\t\t<BodyCaption color={COLORS.content.secondary}>\n\t\t\t\t\t\t\t{currencyAndPrice}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t)}\n\t\t\t\t\t{skuId && (\n\t\t\t\t\t\t<Tooltip body={skuId} placement=\"top\">\n\t\t\t\t\t\t\t<SKUIDBadge>\n\t\t\t\t\t\t\t\t<EllipsedBodyTiny>{`SKU ID: ${skuId}`}</EllipsedBodyTiny>\n\t\t\t\t\t\t\t</SKUIDBadge>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t)}\n\t\t\t\t</ProductSubTitle>\n\t\t\t</div>\n\t\t</ProductCardStyle>\n\t);\n};\n"],"names":["ProductGroup","props","collectionId","productId","data","selectedData","selectedCollectionsDispatch","viewOnly","upliftAdditions","isProductPartiallyChecked","hideProductCheckbox","outOfStockAction","hideVariantCheckbox","hideProductVariants","pickerType","onProductDetailClick","showProductDetailInfoIcon","containsProduct","containsVariant","variantId","currencyAndPriceForProduct","shouldShowVariant","CurrencySymbols","jsx","ProductCard","currencyAndPriceForVariant","isVariant","isSelected","isPartiallyChecked","currencyAndPrice","isVariantForProductPickerTag","dataForProductPickerTag","tagText","tagType","ProductHelper","skuId","getSkuId","jsxs","ProductCardStyle","event","keys","CheckBox","checked","_val","Fragment","ShimmerImage","Tooltip","TitleSmall","ProductInfo","ProductPickerTag","IconButton","InfoIcon","COLORS","ProductSubTitle","BodyCaption","SKUIDBadge","EllipsedBodyTiny"],"mappings":"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"}

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

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

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

@@ -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} = 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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"}
+{"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/>\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/>\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":"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"}