@thecb/components 7.3.2-beta.4 → 7.3.2

package/dist/index.d.ts

@@ -187,7 +187,7 @@ interface ExternalLinkProps {
 }
 
 declare const ExternalLink: React.FC<Expand<ExternalLinkProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;
 
 interface InternalLinkProps {
   to: string;
@@ -204,7 +204,7 @@ interface InternalLinkProps {
 }
 
 declare const InternalLink: React.FC<Expand<InternalLinkProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  React.HTMLAttributes<HTMLElement> & { ref?: React.Ref<HTMLLinkElement> }>;
 
 interface NavFooterProps {
   leftContent?: JSX.Element;

package/dist/index.esm.js

@@ -16047,45 +16047,6 @@ 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";
@@ -17638,14 +17599,16 @@ var _excluded$k = ["hoverColor", "activeColor", "extrastyles"];
 
 /* eslint-disable no-unused-vars */
 
-var StyledExternalLink = styled(function (_ref) {
+var StyledExternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var hoverColor = _ref.hoverColor,
       activeColor = _ref.activeColor,
       extrastyles = _ref.extrastyles,
       props = _objectWithoutProperties(_ref, _excluded$k);
 
-  return /*#__PURE__*/React.createElement("a", props);
-}).withConfig({
+  return /*#__PURE__*/React.createElement("a", _extends({}, props, {
+    ref: ref
+  }));
+})).withConfig({
   displayName: "ExternalLinkstyled__StyledExternalLink",
   componentId: "sc-m1q2m2-0"
 })(["display:flex;font-size:", ";color:", ";font-weight:", ";font-family:", ";line-height:", ";&:hover{color:", ";text-decoration:underline;}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{text-decoration:underline;color:", ";}", ""], function (_ref2) {
@@ -17675,7 +17638,7 @@ var StyledExternalLink = styled(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var ExternalLink = function ExternalLink(_ref) {
+var ExternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$href = _ref.href,
       href = _ref$href === void 0 ? "" : _ref$href,
       _ref$newTab = _ref.newTab,
@@ -17711,9 +17674,10 @@ var ExternalLink = function ExternalLink(_ref) {
     extrastyles: extraStyles,
     rel: newTab ? "noopener" : "",
     "data-qa": dataQa,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
-};
+});
 
 var _excluded$l = ["hoverColor", "activeColor", "active", "color", "extrastyles"];
 /*
@@ -17723,7 +17687,7 @@ var _excluded$l = ["hoverColor", "activeColor", "active", "color", "extrastyles"
 
 /* eslint-disable no-unused-vars */
 
-var StyledInternalLink = styled(function (_ref) {
+var StyledInternalLink = styled( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var hoverColor = _ref.hoverColor,
       activeColor = _ref.activeColor,
       active = _ref.active,
@@ -17731,8 +17695,10 @@ var StyledInternalLink = styled(function (_ref) {
       extrastyles = _ref.extrastyles,
       props = _objectWithoutProperties(_ref, _excluded$l);
 
-  return /*#__PURE__*/React.createElement(Link, props);
-}).withConfig({
+  return /*#__PURE__*/React.createElement(Link, _extends({}, props, {
+    ref: ref
+  }));
+})).withConfig({
   displayName: "InternalLinkstyled__StyledInternalLink",
   componentId: "sc-cuqxud-0"
 })(["display:flex;color:", ";font-weight:", ";line-height:", ";font-size:", ";font-family:", ";margin:", ";&:hover{color:", ";text-decoration:underline;}&:focus{outline:3px solid ", ";outline-offset:2px;}&:active{text-decoration:underline;color:", ";}", ""], function (_ref2) {
@@ -17767,7 +17733,7 @@ var StyledInternalLink = styled(function (_ref) {
 });
 /* eslint-enable no-unused-vars */
 
-var InternalLink = function InternalLink(_ref) {
+var InternalLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$to = _ref.to,
       to = _ref$to === void 0 ? "" : _ref$to,
       color = _ref.color,
@@ -17799,9 +17765,10 @@ var InternalLink = function InternalLink(_ref) {
     activeColor: themeValues.activeColor,
     tabIndex: tabIndex,
     extrastyles: extraStyles,
-    "data-qa": dataQa
+    "data-qa": dataQa,
+    ref: ref
   }, safeChildren(children, /*#__PURE__*/React.createElement("span", null)));
-};
+});
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
   var _ref$breadcrumbsList = _ref.breadcrumbsList,
@@ -47289,14 +47256,11 @@ var WorkflowTile = function WorkflowTile(_ref) {
       workflowDescription = _ref$workflowDescript === void 0 ? "Link your benefit plan" : _ref$workflowDescript,
       _ref$workflowActionNa = _ref.workflowActionName,
       workflowActionName = _ref$workflowActionNa === void 0 ? "Search" : _ref$workflowActionNa,
-      slug = _ref.slug,
-      _ref$buttonVariant = _ref.buttonVariant,
-      buttonVariant = _ref$buttonVariant === void 0 ? "primary" : _ref$buttonVariant;
+      slug = _ref.slug;
   return /*#__PURE__*/React.createElement(Box, {
     background: WHITE,
     boxShadow: "0px 0px 5px 0px ".concat(GHOST_GREY),
-    padding: 0,
-    borderRadius: "4px"
+    padding: 0
   }, /*#__PURE__*/React.createElement(Stack, {
     childGap: 0,
     bottomItem: 3,
@@ -47316,20 +47280,18 @@ var WorkflowTile = function WorkflowTile(_ref) {
     color: STORM_GREY
   }, workflowDescription)), /*#__PURE__*/React.createElement(Box, {
     padding: "1.5rem 1rem",
-    background: ATHENS_GREY,
-    borderColor: GRECIAN_GREY,
-    borderWidthOverride: "2px 0 0 0"
+    background: GRECIAN_GREY
   }, /*#__PURE__*/React.createElement(ButtonWithLink, {
-    variant: buttonVariant,
-    primary: buttonVariant == "primary",
+    primary: true,
     primaryBG: MATISSE_BLUE,
     fontWeight: FONT_WEIGHT_SEMIBOLD,
     fontSize: "1.125rem",
+    borderRadius: "0px",
     text: workflowActionName,
     minWidth: "100%",
     url: "/service/".concat(slug),
-    extraStyles: "width: 100%; margin: 0;",
-    linkExtraStyles: "justify-content: center",
+    extraStyles: "width: 100%;",
+    linkExtraStyles: "justify-content: center;",
     dataQa: slug
   }))));
 };
@@ -47596,5 +47558,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, 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 };
+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, 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