@thecb/components 11.6.3 → 11.6.4-beta.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes } from 'react';
+import React, { ReactNode } from 'react';
 
 type Color = string;
 
@@ -595,25 +595,6 @@ interface AlertProps {
 declare const Alert: React.FC<Expand<AlertProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-interface BadgeProps {
-  label: string;
-  Icon?: JSX.Element;
-  iconOnLeft?: boolean;
-  variant?:
-    | "info"
-    | "warn"
-    | "primary"
-    | "primaryHeadline"
-    | "secondary"
-    | "secondaryHeadline"
-    | "success"
-    | "disabled";
-  id?: string;
-  extraStyles?: string;
-}
-
-declare const Badge: React.FC<Expand<BadgeProps> & HTMLAttributes<HTMLElement>>;
-
 interface ButtonWithActionProps {
   action?: (event: React.ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
@@ -681,6 +662,60 @@ interface CardProps {
 declare const Card: React.FC<Expand<CardProps> &
   React.HTMLAttributes<HTMLElement>>;
 
+interface DropdownThemeValues {
+  selectedColor?: string;
+  hoverColor?: string;
+  focusColor?: string;
+}
+
+interface DropdownProps {
+  /** Placeholder text displayed when no value is selected */
+  placeholder?: string;
+  /** Array of options to display in the dropdown */
+  options: FormSelectOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Whether the dropdown is currently open */
+  isOpen?: boolean;
+  /** Whether the dropdown is in an error state */
+  isError?: boolean;
+  /** Callback fired when an option is selected */
+  onSelect: (value: string) => void;
+  /** Array of values that should be disabled */
+  disabledValues?: string[];
+  /** Callback fired when the dropdown is clicked */
+  onClick?: () => void;
+  /** Theme values for styling the dropdown */
+  themeValues?: DropdownThemeValues;
+  /** Maximum height of the dropdown content */
+  maxHeight?: string;
+  /** Whether the dropdown width should fit its content */
+  widthFitOptions?: boolean;
+  /** Whether the dropdown is disabled */
+  disabled?: boolean;
+  /** Whether to show title attributes on options */
+  hasTitles?: boolean;
+  /** Whether to auto-erase type-ahead input after timeout */
+  autoEraseTypeAhead?: boolean;
+  /** ID of the element that labels this dropdown */
+  ariaLabelledby?: string;
+  /** ID of the element that describes this dropdown */
+  ariaDescribedby?: string;
+  /** Autocomplete attribute value for browser autofill */
+  autocompleteValue?: string;
+  /** Whether to use smooth scrolling when scrolling to selected item */
+  smoothScroll?: boolean;
+  /** Whether the dropdown has an invalid value */
+  ariaInvalid?: boolean;
+  /** Whether the dropdown is required */
+  isRequired?: boolean;
+  /** Custom CSS styles */
+  extraStyles?: string;
+}
+
+declare const Dropdown: React.FC<Expand<DropdownProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
 type SortOrder = "asc" | "desc" | null;
 interface SortableTableHeadingProps {
   ariaControlsId: string;
@@ -1291,7 +1326,7 @@ interface CollapsibleSectionProps {
   ) => void;
   isMobile?: boolean;
   supportsTouch?: boolean;
-  title?: string | JSX.Element;
+  title?: string;
   customPadding?: string;
   initiallyOpen?: boolean;
   openHeight?: string;
@@ -1306,7 +1341,7 @@ interface CollapsibleSectionProps {
 }
 
 declare const CollapsibleSection: React.FC<Expand<CollapsibleSectionProps> &
-  Omit<React.HTMLAttributes<HTMLElement>, "title">>; // ommitting title prop to avoid conflicts with component's title prop
+  React.HTMLAttributes<HTMLElement>>;
 
 interface CopyableProps {
   content: string;
@@ -1488,5 +1523,5 @@ interface DefaultPageTemplateProps {
 declare const DefaultPageTemplate: React.FC<Expand<DefaultPageTemplateProps> &
   React.HTMLAttributes<HTMLElement>>;
 
-export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, Badge, BadgeProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, CaretArrowDown, CaretArrowDownProps, CaretArrowUp, CaretArrowUpProps, CashieringImage, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, CloseIcon, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, FormTextarea, FormTextareaProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KebabMenuIcon, KioskImage, Loading, LoadingProps, MultiCartIcon, MultipleSelectFilter, MultipleSelectFilterProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PaydotImage, Popover, PopoverProps, PopupMenu, PopupMenuProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, Search, SearchProps, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, SortOrder, SortableTableHeading, SortableTableHeadingProps, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ToastNotification, ToastNotificationProps, ToastVariants, TrashIconV2, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
+export { AddValidatorAction, Alert, AlertProps, ArrowDownCircleIconSmall, ArrowDownCircleIconSmallProps, ArrowLeftCircleIconMedium, ArrowLeftCircleIconMediumProps, ArrowLeftCircleIconSmall, ArrowLeftCircleIconSmallProps, ArrowRightCircleIconSmall, ArrowRightCircleIconSmallProps, ArrowUpCircleIconSmall, ArrowUpCircleIconSmallProps, BankIconLarge, BankIconLargeProps, Box, BoxProps, ButtonWithAction, ButtonWithActionProps, ButtonWithLink, ButtonWithLinkProps, Card, CardProps, CaretArrowDown, CaretArrowDownProps, CaretArrowUp, CaretArrowUpProps, CashieringImage, Center, CenterProps, ChargebackIconMedium, ChargebackIconMediumProps, ChargebackIconSmall, ChargebackIconSmallProps, ChargebackReversalIconMedium, ChargebackReversalIconMediumProps, ChargebackReversalIconSmall, ChargebackReversalIconSmallProps, ClearAction, CloseIcon, Cluster, ClusterProps, CollapsibleSection, CollapsibleSectionProps, Copyable, CopyableProps, Cover, CoverProps, DefaultPageTemplate, DefaultPageTemplateProps, Dropdown, DropdownProps, DropdownThemeValues, EditableTable, EditableTableProps, ErrorMessageDictionary, ExternalLink, ExternalLinkProps, Field, FieldActionPayload, FieldActions, FooterWithSubfooter, FooterWithSubfooterProps, FormInput, FormInputProps, FormSelect, FormSelectOption, FormSelectProps, FormTextarea, FormTextareaProps, GuidedCheckoutImage, HistoryIconSmall, InternalLink, InternalLinkProps, KebabMenuIcon, KioskImage, Loading, LoadingProps, MultiCartIcon, MultipleSelectFilter, MultipleSelectFilterProps, NavFooter, NavFooterProps, NavHeader, NavHeaderProps, NavTabs, NavTabsProps, Paragraph, ParagraphProps, PaydotImage, Popover, PopoverProps, PopupMenu, PopupMenuProps, ProfileImage, RadioGroup, RadioGroupProps, ReduxAction, RefundIconMedium, RefundIconMediumProps, RefundIconSmall, RefundIconSmallProps, RemoveValidatorAction, RevenueManagementImage, Search, SearchProps, SearchableSelect, SearchableSelectOption, SearchableSelectProps, SetAction, SortOrder, SortableTableHeading, SortableTableHeadingProps, Spinner, SpinnerProps, Stack, StackProps, StandardCheckoutImage, SuccessfulIconMedium, SuccessfulIconMediumProps, SuccessfulIconSmall, SuccessfulIconSmallProps, Switcher, SwitcherProps, Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableHead, TableHeadProps, TableHeading, TableHeadingProps, TableListItem, TableListItemProps, TableProps, TableRow, TableRowProps, Text, TextProps, Title, TitleProps, ToastNotification, ToastNotificationProps, ToastVariants, TrashIconV2, ValidatorFn, XCircleIconMedium, XCircleIconMediumProps, XCircleIconSmall, XCircleIconSmallProps, index_d as constants, index as hooks };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.esm.js

@@ -348,8 +348,6 @@ var BORDER_RADIUS = {
 };
 var BORDER_THIN = "1px";
 var FONT_SIZE = {
-  XXS: "0.625rem",
-  // 10px
   XS: "0.750rem",
   // 12px
   SM: "0.875rem",
@@ -19717,9 +19715,6 @@ var background$1 = {
   info: "".concat(INFO_BLUE),
   warn: "".concat(HALF_COLONIAL_WHITE),
   primary: "".concat(CORNFLOWER_BLUE),
-  primaryHeadline: "".concat(CORNFLOWER_BLUE),
-  secondary: "".concat(ROYAL_BLUE_VIVID),
-  secondaryHeadline: "".concat(ROYAL_BLUE_VIVID),
   success: "".concat(HINT_GREEN),
   disabled: "".concat(GRECIAN_GREY)
 };
@@ -19727,48 +19722,12 @@ var color$5 = {
   info: "".concat(MATISSE_BLUE),
   warn: "".concat(ZEST_ORANGE),
   primary: "".concat(ROYAL_BLUE_VIVID),
-  primaryHeadline: "".concat(ROYAL_BLUE_VIVID),
-  secondary: "".concat(CORNFLOWER_BLUE),
-  secondaryHeadline: "".concat(CORNFLOWER_BLUE),
   success: "".concat(SEA_GREEN),
   disabled: "".concat(MANATEE_GREY)
 };
-var fontWeight$1 = {
-  info: FONT_WEIGHT_REGULAR,
-  warn: FONT_WEIGHT_REGULAR,
-  primary: FONT_WEIGHT_REGULAR,
-  primaryHeadline: FONT_WEIGHT_SEMIBOLD,
-  secondary: FONT_WEIGHT_REGULAR,
-  secondaryHeadline: FONT_WEIGHT_SEMIBOLD,
-  success: FONT_WEIGHT_REGULAR,
-  disabled: FONT_WEIGHT_REGULAR
-};
-var fontSizeMobile = {
-  info: fallbackValues.fontSize.pXXS,
-  warn: fallbackValues.fontSize.pXXS,
-  primary: fallbackValues.fontSize.pXXS,
-  primaryHeadline: fallbackValues.fontSize.pXS,
-  secondary: fallbackValues.fontSize.pXXS,
-  secondaryHeadline: fallbackValues.fontSize.pXS,
-  success: fallbackValues.fontSize.pXXS,
-  disabled: fallbackValues.fontSize.pXXS
-};
-var fontSizeDesktop = {
-  info: fallbackValues.fontSize.pXS,
-  warn: fallbackValues.fontSize.pXS,
-  primary: fallbackValues.fontSize.pXS,
-  primaryHeadline: fallbackValues.fontSize.pS,
-  secondary: fallbackValues.fontSize.pXS,
-  secondaryHeadline: fallbackValues.fontSize.pS,
-  success: fallbackValues.fontSize.pXS,
-  disabled: fallbackValues.fontSize.pXS
-};
 var fallbackValues$7 = {
   background: background$1,
-  color: color$5,
-  fontWeight: fontWeight$1,
-  fontSizeMobile: fontSizeMobile,
-  fontSizeDesktop: fontSizeDesktop
+  color: color$5
 };
 
 var StyledBadgeContainer = styled(Box).withConfig({
@@ -19778,31 +19737,22 @@ var StyledBadgeContainer = styled(Box).withConfig({
 var StyledBadge = styled(Text$1).withConfig({
   displayName: "Badge__StyledBadge",
   componentId: "sc-1g438j-1"
-})(["line-height:150%;letter-spacing:", ";white-space:nowrap;"], function (props) {
-  return props.isMobile ? "0.2px" : "0.24px";
-});
+})(["font-family:\"Public Sans\",sans-serif;font-size:10px;font-style:normal;font-weight:400;line-height:150%;letter-spacing:0.2px;white-space:nowrap;@media screen and (min-width:1049px){font-size:12px;line-height:150%;letter-spacing:0.24px;}"]);
 var Badge = function Badge(_ref) {
   var label = _ref.label,
     Icon = _ref.Icon,
     themeValues = _ref.themeValues,
     _ref$iconOnLeft = _ref.iconOnLeft,
     iconOnLeft = _ref$iconOnLeft === void 0 ? true : _ref$iconOnLeft,
-    id = _ref.id,
-    extraStyles = _ref.extraStyles;
-  var _useContext = useContext(ThemeContext),
-    isMobile = _useContext.isMobile;
+    id = _ref.id;
   return /*#__PURE__*/React__default.createElement(StyledBadgeContainer, {
     background: themeValues.background,
-    id: id,
-    extraStyles: extraStyles
+    id: id
   }, iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
     color: themeValues.color,
     fill: themeValues.color
   }), /*#__PURE__*/React__default.createElement(StyledBadge, {
-    color: themeValues.color,
-    weight: themeValues.fontWeight,
-    fontSize: isMobile ? themeValues.fontSizeMobile : themeValues.fontSizeDesktop,
-    isMobile: isMobile
+    color: themeValues.color
   }, label), !iconOnLeft && Icon && /*#__PURE__*/React__default.createElement(Icon, {
     color: themeValues.color,
     fill: themeValues.color
@@ -21192,7 +21142,7 @@ var activeColor$2 = "".concat(STORM_GREY$1);
 var activeBreadcrumbColor = "".concat(STORM_GREY$1);
 var fontSize$2 = "0.875rem";
 var lineHeight = "1.25rem";
-var fontWeight$2 = "400";
+var fontWeight$1 = "400";
 var margin = "0.5rem";
 var hover = "text-decoration: ".concat(LINK_TEXT_DECORATION$2, ";");
 var fallbackValues$9 = {
@@ -21201,7 +21151,7 @@ var fallbackValues$9 = {
   activeBreadcrumbColor: activeBreadcrumbColor,
   fontSize: fontSize$2,
   lineHeight: lineHeight,
-  fontWeight: fontWeight$2,
+  fontWeight: fontWeight$1,
   margin: margin,
   hover: hover
 };
@@ -23795,7 +23745,8 @@ var Dropdown = function Dropdown(_ref13) {
     _ref13$ariaInvalid = _ref13.ariaInvalid,
     ariaInvalid = _ref13$ariaInvalid === void 0 ? false : _ref13$ariaInvalid,
     _ref13$isRequired = _ref13.isRequired,
-    isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired;
+    isRequired = _ref13$isRequired === void 0 ? false : _ref13$isRequired,
+    extraStyles = _ref13.extraStyles;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     inputValue = _useState2[0],
@@ -23992,7 +23943,7 @@ var Dropdown = function Dropdown(_ref13) {
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0",
     background: isOpen ? themeValues.hoverColor : WHITE,
-    extraStyles: "position: relative;",
+    extraStyles: "position: relative;".concat(extraStyles ? " ".concat(extraStyles) : ""),
     minWidth: "100%",
     onClick: function onClick() {
       if (!isOpen) {
@@ -24162,7 +24113,7 @@ var errorFontSize = {
   "default": "0.75rem",
   disabled: "0.75rem"
 };
-var fontWeight$3 = {
+var fontWeight$2 = {
   "default": "".concat(FONT_WEIGHT_REGULAR),
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
@@ -24180,7 +24131,7 @@ var fallbackValues$j = {
   lineHeight: lineHeight$1,
   fontSize: fontSize$4,
   errorFontSize: errorFontSize,
-  fontWeight: fontWeight$3,
+  fontWeight: fontWeight$2,
   hoverFocusStyles: hoverFocusStyles
 };
 
@@ -25906,7 +25857,7 @@ var errorFontSize$1 = {
   "default": "0.75rem",
   disabled: "0.75rem"
 };
-var fontWeight$4 = {
+var fontWeight$3 = {
   "default": "".concat(FONT_WEIGHT_REGULAR),
   disabled: "".concat(FONT_WEIGHT_REGULAR)
 };
@@ -25927,7 +25878,7 @@ var fallbackValues$n = {
   lineHeight: lineHeight$2,
   fontSize: fontSize$6,
   errorFontSize: errorFontSize$1,
-  fontWeight: fontWeight$4,
+  fontWeight: fontWeight$3,
   hoverFocusStyles: hoverFocusStyles$1,
   formFooterPanel: formFooterPanel
 };
@@ -26891,7 +26842,7 @@ var Jumbo = function Jumbo(_ref) {
 };
 var Jumbo$1 = withWindowSize(Jumbo);
 
-var fontWeight$5 = {
+var fontWeight$4 = {
   // v1 variants
   "default": "600",
   pS: "600",
@@ -26908,7 +26859,7 @@ var fontWeight$5 = {
   large: "700" // fontsize Title small
 };
 var fallbackValues$t = {
-  fontWeight: fontWeight$5
+  fontWeight: fontWeight$4
 };
 
 var LabeledAmountV1 = function LabeledAmountV1(_ref) {
@@ -38986,7 +38937,7 @@ var fontSize$9 = {
   largeTitle: "1.75rem",
   small: "1.25rem"
 };
-var fontWeight$6 = {
+var fontWeight$5 = {
   "default": "600",
   largeTitle: "700",
   small: "600"
@@ -39033,7 +38984,7 @@ var backgroundColor$7 = {
 };
 var fallbackValues$G = {
   fontSize: fontSize$9,
-  fontWeight: fontWeight$6,
+  fontWeight: fontWeight$5,
   fontColor: fontColor,
   lineHeight: lineHeight$3,
   textAlign: textAlign,
@@ -47674,7 +47625,7 @@ var fontSize$a = {
 var lineHeight$4 = {
   "default": "1.5rem"
 };
-var fontWeight$7 = {
+var fontWeight$6 = {
   "default": FONT_WEIGHT_REGULAR
 };
 var modalLinkHoverFocus = {
@@ -47687,7 +47638,7 @@ var fallbackValues$R = {
   linkColor: linkColor$4,
   fontSize: fontSize$a,
   lineHeight: lineHeight$4,
-  fontWeight: fontWeight$7,
+  fontWeight: fontWeight$6,
   modalLinkHoverFocus: modalLinkHoverFocus,
   linkTextDecoration: linkTextDecoration
 };
@@ -47769,7 +47720,7 @@ var lineHeight$5 = {
   "default": "1.5rem",
   footer: "1.25rem"
 };
-var fontWeight$8 = {
+var fontWeight$7 = {
   "default": FONT_WEIGHT_REGULAR,
   footer: FONT_WEIGHT_SEMIBOLD
 };
@@ -47788,7 +47739,7 @@ var fallbackValues$S = {
   border: border$3,
   fontSize: fontSize$b,
   lineHeight: lineHeight$5,
-  fontWeight: fontWeight$8,
+  fontWeight: fontWeight$7,
   modalLinkHoverFocus: modalLinkHoverFocus$1,
   modalLinkTextDecoration: modalLinkTextDecoration
 };
@@ -49645,13 +49596,13 @@ var ToastNotification = function ToastNotification(_ref) {
   }));
 };
 
-var fontWeight$9 = "600";
+var fontWeight$8 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
 var headerBackgroundColor$1 = BRIGHT_GREY;
 var imageBackgroundColor$1 = MATISSE_BLUE;
 var fallbackValues$Z = {
-  fontWeight: fontWeight$9,
+  fontWeight: fontWeight$8,
   fontColor: fontColor$1,
   textAlign: textAlign$1,
   headerBackgroundColor: headerBackgroundColor$1,