glints-aries 4.0.320 → 4.0.322

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/Tag/Tag.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
+import { IconNames } from '../Icon/icons/icons';
 export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     value?: string;
     onRemove?: (() => void) | null | void;
     textColor?: string;
     disabled?: boolean;
+    contentType?: 'neutral' | 'success' | 'warning';
+    iconName?: IconNames;
 }
 export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
 export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;

package/es/@next/Tag/Tag.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled"];
+var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled", "contentType", "iconName"];
 import React from 'react';
 import { Icon } from '../Icon';
 import { Typography } from '../Typography';
 import { Neutral } from '../utilities/colors';
-import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle } from './TagStyle';
+import { TagContentStyle, TagIconWrapper, TagRemoveContainerStyle, TagStyle, TagContentWrapper } from './TagStyle';
 export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
   var children = _ref.children,
     onRemove = _ref.onRemove,
@@ -13,6 +13,9 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
     textColor = _ref.textColor,
     onClick = _ref.onClick,
     disabled = _ref.disabled,
+    _ref$contentType = _ref.contentType,
+    contentType = _ref$contentType === void 0 ? 'neutral' : _ref$contentType,
+    iconName = _ref.iconName,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var handleTextColor = function handleTextColor() {
     if (disabled) {
@@ -34,8 +37,8 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "ri-close",
     fill: Neutral.B40,
-    height: 20,
-    onClick: onRemove
+    onClick: onRemove,
+    className: "remove-button-icon"
   })));
   return /*#__PURE__*/React.createElement(TagStyle, _extends({
     ref: ref
@@ -43,10 +46,16 @@ export var Tag = /*#__PURE__*/React.forwardRef(function Tag(_ref, ref) {
     value: value,
     onClick: !disabled && onClick,
     "data-clickable": !!onClick,
+    "data-removeable": !!onRemove,
+    "data-content-type": contentType,
     role: !!onClick ? 'button' : undefined,
     "data-disabled": disabled,
     as: !!onClick ? 'button' : 'div'
   }), /*#__PURE__*/React.createElement(TagContentStyle, {
     "data-removeable": !!onRemove
-  }, content), removeButton);
+  }, iconName && /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    fill: Neutral.B40,
+    height: 20
+  }), /*#__PURE__*/React.createElement(TagContentWrapper, null, content)), removeButton);
 });

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

@@ -2,6 +2,7 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Default: any;
+export declare const WithIcon: any;
 export declare const Removeable: any;
 export declare const Clickable: any;
 export declare const ClickableDisabled: any;

package/es/@next/Tag/TagStyle.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TagProps, TagRemoveContainerProps } from './Tag';
 export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
+export declare const TagContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
 export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;

package/es/@next/Tag/TagStyle.js

@@ -1,21 +1,25 @@
 import styled from 'styled-components';
 import { Breakpoints } from '..';
 import { borderRadius4, borderRadiusHalf } from '../utilities/borderRadius';
-import { Blue, Neutral } from '../utilities/colors';
-import { space4, space8 } from '../utilities/spacing';
+import { Blue, Green, Orange, Neutral } from '../utilities/colors';
+import { space4 } from '../utilities/spacing';
 export var TagContentStyle = styled.span.withConfig({
   displayName: "TagStyle__TagContentStyle",
   componentId: "sc-r1wv7a-0"
-})(["padding:", " ", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], space4, space8);
+})(["display:inline-flex;padding:", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], space4);
+export var TagContentWrapper = styled.div.withConfig({
+  displayName: "TagStyle__TagContentWrapper",
+  componentId: "sc-r1wv7a-1"
+})(["padding:0 ", ";"], space4);
 export var TagRemoveContainerStyle = styled.div.withConfig({
   displayName: "TagStyle__TagRemoveContainerStyle",
-  componentId: "sc-r1wv7a-1"
-})(["padding:", ";display:flex;"], space4);
+  componentId: "sc-r1wv7a-2"
+})(["padding:", " ", " ", " 0;display:flex;.remove-button-icon{svg{width:20px;height:20px;}}@media (max-width:", "){.remove-button-icon{svg{width:18px;height:18px;}}}"], space4, space4, space4, Breakpoints.large);
 export var TagIconWrapper = styled.div.withConfig({
   displayName: "TagStyle__TagIconWrapper",
-  componentId: "sc-r1wv7a-2"
+  componentId: "sc-r1wv7a-3"
 })(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], Blue.S100, borderRadius4);
 export var TagStyle = styled.div.withConfig({
   displayName: "TagStyle",
-  componentId: "sc-r1wv7a-3"
-})(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&[data-clickable='true']{cursor:pointer;&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], Blue.S08, borderRadius4, Blue.S100, Blue.S100, Blue.S100, Neutral.B100, Blue.S54, Neutral.B95, Breakpoints.large, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf);
+  componentId: "sc-r1wv7a-4"
+})(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&:not([data-removeable='true']):not([data-clickable='true']){&[data-content-type='neutral']{background-color:", ";}&[data-content-type='success']{background-color:", ";}&[data-content-type='warning']{background-color:", ";}}&[data-clickable='true']{cursor:pointer;background-color:", ";&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}& svg{padding:0;width:20px;height:20px;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}@media (max-width:", "){& svg{width:18px;height:18px;}}"], Blue.S08, borderRadius4, Neutral.B95, Green.B89, Orange.S21, Blue.S08, Blue.S100, Blue.S100, Blue.S100, Neutral.B100, Blue.S54, Neutral.B95, Neutral.B95, borderRadiusHalf, Neutral.B40, Neutral.B100, borderRadiusHalf, Breakpoints.large);

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/Tag/Tag.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
+import { IconNames } from '../Icon/icons/icons';
 export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: React.ReactNode;
     value?: string;
     onRemove?: (() => void) | null | void;
     textColor?: string;
     disabled?: boolean;
+    contentType?: 'neutral' | 'success' | 'warning';
+    iconName?: IconNames;
 }
 export declare type TagRemoveContainerProps = React.HTMLAttributes<HTMLDivElement>;
 export declare type TagContentProps = React.HTMLAttributes<HTMLSpanElement> & TagProps;

package/lib/@next/Tag/Tag.js

@@ -10,7 +10,7 @@ var _Icon = require("../Icon");
 var _Typography = require("../Typography");
 var _colors = require("../utilities/colors");
 var _TagStyle = require("./TagStyle");
-var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled"];
+var _excluded = ["children", "onRemove", "value", "textColor", "onClick", "disabled", "contentType", "iconName"];
 var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
   var children = _ref.children,
     onRemove = _ref.onRemove,
@@ -18,6 +18,9 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
     textColor = _ref.textColor,
     onClick = _ref.onClick,
     disabled = _ref.disabled,
+    _ref$contentType = _ref.contentType,
+    contentType = _ref$contentType === void 0 ? 'neutral' : _ref$contentType,
+    iconName = _ref.iconName,
     props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   var handleTextColor = function handleTextColor() {
     if (disabled) {
@@ -39,8 +42,8 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
   }, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     name: "ri-close",
     fill: _colors.Neutral.B40,
-    height: 20,
-    onClick: onRemove
+    onClick: onRemove,
+    className: "remove-button-icon"
   })));
   return /*#__PURE__*/_react["default"].createElement(_TagStyle.TagStyle, (0, _extends2["default"])({
     ref: ref
@@ -48,11 +51,17 @@ var Tag = /*#__PURE__*/_react["default"].forwardRef(function Tag(_ref, ref) {
     value: value,
     onClick: !disabled && onClick,
     "data-clickable": !!onClick,
+    "data-removeable": !!onRemove,
+    "data-content-type": contentType,
     role: !!onClick ? 'button' : undefined,
     "data-disabled": disabled,
     as: !!onClick ? 'button' : 'div'
   }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentStyle, {
     "data-removeable": !!onRemove
-  }, content), removeButton);
+  }, iconName && /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
+    name: iconName,
+    fill: _colors.Neutral.B40,
+    height: 20
+  }), /*#__PURE__*/_react["default"].createElement(_TagStyle.TagContentWrapper, null, content)), removeButton);
 });
 exports.Tag = Tag;

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

@@ -2,6 +2,7 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Default: any;
+export declare const WithIcon: any;
 export declare const Removeable: any;
 export declare const Clickable: any;
 export declare const ClickableDisabled: any;

package/lib/@next/Tag/TagStyle.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { TagProps, TagRemoveContainerProps } from './Tag';
 export declare const TagContentStyle: import("styled-components").StyledComponent<"span", any, import("react").HTMLAttributes<HTMLSpanElement> & TagProps, never>;
+export declare const TagContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagRemoveContainerStyle: import("styled-components").StyledComponent<"div", any, TagRemoveContainerProps, never>;
 export declare const TagIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TagStyle: import("styled-components").StyledComponent<"div", any, TagProps, never>;

package/lib/@next/Tag/TagStyle.js

@@ -2,7 +2,7 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.TagStyle = exports.TagRemoveContainerStyle = exports.TagIconWrapper = exports.TagContentStyle = void 0;
+exports.TagStyle = exports.TagRemoveContainerStyle = exports.TagIconWrapper = exports.TagContentWrapper = exports.TagContentStyle = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ = require("..");
 var _borderRadius = require("../utilities/borderRadius");
@@ -11,20 +11,25 @@ var _spacing = require("../utilities/spacing");
 var TagContentStyle = _styledComponents["default"].span.withConfig({
   displayName: "TagStyle__TagContentStyle",
   componentId: "sc-r1wv7a-0"
-})(["padding:", " ", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4, _spacing.space8);
+})(["display:inline-flex;padding:", ";white-space:nowrap;transform:translateY(1px);&[data-removeable='true']{padding-right:0;}"], _spacing.space4);
 exports.TagContentStyle = TagContentStyle;
+var TagContentWrapper = _styledComponents["default"].div.withConfig({
+  displayName: "TagStyle__TagContentWrapper",
+  componentId: "sc-r1wv7a-1"
+})(["padding:0 ", ";"], _spacing.space4);
+exports.TagContentWrapper = TagContentWrapper;
 var TagRemoveContainerStyle = _styledComponents["default"].div.withConfig({
   displayName: "TagStyle__TagRemoveContainerStyle",
-  componentId: "sc-r1wv7a-1"
-})(["padding:", ";display:flex;"], _spacing.space4);
+  componentId: "sc-r1wv7a-2"
+})(["padding:", " ", " ", " 0;display:flex;.remove-button-icon{svg{width:20px;height:20px;}}@media (max-width:", "){.remove-button-icon{svg{width:18px;height:18px;}}}"], _spacing.space4, _spacing.space4, _spacing.space4, _.Breakpoints.large);
 exports.TagRemoveContainerStyle = TagRemoveContainerStyle;
 var TagIconWrapper = _styledComponents["default"].div.withConfig({
   displayName: "TagStyle__TagIconWrapper",
-  componentId: "sc-r1wv7a-2"
+  componentId: "sc-r1wv7a-3"
 })(["display:flex;justify-content:center;align-items:center;&:focus-visible{margin:-2px;outline:none;border:2px solid ", ";border-radius:", ";}"], _colors.Blue.S100, _borderRadius.borderRadius4);
 exports.TagIconWrapper = TagIconWrapper;
 var TagStyle = _styledComponents["default"].div.withConfig({
   displayName: "TagStyle",
-  componentId: "sc-r1wv7a-3"
-})(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&[data-clickable='true']{cursor:pointer;&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}@media (max-width:", "){font-size:12px;}& svg{padding:0;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}"], _colors.Blue.S08, _borderRadius.borderRadius4, _colors.Blue.S100, _colors.Blue.S100, _colors.Blue.S100, _colors.Neutral.B100, _colors.Blue.S54, _colors.Neutral.B95, _.Breakpoints.large, _colors.Neutral.B95, _borderRadius.borderRadiusHalf, _colors.Neutral.B40, _colors.Neutral.B100, _borderRadius.borderRadiusHalf);
+  componentId: "sc-r1wv7a-4"
+})(["display:inline-flex;align-items:center;background-color:", ";border:0;border-radius:", ";width:fit-content;padding:0;&:not([data-removeable='true']):not([data-clickable='true']){&[data-content-type='neutral']{background-color:", ";}&[data-content-type='success']{background-color:", ";}&[data-content-type='warning']{background-color:", ";}}&[data-clickable='true']{cursor:pointer;background-color:", ";&:hover{outline:1px solid ", "E6;}&:active{outline:1px solid ", ";}&:focus-visible{outline:1px solid ", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";}&[data-disabled='true']{cursor:not-allowed;outline:none;background-color:", ";&:focus-visible{outline:none;box-shadow:none;}}}& svg{padding:0;width:20px;height:20px;}& svg:hover{cursor:pointer;background-color:", ";border-radius:", ";}& svg:active{cursor:pointer;background-color:", ";fill:", ";border-radius:", ";}@media (max-width:", "){& svg{width:18px;height:18px;}}"], _colors.Blue.S08, _borderRadius.borderRadius4, _colors.Neutral.B95, _colors.Green.B89, _colors.Orange.S21, _colors.Blue.S08, _colors.Blue.S100, _colors.Blue.S100, _colors.Blue.S100, _colors.Neutral.B100, _colors.Blue.S54, _colors.Neutral.B95, _colors.Neutral.B95, _borderRadius.borderRadiusHalf, _colors.Neutral.B40, _colors.Neutral.B100, _borderRadius.borderRadiusHalf, _.Breakpoints.large);
 exports.TagStyle = TagStyle;

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.322",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",