@thecb/components 6.3.1-beta.8 → 7.0.0-beta.0

package/dist/index.d.ts

@@ -41,7 +41,7 @@ interface ButtonWithActionProps {
   textExtraStyles?: string;
   contentOverride?: boolean;
   extraStyles?: string;
-  tabIndex?: number | string;
+  tabIndex?: string;
 }
 
 declare const ButtonWithAction: React.FC<Expand<ButtonWithActionProps> &
@@ -278,26 +278,6 @@ interface TitleProps {
 declare const Title: React.FC<Expand<TitleProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-interface CollapsibleSectionProps {
-  isOpen: boolean;
-  toggleSection?: () => void;
-  isMobile?: boolean;
-  supportsTouch?: boolean;
-  title?: string;
-  customPadding?: string;
-  initiallyOpen?: boolean;
-  openHeight?: string;
-  customTitle?: boolean;
-  stackTitle?: boolean;
-  stackTitleContent?: JSX.Element;
-  sectionGap?: string;
-  name?: string;
-  index?: number;
-}
-
-declare const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
-  React.HTMLAttributes<HTMLElement>>;
-
 interface FooterWithSubfooterProps {
   footerLargeSide?: "left" | "right";
   footerLargeSideSize?: string;
@@ -324,5 +304,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export { Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, ExternalLink, ExternalLinkProps, FooterWithSubfooter, FooterWithSubfooterProps, InternalLink, InternalLinkProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, Stack, StackProps, Switcher, SwitcherProps, Text, TextProps, Title, TitleProps };
+export { Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, Center, CenterProps, Cluster, ClusterProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, ExternalLink, ExternalLinkProps, FooterWithSubfooter, FooterWithSubfooterProps, InternalLink, InternalLinkProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, Stack, StackProps, Switcher, SwitcherProps, Text, TextProps, Title, TitleProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import React, { createContext, createElement, PureComponent, forwardRef, Component, cloneElement, Children, useContext, Fragment as Fragment$1, useRef, useState, useLayoutEffect, memo, useEffect as useEffect$1, useMemo, useCallback, isValidElement, createRef } from 'react';
-import styled, { ThemeContext, css, ThemeProvider } from 'styled-components';
+import styled, { ThemeContext, css, ThemeProvider, keyframes as keyframes$3 } from 'styled-components';
 import theme from 'styled-theming';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import reactDom from 'react-dom';
@@ -22721,7 +22721,7 @@ var useFocusInvalidInput = function useFocusInvalidInput(hasErrors) {
 
 */
 
-var useOutsideClickHook$1 = function useOutsideClickHook(handler) {
+var useOutsideClickHook = function useOutsideClickHook(handler) {
   var ref = useRef();
   useEffect$1(function () {
   }, [ref]);
@@ -22736,7 +22736,7 @@ var index$4 = /*#__PURE__*/Object.freeze({
   general: general,
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook$1
+  useOutsideClick: useOutsideClickHook
 });
 
 var hoverColor$4 = "#116285";
@@ -22808,9 +22808,7 @@ var Popover = function Popover(_ref) {
     }
   };
 
-  var triggerRef = useOutsideClickHook(function () {
-    return handleTogglePopover(false);
-  });
+  var triggerRef = useOutsideClickHook();
   return /*#__PURE__*/React.createElement(Box, {
     padding: "0",
     extraStyles: "position: relative; ".concat(extraStyles)
@@ -34991,10 +34989,10 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "2px",
+      right: "1px",
       top: "2px",
       bottom: "2px",
-      left: "24px",
+      left: "25px",
       transition: {
         ease: "backIn"
       }
@@ -35046,7 +35044,8 @@ var ToggleSwitch = function ToggleSwitch(_ref6) {
     extraStyles: labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
   }, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(Cluster, {
     justify: "stretch",
-    align: "center"
+    align: "center",
+    overflow: "visible"
   }, /*#__PURE__*/React.createElement(Cover, {
     minHeight: "100%",
     singleChild: true
@@ -35322,6 +35321,45 @@ 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",
+  componentId: "sc-kn9rtt-0"
+})(["width:", "px;background-color:", ";margin:", ";height:", ";border-radius:16px;background-image:linear-gradient( 135deg,", " 0%,", " 40%,", " 60%,", " 100% );background-size:400%;animation:", " 2s infinite ease-in-out;animation-direction:reverse;"], function (_ref) {
+  var width = _ref.width;
+  return width;
+}, SEASHELL_WHITE, function (_ref2) {
+  var margin = _ref2.margin;
+  return margin;
+}, function (_ref3) {
+  var height = _ref3.height;
+  return height;
+}, SEASHELL_WHITE, ALABASTER_WHITE, SEASHELL_WHITE, SEASHELL_WHITE, shineFrames);
+
+var LoadingLine = function LoadingLine(_ref) {
+  var minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
+      _ref$exactWidth = _ref.exactWidth,
+      exactWidth = _ref$exactWidth === void 0 ? null : _ref$exactWidth,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "16px" : _ref$height,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? "0px" : _ref$margin;
+  return /*#__PURE__*/React.createElement(LoadingPill, {
+    margin: margin,
+    height: height,
+    width: exactWidth || Math.floor(Math.random() * (maxWidth - minWidth + 1)) + minWidth
+  });
+};
+
 const validatorToPredicate = (validatorFn, emptyCase) => (
   value,
   ...rest
@@ -37922,7 +37960,7 @@ var FooterWithSubfooter = function FooterWithSubfooter(_ref) {
   }), /*#__PURE__*/React.createElement(NavFooter, {
     backgroundColor: themeValues.subfooterBackgroundColor,
     footerMinHeight: "45px",
-    footerPadding: "0 1rem",
+    footerPadding: "0 16px",
     "aria-label": "subfooter",
     leftContent: leftSubfooterContent,
     rightContent: rightSubfooterContent
@@ -43292,6 +43330,7 @@ var Modal$1 = function Modal(_ref) {
       isMobile = _useContext.isMobile;
 
   return /*#__PURE__*/React.createElement(Fragment$1, null, modalOpen && /*#__PURE__*/React.createElement(reactAriaModal, {
+    focusDialog: true,
     onExit: onExit,
     getApplicationNode: getApplicationNode,
     titleText: modalHeaderText,
@@ -46659,13 +46698,5 @@ var SidebarStackContent = function SidebarStackContent(_ref) {
 
 var SidebarStackContent$1 = withWindowSize(themeComponent(SidebarStackContent, "Global", fallbackValues$M));
 
-
-
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  fontWeights: style_constants
-});
-
-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, 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, 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, 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, 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, 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, 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, WalletIcon$1 as WalletIcon, 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, 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, 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, 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, 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, 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, WalletIcon$1 as WalletIcon, WarningIconXS, WelcomeModule$1 as WelcomeModule, WorkflowTile, cardRegistry, index$5 as constants, createPartialAmountFormState, index$4 as util, withWindowSize };
 //# sourceMappingURL=index.esm.js.map