glints-aries 4.0.320 → 4.0.321

package/es/@next/AuthenticationInput/AuthenticationInput.d.ts

@@ -0,0 +1,10 @@
+import React, { RefObject } from 'react';
+export interface AuthenticationInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    numberOfInputs: number;
+    disabled?: boolean;
+    error?: boolean;
+    forwardedRef?: RefObject<HTMLDivElement>;
+    /** will always return null when not all inputs are filled */
+    onChange?: (value: string | null) => void;
+}
+export declare const AuthenticationInput: React.ForwardRefExoticComponent<AuthenticationInputProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/AuthenticationInput/AuthenticationInput.js

@@ -0,0 +1,97 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["numberOfInputs", "error", "onChange", "forwardedRef"];
+import React, { useEffect, useRef, useState } from 'react';
+import { StyledInputsContainer } from './AuthenticationInputStyle';
+import { AuthenticationInputSingle } from './AuthenticationInputSingle';
+var AuthenticationInputComponent = function AuthenticationInputComponent(_ref) {
+  var _ref$numberOfInputs = _ref.numberOfInputs,
+    numberOfInputs = _ref$numberOfInputs === void 0 ? 6 : _ref$numberOfInputs,
+    error = _ref.error,
+    onChange = _ref.onChange,
+    forwardedRef = _ref.forwardedRef,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var _useState = useState(new Array(numberOfInputs).fill('')),
+    inputValues = _useState[0],
+    setInputValues = _useState[1];
+  var _useState2 = useState(0),
+    currentIndex = _useState2[0],
+    setCurrentIndex = _useState2[1];
+  var inputArray = new Array(numberOfInputs).fill('');
+  var onChangeRef = useRef(null);
+  onChangeRef.current = onChange;
+  useEffect(function () {
+    if (inputValues.some(function (v) {
+      return !Number.isInteger(v);
+    })) {
+      onChangeRef.current == null ? void 0 : onChangeRef.current(null);
+      return;
+    }
+    onChangeRef.current == null ? void 0 : onChangeRef.current(inputValues.join(''));
+  }, [inputValues]);
+  var handleOnChange = function handleOnChange(value, index) {
+    if (!Number.isInteger(value)) {
+      var _newInputValues = [].concat(inputValues);
+      _newInputValues[index] = '';
+      setInputValues(_newInputValues);
+      return;
+    }
+    var newInputValues = [].concat(inputValues);
+    newInputValues[index] = value;
+    setInputValues(newInputValues);
+    var nextInputIndex = index + 1;
+    if (nextInputIndex <= numberOfInputs - 1) {
+      setCurrentIndex(nextInputIndex);
+    }
+  };
+  var handlePaste = function handlePaste(event) {
+    var pastedData = event.clipboardData.getData('text') || '';
+    event.preventDefault();
+    var pastedDataArray = pastedData.split('');
+    if (pastedDataArray.length === 0) {
+      return;
+    }
+    var newValues = new Array(numberOfInputs).fill('');
+    for (var i = 0; i < numberOfInputs; i++) {
+      var currentValue = i >= pastedDataArray.length ? null : pastedDataArray[i];
+      var currentValueAsNumber = Number(currentValue);
+      if (Number.isNaN(currentValueAsNumber)) {
+        console.warn(currentValue + " is not a number, paste is skipped");
+        continue;
+      }
+      newValues[i] = currentValueAsNumber;
+    }
+    setInputValues(newValues);
+    setCurrentIndex(numberOfInputs - 1);
+  };
+  return /*#__PURE__*/React.createElement(StyledInputsContainer, {
+    className: "authentication-inputs-container",
+    onPaste: handlePaste,
+    ref: forwardedRef
+  }, inputArray.map(function (_value, index) {
+    return /*#__PURE__*/React.createElement(AuthenticationInputSingle, _extends({
+      key: index,
+      className: "authentication-input",
+      index: index,
+      shouldFocus: currentIndex === index,
+      isLast: index === numberOfInputs - 1,
+      onChange: handleOnChange,
+      value: inputValues[index],
+      error: error,
+      onPaste: handlePaste,
+      onIndexChanged: function onIndexChanged(index) {
+        if (index >= numberOfInputs || index < 0) {
+          return;
+        }
+        setCurrentIndex(index);
+      }
+    }, rest));
+  }));
+};
+var forwardRef = function forwardRef(props, ref) {
+  return /*#__PURE__*/React.createElement(AuthenticationInputComponent, _extends({}, props, {
+    forwardedRef: ref
+  }));
+};
+forwardRef.displayName = AuthenticationInputComponent.name;
+export var AuthenticationInput = /*#__PURE__*/React.forwardRef(forwardRef);

package/es/@next/AuthenticationInput/AuthenticationInput.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/AuthenticationInput/AuthenticationInputSingle.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface AuthenticationInputSingleProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+    index: number;
+    value: number | '';
+    shouldFocus?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    isLast?: boolean;
+    onIndexChanged?: (index: number) => void;
+    onChange: (value: number | '', index: number) => void;
+}
+export declare const AuthenticationInputSingle: ({ index, onChange, value, shouldFocus, isLast, onIndexChanged, ...rest }: AuthenticationInputSingleProps) => JSX.Element;
+export {};

package/es/@next/AuthenticationInput/AuthenticationInputSingle.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["index", "onChange", "value", "shouldFocus", "isLast", "onIndexChanged"];
+import React, { useEffect, useRef } from 'react';
+import { NumberInput } from '../NumberInput';
+export var AuthenticationInputSingle = function AuthenticationInputSingle(_ref) {
+  var index = _ref.index,
+    _onChange = _ref.onChange,
+    value = _ref.value,
+    shouldFocus = _ref.shouldFocus,
+    isLast = _ref.isLast,
+    onIndexChanged = _ref.onIndexChanged,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var ref = useRef(null);
+  useEffect(function () {
+    if (shouldFocus) {
+      var _ref$current, _ref$current2;
+      ref == null ? void 0 : (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
+      ref == null ? void 0 : (_ref$current2 = ref.current) == null ? void 0 : _ref$current2.select();
+    }
+  }, [shouldFocus]);
+  return /*#__PURE__*/React.createElement(NumberInput, _extends({}, rest, {
+    maxLength: 1,
+    onFocus: function onFocus(e) {
+      e.currentTarget.select();
+      onIndexChanged == null ? void 0 : onIndexChanged(index);
+    },
+    inputRef: ref,
+    value: value,
+    onChange: function onChange(e) {
+      var currentValue = e.currentTarget.valueAsNumber;
+      _onChange(currentValue, index);
+      if (isLast && currentValue) {
+        var _ref$current3;
+        ref == null ? void 0 : (_ref$current3 = ref.current) == null ? void 0 : _ref$current3.blur();
+      }
+    },
+    onKeyDown: function onKeyDown(e) {
+      var allowedKeys = ['Backspace', 'Delete', ' ', 'Tab', 'Enter'];
+      if (allowedKeys.includes(e.key) || e.metaKey || e.ctrlKey) {
+        return;
+      }
+      var reg = new RegExp('^[0-9]$');
+      if (!reg.test(e.key)) {
+        e.preventDefault();
+      }
+    },
+    onKeyUp: function onKeyUp(e) {
+      if (e.key === 'Backspace') {
+        onIndexChanged(index - 1);
+      }
+    }
+  }));
+};

package/es/@next/AuthenticationInput/AuthenticationInputStyle.d.ts

@@ -0,0 +1 @@
+export declare const StyledInputsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/AuthenticationInput/AuthenticationInputStyle.js

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+import { space8 } from '../utilities/spacing';
+export var StyledInputsContainer = styled.div.withConfig({
+  displayName: "AuthenticationInputStyle__StyledInputsContainer",
+  componentId: "sc-1bj7ddw-0"
+})(["display:flex;gap:", ";width:fit-content;.authentication-input{width:36px;height:36px;}"], space8);

package/es/@next/AuthenticationInput/index.d.ts

@@ -0,0 +1 @@
+export * from './AuthenticationInput';

package/es/@next/AuthenticationInput/index.js

@@ -0,0 +1 @@
+export * from './AuthenticationInput';

package/es/@next/Input/Input.d.ts

@@ -3,5 +3,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     error?: boolean;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
+    inputRef?: React.Ref<HTMLInputElement>;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/es/@next/Input/Input.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["error", "disabled", "prefix", "suffix"];
+var _excluded = ["error", "disabled", "prefix", "suffix", "inputRef"];
 import React, { useEffect, useRef } from 'react';
 import { StyledContainer, StyledInput, StyledPrefixContainer, StyledSuffixContainer } from './InputStyle';
 export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
@@ -8,6 +8,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
     disabled = _ref.disabled,
     prefix = _ref.prefix,
     suffix = _ref.suffix,
+    inputRef = _ref.inputRef,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
@@ -50,6 +51,7 @@ export var Input = /*#__PURE__*/React.forwardRef(function Input(_ref, ref) {
     prefixWidth: prefixWidth,
     suffixWidth: suffixWidth
   }, /*#__PURE__*/React.createElement(Prefix, null), /*#__PURE__*/React.createElement(StyledInput, _extends({
+    ref: inputRef,
     disabled: disabled
   }, props)), /*#__PURE__*/React.createElement(Suffix, null));
 });

package/es/@next/Input/InputStyle.js

@@ -7,7 +7,7 @@ import { borderRadius4 } from '../utilities/borderRadius';
 export var StyledContainer = styled.div.withConfig({
   displayName: "InputStyle__StyledContainer",
   componentId: "sc-15z2mnd-0"
-})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:", "px;}&[data-suffix='true'] input{padding-right:", "px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], function (props) {
+})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:", "px;}&[data-suffix='true'] input{padding-right:", "px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";cursor:not-allowed;}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], function (props) {
   return props.prefixWidth;
 }, function (props) {
   return props.suffixWidth;

package/es/@next/index.d.ts

@@ -8,6 +8,8 @@ export type { ActionListProps, Item as ActionListItem, Section as ActionListSect
 export { ActionList } from './ActionList';
 export type { AlertContextProps, AlertProps } from './Alert';
 export { Alert, AlertContext, AlertProvider, AlertWithProvider, useAlert, } from './Alert';
+export { AuthenticationInput } from './AuthenticationInput';
+export type { AuthenticationInputProps } from './AuthenticationInput';
 export type { AvatarProps } from './Avatar';
 export { Avatar } from './Avatar';
 export type { BadgeProps } from './Badge';

package/es/@next/index.js

@@ -7,6 +7,7 @@ import * as Fonts from './utilities/fonts';
 import * as Spacing from './utilities/spacing';
 export { ActionList } from './ActionList';
 export { Alert, AlertContext, AlertProvider, AlertWithProvider, useAlert } from './Alert';
+export { AuthenticationInput } from './AuthenticationInput';
 export { Avatar } from './Avatar';
 export { Badge } from './Badge';
 export { Banner } from './Banner';

package/lib/@next/AuthenticationInput/AuthenticationInput.d.ts

@@ -0,0 +1,10 @@
+import React, { RefObject } from 'react';
+export interface AuthenticationInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    numberOfInputs: number;
+    disabled?: boolean;
+    error?: boolean;
+    forwardedRef?: RefObject<HTMLDivElement>;
+    /** will always return null when not all inputs are filled */
+    onChange?: (value: string | null) => void;
+}
+export declare const AuthenticationInput: React.ForwardRefExoticComponent<AuthenticationInputProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/AuthenticationInput/AuthenticationInput.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.AuthenticationInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _AuthenticationInputStyle = require("./AuthenticationInputStyle");
+var _AuthenticationInputSingle = require("./AuthenticationInputSingle");
+var _excluded = ["numberOfInputs", "error", "onChange", "forwardedRef"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var AuthenticationInputComponent = function AuthenticationInputComponent(_ref) {
+  var _ref$numberOfInputs = _ref.numberOfInputs,
+    numberOfInputs = _ref$numberOfInputs === void 0 ? 6 : _ref$numberOfInputs,
+    error = _ref.error,
+    onChange = _ref.onChange,
+    forwardedRef = _ref.forwardedRef,
+    rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var _useState = (0, _react.useState)(new Array(numberOfInputs).fill('')),
+    inputValues = _useState[0],
+    setInputValues = _useState[1];
+  var _useState2 = (0, _react.useState)(0),
+    currentIndex = _useState2[0],
+    setCurrentIndex = _useState2[1];
+  var inputArray = new Array(numberOfInputs).fill('');
+  var onChangeRef = (0, _react.useRef)(null);
+  onChangeRef.current = onChange;
+  (0, _react.useEffect)(function () {
+    if (inputValues.some(function (v) {
+      return !Number.isInteger(v);
+    })) {
+      onChangeRef.current == null ? void 0 : onChangeRef.current(null);
+      return;
+    }
+    onChangeRef.current == null ? void 0 : onChangeRef.current(inputValues.join(''));
+  }, [inputValues]);
+  var handleOnChange = function handleOnChange(value, index) {
+    if (!Number.isInteger(value)) {
+      var _newInputValues = [].concat(inputValues);
+      _newInputValues[index] = '';
+      setInputValues(_newInputValues);
+      return;
+    }
+    var newInputValues = [].concat(inputValues);
+    newInputValues[index] = value;
+    setInputValues(newInputValues);
+    var nextInputIndex = index + 1;
+    if (nextInputIndex <= numberOfInputs - 1) {
+      setCurrentIndex(nextInputIndex);
+    }
+  };
+  var handlePaste = function handlePaste(event) {
+    var pastedData = event.clipboardData.getData('text') || '';
+    event.preventDefault();
+    var pastedDataArray = pastedData.split('');
+    if (pastedDataArray.length === 0) {
+      return;
+    }
+    var newValues = new Array(numberOfInputs).fill('');
+    for (var i = 0; i < numberOfInputs; i++) {
+      var currentValue = i >= pastedDataArray.length ? null : pastedDataArray[i];
+      var currentValueAsNumber = Number(currentValue);
+      if (Number.isNaN(currentValueAsNumber)) {
+        console.warn(currentValue + " is not a number, paste is skipped");
+        continue;
+      }
+      newValues[i] = currentValueAsNumber;
+    }
+    setInputValues(newValues);
+    setCurrentIndex(numberOfInputs - 1);
+  };
+  return /*#__PURE__*/_react["default"].createElement(_AuthenticationInputStyle.StyledInputsContainer, {
+    className: "authentication-inputs-container",
+    onPaste: handlePaste,
+    ref: forwardedRef
+  }, inputArray.map(function (_value, index) {
+    return /*#__PURE__*/_react["default"].createElement(_AuthenticationInputSingle.AuthenticationInputSingle, (0, _extends2["default"])({
+      key: index,
+      className: "authentication-input",
+      index: index,
+      shouldFocus: currentIndex === index,
+      isLast: index === numberOfInputs - 1,
+      onChange: handleOnChange,
+      value: inputValues[index],
+      error: error,
+      onPaste: handlePaste,
+      onIndexChanged: function onIndexChanged(index) {
+        if (index >= numberOfInputs || index < 0) {
+          return;
+        }
+        setCurrentIndex(index);
+      }
+    }, rest));
+  }));
+};
+var forwardRef = function forwardRef(props, ref) {
+  return /*#__PURE__*/_react["default"].createElement(AuthenticationInputComponent, (0, _extends2["default"])({}, props, {
+    forwardedRef: ref
+  }));
+};
+forwardRef.displayName = AuthenticationInputComponent.name;
+var AuthenticationInput = /*#__PURE__*/_react["default"].forwardRef(forwardRef);
+exports.AuthenticationInput = AuthenticationInput;

package/lib/@next/AuthenticationInput/AuthenticationInput.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/lib/@next/AuthenticationInput/AuthenticationInputSingle.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface AuthenticationInputSingleProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
+    index: number;
+    value: number | '';
+    shouldFocus?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    isLast?: boolean;
+    onIndexChanged?: (index: number) => void;
+    onChange: (value: number | '', index: number) => void;
+}
+export declare const AuthenticationInputSingle: ({ index, onChange, value, shouldFocus, isLast, onIndexChanged, ...rest }: AuthenticationInputSingleProps) => JSX.Element;
+export {};

package/lib/@next/AuthenticationInput/AuthenticationInputSingle.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.AuthenticationInputSingle = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireWildcard(require("react"));
+var _NumberInput = require("../NumberInput");
+var _excluded = ["index", "onChange", "value", "shouldFocus", "isLast", "onIndexChanged"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var AuthenticationInputSingle = function AuthenticationInputSingle(_ref) {
+  var index = _ref.index,
+    _onChange = _ref.onChange,
+    value = _ref.value,
+    shouldFocus = _ref.shouldFocus,
+    isLast = _ref.isLast,
+    onIndexChanged = _ref.onIndexChanged,
+    rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (shouldFocus) {
+      var _ref$current, _ref$current2;
+      ref == null ? void 0 : (_ref$current = ref.current) == null ? void 0 : _ref$current.focus();
+      ref == null ? void 0 : (_ref$current2 = ref.current) == null ? void 0 : _ref$current2.select();
+    }
+  }, [shouldFocus]);
+  return /*#__PURE__*/_react["default"].createElement(_NumberInput.NumberInput, (0, _extends2["default"])({}, rest, {
+    maxLength: 1,
+    onFocus: function onFocus(e) {
+      e.currentTarget.select();
+      onIndexChanged == null ? void 0 : onIndexChanged(index);
+    },
+    inputRef: ref,
+    value: value,
+    onChange: function onChange(e) {
+      var currentValue = e.currentTarget.valueAsNumber;
+      _onChange(currentValue, index);
+      if (isLast && currentValue) {
+        var _ref$current3;
+        ref == null ? void 0 : (_ref$current3 = ref.current) == null ? void 0 : _ref$current3.blur();
+      }
+    },
+    onKeyDown: function onKeyDown(e) {
+      var allowedKeys = ['Backspace', 'Delete', ' ', 'Tab', 'Enter'];
+      if (allowedKeys.includes(e.key) || e.metaKey || e.ctrlKey) {
+        return;
+      }
+      var reg = new RegExp('^[0-9]$');
+      if (!reg.test(e.key)) {
+        e.preventDefault();
+      }
+    },
+    onKeyUp: function onKeyUp(e) {
+      if (e.key === 'Backspace') {
+        onIndexChanged(index - 1);
+      }
+    }
+  }));
+};
+exports.AuthenticationInputSingle = AuthenticationInputSingle;

package/lib/@next/AuthenticationInput/AuthenticationInputStyle.d.ts

@@ -0,0 +1 @@
+export declare const StyledInputsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/AuthenticationInput/AuthenticationInputStyle.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.StyledInputsContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _spacing = require("../utilities/spacing");
+var StyledInputsContainer = _styledComponents["default"].div.withConfig({
+  displayName: "AuthenticationInputStyle__StyledInputsContainer",
+  componentId: "sc-1bj7ddw-0"
+})(["display:flex;gap:", ";width:fit-content;.authentication-input{width:36px;height:36px;}"], _spacing.space8);
+exports.StyledInputsContainer = StyledInputsContainer;

package/lib/@next/AuthenticationInput/index.d.ts

@@ -0,0 +1 @@
+export * from './AuthenticationInput';

package/lib/@next/AuthenticationInput/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = true;
+var _AuthenticationInput = require("./AuthenticationInput");
+Object.keys(_AuthenticationInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AuthenticationInput[key]) return;
+  exports[key] = _AuthenticationInput[key];
+});

package/lib/@next/Input/Input.d.ts

@@ -3,5 +3,6 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     error?: boolean;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
+    inputRef?: React.Ref<HTMLInputElement>;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/lib/@next/Input/Input.js

@@ -7,7 +7,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _InputStyle = require("./InputStyle");
-var _excluded = ["error", "disabled", "prefix", "suffix"];
+var _excluded = ["error", "disabled", "prefix", "suffix", "inputRef"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref) {
@@ -15,6 +15,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref)
     disabled = _ref.disabled,
     prefix = _ref.prefix,
     suffix = _ref.suffix,
+    inputRef = _ref.inputRef,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var hasPrefix = !!prefix;
   var hasSuffix = !!suffix;
@@ -57,6 +58,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function Input(_ref, ref)
     prefixWidth: prefixWidth,
     suffixWidth: suffixWidth
   }, /*#__PURE__*/_react["default"].createElement(Prefix, null), /*#__PURE__*/_react["default"].createElement(_InputStyle.StyledInput, (0, _extends2["default"])({
+    ref: inputRef,
     disabled: disabled
   }, props)), /*#__PURE__*/_react["default"].createElement(Suffix, null));
 });

package/lib/@next/Input/InputStyle.js

@@ -14,7 +14,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledContainer = _styledComponents["default"].div.withConfig({
   displayName: "InputStyle__StyledContainer",
   componentId: "sc-15z2mnd-0"
-})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:", "px;}&[data-suffix='true'] input{padding-right:", "px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], function (props) {
+})(["position:relative;display:flex;flex-direction:column;flex:1;flex-basis:100%;font-family:'Noto Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:150%;&[data-prefix='true'] input{padding-left:", "px;}&[data-suffix='true'] input{padding-right:", "px;}&[data-error='true'] input{border:1px solid ", ";}&[data-error='true'] input:focus{box-shadow:none;}&[data-disabled='true'] input{border:1px solid ", ";background:", ";color:", ";cursor:not-allowed;}&[data-disabled='true'] input::placeholder{color:", ";}&[data-disabled='true'] svg{fill:", ";}&[data-disabled='true'] div{color:", ";}"], function (props) {
   return props.prefixWidth;
 }, function (props) {
   return props.suffixWidth;

package/lib/@next/index.d.ts

@@ -8,6 +8,8 @@ export type { ActionListProps, Item as ActionListItem, Section as ActionListSect
 export { ActionList } from './ActionList';
 export type { AlertContextProps, AlertProps } from './Alert';
 export { Alert, AlertContext, AlertProvider, AlertWithProvider, useAlert, } from './Alert';
+export { AuthenticationInput } from './AuthenticationInput';
+export type { AuthenticationInputProps } from './AuthenticationInput';
 export type { AvatarProps } from './Avatar';
 export { Avatar } from './Avatar';
 export type { BadgeProps } from './Badge';

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.Upload = exports.Typography = exports.Tooltip = exports.TextInput = exports.TextArea = exports.Tag = exports.Tabs = exports.Tab = exports.Switch = exports.Spinner = exports.Spacing = exports.SkeletonText = exports.SkeletonImageSquare = exports.SkeletonImageCircle = exports.SimplePagination = exports.SideSheet = exports.Select = exports.RadioButton = exports.PrimaryButton = exports.Portal = exports.Popover = exports.PasswordInput = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInput = exports.ModalWithProvider = exports.ModalProvider = exports.ModalContext = exports.Modal = exports.Menu = exports.Link = exports.InlineError = exports.IndexTable = exports.IconPagination = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTable = exports.CurrencyInput = exports.Combobox = exports.Colors = exports.Checkbox = exports.Carousel = exports.Card = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.Bar = exports.Banner = exports.Badge = exports.Avatar = exports.AlertWithProvider = exports.AlertProvider = exports.AlertContext = exports.Alert = exports.ActionList = void 0;
+exports.useModal = exports.useIndexResourceState = exports.useAlert = exports.Upload = exports.Typography = exports.Tooltip = exports.TextInput = exports.TextArea = exports.Tag = exports.Tabs = exports.Tab = exports.Switch = exports.Spinner = exports.Spacing = exports.SkeletonText = exports.SkeletonImageSquare = exports.SkeletonImageCircle = exports.SimplePagination = exports.SideSheet = exports.Select = exports.RadioButton = exports.PrimaryButton = exports.Portal = exports.Popover = exports.PasswordInput = exports.Pagination = exports.OutlineMonochromeButton = exports.OutlineButton = exports.NumberInput = exports.ModalWithProvider = exports.ModalProvider = exports.ModalContext = exports.Modal = exports.Menu = exports.Link = exports.InlineError = exports.IndexTable = exports.IconPagination = exports.Icon = exports.Fonts = exports.EmptyState = exports.DropShadow = exports.Divider = exports.DestructiveButton = exports.DataTable = exports.CurrencyInput = exports.Combobox = exports.Colors = exports.Checkbox = exports.Carousel = exports.Card = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.Bar = exports.Banner = exports.Badge = exports.Avatar = exports.AuthenticationInput = exports.AlertWithProvider = exports.AlertProvider = exports.AlertContext = exports.Alert = exports.ActionList = void 0;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));
@@ -22,6 +22,8 @@ exports.AlertContext = _Alert.AlertContext;
 exports.AlertProvider = _Alert.AlertProvider;
 exports.AlertWithProvider = _Alert.AlertWithProvider;
 exports.useAlert = _Alert.useAlert;
+var _AuthenticationInput = require("./AuthenticationInput");
+exports.AuthenticationInput = _AuthenticationInput.AuthenticationInput;
 var _Avatar = require("./Avatar");
 exports.Avatar = _Avatar.Avatar;
 var _Badge = require("./Badge");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.320",
+  "version": "4.0.321",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",