glints-aries 4.1.3 → 4.1.5

package/README.md

@@ -229,7 +229,6 @@ A standalone piece of software that has a clear boundary that is accessible via
 7. Shadow (how our shadow look like on every component)
 
 **Creating and maintaining a consistent UI and UX across every part of our product.**
-
 It helps users intuitively navigate and successfully interact with different sections of your applications without confusion. It also creates sense of branding.
 
 If you design a component, you should pay attention to

package/es/@next/ActionList/ActionItem.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { Item } from './ActionList';
+export declare const ActionItem: ({ content, description, icon, action, disabled, }: Item) => JSX.Element;

package/es/@next/ActionList/ActionItem.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { StyledActionListItem, StyledActionListItemDescription, StyledActionListItemWrapper } from './ActionListStyle';
+export var ActionItem = function ActionItem(_ref) {
+  var content = _ref.content,
+    description = _ref.description,
+    icon = _ref.icon,
+    action = _ref.action,
+    disabled = _ref.disabled;
+  var hasDescription = !!description;
+  return /*#__PURE__*/React.createElement(StyledActionListItemWrapper, {
+    tabIndex: 0,
+    role: "button",
+    onMouseUp: function onMouseUp(e) {
+      return e.currentTarget.blur();
+    },
+    onClick: function onClick() {
+      return action == null ? void 0 : action();
+    },
+    "data-disabled": disabled
+  }, /*#__PURE__*/React.createElement(StyledActionListItem, null, icon, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1",
+    className: "action-item-content"
+  }, content)), hasDescription && /*#__PURE__*/React.createElement(StyledActionListItemDescription, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1",
+    color: Neutral.B40,
+    className: "action-item-description"
+  }, description)));
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type Item = {
+    content: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+    action?: (...args: any) => void;
+    disabled?: boolean;
+};
+export declare type Section = {
+    title: React.ReactNode;
+    items?: Item[];
+};
+export declare type ActionListProps = {
+    items?: Item[];
+    sections?: Section[];
+};
+export declare const ActionList: ({ items, sections }: ActionListProps) => JSX.Element;

package/es/@next/ActionList/ActionList.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { Typography } from '../Typography';
+import { ActionItem } from './ActionItem';
+import { StyledActionListContainer, StyledActionListSection } from './ActionListStyle';
+export var ActionList = function ActionList(_ref) {
+  var items = _ref.items,
+    sections = _ref.sections;
+  var renderActionItems = function renderActionItems(actionItems) {
+    if (actionItems === void 0) {
+      actionItems = [];
+    }
+    return actionItems.map(function (item, index) {
+      return /*#__PURE__*/React.createElement(ActionItem, _extends({
+        key: item.content.toString() + "-" + index
+      }, item));
+    });
+  };
+  var renderSectionedItems = function renderSectionedItems() {
+    return (sections || []).map(function (section, index) {
+      var title = section.title;
+      return /*#__PURE__*/React.createElement("li", {
+        key: title + "-" + index
+      }, /*#__PURE__*/React.createElement(StyledActionListSection, {
+        key: title + "-" + index
+      }, /*#__PURE__*/React.createElement(Typography, {
+        as: "div",
+        variant: "subtitle2"
+      }, title)), renderActionItems(section.items || []));
+    });
+  };
+  var renderItems = function renderItems() {
+    return /*#__PURE__*/React.createElement("li", null, renderActionItems(items || []));
+  };
+  var contentMarkup = sections ? renderSectionedItems() : renderItems();
+  return /*#__PURE__*/React.createElement(StyledActionListContainer, null, contentMarkup);
+};

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

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

package/es/@next/ActionList/ActionListStyle.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledActionListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledActionListSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledActionListItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledActionListItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledActionListItemDescription: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/ActionList/ActionListStyle.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { borderRadius4 } from '../utilities/borderRadius';
+import { Blue, Neutral } from '../utilities/colors';
+import { space12, space16, space8 } from '../utilities/spacing';
+import * as Breakpoints from '../utilities/breakpoints';
+export var StyledActionListContainer = styled.div.withConfig({
+  displayName: "ActionListStyle__StyledActionListContainer",
+  componentId: "sc-2x4nd5-0"
+})(["padding:", " 0;background:", ";color:", ";li{list-style-type:none;padding:0;margin:0;}"], space8, Neutral.B100, Neutral.B18);
+export var StyledActionListSection = styled.div.withConfig({
+  displayName: "ActionListStyle__StyledActionListSection",
+  componentId: "sc-2x4nd5-1"
+})(["padding:", " ", " ", ";color:", ";text-transform:uppercase;"], space12, space16, space8, Neutral.B40);
+export var StyledActionListItemWrapper = styled.div.withConfig({
+  displayName: "ActionListStyle__StyledActionListItemWrapper",
+  componentId: "sc-2x4nd5-2"
+})(["margin:0 ", ";cursor:pointer;&:hover{background:", ";border-radius:", ";}&:active{background:", ";border-radius:", ";}&&&{&:active{border:0;}}&:focus{outline:none;border:2px solid ", ";border-radius:", ";}&[data-disabled='true']{pointer-events:none;svg{fill:", ";}.action-item-content,.action-item-description{color:", ";}}"], space8, Neutral.B99, borderRadius4, Neutral.B95, borderRadius4, Blue.S54, borderRadius4, Neutral.B85, Neutral.B85);
+export var StyledActionListItem = styled.div.withConfig({
+  displayName: "ActionListStyle__StyledActionListItem",
+  componentId: "sc-2x4nd5-3"
+})(["display:flex;gap:", ";padding:", ";align-items:center;svg{height:24px;width:24px;fill:", ";}@media (max-width:", "){svg{height:20px;width:20px;}}"], space8, space8, Neutral.B40, Breakpoints.large);
+export var StyledActionListItemDescription = styled.div.withConfig({
+  displayName: "ActionListStyle__StyledActionListItemDescription",
+  componentId: "sc-2x4nd5-4"
+})(["padding:0 ", " ", ";margin-top:calc(", " * -1);align-items:center;"], space8, space8, space8);

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

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

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

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

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type AlertProps = {
+    title?: string;
+    status?: 'success' | 'info' | 'warning' | 'error';
+    content?: React.ReactNode;
+    children?: React.ReactNode;
+    show?: boolean;
+    /** Duration of alert in miliseconds */
+    duration?: number;
+    zIndex?: number;
+    position?: {
+        top?: string;
+        right?: string;
+    };
+    onDismissed?: () => void;
+};
+export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Alert/Alert.js

@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import { Icon } from '../Icon';
+import { Typography } from '../Typography';
+import { StyledAlertContainer, StyledAlertContentColumn, StyledAlertCloseIconContainer } from './AlertStyle';
+var iconNameStatusMap = {
+  success: 'ri-checkbox-circle-fill',
+  info: 'ri-information-fill',
+  warning: 'ri-error-warning-fill',
+  error: 'ri-error-warning-fill'
+};
+export var Alert = /*#__PURE__*/React.forwardRef(function Alert(_ref, ref) {
+  var show = _ref.show,
+    title = _ref.title,
+    content = _ref.content,
+    status = _ref.status,
+    _ref$duration = _ref.duration,
+    duration = _ref$duration === void 0 ? 4000 : _ref$duration,
+    children = _ref.children,
+    zIndex = _ref.zIndex,
+    position = _ref.position,
+    onDismissed = _ref.onDismissed;
+  useEffect(function () {
+    if (!show) {
+      return;
+    }
+    var timeId = setTimeout(function () {
+      onDismissed == null ? void 0 : onDismissed();
+    }, duration);
+    return function () {
+      clearTimeout(timeId);
+    };
+  }, [duration, onDismissed, show]);
+  var hasTitle = !!title;
+  var iconStatus = iconNameStatusMap[status];
+  if (status && !iconStatus) {
+    console.warn("Status \"" + status + "\" is not a valid Alert status, \"info\" will be used instead");
+  }
+  var iconName = iconStatus || iconNameStatusMap['info'];
+  if (!show) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledAlertContainer, {
+    ref: ref,
+    role: "alert",
+    "data-titled": hasTitle,
+    "data-status": status || 'info',
+    zIndex: zIndex,
+    position: position
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
+    name: iconName
+  })), /*#__PURE__*/React.createElement("div", null, hasTitle && /*#__PURE__*/React.createElement(StyledAlertContentColumn, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "subtitle1"
+  }, title)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledAlertContentColumn, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, content))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StyledAlertContentColumn, null, /*#__PURE__*/React.createElement(Typography, {
+    as: "div",
+    variant: "body1"
+  }, children)))), /*#__PURE__*/React.createElement(StyledAlertCloseIconContainer, {
+    role: "button",
+    onClick: function onClick() {
+      return onDismissed == null ? void 0 : onDismissed();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ri-close"
+  })));
+});

package/es/@next/Alert/Alert.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/Alert/AlertContext.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ComponentWithProviderProps } from '../../types/componentWithProvider';
+import { AlertProps } from './Alert';
+export declare type ShowAlertProps = Omit<AlertProps, 'show'>;
+export declare type AlertContextProps = AlertProps & ComponentWithProviderProps<ShowAlertProps>;
+export declare const AlertContext: import("react").Context<AlertContextProps>;

package/es/@next/Alert/AlertContext.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export var AlertContext = /*#__PURE__*/createContext(undefined);

package/es/@next/Alert/AlertProvider.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const AlertProvider: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/es/@next/Alert/AlertProvider.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useState } from 'react';
+import { AlertContext } from './AlertContext';
+export var AlertProvider = function AlertProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState({
+      show: false
+    }),
+    state = _useState[0],
+    setState = _useState[1];
+  var open = useCallback(function (props) {
+    return setState(_extends({}, props, {
+      show: true
+    }));
+  }, [setState]);
+  var close = useCallback(function () {
+    return setState({
+      show: false
+    });
+  }, [setState]);
+  var alertContextValue = _extends({}, state, {
+    open: open,
+    close: close
+  });
+  return /*#__PURE__*/React.createElement(AlertContext.Provider, {
+    value: alertContextValue
+  }, children);
+};

package/es/@next/Alert/AlertStyle.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledAlertContainer: import("styled-components").StyledComponent<"div", any, {
+    zIndex?: number;
+    position?: {
+        top?: string;
+        right?: string;
+    };
+}, never>;
+export declare const StyledAlertCloseIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledAlertContentColumn: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Alert/AlertStyle.js

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+import { borderRadius4 } from '../utilities/borderRadius';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Green, Neutral, Blue, Orange, Red } from '../utilities/colors';
+import { space12, space8 } from '../utilities/spacing';
+export var StyledAlertContainer = styled.div.withConfig({
+  displayName: "AlertStyle__StyledAlertContainer",
+  componentId: "sc-1e5i2kj-0"
+})(["position:fixed;top:", ";right:", ";display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:", ";color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], function (props) {
+  var _props$position;
+  return (_props$position = props.position) != null && _props$position.top ? props.position.top : '90px';
+}, function (props) {
+  var _props$position2;
+  return (_props$position2 = props.position) != null && _props$position2.right ? props.position.right : '24px';
+}, space12, space8, borderRadius4, function (props) {
+  return props.zIndex ? props.zIndex : 100;
+}, Neutral.B18, Green.B89, Green.B61, Blue.S08, Blue.S99, Orange.S21, Orange.S86, Red.B100, Red.B93, Breakpoints.large, space8);
+export var StyledAlertCloseIconContainer = styled.div.withConfig({
+  displayName: "AlertStyle__StyledAlertCloseIconContainer",
+  componentId: "sc-1e5i2kj-1"
+})(["cursor:pointer;&&& svg{fill:", ";}"], Neutral.B40);
+export var StyledAlertContentColumn = styled.div.withConfig({
+  displayName: "AlertStyle__StyledAlertContentColumn",
+  componentId: "sc-1e5i2kj-2"
+})(["min-width:240px;max-width:560px;padding:0;@media (max-width:480px){min-width:unset;}"]);

package/es/@next/Alert/AlertWithProvider.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AlertWithProvider: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;

package/es/@next/Alert/AlertWithProvider.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["close", "onDismissed"],
+  _excluded2 = ["show"];
+import React from 'react';
+import { Alert } from './Alert';
+import { useAlert } from './useAlert';
+export var AlertWithProvider = /*#__PURE__*/React.forwardRef(function AlertWithProvider(_, ref) {
+  var _useAlert = useAlert(),
+    close = _useAlert.close,
+    _onDismissed = _useAlert.onDismissed,
+    rest = _objectWithoutPropertiesLoose(_useAlert, _excluded);
+  var show = rest.show,
+    alertProps = _objectWithoutPropertiesLoose(rest, _excluded2);
+  if (!show) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Alert, _extends({
+    ref: ref
+  }, alertProps, {
+    show: show,
+    onDismissed: function onDismissed() {
+      close();
+      _onDismissed == null ? void 0 : _onDismissed();
+    }
+  }));
+});

package/es/@next/Alert/AlertWithProvider.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/Alert/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Alert';
+export * from './AlertProvider';
+export * from './AlertWithProvider';
+export * from './AlertContext';
+export * from './useAlert';

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

@@ -0,0 +1,5 @@
+export * from './Alert';
+export * from './AlertProvider';
+export * from './AlertWithProvider';
+export * from './AlertContext';
+export * from './useAlert';

package/es/@next/Alert/useAlert.d.ts

@@ -0,0 +1 @@
+export declare const useAlert: () => import("./AlertContext").AlertContextProps;

package/es/@next/Alert/useAlert.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { AlertContext } from './AlertContext';
+export var useAlert = function useAlert() {
+  var context = useContext(AlertContext);
+  if (!context) {
+    throw new Error('No AlertContext was provided via "AlertProvider", to use this hooks you must provide them in your app root.');
+  }
+  return context;
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const avatarBackgroundColorVariant: readonly ["supplementary", "warning", "danger", "success", "outstanding"];
+declare const avatarSizeVariant: readonly ["large", "medium"];
+export declare type AvatarBackgroundColorVariant = (typeof avatarBackgroundColorVariant)[number];
+export declare type AvatarSizeVariant = (typeof avatarSizeVariant)[number];
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: AvatarBackgroundColorVariant;
+    size?: AvatarSizeVariant;
+    initials?: string;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/@next/Avatar/Avatar.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["variant", "size", "initials"];
+import React from 'react';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { AvatarStyle } from './AvatarStyle';
+var avatarBackgroundColorVariant = ['supplementary', 'warning', 'danger', 'success', 'outstanding'];
+var avatarSizeVariant = ['large', 'medium'];
+export var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(_ref, ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'supplementary' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    initials = _ref.initials,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(AvatarStyle, _extends({
+    ref: ref,
+    variant: variant,
+    size: size
+  }, props), /*#__PURE__*/React.createElement(Typography, {
+    variant: size === 'medium' ? 'body1' : 'headline6',
+    color: Neutral.B18,
+    as: 'span'
+  }, initials.slice(0, 2)));
+});