baseui 0.0.0-alpha-3479e57 → 0.0.0-alpha-e79754d

package/es/map-marker/styled-components.js

@@ -5,7 +5,7 @@ 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 { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES, EARNER_LOCATION_PUCK_CORE_SCALES } from './constants';
+import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES } from './constants';
 export const getAnchorTransform = (anchor, anchorSize) => ({
   [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
   [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
@@ -28,7 +28,6 @@ export const StyledDragShadowContainer = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
-StyledDragShadowContainer.displayName = 'StyledDragShadowContainer';
 export const StyledDragShadow = styled('div', ({
   $theme,
   $background,
@@ -42,7 +41,6 @@ export const StyledDragShadow = styled('div', ({
   bottom: 0
 }));
 StyledDragShadow.displayName = "StyledDragShadow";
-StyledDragShadow.displayName = 'StyledDragShadow';
 export const StyledNeedle = styled('div', ({
   $theme,
   $background,
@@ -54,7 +52,6 @@ export const StyledNeedle = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledNeedle.displayName = "StyledNeedle";
-StyledNeedle.displayName = 'StyledNeedle';
 export const StyledFloatingMarkerRoot = styled('div', ({
   $size
 }) => ({
@@ -63,7 +60,6 @@ export const StyledFloatingMarkerRoot = styled('div', ({
   width: `${$size}px`
 }));
 StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
-StyledFloatingMarkerRoot.displayName = 'StyledFloatingMarkerRoot';
 export const StyledFloatingMarkerPinHeadContainer = styled('div', ({
   $theme,
   $anchor,
@@ -74,19 +70,16 @@ export const StyledFloatingMarkerPinHeadContainer = styled('div', ({
   transform: getAnchorTransform($anchor, $anchorSize)
 }));
 StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
-StyledFloatingMarkerPinHeadContainer.displayName = 'StyledFloatingMarkerPinHeadContainer';
 export const StyledFloatingMarkerAnchorContainer = styled('div', () => ({
   position: 'absolute'
 }));
 StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
-StyledFloatingMarkerAnchorContainer.displayName = 'StyledFloatingMarkerAnchorContainer';
 export const StyledFixedMarkerRoot = styled('div', () => ({
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column'
 }));
 StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
-StyledFixedMarkerRoot.displayName = 'StyledFixedMarkerRoot';
 export const StyledFixedMarkerDragContainer = styled('div', ({
   $theme,
   $translateAmount,
@@ -101,7 +94,6 @@ export const StyledFixedMarkerDragContainer = styled('div', ({
   };
 });
 StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
-StyledFixedMarkerDragContainer.displayName = 'StyledFixedMarkerDragContainer';
 export const StyledOuterXXSmallAnchor = styled('div', ({
   $theme,
   $round,
@@ -118,7 +110,6 @@ export const StyledOuterXXSmallAnchor = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
-StyledOuterXXSmallAnchor.displayName = 'StyledOuterXXSmallAnchor';
 export const StyledInnerXXSmallAnchor = styled('div', ({
   $round,
   $color,
@@ -130,7 +121,6 @@ export const StyledInnerXXSmallAnchor = styled('div', ({
   borderRadius: $round ? '50%' : 0
 }));
 StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
-StyledInnerXXSmallAnchor.displayName = 'StyledInnerXXSmallAnchor';
 export const StyledOuterXSmallAnchor = styled('div', ({
   $theme,
   $round,
@@ -147,7 +137,6 @@ export const StyledOuterXSmallAnchor = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
-StyledOuterXSmallAnchor.displayName = 'StyledOuterXSmallAnchor';
 export const StyledInnerXSmallAnchor = styled('div', ({
   $round,
   $color,
@@ -159,7 +148,6 @@ export const StyledInnerXSmallAnchor = styled('div', ({
   borderRadius: $round ? '50%' : 0
 }));
 StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
-StyledInnerXSmallAnchor.displayName = 'StyledInnerXSmallAnchor';
 export const StyledPinHead = styled('div', ({
   $theme,
   $height,
@@ -195,7 +183,6 @@ export const StyledPinHead = styled('div', ({
   };
 });
 StyledPinHead.displayName = "StyledPinHead";
-StyledPinHead.displayName = 'StyledPinHead';
 export const StyledStrokedLabelContainer = styled('div', ({
   $position,
   $theme,
@@ -242,7 +229,6 @@ export const StyledStrokedLabelContainer = styled('div', ({
   };
 });
 StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
-StyledStrokedLabelContainer.displayName = 'StyledStrokedLabelContainer';
 export const StyledStrokedLabel = styled('div', ({
   $theme,
   $size
@@ -269,7 +255,6 @@ export const StyledStrokedLabel = styled('div', ({
   };
 });
 StyledStrokedLabel.displayName = "StyledStrokedLabel";
-StyledStrokedLabel.displayName = 'StyledStrokedLabel';
 export const StyledBadgeEnhancerRoot = styled('div', ({
   $theme,
   $size,
@@ -292,14 +277,12 @@ export const StyledBadgeEnhancerRoot = styled('div', ({
   };
 });
 StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
-StyledBadgeEnhancerRoot.displayName = 'StyledBadgeEnhancerRoot';
 export const RelativeContainer = styled('div', () => {
   return {
     position: 'relative'
   };
 });
 RelativeContainer.displayName = "RelativeContainer";
-RelativeContainer.displayName = 'RelativeContainer';
 export const StyledContentItem = styled('div', ({
   $theme,
   $color,
@@ -315,71 +298,4 @@ export const StyledContentItem = styled('div', ({
     color: $color
   };
 });
-StyledContentItem.displayName = "StyledContentItem";
-StyledContentItem.displayName = 'StyledContentItem';
-export const LocationPuckContainer = styled('div', () => {
-  return {
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  };
-});
-LocationPuckContainer.displayName = "LocationPuckContainer";
-LocationPuckContainer.displayName = 'LocationPuckContainer';
-export const consumerLocationShadow = {
-  boxShadow: `0px 2px 4px 0px rgba(67, 76, 123, 0.2)`
-};
-export const earnerLocationShadow = {
-  boxShadow: `0px 3px 5px 0px rgba(67, 76, 123, 0.4)`
-};
-export const StyledConsumerLocationPuckCore = styled('div', ({
-  $theme
-}) => {
-  return {
-    height: `${12}px`,
-    width: `${12}px`,
-    background: $theme.colors.contentAccent,
-    borderRadius: `${100}px `,
-    position: 'absolute',
-    ...consumerLocationShadow
-  };
-});
-StyledConsumerLocationPuckCore.displayName = "StyledConsumerLocationPuckCore";
-export const StyledLocationPuckApproximation = styled('div', ({
-  $theme,
-  $color,
-  $radius
-}) => {
-  return {
-    background: $color,
-    opacity: 0.12,
-    height: `${$radius / 2}px`,
-    width: `${$radius / 2}px`,
-    borderRadius: `${10000}px `,
-    position: 'absolute',
-    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`
-  };
-});
-StyledLocationPuckApproximation.displayName = "StyledLocationPuckApproximation";
-StyledLocationPuckApproximation.displayName = 'StyledLocationPuckApproximation';
-export const StyledEarnerLocationPuckCore = styled('div', ({
-  $theme,
-  $color,
-  $size
-}) => {
-  return {
-    position: 'absolute',
-    transform: `scale(${EARNER_LOCATION_PUCK_CORE_SCALES[$size]})`,
-    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
-    ...earnerLocationShadow,
-    borderRadius: '50%',
-    height: `${72}px`,
-    width: `${72}px`,
-    background: $theme.colors.backgroundPrimary,
-    border: `${6}px solid ${$color}`,
-    boxSizing: 'border-box'
-  };
-});
-StyledEarnerLocationPuckCore.displayName = "StyledEarnerLocationPuckCore";
-StyledEarnerLocationPuckCore.displayName = 'StyledEarnerLocationPuckCore';
+StyledContentItem.displayName = "StyledContentItem";

package/es/menu/menu.js

@@ -22,7 +22,6 @@ export default function Menu(props) {
     focusMenu = () => {},
     unfocusMenu = () => {},
     handleMouseLeave = () => {},
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     handleKeyDown = event => {},
     renderAll = false
   } = props;
@@ -32,8 +31,7 @@ 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) {
@@ -54,12 +52,10 @@ 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; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+      itemIndex = itemIndex + 1;
       const {
         getRequiredItemProps = (item, index) => ({})
       } = props;

package/es/menu/option-profile.js

@@ -12,7 +12,6 @@ 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,23 +384,14 @@ 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;
@@ -411,7 +402,6 @@ 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,7 +34,6 @@ export const StyledList = styled('ul', ({
   };
 });
 StyledList.displayName = "StyledList";
-StyledList.displayName = 'StyledList';
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -84,7 +83,6 @@ 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;
@@ -97,7 +95,6 @@ export const StyledOptgroupHeader = styled('li', props => {
   };
 });
 StyledOptgroupHeader.displayName = "StyledOptgroupHeader";
-StyledOptgroupHeader.displayName = 'StyledOptgroupHeader';
 export const StyledListItemAnchor = styled('a', props => {
   return {
     display: 'block',
@@ -105,7 +102,6 @@ export const StyledListItemAnchor = styled('a', props => {
   };
 });
 StyledListItemAnchor.displayName = "StyledListItemAnchor";
-StyledListItemAnchor.displayName = 'StyledListItemAnchor';
 export const StyledListItemElement = styled('li', props => {
   const {
     $disabled,
@@ -132,9 +128,7 @@ export const StyledListItemElement = styled('li', props => {
   };
 });
 StyledListItemElement.displayName = "StyledListItemElement";
-StyledListItemElement.displayName = 'StyledListItemElement';
-export const StyledListItem = withWrapper(StyledListItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function StyledListItem({
+export const StyledListItem = withWrapper(StyledListItemElement, Styled => function StyledListItem({
   item,
   ...restProps
 }) {
@@ -159,7 +153,6 @@ export const StyledListItemProfile = styled('li', ({
   }
 }));
 StyledListItemProfile.displayName = "StyledListItemProfile";
-StyledListItemProfile.displayName = 'StyledListItemProfile';
 export const StyledProfileImgContainer = styled('div', {
   width: '60px',
   height: '60px',
@@ -168,7 +161,6 @@ export const StyledProfileImgContainer = styled('div', {
   alignItems: 'center'
 });
 StyledProfileImgContainer.displayName = "StyledProfileImgContainer";
-StyledProfileImgContainer.displayName = 'StyledProfileImgContainer';
 export const StyledProfileImg = styled('img', {
   width: '100%',
   height: '100%',
@@ -178,7 +170,6 @@ export const StyledProfileImg = styled('img', {
   borderBottomLeftRadius: '50%'
 });
 StyledProfileImg.displayName = "StyledProfileImg";
-StyledProfileImg.displayName = 'StyledProfileImg';
 export const StyledProfileLabelsContainer = styled('div', ({
   $theme: {
     direction,
@@ -195,7 +186,6 @@ export const StyledProfileLabelsContainer = styled('div', ({
   })
 }));
 StyledProfileLabelsContainer.displayName = "StyledProfileLabelsContainer";
-StyledProfileLabelsContainer.displayName = 'StyledProfileLabelsContainer';
 export const StyledProfileTitle = styled('h6', ({
   $theme
 }) => ({ ...$theme.typography.font350,
@@ -206,7 +196,6 @@ export const StyledProfileTitle = styled('h6', ({
   marginRight: 0
 }));
 StyledProfileTitle.displayName = "StyledProfileTitle";
-StyledProfileTitle.displayName = 'StyledProfileTitle';
 export const StyledProfileSubtitle = styled('p', ({
   $theme
 }) => ({ ...$theme.typography.font200,
@@ -217,7 +206,6 @@ export const StyledProfileSubtitle = styled('p', ({
   marginRight: 0
 }));
 StyledProfileSubtitle.displayName = "StyledProfileSubtitle";
-StyledProfileSubtitle.displayName = 'StyledProfileSubtitle';
 export const StyledProfileBody = styled('p', ({
   $theme
 }) => ({ ...$theme.typography.font100,
@@ -227,5 +215,4 @@ export const StyledProfileBody = styled('p', ({
   marginLeft: 0,
   marginRight: 0
 }));
-StyledProfileBody.displayName = "StyledProfileBody";
-StyledProfileBody.displayName = 'StyledProfileBody';
+StyledProfileBody.displayName = "StyledProfileBody";

package/es/modal/modal.js

@@ -10,6 +10,8 @@ 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';
@@ -151,6 +153,7 @@ class Modal extends React.Component {
     }
 
     if (this.animateStartTimer) {
+      // eslint-disable-next-line cup/no-undef
       cancelAnimationFrame(this.animateStartTimer);
     }
   }
@@ -166,7 +169,8 @@ class Modal extends React.Component {
 
 
     this.clearTimers();
-    this.disableMountNodeScroll();
+    this.disableMountNodeScroll(); // eslint-disable-next-line cup/no-undef
+
     this.animateStartTimer = requestAnimationFrame(() => {
       this.setState({
         isVisible: true
@@ -215,7 +219,6 @@ 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;
@@ -258,8 +261,7 @@ class Modal extends React.Component {
     }, /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "modal",
       ref: this.rootRef
-    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    , _extends({
+    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer, _extends({
       ref: this.dialogContainerRef
     }, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
       tabIndex: -1,

package/es/modal/styled-components.js

@@ -43,7 +43,6 @@ export const Root = styled('div', props => {
   };
 });
 Root.displayName = "Root";
-Root.displayName = 'Root';
 export const DialogContainer = styled('div', props => {
   const {
     $animate,
@@ -72,7 +71,6 @@ export const DialogContainer = styled('div', props => {
   };
 });
 DialogContainer.displayName = "DialogContainer";
-DialogContainer.displayName = 'DialogContainer';
 export const Dialog = styled('div', props => {
   const {
     $animate,
@@ -111,7 +109,6 @@ export const Dialog = styled('div', props => {
   };
 });
 Dialog.displayName = "Dialog";
-Dialog.displayName = 'Dialog';
 export const Close = styled('button', props => {
   const {
     $theme,
@@ -161,7 +158,6 @@ export const Close = styled('button', props => {
   };
 });
 Close.displayName = "Close";
-Close.displayName = 'Close';
 export const ModalHeader = styled('div', ({
   $theme
 }) => {
@@ -177,7 +173,6 @@ export const ModalHeader = styled('div', ({
   };
 });
 ModalHeader.displayName = "ModalHeader";
-ModalHeader.displayName = 'ModalHeader';
 export const ModalBody = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font200,
@@ -188,7 +183,6 @@ export const ModalBody = styled('div', ({
   marginBottom: $theme.sizing.scale700
 }));
 ModalBody.displayName = "ModalBody";
-ModalBody.displayName = 'ModalBody';
 export const ModalFooter = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font200,
@@ -199,5 +193,4 @@ 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,6 +74,5 @@ 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,7 +29,6 @@ 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,7 +14,6 @@ export const StyledRoot = styled('div', ({
   ...$theme.typography.font350
 }));
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 export const StyledMaxLabel = styled('span', ({
   $theme
 }) => {
@@ -26,7 +25,6 @@ export const StyledMaxLabel = styled('span', ({
   };
 });
 StyledMaxLabel.displayName = "StyledMaxLabel";
-StyledMaxLabel.displayName = 'StyledMaxLabel';
 export const StyledDropdownContainer = styled('div', ({
   $theme,
   $isFocusVisible
@@ -40,5 +38,4 @@ 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,5 +24,4 @@ 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,7 +27,6 @@ CountryPicker.defaultProps = {
   required: defaultProps.required
 };
 const DropdownListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {
     children,
     ...rest
@@ -153,8 +152,7 @@ export default function CountryPicker(props) {
   const [Dialcode, dialcodeProps] = getOverrides(overrides.CountrySelectDropdownDialcodeColumn, DefaultDialcodeColumn);
   return /*#__PURE__*/React.createElement(Select, _extends({
     clearable: false,
-    disabled: disabled // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ,
+    disabled: disabled,
     getOptionLabel: ({
       option,
       optionState

package/es/phone-input/country-select-dropdown.js

@@ -63,7 +63,6 @@ function CountrySelectDropdown(props) {
         style
       }) => {
         // resetMenu and getItemLabel should not end up on native html elements
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const {
           item,
           resetMenu,

package/es/phone-input/styled-components.js

@@ -15,7 +15,6 @@ export const StyledPhoneInputRoot = styled('div', {
   display: 'flex'
 });
 StyledPhoneInputRoot.displayName = "StyledPhoneInputRoot";
-StyledPhoneInputRoot.displayName = 'StyledPhoneInputRoot';
 export const StyledFlagContainer = styled('span', ({
   $size = SIZE.default,
   $theme: {
@@ -31,10 +30,9 @@ export const StyledFlagContainer = styled('span', ({
   return {
     fontSize: sizeToFont[$size]
   };
-});
-StyledFlagContainer.displayName = "StyledFlagContainer";
-StyledFlagContainer.displayName = 'StyledFlagContainer'; // An override component for the Select's Root styled element
+}); // An override component for the Select's Root styled element
 
+StyledFlagContainer.displayName = "StyledFlagContainer";
 export const StyledRoot = withStyle(SelectStyledRoot, props => {
   // hard coded widths for the flag dropdown anchor
   const sizeToWidth = {
@@ -49,7 +47,6 @@ export const StyledRoot = withStyle(SelectStyledRoot, props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 export const StyledDialCode = styled('div', ({
   $theme: {
     direction,
@@ -64,13 +61,11 @@ export const StyledDialCode = styled('div', ({
   };
 });
 StyledDialCode.displayName = "StyledDialCode";
-StyledDialCode.displayName = 'StyledDialCode';
 export const StyledCountrySelectContainer = styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
 StyledCountrySelectContainer.displayName = "StyledCountrySelectContainer";
-StyledCountrySelectContainer.displayName = 'StyledCountrySelectContainer';
 export const StyledCountrySelectDropdownContainer = withStyle(StyledList, props => {
   const {
     $height = defaultProps.maxDropdownHeight
@@ -82,7 +77,6 @@ export const StyledCountrySelectDropdownContainer = withStyle(StyledList, props
   };
 });
 StyledCountrySelectDropdownContainer.displayName = "StyledCountrySelectDropdownContainer";
-StyledCountrySelectDropdownContainer.displayName = 'StyledCountrySelectDropdownContainer';
 export const StyledCountrySelectDropdownListItemElement = withStyle(StyledDropdownListItem, {
   paddingTop: 0,
   paddingBottom: 0,
@@ -93,9 +87,7 @@ export const StyledCountrySelectDropdownListItemElement = withStyle(StyledDropdo
   height: '42px'
 });
 StyledCountrySelectDropdownListItemElement.displayName = "StyledCountrySelectDropdownListItemElement";
-StyledCountrySelectDropdownListItemElement.displayName = 'StyledCountrySelectDropdownListItemElement';
-export const StyledCountrySelectDropdownListItem = withWrapper(StyledCountrySelectDropdownListItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function StyledCountrySelectDropdownListItem({
+export const StyledCountrySelectDropdownListItem = withWrapper(StyledCountrySelectDropdownListItemElement, Styled => function StyledCountrySelectDropdownListItem({
   item,
   ...restProps
 }) {
@@ -115,7 +107,6 @@ export const StyledCountrySelectDropdownFlagColumn = styled('div', ({
   };
 });
 StyledCountrySelectDropdownFlagColumn.displayName = "StyledCountrySelectDropdownFlagColumn";
-StyledCountrySelectDropdownFlagColumn.displayName = 'StyledCountrySelectDropdownFlagColumn';
 export const StyledCountrySelectDropdownNameColumn = styled('div', ({
   $theme: {
     direction,
@@ -128,7 +119,6 @@ export const StyledCountrySelectDropdownNameColumn = styled('div', ({
   };
 });
 StyledCountrySelectDropdownNameColumn.displayName = "StyledCountrySelectDropdownNameColumn";
-StyledCountrySelectDropdownNameColumn.displayName = 'StyledCountrySelectDropdownNameColumn';
 export const StyledCountrySelectDropdownDialcodeColumn = styled('div', ({
   $theme: {
     direction,
@@ -142,5 +132,4 @@ export const StyledCountrySelectDropdownDialcodeColumn = styled('div', ({
     [marginDir]: 'auto'
   };
 });
-StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";
-StyledCountrySelectDropdownDialcodeColumn.displayName = 'StyledCountrySelectDropdownDialcodeColumn';
+StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";

package/es/pin-code/styled-components.js

@@ -11,7 +11,6 @@ export const StyledRoot = styled('div', {
   alignItems: 'center'
 });
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 export const StyledInputOverrideRoot = withStyle(StyledInputRoot, ({
   $size = SIZE.default
 }) => {
@@ -27,11 +26,9 @@ export const StyledInputOverrideRoot = withStyle(StyledInputRoot, ({
   };
 });
 StyledInputOverrideRoot.displayName = "StyledInputOverrideRoot";
-StyledInputOverrideRoot.displayName = 'StyledInputOverrideRoot';
 export const StyledInputOverrideInput = withStyle(StyledInputInput, {
   textAlign: 'center',
   paddingLeft: '0',
   paddingRight: '0'
 });
-StyledInputOverrideInput.displayName = "StyledInputOverrideInput";
-StyledInputOverrideInput.displayName = 'StyledInputOverrideInput';
+StyledInputOverrideInput.displayName = "StyledInputOverrideInput";