@thecb/components 8.0.4-beta.6 → 8.0.4-beta.7

package/dist/index.d.ts

@@ -285,6 +285,7 @@ interface StackProps {
   childGap?: string;
   bottomItem?: number;
   fullHeight?: boolean;
+  hoverStyles?: string;
   direction?:
     | "row"
     | "row-reverse"

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import React, { createContext, createElement, PureComponent, forwardRef, Component, cloneElement, Children, useContext, Fragment as Fragment$1, useRef, useState, useLayoutEffect, memo, useEffect as useEffect$1, useMemo, useCallback, isValidElement, createRef } from 'react';
-import styled, { ThemeContext, css, ThemeProvider, keyframes as keyframes$3 } from 'styled-components';
+import styled, { ThemeContext, css as css$1, ThemeProvider, keyframes as keyframes$3 } from 'styled-components';
 import theme from 'styled-theming';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import reactDom from 'react-dom';
@@ -5187,11 +5187,11 @@ var TextSpan = styled.span.withConfig({
   return $textWrap ? "initial" : "nowrap";
 }, function (_ref6) {
   var hoverStyles = _ref6.hoverStyles;
-  return css(["", ""], hoverStyles);
+  return css$1(["", ""], hoverStyles);
 }, ROYAL_BLUE, function (_ref7) {
   var disabled = _ref7.disabled,
       disabledStyles = _ref7.disabledStyles;
-  return disabled && css(["", ""], disabledStyles);
+  return disabled && css$1(["", ""], disabledStyles);
 }, function (_ref8) {
   var extraStyles = _ref8.extraStyles;
   return extraStyles;
@@ -6488,27 +6488,27 @@ var BoxWrapper = styled(function (_ref) {
   var hoverStyles = _ref14.hoverStyles,
       as = _ref14.as,
       disabled = _ref14.disabled;
-  return css(["", " ", ""], hoverStyles, as === "button" && !disabled ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return css$1(["", " ", ""], hoverStyles, as === "button" && !disabled ? "> * > span {\n          ".concat(hoverStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref15) {
   var as = _ref15.as;
-  return css(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
+  return css$1(["outline:3px solid ", ";outline-offset:2px;", ""], ROYAL_BLUE, as === "button" && "\n          > * > span {\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }");
 }, function (_ref16) {
   var activeStyles = _ref16.activeStyles,
       as = _ref16.as;
-  return css(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return css$1(["", " ", ""], activeStyles, as === "button" ? "        > * > span {\n          ".concat(activeStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref17) {
   var disabledStyles = _ref17.disabledStyles,
       as = _ref17.as;
-  return css(["", " ", ""], disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
+  return css$1(["", " ", ""], disabledStyles, as === "button" ? "        > * > span {\n          ".concat(disabledStyles, "\n          border: none;\n          outline: none;\n          box-shadow: none;\n        }") : "");
 }, function (_ref18) {
   var color = _ref18.color;
   return color;
 }, function (_ref19) {
   var hiddenStyles = _ref19.hiddenStyles;
-  return hiddenStyles && css(["display:none;"]);
+  return hiddenStyles && css$1(["display:none;"]);
 }, function (_ref20) {
   var extraStyles = _ref20.extraStyles;
-  return css(["", ""], extraStyles);
+  return css$1(["", ""], extraStyles);
 });
 /* eslint-enable no-unused-vars */
 
@@ -6877,10 +6877,11 @@ var Sidebar = function Sidebar(_ref) {
   }, safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null))));
 };
 
+var _templateObject;
 var StackWrapper = styled.div.withConfig({
   displayName: "Stackstyled__StackWrapper",
   componentId: "sc-ejhezz-0"
-})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";"], function (_ref) {
+})(["box-sizing:border-box;display:flex;flex-direction:", ";justify-content:", ";height:", ";> *{margin-top:0;margin-bottom:0;}> * + *{", "}", ";&:hover{", "}"], function (_ref) {
   var direction = _ref.direction;
   return direction;
 }, function (_ref2) {
@@ -6897,9 +6898,12 @@ var StackWrapper = styled.div.withConfig({
   var bottomItem = _ref5.bottomItem,
       direction = _ref5.direction;
   return bottomItem ? "\n    > :nth-child(".concat(bottomItem, ") {\n        ").concat(direction === "row" ? "margin-left: auto;" : "margin-top: auto;", "\n    }\n  ") : "";
+}, function (_ref6) {
+  var hoverStyles = _ref6.hoverStyles;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        ", "\n      "])), hoverStyles);
 });
 
-var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify"];
+var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify", "hoverStyles"];
 /*
   Component to impose margin-top between a list of child elements
   Useful for things like sidebars and button lists
@@ -6920,6 +6924,7 @@ var Stack = function Stack(_ref) {
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? "column" : _ref$direction,
       justify = _ref.justify,
+      hoverStyles = _ref.hoverStyles,
       rest = _objectWithoutProperties(_ref, _excluded$a);
 
   return /*#__PURE__*/React.createElement(StackWrapper, _extends({
@@ -7071,7 +7076,7 @@ var SwitcherInnerContainer = styled.div.withConfig({
   return maxChildren ? "> :nth-last-child(".concat(maxChildren + 1, "), > :nth-last-child(").concat(maxChildren + 1, ") ~ * {\n      flex-basis: 100%;\n    }") : "";
 }, function (_ref9) {
   var extraStyles = _ref9.extraStyles;
-  return css(["", ""], extraStyles);
+  return css$1(["", ""], extraStyles);
 });
 
 var _excluded$d = ["breakpoint", "childGap", "largeChild", "largeChildSize", "maxChildren", "maxChildrenOnly", "padding", "children", "extraStyles", "constrainMobile"];
@@ -21805,7 +21810,7 @@ var CheckboxIcon = styled.svg.withConfig({
   var disabled = _ref.disabled,
       disabledCheckColor = _ref.disabledCheckColor,
       checkColor = _ref.checkColor;
-  return disabled ? css(["", ""], disabledCheckColor) : css(["", ""], checkColor);
+  return disabled ? css$1(["", ""], disabledCheckColor) : css$1(["", ""], checkColor);
 });
 var HiddenCheckbox = styled.input.attrs({
   type: "checkbox"
@@ -21830,7 +21835,7 @@ var StyledCheckbox = styled.div.withConfig({
       errorStyles = _ref3.errorStyles,
       disabledStyles = _ref3.disabledStyles,
       disabledCheckedStyles = _ref3.disabledCheckedStyles;
-  return error ? css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css(["", " ", ""], checkedStyles, focused && focusedStyles) : css(["", " ", ""], defaultStyles, focused && focusedStyles);
+  return error ? css$1(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css$1(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css$1(["", " ", ""], checkedStyles, focused && focusedStyles) : css$1(["", " ", ""], defaultStyles, focused && focusedStyles);
 });
 
 var Checkbox = function Checkbox(_ref4) {
@@ -25608,10 +25613,10 @@ var InputField = styled.input.withConfig({
   return background && "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
 }, ROYAL_BLUE, function (_ref6) {
   var disabled = _ref6.disabled;
-  return disabled && css(["color:#6e727e;background-color:#f7f7f7;"]);
+  return disabled && css$1(["color:#6e727e;background-color:#f7f7f7;"]);
 }, function (_ref7) {
   var $extraStyles = _ref7.$extraStyles;
-  return css(["", ""], $extraStyles);
+  return css$1(["", ""], $extraStyles);
 }); // eslint-disable-next-line no-unused-vars
 
 var FormattedInputField = styled(function (_ref8) {
@@ -25639,10 +25644,10 @@ var FormattedInputField = styled(function (_ref8) {
   return themeValues.color && themeValues.color;
 }, ROYAL_BLUE, function (_ref13) {
   var disabled = _ref13.disabled;
-  return disabled && css(["color:#6e727e;background-color:#f7f7f7;"]);
+  return disabled && css$1(["color:#6e727e;background-color:#f7f7f7;"]);
 }, function (_ref14) {
   var extraStyles = _ref14.extraStyles;
-  return css(["", ""], extraStyles);
+  return css$1(["", ""], extraStyles);
 });
 
 var FormInput = function FormInput(_ref15) {
@@ -26356,7 +26361,7 @@ var SpinnerSvgAnimation = styled.svg.withConfig({
   return color;
 }, function (_ref4) {
   var centerSpinner = _ref4.centerSpinner;
-  return centerSpinner ? css(["margin:0;"]) : "";
+  return centerSpinner ? css$1(["margin:0;"]) : "";
 });
 var SpinnerContainer$2 = styled.div.withConfig({
   displayName: "Spinner__SpinnerContainer",
@@ -26364,7 +26369,7 @@ var SpinnerContainer$2 = styled.div.withConfig({
 })(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
   var centerSpinner = _ref5.centerSpinner,
       size = _ref5.size;
-  return centerSpinner ? css(["width:", "px;height:", "px;"], size, size) : "";
+  return centerSpinner ? css$1(["width:", "px;height:", "px;"], size, size) : "";
 });
 /*
   `centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
@@ -26494,7 +26499,7 @@ var NavHeader = function NavHeader(_ref) {
   }, rightContent))))));
 };
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _DEFAULT_ERROR_MESSAG;
+var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _DEFAULT_ERROR_MESSAG;
 
 var MIN_LENGTH_ERROR = "error/HAS_LENGTH";
 var MAX_LENGTH_ERROR = "max_length_error";
@@ -26535,7 +26540,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject || (_templateObject = _taggedTemplateLiteral(["", " is too short"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " is too long"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " is not the right length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " is not a valid length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["", " is not a valid email address"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", " needs a number"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", " needs an uppercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", " needs a lowercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", " needs a special character"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["", " must be only numbers"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["", " must be only letters"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["", " is required"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["", " is too high"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["", " is too low"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["", " must match ", ""])), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["", " is not a valid option"])), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["", " is too short"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["", " is too long"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["", " is not the right length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["", " is not a valid length"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["", " is not a valid email address"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", " needs a number"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", " needs an uppercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["", " needs a lowercase letter"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["", " needs a special character"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["", " must be only numbers"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["", " must be only letters"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["", " is required"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["", " is too high"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["", " is too low"])), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["", " must match ", ""])), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["", " is not a valid option"])), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error