tabexseriescomponents 0.2.752 → 0.2.753

package/dist/index.cjs.js

@@ -5056,7 +5056,7 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
 };
 
 var Service_itemtype = function Service_itemtype(props) {
-  var _fetchProductInfoQuer, _fetchProductInfoQuer2, _fetchProductInfoQuer3, _fetchProductInfoQuer4, _fetchProductInfoQuer5, _fetchProductInfoQuer6, _fetchProductInfoQuer7, _fetchProductInfoQuer8, _fetchProductInfoQuer9, _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _fetchProductInfoQuer13, _fetchProductInfoQuer14, _fetchProductInfoQuer15, _fetchProductInfoQuer16, _fetchProductInfoQuer17, _fetchProductInfoQuer18, _returnpolicyobj, _returnpolicyobj2, _returnpolicyobj3, _returnpolicyobj4, _returnpolicyobj5, _returnpolicyobj6, _returnpolicyobj7, _returnpolicyobj8;
+  var _css, _fetchProductInfoQuer, _fetchProductInfoQuer2, _fetchProductInfoQuer3, _fetchProductInfoQuer4, _fetchProductInfoQuer5, _fetchProductInfoQuer6, _fetchProductInfoQuer7, _fetchProductInfoQuer8, _fetchProductInfoQuer9, _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _fetchProductInfoQuer13, _fetchProductInfoQuer14, _fetchProductInfoQuer15, _fetchProductInfoQuer16, _fetchProductInfoQuer17, _fetchProductInfoQuer18, _returnpolicyobj, _returnpolicyobj2, _returnpolicyobj3, _returnpolicyobj4, _returnpolicyobj5, _returnpolicyobj6, _returnpolicyobj7, _returnpolicyobj8, _sizeguideimage$;
   var lang = props.actions.lang;
   var langdetect = props.actions.langdetect;
   var srcfromprops = props.actions.srcfromprops;
@@ -5091,6 +5091,11 @@ var Service_itemtype = function Service_itemtype(props) {
     _useState6 = _slicedToArray__default["default"](_useState5, 2);
     _useState6[0];
     var setitem = _useState6[1];
+  var _useState7 = React.useState(false),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    opensizeguidemodal = _useState8[0],
+    setopensizeguidemodal = _useState8[1];
+  var sizeguideimage = props.actions.sizeguideimage;
   React.useEffect(function () {
     var itemobj = fetchProductInfoQueryContext.data.data.productinfo;
     if (stringIsEnglish(fetchProductInfoQueryContext.data.data.productinfo.name_en)) {
@@ -5130,6 +5135,44 @@ var Service_itemtype = function Service_itemtype(props) {
       }
     }, langdetect == 'en' ? fetchProductInfoQueryContext.data.data.productinfo.name_en : fetchProductInfoQueryContext.data.data.productinfo.name_ar);
   };
+  var formstyles = {
+    input_label_name: glamor.css({
+      color: sectionproperties.form_labelcolor,
+      textTransform: sectionproperties.form_labeltexttransform,
+      fontWeight: sectionproperties.form_labelfontweight,
+      fontSize: sectionproperties.form_labelfontsize + 'px',
+      marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0
+    }),
+    form_control: glamor.css((_css = {
+      background: 'transparent',
+      color: sectionproperties.inputfieldcolor,
+      fontSize: sectionproperties.inputfieldfontsize + 'px',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center'
+    }, _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_css, "display", 'block'), "width", '100%'), "padding", '0 10px'), "transition", '.3s'), "border", sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0), "borderBottom", sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor), "borderRadius", sectionproperties.inputfieldborderradius + 'px'), "height", sectionproperties.inputfieldheight + 'px'), "background", sectionproperties.input_bgcolor), "color", sectionproperties.inputfieldcolor), _defineProperty__default["default"](_defineProperty__default["default"](_css, ':focus', {
+      borderColor: sectionproperties.inputfeildbordercoloronfocus
+    }), ':focus .login_input_icon', {
+      color: sectionproperties.inputfeildbordercoloronfocus
+    }))),
+    sizeguidebtn: glamor.css({
+      color: sectionproperties.sizeguidebtncolor,
+      fontSize: sectionproperties.sizeguidebtnfontsize + 'px',
+      transition: '.3s',
+      textDecoration: 'underline',
+      ':hover': {
+        color: sectionproperties.sizeguidebtncoloronhover,
+        fontWeight: sectionproperties.sizeguidebtnfontweight
+      }
+    }),
+    closemodalbtn: glamor.css({
+      color: sectionproperties.sizeguidebtncolor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.sizeguidebtncoloronhover
+      }
+    })
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "class": ' col-lg-12 p-0 '
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5754,7 +5797,16 @@ var Service_itemtype = function Service_itemtype(props) {
     className: "p-0"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     "class": "col-lg-12 p-0"
-  }, /*#__PURE__*/React__default["default"].createElement(Variantoptions, {
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 p-0 text-end"
+  }, sectionproperties.showsizeguidebtn == 'Show' && sizeguideimage.length != 0 && sectionproperties.sizeguideposition == 'Besides Variants' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-12 text-end"
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": formstyles.sizeguidebtn + ' m-0 p-0 cursor-pointer mb-auto ',
+    onClick: function onClick() {
+      setopensizeguidemodal(true);
+    }
+  }, langdetect == 'en' ? sectionproperties.sizeguidecontentenglish : sectionproperties.sizeguidecontentarabic))), /*#__PURE__*/React__default["default"].createElement(Variantoptions, {
     actions: props.actions
   }), /*#__PURE__*/React__default["default"].createElement(ProductExtras, {
     actions: props.actions
@@ -5841,7 +5893,44 @@ var Service_itemtype = function Service_itemtype(props) {
       paddingLeft: langdetect == 'en' ? '.5em' : 0,
       paddingRight: langdetect == 'ar' ? '.5rem' : 0
     }
-  }, StoreInfoprops()))));
+  }, StoreInfoprops()))), sizeguideimage.length != 0 && /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal, {
+    show: opensizeguidemodal,
+    onHide: function onHide() {
+      setopensizeguidemodal(false);
+    },
+    centered: true,
+    size: 'lg'
+  }, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "allcentered cursor-pointer",
+    onClick: function onClick() {
+      setopensizeguidemodal(false);
+    },
+    style: {
+      position: 'absolute',
+      top: 10,
+      width: 35,
+      height: 35,
+      right: 10
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
+    "class": ' h-100 allcentered text-black '
+  }, /*#__PURE__*/React__default["default"].createElement(IoMdClose.IoMdClose, {
+    size: 25,
+    "class": formstyles.closemodalbtn
+  }))), /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": ' w-100 h-100 px-4 py-5 ',
+    style: {}
+  }, /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
+    urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+    publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+    path: (_sizeguideimage$ = sizeguideimage[0]) === null || _sizeguideimage$ === void 0 ? void 0 : _sizeguideimage$.original,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'contain'
+    },
+    loading: "lazy"
+  }))), /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Footer, null)));
 };
 
 var Article_itemtype = function Article_itemtype(props) {
@@ -84148,6 +84237,11 @@ var Simpleproductcard = function Simpleproductcard(props) {
       transition: 'all, 0.4s',
       right: 10,
       transform: "translateX(0px)"
+    }),
+    sku: glamor.css({
+      fontSize: sectionproperties.skuFontSize + 'px',
+      color: sectionproperties.skuColor,
+      fontWeight: sectionproperties.skuFontWeight
     })
   };
   var _useState11 = React.useState(''),
@@ -84608,7 +84702,15 @@ var Simpleproductcard = function Simpleproductcard(props) {
     style: {
       textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
     }
-  }, item.name)), sectionproperties.prodCatShow == 'Show' && sectionproperties.descriptionoverwritestyles == 'No' && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, item.name)), sectionproperties.showSKU == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+    "class": "col-lg-12 pl-0 pr-0",
+    style: {}
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    "class": "".concat(card_cssstyles.sku) + '  wordbreak wordbreak1 font-md-13 m-0 ',
+    style: {
+      textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
+    }
+  }, langdetect == 'en' ? 'SKU: ' : 'كود: ', item.sku)), sectionproperties.prodCatShow == 'Show' && sectionproperties.descriptionoverwritestyles == 'No' && /*#__PURE__*/React__default["default"].createElement("p", {
     "class": sectionproperties.descriptionwordbreak == 'None' ? "".concat(card_cssstyles.productDescStyles) + ' col-lg-12 p-0   mt-1 ' : "".concat(card_cssstyles.productDescStyles) + ' col-lg-12 p-0 wordbreak wordbreak4 mt-1 ',
     style: {
       textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'

package/dist/index.esm.js

@@ -5007,7 +5007,7 @@ var Serviceinfotabs = function Serviceinfotabs(props) {
 };
 
 var Service_itemtype = function Service_itemtype(props) {
-  var _fetchProductInfoQuer, _fetchProductInfoQuer2, _fetchProductInfoQuer3, _fetchProductInfoQuer4, _fetchProductInfoQuer5, _fetchProductInfoQuer6, _fetchProductInfoQuer7, _fetchProductInfoQuer8, _fetchProductInfoQuer9, _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _fetchProductInfoQuer13, _fetchProductInfoQuer14, _fetchProductInfoQuer15, _fetchProductInfoQuer16, _fetchProductInfoQuer17, _fetchProductInfoQuer18, _returnpolicyobj, _returnpolicyobj2, _returnpolicyobj3, _returnpolicyobj4, _returnpolicyobj5, _returnpolicyobj6, _returnpolicyobj7, _returnpolicyobj8;
+  var _css, _fetchProductInfoQuer, _fetchProductInfoQuer2, _fetchProductInfoQuer3, _fetchProductInfoQuer4, _fetchProductInfoQuer5, _fetchProductInfoQuer6, _fetchProductInfoQuer7, _fetchProductInfoQuer8, _fetchProductInfoQuer9, _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _fetchProductInfoQuer13, _fetchProductInfoQuer14, _fetchProductInfoQuer15, _fetchProductInfoQuer16, _fetchProductInfoQuer17, _fetchProductInfoQuer18, _returnpolicyobj, _returnpolicyobj2, _returnpolicyobj3, _returnpolicyobj4, _returnpolicyobj5, _returnpolicyobj6, _returnpolicyobj7, _returnpolicyobj8, _sizeguideimage$;
   var lang = props.actions.lang;
   var langdetect = props.actions.langdetect;
   var srcfromprops = props.actions.srcfromprops;
@@ -5042,6 +5042,11 @@ var Service_itemtype = function Service_itemtype(props) {
     _useState6 = _slicedToArray(_useState5, 2);
     _useState6[0];
     var setitem = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    opensizeguidemodal = _useState8[0],
+    setopensizeguidemodal = _useState8[1];
+  var sizeguideimage = props.actions.sizeguideimage;
   useEffect(function () {
     var itemobj = fetchProductInfoQueryContext.data.data.productinfo;
     if (stringIsEnglish(fetchProductInfoQueryContext.data.data.productinfo.name_en)) {
@@ -5081,6 +5086,44 @@ var Service_itemtype = function Service_itemtype(props) {
       }
     }, langdetect == 'en' ? fetchProductInfoQueryContext.data.data.productinfo.name_en : fetchProductInfoQueryContext.data.data.productinfo.name_ar);
   };
+  var formstyles = {
+    input_label_name: css({
+      color: sectionproperties.form_labelcolor,
+      textTransform: sectionproperties.form_labeltexttransform,
+      fontWeight: sectionproperties.form_labelfontweight,
+      fontSize: sectionproperties.form_labelfontsize + 'px',
+      marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0
+    }),
+    form_control: css((_css = {
+      background: 'transparent',
+      color: sectionproperties.inputfieldcolor,
+      fontSize: sectionproperties.inputfieldfontsize + 'px',
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'center'
+    }, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_css, "display", 'block'), "width", '100%'), "padding", '0 10px'), "transition", '.3s'), "border", sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0), "borderBottom", sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor), "borderRadius", sectionproperties.inputfieldborderradius + 'px'), "height", sectionproperties.inputfieldheight + 'px'), "background", sectionproperties.input_bgcolor), "color", sectionproperties.inputfieldcolor), _defineProperty(_defineProperty(_css, ':focus', {
+      borderColor: sectionproperties.inputfeildbordercoloronfocus
+    }), ':focus .login_input_icon', {
+      color: sectionproperties.inputfeildbordercoloronfocus
+    }))),
+    sizeguidebtn: css({
+      color: sectionproperties.sizeguidebtncolor,
+      fontSize: sectionproperties.sizeguidebtnfontsize + 'px',
+      transition: '.3s',
+      textDecoration: 'underline',
+      ':hover': {
+        color: sectionproperties.sizeguidebtncoloronhover,
+        fontWeight: sectionproperties.sizeguidebtnfontweight
+      }
+    }),
+    closemodalbtn: css({
+      color: sectionproperties.sizeguidebtncolor,
+      transition: '.3s',
+      ':hover': {
+        color: sectionproperties.sizeguidebtncoloronhover
+      }
+    })
+  };
   return /*#__PURE__*/React.createElement("div", {
     "class": ' col-lg-12 p-0 '
   }, /*#__PURE__*/React.createElement("div", {
@@ -5705,7 +5748,16 @@ var Service_itemtype = function Service_itemtype(props) {
     className: "p-0"
   }, /*#__PURE__*/React.createElement("div", {
     "class": "col-lg-12 p-0"
-  }, /*#__PURE__*/React.createElement(Variantoptions, {
+  }, /*#__PURE__*/React.createElement("div", {
+    "class": "col-lg-12 p-0 text-end"
+  }, sectionproperties.showsizeguidebtn == 'Show' && sizeguideimage.length != 0 && sectionproperties.sizeguideposition == 'Besides Variants' && /*#__PURE__*/React.createElement("div", {
+    "class": "col-12 text-end"
+  }, /*#__PURE__*/React.createElement("p", {
+    "class": formstyles.sizeguidebtn + ' m-0 p-0 cursor-pointer mb-auto ',
+    onClick: function onClick() {
+      setopensizeguidemodal(true);
+    }
+  }, langdetect == 'en' ? sectionproperties.sizeguidecontentenglish : sectionproperties.sizeguidecontentarabic))), /*#__PURE__*/React.createElement(Variantoptions, {
     actions: props.actions
   }), /*#__PURE__*/React.createElement(ProductExtras, {
     actions: props.actions
@@ -5792,7 +5844,44 @@ var Service_itemtype = function Service_itemtype(props) {
       paddingLeft: langdetect == 'en' ? '.5em' : 0,
       paddingRight: langdetect == 'ar' ? '.5rem' : 0
     }
-  }, StoreInfoprops()))));
+  }, StoreInfoprops()))), sizeguideimage.length != 0 && /*#__PURE__*/React.createElement(Modal, {
+    show: opensizeguidemodal,
+    onHide: function onHide() {
+      setopensizeguidemodal(false);
+    },
+    centered: true,
+    size: 'lg'
+  }, /*#__PURE__*/React.createElement(Modal.Body, null, /*#__PURE__*/React.createElement("div", {
+    className: "allcentered cursor-pointer",
+    onClick: function onClick() {
+      setopensizeguidemodal(false);
+    },
+    style: {
+      position: 'absolute',
+      top: 10,
+      width: 35,
+      height: 35,
+      right: 10
+    }
+  }, /*#__PURE__*/React.createElement("i", {
+    "class": ' h-100 allcentered text-black '
+  }, /*#__PURE__*/React.createElement(IoMdClose, {
+    size: 25,
+    "class": formstyles.closemodalbtn
+  }))), /*#__PURE__*/React.createElement("div", {
+    "class": ' w-100 h-100 px-4 py-5 ',
+    style: {}
+  }, /*#__PURE__*/React.createElement(Imagekitimagecomp, {
+    urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+    publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+    path: (_sizeguideimage$ = sizeguideimage[0]) === null || _sizeguideimage$ === void 0 ? void 0 : _sizeguideimage$.original,
+    style: {
+      width: '100%',
+      height: '100%',
+      objectFit: 'contain'
+    },
+    loading: "lazy"
+  }))), /*#__PURE__*/React.createElement(Modal.Footer, null)));
 };
 
 var Article_itemtype = function Article_itemtype(props) {
@@ -84099,6 +84188,11 @@ var Simpleproductcard = function Simpleproductcard(props) {
       transition: 'all, 0.4s',
       right: 10,
       transform: "translateX(0px)"
+    }),
+    sku: css({
+      fontSize: sectionproperties.skuFontSize + 'px',
+      color: sectionproperties.skuColor,
+      fontWeight: sectionproperties.skuFontWeight
     })
   };
   var _useState11 = useState(''),
@@ -84559,7 +84653,15 @@ var Simpleproductcard = function Simpleproductcard(props) {
     style: {
       textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
     }
-  }, item.name)), sectionproperties.prodCatShow == 'Show' && sectionproperties.descriptionoverwritestyles == 'No' && /*#__PURE__*/React.createElement("p", {
+  }, item.name)), sectionproperties.showSKU == 'Show' && /*#__PURE__*/React.createElement("div", {
+    "class": "col-lg-12 pl-0 pr-0",
+    style: {}
+  }, /*#__PURE__*/React.createElement("p", {
+    "class": "".concat(card_cssstyles.sku) + '  wordbreak wordbreak1 font-md-13 m-0 ',
+    style: {
+      textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
+    }
+  }, langdetect == 'en' ? 'SKU: ' : 'كود: ', item.sku)), sectionproperties.prodCatShow == 'Show' && sectionproperties.descriptionoverwritestyles == 'No' && /*#__PURE__*/React.createElement("p", {
     "class": sectionproperties.descriptionwordbreak == 'None' ? "".concat(card_cssstyles.productDescStyles) + ' col-lg-12 p-0   mt-1 ' : "".concat(card_cssstyles.productDescStyles) + ' col-lg-12 p-0 wordbreak wordbreak4 mt-1 ',
     style: {
       textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'

package/dist/index.umd.js

@@ -4871,7 +4871,7 @@
     };
 
     var Service_itemtype = function Service_itemtype(props) {
-      var _fetchProductInfoQuer, _fetchProductInfoQuer2, _fetchProductInfoQuer3, _fetchProductInfoQuer4, _fetchProductInfoQuer5, _fetchProductInfoQuer6, _fetchProductInfoQuer7, _fetchProductInfoQuer8, _fetchProductInfoQuer9, _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _fetchProductInfoQuer13, _fetchProductInfoQuer14, _fetchProductInfoQuer15, _fetchProductInfoQuer16, _fetchProductInfoQuer17, _fetchProductInfoQuer18, _returnpolicyobj, _returnpolicyobj2, _returnpolicyobj3, _returnpolicyobj4, _returnpolicyobj5, _returnpolicyobj6, _returnpolicyobj7, _returnpolicyobj8;
+      var _css, _fetchProductInfoQuer, _fetchProductInfoQuer2, _fetchProductInfoQuer3, _fetchProductInfoQuer4, _fetchProductInfoQuer5, _fetchProductInfoQuer6, _fetchProductInfoQuer7, _fetchProductInfoQuer8, _fetchProductInfoQuer9, _fetchProductInfoQuer10, _fetchProductInfoQuer11, _fetchProductInfoQuer12, _fetchProductInfoQuer13, _fetchProductInfoQuer14, _fetchProductInfoQuer15, _fetchProductInfoQuer16, _fetchProductInfoQuer17, _fetchProductInfoQuer18, _returnpolicyobj, _returnpolicyobj2, _returnpolicyobj3, _returnpolicyobj4, _returnpolicyobj5, _returnpolicyobj6, _returnpolicyobj7, _returnpolicyobj8, _sizeguideimage$;
       var lang = props.actions.lang;
       var langdetect = props.actions.langdetect;
       var srcfromprops = props.actions.srcfromprops;
@@ -4906,6 +4906,11 @@
         _useState6 = _slicedToArray__default["default"](_useState5, 2);
         _useState6[0];
         var setitem = _useState6[1];
+      var _useState7 = React.useState(false),
+        _useState8 = _slicedToArray__default["default"](_useState7, 2),
+        opensizeguidemodal = _useState8[0],
+        setopensizeguidemodal = _useState8[1];
+      var sizeguideimage = props.actions.sizeguideimage;
       React.useEffect(function () {
         var itemobj = fetchProductInfoQueryContext.data.data.productinfo;
         if (stringIsEnglish(fetchProductInfoQueryContext.data.data.productinfo.name_en)) {
@@ -4945,6 +4950,44 @@
           }
         }, langdetect == 'en' ? fetchProductInfoQueryContext.data.data.productinfo.name_en : fetchProductInfoQueryContext.data.data.productinfo.name_ar);
       };
+      var formstyles = {
+        input_label_name: glamor.css({
+          color: sectionproperties.form_labelcolor,
+          textTransform: sectionproperties.form_labeltexttransform,
+          fontWeight: sectionproperties.form_labelfontweight,
+          fontSize: sectionproperties.form_labelfontsize + 'px',
+          marginBottom: sectionproperties.inputfieldbordertype == 'All' ? 10 : 0
+        }),
+        form_control: glamor.css((_css = {
+          background: 'transparent',
+          color: sectionproperties.inputfieldcolor,
+          fontSize: sectionproperties.inputfieldfontsize + 'px',
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center'
+        }, _defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_defineProperty__default["default"](_css, "display", 'block'), "width", '100%'), "padding", '0 10px'), "transition", '.3s'), "border", sectionproperties.inputfieldbordertype == 'All' ? sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor : 0), "borderBottom", sectionproperties.inputfieldborderWidth + 'px solid ' + sectionproperties.inputfieldborderColor), "borderRadius", sectionproperties.inputfieldborderradius + 'px'), "height", sectionproperties.inputfieldheight + 'px'), "background", sectionproperties.input_bgcolor), "color", sectionproperties.inputfieldcolor), _defineProperty__default["default"](_defineProperty__default["default"](_css, ':focus', {
+          borderColor: sectionproperties.inputfeildbordercoloronfocus
+        }), ':focus .login_input_icon', {
+          color: sectionproperties.inputfeildbordercoloronfocus
+        }))),
+        sizeguidebtn: glamor.css({
+          color: sectionproperties.sizeguidebtncolor,
+          fontSize: sectionproperties.sizeguidebtnfontsize + 'px',
+          transition: '.3s',
+          textDecoration: 'underline',
+          ':hover': {
+            color: sectionproperties.sizeguidebtncoloronhover,
+            fontWeight: sectionproperties.sizeguidebtnfontweight
+          }
+        }),
+        closemodalbtn: glamor.css({
+          color: sectionproperties.sizeguidebtncolor,
+          transition: '.3s',
+          ':hover': {
+            color: sectionproperties.sizeguidebtncoloronhover
+          }
+        })
+      };
       return /*#__PURE__*/React__default["default"].createElement("div", {
         "class": ' col-lg-12 p-0 '
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5569,7 +5612,16 @@
         className: "p-0"
       }, /*#__PURE__*/React__default["default"].createElement("div", {
         "class": "col-lg-12 p-0"
-      }, /*#__PURE__*/React__default["default"].createElement(Variantoptions, {
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "col-lg-12 p-0 text-end"
+      }, sectionproperties.showsizeguidebtn == 'Show' && sizeguideimage.length != 0 && sectionproperties.sizeguideposition == 'Besides Variants' && /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "col-12 text-end"
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": formstyles.sizeguidebtn + ' m-0 p-0 cursor-pointer mb-auto ',
+        onClick: function onClick() {
+          setopensizeguidemodal(true);
+        }
+      }, langdetect == 'en' ? sectionproperties.sizeguidecontentenglish : sectionproperties.sizeguidecontentarabic))), /*#__PURE__*/React__default["default"].createElement(Variantoptions, {
         actions: props.actions
       }), /*#__PURE__*/React__default["default"].createElement(ProductExtras, {
         actions: props.actions
@@ -5656,7 +5708,44 @@
           paddingLeft: langdetect == 'en' ? '.5em' : 0,
           paddingRight: langdetect == 'ar' ? '.5rem' : 0
         }
-      }, StoreInfoprops()))));
+      }, StoreInfoprops()))), sizeguideimage.length != 0 && /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal, {
+        show: opensizeguidemodal,
+        onHide: function onHide() {
+          setopensizeguidemodal(false);
+        },
+        centered: true,
+        size: 'lg'
+      }, /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "allcentered cursor-pointer",
+        onClick: function onClick() {
+          setopensizeguidemodal(false);
+        },
+        style: {
+          position: 'absolute',
+          top: 10,
+          width: 35,
+          height: 35,
+          right: 10
+        }
+      }, /*#__PURE__*/React__default["default"].createElement("i", {
+        "class": ' h-100 allcentered text-black '
+      }, /*#__PURE__*/React__default["default"].createElement(IoMdClose.IoMdClose, {
+        size: 25,
+        "class": formstyles.closemodalbtn
+      }))), /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": ' w-100 h-100 px-4 py-5 ',
+        style: {}
+      }, /*#__PURE__*/React__default["default"].createElement(Imagekitimagecomp, {
+        urlEndpoint: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimageendpoint,
+        publicKey: ikimagecredcontext === null || ikimagecredcontext === void 0 ? void 0 : ikimagecredcontext.ikimagepublickey,
+        path: (_sizeguideimage$ = sizeguideimage[0]) === null || _sizeguideimage$ === void 0 ? void 0 : _sizeguideimage$.original,
+        style: {
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain'
+        },
+        loading: "lazy"
+      }))), /*#__PURE__*/React__default["default"].createElement(reactBootstrap.Modal.Footer, null)));
     };
 
     var Article_itemtype = function Article_itemtype(props) {
@@ -83963,6 +84052,11 @@
           transition: 'all, 0.4s',
           right: 10,
           transform: "translateX(0px)"
+        }),
+        sku: glamor.css({
+          fontSize: sectionproperties.skuFontSize + 'px',
+          color: sectionproperties.skuColor,
+          fontWeight: sectionproperties.skuFontWeight
         })
       };
       var _useState11 = React.useState(''),
@@ -84423,7 +84517,15 @@
         style: {
           textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
         }
-      }, item.name)), sectionproperties.prodCatShow == 'Show' && sectionproperties.descriptionoverwritestyles == 'No' && /*#__PURE__*/React__default["default"].createElement("p", {
+      }, item.name)), sectionproperties.showSKU == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
+        "class": "col-lg-12 pl-0 pr-0",
+        style: {}
+      }, /*#__PURE__*/React__default["default"].createElement("p", {
+        "class": "".concat(card_cssstyles.sku) + '  wordbreak wordbreak1 font-md-13 m-0 ',
+        style: {
+          textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'
+        }
+      }, langdetect == 'en' ? 'SKU: ' : 'كود: ', item.sku)), sectionproperties.prodCatShow == 'Show' && sectionproperties.descriptionoverwritestyles == 'No' && /*#__PURE__*/React__default["default"].createElement("p", {
         "class": sectionproperties.descriptionwordbreak == 'None' ? "".concat(card_cssstyles.productDescStyles) + ' col-lg-12 p-0   mt-1 ' : "".concat(card_cssstyles.productDescStyles) + ' col-lg-12 p-0 wordbreak wordbreak4 mt-1 ',
         style: {
           textAlign: sectionproperties.productnamecentered == 'Centered' ? 'center' : langdetect == 'en' ? 'left' : 'right'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "tabexseriescomponents",
-    "version": "0.2.752",
+    "version": "0.2.753",
     "type": "module",
     "description": "your description",
     "main": "dist/index.cjs.js",