@thecb/components 9.1.7-beta.0 → 9.1.7-beta.2

package/dist/index.cjs.js

@@ -18739,6 +18739,10 @@ var generateShadows = function generateShadows() {
     overlay: overlay
   };
 };
+var addOpacity = function addOpacity(color, opacity, r, g, b) {
+  var rgba = "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+  return "linear-gradient(0deg, ".concat(rgba, ", ").concat(rgba, "), linear-gradient(0deg, ").concat(color, ", ").concat(color, ");");
+};
 
 var Alert = function Alert(_ref) {
   var _generateShadows, _generateShadows$inse;
@@ -23766,58 +23770,81 @@ var DropdownContentWrapper = styled__default.div.withConfig({
 var DropdownItemWrapper = styled__default.li.withConfig({
   displayName: "Dropdown__DropdownItemWrapper",
   componentId: "sc-pn6m0h-2"
-})(["text-align:start;border-width:2px;border-color:transparent;box-shadow:none;padding:1rem;box-sizing:border-box;width:100%;list-style:none;cursor:", ";&:hover{border-color:themeValues.selectedColor;}&:focus{outline:none;border-color:themeValues.selectedColor;}"], function (_ref4) {
-  var disabled = _ref4.disabled;
+})(["text-align:start;border-width:2px;border-style:solid;border-color:", ";box-shadow:none;box-sizing:border-box;width:100%;list-style:none;cursor:", ";&:hover{background:", ";> *{background:", ";border-color:", ";}}&:focus{outline:none;background:", ";border-color:", ";> *{background:", ";border-color:white;outline:none;}}"], function (_ref4) {
+  var selected = _ref4.selected,
+      themeValues = _ref4.themeValues;
+  return selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : TRANSPARENT;
+}, function (_ref5) {
+  var disabled = _ref5.disabled;
   return disabled ? "default" : "pointer";
-}); // ${({ selected, themeValues }) =>
-// selected ? themeValues.selectedColor : TRANSPARENT};
-
-var DropdownItemBorder = styled__default.div.withConfig({
-  displayName: "Dropdown__DropdownItemBorder",
-  componentId: "sc-pn6m0h-3"
-})(["background-color:", ";border-width:2px;border-color:white;width:100%;&:hover{background-color:", ";}&:focus{background-color:", ";outline:none;}"], function (_ref5) {
-  var selected = _ref5.selected,
-      themeValues = _ref5.themeValues;
-  return selected ? themeValues.selectedColor : WHITE;
 }, function (_ref6) {
   var selected = _ref6.selected,
       disabled = _ref6.disabled,
       themeValues = _ref6.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref7) {
   var selected = _ref7.selected,
       disabled = _ref7.disabled,
       themeValues = _ref7.themeValues;
-  return selected ? themeValues.selectedColor : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : disabled ? WHITE : themeValues.hoverColor;
+}, function (_ref8) {
+  var selected = _ref8.selected,
+      themeValues = _ref8.themeValues;
+  return selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : themeValues.hoverColor;
+}, function (_ref9) {
+  var selected = _ref9.selected,
+      themeValues = _ref9.themeValues;
+  return selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : "";
+}, function (_ref10) {
+  var selected = _ref10.selected,
+      themeValues = _ref10.themeValues;
+  return selected ? TRANSPARENT : themeValues.selectedColor;
+}, function (_ref11) {
+  var selected = _ref11.selected,
+      disabled = _ref11.disabled,
+      themeValues = _ref11.themeValues;
+  return selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : disabled ? WHITE : themeValues.hoverColor;
+});
+var DropdownItemBorder = styled__default.div.withConfig({
+  displayName: "Dropdown__DropdownItemBorder",
+  componentId: "sc-pn6m0h-3"
+})(["background:", ";border-color:", ";border-width:2px;border-style:solid;padding:12px;"], function (_ref12) {
+  var selected = _ref12.selected,
+      themeValues = _ref12.themeValues;
+  return selected ? themeValues.selectedColor : WHITE;
+}, function (_ref13) {
+  var selected = _ref13.selected,
+      themeValues = _ref13.themeValues;
+  return selected ? themeValues.selectedColor : WHITE;
 });
 
-var Dropdown = function Dropdown(_ref8) {
-  var placeholder = _ref8.placeholder,
-      options = _ref8.options,
-      value = _ref8.value,
-      isOpen = _ref8.isOpen,
-      isError = _ref8.isError,
-      onSelect = _ref8.onSelect,
-      _ref8$disabledValues = _ref8.disabledValues,
-      disabledValues = _ref8$disabledValues === void 0 ? [] : _ref8$disabledValues,
-      _ref8$onClick = _ref8.onClick,
-      _onClick = _ref8$onClick === void 0 ? noop : _ref8$onClick,
-      themeValues = _ref8.themeValues,
-      maxHeight = _ref8.maxHeight,
-      _ref8$widthFitOptions = _ref8.widthFitOptions,
-      widthFitOptions = _ref8$widthFitOptions === void 0 ? false : _ref8$widthFitOptions,
-      disabled = _ref8.disabled,
-      _ref8$hasTitles = _ref8.hasTitles,
-      hasTitles = _ref8$hasTitles === void 0 ? false : _ref8$hasTitles,
-      _ref8$autoEraseTypeAh = _ref8.autoEraseTypeAhead,
-      autoEraseTypeAhead = _ref8$autoEraseTypeAh === void 0 ? true : _ref8$autoEraseTypeAh,
-      ariaLabelledby = _ref8.ariaLabelledby,
-      ariaDescribedby = _ref8.ariaDescribedby,
-      autocompleteValue = _ref8.autocompleteValue,
-      _ref8$smoothScroll = _ref8.smoothScroll,
-      smoothScroll = _ref8$smoothScroll === void 0 ? true : _ref8$smoothScroll,
-      _ref8$ariaInvalid = _ref8.ariaInvalid,
-      ariaInvalid = _ref8$ariaInvalid === void 0 ? false : _ref8$ariaInvalid;
+var Dropdown = function Dropdown(_ref14) {
+  var placeholder = _ref14.placeholder,
+      options = _ref14.options,
+      value = _ref14.value,
+      isOpen = _ref14.isOpen,
+      isError = _ref14.isError,
+      onSelect = _ref14.onSelect,
+      _ref14$disabledValues = _ref14.disabledValues,
+      disabledValues = _ref14$disabledValues === void 0 ? [] : _ref14$disabledValues,
+      _ref14$onClick = _ref14.onClick,
+      _onClick = _ref14$onClick === void 0 ? noop : _ref14$onClick,
+      themeValues = _ref14.themeValues,
+      maxHeight = _ref14.maxHeight,
+      _ref14$widthFitOption = _ref14.widthFitOptions,
+      widthFitOptions = _ref14$widthFitOption === void 0 ? false : _ref14$widthFitOption,
+      disabled = _ref14.disabled,
+      _ref14$hasTitles = _ref14.hasTitles,
+      hasTitles = _ref14$hasTitles === void 0 ? false : _ref14$hasTitles,
+      _ref14$autoEraseTypeA = _ref14.autoEraseTypeAhead,
+      autoEraseTypeAhead = _ref14$autoEraseTypeA === void 0 ? true : _ref14$autoEraseTypeA,
+      ariaLabelledby = _ref14.ariaLabelledby,
+      ariaDescribedby = _ref14.ariaDescribedby,
+      autocompleteValue = _ref14.autocompleteValue,
+      _ref14$smoothScroll = _ref14.smoothScroll,
+      smoothScroll = _ref14$smoothScroll === void 0 ? true : _ref14$smoothScroll,
+      _ref14$ariaInvalid = _ref14.ariaInvalid,
+      ariaInvalid = _ref14$ariaInvalid === void 0 ? false : _ref14$ariaInvalid;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -24140,7 +24167,9 @@ var Dropdown = function Dropdown(_ref8) {
         return setFocusedRef(optionRefs.current[i]);
       }
     }, /*#__PURE__*/React__default.createElement(DropdownItemBorder, {
-      selected: choice.value === value
+      disabled: disabledValues.includes(choice.value),
+      selected: choice.value === value,
+      themeValues: themeValues
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: choice.value === value ? WHITE : disabledValues.includes(choice.value) ? STORM_GREY : MINESHAFT_GREY,