@thecb/components 11.3.5 → 11.4.0-beta.0

package/dist/index.cjs.js

@@ -25288,6 +25288,145 @@ var FormFooterPanel = function FormFooterPanel(_ref) {
 };
 var FormFooterPanel$1 = themeComponent(withWindowSize(FormFooterPanel), "FormFooterPanel", fallbackValues$n, "default");
 
+var _excluded$D = ["ariaLabelledBy", "labelDisplayOverride", "labelTextWhenNoError", "errorMessages", "helperModal", "field", "fieldActions", "showErrors", "themeValues", "customHeight", "extraStyles", "removeFromValue", "dataQa", "isRequired", "errorFieldExtraStyles", "showFieldErrorRow", "labelTextVariant", "errorTextVariant", "resize", "rows", "cols", "placeholder", "maxLength"];
+var TextareaField = styled__default.textarea.withConfig({
+  displayName: "FormTextarea__TextareaField",
+  componentId: "sc-94tlb0-0"
+})(["border:1px solid ", ";border-radius:2px;height:", ";width:100%;padding:1rem;min-width:100px;margin:0;box-sizing:border-box;position:relative;font-size:1.1rem;font-family:Public Sans;line-height:1.5rem;font-weight:", ";background-color:", ";color:", ";box-shadow:none;resize:", ";transition:background 0.3s ease;&:focus{outline:3px solid ", ";outline-offset:2px;}", " ", ""], function (_ref) {
+  var field = _ref.field,
+    showErrors = _ref.showErrors,
+    themeValues = _ref.themeValues;
+  return field.dirty && field.hasErrors || field.hasErrors && showErrors ? ERROR_COLOR : themeValues.borderColor;
+}, function (_ref2) {
+  var $customHeight = _ref2.$customHeight;
+  return $customHeight ? $customHeight : "auto";
+}, FONT_WEIGHT_REGULAR, function (_ref3) {
+  var themeValues = _ref3.themeValues;
+  return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
+}, function (_ref4) {
+  var themeValues = _ref4.themeValues;
+  return themeValues.color && themeValues.color;
+}, function (_ref5) {
+  var resize = _ref5.resize;
+  return resize || "vertical";
+}, ROYAL_BLUE, function (_ref6) {
+  var disabled = _ref6.disabled;
+  return disabled && styled.css(["color:#6e727e;background-color:#f7f7f7;"]);
+}, function (_ref7) {
+  var $extraStyles = _ref7.$extraStyles;
+  return styled.css(["", ""], $extraStyles);
+});
+var FormTextarea = function FormTextarea(_ref8) {
+  var _ref8$ariaLabelledBy = _ref8.ariaLabelledBy,
+    ariaLabelledBy = _ref8$ariaLabelledBy === void 0 ? undefined : _ref8$ariaLabelledBy,
+    _ref8$labelDisplayOve = _ref8.labelDisplayOverride,
+    labelDisplayOverride = _ref8$labelDisplayOve === void 0 ? null : _ref8$labelDisplayOve,
+    _ref8$labelTextWhenNo = _ref8.labelTextWhenNoError,
+    labelTextWhenNoError = _ref8$labelTextWhenNo === void 0 ? "" : _ref8$labelTextWhenNo,
+    errorMessages = _ref8.errorMessages,
+    _ref8$helperModal = _ref8.helperModal,
+    helperModal = _ref8$helperModal === void 0 ? false : _ref8$helperModal,
+    field = _ref8.field,
+    fieldActions = _ref8.fieldActions,
+    showErrors = _ref8.showErrors,
+    themeValues = _ref8.themeValues,
+    customHeight = _ref8.customHeight,
+    extraStyles = _ref8.extraStyles,
+    removeFromValue = _ref8.removeFromValue,
+    _ref8$dataQa = _ref8.dataQa,
+    dataQa = _ref8$dataQa === void 0 ? null : _ref8$dataQa,
+    _ref8$isRequired = _ref8.isRequired,
+    isRequired = _ref8$isRequired === void 0 ? false : _ref8$isRequired,
+    errorFieldExtraStyles = _ref8.errorFieldExtraStyles,
+    _ref8$showFieldErrorR = _ref8.showFieldErrorRow,
+    showFieldErrorRow = _ref8$showFieldErrorR === void 0 ? true : _ref8$showFieldErrorR,
+    _ref8$labelTextVarian = _ref8.labelTextVariant,
+    labelTextVariant = _ref8$labelTextVarian === void 0 ? "pS" : _ref8$labelTextVarian,
+    _ref8$errorTextVarian = _ref8.errorTextVariant,
+    errorTextVariant = _ref8$errorTextVarian === void 0 ? "pXS" : _ref8$errorTextVarian,
+    _ref8$resize = _ref8.resize,
+    resize = _ref8$resize === void 0 ? "vertical" : _ref8$resize,
+    _ref8$rows = _ref8.rows,
+    rows = _ref8$rows === void 0 ? 5 : _ref8$rows,
+    cols = _ref8.cols,
+    placeholder = _ref8.placeholder,
+    maxLength = _ref8.maxLength,
+    props = _objectWithoutProperties(_ref8, _excluded$D);
+  var setValue = function setValue(value) {
+    if (removeFromValue !== undefined) {
+      return fieldActions.set(value.replace(removeFromValue, ""));
+    }
+    return fieldActions.set(value);
+  };
+  return /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "0.25rem"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, helperModal ? /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center"
+  }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
+    color: themeValues.labelColor,
+    variant: labelTextVariant,
+    weight: themeValues.fontWeight,
+    extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }",
+    id: createIdFromString(labelTextWhenNoError)
+  }, labelTextWhenNoError), helperModal()) : /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0",
+    minWidth: "100%"
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    justify: "space-between",
+    align: "center"
+  }, labelDisplayOverride ? labelDisplayOverride : /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
+    color: themeValues.labelColor,
+    variant: labelTextVariant,
+    fontWeight: themeValues.fontWeight,
+    extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }",
+    id: createIdFromString(labelTextWhenNoError)
+  }, labelTextWhenNoError)))), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "0"
+  }, /*#__PURE__*/React__default.createElement(TextareaField, _extends({
+    "aria-labelledby": ariaLabelledBy === undefined ? createIdFromString(labelTextWhenNoError) : ariaLabelledBy,
+    "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"),
+    "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors,
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    onBlur: function onBlur(e) {
+      return handleOnBlur(e.target.value);
+    },
+    value: field.rawValue,
+    field: field,
+    showErrors: showErrors,
+    themeValues: themeValues,
+    $customHeight: customHeight,
+    $extraStyles: extraStyles,
+    "data-qa": dataQa || labelTextWhenNoError,
+    required: isRequired,
+    resize: resize,
+    rows: rows,
+    cols: cols,
+    placeholder: placeholder,
+    maxLength: maxLength
+  }, props))), showFieldErrorRow && /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
+    justify: "space-between",
+    "aria-live": "polite",
+    "aria-atomic": true
+  }, field.hasErrors && field.dirty || field.hasErrors && showErrors ? /*#__PURE__*/React__default.createElement(Text$1, {
+    color: ERROR_COLOR,
+    variant: errorTextVariant,
+    weight: themeValues.fontWeight,
+    extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }\n              ".concat(errorFieldExtraStyles, ";"),
+    id: createIdFromString(labelTextWhenNoError, "error message")
+  }, errorMessages[field.errors[0]]) : /*#__PURE__*/React__default.createElement(Text$1, {
+    extraStyles: "height: ".concat(themeValues.lineHeight, "; ").concat(errorFieldExtraStyles, ";")
+  })));
+};
+var FormTextarea$1 = themeComponent(FormTextarea, "FormTextarea", fallbackValues$n, "default");
+
 var fontSize$7 = {
   "default": "1rem",
   radio: "1.0625rem"
@@ -25566,7 +25705,7 @@ var fallbackValues$r = {
   fontSize: fontSize$8
 };
 
-var _excluded$D = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
+var _excluded$E = ["themeValues", "weight", "color", "margin", "textAlign", "extraStyles", "className", "variant", "as", "dataQa", "children"];
 var Heading = function Heading(_ref) {
   var themeValues = _ref.themeValues,
     _ref$weight = _ref.weight,
@@ -25585,7 +25724,7 @@ var Heading = function Heading(_ref) {
     as = _ref$as === void 0 ? variant : _ref$as,
     dataQa = _ref.dataQa,
     children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__default.createElement(HeadingText, _extends({
     variant: variant,
     as: as,
@@ -25865,11 +26004,11 @@ var LabeledAmountV2 = function LabeledAmountV2(_ref) {
   }, /*#__PURE__*/React__default.createElement("span", null, label), /*#__PURE__*/React__default.createElement("span", null, amount));
 };
 
-var _excluded$E = ["version"];
+var _excluded$F = ["version"];
 var LabeledAmount = function LabeledAmount(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
+    rest = _objectWithoutProperties(_ref, _excluded$F);
   var LabeledAmountComponent = version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
   return /*#__PURE__*/React__default.createElement(LabeledAmountComponent, rest);
 };
@@ -25947,7 +26086,7 @@ var Loading = function Loading() {
   })))));
 };
 
-var _excluded$F = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
+var _excluded$G = ["leftContent", "rightContent", "footerMinHeight", "backgroundColor", "largeSide", "largeSideSize", "footerPadding", "isMobile", "footerWidth"];
 var NavFooter = function NavFooter(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -25962,7 +26101,7 @@ var NavFooter = function NavFooter(_ref) {
     footerPadding = _ref$footerPadding === void 0 ? "1.5rem 1rem" : _ref$footerPadding,
     isMobile = _ref.isMobile,
     footerWidth = _ref.footerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$F);
+    rest = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: footerPadding,
     background: backgroundColor,
@@ -25993,7 +26132,7 @@ var NavFooter = function NavFooter(_ref) {
   }, rightContent)))))));
 };
 
-var _excluded$G = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
+var _excluded$H = ["leftContent", "rightContent", "headerHeight", "isMobile", "backgroundColor", "headerWidth"];
 var NavHeader = function NavHeader(_ref) {
   var leftContent = _ref.leftContent,
     rightContent = _ref.rightContent,
@@ -26002,7 +26141,7 @@ var NavHeader = function NavHeader(_ref) {
     isMobile = _ref.isMobile,
     backgroundColor = _ref.backgroundColor,
     headerWidth = _ref.headerWidth,
-    rest = _objectWithoutProperties(_ref, _excluded$G);
+    rest = _objectWithoutProperties(_ref, _excluded$H);
   return /*#__PURE__*/React__default.createElement(Box, _extends({
     padding: "0 16px 4px",
     background: backgroundColor,
@@ -37862,7 +38001,7 @@ var LoadingPill = styled__default.span.withConfig({
   return backgroundColor;
 }, shineFrames);
 
-var _excluded$H = ["minWidth", "maxWidth", "exactWidth", "height", "margin", "backgroundColor", "foregroundColor"];
+var _excluded$I = ["minWidth", "maxWidth", "exactWidth", "height", "margin", "backgroundColor", "foregroundColor"];
 var LoadingLine = function LoadingLine(_ref) {
   var minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
@@ -37876,7 +38015,7 @@ var LoadingLine = function LoadingLine(_ref) {
     backgroundColor = _ref$backgroundColor === void 0 ? SEASHELL_WHITE : _ref$backgroundColor,
     _ref$foregroundColor = _ref.foregroundColor,
     foregroundColor = _ref$foregroundColor === void 0 ? ALABASTER_WHITE : _ref$foregroundColor,
-    props = _objectWithoutProperties(_ref, _excluded$H);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   var calculatedWidth = Math.floor(Math.random() * (parseInt(maxWidth) - parseInt(minWidth) + 1) + parseInt(minWidth));
   return /*#__PURE__*/React__default.createElement(LoadingPill, _extends({
     "aria-label": "loading",
@@ -43953,11 +44092,11 @@ var Modal$2 = function Modal(_ref) {
 };
 var ModalControlV2 = withWindowSize(Modal$2);
 
-var _excluded$I = ["version"];
+var _excluded$J = ["version"];
 var Modal$3 = function Modal(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$I);
+    rest = _objectWithoutProperties(_ref, _excluded$J);
   var ModalControl = version === "v1" ? Modal$1 : ModalControlV2;
   return /*#__PURE__*/React__default.createElement(ModalControl, rest);
 };
@@ -46187,7 +46326,7 @@ var fallbackValues$Q = {
   labeledAmountTotal: labeledAmountTotal
 };
 
-var _excluded$J = ["amount"],
+var _excluded$K = ["amount"],
   _excluded2$1 = ["amount"];
 var PaymentDetailsContent = function PaymentDetailsContent(_ref) {
   var lineItemElems = _ref.lineItemElems,
@@ -46430,7 +46569,7 @@ var PaymentDetails = function PaymentDetails(_ref4) {
     return fee.amount > 0;
   }).map(function (_ref5) {
     var amount = _ref5.amount,
-      rest = _objectWithoutProperties(_ref5, _excluded$J);
+      rest = _objectWithoutProperties(_ref5, _excluded$K);
     return _objectSpread2(_objectSpread2({}, rest), {}, {
       amount: displayCurrency(amount)
     });
@@ -46867,11 +47006,11 @@ var TermsAndConditionsControlV2 = function TermsAndConditionsControlV2(_ref) {
   }, errorMessage))))));
 };
 
-var _excluded$K = ["version"];
+var _excluded$L = ["version"];
 var TermsAndConditions = function TermsAndConditions(_ref) {
   var _ref$version = _ref.version,
     version = _ref$version === void 0 ? "v1" : _ref$version,
-    rest = _objectWithoutProperties(_ref, _excluded$K);
+    rest = _objectWithoutProperties(_ref, _excluded$L);
   var TermsAndConditionsControl = version === "v1" ? TermsAndConditionsControlV1 : TermsAndConditionsControlV2;
   return /*#__PURE__*/React__default.createElement(TermsAndConditionsControl, rest);
 };
@@ -47679,7 +47818,7 @@ var InnerRadioSection = function InnerRadioSection(_ref) {
   }, section.content))));
 };
 
-var _excluded$L = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
+var _excluded$M = ["themeValues", "isMobile", "supportsTouch", "sections", "openSection", "toggleOpenSection", "staggeredAnimation", "initiallyOpen", "openHeight", "containerStyles", "ariaDescribedBy", "isSectionRequired", "groupedSections", "borderOverride"];
 
 /**
 - The RadioSection component takes either a flat array (via the 'sections' 
@@ -47729,7 +47868,7 @@ var RadioSection = function RadioSection(_ref) {
     _ref$groupedSections = _ref.groupedSections,
     groupedSections = _ref$groupedSections === void 0 ? [] : _ref$groupedSections,
     borderOverride = _ref.borderOverride,
-    rest = _objectWithoutProperties(_ref, _excluded$L);
+    rest = _objectWithoutProperties(_ref, _excluded$M);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
@@ -48424,7 +48563,7 @@ var Timeout = function Timeout(_ref) {
 };
 var Timeout$1 = withWindowSize(Timeout);
 
-var _excluded$M = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
+var _excluded$N = ["variant", "message", "toastOpen", "closeToastNotification", "extraStyles", "minWidth", "maxWidth", "height", "childGap", "backgroundColor", "role", "ariaLive", "screenReaderMessage", "showScreenReaderMessage"];
 var VARIANTS = {
   SUCCESS: "success",
   ERROR: "error"
@@ -48453,7 +48592,7 @@ var ToastNotification = function ToastNotification(_ref) {
     screenReaderMessage = _ref.screenReaderMessage,
     _ref$showScreenReader = _ref.showScreenReaderMessage,
     showScreenReaderMessage = _ref$showScreenReader === void 0 ? true : _ref$showScreenReader,
-    rest = _objectWithoutProperties(_ref, _excluded$M);
+    rest = _objectWithoutProperties(_ref, _excluded$N);
   var screenReaderMessageRef = React.useRef();
   var LIVEREGION_TRANSITION_DELAY = 1000;
   React.useEffect(function () {
@@ -48636,7 +48775,7 @@ var PopupMenuItemContainer = styled__default(ButtonWithAction).withConfig({
   return "\n    background-color: ".concat(isDeleteAction ? theme.menuItemHoverBackgroundColorDelete : theme.menuItemHoverBackgroundColor, ";\n  ");
 });
 
-var _excluded$N = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
+var _excluded$O = ["id", "closeMenuCallback", "action", "themeValues", "text", "hasIcon", "isDeleteAction", "icon", "textExtraStyles", "hoverStyles", "activeStyles", "extraStyles"];
 var PopupMenuItem = function PopupMenuItem(_ref) {
   var id = _ref.id,
     closeMenuCallback = _ref.closeMenuCallback,
@@ -48652,7 +48791,7 @@ var PopupMenuItem = function PopupMenuItem(_ref) {
     hoverStyles = _ref.hoverStyles,
     activeStyles = _ref.activeStyles,
     extraStyles = _ref.extraStyles,
-    rest = _objectWithoutProperties(_ref, _excluded$N);
+    rest = _objectWithoutProperties(_ref, _excluded$O);
   return /*#__PURE__*/React__default.createElement(PopupMenuItemContainer, _extends({
     id: id,
     role: "menuItem",
@@ -48891,7 +49030,7 @@ var ActionLinkButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   });
 });
 
-var _excluded$O = ["width", "height", "color"];
+var _excluded$P = ["width", "height", "color"];
 var DropdownIconV2 = function DropdownIconV2(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -48899,7 +49038,7 @@ var DropdownIconV2 = function DropdownIconV2(_ref) {
     height = _ref$height === void 0 ? "19" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#292A33" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$O);
+    props = _objectWithoutProperties(_ref, _excluded$P);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     width: width,
     height: height,
@@ -49046,7 +49185,7 @@ var SearchBox = function SearchBox(_ref) {
   }));
 };
 
-var _excluded$P = ["width", "height", "color"];
+var _excluded$Q = ["width", "height", "color"];
 var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? "18" : _ref$width,
@@ -49054,7 +49193,7 @@ var CheckboxCheckmarkIcon = function CheckboxCheckmarkIcon(_ref) {
     height = _ref$height === void 0 ? "18" : _ref$height,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "#FEFEFE" : _ref$color,
-    props = _objectWithoutProperties(_ref, _excluded$P);
+    props = _objectWithoutProperties(_ref, _excluded$Q);
   return /*#__PURE__*/React__default.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     width: width,
@@ -49750,7 +49889,7 @@ var fallbackValues$11 = {
   justifyContent: justifyContent
 };
 
-var _excluded$Q = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
+var _excluded$R = ["variant", "imageUrl", "isMobile", "theme", "extraStyles"],
   _excluded2$2 = ["theme", "isMobile"],
   _excluded3 = ["theme", "isMobile"],
   _excluded4 = ["theme", "isMobile"];
@@ -49773,7 +49912,7 @@ var HeroContainer = styled__default(function (_ref2) {
     isMobile = _ref2.isMobile,
     theme = _ref2.theme,
     extraStyles = _ref2.extraStyles,
-    props = _objectWithoutProperties(_ref2, _excluded$Q);
+    props = _objectWithoutProperties(_ref2, _excluded$R);
   return /*#__PURE__*/React__default.createElement(Box, props);
 }).withConfig({
   displayName: "HeroImagestyled__HeroContainer",
@@ -50501,6 +50640,7 @@ exports.FormInput = FormInput$1;
 exports.FormInputColumn = FormInputColumn;
 exports.FormInputRow = FormInputRow;
 exports.FormSelect = FormSelect$1;
+exports.FormTextarea = FormTextarea$1;
 exports.FormattedAddress = FormattedAddress$1;
 exports.FormattedBankAccount = FormattedBankAccount$1;
 exports.FormattedCreditCard = FormattedCreditCard$1;