@bonlineza/luxity-lib 2.37.7 → 2.38.0

package/LuxityMobileHeader.js

@@ -455,10 +455,10 @@
   var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
   var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
+    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
   };
   var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
+    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
   };
   var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
     return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -468,10 +468,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$$toolTipPositi = props.$toolTipPosition,
-        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
+    var _props$toolTipPositio = props.toolTipPosition,
+        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -485,9 +485,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var $toolTipPosition = props.$toolTipPosition;
+    var toolTipPosition = props.toolTipPosition;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -500,7 +500,7 @@
   };
 
   var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.$bodyWidth;
+    return props.bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {
@@ -576,33 +576,33 @@
     });
   });
 
-  /* eslint-disable react/require-default-props */
-
   var Tooltip = function Tooltip(_ref) {
-    var _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children,
-        _ref$toolTipText = _ref.toolTipText,
-        toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
-        _ref$toolTipPosition = _ref.toolTipPosition,
-        toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
-        _ref$bodyWidth = _ref.bodyWidth,
-        bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
-        _ref$apexWidth = _ref.apexWidth,
-        apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
-        _ref$containerClassNa = _ref.containerClassName,
-        containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
-        _ref$bodyClassName = _ref.bodyClassName,
-        bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
+    var children = _ref.children,
+        toolTipText = _ref.toolTipText,
+        toolTipPosition = _ref.toolTipPosition,
+        bodyWidth = _ref.bodyWidth,
+        apexWidth = _ref.apexWidth,
+        containerClassName = _ref.containerClassName,
+        bodyClassName = _ref.bodyClassName;
     return /*#__PURE__*/React__default.createElement(Container, {
       className: containerClassName
     }, children, /*#__PURE__*/React__default.createElement(Body, {
-      $toolTipPosition: toolTipPosition,
-      $bodyWidth: bodyWidth,
-      $apexWidth: apexWidth,
+      toolTipPosition: toolTipPosition,
+      bodyWidth: bodyWidth,
+      apexWidth: apexWidth,
       className: bodyClassName
     }, toolTipText));
   };
 
+  Tooltip.defaultProps = {
+    children: null,
+    toolTipText: '',
+    toolTipPosition: 'top',
+    bodyWidth: '8em',
+    apexWidth: '5px',
+    containerClassName: '',
+    bodyClassName: ''
+  };
   var Tooltip$1 = themed(Tooltip);
 
   var CurrencySelect = function CurrencySelect(_ref) {
@@ -977,6 +977,8 @@
         price: product.price,
         retail_price: product.est_retail_price
       };
+      var displayPrice = product.on_promotion && product.promotion_price ? product.promotion_price : selectedPrice.price;
+      var hasPromotion = product.on_promotion && product.promotion_price;
       return /*#__PURE__*/React__default.createElement("a", {
         key: product.link,
         href: product.link,
@@ -1004,15 +1006,23 @@
         className: "product-card__name"
       }, shouldShowInitialData ? /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("span", {
         className: "product-card__brand-name"
-      }, product.brand.toUpperCase()), ' ', product.name) : product.name), /*#__PURE__*/React__default.createElement("div", {
+      }, product.brand.toUpperCase()), ' ', product.name) : /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement("span", {
+        className: "product-card__brand-name"
+      }, product.brand.toUpperCase()), ' ', product.name)), /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__info-row"
       }, /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__price-group"
+      }, hasPromotion ? /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price-with-promotion"
       }, /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price product-card__price--promotion"
+      }, formatPrice(displayPrice)), /*#__PURE__*/React__default.createElement("div", {
+        className: "product-card__price product-card__price--original"
+      }, formatPrice(selectedPrice.price))) : /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__price"
-      }, formatPrice(selectedPrice.price)), selectedPrice.retail_price > 1 && /*#__PURE__*/React__default.createElement("div", {
+      }, formatPrice(displayPrice)), selectedPrice.retail_price > 1 && selectedPrice.retail_price > displayPrice && /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__retail-price"
-      }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), /*#__PURE__*/React__default.createElement("div", {
+      }, "Est. Retail: ", formatPrice(selectedPrice.retail_price))), product.condition && /*#__PURE__*/React__default.createElement("div", {
         className: "product-card__condition"
       }, /*#__PURE__*/React__default.createElement("span", {
         className: "product-card__condition-label"
@@ -1101,20 +1111,33 @@
     }, "View all items")));
   };
 
-  var searchProducts = function searchProducts(search, limit, currencyCode) {
+  var searchBrandsAggregations = function searchBrandsAggregations(search, currencyCode) {
     return {
-      query: "\n      query SearchProducts($search: String!, $limit: Int!, $currencyCode: String!) {\n        luxity_products_serach_results(search: $search, limit: $limit, currency_code: $currencyCode) {\n          brands {\n            name\n            link\n          }\n          products {\n            name\n            link\n            price\n            est_retail_price\n            condition\n            featured_image\n          }\n          luxity_product_ids\n        }\n      }\n    ",
+      query: "\n      query GetProductFilterAggregations($search: String!) {\n        luxity_products_aggregations(search: $search) {\n          luxity_brand {\n            name\n          }\n        }\n      }\n    ",
+      variables: {
+        search: search,
+        currency_code: currencyCode
+      }
+    };
+  }; // NEW: Get top products for search dropdown (right side)
+
+  var searchProductsFilter = function searchProductsFilter(search, limit, currencyCode) {
+    return {
+      query: "\n      query LUXITY_PRODUCTS_FILTER(\n        $search: String!\n        $limit: Int!\n        $page: Int!\n        $sort_by: String!\n        $with_sold: Boolean!\n        $currency_code: String!\n      ) {\n        luxity_products_filter(\n          search: $search\n          limit: $limit\n          page: $page\n          sort_by: $sort_by\n          with_sold: $with_sold\n        ) {\n          data {\n            id\n            product {\n              sku\n              name\n              price(currency_code: $currency_code)\n              promotion_price(currency_code: $currency_code)\n              est_retail_price(currency_code: $currency_code)\n              condition\n              currency_symbol(currency_code: $currency_code)\n            }\n            category_type\n            gender\n            status\n            featured_image\n            on_promotion\n            promotion_discount\n            luxity_brand {\n              id\n              name\n              slug\n            }\n          }\n          total\n        }\n      }\n    ",
       variables: {
         search: search,
         limit: limit,
-        currencyCode: currencyCode
+        page: 1,
+        sort_by: 'newest',
+        with_sold: false,
+        currency_code: currencyCode
       }
     };
   };
 
   var useSearch = function useSearch(_ref) {
     var endpoint = _ref.endpoint,
-        onProductIdsReceived = _ref.onProductIdsReceived,
+        onSearchLoading = _ref.onSearchLoading,
         currency = _ref.currency,
         onSearchPreview = _ref.onSearchPreview;
     var currentSearchRequestToken = React.useRef(null);
@@ -1152,8 +1175,7 @@
       if (!searchQuery || searchQuery.trim() === '') {
         setSearchResults({
           brands: [],
-          products: [],
-          luxity_product_ids: []
+          products: []
         });
         return;
       } // Cancel any ongoing search request to prevent race conditions
@@ -1165,41 +1187,96 @@
 
 
       var newSearchToken = axios.CancelToken.source();
-      currentSearchRequestToken.current = newSearchToken;
-      axios.post(endpoint, searchProducts(searchQuery, 3, currency), {
+      currentSearchRequestToken.current = newSearchToken; // Set loading to true when starting the search request
+
+      if (typeof onSearchLoading === 'function') {
+        onSearchLoading(true);
+      } // Make TWO parallel queries: brands aggregations + products filter
+
+
+      Promise.all([// Query 1: Get brands aggregations
+      axios.post(endpoint, searchBrandsAggregations(searchQuery, currency), {
         cancelToken: newSearchToken.token
-      }).then(function (response) {
+      }), // Query 2: Get top 3 products
+      axios.post(endpoint, searchProductsFilter(searchQuery, 3, currency), {
+        cancelToken: newSearchToken.token
+      })]).then(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            brandsResponse = _ref4[0],
+            productsResponse = _ref4[1];
+
         if (currentSearchRequestToken.current === newSearchToken) {
-          var searchResults = response.data.data.luxity_products_serach_results;
+          var _brandsResponse$data$, _productsResponse$dat, _productsResponse$dat2;
+
+          // Extract brands from aggregations
+          var brandsData = ((_brandsResponse$data$ = brandsResponse.data.data.luxity_products_aggregations) === null || _brandsResponse$data$ === void 0 ? void 0 : _brandsResponse$data$.luxity_brand) || []; // Extract products from filter
+
+          var productsData = ((_productsResponse$dat = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat === void 0 ? void 0 : _productsResponse$dat.data) || [];
+          var totalResults = ((_productsResponse$dat2 = productsResponse.data.data.luxity_products_filter) === null || _productsResponse$dat2 === void 0 ? void 0 : _productsResponse$dat2.total) || 0; // Map brands to old structure: { name, link }
+
+          var brands = brandsData.slice(0, 10).map(function (brand) {
+            return {
+              name: brand.name,
+              link: "/products/brands/".concat(brand.name.toLowerCase().replace(/\s+/g, '-')) // Convert to slug
+
+            };
+          }); // Map products to old structure with prices
+
+          var products = productsData.map(function (product) {
+            return {
+              name: product.product.name,
+              brand: product.luxity_brand.name,
+              link: "/products/".concat(product.id),
+              // Using product ID for link
+              price: product.product.price || 0,
+              promotion_price: product.product.promotion_price || null,
+              est_retail_price: product.product.est_retail_price || 0,
+              condition: product.product.condition || '',
+              currency_symbol: product.product.currency_symbol || '',
+              featured_image: product.featured_image,
+              on_promotion: product.on_promotion || false,
+              promotion_discount: product.promotion_discount || 0,
+              // Keep new fields for potential future use
+              id: product.id,
+              category_type: product.category_type,
+              luxity_brand: product.luxity_brand
+            };
+          });
+          var searchResults = {
+            brands: brands,
+            products: products,
+            total: totalResults
+          };
           setSearchResults(searchResults);
 
-          if (searchResults && searchResults.luxity_product_ids) {
-            onProductIdsReceived(searchResults.luxity_product_ids);
-          }
-
           if (typeof onSearchPreview === 'function') {
-            var _searchResults$brands, _searchResults$produc;
-
-            var hasResults = ((_searchResults$brands = searchResults.brands) === null || _searchResults$brands === void 0 ? void 0 : _searchResults$brands.length) > 0 || ((_searchResults$produc = searchResults.products) === null || _searchResults$produc === void 0 ? void 0 : _searchResults$produc.length) > 0;
+            var hasResults = brands.length > 0 || products.length > 0;
             onSearchPreview({
               search_string: searchQuery,
               has_results: hasResults
             });
           }
 
-          currentSearchRequestToken.current = null;
+          currentSearchRequestToken.current = null; // Set loading to false when search completes successfully
+
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          }
         }
       }).catch(function (error) {
         if (!axios.isCancel(error)) {
           setSearchResults({
             brands: [],
-            products: [],
-            luxity_product_ids: []
+            products: []
           });
-          currentSearchRequestToken.current = null;
+          currentSearchRequestToken.current = null; // Set loading to false when search fails
+
+          if (typeof onSearchLoading === 'function') {
+            onSearchLoading(false);
+          }
         }
       });
-    }, [endpoint, currency, onSearchPreview, onProductIdsReceived]);
+    }, [endpoint, currency, onSearchPreview, onSearchLoading]);
     var debouncedSearch = React.useMemo(function () {
       return debounce(function (searchQuery, setSearchResults) {
         return performSearch(searchQuery, setSearchResults);
@@ -1354,7 +1431,7 @@
         onSearchPreview = _ref.onSearchPreview,
         onProductSearchResultClick = _ref.onProductSearchResultClick,
         onBrandSearchResultClick = _ref.onBrandSearchResultClick,
-        onProductIdsReceived = _ref.onProductIdsReceived,
+        onSearchLoading = _ref.onSearchLoading,
         onLogoutClick = _ref.onLogoutClick,
         onInterestClick = _ref.onInterestClick,
         onAddressClick = _ref.onAddressClick,
@@ -1379,7 +1456,7 @@
 
     var _useSearch = useSearch({
       endpoint: endpoint,
-      onProductIdsReceived: onProductIdsReceived,
+      onSearchLoading: onSearchLoading,
       currency: currency,
       onSearchPreview: onSearchPreview
     }),

package/LuxitySideNav.js

@@ -271,10 +271,10 @@
   var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
   var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
+    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
   };
   var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
+    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
   };
   var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
     return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -284,10 +284,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$$toolTipPositi = props.$toolTipPosition,
-        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
+    var _props$toolTipPositio = props.toolTipPosition,
+        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -301,9 +301,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var $toolTipPosition = props.$toolTipPosition;
+    var toolTipPosition = props.toolTipPosition;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -316,7 +316,7 @@
   };
 
   var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.$bodyWidth;
+    return props.bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {
@@ -392,33 +392,33 @@
     });
   });
 
-  /* eslint-disable react/require-default-props */
-
   var Tooltip = function Tooltip(_ref) {
-    var _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children,
-        _ref$toolTipText = _ref.toolTipText,
-        toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
-        _ref$toolTipPosition = _ref.toolTipPosition,
-        toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
-        _ref$bodyWidth = _ref.bodyWidth,
-        bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
-        _ref$apexWidth = _ref.apexWidth,
-        apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
-        _ref$containerClassNa = _ref.containerClassName,
-        containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
-        _ref$bodyClassName = _ref.bodyClassName,
-        bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
+    var children = _ref.children,
+        toolTipText = _ref.toolTipText,
+        toolTipPosition = _ref.toolTipPosition,
+        bodyWidth = _ref.bodyWidth,
+        apexWidth = _ref.apexWidth,
+        containerClassName = _ref.containerClassName,
+        bodyClassName = _ref.bodyClassName;
     return /*#__PURE__*/React__default.createElement(Container, {
       className: containerClassName
     }, children, /*#__PURE__*/React__default.createElement(Body, {
-      $toolTipPosition: toolTipPosition,
-      $bodyWidth: bodyWidth,
-      $apexWidth: apexWidth,
+      toolTipPosition: toolTipPosition,
+      bodyWidth: bodyWidth,
+      apexWidth: apexWidth,
       className: bodyClassName
     }, toolTipText));
   };
 
+  Tooltip.defaultProps = {
+    children: null,
+    toolTipText: '',
+    toolTipPosition: 'top',
+    bodyWidth: '8em',
+    apexWidth: '5px',
+    containerClassName: '',
+    bodyClassName: ''
+  };
   var Tooltip$1 = themed(Tooltip);
 
   var CurrencySelect = function CurrencySelect(_ref) {

package/MaterialSelector.js

@@ -1313,10 +1313,10 @@
   var relativeInlineStyle = styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
   var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
+    return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
   };
   var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
+    return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
   };
   var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
     return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -1326,10 +1326,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$$toolTipPositi = props.$toolTipPosition,
-        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
+    var _props$toolTipPositio = props.toolTipPosition,
+        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -1343,9 +1343,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var $toolTipPosition = props.$toolTipPosition;
+    var toolTipPosition = props.toolTipPosition;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -1358,7 +1358,7 @@
   };
 
   var Body$1 = styled__default.span(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.$bodyWidth;
+    return props.bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {

package/ModelSelector.js

@@ -1313,10 +1313,10 @@
   var relativeInlineStyle = styled.css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
   var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
+    return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
   };
   var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
+    return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
   };
   var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
     return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -1326,10 +1326,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$$toolTipPositi = props.$toolTipPosition,
-        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
+    var _props$toolTipPositio = props.toolTipPosition,
+        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -1343,9 +1343,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var $toolTipPosition = props.$toolTipPosition;
+    var toolTipPosition = props.toolTipPosition;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -1358,7 +1358,7 @@
   };
 
   var Body$1 = styled__default.span(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.$bodyWidth;
+    return props.bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {

package/Tooltip.js

@@ -42,10 +42,10 @@
   var relativeInlineStyle = styled.css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
   var topMiddleBodyStyle = styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  z-index: 1;\n  bottom: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n"])));
   var getTopMiddleArrowAfterStyle = function getTopMiddleArrowAfterStyle(props) {
-    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.$apexWidth, props.$apexWidth, props.theme.colors.base);
+    return styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  /*Bottom Arrow*/\n  top: 100%; /* At the bottom of the tooltip */\n  left: calc(50% - ", ");\n  border-width: ", ";\n  border-style: solid;\n  border-color: ", " transparent transparent transparent;\n"])), props.apexWidth, props.apexWidth, props.theme.colors.base);
   };
   var getBottomMiddleBodyStyle = function getBottomMiddleBodyStyle(props) {
-    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.$bodyWidth);
+    return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 100%;\n  left: calc(50% - ", " / 2);\n"])), props.bodyWidth);
   };
   var getBottomMiddleArrowAfterStyle = function getBottomMiddleArrowAfterStyle(props) {
     return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  /*Top Arrow*/\n  bottom: 100%; /* At the top of the tooltip */\n  top: initial;\n  left: 50%;\n  border-style: solid;\n  border-color: transparent transparent ", " transparent;\n"])), props.theme.colors.base);
@@ -55,10 +55,10 @@
 
   var getBodyStyle = function getBodyStyle() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var _props$$toolTipPositi = props.$toolTipPosition,
-        $toolTipPosition = _props$$toolTipPositi === void 0 ? '' : _props$$toolTipPositi;
+    var _props$toolTipPositio = props.toolTipPosition,
+        toolTipPosition = _props$toolTipPositio === void 0 ? '' : _props$toolTipPositio;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return topMiddleBodyStyle;
 
@@ -72,9 +72,9 @@
 
   var getAfterStyling = function getAfterStyling() {
     var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var $toolTipPosition = props.$toolTipPosition;
+    var toolTipPosition = props.toolTipPosition;
 
-    switch ($toolTipPosition) {
+    switch (toolTipPosition) {
       case 'top':
         return getTopMiddleArrowAfterStyle(props);
 
@@ -87,7 +87,7 @@
   };
 
   var Body = styled__default.span(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  ", ";\n  visibility: hidden;\n  opacity: 0;\n  width: ", ";\n  transition: visibility 0.3s linear, opacity 0.3s linear;\n  background-color: ", ";\n  color: white;\n  text-align: center;\n  border-radius: 5px;\n  ", "\n  &::after {\n    content: ' ';\n    position: absolute;\n    ", "\n  }\n"])), relativeInlineStyle, function (props) {
-    return props.$bodyWidth;
+    return props.bodyWidth;
   }, function (props) {
     return props.theme.colors.base || 'black';
   }, function (props) {
@@ -163,33 +163,33 @@
     });
   });
 
-  /* eslint-disable react/require-default-props */
-
   var Tooltip = function Tooltip(_ref) {
-    var _ref$children = _ref.children,
-        children = _ref$children === void 0 ? null : _ref$children,
-        _ref$toolTipText = _ref.toolTipText,
-        toolTipText = _ref$toolTipText === void 0 ? '' : _ref$toolTipText,
-        _ref$toolTipPosition = _ref.toolTipPosition,
-        toolTipPosition = _ref$toolTipPosition === void 0 ? 'top' : _ref$toolTipPosition,
-        _ref$bodyWidth = _ref.bodyWidth,
-        bodyWidth = _ref$bodyWidth === void 0 ? '8em' : _ref$bodyWidth,
-        _ref$apexWidth = _ref.apexWidth,
-        apexWidth = _ref$apexWidth === void 0 ? '5px' : _ref$apexWidth,
-        _ref$containerClassNa = _ref.containerClassName,
-        containerClassName = _ref$containerClassNa === void 0 ? '' : _ref$containerClassNa,
-        _ref$bodyClassName = _ref.bodyClassName,
-        bodyClassName = _ref$bodyClassName === void 0 ? '' : _ref$bodyClassName;
+    var children = _ref.children,
+        toolTipText = _ref.toolTipText,
+        toolTipPosition = _ref.toolTipPosition,
+        bodyWidth = _ref.bodyWidth,
+        apexWidth = _ref.apexWidth,
+        containerClassName = _ref.containerClassName,
+        bodyClassName = _ref.bodyClassName;
     return /*#__PURE__*/React__default.createElement(Container, {
       className: containerClassName
     }, children, /*#__PURE__*/React__default.createElement(Body, {
-      $toolTipPosition: toolTipPosition,
-      $bodyWidth: bodyWidth,
-      $apexWidth: apexWidth,
+      toolTipPosition: toolTipPosition,
+      bodyWidth: bodyWidth,
+      apexWidth: apexWidth,
       className: bodyClassName
     }, toolTipText));
   };
 
+  Tooltip.defaultProps = {
+    children: null,
+    toolTipText: '',
+    toolTipPosition: 'top',
+    bodyWidth: '8em',
+    apexWidth: '5px',
+    containerClassName: '',
+    bodyClassName: ''
+  };
   var index = themed(Tooltip);
 
   return index;