@bonlineza/luxity-lib 2.6.2 → 2.7.3

package/InterestsSubheading.js

@@ -0,0 +1,65 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['react', 'styled-components'], factory) :
+  (global = global || self, global.InterestsSubheading = factory(global.React, global.styled));
+}(this, (function (React, styled) { 'use strict';
+
+  React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
+  styled = styled && Object.prototype.hasOwnProperty.call(styled, 'default') ? styled['default'] : styled;
+
+  function _taggedTemplateLiteral(strings, raw) {
+    if (!raw) {
+      raw = strings.slice(0);
+    }
+
+    return Object.freeze(Object.defineProperties(strings, {
+      raw: {
+        value: Object.freeze(raw)
+      }
+    }));
+  }
+
+  function _templateObject2() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"]);
+
+    _templateObject2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
+  function _templateObject() {
+    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
+
+    _templateObject = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var Title = styled.h1(_templateObject(), function (props) {
+    return props.theme.fontSizes[2];
+  });
+  var InterestsSubheadingContainer = styled.div(_templateObject2(), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  });
+
+  var InterestsSubheading = function InterestsSubheading(_ref) {
+    var title = _ref.title,
+        children = _ref.children,
+        className = _ref.className;
+    return React.createElement(InterestsSubheadingContainer, {
+      className: className
+    }, React.createElement(Title, null, title), React.createElement("div", null, children));
+  };
+
+  return InterestsSubheading;
+
+})));

package/InvertedTextButton.js

@@ -74,7 +74,7 @@
   }
 
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2 = function _templateObject2() {
       return data;
@@ -109,7 +109,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 

package/LuxityGraphQLMultiselector.js

@@ -333,7 +333,7 @@
   };
 
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2 = function _templateObject2() {
       return data;
@@ -368,7 +368,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 
@@ -451,7 +453,7 @@
   };
 
   function _templateObject2$1() {
-    var data = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(33.33% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"]);
 
     _templateObject2$1 = function _templateObject2() {
       return data;
@@ -478,14 +480,16 @@
   var multiselectorItemFadeIn = styled.keyframes(_templateObject$3(), multiSelectorItemMaxHeight);
   var StyledMultiselector = styled__default.div(_templateObject2$1(), function (props) {
     return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
   }, multiSelectorItemAnimationDuration, multiselectorItemFadeIn, function (props) {
@@ -710,8 +714,18 @@
     }));
   });
 
+  function _templateObject2$2() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"]);
+
+    _templateObject2$2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
   function _templateObject$4() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      border: solid 1px transparent;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0 ", " 0\n        ", " 0;\n\n      :focus {\n        border-color: ", ";\n      }\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
 
     _templateObject$4 = function _templateObject() {
       return data;
@@ -719,16 +733,48 @@
 
     return data;
   }
+  var Title = styled__default.h1(_templateObject$4(), function (props) {
+    return props.theme.fontSizes[2];
+  });
+  var InterestsSubheadingContainer = styled__default.div(_templateObject2$2(), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  });
+
+  var InterestsSubheading = function InterestsSubheading(_ref) {
+    var title = _ref.title,
+        children = _ref.children,
+        className = _ref.className;
+    return React__default.createElement(InterestsSubheadingContainer, {
+      className: className
+    }, React__default.createElement(Title, null, title), React__default.createElement("div", null, children));
+  };
+
+  function _templateObject$5() {
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"]);
+
+    _templateObject$5 = function _templateObject() {
+      return data;
+    };
 
-  var Title = function Title(_ref) {
+    return data;
+  }
+
+  var Title$1 = function Title(_ref) {
     var baseClass = _ref.baseClass,
         className = _ref.className,
         title = _ref.title,
         searchPlaceHolder = _ref.searchPlaceHolder,
         onSearchChanged = _ref.onSearchChanged;
-    return React__default.createElement("div", {
-      className: "".concat(className, " ").concat(baseClass, "__title")
-    }, React__default.createElement("div", null, title), React__default.createElement("div", {
+    return React__default.createElement(InterestsSubheading, {
+      className: "".concat(className, " ").concat(baseClass, "__title"),
+      title: title
+    }, React__default.createElement("div", {
       className: "title__search"
     }, React__default.createElement(Search, null), React__default.createElement("input", {
       placeholder: searchPlaceHolder,
@@ -738,10 +784,12 @@
     })));
   };
 
-  var StyledTitle = styled__default(Title)(_templateObject$4(), function (props) {
+  var StyledTitle = styled__default(Title$1)(_templateObject$5(), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.fontSizes[2];
+  }, function (props) {
+    return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
@@ -752,14 +800,10 @@
     return props.theme.fontSizes[2];
   }, function (props) {
     return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.colors.primary;
   });
-  var Title$1 = themed(StyledTitle);
+  var Title$2 = themed(StyledTitle);
 
   var debounceBuilder = functions.debounced(200);
 
@@ -832,7 +876,7 @@
             requestInstance = _this$props.requestInstance;
         return React__default.createElement("div", {
           className: baseClass
-        }, React__default.createElement(Title$1, {
+        }, React__default.createElement(Title$2, {
           title: title,
           baseClass: baseClass,
           searchPlaceHolder: searchPlaceHolder,

package/NotificationDropDown.js

@@ -6909,7 +6909,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 

package/OutlinePrimaryButton.js

@@ -74,7 +74,7 @@
   }
 
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2 = function _templateObject2() {
       return data;
@@ -109,7 +109,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 

package/PriceRangeSelector.js

@@ -194,7 +194,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 
@@ -1276,7 +1278,7 @@
   };
 
   function _templateObject2$1() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2$1 = function _templateObject2() {
       return data;
@@ -1298,7 +1300,7 @@
   var baseButtonStyle = styled.css(_templateObject2$1());
 
   function _templateObject$6() {
-    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:disabled {\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"]);
 
     _templateObject$6 = function _templateObject() {
       return data;
@@ -1307,9 +1309,15 @@
     return data;
   }
   var Button = styled__default.button(_templateObject$6(), baseButtonStyle, function (props) {
-    return props.theme.colors.base;
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
   }, function (props) {
-    return props.theme.colors.baseLt;
+    return props.theme.colors.ntrlMin;
   }, disabledButtonStyle, function (props) {
     return props.theme.colors.base;
   });
@@ -1323,8 +1331,18 @@
 
   var SecondaryButton$1 = themed(SecondaryButton);
 
+  function _templateObject2$2() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"]);
+
+    _templateObject2$2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
   function _templateObject$7() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: ", ";\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
 
     _templateObject$7 = function _templateObject() {
       return data;
@@ -1332,25 +1350,43 @@
 
     return data;
   }
-  var SliderTitle = styled__default.div(_templateObject$7(), function (props) {
+  var Title = styled__default.h1(_templateObject$7(), function (props) {
     return props.theme.fontSizes[2];
+  });
+  var InterestsSubheadingContainer = styled__default.div(_templateObject2$2(), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[3];
   }, function (props) {
     return props.theme.marginPaddings[3];
   });
 
+  var InterestsSubheading = function InterestsSubheading(_ref) {
+    var title = _ref.title,
+        children = _ref.children,
+        className = _ref.className;
+    return React__default.createElement(InterestsSubheadingContainer, {
+      className: className
+    }, React__default.createElement(Title, null, title), React__default.createElement("div", null, children));
+  };
+
   var interestCategories = {
     SHOES: 'SHOES',
     BAGS: 'BAGS',
-    ACCESSORIES: 'ACCESSORIES'
+    ACCESSORIES: 'ACCESSORIES',
+    WATCHES: 'WATCHES'
   };
   var interestCategoryMaxPrices = {
     SHOES: 50000,
     BAGS: 500000,
-    ACCESSORIES: 100000
+    ACCESSORIES: 100000,
+    WATCHES: 500000
   };
 
   function _templateObject$8() {
-    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n\n  input[data-qe-id='masked-input-min'],\n  input[data-qe-id='masked-input-max'] {\n    flex-basis: 30%;\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: space-between;\n\n  input[data-qe-id='masked-input-min'],\n  input[data-qe-id='masked-input-max'] {\n    flex-basis: 30%;\n    border-left: none;\n    border-right: none;\n    border-top: none;\n    border-bottom: 1px solid ", ";\n  }\n"]);
 
     _templateObject$8 = function _templateObject() {
       return data;
@@ -1358,7 +1394,9 @@
 
     return data;
   }
-  var CurrencyInputWrapper = styled__default.div(_templateObject$8());
+  var CurrencyInputWrapper = styled__default.div(_templateObject$8(), function (props) {
+    return props.theme.colors.primary;
+  });
 
   var debounceBuilder$1 = functions.debounced(50);
 
@@ -1375,6 +1413,9 @@
       case interestCategories.SHOES:
         return interestCategoryMaxPrices.SHOES;
 
+      case interestCategories.WATCHES:
+        return interestCategoryMaxPrices.WATCHES;
+
       default:
         return 0;
     }
@@ -1435,7 +1476,9 @@
       className: "price-ranges"
     }, React__default.createElement(RangeSlider$1, {
       renderTitleSection: function renderTitleSection() {
-        return React__default.createElement(SliderTitle, null, "Price Ranges");
+        return React__default.createElement(InterestsSubheading, {
+          title: "Price Range"
+        });
       },
       identifier: "price-range-slider",
       max: maxPrice,

package/PrimaryButton.js

@@ -87,7 +87,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 
@@ -102,7 +104,7 @@
   });
 
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2 = function _templateObject2() {
       return data;
@@ -124,7 +126,7 @@
   var baseButtonStyle = styled.css(_templateObject2());
 
   function _templateObject$1() {
-    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  &:active,\n  &:hover {\n    background-color: #fff;\n    color: ", ";\n  }\n\n  &:disabled {\n    ", "\n\n    &:hover {\n      background-color: ", ";\n      color: #ffff;\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  &:active,\n  &:hover {\n    background-color: #fff;\n    color: ", ";\n  }\n\n  &:disabled {\n    ", "\n\n    &:hover {\n      background-color: ", ";\n      color: #ffff;\n    }\n  }\n"]);
 
     _templateObject$1 = function _templateObject() {
       return data;
@@ -134,6 +136,8 @@
   }
   var Button = styled__default.button(_templateObject$1(), baseButtonStyle, function (props) {
     return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
   }, disabledButtonStyle, function (props) {

package/RadioButtons.js

@@ -313,7 +313,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 

package/RangeSlider.js

@@ -143,7 +143,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 

package/SecondaryButton.js

@@ -74,7 +74,7 @@
   }
 
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2 = function _templateObject2() {
       return data;
@@ -109,7 +109,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 
@@ -124,7 +126,7 @@
   });
 
   function _templateObject$1() {
-    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:disabled {\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  border: 1px solid ", ";\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    ", "\n    &:hover {\n      background-color: ", ";\n    }\n  }\n"]);
 
     _templateObject$1 = function _templateObject() {
       return data;
@@ -133,9 +135,15 @@
     return data;
   }
   var Button = styled__default.button(_templateObject$1(), baseButtonStyle, function (props) {
-    return props.theme.colors.base;
+    return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
   }, function (props) {
-    return props.theme.colors.baseLt;
+    return props.theme.colors.ntrlMin;
   }, disabledButtonStyle, function (props) {
     return props.theme.colors.base;
   });

package/ShoeSizeSelector.js

@@ -143,7 +143,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 
@@ -1188,7 +1190,7 @@
   var RangeSlider$1 = themed(RangeSlider);
 
   function _templateObject2$1() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2$1 = function _templateObject2() {
       return data;