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

package/dist/index.esm.js

@@ -18852,9 +18852,9 @@ var AgencyIcon = function AgencyIcon(_ref) {
 var _excluded$m = ["width", "height", "color"];
 var PersonIcon = function PersonIcon(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? "14" : _ref$width,
+    width = _ref$width === void 0 ? "20" : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? "15" : _ref$height,
+    height = _ref$height === void 0 ? "21" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? CHARADE_GREY : _ref$color,
     props = _objectWithoutProperties(_ref, _excluded$m);
@@ -18867,7 +18867,7 @@ var PersonIcon = function PersonIcon(_ref) {
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M12.25 1.8125H1.75C1.50838 1.8125 1.3125 2.00838 1.3125 2.25V12.75C1.3125 12.9916 1.50838 13.1875 1.75 13.1875H2.625V11.7778C2.625 9.89848 4.02411 8.375 5.75 8.375H8.25C9.97589 8.375 11.375 9.89848 11.375 11.7778V13.1875H12.25C12.4916 13.1875 12.6875 12.9916 12.6875 12.75V2.25C12.6875 2.00838 12.4916 1.8125 12.25 1.8125ZM1.75 14.5H2.625H11.375H12.25C13.2165 14.5 14 13.7165 14 12.75V2.25C14 1.2835 13.2165 0.5 12.25 0.5H1.75C0.783502 0.5 0 1.2835 0 2.25V12.75C0 13.7165 0.783502 14.5 1.75 14.5ZM7 7.5C8.20812 7.5 9.1875 6.52062 9.1875 5.3125C9.1875 4.10438 8.20812 3.125 7 3.125C5.79188 3.125 4.8125 4.10438 4.8125 5.3125C4.8125 6.52062 5.79188 7.5 7 7.5Z",
+    d: "M15.25 4.8125H4.75C4.50838 4.8125 4.3125 5.00838 4.3125 5.25V15.75C4.3125 15.9916 4.50838 16.1875 4.75 16.1875H5.625V14.7778C5.625 12.8985 7.02411 11.375 8.75 11.375H11.25C12.9759 11.375 14.375 12.8985 14.375 14.7778V16.1875H15.25C15.4916 16.1875 15.6875 15.9916 15.6875 15.75V5.25C15.6875 5.00838 15.4916 4.8125 15.25 4.8125ZM4.75 17.5H5.625H14.375H15.25C16.2165 17.5 17 16.7165 17 15.75V5.25C17 4.2835 16.2165 3.5 15.25 3.5H4.75C3.7835 3.5 3 4.2835 3 5.25V15.75C3 16.7165 3.7835 17.5 4.75 17.5ZM10 10.5C11.2081 10.5 12.1875 9.52062 12.1875 8.3125C12.1875 7.10438 11.2081 6.125 10 6.125C8.79188 6.125 7.8125 7.10438 7.8125 8.3125C7.8125 9.52062 8.79188 10.5 10 10.5Z",
     fill: color
   }));
 };
@@ -23197,7 +23197,7 @@ var errorStyles = {
   "default": "border: 1px solid ".concat(RED, ";")
 };
 var focusedStyles = {
-  "default": "box-shadow: 0 0 5px 0 ".concat(MATISSE_BLUE, ";")
+  "default": "\n    outline: 3px solid ".concat(ROYAL_BLUE, "; \n    outline-offset: 3px;\n  ")
 };
 var disabledCheckedStyles = {
   "default": "\n  background: #6d717e;\n  border: 1px solid #6d717e;\n"
@@ -23243,7 +23243,7 @@ var CheckboxContainer = styled.span.withConfig({
 var CheckboxLabelContainer = styled.label.withConfig({
   displayName: "Checkbox__CheckboxLabelContainer",
   componentId: "sc-36kqbv-1"
-})(["display:flex;align-items:center;column-gap:1rem;"]);
+})(["display:flex;align-items:center;column-gap:1rem;cursor:pointer;"]);
 var CheckboxIcon = styled.svg.withConfig({
   displayName: "Checkbox__CheckboxIcon",
   componentId: "sc-36kqbv-2"
@@ -23333,7 +23333,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref5, ref) {
     },
     hiddenStyles: hidden,
     background: themeValues.backgroundColor,
-    extraStyles: "outline: none; ".concat(extraStyles, "; margin: ").concat(checkboxMargin, ";")
+    extraStyles: "\n          :focus {\n            outline: 0;\n          }\n          ".concat(extraStyles, "; \n          margin: ").concat(checkboxMargin, ";\n        ")
   }, rest), /*#__PURE__*/React.createElement(CheckboxLabelContainer, {
     "data-qa": dataQa
   }, /*#__PURE__*/React.createElement(CheckboxContainer, {
@@ -50510,11 +50510,15 @@ var PopupMenu = function PopupMenu(_ref) {
 };
 var PopupMenu$1 = themeComponent(PopupMenu, "PopupMenu", fallbackValues$Z);
 
-var primaryColor$1 = INFO_BLUE;
+var primaryColor$1 = WHITE;
+var primaryHoverColor = INFO_BLUE;
 var secondaryColor = MATISSE_BLUE;
+var secondaryHoverColor = "#115D7E";
 var fallbackValues$_ = {
   primaryColor: primaryColor$1,
-  secondaryColor: secondaryColor
+  primaryHoverColor: primaryHoverColor,
+  secondaryColor: secondaryColor,
+  secondaryHoverColor: secondaryHoverColor
 };
 
 var StyledFilterContainer = styled(Box).withConfig({
@@ -50539,11 +50543,15 @@ var FilterButton = styled(ButtonWithAction).withConfig({
   displayName: "MultipleSelectFilterstyled__FilterButton",
   componentId: "sc-126xgc2-2"
 })(["min-width:auto;min-height:2.3125rem;margin:0;padding:0.5rem;border-radius:0.25rem;box-shadow:0px 1px 2px 0px rgba(41,42,51,0.1);", " ", ""], function (_ref) {
-  var textColor = _ref.textColor;
-  return "\n    color: ".concat(textColor, ";\n  ");
+  var opened = _ref.opened,
+    textColor = _ref.textColor,
+    textHoverColor = _ref.textHoverColor;
+  return "\n    color: ".concat(opened ? textHoverColor : textColor, ";\n    :hover,\n    :active,\n    :focus {\n      color: ").concat(textHoverColor, ";\n      > * {\n        color: ").concat(textHoverColor, ";\n      }\n    }\n  ");
 }, function (_ref2) {
-  var backgroundColor = _ref2.backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    :hover,\n    :active,\n    :focus {\n      background-color: ").concat(backgroundColor, ";\n    }\n  ");
+  var opened = _ref2.opened,
+    backgroundColor = _ref2.backgroundColor,
+    backgroundHoverColor = _ref2.backgroundHoverColor;
+  return "\n    background-color: ".concat(opened ? backgroundHoverColor : backgroundColor, ";  \n    :hover,\n    :active,\n    :focus {\n      background-color: ").concat(backgroundHoverColor, ";\n    }\n  ");
 });
 var StyledFilterButton = /*#__PURE__*/forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(FilterButton, _extends({
@@ -50622,7 +50630,9 @@ var FilterButton$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action = _ref$action === void 0 ? noop$1 : _ref$action,
     opened = _ref.opened,
     backgroundColor = _ref.backgroundColor,
-    contentColor = _ref.contentColor,
+    backgroundHoverColor = _ref.backgroundHoverColor,
+    textColor = _ref.textColor,
+    textHoverColor = _ref.textHoverColor,
     name = _ref.name,
     filterDropdownID = _ref.filterDropdownID,
     _ref$hasIcon = _ref.hasIcon,
@@ -50642,6 +50652,10 @@ var FilterButton$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "aria-expanded": opened,
     "aria-controls": filterDropdownID,
     backgroundColor: backgroundColor,
+    backgroundHoverColor: backgroundHoverColor,
+    textColor: textColor,
+    textHoverColor: textHoverColor,
+    opened: opened,
     dataQa: "".concat(name, "-filter-button"),
     extraStyles: extraStyles,
     "aria-label": "".concat(filterLabel, " Filter: ").concat(btnTextFilterDescription, " ").concat(btnTextItemsDescription),
@@ -50654,7 +50668,7 @@ var FilterButton$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     intrinsic: true
   }, hasIcon && /*#__PURE__*/React.createElement(Icon, {
-    color: contentColor
+    color: opened ? textHoverColor : textColor
   }), /*#__PURE__*/React.createElement(Center, {
     as: "span",
     style: {
@@ -50665,13 +50679,13 @@ var FilterButton$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
     intrinsic: true
   }, /*#__PURE__*/React.createElement(Text$1, {
     variant: "pS",
-    color: contentColor,
+    color: opened ? textHoverColor : textColor,
     extraStyles: "\n                  white-space: nowrap;\n                  overflow: hidden;\n                  text-overflow: ellipsis;\n                  ".concat(truncateBtnTextWidth && "max-width:" + truncateBtnTextWidth, "\n                ")
   }, btnTextFilterDescription), /*#__PURE__*/React.createElement(Text$1, {
-    color: contentColor,
+    color: opened ? textHoverColor : textColor,
     variant: "pS"
   }, btnTextItemsDescription)), /*#__PURE__*/React.createElement(DropdownIconV2, {
-    color: contentColor
+    color: opened ? textHoverColor : textColor
   })));
 });
 
@@ -50786,7 +50800,7 @@ var FilterableListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     textExtraStyles: "font-size: 0.875rem; margin: 0;",
     disabled: disabled,
-    extraStyles: "\n          padding: 0.375rem 0.625rem; \n          margin: 0;\n          :hover,\n          :active,\n          :focus {\n            background-color: ".concat(themeValues.primaryColor, ";\n            outline-offset: -3px;\n          }\n          ").concat(showDivider && dividerStyles, "\n          ").concat(extraStyles, "\n        "),
+    extraStyles: "\n          padding: 0.375rem 0.625rem; \n          margin: 0;\n          :hover,\n          :active,\n          :focus {\n            background-color: ".concat(themeValues.primaryHoverColor, ";\n          }\n          ").concat(showDivider && dividerStyles, "\n          ").concat(extraStyles, "\n        "),
     checkboxMargin: showDivider ? "0 0 1rem" : "0",
     hasIconOverride: true,
     icon: CheckboxCheckmarkIcon,
@@ -51094,8 +51108,10 @@ var MultipleSelectFilter = function MultipleSelectFilter(_ref) {
       setOpened(!opened);
     },
     opened: opened,
-    backgroundColor: opened ? themeValues.primaryColor : selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? themeValues.secondaryColor : WHITE,
-    contentColor: !opened && selectedOptions !== null && selectedOptions !== void 0 && selectedOptions.length ? WHITE : CHARADE_GREY,
+    backgroundHoverColor: appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length ? themeValues.secondaryHoverColor : themeValues.primaryHoverColor,
+    backgroundColor: appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length ? themeValues.secondaryColor : themeValues.primaryColor,
+    textColor: appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length ? WHITE : CHARADE_GREY,
+    textHoverColor: opened && !(appliedOptions !== null && appliedOptions !== void 0 && appliedOptions.length) ? CHARADE_GREY : WHITE,
     name: name,
     filterDropdownID: filterDropdownID,
     hasIcon: hasIcon,