@dspworkplace/ui 2.1.2 → 2.1.4

package/dist/index.es.js

@@ -4829,9 +4829,19 @@ function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _templateObject12() {
+function _templateObject13() {
   var data = taggedTemplateLiteral(["\n    border: 0;\n    padding-right: 8px;\n    background: transparent;\n    cursor: inherit;\n    display: flex;\n    align-items: center;\n    height: 100%;\n"]);
 
+  _templateObject13 = function _templateObject13() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject12() {
+  var data = taggedTemplateLiteral(["\n    flex: 1;\n    min-width: 0;\n    border: 0;\n    outline: 0;\n    padding: 0;\n    background: transparent;\n    cursor: inherit;\n    font-family: inherit;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    padding-left: ", ";\n\n\n    &::placeholder {\n        color: ", ";\n        opacity: 1;\n    }\n"]);
+
   _templateObject12 = function _templateObject12() {
     return data;
   };
@@ -4840,7 +4850,7 @@ function _templateObject12() {
 }
 
 function _templateObject11() {
-  var data = taggedTemplateLiteral(["\n    flex: 1;\n    min-width: 0;\n    border: 0;\n    outline: 0;\n    padding: 0;\n    background: transparent;\n    cursor: inherit;\n    font-family: inherit;\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    padding-left: 8px;\n\n\n    &::placeholder {\n        color: ", ";\n        opacity: 1;\n    }\n"]);
+  var data = taggedTemplateLiteral(["\n    display: flex;\n    isolation: isolate;\n    padding-left: 8px;\n"]);
 
   _templateObject11 = function _templateObject11() {
     return data;
@@ -5004,6 +5014,17 @@ var ColorOption = styled.span(_templateObject10(), function (props) {
 }, function (props) {
   return props.index > 0 ? '-19px' : '0';
 });
+var Swatches = styled.span(_templateObject11());
+
+var renderSwatches = function renderSwatches(colors) {
+  return colors.length > 0 && /*#__PURE__*/React.createElement(Swatches, null, colors.slice(0, 3).map(function (color, index) {
+    return /*#__PURE__*/React.createElement(ColorOption, {
+      key: index,
+      index: index,
+      color: color
+    });
+  }));
+};
 
 var getSelected = function getSelected(options, defaultValue) {
   var selected;
@@ -5013,10 +5034,13 @@ var getSelected = function getSelected(options, defaultValue) {
   return selected;
 };
 
-var SearchInput = styled.input(_templateObject11(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (props) {
+var SearchInput = styled.input(_templateObject12(), theme.font.medium.size, theme.font.medium.lineHeight, theme.colors.neutrals.gray, function (_ref3) {
+  var hasSwatch = _ref3.hasSwatch;
+  return hasSwatch ? 0 : '8px';
+}, function (props) {
   return props.hasSelection ? theme.colors.neutrals.gray : theme.colors.neutrals.medium;
 });
-var ToggleButton = styled.button(_templateObject12());
+var ToggleButton = styled.button(_templateObject13());
 
 var isOption = function isOption(item) {
   return item.value !== undefined && item.value !== null;
@@ -5042,11 +5066,11 @@ var optionText = function optionText(node) {
 // eslint-disable-next-line react/prop-types
 
 
-var FloatingOptions = /*#__PURE__*/forwardRef(function (_ref3, ref) {
-  var anchor = _ref3.anchor,
-      openTo = _ref3.openTo,
-      style = _ref3.style,
-      props = objectWithoutProperties(_ref3, ["anchor", "openTo", "style"]);
+var FloatingOptions = /*#__PURE__*/forwardRef(function (_ref4, ref) {
+  var anchor = _ref4.anchor,
+      openTo = _ref4.openTo,
+      style = _ref4.style,
+      props = objectWithoutProperties(_ref4, ["anchor", "openTo", "style"]);
 
   var _useState = useState(null),
       _useState2 = slicedToArray(_useState, 2),
@@ -5090,21 +5114,21 @@ var FloatingOptions = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   }, attributes.popper, props)), document.body);
 }); // eslint-disable-next-line react/prop-types
 
-var AutocompleteSelect = function AutocompleteSelect(_ref4) {
-  var options = _ref4.options,
-      selectedOpt = _ref4.selectedOpt,
-      setSelected = _ref4.setSelected,
-      onChange = _ref4.onChange,
-      onSelect = _ref4.onSelect,
-      placeholder = _ref4.placeholder,
-      error = _ref4.error,
-      valid = _ref4.valid,
-      noOptions = _ref4.noOptions,
-      visibleOptionsQty = _ref4.visibleOptionsQty,
-      openTo = _ref4.openTo,
-      startOpen = _ref4.startOpen,
-      resetCallback = _ref4.resetCallback,
-      props = objectWithoutProperties(_ref4, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
+var AutocompleteSelect = function AutocompleteSelect(_ref5) {
+  var options = _ref5.options,
+      selectedOpt = _ref5.selectedOpt,
+      setSelected = _ref5.setSelected,
+      onChange = _ref5.onChange,
+      onSelect = _ref5.onSelect,
+      placeholder = _ref5.placeholder,
+      error = _ref5.error,
+      valid = _ref5.valid,
+      noOptions = _ref5.noOptions,
+      visibleOptionsQty = _ref5.visibleOptionsQty,
+      openTo = _ref5.openTo,
+      startOpen = _ref5.startOpen,
+      resetCallback = _ref5.resetCallback,
+      props = objectWithoutProperties(_ref5, ["options", "selectedOpt", "setSelected", "onChange", "onSelect", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
 
   var _useState3 = useState(),
       _useState4 = slicedToArray(_useState3, 2),
@@ -5132,14 +5156,16 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
   var items = filterItems(search);
   var hasSelection = selectedOpt.value.length > 0;
   var selectedText = optionText(selectedOpt.desc);
+  var selectedItem = selectable.find(function (item) {
+    return item.value.toString() === selectedOpt.value;
+  });
+  var selectedColors = !search && selectedItem && selectedItem.color ? [selectedItem.color] : [];
 
   var _useCombobox = useCombobox({
     items: items,
     value: search || '',
     onChange: setSearch,
-    selected: selectable.find(function (item) {
-      return item.value.toString() === selectedOpt.value;
-    }),
+    selected: selectedItem,
     onSelectChange: function onSelectChange(item) {
       if (!item) return;
       if (onSelect) onSelect(item);
@@ -5157,8 +5183,8 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
     },
     disabled: props.disabled,
     feature: supercomplete({
-      onRequestItem: function onRequestItem(_ref5, res) {
-        var value = _ref5.value;
+      onRequestItem: function onRequestItem(_ref6, res) {
+        var value = _ref6.value;
         var matches = filterItems(value);
         if (matches.length > 0) res({
           index: 0,
@@ -5186,9 +5212,10 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
     className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
   }, props, {
     title: selectedText
-  }), /*#__PURE__*/React.createElement(SearchInput, _extends_1({
+  }), renderSwatches(selectedColors), /*#__PURE__*/React.createElement(SearchInput, _extends_1({
     placeholder: hasSelection ? selectedText : placeholder,
-    hasSelection: hasSelection
+    hasSelection: hasSelection,
+    hasSwatch: selectedColors.length > 0
   }, getInputProps())), /*#__PURE__*/React.createElement(ToggleButton, getToggleProps(), open ? /*#__PURE__*/React.createElement(Icons.ArrowUp, {
     size: "15px",
     color: theme.colors.info.border
@@ -5208,9 +5235,9 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
       item: item,
       depth: 0
     };
-  }) : rows).map(function (_ref6, key) {
-    var item = _ref6.item,
-        depth = _ref6.depth;
+  }) : rows).map(function (_ref7, key) {
+    var item = _ref7.item,
+        depth = _ref7.depth;
 
     if (!isOption(item)) {
       return /*#__PURE__*/React.createElement(OptionGroup$1, {
@@ -5232,7 +5259,9 @@ var AutocompleteSelect = function AutocompleteSelect(_ref4) {
     }, getItemProps({
       item: item,
       index: index
-    })), /*#__PURE__*/React.createElement(Value$1, {
+    })), item.color && /*#__PURE__*/React.createElement(ColorOption, {
+      color: item.color
+    }), /*#__PURE__*/React.createElement(Value$1, {
       option: true,
       style: {
         marginRight: 4
@@ -5248,18 +5277,18 @@ var summarizeSelection = function summarizeSelection(names) {
 }; // eslint-disable-next-line react/prop-types
 
 
-var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
-  var options = _ref7.options,
-      selectedValues = _ref7.selectedValues,
-      onToggle = _ref7.onToggle,
-      placeholder = _ref7.placeholder,
-      error = _ref7.error,
-      valid = _ref7.valid,
-      noOptions = _ref7.noOptions,
-      visibleOptionsQty = _ref7.visibleOptionsQty,
-      openTo = _ref7.openTo,
-      startOpen = _ref7.startOpen,
-      props = objectWithoutProperties(_ref7, ["options", "selectedValues", "onToggle", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen"]);
+var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref8) {
+  var options = _ref8.options,
+      selectedValues = _ref8.selectedValues,
+      onToggle = _ref8.onToggle,
+      placeholder = _ref8.placeholder,
+      error = _ref8.error,
+      valid = _ref8.valid,
+      noOptions = _ref8.noOptions,
+      visibleOptionsQty = _ref8.visibleOptionsQty,
+      openTo = _ref8.openTo,
+      startOpen = _ref8.startOpen,
+      props = objectWithoutProperties(_ref8, ["options", "selectedValues", "onToggle", "placeholder", "error", "valid", "noOptions", "visibleOptionsQty", "openTo", "startOpen"]);
 
   var _useState7 = useState(''),
       _useState8 = slicedToArray(_useState7, 2),
@@ -5303,11 +5332,17 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
   var items = search ? selectable.filter(function (item) {
     return optionText(item.name).toLowerCase().startsWith(search.toLowerCase());
   }) : selectable;
-  var summary = summarizeSelection(selectable.filter(function (item) {
+  var selectedItems = selectable.filter(function (item) {
     return selectedValues.includes(item.value.toString());
-  }).map(function (item) {
+  });
+  var summary = summarizeSelection(selectedItems.map(function (item) {
     return optionText(item.name);
   }));
+  var selectedColors = search ? [] : selectedItems.filter(function (item) {
+    return item.color;
+  }).map(function (item) {
+    return item.color;
+  });
   return /*#__PURE__*/React.createElement(SelectUi$1, _extends_1({
     ref: setNode,
     className: [open && 'open', error && 'error', valid && 'valid'].filter(Boolean).join(' ')
@@ -5316,10 +5351,11 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
     onClick: function onClick() {
       return !props.disabled && setOpen(true);
     }
-  }), /*#__PURE__*/React.createElement(SearchInput, {
+  }), renderSwatches(selectedColors), /*#__PURE__*/React.createElement(SearchInput, {
     value: search,
     placeholder: summary || placeholder,
     hasSelection: summary.length > 0,
+    hasSwatch: selectedColors.length > 0,
     disabled: props.disabled,
     onChange: function onChange(e) {
       setSearch(e.target.value);
@@ -5358,9 +5394,9 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
       item: item,
       depth: 0
     };
-  }) : rows).map(function (_ref8, key) {
-    var item = _ref8.item,
-        depth = _ref8.depth;
+  }) : rows).map(function (_ref9, key) {
+    var item = _ref9.item,
+        depth = _ref9.depth;
 
     if (!isOption(item)) {
       return /*#__PURE__*/React.createElement(OptionGroup$1, {
@@ -5386,7 +5422,9 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
       }
     }, /*#__PURE__*/React.createElement(CustomCheckBox, null, selectedValues.includes(item.value.toString()) && /*#__PURE__*/React.createElement(Icons.Check, {
       size: "17px"
-    })), /*#__PURE__*/React.createElement(Value$1, {
+    })), item.color && /*#__PURE__*/React.createElement(ColorOption, {
+      color: item.color
+    }), /*#__PURE__*/React.createElement(Value$1, {
       option: true,
       style: {
         marginRight: 4
@@ -5395,22 +5433,22 @@ var MultiAutocompleteSelect = function MultiAutocompleteSelect(_ref7) {
   })));
 };
 
-var MultiDropdown = /*#__PURE__*/forwardRef(function (_ref9, ref) {
-  var name = _ref9.name,
-      label = _ref9.label,
-      help = _ref9.help,
-      error = _ref9.error,
-      valid = _ref9.valid,
-      options = _ref9.options,
-      placeholder = _ref9.placeholder,
-      onChange = _ref9.onChange,
-      defaultValue = _ref9.defaultValue,
-      visibleOptionsQty = _ref9.visibleOptionsQty,
-      openTo = _ref9.openTo,
-      _ref9$startOpen = _ref9.startOpen,
-      startOpen = _ref9$startOpen === void 0 ? false : _ref9$startOpen,
-      resetCallback = _ref9.resetCallback,
-      props = objectWithoutProperties(_ref9, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
+var MultiDropdown = /*#__PURE__*/forwardRef(function (_ref10, ref) {
+  var name = _ref10.name,
+      label = _ref10.label,
+      help = _ref10.help,
+      error = _ref10.error,
+      valid = _ref10.valid,
+      options = _ref10.options,
+      placeholder = _ref10.placeholder,
+      onChange = _ref10.onChange,
+      defaultValue = _ref10.defaultValue,
+      visibleOptionsQty = _ref10.visibleOptionsQty,
+      openTo = _ref10.openTo,
+      _ref10$startOpen = _ref10.startOpen,
+      startOpen = _ref10$startOpen === void 0 ? false : _ref10$startOpen,
+      resetCallback = _ref10.resetCallback,
+      props = objectWithoutProperties(_ref10, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen", "resetCallback"]);
 
   var _useState13 = useState([]),
       _useState14 = slicedToArray(_useState13, 2),
@@ -5502,21 +5540,21 @@ var MultiDropdown = /*#__PURE__*/forwardRef(function (_ref9, ref) {
     }, optionText(item.name));
   })));
 });
-var SingleDropdown = /*#__PURE__*/forwardRef(function (_ref10, ref) {
-  var name = _ref10.name,
-      label = _ref10.label,
-      help = _ref10.help,
-      error = _ref10.error,
-      valid = _ref10.valid,
-      options = _ref10.options,
-      placeholder = _ref10.placeholder,
-      onChange = _ref10.onChange,
-      defaultValue = _ref10.defaultValue,
-      visibleOptionsQty = _ref10.visibleOptionsQty,
-      openTo = _ref10.openTo,
-      _ref10$startOpen = _ref10.startOpen,
-      startOpen = _ref10$startOpen === void 0 ? false : _ref10$startOpen,
-      props = objectWithoutProperties(_ref10, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
+var SingleDropdown = /*#__PURE__*/forwardRef(function (_ref11, ref) {
+  var name = _ref11.name,
+      label = _ref11.label,
+      help = _ref11.help,
+      error = _ref11.error,
+      valid = _ref11.valid,
+      options = _ref11.options,
+      placeholder = _ref11.placeholder,
+      onChange = _ref11.onChange,
+      defaultValue = _ref11.defaultValue,
+      visibleOptionsQty = _ref11.visibleOptionsQty,
+      openTo = _ref11.openTo,
+      _ref11$startOpen = _ref11.startOpen,
+      startOpen = _ref11$startOpen === void 0 ? false : _ref11$startOpen,
+      props = objectWithoutProperties(_ref11, ["name", "label", "help", "error", "valid", "options", "placeholder", "onChange", "defaultValue", "visibleOptionsQty", "openTo", "startOpen"]);
 
   var defaultSelected = {
     value: '',
@@ -5608,9 +5646,9 @@ var SingleDropdown = /*#__PURE__*/forwardRef(function (_ref10, ref) {
     disabled: props.disabled
   }));
 });
-var Dropdown = /*#__PURE__*/forwardRef(function (_ref11, ref) {
-  var multiple = _ref11.multiple,
-      props = objectWithoutProperties(_ref11, ["multiple"]);
+var Dropdown = /*#__PURE__*/forwardRef(function (_ref12, ref) {
+  var multiple = _ref12.multiple,
+      props = objectWithoutProperties(_ref12, ["multiple"]);
 
   return multiple ? /*#__PURE__*/React.createElement(MultiDropdown, _extends_1({
     ref: ref
@@ -5619,17 +5657,17 @@ var Dropdown = /*#__PURE__*/forwardRef(function (_ref11, ref) {
   }, props));
 }); // eslint-disable-next-line react/prop-types
 
-var BoxOptions = function BoxOptions(_ref12) {
-  var options = _ref12.options,
-      isChild = _ref12.isChild,
-      setSelected = _ref12.setSelected,
-      onChange = _ref12.onChange,
-      noOptions = _ref12.noOptions,
-      selectedOpt = _ref12.selectedOpt,
-      setOpen = _ref12.setOpen,
-      onSelect = _ref12.onSelect,
-      visibleOptionsQty = _ref12.visibleOptionsQty,
-      openTo = _ref12.openTo;
+var BoxOptions = function BoxOptions(_ref13) {
+  var options = _ref13.options,
+      isChild = _ref13.isChild,
+      setSelected = _ref13.setSelected,
+      onChange = _ref13.onChange,
+      noOptions = _ref13.noOptions,
+      selectedOpt = _ref13.selectedOpt,
+      setOpen = _ref13.setOpen,
+      onSelect = _ref13.onSelect,
+      visibleOptionsQty = _ref13.visibleOptionsQty,
+      openTo = _ref13.openTo;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(Options$1, null, /*#__PURE__*/React.createElement("li", {
@@ -5701,22 +5739,22 @@ var BoxOptions = function BoxOptions(_ref12) {
     })) : /*#__PURE__*/React.createElement(OptionGroup$1, null, item.name));
   }));
 };
-var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref13, ref) {
-  var name = _ref13.name,
-      label = _ref13.label,
-      help = _ref13.help,
-      error = _ref13.error,
-      valid = _ref13.valid,
-      options = _ref13.options,
-      placeholder = _ref13.placeholder,
-      defaultValue = _ref13.defaultValue,
-      multiple = _ref13.multiple,
-      type = _ref13.type,
-      tooltip = _ref13.tooltip,
-      onChange = _ref13.onChange,
-      visibleOptionsQty = _ref13.visibleOptionsQty,
-      openTo = _ref13.openTo,
-      props = objectWithoutProperties(_ref13, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
+var CustomDropdown = /*#__PURE__*/forwardRef(function (_ref14, ref) {
+  var name = _ref14.name,
+      label = _ref14.label,
+      help = _ref14.help,
+      error = _ref14.error,
+      valid = _ref14.valid,
+      options = _ref14.options,
+      placeholder = _ref14.placeholder,
+      defaultValue = _ref14.defaultValue,
+      multiple = _ref14.multiple,
+      type = _ref14.type,
+      tooltip = _ref14.tooltip,
+      onChange = _ref14.onChange,
+      visibleOptionsQty = _ref14.visibleOptionsQty,
+      openTo = _ref14.openTo,
+      props = objectWithoutProperties(_ref14, ["name", "label", "help", "error", "valid", "options", "placeholder", "defaultValue", "multiple", "type", "tooltip", "onChange", "visibleOptionsQty", "openTo"]);
 
   var _useState17 = useState(false),
       _useState18 = slicedToArray(_useState17, 2),
@@ -5952,16 +5990,16 @@ var HandleState = function HandleState(index, setSelected, selectedOpt, multiple
   setSelected(ret);
 };
 
-var SelectOption = function SelectOption(_ref14) {
-  var options = _ref14.options,
-      setSelected = _ref14.setSelected,
-      selectedOpt = _ref14.selectedOpt,
-      multiple = _ref14.multiple,
-      type = _ref14.type,
-      onChange = _ref14.onChange,
-      noOptions = _ref14.noOptions,
-      visibleOptionsQty = _ref14.visibleOptionsQty,
-      openTo = _ref14.openTo;
+var SelectOption = function SelectOption(_ref15) {
+  var options = _ref15.options,
+      setSelected = _ref15.setSelected,
+      selectedOpt = _ref15.selectedOpt,
+      multiple = _ref15.multiple,
+      type = _ref15.type,
+      onChange = _ref15.onChange,
+      noOptions = _ref15.noOptions,
+      visibleOptionsQty = _ref15.visibleOptionsQty,
+      openTo = _ref15.openTo;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(OptionsPeople, null, /*#__PURE__*/React.createElement("li", null, noOptions || 'No data found'));
@@ -5996,9 +6034,9 @@ var SelectOption = function SelectOption(_ref14) {
   }));
 };
 
-var PhotoComponent = function PhotoComponent(_ref15) {
-  var profile = _ref15.profile,
-      index = _ref15.index;
+var PhotoComponent = function PhotoComponent(_ref16) {
+  var profile = _ref16.profile,
+      index = _ref16.index;
   var customStyle = {
     position: 'relative',
     display: 'inline-flex',
@@ -6022,11 +6060,11 @@ var PhotoComponent = function PhotoComponent(_ref15) {
   }));
 };
 
-var SelectValueRender = function SelectValueRender(_ref16) {
-  var options = _ref16.options,
-      selectedOpt = _ref16.selectedOpt,
-      type = _ref16.type,
-      noOptions = _ref16.noOptions;
+var SelectValueRender = function SelectValueRender(_ref17) {
+  var options = _ref17.options,
+      selectedOpt = _ref17.selectedOpt,
+      type = _ref17.type,
+      noOptions = _ref17.noOptions;
 
   if (!options) {
     return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -8466,7 +8504,7 @@ function _templateObject4$7() {
 }
 
 function _templateObject3$7() {
-  var data = taggedTemplateLiteral(["\n    width: 36px;\n    height: 20px;\n    border-radius: 100px;\n    background: ", ";\n    cursor: pointer;\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    transition: 0.2s;\n\n    &:focus {\n        box-shadow: 0px 0px 6px ", ";\n        border: 1px solid ", ";\n        outline: none;\n    }\n\n    &::after {\n        content: \"\";\n        display: block;\n        border-radius: 100%;\n        width: 12px;\n        height: 12px;\n        margin: 3px;\n        background: ", ";\n        transition: 0.2s;\n    }\n"]);
+  var data = taggedTemplateLiteral(["\n    width: 36px;\n    height: 20px;\n    border-radius: 100px;\n    background: ", ";\n    cursor: pointer;\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    transition: 0.2s;\n    flex-shrink: 0;\n\n    &:focus {\n        box-shadow: 0px 0px 6px ", ";\n        border: 1px solid ", ";\n        outline: none;\n    }\n\n    &::after {\n        content: \"\";\n        display: block;\n        border-radius: 100%;\n        width: 12px;\n        height: 12px;\n        margin: 3px;\n        background: ", ";\n        transition: 0.2s;\n    }\n"]);
 
   _templateObject3$7 = function _templateObject3() {
     return data;