@bonlineza/luxity-lib 2.6.2 → 2.7.3

package/BrandSelector.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));
+  };
 
-  var Title = function Title(_ref) {
+  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;
+    };
+
+    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,
@@ -882,17 +926,19 @@
     baseQueryLimit: 12
   };
 
-  function _templateObject$5() {
-    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"]);
+  function _templateObject$6() {
+    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$5 = function _templateObject() {
+    _templateObject$6 = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Button$2 = styled__default.button(_templateObject$5(), baseButtonStyle, function (props) {
+  var Button$2 = styled__default.button(_templateObject$6(), 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) {
@@ -908,16 +954,16 @@
 
   var PrimaryButton$1 = themed(PrimaryButton);
 
-  function _templateObject$6() {
+  function _templateObject$7() {
     var data = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"]);
 
-    _templateObject$6 = function _templateObject() {
+    _templateObject$7 = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var BaseButton = styled__default.button(_templateObject$6(), function (props) {
+  var BaseButton = styled__default.button(_templateObject$7(), function (props) {
     return props.theme.colors.base;
   }, function (props) {
     return props.theme.colors.borderColor;
@@ -957,7 +1003,7 @@
       queryId: "getBrands",
       baseClass: "brand-selector",
       identifier: "brand-selector",
-      searchPlaceHolder: "SEARCH BRANDS...",
+      searchPlaceHolder: "Search brands",
       category: category,
       onChange: onChange,
       graphApi: graphApi,

package/CHANGELOG.md

@@ -1,6 +1,14 @@
 
 ## Changelog
 
+### 2.7.3
+- Fix container alignment of `AddInterest` and `InterestItem` so they match
+- Center alignment trash icon in `InterestItem` 
+### 2.7.1
+- Change svg colors from pink to black
+### 2.7.0 
+- `AddInterest` and `InterestItem` have a new design that does not use the `Accordion` component
+- Can add a watch as interest 
 ### 2.6.2
 - Limit the width of the title of `InterestItem` so that it does not overlap with trash icon
 ### 2.6.1 

package/Checkbox.js

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

package/CheckboxButton.js

@@ -143,7 +143,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 
@@ -187,7 +189,7 @@
     return data;
   }
   var Content = styled__default.div(_templateObject(), function (props) {
-    return props.theme.colors.borderColor;
+    return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
   });

package/GenderSelector.js

@@ -129,6 +129,47 @@
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
 
+  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__default.h1(_templateObject(), function (props) {
+    return props.theme.fontSizes[2];
+  });
+  var InterestsSubheadingContainer = styled__default.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__default.createElement(InterestsSubheadingContainer, {
+      className: className
+    }, React__default.createElement(Title, null, title), React__default.createElement("div", null, children));
+  };
+
   var media = {
     xs: '576px',
     sm: '768px',
@@ -136,16 +177,16 @@
     lg: '1200px'
   };
 
-  function _templateObject() {
+  function _templateObject$1() {
     var data = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: calc(-1 * ", ");\n  label {\n    margin-bottom: ", ";\n    flex-basis: calc(33.33% - ", ");\n    margin-bottom: ", ";\n    margin-left: ", ";\n  }\n  @media (max-width: ", ") {\n    label {\n      flex-basis: calc(50% - ", ");\n    }\n  }\n"]);
 
-    _templateObject = function _templateObject() {
+    _templateObject$1 = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var SelectionWrapper = styled__default.div(_templateObject(), function (props) {
+  var SelectionWrapper = styled__default.div(_templateObject$1(), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.marginPaddings[2];
@@ -179,7 +220,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 
@@ -203,31 +246,31 @@
     return data;
   }
 
-  function _templateObject2() {
+  function _templateObject2$1() {
     var data = _taggedTemplateLiteral(["\n  transition: 200ms ease-in;\n  margin-left: auto;\n  margin-right: auto;\n"]);
 
-    _templateObject2 = function _templateObject2() {
+    _templateObject2$1 = function _templateObject2() {
       return data;
     };
 
     return data;
   }
 
-  function _templateObject$1() {
+  function _templateObject$2() {
     var data = _taggedTemplateLiteral(["\n  background-color: transparent;\n  border: 1px solid ", ";\n  transition: 200ms ease-in-out;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: ", ";\n  cursor: pointer;\n"]);
 
-    _templateObject$1 = function _templateObject() {
+    _templateObject$2 = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Content = styled__default.div(_templateObject$1(), function (props) {
-    return props.theme.colors.borderColor;
+  var Content = styled__default.div(_templateObject$2(), function (props) {
+    return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
   });
-  var InputText = styled__default.div(_templateObject2());
+  var InputText = styled__default.div(_templateObject2$1());
   var StyledLabel = styled__default.label(_templateObject3(), InputText, function (props) {
     return props.theme.colors.primary;
   }, Content, function (props) {
@@ -325,22 +368,8 @@
     name: ''
   };
 
-  function _templateObject$2() {
-    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: ", ";\n"]);
-
-    _templateObject$2 = function _templateObject() {
-      return data;
-    };
-
-    return data;
-  }
   var MALE$1 = genders.MALE,
       FEMALE$1 = genders.FEMALE;
-  var Title = styled__default.div(_templateObject$2(), function (props) {
-    return props.theme.fontSizes[2];
-  }, function (props) {
-    return props.theme.marginPaddings[2];
-  });
 
   /**
    *  GenderSelector: specialized selector to pick genders for the Interest Component
@@ -352,9 +381,9 @@
         femaleInputRef = _ref.femaleInputRef;
     return React__default.createElement("div", {
       className: "gender-selector"
-    }, React__default.createElement(Title, {
-      className: "gender-selector__title"
-    }, "Department"), React__default.createElement(SelectionWrapper, {
+    }, React__default.createElement(InterestsSubheading, {
+      title: "Department"
+    }), React__default.createElement(SelectionWrapper, {
       className: "gender-selector__selection-wrapper"
     }, React__default.createElement(GenderCheckbox, {
       className: "gender-selector__selection-wrapper__input-container",

package/GraphQLMultiSelector.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) {

package/IconHeader.js

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

package/IconWrapper.js

@@ -0,0 +1,38 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('styled-components')) :
+  typeof define === 'function' && define.amd ? define(['styled-components'], factory) :
+  (global = global || self, global.IconWrapper = factory(global.styled));
+}(this, (function (styled) { 'use strict';
+
+  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 _templateObject() {
+    var data = _taggedTemplateLiteral(["\n  border: 1px solid ", ";\n  height: auto;\n  margin-bottom: 1rem;\n  margin-left: 1rem;\n  display: flex;\n  align-items: center;\n  height: auto;\n\n  :hover {\n    background-color: ", ";\n    cursor: pointer;\n  }\n\n  #svg-trash {\n    width: 15px;\n  }\n"]);
+
+    _templateObject = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+  var IconWrapper = styled.div(_templateObject(), function (props) {
+    return props.theme.colors.borderColor;
+  }, function (props) {
+    return props.theme.colors.borderColor;
+  });
+
+  return IconWrapper;
+
+})));