@thecb/components 7.7.8-beta.9 → 7.8.0

package/dist/index.esm.js

@@ -24454,73 +24454,6 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
   return ref;
 };
 
-/*
-  Hook that determines whether every element in an array of DOM selectors is fully present
-  within the user's current viewport.
-
-  (elements: Array<String>) => Boolean;
-
-  Takes an array of strings that correspond to DOM selectors. Examples:
-  "#submit-button", ".module-small", "h2.alert-title"
-
-  The document query function will return the *first* element in the document that matches
-  the string given.
-
-  A combination string of multiple selectors can also be provided as an item in the array, e.g.:
-  ".alert-info, .alert-warning, .alert-error". This will return the first element that matches *any* of the provided selectors.
-
-  If the element is present in the DOM (domEL !== null), the function examines the element's bounding box
-  to determine if the element is within the viewport. If any portion of the element is outside of
-  the viewport, the function returns false.
-
-  If all elements that exist are within the viewport, the function returns true.
-*/
-
-var useCheckElementsInViewport = function useCheckElementsInViewport() {
-  var elements = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var elementsVisible = true;
-  var timeoutID = false;
-  var delay = 250;
-
-  var _useState = useState(window.innerWidth || document.documentElement.clientWidth),
-      _useState2 = _slicedToArray(_useState, 2),
-      viewportWidth = _useState2[0],
-      setViewportWidth = _useState2[1];
-
-  var _useState3 = useState(window.innerHeight || document.documentElement.clientHeight),
-      _useState4 = _slicedToArray(_useState3, 2),
-      viewportHeight = _useState4[0],
-      setViewportHeight = _useState4[1];
-
-  var updateViewportValues = function updateViewportValues() {
-    clearTimeout(timeoutID);
-    timeoutID = setTimeout(function () {
-      setViewportWidth(window.innerWidth || document.documentElement.clientWidth);
-      setViewportHeight(window.innerHeight || document.documentElement.clientHeight);
-    }, delay);
-  };
-
-  useEffect$1(function () {
-    window.addEventListener("resize", updateViewportValues);
-    return function () {
-      clearTimeout(timeoutID);
-    };
-  }, []);
-  useLayoutEffect(function () {
-    elements.forEach(function (element) {
-      var domEl = document.querySelector(element);
-      var boundingBox = domEl === null || domEl === void 0 ? void 0 : domEl.getBoundingClientRect(); // Skip any elements not in the DOM
-
-      if (domEl !== null) {
-        if (boundingBox.top < 0 || boundingBox.left < 0 || boundingBox.right > viewportWidth || boundingBox.bottom > viewportHeight) {
-          elementsVisible = false;
-        }
-      }
-    });
-  }, [elements, viewportWidth, viewportHeight]);
-  return elementsVisible;
-};
-
 
 
 var index$4 = /*#__PURE__*/Object.freeze({
@@ -24529,8 +24462,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
   general: general,
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook,
-  useCheckElementsInViewport: useCheckElementsInViewport
+  useOutsideClick: useOutsideClickHook
 });
 
 var hoverColor$4 = "#116285";
@@ -25382,6 +25314,59 @@ var Heading = function Heading(_ref) {
 
 var Heading$1 = themeComponent(Heading, "Heading", fallbackValues$n, "h1");
 
+var Image = styled.img.withConfig({
+  displayName: "ImageBoxstyled__Image",
+  componentId: "sc-8lg9y6-0"
+})(["width:", ";height:", ";object-fit:", ";object-position:", ";"], function (_ref) {
+  var _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "100%" : _ref$width;
+  return width;
+}, function (_ref2) {
+  var _ref2$height = _ref2.height,
+      height = _ref2$height === void 0 ? "100%" : _ref2$height;
+  return height;
+}, function (_ref3) {
+  var _ref3$objectFit = _ref3.objectFit,
+      objectFit = _ref3$objectFit === void 0 ? "cover" : _ref3$objectFit;
+  return objectFit;
+}, function (_ref4) {
+  var _ref4$objectPosition = _ref4.objectPosition,
+      objectPosition = _ref4$objectPosition === void 0 ? "center" : _ref4$objectPosition;
+  return objectPosition;
+});
+
+var ImageBox = function ImageBox(_ref) {
+  var image = _ref.image,
+      minHeight = _ref.minHeight,
+      minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
+      borderRadius = _ref.borderRadius,
+      imgWidth = _ref.imgWidth,
+      imgHeight = _ref.imgHeight,
+      objectFit = _ref.objectFit,
+      objectPosition = _ref.objectPosition;
+  var boxMaxWidth = maxWidth || minWidth;
+  var _image$url = image.url,
+      url = _image$url === void 0 ? "" : _image$url,
+      _image$altText = image.altText,
+      altText = _image$altText === void 0 ? "" : _image$altText;
+  return /*#__PURE__*/React.createElement(Box, {
+    padding: "0",
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxWidth: boxMaxWidth,
+    borderRadius: borderRadius,
+    extraStyles: "height: ".concat(minHeight, ";")
+  }, /*#__PURE__*/React.createElement(Image, {
+    width: imgWidth,
+    height: imgHeight,
+    objectFit: objectFit,
+    objectPosition: objectPosition,
+    src: url,
+    alt: altText
+  }));
+};
+
 var Jumbo = function Jumbo(_ref) {
   var showButton = _ref.showButton,
       heading = _ref.heading,
@@ -40346,8 +40331,6 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
     useOrderedList: useOrderedList,
     useUnorderedList: useUnorderedList
   }, repeat( /*#__PURE__*/React.createElement(Box, null), boxesBefore), tabs.map(function (t, i) {
-    var _t$toLowerCase;
-
     return /*#__PURE__*/React.createElement(Box, {
       key: t,
       borderSize: "3px",
@@ -40361,8 +40344,7 @@ var HighlightTabRow = function HighlightTabRow(_ref) {
       textAlign: "center",
       color: themeValues.textColor,
       weight: FONT_WEIGHT_SEMIBOLD,
-      extraStyles: "display: block; white-space: nowrap;",
-      id: "".concat(t === null || t === void 0 ? void 0 : (_t$toLowerCase = t.toLowerCase()) === null || _t$toLowerCase === void 0 ? void 0 : _t$toLowerCase.replace(/\s/g, "-"), "-tab-text")
+      extraStyles: "display: block; white-space: nowrap;"
     }, t));
   }), repeat( /*#__PURE__*/React.createElement(Box, null), boxesAfter))));
 };
@@ -45556,27 +45538,19 @@ var Module = function Module(_ref) {
       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,
       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 headingText = /*#__PURE__*/React.createElement(Title$1, {
+  return /*#__PURE__*/React.createElement(Fragment$1, null, heading && /*#__PURE__*/React.createElement(Title$1, {
     weight: themeValues.fontWeight,
     color: themeValues.fontColor,
     margin: "".concat(spacing, " 0 ").concat(themeValues.titleSpacing, " 0"),
     textAlign: themeValues.textAlign,
     as: computedElemType,
-    extraStyles: "font-size: ".concat(computedFontSize, ";"),
-    id: titleID
-  }, heading);
-  return /*#__PURE__*/React.createElement(Fragment$1, null, heading && !rightTitleContent && headingText, heading && rightTitleContent && /*#__PURE__*/React.createElement(Cluster, {
-    justify: "center",
-    align: "space-between"
-  }, headingText, rightTitleContent), /*#__PURE__*/React.createElement(Box, {
+    extraStyles: "font-size: ".concat(computedFontSize, ";")
+  }, heading), /*#__PURE__*/React.createElement(Box, {
     padding: "0 0 ".concat(spacingBottom)
   }, /*#__PURE__*/React.createElement(Box, {
     padding: padding,
@@ -48893,5 +48867,5 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$R));
 
-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, ArrowUpCircleIconSmall, AutopayOnIcon, 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, GoToEmailIcon$1 as GoToEmailIcon, Grid, GuidedCheckoutImage, HamburgerButton, Heading$1 as Heading, HighlightTabRow$1 as HighlightTabRow, HistoryIconSmall$1 as HistoryIconSmall, IconAdd, IconQuitLarge, Imposter, InternalLink, 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$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, 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, 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, ArrowUpCircleIconSmall, AutopayOnIcon, 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, 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, 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$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, 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, 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 };
 //# sourceMappingURL=index.esm.js.map