@thecb/components 10.4.3-beta.1 → 10.4.4-beta.1

package/dist/index.cjs.js

@@ -18434,6 +18434,180 @@ var TrashIconV2 = function TrashIconV2(_ref) {
 };
 var TrashIconV2$1 = themeComponent(TrashIconV2, "Icons", fallbackValues$2, "primary");
 
+var DisabledAccountsAddIcon = function DisabledAccountsAddIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "100",
+    height: "100",
+    viewBox: "0 0 100 100",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M77.0408 78.1002V32.5154C77.0408 31.9007 76.5506 31.4039 75.9474 31.4039H32.3148C31.7106 31.4039 31.2213 31.9007 31.2213 32.5154V84.5326C31.2213 84.5326 55.7247 98.7028 77.0408 78.1002Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M88.0002 51.4983C88.0002 72.4847 70.9876 89.4983 50.0002 89.4983C29.0128 89.4983 12.0002 72.4847 12.0002 51.4983C12.0002 30.5109 29.0128 13.4983 50.0002 13.4983C59.0261 13.4983 67.3177 16.6447 73.8366 21.902C82.475 28.8674 88.0002 39.5368 88.0002 51.4983Z",
+    stroke: "#878E9B",
+    strokeWidth: "2.59255",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M77.0408 78.1002V32.5154C77.0408 31.9007 76.5506 31.4039 75.9474 31.4039H32.3148C31.7106 31.4039 31.2213 31.9007 31.2213 32.5154V81.3853",
+    stroke: "#3B414D",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23.3362 78.1002V11.6448C23.3362 11.0302 23.8264 10.5324 24.4306 10.5324H68.0622C68.6664 10.5324 69.1556 11.0302 69.1556 11.6448V84.1973C69.1556 84.1973 58.4947 90.719 43.9673 88.1179C32.3336 86.0346 23.3362 78.1002 23.3362 78.1002Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M69.156 84.1973V11.6448C69.156 11.0302 68.6658 10.5324 68.0625 10.5324H24.43C23.8258 10.5324 23.3365 11.0302 23.3365 11.6448V78.1002",
+    stroke: "#3B414D",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M23.3362 19.3115H69.1556",
+    stroke: "#3B414D",
+    strokeWidth: "1.9285",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M69.156 40.1818H77.041",
+    stroke: "#3B414D",
+    strokeWidth: "1.9285",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 36.5974H62.672V31.4038H29.82V36.5974Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 36.5974H62.672V31.4038H29.82V36.5974Z",
+    stroke: "#3B414D",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 45.9207H62.672V40.7271H29.82V45.9207Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 45.9207H62.672V40.7271H29.82V45.9207Z",
+    stroke: "#3B414D",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M29.8201 26.2602H46.2466",
+    stroke: "#3B414D",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 63.0901H62.672V57.8964H29.82V63.0901Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 63.0901H62.672V57.8964H29.82V63.0901Z",
+    stroke: "#3B414D",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 72.4143H62.672V67.2207H29.82V72.4143Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M29.82 72.4143H62.672V67.2207H29.82V72.4143Z",
+    stroke: "#3B414D",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z",
+    fill: "#3B414D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M48.3403 83.2719H62.672V79.298H48.3403V83.2719Z",
+    stroke: "#3B414D",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M29.8201 52.7535H46.2466",
+    stroke: "#3B414D",
+    strokeWidth: "2.0653",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M73.8364 21.9017C82.4748 28.8671 88 39.5365 88 51.498C88 72.4844 70.9874 89.498 50 89.498C29.0126 89.498 12 72.4844 12 51.498",
+    stroke: "#878E9B",
+    strokeWidth: "2.59255",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M69.1557 40.1818H77.0407V31.4038H69.1557V40.1818Z",
+    fill: "#3B414D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M23.3363 19.3112H69.1557V10.5323H23.3363V19.3112Z",
+    fill: "#3B414D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M72.0041 90.1C79.3495 90.1 85.3041 84.1454 85.3041 76.8C85.3041 69.4546 79.3495 63.5 72.0041 63.5C64.6587 63.5 58.7041 69.4546 58.7041 76.8C58.7041 84.1454 64.6587 90.1 72.0041 90.1Z",
+    fill: "#878E9B"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M79.2041 77.5H73.2041V83.5H71.2041V77.5H65.2041V75.5H71.2041V69.5H73.2041V75.5H79.2041V77.5Z",
+    fill: "white"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_7610_37196",
+    style: {
+      maskType: "luminance"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "65",
+    y: "69",
+    width: "15",
+    height: "15"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M79.2041 77.5H73.2041V83.5H71.2041V77.5H65.2041V75.5H71.2041V69.5H73.2041V75.5H79.2041V77.5Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_7610_37196)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    x: "60.2041",
+    y: "64.5",
+    width: "24",
+    height: "24",
+    fill: "white"
+  })));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -27758,16 +27932,16 @@ var fallbackValues$s = {
   height: height$1
 };
 
-var getLargeIcon = function getLargeIcon(iconName) {
+var getLargeIcon = function getLargeIcon(iconName, isDisabled) {
   switch (iconName) {
     case "accounts":
-      return /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
+      return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledAccountsAddIcon, null) : /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
     case "properties":
-      return /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
+      return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledAccountsAddIcon, null) : /*#__PURE__*/React__default.createElement(PropertiesAddIcon$1, null);
     case "payments":
-      return /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
+      return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledAccountsAddIcon, null) : /*#__PURE__*/React__default.createElement(PaymentMethodAddIcon$1, null);
     default:
-      return /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
+      return isDisabled ? /*#__PURE__*/React__default.createElement(DisabledAccountsAddIcon, null) : /*#__PURE__*/React__default.createElement(AccountsAddIcon$1, null);
   }
 };
 var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
@@ -27775,22 +27949,35 @@ var PlaceholderContentWrapper = function PlaceholderContentWrapper(_ref) {
     action = _ref.action,
     destination = _ref.destination,
     children = _ref.children,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     dataQa = _ref.dataQa;
-  return isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
+  return isDisabled ? /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    minHeight: "100%",
+    extraStyles: isDisabled ? "cursor: default" : "cursor: pointer;",
+    "aria-disabled": isDisabled
+  }, children) : isLink ? /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
     to: destination,
     "data-qa": dataQa,
-    style: {
+    disabled: isDisabled,
+    style: isDisabled ? {
+      textDecoration: "none",
+      color: "".concat(MANATEE_GREY),
+      borderColor: "".concat(MANATEE_GREY)
+    } : {
       textDecoration: "none"
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     minHeight: "100%",
-    extraStyles: "cursor: pointer;"
+    extraStyles: isDisabled ? "cursor: default;" : "cursor: pointer;"
   }, children)) : /*#__PURE__*/React__default.createElement(Box, {
-    onClick: action,
+    onClick: isDisabled ? noop : action,
     padding: "0",
     minHeight: "100%",
-    extraStyles: "cursor: pointer;",
+    "aria-disabled": isDisabled,
+    extraStyles: isDisabled ? "cursor: default" : "cursor: pointer;",
     dataQa: dataQa
   }, children);
 };
@@ -27805,27 +27992,30 @@ var Placeholder = function Placeholder(_ref2) {
     variant = _ref2.variant,
     largeIcon = _ref2.largeIcon,
     themeValues = _ref2.themeValues,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
     dataQa = _ref2.dataQa;
   return /*#__PURE__*/React__default.createElement(PlaceholderContentWrapper, {
     isLink: isLink,
     action: action,
     destination: destination,
-    dataQa: dataQa
+    dataQa: dataQa,
+    isDisabled: isDisabled
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     borderRadius: "4px",
     border: "none",
     minHeight: themeValues.height,
     hiddenStyles: !visible,
-    extraStyles: "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
-    hoverStyles: "background-color: ".concat(variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
+    extraStyles: isDisabled ? "border: 1px dashed ".concat(MANATEE_GREY, "; \n        display: flex;\n        justify-content: center;\n        align-items:center;") : "\n        background: linear-gradient(\n          to right,\n          ".concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%,\n          rgba(255, 255, 255, 0) 0%\n        ),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(to right, ").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%),\n        linear-gradient(").concat(variant === "large" ? STORM_GREY : themeValues.color, " 40%, rgba(255, 255, 255, 0) 0%);\n        background-position: top, right, bottom, left;\n        background-repeat: repeat-x, repeat-y;\n        background-size: 5px 1px, 1px 5px;\n        display: flex;\n        justify-content: center;\n        align-items:center;"),
+    hoverStyles: "background-color: ".concat(isDisabled ? TRANSPARENT : variant === "large" ? GRECIAN_GREY : curriedTint$1(0.9, themeValues.color), ";")
   }, /*#__PURE__*/React__default.createElement(Center, {
     maxWidth: "300px"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     tabIndex: "0",
     onKeyPress: function onKeyPress(e) {
-      return e.key === "Enter" && action();
+      return isDisabled ? noop : e.key === "Enter" && action();
     }
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
@@ -27836,12 +28026,13 @@ var Placeholder = function Placeholder(_ref2) {
     childGap: "0"
   }, variant === "large" && /*#__PURE__*/React__default.createElement("div", null), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
-    extraStyles: ".fill { \n                    fill: ".concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  }")
+    "aria-disabled": isDisabled,
+    extraStyles: ".fill { \n                    fill: ".concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  } .stroke { \n                    stroke: ").concat(isDisabled ? MANATEE_GREY : variant === "large" ? CHARADE_GREY : themeValues.color, "; \n                  }")
   }, variant === "large" ? /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
-  }, getLargeIcon(largeIcon), /*#__PURE__*/React__default.createElement(Text$1, {
+  }, getLargeIcon(largeIcon, isDisabled), /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: themeValues.color,
+    color: isDisabled ? MANATEE_GREY : themeValues.color,
     weight: FONT_WEIGHT_REGULAR,
     extraStyles: "text-align: center;"
   }, text)) : /*#__PURE__*/React__default.createElement(Cover, {
@@ -27850,11 +28041,13 @@ var Placeholder = function Placeholder(_ref2) {
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "center",
     align: "center"
-  }, /*#__PURE__*/React__default.createElement(IconAdd, null), /*#__PURE__*/React__default.createElement(Center, {
+  }, /*#__PURE__*/React__default.createElement(IconAdd, {
+    fill: isDisabled ? MANATEE_GREY : "#fff"
+  }), /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "pS",
-    color: themeValues.color,
+    color: isDisabled ? MANATEE_GREY : themeValues.color,
     weight: FONT_WEIGHT_REGULAR,
     extraStyles: "padding: 0 0 0 8px; text-align: center;"
   }, text)))))))))));
@@ -39826,6 +40019,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 
@@ -40763,7 +40964,9 @@ var EditableList = function EditableList(_ref) {
     qaPrefix = _ref.qaPrefix,
     ariaLabel = _ref.ariaLabel,
     _ref$editItemAriaRole = _ref.editItemAriaRole,
-    editItemAriaRole = _ref$editItemAriaRole === void 0 ? "" : _ref$editItemAriaRole;
+    editItemAriaRole = _ref$editItemAriaRole === void 0 ? "" : _ref$editItemAriaRole,
+    _ref$disablePlacehold = _ref.disablePlaceholder,
+    disablePlaceholder = _ref$disablePlacehold === void 0 ? false : _ref$disablePlacehold;
   var addText = "Add a".concat(itemName[0].match(/[aieouAIEOU]/) ? "n" : "", " ").concat(itemName);
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: listPadding,
@@ -40840,13 +41043,22 @@ var EditableList = function EditableList(_ref) {
       "aria-label": "Edit ".concat(ariaLabel || itemName),
       role: editItemAriaRole
     }))));
-  })), canAdd && (!maxItems || items.length < maxItems) && /*#__PURE__*/React__default.createElement(Box, {
+  })), canAdd && (!maxItems || items.length < maxItems) && !disablePlaceholder ? /*#__PURE__*/React__default.createElement(Box, {
     padding: items.length === 0 ? "0" : "1rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Placeholder$1, {
     text: addText,
     action: addItem,
     dataQa: "Add " + qaPrefix,
-    "aria-label": addText
+    "aria-label": addText,
+    isDisabled: disablePlaceholder
+  })) : /*#__PURE__*/React__default.createElement(Box, {
+    padding: items.length === 0 ? "0" : "1rem 0 0"
+  }, /*#__PURE__*/React__default.createElement(Placeholder$1, {
+    text: addText,
+    action: addItem,
+    dataQa: "Add " + qaPrefix,
+    "aria-label": addText,
+    isDisabled: disablePlaceholder
   }))));
 };
 
@@ -48265,21 +48477,23 @@ var AccountAndRoutingModal = function AccountAndRoutingModal(_ref) {
       toggleOpen(false);
     },
     initialFocusSelector: "[name='Close']"
-  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
-    variant: "ghost",
-    tabIndex: "0",
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pS",
     onClick: function onClick() {
       return toggleOpen(true);
     },
     onKeyPress: function onKeyPress(e) {
       return e.key === "Enter" && toggleOpen(true);
     },
-    extraStyles: "min-width: 0; min-height: 0;margin: 0; padding: 0; text-transform: none;",
-    text: /*#__PURE__*/React__default.createElement(Text$1, {
-      variant: "pS",
-      color: "inherit"
-    }, link)
-  }));
+    tabIndex: "0",
+    color: themeValues.linkColor,
+    weight: themeValues.fontWeight,
+    hoverStyles: themeValues.modalLinkHoverFocus,
+    textDecoration: themeValues.linkTextDecoration,
+    extraStyles: "cursor: pointer;",
+    role: "button",
+    className: "modal-trigger"
+  }, link));
 };
 var AccountAndRoutingModal$1 = themeComponent(AccountAndRoutingModal, "AccountAndRoutingModal", fallbackValues$O, "default");
 
@@ -50612,6 +50826,7 @@ exports.Cover = Cover;
 exports.CustomerSearchIcon = CustomerSearchIcon;
 exports.DefaultPageTemplate = DefaultPageTemplate;
 exports.Detail = Detail$1;
+exports.DisabledAccountsAddIcon = DisabledAccountsAddIcon;
 exports.DisplayBox = DisplayBox$1;
 exports.DisplayCard = DisplayCard;
 exports.Dropdown = Dropdown$1;