@thecb/components 8.4.10-beta.5 → 8.4.11-beta.0

package/dist/index.d.ts

@@ -380,9 +380,9 @@ declare const Card: React.FC<Expand<CardProps> &
   React.HTMLAttributes<HTMLElement>>;
 
 interface Field {
-  hasErrors?: boolean;
-  dirty?: boolean;
-  rawValue?: string;
+  hasErrors: boolean;
+  dirty: boolean;
+  rawValue: string;
 }
 
 interface ReduxAction<T = string, P = {}> {

package/dist/index.esm.js

@@ -4989,6 +4989,8 @@ var BLACK_SQUEEZE = "#EAF2F7";
 var GREY_CHATEAU = "#959CA8"; // CBS-500
 
 var COOL_GREY_05 = "#fbfcfd"; // CBS-050
+
+var MANATEE_GREY = "#878E9B"; // CB-60 (cool)
 // BLUE
 
 var CLOUDBURST_BLUE = "#26395c";
@@ -5123,6 +5125,7 @@ var colors = /*#__PURE__*/Object.freeze({
   CHARADE_GREY: CHARADE_GREY,
   GRECIAN_GREY: GRECIAN_GREY,
   COOL_GREY_05: COOL_GREY_05,
+  MANATEE_GREY: MANATEE_GREY,
   BLACK_SQUEEZE: BLACK_SQUEEZE,
   GREY_CHATEAU: GREY_CHATEAU,
   CLOUDBURST_BLUE: CLOUDBURST_BLUE,
@@ -27102,7 +27105,24 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       themeValues = _ref5.themeValues,
       index = _ref5.index,
       _ref5$handleChange = _ref5.handleChange,
-      handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange;
+      handleChange = _ref5$handleChange === void 0 ? noop : _ref5$handleChange,
+      field = _ref5.field,
+      config = _ref5.config;
+
+  var getDefaultChecked = function getDefaultChecked(value, idx) {
+    var selectionExistsInConfig = config.map(function (c) {
+      return c.value;
+    }).includes(field.rawValue);
+
+    if (selectionExistsInConfig) {
+      // if exists, selection comes from the redux-freeform state
+      return field.rawValue === value;
+    } // fallback to first option as default selection
+
+
+    return idx === 0;
+  };
+
   return /*#__PURE__*/React.createElement(InputAndLabelContainer, {
     align: "center",
     childGap: "0.5rem",
@@ -27120,7 +27140,7 @@ var RadioButtonWithLabel = function RadioButtonWithLabel(_ref5) {
       setValue(e.target.value);
       handleChange(e);
     },
-    defaultChecked: index === 0
+    defaultChecked: getDefaultChecked(value, index)
   }), /*#__PURE__*/React.createElement(Text$1, {
     as: "label",
     htmlFor: id,
@@ -27324,14 +27344,16 @@ var fallbackValues$x = {
 };
 
 var SolidDivider = function SolidDivider(_ref) {
-  var themeValues = _ref.themeValues;
+  var borderColor = _ref.borderColor,
+      borderSize = _ref.borderSize,
+      themeValues = _ref.themeValues;
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     minWidth: "100%",
     minHeight: "1px",
-    borderColor: themeValues.borderColor,
-    borderSize: themeValues.borderSize,
-    borderWidthOverride: "0px 0px ".concat(themeValues.borderSize, " 0px")
+    borderColor: borderColor || themeValues.borderColor,
+    borderSize: borderSize || themeValues.borderSize,
+    borderWidthOverride: "0px 0px ".concat(borderSize || themeValues.borderSize, " 0px")
   });
 };
 
@@ -46785,26 +46807,30 @@ var fallbackValues$J = {
 */
 
 var Module = function Module(_ref) {
-  var heading = _ref.heading,
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "default" : _ref$variant,
+      as = _ref.as,
+      disabled = _ref.disabled,
+      heading = _ref.heading,
+      rightTitleContent = _ref.rightTitleContent,
+      _ref$titleID = _ref.titleID,
+      titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
       _ref$spacing = _ref.spacing,
       spacing = _ref$spacing === void 0 ? "1rem" : _ref$spacing,
       _ref$padding = _ref.padding,
       padding = _ref$padding === void 0 ? "0" : _ref$padding,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? "0" : _ref$margin,
       _ref$spacingBottom = _ref.spacingBottom,
       spacingBottom = _ref$spacingBottom === void 0 ? "2.5rem" : _ref$spacingBottom,
-      themeValues = _ref.themeValues,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? "default" : _ref$variant,
       fontSize = _ref.fontSize,
-      as = _ref.as,
-      _ref$titleID = _ref.titleID,
-      titleID = _ref$titleID === void 0 ? "" : _ref$titleID,
-      rightTitleContent = _ref.rightTitleContent,
+      themeValues = _ref.themeValues,
       children = _ref.children;
   var themedFontSize = variant === "small" ? "1.25rem" : variant === "default" ? "1.375rem" : "2rem";
   var computedFontSize = fontSize || themedFontSize;
   var themedElemType = variant === "small" ? "h6" : variant === "default" ? "h5" : "h2";
   var computedElemType = as || themedElemType;
+  var disabledStyles = "opacity: 0.40;";
   var headingText = /*#__PURE__*/React.createElement(Title$1, {
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
@@ -46814,12 +46840,18 @@ var Module = function Module(_ref) {
     extraStyles: "font-size: ".concat(computedFontSize, ";"),
     id: titleID
   }, heading);
-  return /*#__PURE__*/React.createElement(Fragment$1, null, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React.createElement(Cluster, {
+  return /*#__PURE__*/React.createElement(Box, {
+    "aria-disabled": disabled,
+    extraStyles: disabled && disabledStyles,
+    padding: "0",
+    role: "group"
+  }, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React.createElement(Cluster, {
     justify: "space-between",
     align: "center",
     nowrap: true
   }, headingText, rightTitleContent), /*#__PURE__*/React.createElement(Box, {
-    padding: "0 0 ".concat(spacingBottom)
+    padding: "0 0 ".concat(spacingBottom),
+    extraStyles: "margin: ".concat(margin)
   }, /*#__PURE__*/React.createElement(Box, {
     padding: padding,
     background: themeValues.backgroundColor,
@@ -47761,24 +47793,7 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
   var minimum = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
   var blockPartialPaymentOverpay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var formConfig = lineItems.reduce(function (acc, item) {
-    var validators = [required(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
-      return lineItem != item;
-    }).reduce(function (acc, curr) {
-      return [].concat(_toConsumableArray(acc), [curr.id]);
-    }, []))];
-
-    if (!!maximum) {
-      validators.push(validateSum(numberLessThanOrEqualTo(maximum), lineItems.filter(function (lineItem) {
-        return lineItem != item;
-      }).reduce(function (acc, curr) {
-        return [].concat(_toConsumableArray(acc), [curr.id]);
-      }, [])));
-    }
-
-    if (blockPartialPaymentOverpay) {
-      validators.push(numberLessThanOrEqualTo(item.amount));
-    }
-
+    var validators = createPartialAmountFormValidators(lineItems, maximum, minimum, blockPartialPaymentOverpay);
     return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, item.id, {
       validators: validators,
       constraints: [onlyNaturals()],
@@ -47797,6 +47812,29 @@ var createPartialAmountFormState = function createPartialAmountFormState(lineIte
     partialAmountFormMapDispatchToProps: mapDispatchToProps
   };
 };
+var createPartialAmountFormValidators = function createPartialAmountFormValidators(lineItems, maximum) {
+  var minimum = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  var blockPartialPaymentOverpay = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var validators = [required(), validateSum(numberGreaterThanOrEqualTo(minimum), lineItems.filter(function (lineItem) {
+    return lineItem != item;
+  }).reduce(function (acc, curr) {
+    return [].concat(_toConsumableArray(acc), [curr.id]);
+  }, []))];
+
+  if (!!maximum) {
+    validators.push(validateSum(numberLessThanOrEqualTo(maximum), lineItems.filter(function (lineItem) {
+      return lineItem != item;
+    }).reduce(function (acc, curr) {
+      return [].concat(_toConsumableArray(acc), [curr.id]);
+    }, [])));
+  }
+
+  if (blockPartialPaymentOverpay) {
+    validators.push(numberLessThanOrEqualTo(item.amount));
+  }
+
+  return validators;
+};
 
 var arrowColor = WHITE;
 var numberColor = MATISSE_BLUE;
@@ -49376,6 +49414,8 @@ var RadioGroup = function RadioGroup(_ref) {
       groupName: groupName,
       setValue: setValue,
       handleChange: handleChange,
+      field: field,
+      config: config,
       "aria-invalid": field.dirty && field.hasErrors
     }));
   })));
@@ -49432,6 +49472,8 @@ var RadioSection = function RadioSection(_ref) {
       initiallyOpen = _ref$initiallyOpen === void 0 ? true : _ref$initiallyOpen,
       _ref$openHeight = _ref.openHeight,
       openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
+      _ref$containerStyles = _ref.containerStyles,
+      containerStyles = _ref$containerStyles === void 0 ? "" : _ref$containerStyles,
       ariaDescribedBy = _ref.ariaDescribedBy;
 
   var handleKeyDown = function handleKeyDown(id, e) {
@@ -49484,7 +49526,8 @@ var RadioSection = function RadioSection(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     padding: "1px",
     border: "1px solid ".concat(themeValues.borderColor),
-    borderRadius: "4px"
+    borderRadius: "4px",
+    extraStyles: containerStyles
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: "0"
   }, sections.filter(function (section) {
@@ -50422,5 +50465,5 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$U));
 
-export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
+export { AccountNumberImage, AccountsAddIcon$1 as AccountsAddIcon, AccountsIcon$1 as AccountsIcon, AccountsIconSmall$1 as AccountsIconSmall, AchReturnIcon, AddObligation$1 as AddObligation, AddressForm, Alert$1 as Alert, AllocatedIcon, AmountCallout$1 as AmountCallout, ArrowDownCircleIconSmall, ArrowLeftCircleIconMedium, ArrowLeftCircleIconSmall, ArrowRightCircleIconSmall, ArrowRightIcon, ArrowUpCircleIconSmall, AutopayIcon, AutopayOnIcon, Badge$1 as Badge, BankIcon, BankIconLarge, Banner$1 as Banner, Box, BoxWithShadow$1 as BoxWithShadow, Breadcrumbs as Breadcrumb, ButtonWithAction, ButtonWithLink, CalendarIcon, Card$1 as Card, CarrotIcon$1 as CarrotIcon, CashIcon, Center, CenterSingle$1 as CenterSingle, CenterStack$1 as CenterStack, ChangePasswordForm, ChargebackIcon, ChargebackIconMedium, ChargebackIconSmall, ChargebackReversalIcon, ChargebackReversalIconMedium, ChargebackReversalIconSmall, CheckIcon, Checkbox$1 as Checkbox, CheckboxList$1 as CheckboxList, CheckmarkIcon, ChevronIcon$1 as ChevronIcon, Cluster, CollapsibleSection$1 as CollapsibleSection, Copyable, CountryDropdown, Cover, CustomerSearchIcon, DefaultPageTemplate, Detail$1 as Detail, DisplayBox$1 as DisplayBox, DisplayCard, Dropdown$1 as Dropdown, DuplicateIcon, EditNameForm, EditableList, EditableTable, EmailForm, EmptyCartIcon$1 as EmptyCartIcon, ErroredIcon, ExternalLink, ExternalLinkIcon, FailedIcon, FindIconSmall$1 as FindIconSmall, FooterWithSubfooter$1 as FooterWithSubfooter, ForgotPasswordForm, ForgotPasswordIcon$1 as ForgotPasswordIcon, FormContainer$1 as FormContainer, FormFooterPanel$1 as FormFooterPanel, FormInput$1 as FormInput, FormInputColumn, FormInputRow, FormSelect$1 as FormSelect, FormattedAddress$1 as FormattedAddress, FormattedBankAccount$1 as FormattedBankAccount, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GenericErrorIcon, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, ImageBox, Imposter, InternalLink, Jumbo$1 as Jumbo, KioskImage, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, LinkCard$1 as LinkCard, Loading, LoadingLine, LoginForm, Modal$1 as Modal, Module$1 as Module, Motion, NavFooter, NavHeader, NavMenuDesktop$1 as NavMenuDesktop, NavMenuMobile$1 as NavMenuMobile, NavTabs, NoCustomerResultsIcon, NoPaymentResultsIcon, NotFoundIcon, Obligation, iconsMap as ObligationIcons, Pagination$1 as Pagination, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PencilIcon$1 as PencilIcon, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, PlusCircleIcon, PointOfSaleImage, Popover$1 as Popover, ProcessingFee$1 as ProcessingFee, ProfileIcon$1 as ProfileIcon, ProfileIconSmall$1 as ProfileIconSmall, ProfileImage, PropertiesAddIcon$1 as PropertiesAddIcon, PropertiesIconSmall$1 as PropertiesIconSmall, RadioButton$2 as RadioButton, RadioButtonWithLabel$1 as RadioButtonWithLabel, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RefundIconMedium, RefundIconSmall, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, RevenueManagementImage, RoutingNumberImage, SearchIcon, SearchableSelect$1 as SearchableSelect, SettingsIconSmall$1 as SettingsIconSmall, ShoppingCartIcon, Sidebar, SidebarSingleContent$1 as SidebarSingleContent, SidebarStackContent$1 as SidebarStackContent, SolidDivider$1 as SolidDivider, Spinner$2 as Spinner, Stack, StandardCheckoutImage, FormStateDropdown as StateProvinceDropdown, StatusUnknownIcon, SuccessfulIcon, SuccessfulIconMedium, SuccessfulIconSmall, Switcher, TabSidebar$1 as TabSidebar, Table_styled as Table, TableBody_styled as TableBody, TableCell_styled as TableCell, TableHead$1 as TableHead, TableHeading_styled as TableHeading, TableListItem, TableRow$1 as TableRow, Tabs$1 as Tabs, TermsAndConditions, TermsAndConditionsModal$1 as TermsAndConditionsModal, Text$1 as Text, Timeout$1 as Timeout, TimeoutImage, Title$1 as Title, ToggleSwitch$1 as ToggleSwitch, TrashIcon$1 as TrashIcon, TypeaheadInput, VerifiedEmailIcon$1 as VerifiedEmailIcon, VoidedIcon, WalletBannerIcon$1 as WalletBannerIcon, WalletIcon$1 as WalletIcon, WalletIconSmall$1 as WalletIconSmall, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, XCircleIconMedium, XCircleIconSmall, cardRegistry, index$5 as constants, createPartialAmountFormState, createPartialAmountFormValidators, index$4 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map