@thecb/components 10.6.0-beta.7 → 10.6.0

package/dist/index.cjs.js

@@ -39119,17 +39119,17 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
 };
 
 var onBackground = "".concat(MATISSE_BLUE);
-var disabledBackground = "".concat(IRON_GREY);
+var disabledBackground = "".concat(MANATEE_GREY);
+var disabledBackgroundLight = "".concat(ATHENS_GREY);
 var white = "".concat(WHITE);
-var offBackground = "".concat(REGENT_GREY);
 var labelStyles = "\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n";
 var rightLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row;\n");
 var leftLabelStyles = "\n  ".concat(labelStyles, "\n  flex-direction: row-reverse;\n");
 var fallbackValues$y = {
   onBackground: onBackground,
   disabledBackground: disabledBackground,
+  disabledBackgroundLight: disabledBackgroundLight,
   white: white,
-  offBackground: offBackground,
   rightLabelStyles: rightLabelStyles,
   leftLabelStyles: leftLabelStyles
 };
@@ -39147,7 +39147,7 @@ var HiddenToggleSwitchBox = styled__default.input.withConfig({
 var VisibleSwitchComponent = styled__default.label.withConfig({
   displayName: "ToggleSwitch__VisibleSwitchComponent",
   componentId: "sc-1t51u6v-1"
-})(["width:48px;height:24px;border-radius:48px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
+})(["width:44px;height:24px;border-radius:12px;border:none;position:relative;box-sizing:border-box;cursor:", ";display:inline-block;&:hover{box-shadow:", ";}&:focus{box-shadow:0px 2px 5px 0px rgba(0,0,0,0.5);}", ""], function (_ref3) {
   var disabled = _ref3.disabled;
   return disabled ? "auto" : "pointer";
 }, function (_ref4) {
@@ -39157,14 +39157,10 @@ var VisibleSwitchComponent = styled__default.label.withConfig({
   var isMobile = _ref5.isMobile;
   return isMobile ? "transform: scale(0.75)" : "";
 });
-var ToggleSwitchMiddleRingComponent = styled__default.div.withConfig({
-  displayName: "ToggleSwitch__ToggleSwitchMiddleRingComponent",
+var ToggleSwitchRingComponent = styled__default.div.withConfig({
+  displayName: "ToggleSwitch__ToggleSwitchRingComponent",
   componentId: "sc-1t51u6v-2"
-})(["position:absolute;width:20px;height:20px;border:none;border-radius:50%;box-sizing:border-box;"]);
-var ToggleSwitchInnerRingComponent = styled__default.div.withConfig({
-  displayName: "ToggleSwitch__ToggleSwitchInnerRingComponent",
-  componentId: "sc-1t51u6v-3"
-})(["position:absolute;width:14px;height:14px;top:3px;left:3px;right:3px;bottom:3px;border-radius:50%;box-sizing:border-box;"]);
+})(["position:absolute;width:16px;height:16px;border:none;border-radius:50%;box-sizing:border-box;"]);
 var ToggleSwitch = function ToggleSwitch(_ref6) {
   var _ref6$isOn = _ref6.isOn,
     isOn = _ref6$isOn === void 0 ? false : _ref6$isOn,
@@ -39181,50 +39177,26 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     themeValues = _ref6.themeValues,
     isMobile = _ref6.isMobile,
     dataQa = _ref6.dataQa;
-  var ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
+  var ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
     off: {
-      backgroundColor: themeValues.offBackground,
-      transition: {
-        ease: "easeOut"
-      }
-    },
-    on: {
-      backgroundColor: themeValues.onBackground,
-      transition: {
-        ease: "easeIn"
-      }
-    },
-    disabled: {
-      backgroundColor: themeValues.disabledBackground
-    }
-  });
-  var ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
-    off: {
-      backgroundColor: themeValues.white,
-      left: "2px",
-      top: "2px",
-      bottom: "2px",
-      right: "24px",
+      backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
+      left: "4px",
+      top: "3px",
+      bottom: "3px",
+      right: "20px",
       transition: {
         ease: "backIn"
       }
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "1px",
-      top: "2px",
-      bottom: "2px",
-      left: "25px",
+      right: "8px",
+      top: "3px",
+      bottom: "3px",
+      left: "22px",
       transition: {
         ease: "backIn"
       }
-    },
-    disabled: {
-      backgroundColor: themeValues.white,
-      left: "2px",
-      top: "2px",
-      bottom: "2px",
-      right: "24px"
     }
   });
   var VisibleSwitch = posed(VisibleSwitchComponent)({
@@ -39239,19 +39211,20 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
       boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
     },
     off: {
-      backgroundColor: themeValues.offBackground,
+      border: "1px solid",
+      backgroundColor: disabled ? themeValues.disabledBackgroundLight : themeValues.white,
+      borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
       transition: {
         ease: "easeOut"
       }
     },
     on: {
-      backgroundColor: themeValues.onBackground,
+      border: "1px solid",
+      backgroundColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
+      borderColor: disabled ? themeValues.disabledBackground : themeValues.onBackground,
       transition: {
         ease: "easeIn"
       }
-    },
-    disabled: {
-      backgroundColor: themeValues.disabledBackground
     }
   });
   var handleKeyDown = function handleKeyDown(e) {
@@ -39286,11 +39259,11 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     htmlFor: "#toggle-".concat(name),
     onClick: disabled ? noop : onToggle,
     onKeyDown: disabled ? noop : handleKeyDown,
-    pose: disabled ? "disabled" : isOn ? "on" : "off",
+    pose: isOn ? "on" : "off",
     tabIndex: disabled ? -1 : 0,
     disabled: disabled,
     isMobile: isMobile
-  }, /*#__PURE__*/React__default.createElement(ToggleSwitchMiddleRing, null, /*#__PURE__*/React__default.createElement(ToggleSwitchInnerRing, null))))), label && /*#__PURE__*/React__default.createElement(Heading$1, {
+  }, /*#__PURE__*/React__default.createElement(ToggleSwitchRing, null)))), label && /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: "h4",
     weight: FONT_WEIGHT_SEMIBOLD,
     extraStyles: "margin: 0 0.5rem; position: relative; bottom: 1px; display: inline-block;",
@@ -39759,13 +39732,13 @@ var WalletName = function WalletName(_ref) {
     justify: text || actionText ? "flex-end" : "flex-start",
     extraStyles: "margin-top: 0.5rem;"
   }, text && /*#__PURE__*/React__default.createElement(Text$1, {
-    extraStyles: "font-size: 12px"
+    extraStyles: "font-size: 0.857rem;"
   }, text), (text || actionText) && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, "\xA0"), action && actionText && /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     text: actionText,
     action: action,
     variant: "smallGhost",
     disabled: disableAction,
-    extraStyles: "\n                margin: 0;\n                min-width: 0;\n                span {font-size: 0.75rem;}\n                ".concat(linkButtonExtraStyles, "\n              ")
+    extraStyles: "\n                margin: 0;\n                min-width: 0;\n                span {font-size: 0.857rem;}\n                ".concat(linkButtonExtraStyles, "\n              ")
   })));
 };
 
@@ -40363,6 +40336,14 @@ validatorFns[IS_PROBABLY_EMAIL] = (value, args, form) => {
   return new RegExp(/^\S+@\S+\.\S+$/).test(value);
 };
 
+const VALID_NAME = 'validator/VALID_NAME';
+const VALID_NAME_ERROR = 'validator/VALID_NAME_ERROR';
+const validName = createValidator(VALID_NAME, VALID_NAME_ERROR);
+validatorFns[VALID_NAME] = (value, args, form) =>
+  value === ''
+    ? false
+    : new RegExp(/[A-zÀ-ÿ\-,'\S]+(\s?[A-zÀ-ÿ\-,'\S])*/).test(value);
+
 const runValidatorErrorMessage = (type) =>
   `${type} was passed to runValidator, but that validator type does not exist. 
   Please check that you are only calling validator creator functions exported from 
@@ -50255,8 +50236,8 @@ var RegistrationForm = function RegistrationForm(_ref) {
       };
     }, []);
   }
-  var firstNameErrorMessages = _defineProperty({}, required.error, "First name is required");
-  var lastNameErrorMessages = _defineProperty({}, required.error, "Last name is required");
+  var firstNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "First name is required"), validName.error, "First name contains invalid characters");
+  var lastNameErrorMessages = _defineProperty(_defineProperty({}, required.error, "Last name is required"), validName.error, "Last name contains invalid characters");
   var emailErrorMessages = _defineProperty(_defineProperty({}, required.error, "Email is required"), isProbablyEmail.error, "Invalid email address");
   var passwordErrorMessages = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, required.error, "Password is required"), hasLength.error, "Password must have at least 8 characters"), hasNumber.error, "Password must contain at least one number"), hasLowercaseLetter.error, "Password must contain at least one lowercase letter"), hasUppercaseLetter.error, "Password must contain at least one uppercase letter"), hasSpecialCharacter.error, "Password must contain at least one special character (!@#$%^&*.?)");
   var confirmPasswordErrorMessages = _defineProperty({}, matchesField.error, "Confirm password must match password");
@@ -50332,10 +50313,10 @@ var RegistrationForm = function RegistrationForm(_ref) {
 
 var formConfig$9 = {
   firstName: {
-    validators: [required()]
+    validators: [required(), validName()]
   },
   lastName: {
-    validators: [required()]
+    validators: [required(), validName()]
   },
   email: {
     validators: [required(), isProbablyEmail()]