@thecb/components 8.0.4-beta.7 → 8.0.4-beta.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
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';
|
|
2
|
-
import styled, { ThemeContext, css
|
|
2
|
+
import styled, { ThemeContext, css, ThemeProvider, keyframes as keyframes$3 } from 'styled-components';
|
|
3
3
|
import theme from 'styled-theming';
|
|
4
4
|
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
|
5
5
|
import reactDom from 'react-dom';
|
|
@@ -5187,11 +5187,11 @@ var TextSpan = styled.span.withConfig({
|
|
|
5187
5187
|
return $textWrap ? "initial" : "nowrap";
|
|
5188
5188
|
}, function (_ref6) {
|
|
5189
5189
|
var hoverStyles = _ref6.hoverStyles;
|
|
5190
|
-
return css
|
|
5190
|
+
return css(["", ""], hoverStyles);
|
|
5191
5191
|
}, ROYAL_BLUE, function (_ref7) {
|
|
5192
5192
|
var disabled = _ref7.disabled,
|
|
5193
5193
|
disabledStyles = _ref7.disabledStyles;
|
|
5194
|
-
return disabled && css
|
|
5194
|
+
return disabled && css(["", ""], disabledStyles);
|
|
5195
5195
|
}, function (_ref8) {
|
|
5196
5196
|
var extraStyles = _ref8.extraStyles;
|
|
5197
5197
|
return extraStyles;
|
|
@@ -6488,27 +6488,27 @@ var BoxWrapper = styled(function (_ref) {
|
|
|
6488
6488
|
var hoverStyles = _ref14.hoverStyles,
|
|
6489
6489
|
as = _ref14.as,
|
|
6490
6490
|
disabled = _ref14.disabled;
|
|
6491
|
-
return css
|
|
6491
|
+
return css(["", " ", ""], hoverStyles, as === "button" && !disabled ? "> * > span {\n ".concat(hoverStyles, "\n border: none;\n outline: none;\n box-shadow: none;\n }") : "");
|
|
6492
6492
|
}, function (_ref15) {
|
|
6493
6493
|
var as = _ref15.as;
|
|
6494
|
-
return css
|
|
6494
|
+
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 }");
|
|
6495
6495
|
}, function (_ref16) {
|
|
6496
6496
|
var activeStyles = _ref16.activeStyles,
|
|
6497
6497
|
as = _ref16.as;
|
|
6498
|
-
return css
|
|
6498
|
+
return css(["", " ", ""], activeStyles, as === "button" ? " > * > span {\n ".concat(activeStyles, "\n border: none;\n outline: none;\n box-shadow: none;\n }") : "");
|
|
6499
6499
|
}, function (_ref17) {
|
|
6500
6500
|
var disabledStyles = _ref17.disabledStyles,
|
|
6501
6501
|
as = _ref17.as;
|
|
6502
|
-
return css
|
|
6502
|
+
return css(["", " ", ""], disabledStyles, as === "button" ? " > * > span {\n ".concat(disabledStyles, "\n border: none;\n outline: none;\n box-shadow: none;\n }") : "");
|
|
6503
6503
|
}, function (_ref18) {
|
|
6504
6504
|
var color = _ref18.color;
|
|
6505
6505
|
return color;
|
|
6506
6506
|
}, function (_ref19) {
|
|
6507
6507
|
var hiddenStyles = _ref19.hiddenStyles;
|
|
6508
|
-
return hiddenStyles && css
|
|
6508
|
+
return hiddenStyles && css(["display:none;"]);
|
|
6509
6509
|
}, function (_ref20) {
|
|
6510
6510
|
var extraStyles = _ref20.extraStyles;
|
|
6511
|
-
return css
|
|
6511
|
+
return css(["", ""], extraStyles);
|
|
6512
6512
|
});
|
|
6513
6513
|
/* eslint-enable no-unused-vars */
|
|
6514
6514
|
|
|
@@ -6877,7 +6877,6 @@ var Sidebar = function Sidebar(_ref) {
|
|
|
6877
6877
|
}, safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null))));
|
|
6878
6878
|
};
|
|
6879
6879
|
|
|
6880
|
-
var _templateObject;
|
|
6881
6880
|
var StackWrapper = styled.div.withConfig({
|
|
6882
6881
|
displayName: "Stackstyled__StackWrapper",
|
|
6883
6882
|
componentId: "sc-ejhezz-0"
|
|
@@ -6900,7 +6899,7 @@ var StackWrapper = styled.div.withConfig({
|
|
|
6900
6899
|
return bottomItem ? "\n > :nth-child(".concat(bottomItem, ") {\n ").concat(direction === "row" ? "margin-left: auto;" : "margin-top: auto;", "\n }\n ") : "";
|
|
6901
6900
|
}, function (_ref6) {
|
|
6902
6901
|
var hoverStyles = _ref6.hoverStyles;
|
|
6903
|
-
return css(
|
|
6902
|
+
return css(["", ""], hoverStyles);
|
|
6904
6903
|
});
|
|
6905
6904
|
|
|
6906
6905
|
var _excluded$a = ["childGap", "bottomItem", "fullHeight", "children", "direction", "justify", "hoverStyles"];
|
|
@@ -6932,7 +6931,8 @@ var Stack = function Stack(_ref) {
|
|
|
6932
6931
|
bottomItem: bottomItem,
|
|
6933
6932
|
fullHeight: fullHeight,
|
|
6934
6933
|
direction: direction,
|
|
6935
|
-
justify: justify
|
|
6934
|
+
justify: justify,
|
|
6935
|
+
hoverStyles: hoverStyles
|
|
6936
6936
|
}, rest), safeChildren(children, /*#__PURE__*/React.createElement(Fragment$1, null)));
|
|
6937
6937
|
};
|
|
6938
6938
|
|
|
@@ -7076,7 +7076,7 @@ var SwitcherInnerContainer = styled.div.withConfig({
|
|
|
7076
7076
|
return maxChildren ? "> :nth-last-child(".concat(maxChildren + 1, "), > :nth-last-child(").concat(maxChildren + 1, ") ~ * {\n flex-basis: 100%;\n }") : "";
|
|
7077
7077
|
}, function (_ref9) {
|
|
7078
7078
|
var extraStyles = _ref9.extraStyles;
|
|
7079
|
-
return css
|
|
7079
|
+
return css(["", ""], extraStyles);
|
|
7080
7080
|
});
|
|
7081
7081
|
|
|
7082
7082
|
var _excluded$d = ["breakpoint", "childGap", "largeChild", "largeChildSize", "maxChildren", "maxChildrenOnly", "padding", "children", "extraStyles", "constrainMobile"];
|
|
@@ -21810,7 +21810,7 @@ var CheckboxIcon = styled.svg.withConfig({
|
|
|
21810
21810
|
var disabled = _ref.disabled,
|
|
21811
21811
|
disabledCheckColor = _ref.disabledCheckColor,
|
|
21812
21812
|
checkColor = _ref.checkColor;
|
|
21813
|
-
return disabled ? css
|
|
21813
|
+
return disabled ? css(["", ""], disabledCheckColor) : css(["", ""], checkColor);
|
|
21814
21814
|
});
|
|
21815
21815
|
var HiddenCheckbox = styled.input.attrs({
|
|
21816
21816
|
type: "checkbox"
|
|
@@ -21835,7 +21835,7 @@ var StyledCheckbox = styled.div.withConfig({
|
|
|
21835
21835
|
errorStyles = _ref3.errorStyles,
|
|
21836
21836
|
disabledStyles = _ref3.disabledStyles,
|
|
21837
21837
|
disabledCheckedStyles = _ref3.disabledCheckedStyles;
|
|
21838
|
-
return error ? css
|
|
21838
|
+
return error ? css(["", " ", ""], errorStyles, focused && focusedStyles) : disabled ? css(["", ""], checked ? disabledCheckedStyles : disabledStyles) : checked ? css(["", " ", ""], checkedStyles, focused && focusedStyles) : css(["", " ", ""], defaultStyles, focused && focusedStyles);
|
|
21839
21839
|
});
|
|
21840
21840
|
|
|
21841
21841
|
var Checkbox = function Checkbox(_ref4) {
|
|
@@ -25613,10 +25613,10 @@ var InputField = styled.input.withConfig({
|
|
|
25613
25613
|
return background && "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
|
|
25614
25614
|
}, ROYAL_BLUE, function (_ref6) {
|
|
25615
25615
|
var disabled = _ref6.disabled;
|
|
25616
|
-
return disabled && css
|
|
25616
|
+
return disabled && css(["color:#6e727e;background-color:#f7f7f7;"]);
|
|
25617
25617
|
}, function (_ref7) {
|
|
25618
25618
|
var $extraStyles = _ref7.$extraStyles;
|
|
25619
|
-
return css
|
|
25619
|
+
return css(["", ""], $extraStyles);
|
|
25620
25620
|
}); // eslint-disable-next-line no-unused-vars
|
|
25621
25621
|
|
|
25622
25622
|
var FormattedInputField = styled(function (_ref8) {
|
|
@@ -25644,10 +25644,10 @@ var FormattedInputField = styled(function (_ref8) {
|
|
|
25644
25644
|
return themeValues.color && themeValues.color;
|
|
25645
25645
|
}, ROYAL_BLUE, function (_ref13) {
|
|
25646
25646
|
var disabled = _ref13.disabled;
|
|
25647
|
-
return disabled && css
|
|
25647
|
+
return disabled && css(["color:#6e727e;background-color:#f7f7f7;"]);
|
|
25648
25648
|
}, function (_ref14) {
|
|
25649
25649
|
var extraStyles = _ref14.extraStyles;
|
|
25650
|
-
return css
|
|
25650
|
+
return css(["", ""], extraStyles);
|
|
25651
25651
|
});
|
|
25652
25652
|
|
|
25653
25653
|
var FormInput = function FormInput(_ref15) {
|
|
@@ -26361,7 +26361,7 @@ var SpinnerSvgAnimation = styled.svg.withConfig({
|
|
|
26361
26361
|
return color;
|
|
26362
26362
|
}, function (_ref4) {
|
|
26363
26363
|
var centerSpinner = _ref4.centerSpinner;
|
|
26364
|
-
return centerSpinner ? css
|
|
26364
|
+
return centerSpinner ? css(["margin:0;"]) : "";
|
|
26365
26365
|
});
|
|
26366
26366
|
var SpinnerContainer$2 = styled.div.withConfig({
|
|
26367
26367
|
displayName: "Spinner__SpinnerContainer",
|
|
@@ -26369,7 +26369,7 @@ var SpinnerContainer$2 = styled.div.withConfig({
|
|
|
26369
26369
|
})(["width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;line-height:1;", ""], function (_ref5) {
|
|
26370
26370
|
var centerSpinner = _ref5.centerSpinner,
|
|
26371
26371
|
size = _ref5.size;
|
|
26372
|
-
return centerSpinner ? css
|
|
26372
|
+
return centerSpinner ? css(["width:", "px;height:", "px;"], size, size) : "";
|
|
26373
26373
|
});
|
|
26374
26374
|
/*
|
|
26375
26375
|
`centerSpinner` prop alters existing styling of spinner to allow it to properly center itself within
|
|
@@ -26499,7 +26499,7 @@ var NavHeader = function NavHeader(_ref) {
|
|
|
26499
26499
|
}, rightContent))))));
|
|
26500
26500
|
};
|
|
26501
26501
|
|
|
26502
|
-
var _templateObject
|
|
26502
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _DEFAULT_ERROR_MESSAG;
|
|
26503
26503
|
|
|
26504
26504
|
var MIN_LENGTH_ERROR = "error/HAS_LENGTH";
|
|
26505
26505
|
var MAX_LENGTH_ERROR = "max_length_error";
|
|
@@ -26540,7 +26540,7 @@ with interpolation.
|
|
|
26540
26540
|
*/
|
|
26541
26541
|
|
|
26542
26542
|
|
|
26543
|
-
var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject
|
|
26543
|
+
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
|
|
26544
26544
|
// Neutral - has not been validated
|
|
26545
26545
|
// Invalid - has been validated and has an error
|
|
26546
26546
|
// Valid - has been validated and has no error
|