@thecb/components 9.1.7-beta.3 → 9.1.7-beta.5

package/dist/index.cjs.js

@@ -18686,22 +18686,12 @@ var fallbackValues$4 = {
   link: link
 };
 
-/* 
-
-A utility function that can generate box-shadow values for components
-Takes a string representing an rgb color value and returns an object
-with values for standard, inset, and overlay shadows.
-
-The objects for standard and inset shadows contain versions approiate
-for base, hover, and active interaction states.
-
-*/
-
 /* 
   Function to convert string representing rgb color to rgba value with provided opacity
   ("rgb(41, 42, 51)", "0.1") => "rgba(41, 42, 51, 0.1)"
 
 */
+
 var rgbToRgba = function rgbToRgba() {
   var rgbValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
   var opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
@@ -18712,6 +18702,17 @@ var rgbToRgba = function rgbToRgba() {
 
   return "".concat(rgbValue.slice(0, 3), "a").concat(rgbValue.slice(3, -1), ", ").concat(opacity).concat(rgbValue.slice(-1));
 };
+/*
+
+A utility function that can generate box-shadow values for components
+Takes a string representing an rgb color value and returns an object
+with values for standard, inset, and overlay shadows.
+
+The objects for standard and inset shadows contain versions approiate
+for base, hover, and active interaction states.
+
+*/
+
 
 var generateShadows = function generateShadows() {
   var baseColorRGB = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "rgb(41, 42, 51)";
@@ -18739,9 +18740,43 @@ 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, ");");
+/* 
+  Function to convert a string representing hex color to rgb color  
+    hexToRbg("#00ff00") => [0, 255, 0]
+*/
+
+var hexToRbg = function hexToRbg(hexColor) {
+  var hexArr = hexColor.replace("#", "");
+  var red = parseInt(hexArr.slice(0, 2), 16);
+  var green = parseInt(hexArr.slice(2, 4), 16);
+  var blue = parseInt(hexArr.slice(4, 6), 16);
+  return [red, green, blue];
+};
+/*
+  Function to calculate a new hex color given an original
+  hex color, a hex background color, and an opacity number
+  between 0 and 1 to apply to the background.
+
+  For example, to add a 20% black opacity (20% darker) to a green color
+  ("#00ff00"):
+  addOpacityToHex("00ff00", "#000000", .2) => "rgb(0, 204, 0)"
+*/
+
+
+var addOpacityToHex = function addOpacityToHex(hexColor, background, opacity) {
+  if (hexColor == TRANSPARENT) {
+    return hexColor;
+  }
+
+  var color = hexToRbg(hexColor);
+  var backgroundRbg = hexToRbg(background);
+  var newColor = color.map(function (colorElem, index) {
+    return Math.floor(opacity * backgroundRbg[index] + (1 - opacity) * colorElem);
+  });
+  return "rgb(".concat(newColor[0], ", ").concat(newColor[1], ", ").concat(newColor[2], ")");
+};
+var darken = function darken(hexColor, opacity) {
+  return addOpacityToHex(hexColor, "#000000", opacity);
 };
 
 var Alert = function Alert(_ref) {
@@ -23770,7 +23805,7 @@ var DropdownContentWrapper = styled__default.div.withConfig({
 var DropdownItemWrapper = styled__default.li.withConfig({
   displayName: "Dropdown__DropdownItemWrapper",
   componentId: "sc-pn6m0h-2"
-})(["text-align:start;background:", ";border-width:2px;border-style:solid;border-color:transparent;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) {
+})(["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{border-color:", ";> *{background:", ";border-color:", ";}}&:focus{outline:none;border-color:", ";> *{background:", ";border-color:white;outline:none;}}"], function (_ref4) {
   var selected = _ref4.selected,
       themeValues = _ref4.themeValues;
   return selected ? themeValues.selectedColor : WHITE;
@@ -23778,73 +23813,69 @@ var DropdownItemWrapper = styled__default.li.withConfig({
   var disabled = _ref5.disabled;
   return disabled ? "default" : "pointer";
 }, function (_ref6) {
-  var selected = _ref6.selected,
-      disabled = _ref6.disabled,
+  var disabled = _ref6.disabled,
+      selected = _ref6.selected,
       themeValues = _ref6.themeValues;
-  return selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? darken(themeValues.selectedColor, 0.2) : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref7) {
   var selected = _ref7.selected,
       disabled = _ref7.disabled,
       themeValues = _ref7.themeValues;
-  return selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : disabled ? WHITE : themeValues.hoverColor;
+  return selected ? darken(themeValues.selectedColor, 0.2) : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref8) {
   var selected = _ref8.selected,
+      disabled = _ref8.disabled,
       themeValues = _ref8.themeValues;
-  return selected ? TRANSPARENT : themeValues.hoverColor;
+  return selected ? darken(themeValues.selectedColor, 0.2) : disabled ? WHITE : themeValues.hoverColor;
 }, function (_ref9) {
-  var selected = _ref9.selected,
-      themeValues = _ref9.themeValues;
-  return selected ? addOpacity(themeValues.selectedColor, 0.2, 0, 0, 0) : "";
+  var themeValues = _ref9.themeValues;
+  return themeValues.selectedColor;
 }, function (_ref10) {
   var selected = _ref10.selected,
+      disabled = _ref10.disabled,
       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;
+  return selected ? darken(themeValues.selectedColor, 0.2) : 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) {
+})(["background:", ";border-color:", ";border-width:2px;border-style:solid;padding:12px;"], function (_ref11) {
+  var selected = _ref11.selected,
+      themeValues = _ref11.themeValues;
+  return selected ? themeValues.selectedColor : WHITE;
+}, 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(_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 Dropdown = function Dropdown(_ref13) {
+  var placeholder = _ref13.placeholder,
+      options = _ref13.options,
+      value = _ref13.value,
+      isOpen = _ref13.isOpen,
+      isError = _ref13.isError,
+      onSelect = _ref13.onSelect,
+      _ref13$disabledValues = _ref13.disabledValues,
+      disabledValues = _ref13$disabledValues === void 0 ? [] : _ref13$disabledValues,
+      _ref13$onClick = _ref13.onClick,
+      _onClick = _ref13$onClick === void 0 ? noop : _ref13$onClick,
+      themeValues = _ref13.themeValues,
+      maxHeight = _ref13.maxHeight,
+      _ref13$widthFitOption = _ref13.widthFitOptions,
+      widthFitOptions = _ref13$widthFitOption === void 0 ? false : _ref13$widthFitOption,
+      disabled = _ref13.disabled,
+      _ref13$hasTitles = _ref13.hasTitles,
+      hasTitles = _ref13$hasTitles === void 0 ? false : _ref13$hasTitles,
+      _ref13$autoEraseTypeA = _ref13.autoEraseTypeAhead,
+      autoEraseTypeAhead = _ref13$autoEraseTypeA === void 0 ? true : _ref13$autoEraseTypeA,
+      ariaLabelledby = _ref13.ariaLabelledby,
+      ariaDescribedby = _ref13.ariaDescribedby,
+      autocompleteValue = _ref13.autocompleteValue,
+      _ref13$smoothScroll = _ref13.smoothScroll,
+      smoothScroll = _ref13$smoothScroll === void 0 ? true : _ref13$smoothScroll,
+      _ref13$ariaInvalid = _ref13.ariaInvalid,
+      ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid;
 
   var _useState = React.useState(""),
       _useState2 = _slicedToArray(_useState, 2),