odaptos_design_system 1.4.106 → 1.4.108

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/Interviews/Chat.d.ts +3 -3
  2. package/dist/Interviews/Task.d.ts +14 -3
  3. package/dist/NumbersCode/NumbersCode.d.ts +5 -1
  4. package/dist/odaptos_design_system.cjs.development.js +63 -25
  5. package/dist/odaptos_design_system.cjs.development.js.map +1 -1
  6. package/dist/odaptos_design_system.cjs.production.min.js +1 -1
  7. package/dist/odaptos_design_system.cjs.production.min.js.map +1 -1
  8. package/dist/odaptos_design_system.esm.js +63 -25
  9. package/dist/odaptos_design_system.esm.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/Interviews/Chat.modules.scss +5 -2
  12. package/src/Interviews/Chat.tsx +7 -6
  13. package/src/Interviews/Task.modules.scss +3 -4
  14. package/src/Interviews/Task.tsx +18 -6
  15. package/src/NumbersCode/NumbersCode.tsx +53 -9
package/dist/Interviews/Chat.d.ts CHANGED
@@ -3,6 +3,7 @@ interface TaskItem {
3
3
  _id: string;
4
4
  description: string;
5
5
  notes: string;
6
+ type: 'task' | 'question';
6
7
  timedTask: boolean;
7
8
  totalSeconds: number;
8
9
  successSeconds: number;
@@ -19,8 +20,7 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
19
20
  startInterviewIcon?: JSX.Element;
20
21
  startInterview?: () => void;
21
22
  tasks: TaskItem[];
22
- sendTask: (taskIndex: number) => void;
23
- validateTask: (taskIndex: number) => void;
23
+ sendTask: (task: TaskItem) => void;
24
24
  currentTask: TaskItem;
25
25
  chatInputPlaceholder?: string;
26
26
  chatInputValue?: string;
@@ -31,5 +31,5 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
31
31
  isChatDisplay?: boolean;
32
32
  isInterviewer?: boolean;
33
33
  }
34
- export declare const Chat: ({ goBackText, goBack, chatTitle, welcomeTitle, welcomeDescription, startInterviewTitle, startInterviewBtnTitle, startInterviewIcon, startInterview, tasks, sendTask, validateTask, currentTask, chatInputPlaceholder, chatInputValue, chatInputonChange, sendMessage, className, isTaskMode, isInterviewer, ...props }: ChatProps) => React.JSX.Element;
34
+ export declare const Chat: ({ goBackText, goBack, chatTitle, welcomeTitle, welcomeDescription, startInterviewTitle, startInterviewBtnTitle, startInterviewIcon, startInterview, tasks, sendTask, currentTask, chatInputPlaceholder, chatInputValue, chatInputonChange, sendMessage, className, isTaskMode, isInterviewer, ...props }: ChatProps) => React.JSX.Element;
35
35
  export {};
package/dist/Interviews/Task.d.ts CHANGED
@@ -1,4 +1,14 @@
1
1
  import React, { HTMLAttributes } from 'react';
2
+ interface TaskItem {
3
+ _id: string;
4
+ description: string;
5
+ notes: string;
6
+ type: 'task' | 'question';
7
+ timedTask: boolean;
8
+ totalSeconds: number;
9
+ successSeconds: number;
10
+ failureSeconds: number;
11
+ }
2
12
  export interface TaskProps extends HTMLAttributes<HTMLDivElement> {
3
13
  className?: string;
4
14
  taskNumber: string;
@@ -7,8 +17,8 @@ export interface TaskProps extends HTMLAttributes<HTMLDivElement> {
7
17
  state: 'idle' | 'active' | 'disabled';
8
18
  isDone: boolean;
9
19
  taskIndex: number;
10
- sendTask: (taskIndex: number) => void;
11
- validateTask: (taskIndex: number) => void;
20
+ task: TaskItem;
21
+ sendTask: (task: TaskItem) => void;
12
22
  iconAction1?: JSX.Element;
13
23
  iconAction2?: JSX.Element;
14
24
  iconAction3?: JSX.Element;
@@ -18,4 +28,5 @@ export interface TaskProps extends HTMLAttributes<HTMLDivElement> {
18
28
  mainActionText?: string;
19
29
  mainAction?: () => void;
20
30
  }
21
- export declare const Task: ({ taskNumber, taskTitle, notes, className, taskIndex, sendTask, validateTask, state, isDone, iconAction1, iconAction2, iconAction3, action1, action2, action3, mainActionText, mainAction, ...props }: TaskProps) => React.JSX.Element;
31
+ export declare const Task: ({ taskNumber, taskTitle, notes, className, taskIndex, task, sendTask, state, isDone, iconAction1, iconAction2, iconAction3, action1, action2, action3, mainActionText, mainAction, ...props }: TaskProps) => React.JSX.Element;
32
+ export {};
package/dist/NumbersCode/NumbersCode.d.ts CHANGED
@@ -4,6 +4,8 @@ export interface NumbersCodeProps {
4
4
  code: string;
5
5
  isValid: boolean[];
6
6
  setIsValid: (isValid: boolean[]) => void;
7
+ userValue: string[];
8
+ setUserValue: (newValue: string[]) => void;
7
9
  placeholder?: string;
8
10
  containerClassname?: string;
9
11
  className?: string;
@@ -12,10 +14,12 @@ export interface InputElementProps {
12
14
  inputNumber: number;
13
15
  inputCode: string;
14
16
  isValid: boolean[];
17
+ userValue: string[];
18
+ setUserValue: (newValue: string[]) => void;
15
19
  setIsValid: (isValid: boolean[]) => void;
16
20
  maxElement: number;
17
21
  placeholder?: string;
18
22
  className?: string;
19
23
  }
20
24
  /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=131-253&mode=dev */
21
- export declare const NumbersCode: ({ className, code, isValid, setIsValid, containerClassname, placeholder, number }: NumbersCodeProps) => React.JSX.Element;
25
+ export declare const NumbersCode: ({ className, code, userValue, setUserValue, isValid, setIsValid, containerClassname, placeholder, number }: NumbersCodeProps) => React.JSX.Element;
package/dist/odaptos_design_system.cjs.development.js CHANGED
@@ -7953,7 +7953,7 @@ const ControlsBar = ({
7953
7953
  }));
7954
7954
  };
7955
7955
 
7956
- var css_248z$b = ".Chat-modules_chatContainer__xzg50{align-items:flex-start;background:#fff;border-radius:.5rem;display:flex;flex-direction:column;gap:.5rem;height:100%;min-width:25rem;padding:1rem}.Chat-modules_chatContainer__xzg50 .Chat-modules_scrolling_content__urvdP{display:flex;flex-direction:column;gap:.5rem;max-width:100%}.Chat-modules_chatContainer__xzg50 .Chat-modules_scrolling_content__urvdP .Chat-modules_tasks_container__Mg9Oh{max-height:80%;overflow-x:hidden;overflow-y:scroll}.Chat-modules_no_scrollbar__Ia2bX{-ms-overflow-style:none;scrollbar-width:none}.Chat-modules_no_scrollbar__Ia2bX::-webkit-scrollbar{display:none}";
7956
+ var css_248z$b = ".Chat-modules_chatContainer__xzg50{align-items:flex-start;background:#fff;border-radius:.5rem;display:flex;flex-direction:column;gap:.5rem;height:100%;min-width:25rem;padding:1rem}.Chat-modules_chatContainer__xzg50 .Chat-modules_scrolling_content__urvdP{display:flex;flex-direction:column;gap:1rem;max-width:100%}.Chat-modules_chatContainer__xzg50 .Chat-modules_scrolling_content__urvdP .Chat-modules_tasks_container__Mg9Oh{display:flex;flex-direction:column;gap:1rem;max-height:50%;overflow-x:hidden;overflow-y:scroll}.Chat-modules_no_scrollbar__Ia2bX{-ms-overflow-style:none;scrollbar-width:none}.Chat-modules_no_scrollbar__Ia2bX::-webkit-scrollbar{display:none}";
7957
7957
  var styles$b = {"chatContainer":"Chat-modules_chatContainer__xzg50","scrolling_content":"Chat-modules_scrolling_content__urvdP","tasks_container":"Chat-modules_tasks_container__Mg9Oh","no_scrollbar":"Chat-modules_no_scrollbar__Ia2bX"};
7958
7958
  styleInject(css_248z$b);
7959
7959
 
@@ -7969,7 +7969,6 @@ const Chat = ({
7969
7969
  startInterview,
7970
7970
  tasks,
7971
7971
  sendTask,
7972
- validateTask,
7973
7972
  currentTask,
7974
7973
  chatInputPlaceholder,
7975
7974
  chatInputValue,
@@ -7995,7 +7994,7 @@ const Chat = ({
7995
7994
  text: chatTitle,
7996
7995
  weight: "bold",
7997
7996
  size: "lg"
7998
- }), welcomeTitle && welcomeDescription && isInterviewer && /*#__PURE__*/React__default.createElement(WelcomeMessage, {
7997
+ }), welcomeTitle && welcomeDescription && !isInterviewer && /*#__PURE__*/React__default.createElement(WelcomeMessage, {
7999
7998
  title: welcomeTitle,
8000
7999
  description: welcomeDescription
8001
8000
  }), startInterviewTitle && startInterview && startInterviewBtnTitle && !isInterviewer && /*#__PURE__*/React__default.createElement(StartInterview, {
@@ -8010,13 +8009,13 @@ const Chat = ({
8010
8009
  const isCompletedTask = index < currentTaskIndex;
8011
8010
  return /*#__PURE__*/React__default.createElement(Task, {
8012
8011
  key: task._id,
8013
- taskNumber: `Task #${index + 1}`,
8012
+ taskNumber: `${task.type === 'task' ? 'Task' : 'Question'} #${index + 1}`,
8014
8013
  taskTitle: task.description,
8015
8014
  notes: task.notes,
8016
8015
  state: isCompletedTask ? 'disabled' : currentTaskIndex === index ? 'active' : 'idle',
8017
8016
  taskIndex: index,
8017
+ task: task,
8018
8018
  sendTask: sendTask,
8019
- validateTask: validateTask,
8020
8019
  isDone: isCompletedTask
8021
8020
  });
8022
8021
  }))), !isTaskMode && chatInputPlaceholder && typeof chatInputValue === 'string' && chatInputonChange && /*#__PURE__*/React__default.createElement(ChatInput, {
@@ -8189,8 +8188,8 @@ const StartInterview = ({
8189
8188
  }));
8190
8189
  };
8191
8190
 
8192
- var css_248z$i = ".Task-modules_task_container__Iaqc-{align-items:flex-start;background:var(--color-neutral-basics-white,#fff);border:1px solid var(--color-neutral-dark-shades-950,#26292e);border-radius:.5rem;display:flex;flex-direction:column;gap:.5rem;justify-content:center;max-width:100%;padding:0}.Task-modules_task_container__Iaqc- .Task-modules_header__f15OM{max-width:100%}.Task-modules_task_container__Iaqc- .Task-modules_header__f15OM .Task-modules_header_left__JJTGR:hover{background:var(--color-neutral-clear-shades-150,#eee);border-radius:.5rem 0 0 .5rem}.Task-modules_task_container__Iaqc- .Task-modules_header__f15OM .Task-modules_header_right__AymtU:hover{background:var(--color-neutral-clear-shades-150,#eee);border-radius:0 .5rem .5rem 0}.Task-modules_header__f15OM{align-items:center;display:flex;height:100%;justify-content:space-between;max-width:100%;width:100%}.Task-modules_header_left__JJTGR{align-items:flex-start;cursor:pointer;display:flex;flex-direction:column;justify-content:center;max-width:calc(100% - 3.5rem);min-width:calc(100% - 3.5rem);padding:.3125rem .3125rem .3125rem .62rem;width:100%}.Task-modules_header_left__JJTGR .Task-modules_title__-OmPh{max-width:98%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Task-modules_header_right__AymtU{align-items:center;background:var(--color-neutral-basics-white,#fff);border:none;border-left:1px solid var(--color-neutral-dark-shades-950,#26292e);border-radius:0 .5rem .5rem 0;cursor:pointer;display:flex;gap:.5rem;height:100%;justify-content:center;max-width:calc(100% - 3.5rem);padding:1rem .75rem}.Task-modules_header_right__AymtU svg{fill:#000;height:1rem;width:1rem}.Task-modules_disabled_task__NI6LL{align-items:flex-start;background:var(--color-neutral-basics-white,#fff);border:1px solid var(--color-neutral-clear-shades-300,#d5d5d6);border-radius:.5rem;cursor:not-allowed;display:flex;flex-direction:column;gap:.5rem;justify-content:center;max-width:100%;padding:0}.Task-modules_disabled_task__NI6LL .Task-modules_header__f15OM{max-width:100%;width:100%}.Task-modules_disabled_task__NI6LL .Task-modules_header__f15OM .Task-modules_header_left__JJTGR{border-color:var(--color-neutral-clear-shades-300,#d5d5d6);cursor:not-allowed;opacity:.5;width:100%}.Task-modules_disabled_task__NI6LL .Task-modules_header__f15OM .Task-modules_header_right__AymtU{border-color:var(--color-neutral-clear-shades-300,#d5d5d6);cursor:not-allowed;opacity:.5}.Task-modules_active_task__l-n9Q{align-items:flex-start;background:var(--color-neutral-basics-white,#fff);border:1px solid #07f;border-radius:.5rem;display:flex;flex-direction:column;gap:.5rem;justify-content:center;max-width:100%;padding:0}.Task-modules_active_task__l-n9Q .Task-modules_header__f15OM{border-bottom:1px solid var(--color-neutral-clear-shades-300,#d5d5d6);max-width:100%;width:100%}.Task-modules_active_task__l-n9Q .Task-modules_header__f15OM .Task-modules_header_left__JJTGR,.Task-modules_active_task__l-n9Q .Task-modules_header__f15OM .Task-modules_header_right__AymtU{border-color:var(--color-neutral-clear-shades-300,#d5d5d6)}.Task-modules_active_task__l-n9Q .Task-modules_header__f15OM .Task-modules_header_right__AymtU:hover{background:var(--color-neutral-clear-shades-150,#eee)}.Task-modules_taskContent__v3Cm1{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:.5rem;padding:.5rem .75rem .25rem}.Task-modules_taskPopover__S07XU{align-items:flex-start;background:var(--color-neutral-basics-white,#fff);border:1px solid var(--color-neutral-dark-shades-950,#26292e);border-radius:.5rem;display:flex;flex-direction:column;overflow:hidden;padding:.5rem .75rem .75rem;width:25.5625rem}.Task-modules_notesContainer__dz0Me{align-items:flex-start;align-self:stretch;border-top:1px solid var(--color-neutral-clear-shades-300,#d5d5d6);display:flex;flex-direction:column;gap:.25rem;padding-top:.5rem}.Task-modules_actionBtnsContainer__Dz-1j{align-items:flex-start;align-self:stretch;display:flex;gap:.5rem;justify-content:flex-end;padding-top:8px}.Task-modules_popover_paper__Re-kl .Task-modules_MuiPopover-paper__7p4Tk,.Task-modules_popover_paper__Re-kl .Task-modules_MuiPopover-root__w6O-O{background:transparent;border-radius:.5rem}";
8193
- var styles$i = {"task_container":"Task-modules_task_container__Iaqc-","header":"Task-modules_header__f15OM","header_left":"Task-modules_header_left__JJTGR","header_right":"Task-modules_header_right__AymtU","title":"Task-modules_title__-OmPh","disabled_task":"Task-modules_disabled_task__NI6LL","active_task":"Task-modules_active_task__l-n9Q","taskContent":"Task-modules_taskContent__v3Cm1","taskPopover":"Task-modules_taskPopover__S07XU","notesContainer":"Task-modules_notesContainer__dz0Me","actionBtnsContainer":"Task-modules_actionBtnsContainer__Dz-1j","popover_paper":"Task-modules_popover_paper__Re-kl","MuiPopover-root":"Task-modules_MuiPopover-root__w6O-O","MuiPopover-paper":"Task-modules_MuiPopover-paper__7p4Tk"};
8191
+ var css_248z$i = ".Task-modules_task_container__Iaqc-{align-items:flex-start;background:var(--color-neutral-basics-white,#fff);border:1px solid var(--color-neutral-dark-shades-950,#26292e);border-radius:.5rem;display:flex;flex-direction:column;gap:.5rem;justify-content:center;max-width:100%;padding:0}.Task-modules_task_container__Iaqc- .Task-modules_header__f15OM{max-width:100%}.Task-modules_task_container__Iaqc- .Task-modules_header__f15OM .Task-modules_header_left__JJTGR:hover{background:var(--color-neutral-clear-shades-150,#eee);border-radius:.5rem 0 0 .5rem}.Task-modules_task_container__Iaqc- .Task-modules_header__f15OM .Task-modules_header_right__AymtU:hover{background:var(--color-neutral-clear-shades-150,#eee);border-radius:0 .5rem .5rem 0}.Task-modules_header__f15OM{align-items:center;display:flex;height:100%;justify-content:space-between;max-width:100%;width:100%}.Task-modules_header_left__JJTGR{align-items:flex-start;cursor:pointer;display:flex;flex-direction:column;justify-content:center;max-width:calc(100% - 3.5rem);min-width:calc(100% - 3.5rem);padding:.3125rem .3125rem .3125rem .62rem;width:100%}.Task-modules_header_left__JJTGR .Task-modules_title__-OmPh{max-width:98%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Task-modules_header_right__AymtU{align-items:center;background:var(--color-neutral-basics-white,#fff);border:none;border-left:1px solid var(--color-neutral-dark-shades-950,#26292e);border-radius:0 .5rem .5rem 0;display:flex;gap:.5rem;height:100%;justify-content:center;max-width:calc(100% - 3.5rem);padding:1rem .75rem}.Task-modules_header_right__AymtU svg{fill:#000;height:1rem;width:1rem}.Task-modules_clickable__BIHxK{cursor:pointer}.Task-modules_disabled_task__NI6LL{align-items:flex-start;background:var(--color-neutral-basics-white,#fff);border:1px solid var(--color-neutral-clear-shades-300,#d5d5d6);border-radius:.5rem;cursor:not-allowed;display:flex;flex-direction:column;gap:.5rem;justify-content:center;max-width:100%;padding:0}.Task-modules_disabled_task__NI6LL .Task-modules_header__f15OM{max-width:100%;width:100%}.Task-modules_disabled_task__NI6LL .Task-modules_header__f15OM .Task-modules_header_left__JJTGR{border-color:var(--color-neutral-clear-shades-300,#d5d5d6);cursor:not-allowed;opacity:.5;width:100%}.Task-modules_disabled_task__NI6LL .Task-modules_header__f15OM .Task-modules_header_right__AymtU{border-color:var(--color-neutral-clear-shades-300,#d5d5d6);cursor:not-allowed;opacity:.5}.Task-modules_active_task__l-n9Q{align-items:flex-start;background:var(--color-neutral-basics-white,#fff);border:1px solid #07f;border-radius:.5rem;display:flex;flex-direction:column;gap:.5rem;justify-content:center;max-width:100%;padding:0}.Task-modules_active_task__l-n9Q .Task-modules_header__f15OM{border-bottom:1px solid var(--color-neutral-clear-shades-300,#d5d5d6);max-width:100%;width:100%}.Task-modules_active_task__l-n9Q .Task-modules_header__f15OM .Task-modules_header_left__JJTGR,.Task-modules_active_task__l-n9Q .Task-modules_header__f15OM .Task-modules_header_right__AymtU{border-color:var(--color-neutral-clear-shades-300,#d5d5d6)}.Task-modules_taskContent__v3Cm1{align-items:flex-start;align-self:stretch;display:flex;flex-direction:column;gap:.5rem;padding:.5rem .75rem .25rem}.Task-modules_taskPopover__S07XU{align-items:flex-start;background:var(--color-neutral-basics-white,#fff);border:1px solid var(--color-neutral-dark-shades-950,#26292e);border-radius:.5rem;display:flex;flex-direction:column;overflow:hidden;padding:.5rem .75rem .75rem;width:25.5625rem}.Task-modules_notesContainer__dz0Me{align-items:flex-start;align-self:stretch;border-top:1px solid var(--color-neutral-clear-shades-300,#d5d5d6);display:flex;flex-direction:column;gap:.25rem;padding-top:.5rem}.Task-modules_actionBtnsContainer__Dz-1j{align-items:flex-start;align-self:stretch;display:flex;gap:.5rem;justify-content:flex-end;padding-top:8px}.Task-modules_popover_paper__Re-kl .Task-modules_MuiPopover-paper__7p4Tk,.Task-modules_popover_paper__Re-kl .Task-modules_MuiPopover-root__w6O-O{background:transparent;border-radius:.5rem}";
8192
+ var styles$i = {"task_container":"Task-modules_task_container__Iaqc-","header":"Task-modules_header__f15OM","header_left":"Task-modules_header_left__JJTGR","header_right":"Task-modules_header_right__AymtU","title":"Task-modules_title__-OmPh","clickable":"Task-modules_clickable__BIHxK","disabled_task":"Task-modules_disabled_task__NI6LL","active_task":"Task-modules_active_task__l-n9Q","taskContent":"Task-modules_taskContent__v3Cm1","taskPopover":"Task-modules_taskPopover__S07XU","notesContainer":"Task-modules_notesContainer__dz0Me","actionBtnsContainer":"Task-modules_actionBtnsContainer__Dz-1j","popover_paper":"Task-modules_popover_paper__Re-kl","MuiPopover-root":"Task-modules_MuiPopover-root__w6O-O","MuiPopover-paper":"Task-modules_MuiPopover-paper__7p4Tk"};
8194
8193
  styleInject(css_248z$i);
8195
8194
 
8196
8195
  const CustomPopover = /*#__PURE__*/styles$N.styled(Popover$1)({
@@ -8209,8 +8208,8 @@ const Task = ({
8209
8208
  notes,
8210
8209
  className,
8211
8210
  taskIndex,
8211
+ task,
8212
8212
  sendTask,
8213
- validateTask,
8214
8213
  state = 'idle',
8215
8214
  isDone,
8216
8215
  iconAction1,
@@ -8253,10 +8252,9 @@ const Task = ({
8253
8252
  weight: "bold",
8254
8253
  className: styles$i.title
8255
8254
  })), /*#__PURE__*/React__default.createElement("button", {
8256
- className: styles$i.header_right,
8255
+ className: `${styles$i.header_right} ${state === 'idle' && styles$i.clickable}`,
8257
8256
  onClick: () => {
8258
- if (state === 'idle') sendTask(taskIndex);
8259
- if (state === 'active') validateTask(taskIndex);
8257
+ if (state === 'idle') sendTask(task);
8260
8258
  },
8261
8259
  disabled: state === 'disabled'
8262
8260
  }, state === 'active' || isDone ? /*#__PURE__*/React__default.createElement(CheckedIcon, null) : /*#__PURE__*/React__default.createElement(SendIcon, null))), state === 'active' && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
@@ -8827,13 +8825,27 @@ styleInject(css_248z$o);
8827
8825
  const CssTextField$2 = /*#__PURE__*/styles$N.styled(material.TextField)({
8828
8826
  '& .MuiInputBase-input': {
8829
8827
  color: '#26292E',
8830
- fontFamily: 'OpenSans !important',
8831
- fontSize: '1rem'
8828
+ height: '2.75rem',
8829
+ border: '1px',
8830
+ borderColor: '#BCBDBE',
8831
+ borderRadius: '0.5rem',
8832
+ width: '2.25rem',
8833
+ textAlign: 'center',
8834
+ fontFamily: 'Poppins !important',
8835
+ fontSize: '1rem',
8836
+ fontWeight: '400'
8832
8837
  },
8833
8838
  '& .MuiInputBase-input.Mui-disabled': {
8834
8839
  color: '#26292E',
8835
- fontFamily: 'OpenSans !important',
8836
- fontSize: '1rem'
8840
+ borderColor: '#BCBDBE',
8841
+ border: '1px',
8842
+ borderRadius: '0.5rem',
8843
+ height: '2.75rem',
8844
+ width: '2.25rem',
8845
+ textAlign: 'center',
8846
+ fontFamily: 'Poppins !important',
8847
+ fontSize: '1rem',
8848
+ fontWeight: '400'
8837
8849
  },
8838
8850
  '& .Mui-error': {
8839
8851
  color: '#26292E'
@@ -8876,7 +8888,8 @@ const CssTextField$2 = /*#__PURE__*/styles$N.styled(material.TextField)({
8876
8888
  '& .MuiOutlinedInput-root': {
8877
8889
  fontFamily: 'OpenSans',
8878
8890
  '& fieldset': {
8879
- borderColor: '#96989A'
8891
+ borderColor: '#BCBDBE',
8892
+ borderRadius: '0.5rem'
8880
8893
  },
8881
8894
  '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button': {
8882
8895
  display: 'none'
@@ -8884,17 +8897,25 @@ const CssTextField$2 = /*#__PURE__*/styles$N.styled(material.TextField)({
8884
8897
  '& input[type=number]': {
8885
8898
  MozAppearance: 'textfield'
8886
8899
  },
8900
+ '& input::placeholder': {
8901
+ color: '#26292E',
8902
+ opacity: "1"
8903
+ },
8887
8904
  '&:hover fieldset': {
8888
- borderColor: '#0077FF'
8905
+ borderColor: '#0077FF',
8906
+ borderRadius: '0.5rem'
8889
8907
  },
8890
8908
  '&.Mui-focused fieldset': {
8891
- borderColor: '#0077FF'
8909
+ borderColor: '#0077FF',
8910
+ borderRadius: '0.5rem'
8892
8911
  },
8893
8912
  '&.Mui-error fieldset': {
8894
- borderColor: '#F54C4C'
8913
+ borderColor: '#F54C4C',
8914
+ borderRadius: '0.5rem'
8895
8915
  },
8896
8916
  '&.Mui-disabled .Mui-focused fieldset': {
8897
- borderColor: 'rgba(0, 119, 255, 0.5)'
8917
+ borderColor: 'rgba(0, 119, 255, 0.5)',
8918
+ borderRadius: '0.5rem'
8898
8919
  },
8899
8920
  '& .MuiAutocomplete-endAdornment': {
8900
8921
  height: '99%',
@@ -8913,6 +8934,8 @@ const NumberInput = ({
8913
8934
  inputCode,
8914
8935
  inputNumber,
8915
8936
  isValid,
8937
+ userValue,
8938
+ setUserValue,
8916
8939
  setIsValid,
8917
8940
  maxElement,
8918
8941
  placeholder,
@@ -8921,11 +8944,22 @@ const NumberInput = ({
8921
8944
  const [value, setValue] = React.useState('');
8922
8945
  return /*#__PURE__*/React__default.createElement(CssTextField$2, Object.assign({
8923
8946
  value: value,
8924
- onChange: event => {
8925
- if (Number(event.target.value.slice(-1)) || Number(event.target.value.slice(-1)) === 0) {
8947
+ onKeyDown: event => {
8948
+ if (event.key === "Backspace") {
8949
+ let newValidity = [...isValid];
8950
+ setValue("");
8951
+ let newUserValue = [...userValue];
8952
+ newUserValue[inputNumber] = "";
8953
+ setUserValue(newUserValue);
8954
+ setIsValid([...newValidity]);
8955
+ }
8956
+ if (Number(event.key) || Number(event.key) === 0) {
8926
8957
  let newValidity = [...isValid];
8927
- setValue(event.target.value.slice(-1));
8928
- newValidity[inputNumber] = event.target.value.slice(-1) === inputCode;
8958
+ setValue(event.key);
8959
+ newValidity[inputNumber] = event.key === inputCode;
8960
+ let newUserValue = [...userValue];
8961
+ newUserValue[inputNumber] = event.key;
8962
+ setUserValue(newUserValue);
8929
8963
  setIsValid([...newValidity]);
8930
8964
  if (inputNumber < maxElement - 1) {
8931
8965
  const nextInput = document.getElementById(`NumberInput#${inputNumber + 1}`);
@@ -8944,6 +8978,8 @@ const NumberInput = ({
8944
8978
  const NumbersCode = ({
8945
8979
  className,
8946
8980
  code,
8981
+ userValue,
8982
+ setUserValue,
8947
8983
  isValid,
8948
8984
  setIsValid,
8949
8985
  containerClassname,
@@ -8953,9 +8989,11 @@ const NumbersCode = ({
8953
8989
  const children = [];
8954
8990
  for (let i = 0; i < number; i += 1) {
8955
8991
  children.push( /*#__PURE__*/React__default.createElement(NumberInput, {
8992
+ userValue: userValue,
8993
+ setUserValue: setUserValue,
8956
8994
  setIsValid: setIsValid,
8957
8995
  isValid: isValid,
8958
- inputCode: code.charAt(i),
8996
+ inputCode: code ? code.charAt(i) : '',
8959
8997
  className: className,
8960
8998
  inputNumber: i,
8961
8999
  placeholder: placeholder,