@thecb/components 7.3.2-beta.1 → 7.3.2-beta.3

package/dist/index.esm.js

@@ -16047,6 +16047,45 @@ var ProfileImage = function ProfileImage() {
   }));
 };
 
+var FindIconSmall = function FindIconSmall(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z",
+    fill: themeValues.singleIconColor
+  }), /*#__PURE__*/React.createElement("mask", {
+    id: "mask0_0_1287",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "2",
+    y: "2",
+    width: "15",
+    height: "14"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z",
+    fill: "white"
+  })), /*#__PURE__*/React.createElement("g", {
+    mask: "url(#mask0_0_1287)"
+  }, /*#__PURE__*/React.createElement("rect", {
+    width: "20",
+    height: "20",
+    fill: themeValues.singleIconColor
+  })));
+};
+
+var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -24622,6 +24661,64 @@ var ProcessingFee = function ProcessingFee(_ref) {
 
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$r, "default");
 
+
+
+var index$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  fontWeights: style_constants
+});
+
+var HiddenRadioInput = styled.input.withConfig({
+  displayName: "RadioButtonWithLabel__HiddenRadioInput",
+  componentId: "sc-1m9whwg-0"
+})(["position:absolute;opacity:0;margin:0;"]);
+var Circle = styled.div.withConfig({
+  displayName: "RadioButtonWithLabel__Circle",
+  componentId: "sc-1m9whwg-1"
+})(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:1px solid ", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], GREY_CHATEAU, MATISSE_BLUE);
+var InputAndLabelContainer = styled(Cluster).withConfig({
+  displayName: "RadioButtonWithLabel__InputAndLabelContainer",
+  componentId: "sc-1m9whwg-2"
+})(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:1px solid ", ";}", ":focus + label ", "{{box-shadow:0px 0px 2px 1px ", ";}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, MATISSE_BLUE, HiddenRadioInput, Circle, MATISSE_BLUE);
+
+var RadioButtonWithLabel = function RadioButtonWithLabel(_ref) {
+  var _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "" : _ref$id,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? "" : _ref$value,
+      _ref$labelText = _ref.labelText,
+      labelText = _ref$labelText === void 0 ? "" : _ref$labelText,
+      groupName = _ref.groupName,
+      setValue = _ref.setValue,
+      ariaInvalid = _ref.ariaInvalid,
+      index = _ref.index,
+      _ref$handleChange = _ref.handleChange,
+      handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange;
+  return /*#__PURE__*/React.createElement(InputAndLabelContainer, {
+    align: "center",
+    childGap: "0.5rem"
+  }, /*#__PURE__*/React.createElement(HiddenRadioInput, {
+    "aria-invalid": ariaInvalid,
+    style: {
+      marginTop: 0
+    },
+    type: "radio",
+    name: groupName,
+    id: id,
+    value: value,
+    onChange: function onChange(e) {
+      setValue(e.target.value);
+      handleChange(e);
+    },
+    defaultChecked: index === 0
+  }), /*#__PURE__*/React.createElement(Text$1, {
+    as: "label",
+    htmlFor: id,
+    extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
+  }, /*#__PURE__*/React.createElement(Circle, null), labelText));
+};
+
 var activeColor$5 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
 var fallbackValues$s = {
@@ -24631,7 +24728,7 @@ var fallbackValues$s = {
 
 var HiddenRadioButton = styled.input.withConfig({
   displayName: "RadioButton__HiddenRadioButton",
-  componentId: "sc-v6hie9-0"
+  componentId: "sc-1jed2i-0"
 })(["opacity:0;position:absolute;cursor:", ";"], function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? "auto" : "pointer";
@@ -35835,14 +35932,6 @@ var NavTabs = function NavTabs(_ref) {
   }, tabs)));
 };
 
-
-
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  fontWeights: style_constants
-});
-
 var shineFrames = keyframes$3(["{0{background-position:0 0;}20%{background-position:100% 100%;}100%{background-position:100% 100%;}}"]);
 var LoadingPill = styled.div.withConfig({
   displayName: "LoadingPillstyled__LoadingPill",
@@ -46266,6 +46355,55 @@ PhoneForm.reducer = reducer$9;
 PhoneForm.mapStateToProps = mapStateToProps$a;
 PhoneForm.mapDispatchToProps = mapDispatchToProps$9;
 
+var DefaultHeading = styled.div.withConfig({
+  displayName: "RadioGroup__DefaultHeading",
+  componentId: "sc-7lqrl8-0"
+})(["font-size:0.875rem;color:", " margin:0;padding:8px 0px;"], CHARADE_GREY);
+var StyledFieldset = styled.fieldset.withConfig({
+  displayName: "RadioGroup__StyledFieldset",
+  componentId: "sc-7lqrl8-1"
+})(["", ""], function (props) {
+  return props.$extraStyles;
+});
+
+var RadioGroup = function RadioGroup(_ref) {
+  var headingText = _ref.headingText,
+      groupName = _ref.groupName,
+      _ref$heading = _ref.heading,
+      Heading = _ref$heading === void 0 ? /*#__PURE__*/React.createElement(DefaultHeading, {
+    role: "heading",
+    id: "radio-group-".concat(groupName, "-heading")
+  }, headingText) : _ref$heading,
+      config = _ref.config,
+      extraStyles = _ref.extraStyles,
+      _ref$handleChange = _ref.handleChange,
+      handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
+      field = _ref.field,
+      fieldActions = _ref.fieldActions;
+
+  var setValue = function setValue(value) {
+    return fieldActions.set(value);
+  };
+
+  return /*#__PURE__*/React.createElement(StyledFieldset, {
+    role: "radiogroup",
+    "aria-labelledby": "radio-group-".concat(groupName, "-heading"),
+    $extraStyles: extraStyles
+  }, Heading !== null && Heading, /*#__PURE__*/React.createElement(Stack, {
+    childGap: "4px"
+  }, config.map(function (c, idx) {
+    return /*#__PURE__*/React.createElement(RadioButtonWithLabel, _extends({
+      index: idx,
+      key: c.id
+    }, c, {
+      groupName: groupName,
+      setValue: setValue,
+      handleChange: handleChange,
+      "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors
+    }));
+  })));
+};
+
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
@@ -47177,19 +47315,20 @@ var WorkflowTile = function WorkflowTile(_ref) {
     color: STORM_GREY
   }, workflowDescription)), /*#__PURE__*/React.createElement(Box, {
     padding: "1.5rem 1rem",
-    background: GRECIAN_GREY
+    background: ATHENS_GREY,
+    borderColor: GRECIAN_GREY,
+    borderWidthOverride: "2px 0 0 0"
   }, /*#__PURE__*/React.createElement(ButtonWithLink, {
     variant: buttonVariant,
     primary: buttonVariant == "primary",
     primaryBG: MATISSE_BLUE,
     fontWeight: FONT_WEIGHT_SEMIBOLD,
     fontSize: "1.125rem",
-    borderRadius: "0px",
     text: workflowActionName,
     minWidth: "100%",
     url: "/service/".concat(slug),
-    extraStyles: "width: 100%;",
-    linkExtraStyles: "justify-content: center;",
+    extraStyles: "width: 100%; margin: 0;",
+    linkExtraStyles: "justify-content: center",
     dataQa: slug
   }))));
 };
@@ -47456,5 +47595,5 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$N));
 
-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, AutopayOnIcon, BankIcon, 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, ChargebackReversalIcon, 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, 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, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, 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, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, 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, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, 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, Switcher, TabSidebar$1 as TabSidebar, TableListItem, 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, 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, AutopayOnIcon, BankIcon, 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, ChargebackReversalIcon, 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, FormattedCreditCard$1 as FormattedCreditCard, Frame, GenericCard, GenericCardLarge, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, IconAdd, IconQuitLarge, Imposter, InternalLink, InternalUserInfoForm, Jumbo$1 as Jumbo, LabeledAmount$1 as LabeledAmount, LineItem$1 as LineItem, 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, Paragraph$1 as Paragraph, PartialAmountForm, PasswordRequirements, PaymentButtonBar, PaymentDetails$1 as PaymentDetails, PaymentFormACH, PaymentFormCard$1 as PaymentFormCard, PaymentIcon, PaymentMethodAddIcon$1 as PaymentMethodAddIcon, PaymentMethodIcon$1 as PaymentMethodIcon, PaymentSearchIcon, PaymentsIconSmall$1 as PaymentsIconSmall, PendingIcon, PeriscopeDashboardIframe, PeriscopeFailedIcon, PhoneForm, Placeholder$1 as Placeholder, 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, RadioGroup, RadioSection$1 as RadioSection, Reel, RefundIcon, RegistrationForm, RejectedIcon, RejectedVelocityIcon, ResetConfirmationForm$1 as ResetConfirmationForm, ResetPasswordForm, ResetPasswordIcon, ResetPasswordSuccess, 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, Switcher, TabSidebar$1 as TabSidebar, TableListItem, 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, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map