baseui 12.1.3 → 13.0.0

package/page-control/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/pagination/index.d.ts

@@ -9,6 +9,6 @@ export { STATE_CHANGE_TYPE } from './constants';
 export * from './types';
 export type { PaginationLocale } from './locale';
 /** @deprecated use StatefulContainerState instead. To be removed in future versions.*/
-export declare type State = StatefulContainerState;
+export type State = StatefulContainerState;
 /** @deprecated use StateReducerFn instead. To be removed in future versions.*/
-export declare type StateReducer = StateReducerFn;
+export type StateReducer = StateReducerFn;

package/pagination/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type PaginationLocale = {
+export type PaginationLocale = {
     prev: string;
     next: string;
     preposition: string;

package/pagination/pagination.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { PaginationProps } from './types';
 import type { Locale } from '../locale';
 import type { SyntheticEvent } from 'react';
-declare type PageOption = {
+type PageOption = {
     label: number;
 };
 export default class Pagination extends React.PureComponent<PaginationProps, {

package/pagination/pagination.js

@@ -115,6 +115,7 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
       var menuOptions = [];
 
       for (var i = 1; i <= numPages; i++) {
+        // @ts-ignore
         menuOptions.push({
           label: i
         });
@@ -217,6 +218,66 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
           Select = _getOverrides8[0],
           selectProps = _getOverrides8[1];
 
+      var defaultSelectOverrides = {
+        ControlContainer: {
+          // @ts-ignore
+          style: function style(_ref) {
+            var $theme = _ref.$theme,
+                $disabled = _ref.$disabled,
+                $isOpen = _ref.$isOpen,
+                $error = _ref.$error;
+            return {
+              borderLeftColor: 'transparent',
+              borderRightColor: 'transparent',
+              borderTopColor: 'transparent',
+              borderBottomColor: 'transparent',
+              boxShadow: 'none',
+              backgroundColor: $disabled ? $theme.colors.buttonDisabledFill : $isOpen ? $theme.colors.buttonTertiaryHover : $error ? $theme.colors.negative50 : $theme.colors.buttonTertiaryFill,
+              ':hover': {
+                backgroundColor: $theme.colors.buttonTertiaryHover
+              }
+            };
+          }
+        },
+        InputContainer: {
+          style: {
+            marginLeft: 0
+          }
+        },
+        ValueContainer: {
+          style: {
+            flexBasis: 'auto'
+          }
+        },
+        SingleValue: {
+          // @ts-ignore
+          style: function style(_ref2) {
+            var $theme = _ref2.$theme;
+            return _objectSpread(_objectSpread({
+              position: 'relative',
+              paddingTop: '0',
+              paddingBottom: '0',
+              paddingLeft: $theme.sizing.scale200,
+              paddingRight: $theme.sizing.scale500,
+              color: $theme.colors.buttonTertiaryText
+            }, $theme.typography.font350), {}, {
+              lineHeight: 'unset'
+            });
+          }
+        },
+        SelectArrow: {
+          // @ts-ignore
+          style: function style(_ref3) {
+            var $theme = _ref3.$theme;
+            return {
+              width: '24px',
+              height: '24px',
+              color: $theme.colors.buttonTertiaryText
+            };
+          }
+        }
+      };
+      selectProps.overrides = (0, _overrides.mergeOverrides)(defaultSelectOverrides, selectProps.overrides);
       var options = this.getMenuOptions(numPages);
       return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
         return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, function (locale) {
@@ -257,63 +318,7 @@ var Pagination = /*#__PURE__*/function (_React$PureComponent) {
               label: currentPage
             }],
             maxDropdownHeight: "200px",
-            size: size,
-            overrides: {
-              ControlContainer: {
-                style: function style(_ref) {
-                  var $theme = _ref.$theme,
-                      $disabled = _ref.$disabled,
-                      $isOpen = _ref.$isOpen,
-                      $error = _ref.$error;
-                  return {
-                    borderLeftColor: 'transparent',
-                    borderRightColor: 'transparent',
-                    borderTopColor: 'transparent',
-                    borderBottomColor: 'transparent',
-                    boxShadow: 'none',
-                    backgroundColor: $disabled ? $theme.colors.buttonDisabledFill : $isOpen ? $theme.colors.buttonTertiaryHover : $error ? $theme.colors.negative50 : $theme.colors.buttonTertiaryFill,
-                    ':hover': {
-                      backgroundColor: $theme.colors.buttonTertiaryHover
-                    }
-                  };
-                }
-              },
-              InputContainer: {
-                style: {
-                  marginLeft: 0
-                }
-              },
-              ValueContainer: {
-                style: {
-                  flexBasis: 'auto'
-                }
-              },
-              SingleValue: {
-                style: function style(_ref2) {
-                  var $theme = _ref2.$theme;
-                  return _objectSpread(_objectSpread({
-                    position: 'relative',
-                    paddingTop: '0',
-                    paddingBottom: '0',
-                    paddingLeft: $theme.sizing.scale200,
-                    paddingRight: $theme.sizing.scale500,
-                    color: $theme.colors.buttonTertiaryText
-                  }, $theme.typography.font350), {}, {
-                    lineHeight: 'unset'
-                  });
-                }
-              },
-              SelectArrow: {
-                style: function style(_ref3) {
-                  var $theme = _ref3.$theme;
-                  return {
-                    width: '24px',
-                    height: '24px',
-                    color: $theme.colors.buttonTertiaryText
-                  };
-                }
-              }
-            }
+            size: size
           }, selectProps))), /*#__PURE__*/React.createElement(MaxLabel, _extends({}, maxLabelProps, {
             "aria-hidden": true
           }), "".concat(labels && labels.preposition ? labels.preposition : locale.pagination.preposition || '', " ").concat(numPages)), /*#__PURE__*/React.createElement(_button.Button, {

package/pagination/types.d.ts

@@ -1,13 +1,13 @@
 import type { Override } from '../helpers/overrides';
 import type { STATE_CHANGE_TYPE } from './constants';
 import type { SIZE } from '../input';
-export declare type Labels = {
+export type Labels = {
     prevButton?: string;
     nextButton?: string;
     preposition?: string;
 };
-export declare type Size = keyof typeof SIZE;
-export declare type Callbacks = {
+export type Size = keyof typeof SIZE;
+export type Callbacks = {
     /** Callback for prev button click. */
     onPrevClick?: (a: {
         event: any;
@@ -22,8 +22,8 @@ export declare type Callbacks = {
         prevPage: number;
     }) => any;
 };
-export declare type StateReducerFn = (changeType: keyof typeof STATE_CHANGE_TYPE, changes: StatefulContainerState, currentState: StatefulContainerState) => StatefulContainerState;
-export declare type PaginationOverrides = {
+export type StateReducerFn = (changeType: keyof typeof STATE_CHANGE_TYPE, changes: StatefulContainerState, currentState: StatefulContainerState) => StatefulContainerState;
+export type PaginationOverrides = {
     Root?: Override;
     PrevButton?: Override;
     NextButton?: Override;
@@ -31,7 +31,7 @@ export declare type PaginationOverrides = {
     DropdownContainer?: Override;
     Select?: Override;
 };
-export declare type PaginationProps = Callbacks & {
+export type PaginationProps = Callbacks & {
     /** Max number of pages. */
     numPages: number;
     /** The current page. */
@@ -41,7 +41,7 @@ export declare type PaginationProps = Callbacks & {
     overrides?: PaginationOverrides;
     size?: Size;
 };
-export declare type StatefulPaginationProps = Callbacks & {
+export type StatefulPaginationProps = Callbacks & {
     /** Max number of pages. */
     numPages: number;
     /** Set of labels to use for the buttons and preposition. */
@@ -53,7 +53,7 @@ export declare type StatefulPaginationProps = Callbacks & {
     overrides?: PaginationOverrides;
     size?: Size;
 };
-export declare type StatefulContainerProps = {
+export type StatefulContainerProps = {
     children: any;
     numPages: number;
     /** Reducer function to manipulate internal state updates. */
@@ -63,6 +63,6 @@ export declare type StatefulContainerProps = {
     /** Callback for when page changes. */
     onPageChange?: Callbacks['onPageChange'];
 };
-export declare type StatefulContainerState = {
+export type StatefulContainerState = {
     currentPage: number;
 };

package/payment-card/payment-card.js

@@ -176,7 +176,8 @@ var PaymentCard = /*#__PURE__*/function (_React$Component) {
       if (validatedValue.card) {
         gaps = validatedValue.card.gaps || [];
         type = validatedValue.card.type;
-      }
+      } // @ts-ignore
+
 
       var getBeforeComponent = function getBeforeComponent(theme) {
         var _iconSize;
@@ -204,7 +205,8 @@ var PaymentCard = /*#__PURE__*/function (_React$Component) {
               Before: getBeforeComponent(theme)
             })),
             onChange: function onChange(e) {
-              var _getCaretPosition = (0, _utils.getCaretPosition)(e.target.value, _this2.props.value ? String(_this2.props.value) : '', e.target.selectionStart),
+              var _getCaretPosition = (0, _utils.getCaretPosition)(e.target.value, _this2.props.value ? String(_this2.props.value) : '', // @ts-ignore
+              e.target.selectionStart),
                   _getCaretPosition2 = _slicedToArray(_getCaretPosition, 2),
                   position = _getCaretPosition2[0],
                   value = _getCaretPosition2[1]; // @ts-expect-error todo(flow->ts): looks dangerous
@@ -237,7 +239,9 @@ _defineProperty(PaymentCard, "defaultProps", {
   overrides: {},
   required: false,
   size: 'default',
+  // @ts-ignore
   startEnhancer: null,
+  // @ts-ignore
   endEnhancer: null
 });
 

package/payment-card/types.d.ts

@@ -1,11 +1,11 @@
 import type { InputOverrides, InputProps, StInputPropsDiff } from '../input';
 import type { Override } from '../helpers/overrides';
-export declare type PaymentCardOverrides = {
+export type PaymentCardOverrides = {
     IconWrapper?: Override;
 } & InputOverrides;
-export declare type PaymentCardProps = {
+export type PaymentCardProps = {
     overrides: PaymentCardOverrides;
 } & InputProps;
-export declare type StatefulPaymentCardProps = {
+export type StatefulPaymentCardProps = {
     overrides?: PaymentCardOverrides;
 } & StInputPropsDiff;

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

@@ -77,7 +77,7 @@ var DropdownListItem = /*#__PURE__*/_react.default.forwardRef(function (props, r
   }, rest), props.children);
 });
 
-DropdownListItem.displayName = 'DropdownListItem';
+DropdownListItem.displayName = 'DropdownListItem'; // @ts-ignore
 
 function DropdownOptionContent(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
@@ -140,6 +140,7 @@ function CountryPicker(props) {
     },
     StatefulMenu: {
       props: {
+        // @ts-ignore
         stateReducer: function stateReducer(type, nextState) {
           var next = _objectSpread(_objectSpread({}, nextState), {}, {
             highlightedIndex: resetScrollIndex ? 0 : nextState.highlightedIndex
@@ -223,6 +224,7 @@ function CountryPicker(props) {
   return /*#__PURE__*/_react.default.createElement(Select, _extends({
     clearable: false,
     disabled: disabled // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // @ts-ignore
     ,
     getOptionLabel: function getOptionLabel(_ref) {
       var option = _ref.option,
@@ -241,7 +243,8 @@ function CountryPicker(props) {
       }, sharedProps, flagContainerProps), (0, _utils.iso2FlagEmoji)(iso));
     },
     error: error,
-    maxDropdownHeight: maxDropdownHeight,
+    maxDropdownHeight: maxDropdownHeight // @ts-ignore
+    ,
     onChange: function onChange(event) {
       if (typeof onCountryChange === 'function') {
         onCountryChange(event);

package/phone-input/country-picker.js

@@ -64,6 +64,7 @@ function CountryPicker(props) {
   var overrides = props.overrides;
   var baseSelectOverrides = {
     Root: {
+      // @ts-ignore
       style: function style(_ref) {
         var _ref2;
 
@@ -75,6 +76,7 @@ function CountryPicker(props) {
       }
     },
     ControlContainer: {
+      // @ts-ignore
       style: function style(_ref3) {
         var _sizeToLeftPadding, _sizeToRightPadding, _styleOverride;
 
@@ -115,6 +117,7 @@ function CountryPicker(props) {
   selectProps.overrides = (0, _overrides.mergeOverrides)(selectOverrides, selectProps.overrides);
   var baseOverrides = {
     FlagContainer: {
+      // @ts-ignore
       style: function style(_ref4) {
         var _sizeToMargin;
 
@@ -129,6 +132,7 @@ function CountryPicker(props) {
       }
     },
     DialCode: {
+      // @ts-ignore
       style: function style(_ref6) {
         var _ref6$$theme = _ref6.$theme,
             direction = _ref6$$theme.direction,

package/phone-input/country-select.js

@@ -76,6 +76,7 @@ function CountrySelect(props) {
   };
   var baseSelectOverrides = {
     ControlContainer: {
+      // @ts-ignore
       style: function style(props) {
         if (!props.$isFocused && !props.$isPseudoFocused) {
           return {

package/phone-input/default-props.js

@@ -15,7 +15,9 @@ LICENSE file in the root directory of this source tree.
 */
 var defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
+  // @ts-ignore
   'aria-describedby': null,
+  // @ts-ignore
   'aria-labelledby': null,
   clearable: true,
   focusLock: false,
@@ -26,9 +28,11 @@ var defaultProps = {
   },
   disabled: false,
   error: false,
+  // @ts-ignore
   id: null,
   maxDropdownHeight: _constants.DEFAULT_MAX_DROPDOWN_HEIGHT,
   maxDropdownWidth: _constants.DEFAULT_MAX_DROPDOWN_WIDTH,
+  // @ts-ignore
   name: null,
   onCountryChange: function onCountryChange() {},
   onTextChange: function onTextChange() {},

package/phone-input/flag.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import type { CountryIso, Size } from './types';
-declare type SizeStyleProps = {
+type SizeStyleProps = {
     $size?: Size;
 };
-export declare type FlagProps = {
+export type FlagProps = {
     $iso: CountryIso;
     iso?: CountryIso;
     width?: string;

package/phone-input/flag.js

@@ -39,7 +39,8 @@ function Flag(props) {
       width = _props$width === void 0 ? '16px' : _props$width,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var iso = oldIsoProp || $iso;
+  var iso = oldIsoProp || $iso; // @ts-ignore
+
   var FlagComponent = flags["Flag".concat(iso.toUpperCase())]; //$FlowExpectedError[cannot-spread-inexact]
 
   return /*#__PURE__*/_react.default.createElement(FlagComponent, _extends({

package/phone-input/phone-input-lite.js

@@ -76,6 +76,7 @@ function PhoneInputLite(props) {
   var inputRef = (0, _react.useRef)(null);
   var baseDialCodeOverride = {
     component: _styledComponents.StyledDialCode,
+    // @ts-ignore
     style: function style(_ref) {
       var _ref$$theme = _ref.$theme,
           direction = _ref$$theme.direction,
@@ -94,6 +95,7 @@ function PhoneInputLite(props) {
   });
   var baseOverrides = {
     Input: {
+      // @ts-ignore
       style: function style(_ref3) {
         var _ref3$$theme = _ref3.$theme,
             direction = _ref3$$theme.direction,

package/phone-input/phone-input-next.js

@@ -85,6 +85,7 @@ function PhoneInputNext(props) {
   var inputRef = (0, _react.useRef)(null);
   var baseDialCodeOverride = {
     component: _styledComponents.StyledDialCode,
+    // @ts-ignore
     style: function style(_ref) {
       var _ref$$theme = _ref.$theme,
           direction = _ref$$theme.direction,
@@ -103,6 +104,7 @@ function PhoneInputNext(props) {
   });
   var baseOverrides = {
     Input: {
+      // @ts-ignore
       style: function style(_ref3) {
         var _ref3$$theme = _ref3.$theme,
             direction = _ref3$$theme.direction,

package/phone-input/stateful-phone-input-container.js

@@ -84,6 +84,7 @@ var StatefulPhoneInputContainer = /*#__PURE__*/function (_React$Component) {
 
       if (event.option && event.option.id) {
         _this.internalSetState(_constants.STATE_CHANGE_TYPE.countryChange, {
+          // @ts-ignore
           country: _constants.COUNTRIES[event.option.id]
         });
       }

package/phone-input/styled-components.d.ts

@@ -1,8 +1,8 @@
 import type { Size } from './types';
-declare type SizeStyleProps = {
+type SizeStyleProps = {
     $size?: Size;
 };
-declare type HeightStyleProps = {
+type HeightStyleProps = {
     $height: string;
 };
 export declare const StyledPhoneInputRoot: import("styletron-react").StyletronComponent<"div", {}>;

package/phone-input/types.d.ts

@@ -2,22 +2,22 @@ import type * as React from 'react';
 import type { STATE_CHANGE_TYPE, SIZE, COUNTRIES } from './constants';
 import type { Override } from '../helpers/overrides';
 import type { OnChangeParams } from '../select';
-export declare type Size = keyof typeof SIZE;
-export declare type CountryIso = keyof typeof COUNTRIES;
-export declare type Countries = Readonly<Country>;
-export declare type Country = Readonly<{
+export type Size = keyof typeof SIZE;
+export type CountryIso = keyof typeof COUNTRIES;
+export type Countries = Readonly<Country>;
+export type Country = Readonly<{
     dialCode: string;
     id: CountryIso;
     label: string;
 }>;
-export declare type State = {
+export type State = {
     country: Country;
     text: string;
 };
-export declare type StateChange = keyof typeof STATE_CHANGE_TYPE;
-export declare type StateReducer = (type: StateChange, nextState: Partial<State>, currentState: State) => State;
-export declare type mapIsoToLabel = (iso: string) => string;
-export declare type CountrySelectDropdownProps = {
+export type StateChange = keyof typeof STATE_CHANGE_TYPE;
+export type StateReducer = (type: StateChange, nextState: Partial<State>, currentState: State) => State;
+export type mapIsoToLabel = (iso: string) => string;
+export type CountrySelectDropdownProps = {
     children: Array<React.ReactElement<any>>;
     $country: Country;
     $mapIsoToLabel?: mapIsoToLabel;
@@ -34,7 +34,7 @@ export declare type CountrySelectDropdownProps = {
         EmptyState?: Override;
     };
 };
-export declare type CountrySelectProps = {
+export type CountrySelectProps = {
     countries: {
         [x: string]: Country;
     };
@@ -61,7 +61,7 @@ export declare type CountrySelectProps = {
     required: boolean;
     size: Size;
 };
-export declare type PhoneInputOverrides = {
+export type PhoneInputOverrides = {
     Root?: Override;
     Input?: Override;
     CountrySelectContainer?: Override;
@@ -74,7 +74,7 @@ export declare type PhoneInputOverrides = {
     CountrySelect?: Override;
     FlagContainer?: Override;
 };
-export declare type PhoneInputProps = {
+export type PhoneInputProps = {
     /** Sets aria-label attribute of the input element. */
     'aria-label': string | undefined | null;
     /** Sets aria-labelledby attribute of the input element. */
@@ -115,19 +115,19 @@ export declare type PhoneInputProps = {
     /** Defines if the input value is clearable. */
     clearable?: boolean;
 };
-export declare type PhoneInputLiteProps = {
+export type PhoneInputLiteProps = {
     countries: {
         [x: string]: Country;
     };
 } & PhoneInputProps;
-export declare type StatefulPhoneInputContainerProps = {
+export type StatefulPhoneInputContainerProps = {
     children: (a: PhoneInputProps) => React.ReactNode;
     initialState: State;
     stateReducer: StateReducer;
     onTextChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
     onCountryChange: (event: OnChangeParams) => unknown;
 } & PhoneInputProps;
-export declare type StatefulPhoneInputProps = PhoneInputProps & {
+export type StatefulPhoneInputProps = PhoneInputProps & {
     initialState?: State;
     stateReducer?: StateReducer;
     onTextChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;

package/pin-code/default-props.js

@@ -15,13 +15,17 @@ LICENSE file in the root directory of this source tree.
 */
 var defaultProps = {
   'aria-label': 'Please enter your pin code',
+  // @ts-ignore
   'aria-labelledby': null,
+  // @ts-ignore
   'aria-describedby': null,
   autoComplete: 'one-time-code',
   autoFocus: false,
   disabled: false,
   error: false,
+  // @ts-ignore
   id: null,
+  // @ts-ignore
   name: null,
   onChange: function onChange() {},
   overrides: {},

package/pin-code/index.d.ts

@@ -5,4 +5,4 @@ export { default as StatefulPinCode } from './stateful-pin-code';
 export { SIZE } from '../input';
 export * from './types';
 /** @deprecated use StatefulPinCodeContainerProps instead. To be removed in future versions.*/
-export declare type StatefulContainerProps = StatefulPinCodeContainerProps;
+export type StatefulContainerProps = StatefulPinCodeContainerProps;

package/pin-code/pin-code.js

@@ -151,7 +151,8 @@ var PinCode = /*#__PURE__*/function (_React$Component) {
             return _this2.setState({
               hasFocus: true
             });
-          },
+          } // @ts-ignore
+          ,
           onChange: function onChange(event) {
             var eventValue = event.target.value; // in the case of an autocomplete or copy and paste
 
@@ -209,7 +210,8 @@ var PinCode = /*#__PURE__*/function (_React$Component) {
                 if (inputRef && inputRef.focus) inputRef.focus();
               }
             }
-          },
+          } // @ts-ignore
+          ,
           onKeyDown: function onKeyDown(event) {
             // if we see a backspace/delete and the input is empty, transfer focus backward
             if (_this2.props.manageFocus && event.key === 'Backspace' && _this2.props.values[i] === '' && i > 0) {

package/pin-code/types.d.ts

@@ -1,15 +1,15 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { SIZE, STATE_CHANGE_TYPE } from '../input';
-export declare type ChangeEvent = {
+export type ChangeEvent = {
     values: string[];
     event: any;
 };
-export declare type PinCodeOverrides = {
+export type PinCodeOverrides = {
     Root?: Override;
     Input?: Override;
 };
-export declare type PinCodeProps = {
+export type PinCodeProps = {
     /** Sets aria-label attribute for each input element. */
     'aria-label': string | undefined | null;
     /** Sets aria-labelledby attribute for each input element. */
@@ -46,20 +46,20 @@ export declare type PinCodeProps = {
     /** Mask for pin code. Default is no mask. Set it true then mask is ".". Also accept string input as customized mask style. */
     mask: boolean | string;
 };
-export declare type State = {
+export type State = {
     hasFocus: boolean;
 };
-export declare type StatefulPinCodeContainerState = {
+export type StatefulPinCodeContainerState = {
     values: string[];
 };
-export declare type StateChange = keyof typeof STATE_CHANGE_TYPE;
-export declare type StateReducer = (type: StateChange, nextState: StatefulPinCodeContainerState, currentState: StatefulPinCodeContainerState) => StatefulPinCodeContainerState;
-export declare type StatefulPinCodeProps = PinCodeProps & {
+export type StateChange = keyof typeof STATE_CHANGE_TYPE;
+export type StateReducer = (type: StateChange, nextState: StatefulPinCodeContainerState, currentState: StatefulPinCodeContainerState) => StatefulPinCodeContainerState;
+export type StatefulPinCodeProps = PinCodeProps & {
     initialState?: StatefulPinCodeContainerState;
     onChange?: (event: ChangeEvent) => unknown;
     stateReducer?: StateReducer;
 };
-export declare type StatefulPinCodeContainerProps = PinCodeProps & {
+export type StatefulPinCodeContainerProps = PinCodeProps & {
     children: (a: PinCodeProps) => React.ReactNode;
     initialState: StatefulPinCodeContainerState;
     onChange: (event: ChangeEvent) => unknown;