@spaced-out/ui-design-system 0.1.30 → 0.1.32

package/lib/hooks/useFileUpload/useFileUpload.js.flow

@@ -0,0 +1,304 @@
+// @flow strict
+
+import * as React from 'react';
+// $FlowFixMe[untyped-import]
+import {useDropzone} from 'react-dropzone';
+
+import type {
+  FileObject,
+  FileProgress,
+  FileRejection,
+  FileUploadBaseProps,
+} from '../../components/FileUpload';
+import {uuid} from '../../utils/helpers';
+
+// useFileUpload hook returns these props
+export type UseFileUploadReturnProps = {
+  validFiles: Array<FileObject>,
+  rejectedFiles: Array<FileObject>,
+  isDragActive: boolean,
+  shouldAcceptFiles: boolean,
+  getRootProps: (mixed) => mixed,
+  getInputProps: (mixed) => mixed,
+  handleFileClear: (id: string) => mixed,
+  handleClear: () => mixed,
+  moveFileToProgress: (id: string, progress: FileProgress) => mixed,
+  moveFileToSuccess: (id: string, successMessage?: string) => mixed,
+  moveFileToReject: (id: string, rejectReason?: string) => mixed,
+  setShowReUpload: (id: string, showReUpload?: boolean) => mixed,
+};
+
+type State = {
+  validFiles: Array<FileObject>,
+  rejectedFiles: Array<FileObject>,
+};
+
+type Action =
+  | {type: 'ADD_VALID_FILES', files: Array<FileObject>}
+  | {type: 'ADD_REJECTED_FILES', files: Array<FileObject>}
+  | {type: 'REMOVE_FILE', id: string}
+  | {type: 'CLEAR_FILES'}
+  | {type: 'UPDATE_FILE_PROGRESS', id: string, progress: FileProgress}
+  | {type: 'SET_FILE_SUCCESS', id: string, successMessage?: string}
+  | {type: 'SET_FILE_REJECT', id: string, rejectReason?: string}
+  | {type: 'SET_FILE_RE_UPLOAD', id: string, showReUpload?: boolean};
+
+const initialState: State = {
+  validFiles: [],
+  rejectedFiles: [],
+};
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+  case 'ADD_VALID_FILES':
+    return {
+      ...state,
+      validFiles: [...state.validFiles, ...action.files],
+    };
+  case 'ADD_REJECTED_FILES':
+    return {
+      ...state,
+      rejectedFiles: [...state.rejectedFiles, ...action.files],
+    };
+  case 'REMOVE_FILE':
+    return {
+      ...state,
+      validFiles: state.validFiles.filter((file) => file.id !== action.id),
+      rejectedFiles: state.rejectedFiles.filter(
+        (file) => file.id !== action.id,
+      ),
+    };
+  case 'CLEAR_FILES':
+    return {
+      validFiles: [],
+      rejectedFiles: [],
+    };
+  case 'UPDATE_FILE_PROGRESS':
+    return {
+      ...state,
+      validFiles: state.validFiles.map((file) =>
+        file.id === action.id
+          ? {
+            ...file,
+            progress: action.progress,
+            showReUpload: false,
+            successMessage: undefined,
+            rejectReason: undefined,
+          }
+          : file,
+      ),
+      rejectedFiles: state.rejectedFiles.map((file) =>
+        file.id === action.id
+          ? {
+            ...file,
+            progress: action.progress,
+            showReUpload: false,
+            successMessage: undefined,
+            rejectReason: undefined,
+          }
+          : file,
+      ),
+    };
+  case 'SET_FILE_RE_UPLOAD':
+    return {
+      ...state,
+      validFiles: state.validFiles.map((file) =>
+        file.id === action.id
+          ? {...file, progress: undefined, showReUpload: action.showReUpload}
+          : file,
+      ),
+      rejectedFiles: state.rejectedFiles.map((file) =>
+        file.id === action.id
+          ? {...file, progress: undefined, showReUpload: action.showReUpload}
+          : file,
+      ),
+    };
+  case 'SET_FILE_SUCCESS': {
+    // Note: When a file is accepted manually we would move a file from rejected files(if found) to valid files first
+    const fileIndex = state.rejectedFiles.findIndex(
+      (file) => file.id === action.id,
+    );
+    let validFiles = [...state.validFiles];
+    const rejectedFiles = [...state.rejectedFiles];
+
+    if (fileIndex !== -1) {
+      const file = rejectedFiles[fileIndex];
+      rejectedFiles.splice(fileIndex, 1);
+      validFiles = [...validFiles, {...file}];
+    }
+
+    validFiles = validFiles.map((file) =>
+      file.id === action.id
+        ? {
+          ...file,
+          success: true,
+          successMessage: action.successMessage,
+          reject: false,
+          rejectReason: undefined,
+          progress: undefined,
+          showReUpload: false,
+        }
+        : file,
+    );
+
+    return {
+      ...state,
+      validFiles,
+      rejectedFiles,
+    };
+  }
+  case 'SET_FILE_REJECT': {
+    // Note: When a file is rejected manually we would move a file from valid files(if found) to rejected files first
+    const fileIndex = state.validFiles.findIndex(
+      (file) => file.id === action.id,
+    );
+    const validFiles = [...state.validFiles];
+    let rejectedFiles = [...state.rejectedFiles];
+
+    if (fileIndex !== -1) {
+      const file = validFiles[fileIndex];
+      validFiles.splice(fileIndex, 1);
+      rejectedFiles = [...rejectedFiles, {...file}];
+    }
+
+    rejectedFiles = rejectedFiles.map((file) =>
+      file.id === action.id
+        ? {
+          ...file,
+          reject: true,
+          rejectReason: action.rejectReason,
+          success: false,
+          successMessage: undefined,
+          progress: undefined,
+          showReUpload: false,
+        }
+        : file,
+    );
+
+    return {
+      ...state,
+      validFiles,
+      rejectedFiles,
+    };
+  }
+
+  default:
+    return state;
+  }
+};
+
+// This is a map of error codes returned by react-dropzone and their corresponding error messages
+const DROPZONE_ERROR_MESSAGES = {
+  'file-too-large': 'File exceeds maximum size',
+  'file-invalid-type': 'Wrong file type',
+  'too-many-files': 'Too many files',
+  'file-too-small': 'File is too small',
+};
+
+export const useFileUpload = ({
+  maxFiles = 1,
+  maxSize,
+  accept,
+  disabled,
+  onValidFilesDrop,
+  onRejectedFilesDrop,
+  onFileClear,
+  onClear,
+}: FileUploadBaseProps): UseFileUploadReturnProps => {
+  const [state, dispatch] = React.useReducer(reducer, initialState);
+
+  // Callbacks for when files are dropped / selected and are valid
+  const handleDropAccepted = (acceptedFiles: Array<File>) => {
+    const validFiles = acceptedFiles.map((file) => ({
+      file,
+      id: uuid(),
+      reject: false,
+      rejectReason: undefined,
+      success: true,
+      successMessage: undefined,
+      progress: undefined,
+      showReUpload: false,
+    }));
+    dispatch({type: 'ADD_VALID_FILES', files: validFiles});
+    onValidFilesDrop?.(validFiles);
+  };
+
+  // Callbacks for when files are dropped / selected and are invalid
+  const handleDropRejected = (fileRejections: Array<FileRejection>) => {
+    const rejectedFiles = fileRejections.map(({file, errors}) => ({
+      file,
+      id: uuid(),
+      reject: true,
+      rejectReason:
+        DROPZONE_ERROR_MESSAGES[errors[0].code] ||
+        'Some error occurred uploading this file',
+      success: false,
+      successMessage: undefined,
+      progress: undefined,
+      showReUpload: false,
+    }));
+    dispatch({type: 'ADD_REJECTED_FILES', files: rejectedFiles});
+    onRejectedFilesDrop?.(rejectedFiles);
+  };
+
+  const handleFileClear = (id: string) => {
+    dispatch({type: 'REMOVE_FILE', id});
+    onFileClear?.(id);
+  };
+
+  const handleClear = () => {
+    dispatch({type: 'CLEAR_FILES'});
+    onClear?.();
+  };
+
+  const moveFileToProgress = (id: string, progress: FileProgress) => {
+    dispatch({type: 'UPDATE_FILE_PROGRESS', id, progress});
+  };
+
+  // Note(Nishant): If the file is found in rejected files, we move it to valid files first in the reducer
+  const moveFileToSuccess = (id: string, successMessage?: string) => {
+    dispatch({type: 'SET_FILE_SUCCESS', id, successMessage});
+  };
+
+  // Note(Nishant): If the file is found in valid files, we move it to rejected files first in the reducer
+  const moveFileToReject = (id: string, rejectReason?: string) => {
+    dispatch({type: 'SET_FILE_REJECT', id, rejectReason});
+  };
+
+  // Note: This is used to show the re-upload button on the file
+  const setShowReUpload = (id: string, showReUpload?: boolean) => {
+    dispatch({type: 'SET_FILE_RE_UPLOAD', id, showReUpload});
+  };
+
+  const totalFiles = state.validFiles.length + state.rejectedFiles.length;
+  const shouldAcceptFiles =
+    !disabled && (maxFiles === 0 || totalFiles < maxFiles);
+
+  // We are using react-dropzone's useDropzone hook to get the drag and drop props
+  const {isDragActive, getRootProps, getInputProps} = useDropzone({
+    maxFiles,
+    multiple: maxFiles > 1 || maxFiles === 0,
+    maxSize,
+    accept,
+    disabled,
+    noClick: !shouldAcceptFiles,
+    noDrag: !shouldAcceptFiles,
+    onDropAccepted: handleDropAccepted,
+    onDropRejected: handleDropRejected,
+  });
+
+  return {
+    validFiles: state.validFiles,
+    rejectedFiles: state.rejectedFiles,
+    shouldAcceptFiles,
+    isDragActive,
+    getRootProps,
+    getInputProps,
+    handleFileClear,
+    handleClear,
+    moveFileToProgress,
+    moveFileToSuccess,
+    moveFileToReject,
+    setShowReUpload,
+  };
+};

package/lib/styles/index.css

@@ -50,6 +50,8 @@
 
 @value colorBorderSecondary: #d1d1d1;
 
+@value colorBorderTertiary: #AEAEAE;
+
 @value colorBorderDanger: #e31c4c;
 
 @value colorBackgroundBrand: #271656;
@@ -358,16 +360,22 @@
 
 @value size48: 48px;
 
+@value size50: 50px;
+
 @value size58: 58px;
 
 @value size60: 60px;
 
+@value size70: 70px;
+
 @value size90: 90px;
 
 @value size100: 100px;
 
 @value size110: 110px;
 
+@value size125: 125px;
+
 @value size140: 140px;
 
 @value size160: 160px;
@@ -382,6 +390,8 @@
 
 @value size300: 300px;
 
+@value size320: 320px;
+
 @value size380: 380px;
 
 @value size400: 400px;
@@ -392,6 +402,8 @@
 
 @value size580: 580px;
 
+@value size640: 640px;
+
 @value size720: 720px;
 
 @value size960: 960px;

package/lib/styles/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fontLineHeight100 = exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
-exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize26 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight120 = void 0;
-exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = void 0;
+exports.fontLetterSpacingMinus4 = exports.fontLetterSpacingMinus2 = exports.fontLetterSpacingMinus1 = exports.fontLetterSpacing4 = exports.fontLetterSpacing2 = exports.fontLetterSpacing1 = exports.fontLetterSpacing0 = exports.fontFamilyCentra = exports.elevationTooltip = exports.elevationToast = exports.elevationNone = exports.elevationModal = exports.elevationMenu = exports.elevationCard = exports.elevationBackdrop = exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = exports.borderWidthTertiary = exports.borderWidthSecondary = exports.borderWidthPrimary = exports.borderWidthNone = exports.borderRadiusXSmall = exports.borderRadiusXLarge = exports.borderRadiusSmall = exports.borderRadiusRadioButton = exports.borderRadiusNone = exports.borderRadiusMedium = exports.borderRadiusLarge = exports.borderRadiusCircle = void 0;
+exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = exports.shadowBoxShadow4Y = exports.shadowBoxShadow4X = exports.shadowBoxShadow4Type = exports.shadowBoxShadow4Spread = exports.shadowBoxShadow4Color = exports.shadowBoxShadow4Blur = exports.shadowBoxShadow3Y = exports.shadowBoxShadow3X = exports.shadowBoxShadow3Type = exports.shadowBoxShadow3Spread = exports.shadowBoxShadow3Color = exports.shadowBoxShadow3Blur = exports.shadowBoxShadow2Y = exports.shadowBoxShadow2X = exports.shadowBoxShadow2Type = exports.shadowBoxShadow2Spread = exports.shadowBoxShadow2Color = exports.shadowBoxShadow2Blur = exports.shadowBoxShadow1Y = exports.shadowBoxShadow1X = exports.shadowBoxShadow1Type = exports.shadowBoxShadow1Spread = exports.shadowBoxShadow1Color = exports.shadowBoxShadow1Blur = exports.opacity95 = exports.opacity90 = exports.opacity85 = exports.opacity80 = exports.opacity70 = exports.opacity60 = exports.opacity50 = exports.opacity5 = exports.opacity40 = exports.opacity30 = exports.opacity20 = exports.opacity15 = exports.opacity100 = exports.opacity10 = exports.opacity0 = exports.motionEaseInEaseOut = exports.motionDurationSlowest = exports.motionDurationSlower = exports.motionDurationSlow = exports.motionDurationNormal = exports.motionDurationFast = exports.fontWeightMedium = exports.fontWeightBook = exports.fontTextDecorationNone = exports.fontTextCaseNone = exports.fontSize46 = exports.fontSize26 = exports.fontSize18 = exports.fontSize16 = exports.fontSize14 = exports.fontSize13 = exports.fontSize12 = exports.fontParagraphSpacing0 = exports.fontLineHeight170 = exports.fontLineHeight150 = exports.fontLineHeight140 = exports.fontLineHeight130 = exports.fontLineHeight120 = exports.fontLineHeight100 = void 0;
+exports.spaceXXSmall = exports.spaceXXLarge = exports.spaceXSmall = exports.spaceXLarge = exports.spaceSmall = exports.spaceNone = exports.spaceNegHalfFluid = exports.spaceNegFluid = exports.spaceMedium = exports.spaceLarge = exports.spaceHalfFluid = exports.spaceFluid = exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size70 = void 0;
 
 const borderWidthNone = '0px';
 exports.borderWidthNone = borderWidthNone;
@@ -59,6 +59,8 @@ const colorBorderPrimary = '#e1e1e1';
 exports.colorBorderPrimary = colorBorderPrimary;
 const colorBorderSecondary = '#d1d1d1';
 exports.colorBorderSecondary = colorBorderSecondary;
+const colorBorderTertiary = '#AEAEAE';
+exports.colorBorderTertiary = colorBorderTertiary;
 const colorBorderDanger = '#e31c4c';
 exports.colorBorderDanger = colorBorderDanger;
 const colorBackgroundBrand = '#271656';
@@ -367,16 +369,22 @@ const size42 = '42px';
 exports.size42 = size42;
 const size48 = '48px';
 exports.size48 = size48;
+const size50 = '50px';
+exports.size50 = size50;
 const size58 = '58px';
 exports.size58 = size58;
 const size60 = '60px';
 exports.size60 = size60;
+const size70 = '70px';
+exports.size70 = size70;
 const size90 = '90px';
 exports.size90 = size90;
 const size100 = '100px';
 exports.size100 = size100;
 const size110 = '110px';
 exports.size110 = size110;
+const size125 = '125px';
+exports.size125 = size125;
 const size140 = '140px';
 exports.size140 = size140;
 const size160 = '160px';
@@ -391,6 +399,8 @@ const size276 = '276px';
 exports.size276 = size276;
 const size300 = '300px';
 exports.size300 = size300;
+const size320 = '320px';
+exports.size320 = size320;
 const size380 = '380px';
 exports.size380 = size380;
 const size400 = '400px';
@@ -401,6 +411,8 @@ const size500 = '500px';
 exports.size500 = size500;
 const size580 = '580px';
 exports.size580 = size580;
+const size640 = '640px';
+exports.size640 = size640;
 const size720 = '720px';
 exports.size720 = size720;
 const size960 = '960px';

package/lib/styles/index.js.flow

@@ -52,6 +52,8 @@ export const colorBorderPrimary = '#e1e1e1';
 
 export const colorBorderSecondary = '#d1d1d1';
 
+export const colorBorderTertiary = '#AEAEAE';
+
 export const colorBorderDanger = '#e31c4c';
 
 export const colorBackgroundBrand = '#271656';
@@ -360,16 +362,22 @@ export const size42 = '42px';
 
 export const size48 = '48px';
 
+export const size50 = '50px';
+
 export const size58 = '58px';
 
 export const size60 = '60px';
 
+export const size70 = '70px';
+
 export const size90 = '90px';
 
 export const size100 = '100px';
 
 export const size110 = '110px';
 
+export const size125 = '125px';
+
 export const size140 = '140px';
 
 export const size160 = '160px';
@@ -384,6 +392,8 @@ export const size276 = '276px';
 
 export const size300 = '300px';
 
+export const size320 = '320px';
+
 export const size380 = '380px';
 
 export const size400 = '400px';
@@ -394,6 +404,8 @@ export const size500 = '500px';
 
 export const size580 = '580px';
 
+export const size640 = '640px';
+
 export const size720 = '720px';
 
 export const size960 = '960px';

package/lib/styles/variables/_color.css

@@ -26,6 +26,8 @@
 
 @value colorBorderSecondary: #d1d1d1;
 
+@value colorBorderTertiary: #AEAEAE;
+
 @value colorBorderDanger: #e31c4c;
 
 @value colorBackgroundBrand: #271656;

package/lib/styles/variables/_color.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
+exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSubMenuBackgroundDefault = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderTertiary = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackgroundBrand = exports.colorBackdropFill = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -33,6 +33,8 @@ const colorBorderPrimary = '#e1e1e1';
 exports.colorBorderPrimary = colorBorderPrimary;
 const colorBorderSecondary = '#d1d1d1';
 exports.colorBorderSecondary = colorBorderSecondary;
+const colorBorderTertiary = '#AEAEAE';
+exports.colorBorderTertiary = colorBorderTertiary;
 const colorBorderDanger = '#e31c4c';
 exports.colorBorderDanger = colorBorderDanger;
 const colorBackgroundBrand = '#271656';

package/lib/styles/variables/_color.js.flow

@@ -28,6 +28,8 @@ export const colorBorderPrimary = '#e1e1e1';
 
 export const colorBorderSecondary = '#d1d1d1';
 
+export const colorBorderTertiary = '#AEAEAE';
+
 export const colorBorderDanger = '#e31c4c';
 
 export const colorBackgroundBrand = '#271656';

package/lib/styles/variables/_size.css

@@ -34,16 +34,22 @@
 
 @value size48: 48px;
 
+@value size50: 50px;
+
 @value size58: 58px;
 
 @value size60: 60px;
 
+@value size70: 70px;
+
 @value size90: 90px;
 
 @value size100: 100px;
 
 @value size110: 110px;
 
+@value size125: 125px;
+
 @value size140: 140px;
 
 @value size160: 160px;
@@ -58,6 +64,8 @@
 
 @value size300: 300px;
 
+@value size320: 320px;
+
 @value size380: 380px;
 
 @value size400: 400px;
@@ -68,6 +76,8 @@
 
 @value size580: 580px;
 
+@value size640: 640px;
+
 @value size720: 720px;
 
 @value size960: 960px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size70 = exports.size640 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size50 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size320 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size125 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -41,16 +41,22 @@ const size42 = '42px';
 exports.size42 = size42;
 const size48 = '48px';
 exports.size48 = size48;
+const size50 = '50px';
+exports.size50 = size50;
 const size58 = '58px';
 exports.size58 = size58;
 const size60 = '60px';
 exports.size60 = size60;
+const size70 = '70px';
+exports.size70 = size70;
 const size90 = '90px';
 exports.size90 = size90;
 const size100 = '100px';
 exports.size100 = size100;
 const size110 = '110px';
 exports.size110 = size110;
+const size125 = '125px';
+exports.size125 = size125;
 const size140 = '140px';
 exports.size140 = size140;
 const size160 = '160px';
@@ -65,6 +71,8 @@ const size276 = '276px';
 exports.size276 = size276;
 const size300 = '300px';
 exports.size300 = size300;
+const size320 = '320px';
+exports.size320 = size320;
 const size380 = '380px';
 exports.size380 = size380;
 const size400 = '400px';
@@ -75,6 +83,8 @@ const size500 = '500px';
 exports.size500 = size500;
 const size580 = '580px';
 exports.size580 = size580;
+const size640 = '640px';
+exports.size640 = size640;
 const size720 = '720px';
 exports.size720 = size720;
 const size960 = '960px';

package/lib/styles/variables/_size.js.flow

@@ -36,16 +36,22 @@ export const size42 = '42px';
 
 export const size48 = '48px';
 
+export const size50 = '50px';
+
 export const size58 = '58px';
 
 export const size60 = '60px';
 
+export const size70 = '70px';
+
 export const size90 = '90px';
 
 export const size100 = '100px';
 
 export const size110 = '110px';
 
+export const size125 = '125px';
+
 export const size140 = '140px';
 
 export const size160 = '160px';
@@ -60,6 +66,8 @@ export const size276 = '276px';
 
 export const size300 = '300px';
 
+export const size320 = '320px';
+
 export const size380 = '380px';
 
 export const size400 = '400px';
@@ -70,6 +78,8 @@ export const size500 = '500px';
 
 export const size580 = '580px';
 
+export const size640 = '640px';
+
 export const size720 = '720px';
 
 export const size960 = '960px';