baseui 12.0.0 → 12.1.0

package/es/menu/menu.js

@@ -9,7 +9,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { LocaleContext } from '../locale'; // Components
 
-import { StyledList, StyledEmptyState, StyledOptgroupHeader } from './styled-components';
+import { StyledList, StyledEmptyState, StyledOptgroupHeader, StyledMenuDivider } from './styled-components';
 import OptionList from './option-list';
 import { getOverrides } from '../helpers/overrides'; // Types
 
@@ -22,6 +22,7 @@ export default function Menu(props) {
     focusMenu = () => {},
     unfocusMenu = () => {},
     handleMouseLeave = () => {},
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     handleKeyDown = event => {},
     renderAll = false
   } = props;
@@ -31,7 +32,8 @@ export default function Menu(props) {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
-  };
+  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   const handleBlur = event => {
     if (focusVisible !== false) {
@@ -43,6 +45,7 @@ export default function Menu(props) {
   const [Option, optionProps] = getOverrides(overrides.Option, OptionList);
   const [EmptyState, emptyStateProps] = getOverrides(overrides.EmptyState, StyledEmptyState);
   const [OptgroupHeader, optgroupHeaderProps] = getOverrides(overrides.OptgroupHeader, StyledOptgroupHeader);
+  const [MenuDivider, menuDividerProps] = getOverrides(overrides.MenuDivider, StyledMenuDivider);
   const groupedItems = Array.isArray(props.items) ? {
     __ungrouped: props.items
   } : props.items;
@@ -52,13 +55,20 @@ export default function Menu(props) {
       els.push( /*#__PURE__*/React.createElement(OptgroupHeader, _extends({
         key: optgroup
       }, optgroupHeaderProps), optgroup));
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
     const groupItems = groupedItems[optgroup].map((item, index) => {
-      itemIndex = itemIndex + 1;
+      itemIndex = itemIndex + 1; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
       const {
         getRequiredItemProps = (item, index) => ({})
       } = props;
+
+      if (item.divider === true) {
+        return /*#__PURE__*/React.createElement(MenuDivider, menuDividerProps);
+      }
+
       const {
         disabled,
         isFocused,

package/es/menu/option-profile.js

@@ -12,6 +12,7 @@ import MaybeChildMenu from './maybe-child-menu';
 import { StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody } from './styled-components';
 import { getOverrides } from '../helpers/overrides'; // Types
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function OptionProfile(props, ref) {
   const {
     item,

package/es/menu/stateful-container.js

@@ -384,14 +384,23 @@ class MenuStatefulContainerInner extends React.Component {
     // omit the stateful-container's props and don't pass it down
     // to the children (stateless menu)
     const {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       initialState,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       stateReducer,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       children,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onItemSelect,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       addMenuToNesting,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       removeMenuFromNesting,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       getParentMenu,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       getChildMenu,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       forceHighlight,
       ...restProps
     } = this.props;
@@ -402,6 +411,7 @@ class MenuStatefulContainerInner extends React.Component {
       handleMouseLeave: this.handleMouseLeave,
       highlightedIndex: this.state.highlightedIndex,
       isFocused: this.state.isFocused,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       handleKeyDown: this.props.keyboardControlNode.current ? event => {} : this.onKeyDown,
       focusMenu: this.focusMenu,
       unfocusMenu: this.unfocusMenu

package/es/menu/styled-components.js

@@ -34,6 +34,7 @@ export const StyledList = styled('ul', ({
   };
 });
 StyledList.displayName = "StyledList";
+StyledList.displayName = 'StyledList';
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -83,6 +84,7 @@ export const StyledEmptyState = styled('li', props => {
   };
 });
 StyledEmptyState.displayName = "StyledEmptyState";
+StyledEmptyState.displayName = 'StyledEmptyState';
 export const StyledOptgroupHeader = styled('li', props => {
   const paddingX = props.$theme.sizing.scale300;
   const paddingY = props.$theme.sizing.scale200;
@@ -95,6 +97,7 @@ export const StyledOptgroupHeader = styled('li', props => {
   };
 });
 StyledOptgroupHeader.displayName = "StyledOptgroupHeader";
+StyledOptgroupHeader.displayName = 'StyledOptgroupHeader';
 export const StyledListItemAnchor = styled('a', props => {
   return {
     display: 'block',
@@ -102,6 +105,7 @@ export const StyledListItemAnchor = styled('a', props => {
   };
 });
 StyledListItemAnchor.displayName = "StyledListItemAnchor";
+StyledListItemAnchor.displayName = 'StyledListItemAnchor';
 export const StyledListItemElement = styled('li', props => {
   const {
     $disabled,
@@ -109,6 +113,7 @@ export const StyledListItemElement = styled('li', props => {
     $size
   } = props;
   return { ...($size === OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200),
+    boxSizing: 'border-box',
     position: 'relative',
     display: 'block',
     color: getFontColor(props),
@@ -128,7 +133,9 @@ export const StyledListItemElement = styled('li', props => {
   };
 });
 StyledListItemElement.displayName = "StyledListItemElement";
-export const StyledListItem = withWrapper(StyledListItemElement, Styled => function StyledListItem({
+StyledListItemElement.displayName = 'StyledListItemElement';
+export const StyledListItem = withWrapper(StyledListItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
+function StyledListItem({
   item,
   ...restProps
 }) {
@@ -153,6 +160,7 @@ export const StyledListItemProfile = styled('li', ({
   }
 }));
 StyledListItemProfile.displayName = "StyledListItemProfile";
+StyledListItemProfile.displayName = 'StyledListItemProfile';
 export const StyledProfileImgContainer = styled('div', {
   width: '60px',
   height: '60px',
@@ -161,6 +169,7 @@ export const StyledProfileImgContainer = styled('div', {
   alignItems: 'center'
 });
 StyledProfileImgContainer.displayName = "StyledProfileImgContainer";
+StyledProfileImgContainer.displayName = 'StyledProfileImgContainer';
 export const StyledProfileImg = styled('img', {
   width: '100%',
   height: '100%',
@@ -170,6 +179,7 @@ export const StyledProfileImg = styled('img', {
   borderBottomLeftRadius: '50%'
 });
 StyledProfileImg.displayName = "StyledProfileImg";
+StyledProfileImg.displayName = 'StyledProfileImg';
 export const StyledProfileLabelsContainer = styled('div', ({
   $theme: {
     direction,
@@ -186,6 +196,7 @@ export const StyledProfileLabelsContainer = styled('div', ({
   })
 }));
 StyledProfileLabelsContainer.displayName = "StyledProfileLabelsContainer";
+StyledProfileLabelsContainer.displayName = 'StyledProfileLabelsContainer';
 export const StyledProfileTitle = styled('h6', ({
   $theme
 }) => ({ ...$theme.typography.font350,
@@ -196,6 +207,7 @@ export const StyledProfileTitle = styled('h6', ({
   marginRight: 0
 }));
 StyledProfileTitle.displayName = "StyledProfileTitle";
+StyledProfileTitle.displayName = 'StyledProfileTitle';
 export const StyledProfileSubtitle = styled('p', ({
   $theme
 }) => ({ ...$theme.typography.font200,
@@ -206,6 +218,7 @@ export const StyledProfileSubtitle = styled('p', ({
   marginRight: 0
 }));
 StyledProfileSubtitle.displayName = "StyledProfileSubtitle";
+StyledProfileSubtitle.displayName = 'StyledProfileSubtitle';
 export const StyledProfileBody = styled('p', ({
   $theme
 }) => ({ ...$theme.typography.font100,
@@ -215,4 +228,21 @@ export const StyledProfileBody = styled('p', ({
   marginLeft: 0,
   marginRight: 0
 }));
-StyledProfileBody.displayName = "StyledProfileBody";
+StyledProfileBody.displayName = "StyledProfileBody";
+StyledProfileBody.displayName = 'StyledProfileBody';
+export const StyledMenuDivider = styled('li', ({
+  $theme
+}) => ({
+  color: $theme.colors.contentPrimary,
+  borderBottomWidth: $theme.borders.border300.borderWidth,
+  borderBottomStyle: $theme.borders.border300.borderStyle,
+  borderBottomColor: $theme.borders.border300.borderColor,
+  marginTop: $theme.sizing.scale100,
+  marginBottom: $theme.sizing.scale100,
+  marginLeft: $theme.sizing.scale500,
+  marginRight: $theme.sizing.scale500,
+  listStyle: 'none',
+  height: 0
+}));
+StyledMenuDivider.displayName = "StyledMenuDivider";
+StyledProfileBody.displayName = 'StyledMenuDivider';

package/es/message-card/constants.js

@@ -0,0 +1,19 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { KIND } from '../button';
+export const BACKGROUND_COLOR_TYPE = Object.freeze({
+  light: 'light',
+  dark: 'dark'
+});
+export const IMAGE_LAYOUT = Object.freeze({
+  top: 'top',
+  trailing: 'trailing'
+});
+export const BUTTON_KIND = Object.freeze({
+  [KIND.secondary]: KIND.secondary,
+  [KIND.tertiary]: KIND.tertiary
+});

package/es/message-card/index.js

@@ -0,0 +1,10 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export { default as MessageCard } from './message-card';
+export * from './constants';
+export * from './styled-components';
+export * from './types';

package/es/message-card/message-card.js

@@ -0,0 +1,114 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { StyledRoot, StyledImage, StyledContentContainer, StyledHeadingContainer, StyledParagraphContainer } from './styled-components';
+import { Button as DefaultButton, SHAPE, SIZE } from '../button';
+import { useStyletron } from '../styles/index';
+import { ThemeProvider, LightTheme } from '../';
+import { getBackgroundColorType } from './utils';
+import { colors } from '../tokens';
+import { getOverrides } from '../helpers/overrides';
+import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE, BUTTON_KIND } from './constants';
+
+const ButtonAlwaysLightTheme = ({
+  children,
+  ...restProps
+}) => /*#__PURE__*/React.createElement(ThemeProvider, {
+  theme: LightTheme
+}, /*#__PURE__*/React.createElement(DefaultButton, restProps, children));
+
+const MessageCard = ({
+  backgroundColor = colors.white,
+  backgroundColorType: backgroundColorTypeProp,
+  buttonKind = BUTTON_KIND.secondary,
+  buttonLabel,
+  heading,
+  image,
+  onClick,
+  overrides = {},
+  paragraph
+}) => {
+  const {
+    src,
+    layout = IMAGE_LAYOUT.top,
+    backgroundPosition,
+    ariaLabel
+  } = image || {};
+  const [Root, RootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [ContentContainer, ContentContainerProps] = getOverrides(overrides.ContentContainer, StyledContentContainer);
+  const [HeadingContainer, HeadingContainerProps] = getOverrides(overrides.HeadingContainer, StyledHeadingContainer);
+  const [ParagraphContainer, ParagraphContainerProps] = getOverrides(overrides.ParagraphContainer, StyledParagraphContainer);
+  const [Image, ImageProps] = getOverrides(overrides.Image, StyledImage);
+  const [Button, ButtonProps] = getOverrides(overrides.Button, ButtonAlwaysLightTheme);
+  const [, theme] = useStyletron();
+  let backgroundColorType = backgroundColorTypeProp || getBackgroundColorType(backgroundColor);
+
+  if (!backgroundColorType) {
+    backgroundColorType = BACKGROUND_COLOR_TYPE.dark;
+
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`The provided value for 'backgroundColor', ${backgroundColor}, is not recognized as a \
+        Base Web primitive color. Please use the 'backgroundColorType' prop to indicate whether\
+         this color is light or dark so the rest of the component can be styled accordingly.`);
+    }
+  }
+
+  let buttonColors;
+
+  if (buttonKind === BUTTON_KIND.tertiary && backgroundColorType === BACKGROUND_COLOR_TYPE.dark) {
+    buttonColors = {
+      color: theme.colors.contentOnColor,
+      backgroundColor: theme.colors.buttonTertiaryFill
+    };
+  }
+
+  if (buttonKind !== BUTTON_KIND.tertiary && backgroundColor !== colors.white) {
+    buttonColors = {
+      color: theme.colors.contentOnColorInverse,
+      backgroundColor: theme.colors.backgroundAlwaysLight
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    onClick: onClick,
+    $backgroundColor: backgroundColor,
+    $backgroundColorType: backgroundColorType,
+    $imageLayout: layout
+  }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
+    role: "img",
+    "aria-label": ariaLabel,
+    $src: src,
+    $imageLayout: layout,
+    $backgroundPosition: backgroundPosition
+  }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+    $as: "div",
+    kind: buttonKind,
+    shape: SHAPE.pill,
+    size: SIZE.compact,
+    role: "none",
+    tabIndex: -1,
+    colors: buttonColors,
+    overrides: {
+      BaseButton: {
+        style: {
+          textAlign: 'center',
+          pointerEvents: 'none',
+          ...(buttonKind === BUTTON_KIND.tertiary ? {
+            marginTop: theme.sizing.scale100,
+            transform: theme.direction === 'rtl' ? `translateX(${theme.sizing.scale500})` : `translateX(-${theme.sizing.scale500})`
+          } : {
+            marginTop: theme.sizing.scale500
+          })
+        }
+      }
+    }
+  }, ButtonProps), buttonLabel)));
+};
+
+export default MessageCard;

package/es/message-card/styled-components.js

@@ -0,0 +1,108 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { styled } from '../styles';
+import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE } from './constants';
+export const StyledRoot = styled('button', ({
+  $theme,
+  $backgroundColor,
+  $backgroundColorType,
+  $imageLayout = IMAGE_LAYOUT.top
+}) => {
+  const lightBackgroundStyle = {
+    color: $theme.colors.contentOnColorInverse,
+    borderStyle: 'solid',
+    borderWidth: $theme.sizing.scale0,
+    borderColor: $theme.colors.borderOpaque
+  };
+  const darkBackgroundStyle = {
+    color: $theme.colors.contentOnColor,
+    border: 'none'
+  };
+  return {
+    alignItems: 'stretch',
+    backgroundColor: $backgroundColor,
+    borderRadius: $theme.borders.radius400,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: $imageLayout === IMAGE_LAYOUT.top ? 'column' : 'row',
+    overflow: 'hidden',
+    padding: '0',
+    position: 'relative',
+    textAlign: 'start',
+    width: '100%',
+    boxShadow: `inset 999px 999px 0px ${$theme.colors.backgroundOverlayArt}`,
+    ...($backgroundColorType === BACKGROUND_COLOR_TYPE.light ? lightBackgroundStyle : darkBackgroundStyle),
+    ':focus': {
+      outlineWidth: '3px',
+      outlineStyle: 'solid',
+      outlineColor: $theme.colors.borderAccent,
+      outlineOffset: '-3px'
+    },
+    ':hover:after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      zIndex: '1',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.10)'
+    },
+    ':active:after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      zIndex: '1',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.20)'
+    }
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+export const StyledImage = styled('div', ({
+  $imageLayout = IMAGE_LAYOUT.top,
+  $backgroundPosition = 'center',
+  $src
+}) => {
+  return {
+    backgroundImage: `url(${$src})`,
+    backgroundSize: 'cover',
+    backgroundPosition: $backgroundPosition,
+    ...($imageLayout === IMAGE_LAYOUT.top ? {
+      height: '132px',
+      width: '100%'
+    } : {
+      width: '112px',
+      order: '1'
+    })
+  };
+});
+StyledImage.displayName = "StyledImage";
+export const StyledContentContainer = styled('div', ({
+  $theme
+}) => ({
+  width: '100%',
+  boxSizing: 'border-box',
+  paddingTop: $theme.sizing.scale600,
+  paddingRight: $theme.sizing.scale300,
+  paddingBottom: $theme.sizing.scale600,
+  paddingLeft: $theme.sizing.scale600
+}));
+StyledContentContainer.displayName = "StyledContentContainer";
+export const StyledHeadingContainer = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.HeadingXSmall
+}));
+StyledHeadingContainer.displayName = "StyledHeadingContainer";
+export const StyledParagraphContainer = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.ParagraphSmall,
+  marginTop: $theme.sizing.scale100
+}));
+StyledParagraphContainer.displayName = "StyledParagraphContainer";

package/es/message-card/types.js

@@ -0,0 +1 @@
+export {};

package/es/message-card/utils.js

@@ -0,0 +1,27 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { colors } from '../tokens';
+import { BACKGROUND_COLOR_TYPE } from './constants';
+const LIGHT_COLORS = new Set([colors.red50, colors.red100, colors.red200, colors.red300, colors.green50, colors.green100, colors.green200, colors.green300, colors.teal50, colors.teal100, colors.teal200, colors.teal300, colors.blue50, colors.blue100, colors.blue200, colors.blue300, colors.cobalt50, colors.cobalt100, colors.cobalt200, colors.purple50, colors.purple100, colors.purple200, colors.purple300, colors.magenta50, colors.magenta100, colors.magenta200, colors.magenta300, colors.brown50, colors.brown100, colors.brown200, colors.brown300, colors.orange50, colors.orange100, colors.orange200, colors.orange300, colors.orange400, colors.lime50, colors.lime100, colors.lime200, colors.lime300, colors.lime400, colors.platinum50, colors.platinum100, colors.platinum200, colors.platinum300, colors.platinum400, colors.yellow50, colors.yellow100, colors.yellow200, colors.yellow300, colors.yellow400, colors.yellow500, colors.white, colors.gray50, colors.gray100, colors.gray200, colors.gray300, colors.gray400]);
+const DARK_COLORS = new Set([colors.red400, colors.red500, colors.red600, colors.red700, colors.green400, colors.green500, colors.green600, colors.green700, colors.teal400, colors.teal500, colors.teal600, colors.teal700, colors.blue400, colors.blue500, colors.blue600, colors.blue700, colors.cobalt300, colors.cobalt400, colors.cobalt500, colors.cobalt600, colors.cobalt700, colors.purple400, colors.purple500, colors.purple600, colors.purple700, colors.magenta400, colors.magenta500, colors.magenta600, colors.magenta700, colors.brown400, colors.brown500, colors.brown600, colors.brown700, colors.orange500, colors.orange600, colors.orange700, colors.lime500, colors.lime600, colors.lime700, colors.platinum500, colors.platinum600, colors.platinum700, colors.platinum800, colors.yellow600, colors.yellow700, colors.gray500, colors.gray600, colors.gray700, colors.gray800, colors.gray900, colors.black]);
+const POOR_CONTRAST_COLORS = new Set([colors.red300, colors.gray500, colors.yellow600]);
+export function getBackgroundColorType(backgroundColor) {
+  if (process.env.NODE_ENV !== "production" && POOR_CONTRAST_COLORS.has(backgroundColor)) {
+    console.warn(`The provided value for backgroundColor, ${backgroundColor}, is not supported because \
+        it does not pass accessibility contrast tests for either white or black text.`);
+  }
+
+  if (LIGHT_COLORS.has(backgroundColor)) {
+    return BACKGROUND_COLOR_TYPE.light;
+  }
+
+  if (DARK_COLORS.has(backgroundColor)) {
+    return BACKGROUND_COLOR_TYPE.dark;
+  }
+
+  return null;
+}

package/es/modal/modal.js

@@ -10,8 +10,6 @@ LICENSE file in the root directory of this source tree.
 */
 
 /* global document */
-
-/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import FocusLock from 'react-focus-lock';
 import { LocaleContext } from '../locale';
@@ -153,7 +151,6 @@ class Modal extends React.Component {
     }
 
     if (this.animateStartTimer) {
-      // eslint-disable-next-line cup/no-undef
       cancelAnimationFrame(this.animateStartTimer);
     }
   }
@@ -169,8 +166,7 @@ class Modal extends React.Component {
 
 
     this.clearTimers();
-    this.disableMountNodeScroll(); // eslint-disable-next-line cup/no-undef
-
+    this.disableMountNodeScroll();
     this.animateStartTimer = requestAnimationFrame(() => {
       this.setState({
         isVisible: true
@@ -219,6 +215,7 @@ class Modal extends React.Component {
     if (mountNode) {
       return mountNode;
     } // Flow thinks body could be null (cast through any)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
     return document.body;
@@ -261,7 +258,8 @@ class Modal extends React.Component {
     }, /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "modal",
       ref: this.rootRef
-    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer, _extends({
+    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    , _extends({
       ref: this.dialogContainerRef
     }, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
       tabIndex: -1,

package/es/modal/styled-components.js

@@ -43,6 +43,7 @@ export const Root = styled('div', props => {
   };
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export const DialogContainer = styled('div', props => {
   const {
     $animate,
@@ -71,6 +72,7 @@ export const DialogContainer = styled('div', props => {
   };
 });
 DialogContainer.displayName = "DialogContainer";
+DialogContainer.displayName = 'DialogContainer';
 export const Dialog = styled('div', props => {
   const {
     $animate,
@@ -109,6 +111,7 @@ export const Dialog = styled('div', props => {
   };
 });
 Dialog.displayName = "Dialog";
+Dialog.displayName = 'Dialog';
 export const Close = styled('button', props => {
   const {
     $theme,
@@ -158,6 +161,7 @@ export const Close = styled('button', props => {
   };
 });
 Close.displayName = "Close";
+Close.displayName = 'Close';
 export const ModalHeader = styled('div', ({
   $theme
 }) => {
@@ -173,6 +177,7 @@ export const ModalHeader = styled('div', ({
   };
 });
 ModalHeader.displayName = "ModalHeader";
+ModalHeader.displayName = 'ModalHeader';
 export const ModalBody = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font200,
@@ -183,6 +188,7 @@ export const ModalBody = styled('div', ({
   marginBottom: $theme.sizing.scale700
 }));
 ModalBody.displayName = "ModalBody";
+ModalBody.displayName = 'ModalBody';
 export const ModalFooter = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font200,
@@ -193,4 +199,5 @@ export const ModalFooter = styled('div', ({
   paddingBottom: $theme.sizing.scale500,
   textAlign: $theme.direction === 'rtl' ? 'left' : 'right'
 }));
-ModalFooter.displayName = "ModalFooter";
+ModalFooter.displayName = "ModalFooter";
+ModalFooter.displayName = 'ModalFooter';

package/es/pagination/stateful-container.js

@@ -74,5 +74,6 @@ export default class PaginationStatefulContainer extends React.Component {
 
 _defineProperty(PaginationStatefulContainer, "defaultProps", {
   initialState,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   stateReducer: (changeType, changes) => changes
 });

package/es/pagination/stateful-pagination.js

@@ -29,6 +29,7 @@ StatefulPagination.defaultProps = {
   initialState: {
     currentPage: 1
   },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   stateReducer: (changeType, changes) => changes,
   overrides: {}
 };

package/es/pagination/styled-components.js

@@ -14,6 +14,7 @@ export const StyledRoot = styled('div', ({
   ...$theme.typography.font350
 }));
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledMaxLabel = styled('span', ({
   $theme
 }) => {
@@ -25,6 +26,7 @@ export const StyledMaxLabel = styled('span', ({
   };
 });
 StyledMaxLabel.displayName = "StyledMaxLabel";
+StyledMaxLabel.displayName = 'StyledMaxLabel';
 export const StyledDropdownContainer = styled('div', ({
   $theme,
   $isFocusVisible
@@ -38,4 +40,5 @@ export const StyledDropdownContainer = styled('div', ({
     [marginEndDir]: $theme.sizing.scale300
   };
 });
-StyledDropdownContainer.displayName = "StyledDropdownContainer";
+StyledDropdownContainer.displayName = "StyledDropdownContainer";
+StyledDropdownContainer.displayName = 'StyledDropdownContainer';

package/es/payment-card/styled-components.js

@@ -24,4 +24,5 @@ export const IconWrapper = styled('div', props => {
     alignItems: 'center'
   };
 });
-IconWrapper.displayName = "IconWrapper";
+IconWrapper.displayName = "IconWrapper";
+IconWrapper.displayName = 'IconWrapper';

package/es/phone-input/base-country-picker.js

@@ -27,6 +27,7 @@ CountryPicker.defaultProps = {
   required: defaultProps.required
 };
 const DropdownListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {
     children,
     ...rest
@@ -152,7 +153,8 @@ export default function CountryPicker(props) {
   const [Dialcode, dialcodeProps] = getOverrides(overrides.CountrySelectDropdownDialcodeColumn, DefaultDialcodeColumn);
   return /*#__PURE__*/React.createElement(Select, _extends({
     clearable: false,
-    disabled: disabled,
+    disabled: disabled // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ,
     getOptionLabel: ({
       option,
       optionState