@thecb/components 4.5.1 → 4.6.0

package/dist/index.cjs.js

@@ -15431,6 +15431,52 @@ var CheckIcon = function CheckIcon() {
   })))))));
 };
 
+var WarningIconXS = function WarningIconXS() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "16px",
+    height: "13px",
+    viewBox: "0 0 16 13",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    "aria-labelledby": "#warning-restricted-item",
+    role: "img"
+  }, /*#__PURE__*/React__default.createElement("title", {
+    id: "warning-restricted-item"
+  }, "Warning: restricted items cannot be selected"), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M11.0106463,4.4659633 C11.3063934,4.63914978 11.5526739,4.88543032 11.7258604,5.18117739 L16.7999622,13.846119 C17.3581267,14.7992854 17.0379144,16.0244612 16.0847481,16.5826257 C15.7781918,16.762142 15.4293522,16.8567653 15.0741018,16.8567653 L4.92589823,16.8567653 C3.82132873,16.8567653 2.92589823,15.9613348 2.92589823,14.8567653 C2.92589823,14.5015149 3.02052159,14.1526753 3.20003784,13.846119 L8.27413962,5.18117739 C8.83230416,4.22801102 10.0574799,3.90779877 11.0106463,4.4659633 Z M10.6666667,13.3333333 L9.33333333,13.3333333 L9.33333333,14.6666667 L10.6666667,14.6666667 L10.6666667,13.3333333 Z M10.6666667,6.66666667 L9.33333333,6.66666667 L9.33333333,12 L10.6666667,12 L10.6666667,6.66666667 Z",
+    id: "WarningIconXs-path-1"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "WarningIconXs-SRV-2647---Workflow-$0-Balance",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "WarningIconXs-11---Search-Results----Checked--Copy-6",
+    transform: "translate(-135.000000, -483.000000)"
+  }, /*#__PURE__*/React__default.createElement("g", {
+    id: "WarningIconXs-Group",
+    transform: "translate(133.000000, 479.000000)"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "WarningIconXs-mask-2",
+    fill: "white"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#WarningIconXs-path-1"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    id: "WarningIconXs-Mask",
+    fill: "#B34A00",
+    fillRule: "nonzero",
+    xlinkHref: "#WarningIconXs-path-1"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    id: "WarningIconXs-Path",
+    fill: "#B34A00",
+    fillRule: "nonzero",
+    mask: "url(#WarningIconXs-mask-2)",
+    points: "-2.84217094e-14 -4.26325641e-14 20 -4.26325641e-14 20 20 -2.84217094e-14 20"
+  })))));
+};
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -21903,6 +21949,125 @@ var HamburgerButton = function HamburgerButton(_ref4) {
   })));
 };
 
+function _templateObject$t() {
+  var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: 1.5;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n  text-align: ", ";\n  font-family: ", ";\n\n  ", ";\n"]);
+
+  _templateObject$t = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var TitleText = styled__default.h1(_templateObject$t(), function (_ref) {
+  var fontSize = _ref.fontSize;
+  return fontSize;
+}, function (_ref2) {
+  var color = _ref2.color;
+  return color;
+}, function (_ref3) {
+  var weight = _ref3.weight;
+  return weight;
+}, function (_ref4) {
+  var margin = _ref4.margin;
+  return margin;
+}, function (_ref5) {
+  var textAlign = _ref5.textAlign;
+  return textAlign;
+}, function (_ref6) {
+  var fontFamily = _ref6.fontFamily;
+  return fontFamily;
+}, function (_ref7) {
+  var extraStyles = _ref7.extraStyles;
+  return extraStyles;
+});
+
+var fontSize$9 = {
+  large: "1.5rem",
+  small: "1.25rem"
+};
+var fontFamily$5 = {
+  large: "Public Sans",
+  small: "Public Sans"
+};
+var mobileFontSize$1 = {
+  large: "1.5rem",
+  small: "1.2142rem"
+};
+var fallbackValues$l = {
+  fontFamily: fontFamily$5,
+  fontSize: fontSize$9
+};
+var mobileFallbackValues$1 = {
+  fontFamily: fontFamily$5,
+  fontSize: mobileFontSize$1
+};
+var MOBILE_BREAKPOINT$1 = 768;
+
+/*
+  New responsive text component for Title elements
+  Size is decoupled from tag
+  Comes with two variants - "large" and "small"
+  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
+  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
+  
+  If you need a smaller text size, use the <Detail /> atom, which has smaller variants
+  
+  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
+  If you need an inline text element (span), use the <Text /> atom
+  The "as" value should be dictated by the structure of your page, not what font-size you want
+
+  Title / Detail both use slightly different desktop/mobile scales
+  (Mobile scale is different to allow for design-friendly px values)
+  Both atoms detect the presence of a mobile device on their own
+  and apply the corresponding scale
+
+  Mobile breakpoint value is specified in Title.theme.js
+
+  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
+*/
+
+var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
+var isTouchDevice$2 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
+var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$2;
+var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$l;
+
+var Title = function Title(_ref) {
+  var themeValues = _ref.themeValues,
+      _ref$weight = _ref.weight,
+      weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? FIREFLY_GREY : _ref$color,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? 0 : _ref$margin,
+      textAlign = _ref.textAlign,
+      _ref$extraStyles = _ref.extraStyles,
+      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
+      className = _ref.className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "large" : _ref$variant,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "h1" : _ref$as,
+      dataQa = _ref.dataQa,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
+
+  return /*#__PURE__*/React__default.createElement(TitleText, _extends({
+    variant: variant,
+    as: as,
+    weight: weight,
+    color: color,
+    margin: margin,
+    textAlign: textAlign,
+    extraStyles: extraStyles,
+    className: className,
+    fontFamily: themeValues.fontFamily,
+    fontSize: themeValues.fontSize,
+    "data-qa": dataQa
+  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
+};
+
+var Title$1 = themeComponent(Title, "Title", fallbacks$1, "large");
+
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
       heading = _ref.heading,
@@ -21944,11 +22109,11 @@ var Jumbo = function Jumbo(_ref) {
     justify: isMobile && !showCartStatus ? "center" : showButton || showCartStatus ? "space-between" : "left",
     align: "center",
     nowrap: showCartStatus
-  }, /*#__PURE__*/React__default.createElement(Heading$1, {
-    variant: isMobile ? "h5" : "h3",
+  }, /*#__PURE__*/React__default.createElement(Title$1, {
+    variant: isMobile ? "small" : "large",
+    as: "h1",
     color: "#ffffff",
     className: "themeJumboHeading",
-    themeJumboHeading: true,
     extraStyles: showCartStatus && isMobile && "max-width: 60%;"
   }, heading), subHeading && /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: isMobile ? "h6" : "h2",
@@ -21975,7 +22140,7 @@ var fontWeight$4 = {
   pL: "600",
   h6: "700"
 };
-var fallbackValues$l = {
+var fallbackValues$m = {
   fontWeight: fontWeight$4
 };
 
@@ -22003,7 +22168,7 @@ var LabeledAmount = function LabeledAmount(_ref) {
   }, amount));
 };
 
-var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$l, "default");
+var LabeledAmount$1 = themeComponent(LabeledAmount, "LabeledAmount", fallbackValues$m, "default");
 
 var weightTitle = {
   "default": "600",
@@ -22013,7 +22178,7 @@ var paragraphVariant = {
   "default": "pL",
   small: "pS"
 };
-var fallbackValues$m = {
+var fallbackValues$n = {
   weightTitle: weightTitle,
   paragraphVariant: paragraphVariant
 };
@@ -22042,10 +22207,10 @@ var LineItem = function LineItem(_ref) {
   }, amount));
 };
 
-var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$m, "default");
+var LineItem$1 = themeComponent(LineItem, "LineItem", fallbackValues$n, "default");
 
 var color$8 = "#15749D";
-var fallbackValues$n = {
+var fallbackValues$o = {
   color: color$8
 };
 
@@ -22059,16 +22224,16 @@ function _templateObject2$g() {
   return data;
 }
 
-function _templateObject$t() {
+function _templateObject$u() {
   var data = _taggedTemplateLiteral(["\n  animation: rotate 2s linear infinite;\n  margin: -25px 0 0 -25px;\n  width: ", "px;\n  height: ", "px;\n  & .path {\n    stroke: ", ";\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"]);
 
-  _templateObject$t = function _templateObject() {
+  _templateObject$u = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var SpinnerSvgAnimation = styled__default.svg(_templateObject$t(), function (_ref) {
+var SpinnerSvgAnimation = styled__default.svg(_templateObject$u(), function (_ref) {
   var size = _ref.size;
   return size;
 }, function (_ref2) {
@@ -22097,7 +22262,7 @@ var Spinner$1 = function Spinner(_ref4) {
   })));
 };
 
-var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$n);
+var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$o);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -22345,10 +22510,10 @@ function _templateObject2$h() {
   return data;
 }
 
-function _templateObject$u() {
+function _templateObject$v() {
   var data = _taggedTemplateLiteral(["", " is too short"]);
 
-  _templateObject$u = function _templateObject() {
+  _templateObject$v = function _templateObject() {
     return data;
   };
 
@@ -22394,7 +22559,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$u(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "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$v(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$4(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$3(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "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
@@ -22519,7 +22684,7 @@ var height$1 = {
   "default": "3rem",
   large: "192px"
 };
-var fallbackValues$o = {
+var fallbackValues$p = {
   color: color$9,
   height: height$1
 };
@@ -22612,12 +22777,12 @@ var Placeholder = function Placeholder(_ref2) {
   }, text)))))))))));
 };
 
-var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$o, "default");
+var Placeholder$1 = themeComponent(Placeholder, "Placeholder", fallbackValues$p, "default");
 
 var backgroundColor$4 = {
   "default": "".concat(WHITE)
 };
-var fallbackValues$p = {
+var fallbackValues$q = {
   backgroundColor: backgroundColor$4
 };
 
@@ -22645,25 +22810,25 @@ var ProcessingFee = function ProcessingFee(_ref) {
   }));
 };
 
-var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$p, "default");
+var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$q, "default");
 
 var activeColor$4 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
-var fallbackValues$q = {
+var fallbackValues$r = {
   activeColor: activeColor$4,
   inactiveColor: inactiveColor
 };
 
-function _templateObject$v() {
+function _templateObject$w() {
   var data = _taggedTemplateLiteral(["\n  opacity: 0;\n  position: absolute;\n  cursor: ", ";\n"]);
 
-  _templateObject$v = function _templateObject() {
+  _templateObject$w = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var HiddenRadioButton = styled__default.input(_templateObject$v(), function (_ref) {
+var HiddenRadioButton = styled__default.input(_templateObject$w(), function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? "auto" : "pointer";
 });
@@ -22745,12 +22910,12 @@ var RadioButton$1 = function RadioButton(_ref2) {
   })));
 };
 
-var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$q);
+var RadioButton$2 = themeComponent(RadioButton$1, "RadioButton", fallbackValues$r);
 
 var border$2 = {
   "default": "1px solid #caced8"
 };
-var fallbackValues$r = {
+var fallbackValues$s = {
   border: border$2
 };
 
@@ -22825,7 +22990,7 @@ var SearchableSelect = function SearchableSelect(_ref) {
   })))));
 };
 
-var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$r, "default");
+var SearchableSelect$1 = themeComponent(SearchableSelect, "SearchableSelect", fallbackValues$s, "default");
 
 var borderColor$2 = {
   "default": "".concat(GREY_CHATEAU)
@@ -22833,7 +22998,7 @@ var borderColor$2 = {
 var borderSize = {
   "default": "1px"
 };
-var fallbackValues$s = {
+var fallbackValues$t = {
   borderColor: borderColor$2,
   borderSize: borderSize
 };
@@ -22850,7 +23015,7 @@ var SolidDivider = function SolidDivider(_ref) {
   });
 };
 
-var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$s, "default");
+var SolidDivider$1 = themeComponent(SolidDivider, "SolidDivider", fallbackValues$t, "default");
 
 var placeHolderOptionUS = {
   text: "Please select state",
@@ -33425,125 +33590,6 @@ var FormStateDropdown = function FormStateDropdown(_ref) {
   });
 };
 
-function _templateObject$w() {
-  var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: 1.5;\n  color: ", ";\n  font-weight: ", ";\n  margin: ", ";\n  text-align: ", ";\n  font-family: ", ";\n\n  ", ";\n"]);
-
-  _templateObject$w = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-var TitleText = styled__default.h1(_templateObject$w(), function (_ref) {
-  var fontSize = _ref.fontSize;
-  return fontSize;
-}, function (_ref2) {
-  var color = _ref2.color;
-  return color;
-}, function (_ref3) {
-  var weight = _ref3.weight;
-  return weight;
-}, function (_ref4) {
-  var margin = _ref4.margin;
-  return margin;
-}, function (_ref5) {
-  var textAlign = _ref5.textAlign;
-  return textAlign;
-}, function (_ref6) {
-  var fontFamily = _ref6.fontFamily;
-  return fontFamily;
-}, function (_ref7) {
-  var extraStyles = _ref7.extraStyles;
-  return extraStyles;
-});
-
-var fontSize$9 = {
-  large: "1.5rem",
-  small: "1.25rem"
-};
-var fontFamily$5 = {
-  large: "Public Sans",
-  small: "Public Sans"
-};
-var mobileFontSize$1 = {
-  large: "1.5rem",
-  small: "1.2142rem"
-};
-var fallbackValues$t = {
-  fontFamily: fontFamily$5,
-  fontSize: fontSize$9
-};
-var mobileFallbackValues$1 = {
-  fontFamily: fontFamily$5,
-  fontSize: mobileFontSize$1
-};
-var MOBILE_BREAKPOINT$1 = 768;
-
-/*
-  New responsive text component for Title elements
-  Size is decoupled from tag
-  Comes with two variants - "large" and "small"
-  Large variant results in text that is 1.5rem (24px desktop, 21px mobile)
-  Small variant results in text that is 1.25rem/1.2142rem (20px desktop, 17px mobile)
-  
-  If you need a smaller text size, use the <Detail /> atom, which has smaller variants
-  
-  Use the "as" prop to specify element type, can use any of: h1/h2/h3/h4/h5/h6/p
-  If you need an inline text element (span), use the <Text /> atom
-  The "as" value should be dictated by the structure of your page, not what font-size you want
-
-  Title / Detail both use slightly different desktop/mobile scales
-  (Mobile scale is different to allow for design-friendly px values)
-  Both atoms detect the presence of a mobile device on their own
-  and apply the corresponding scale
-
-  Mobile breakpoint value is specified in Title.theme.js
-
-  If you want to disable mobile text scales (use the same rem scale for desktop/mobile), then use a theme in FCS to set both the "large" and "small" variants to use the same rem sizes. FCS themes override fallbacks defined in the .theme file
-*/
-
-var isBelowBreakpoint$1 = window.innerWidth < MOBILE_BREAKPOINT$1;
-var isTouchDevice$2 = "ontouchstart" in window || navigator.maxTouchPoints > 1;
-var mobileDeviceDetected$1 = isBelowBreakpoint$1 && isTouchDevice$2;
-var fallbacks$1 = mobileDeviceDetected$1 ? mobileFallbackValues$1 : fallbackValues$t;
-
-var Title = function Title(_ref) {
-  var themeValues = _ref.themeValues,
-      _ref$weight = _ref.weight,
-      weight = _ref$weight === void 0 ? FONT_WEIGHT_REGULAR : _ref$weight,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? FIREFLY_GREY : _ref$color,
-      _ref$margin = _ref.margin,
-      margin = _ref$margin === void 0 ? 0 : _ref$margin,
-      textAlign = _ref.textAlign,
-      _ref$extraStyles = _ref.extraStyles,
-      extraStyles = _ref$extraStyles === void 0 ? "" : _ref$extraStyles,
-      className = _ref.className,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "large" : _ref$variant,
-      _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "h1" : _ref$as,
-      dataQa = _ref.dataQa,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"]);
-
-  return /*#__PURE__*/React__default.createElement(TitleText, _extends({
-    variant: variant,
-    as: as,
-    weight: weight,
-    color: color,
-    margin: margin,
-    textAlign: textAlign,
-    extraStyles: extraStyles,
-    className: className,
-    fontFamily: themeValues.fontFamily,
-    fontSize: themeValues.fontSize,
-    "data-qa": dataQa
-  }, rest), safeChildren(children, /*#__PURE__*/React__default.createElement("span", null)));
-};
-
-var Title$1 = themeComponent(Title, "Title", fallbacks$1, "large");
-
 var onBackground = "".concat(MATISSE_BLUE);
 var disabledBackground = "".concat(IRON_GREY);
 var white = "".concat(WHITE);
@@ -37876,7 +37922,6 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
       roleDisabled = _ref.roleDisabled,
       selectionDisabled = _ref.selectionDisabled,
       formType = _ref.formType,
-      isOktaUser = _ref.isOktaUser,
       openChangePasswordForm = _ref.openChangePasswordForm,
       firstName = _ref.firstName,
       lastName = _ref.lastName;
@@ -37994,7 +38039,7 @@ var InternalUserInfoForm = function InternalUserInfoForm(_ref) {
       return e.key === "Enter" && handleSubmit(e);
     },
     disabled: emailDisabled
-  }), formType === PROFILE && !isOktaUser && /*#__PURE__*/React__default.createElement(FormInput$1, {
+  }), formType === PROFILE && /*#__PURE__*/React__default.createElement(FormInput$1, {
     labelTextWhenNoError: "Password",
     errorMessages: {},
     field: {
@@ -42408,6 +42453,7 @@ exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.VoidedIcon = VoidedIcon;
 exports.WalletIcon = WalletIcon$1;
+exports.WarningIconXS = WarningIconXS;
 exports.WelcomeModule = WelcomeModule$1;
 exports.WorkflowTile = WorkflowTile;
 exports.cardRegistry = cardRegistry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/icons/WarningIconXS.js

@@ -0,0 +1,60 @@
+import React from "react";
+
+const WarningIconXS = () => (
+  <svg
+    width="16px"
+    height="13px"
+    viewBox="0 0 16 13"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    aria-labelledby="#warning-restricted-item"
+    role="img"
+  >
+    <title id="warning-restricted-item">
+      Warning: restricted items cannot be selected
+    </title>
+    <defs>
+      <path
+        d="M11.0106463,4.4659633 C11.3063934,4.63914978 11.5526739,4.88543032 11.7258604,5.18117739 L16.7999622,13.846119 C17.3581267,14.7992854 17.0379144,16.0244612 16.0847481,16.5826257 C15.7781918,16.762142 15.4293522,16.8567653 15.0741018,16.8567653 L4.92589823,16.8567653 C3.82132873,16.8567653 2.92589823,15.9613348 2.92589823,14.8567653 C2.92589823,14.5015149 3.02052159,14.1526753 3.20003784,13.846119 L8.27413962,5.18117739 C8.83230416,4.22801102 10.0574799,3.90779877 11.0106463,4.4659633 Z M10.6666667,13.3333333 L9.33333333,13.3333333 L9.33333333,14.6666667 L10.6666667,14.6666667 L10.6666667,13.3333333 Z M10.6666667,6.66666667 L9.33333333,6.66666667 L9.33333333,12 L10.6666667,12 L10.6666667,6.66666667 Z"
+        id="WarningIconXs-path-1"
+      ></path>
+    </defs>
+    <g
+      id="WarningIconXs-SRV-2647---Workflow-$0-Balance"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="WarningIconXs-11---Search-Results----Checked--Copy-6"
+        transform="translate(-135.000000, -483.000000)"
+      >
+        <g
+          id="WarningIconXs-Group"
+          transform="translate(133.000000, 479.000000)"
+        >
+          <mask id="WarningIconXs-mask-2" fill="white">
+            <use xlinkHref="#WarningIconXs-path-1"></use>
+          </mask>
+          <use
+            id="WarningIconXs-Mask"
+            fill="#B34A00"
+            fillRule="nonzero"
+            xlinkHref="#WarningIconXs-path-1"
+          ></use>
+          <polygon
+            id="WarningIconXs-Path"
+            fill="#B34A00"
+            fillRule="nonzero"
+            mask="url(#WarningIconXs-mask-2)"
+            points="-2.84217094e-14 -4.26325641e-14 20 -4.26325641e-14 20 20 -2.84217094e-14 20"
+          ></polygon>
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default WarningIconXS;

package/src/components/atoms/icons/index.js

@@ -53,6 +53,7 @@ import PaymentSearchIcon from "./PaymentSearchIcon";
 import ResetPasswordIcon from "./ResetPasswordIcon";
 import PeriscopeFailedIcon from "./PeriscopeFailedIcon";
 import CheckIcon from "./CheckIcon";
+import WarningIconXS from "./WarningIconXS";
 
 export {
   AccountsIcon,
@@ -109,5 +110,6 @@ export {
   PaymentSearchIcon,
   ResetPasswordIcon,
   PeriscopeFailedIcon,
-  CheckIcon
+  CheckIcon,
+  WarningIconXS
 };

package/src/components/atoms/jumbo/Jumbo.js

@@ -4,6 +4,7 @@ import { ThemeContext } from "styled-components";
 import ButtonWithLink from "../button-with-link";
 import { Box, Cluster, Center, Cover, Switcher } from "../layouts";
 import Heading from "../heading";
+import Title from "../title";
 import withWindowSize from "../../withWindowSize";
 
 const Jumbo = ({
@@ -49,16 +50,15 @@ const Jumbo = ({
               align="center"
               nowrap={showCartStatus}
             >
-              <Heading
-                variant={isMobile ? "h5" : "h3"}
+              <Title
+                variant={isMobile ? "small" : "large"}
+                as="h1"
                 color="#ffffff"
                 className="themeJumboHeading"
-                themeJumboHeading
                 extraStyles={showCartStatus && isMobile && `max-width: 60%;`}
               >
                 {heading}
-              </Heading>
-
+              </Title>
               {subHeading && (
                 <Heading
                   variant={isMobile ? "h6" : "h2"}

package/src/components/molecules/internal-user-info-form/InternalUserInfoForm.js

@@ -52,7 +52,6 @@ const InternalUserInfoForm = ({
   roleDisabled,
   selectionDisabled,
   formType,
-  isOktaUser,
   openChangePasswordForm,
   firstName,
   lastName
@@ -172,7 +171,7 @@ const InternalUserInfoForm = ({
             onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
             disabled={emailDisabled}
           />
-          {formType === PROFILE && !isOktaUser && (
+          {formType === PROFILE && (
             <FormInput
               labelTextWhenNoError="Password"
               errorMessages={{}}