pixel-react 1.1.6 → 1.1.8

package/lib/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.stories.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.tsx","../src/components/allprojectsdropdown/index.ts","../src/components/allprojectsdropdown/types.ts","../src/components/appheader/appheader.stories.tsx","../src/components/appheader/appheader.tsx","../src/components/appheader/index.ts","../src/components/appheader/types.ts","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/dashboarddonutchart/dashboarddonutchart.stories.tsx","../src/components/charts/dashboarddonutchart/dashboarddonutchart.tsx","../src/components/charts/dashboarddonutchart/index.ts","../src/components/charts/dashboarddonutchart/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/piechart/piechart.stories.tsx","../src/components/charts/piechart/piechart.tsx","../src/components/charts/piechart/index.ts","../src/components/charts/piechart/types.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/datepicker/datepicker.stories.tsx","../src/components/datepicker/datepicker.tsx","../src/components/datepicker/timepicker.tsx","../src/components/datepicker/index.ts","../src/components/datepicker/types.ts","../src/components/draganddrop/draganddrop.stories.tsx","../src/components/draganddrop/draganddrop.ts","../src/components/draganddrop/draganddroplist.tsx","../src/components/draganddrop/index.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/ff_captcha/recaptcha.tsx","../src/components/ff_captcha/captcha.stories.tsx","../src/components/ff_captcha/index.ts","../src/components/ff_captcha/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/iconbutton/iconbutton.stories.tsx","../src/components/iconbutton/iconbutton.tsx","../src/components/iconbutton/index.ts","../src/components/iconbutton/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/machineinputfield/machineinputfield.stories.tsx","../src/components/machineinputfield/machineinputfield.tsx","../src/components/machineinputfield/index.ts","../src/components/machineinputfield/types.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/modal/modal.stories.tsx","../src/components/modal/modal.tsx","../src/components/modal/index.tsx","../src/components/modal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/nlpinput/nlpinput.stories.tsx","../src/components/nlpinput/nlpinput.tsx","../src/components/nlpinput/index.ts","../src/components/nlpinput/type.tsx","../src/components/nlpinput/components/nlpdropdown/nlpdropdowntype.ts","../src/components/nlpinput/components/nlpdropdown/nlpdropdown.tsx","../src/components/paper/paper.stories.tsx","../src/components/paper/paper.tsx","../src/components/paper/index.ts","../src/components/paper/types.ts","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/sequentialconnectingbranch/sequentialconnectingbranch.stories.tsx","../src/components/sequentialconnectingbranch/sequentialconnectingbranch.tsx","../src/components/sequentialconnectingbranch/index.ts","../src/components/sequentialconnectingbranch/types.ts","../src/components/sequentialconnectingbranch/components/addbrowsermodal/addbrowsermodal.tsx","../src/components/sequentialconnectingbranch/components/addbrowsermodal/types.ts","../src/components/sequentialconnectingbranch/components/branches/branches.tsx","../src/components/sequentialconnectingbranch/components/branches/types.ts","../src/components/sequentialconnectingbranch/components/connectingbranches/connectingbranches.tsx","../src/components/sequentialconnectingbranch/components/connectingbranches/types.ts","../src/components/sequentialconnectingbranch/components/datasetlistmodal/datasetlistmodal.tsx","../src/components/sequentialconnectingbranch/components/datasetlistmodal/types.ts","../src/components/statedropdown/statedropdown.stories.tsx","../src/components/statedropdown/statedropdown.tsx","../src/components/statedropdown/statedropdowntypes.tsx","../src/components/statedropdown/index.ts","../src/components/statusbutton/statusbutton.stories.tsx","../src/components/statusbutton/statusbutton.tsx","../src/components/statusbutton/index.ts","../src/components/statusbutton/types.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/components/variableinput/variableinput.stories.tsx","../src/components/variableinput/variableinput.tsx","../src/components/variableinput/index.ts","../src/components/variableinput/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.stories.tsx","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.stories.tsx","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.stories.tsx","../src/utils/debounce/debounce.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/findandinsert/findandinsert.stories.tsx","../src/utils/findandinsert/findandinsert.ts","../src/utils/getencrypteddata/getencrypteddata.stories.tsx","../src/utils/getencrypteddata/getencrypteddata.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/throttle/throttle.stories.tsx","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.3"}
+{"root":["../src/index.ts","../src/styleguide/colorpalette/colorpalette.stories.tsx","../src/styleguide/colorpalette/colorpalette.tsx","../src/styleguide/colorpalette/colorpalettelist.ts","../src/styleguide/colorpalette/index.ts","../src/styleguide/colorpalette/types.ts","../src/styleguide/typography/typography.stories.tsx","../src/styleguide/typography/typography.tsx","../src/styleguide/typography/typographylist.ts","../src/styleguide/typography/types.ts","../src/assets/utils/functionutils.ts","../src/components/accordion/accordion.stories.tsx","../src/components/accordion/accordion.tsx","../src/components/accordion/index.ts","../src/components/accordion/types.ts","../src/components/addresourcebutton/addbutton.stories.tsx","../src/components/addresourcebutton/addbutton.tsx","../src/components/addresourcebutton/index.ts","../src/components/addresourcebutton/type.ts","../src/components/addresourcebutton/arrowsbutton/arrowsbutton.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.stories.tsx","../src/components/allprojectsdropdown/allprojectsdropdown.tsx","../src/components/allprojectsdropdown/index.ts","../src/components/allprojectsdropdown/types.ts","../src/components/appheader/appheader.stories.tsx","../src/components/appheader/appheader.tsx","../src/components/appheader/index.ts","../src/components/appheader/types.ts","../src/components/attachmentbutton/attachmentbutton.stories.tsx","../src/components/attachmentbutton/attachmentbutton.tsx","../src/components/attachmentbutton/index.ts","../src/components/attachmentbutton/types.ts","../src/components/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/types.ts","../src/components/charts/dashboarddonutchart/dashboarddonutchart.stories.tsx","../src/components/charts/dashboarddonutchart/dashboarddonutchart.tsx","../src/components/charts/dashboarddonutchart/index.ts","../src/components/charts/dashboarddonutchart/types.ts","../src/components/charts/donutchart/donutchart.stories.tsx","../src/components/charts/donutchart/donutchart.tsx","../src/components/charts/donutchart/index.ts","../src/components/charts/donutchart/type.ts","../src/components/charts/piechart/piechart.stories.tsx","../src/components/charts/piechart/piechart.tsx","../src/components/charts/piechart/index.ts","../src/components/charts/piechart/types.ts","../src/components/charts/radialchart/radialchart.stories.tsx","../src/components/charts/radialchart/radialchart.tsx","../src/components/charts/radialchart/index.ts","../src/components/charts/radialchart/types.ts","../src/components/checkbox/checkbox.stories.tsx","../src/components/checkbox/checkbox.tsx","../src/components/checkbox/index.ts","../src/components/checkbox/types.ts","../src/components/chip/chip.stories.tsx","../src/components/chip/chip.tsx","../src/components/chip/index.ts","../src/components/chip/types.ts","../src/components/datepicker/datepicker.stories.tsx","../src/components/datepicker/datepicker.tsx","../src/components/datepicker/timepicker.tsx","../src/components/datepicker/index.ts","../src/components/datepicker/types.ts","../src/components/draganddrop/draganddrop.stories.tsx","../src/components/draganddrop/draganddrop.ts","../src/components/draganddrop/draganddroplist.tsx","../src/components/draganddrop/index.ts","../src/components/drawer/drawer.stories.tsx","../src/components/drawer/drawer.tsx","../src/components/drawer/types.ts","../src/components/drawer/index.ts","../src/components/expandablemenu/expandablemenu.stories.tsx","../src/components/expandablemenu/expandablemenu.tsx","../src/components/expandablemenu/index.ts","../src/components/expandablemenu/types.ts","../src/components/ff_captcha/recaptcha.tsx","../src/components/ff_captcha/captcha.stories.tsx","../src/components/ff_captcha/index.ts","../src/components/ff_captcha/types.ts","../src/components/filedropzone/dropzone.tsx","../src/components/filedropzone/filedropzone.stories.tsx","../src/components/filedropzone/filedropzone.tsx","../src/components/filedropzone/filepreview.tsx","../src/components/filedropzone/index.ts","../src/components/filedropzone/types.ts","../src/components/form/form.stories.tsx","../src/components/form/form.tsx","../src/components/form/index.ts","../src/components/form/types.ts","../src/components/gridlayout/gridlayout.stories.tsx","../src/components/gridlayout/gridlayout.tsx","../src/components/gridlayout/index.ts","../src/components/gridlayout/types.ts","../src/components/highlighttext/highlighttext.stories.tsx","../src/components/highlighttext/highlighttext.tsx","../src/components/highlighttext/index.ts","../src/components/highlighttext/types.ts","../src/components/icon/icon.stories.tsx","../src/components/icon/icon.tsx","../src/components/icon/iconlist.ts","../src/components/icon/index.ts","../src/components/icon/types.ts","../src/components/iconbutton/iconbutton.stories.tsx","../src/components/iconbutton/iconbutton.tsx","../src/components/iconbutton/index.ts","../src/components/iconbutton/types.ts","../src/components/input/input.stories.tsx","../src/components/input/input.tsx","../src/components/input/index.ts","../src/components/input/types.ts","../src/components/inputwithdropdown/inputwithdropdown.stories.tsx","../src/components/inputwithdropdown/inputwithdropdown.tsx","../src/components/inputwithdropdown/index.ts","../src/components/inputwithdropdown/types.ts","../src/components/lazyload/lazyload.stories.tsx","../src/components/lazyload/lazyload.ts","../src/components/lazyload/lazyloading.tsx","../src/components/lazyload/index.ts","../src/components/machineinputfield/machineinputfield.stories.tsx","../src/components/machineinputfield/machineinputfield.tsx","../src/components/machineinputfield/index.ts","../src/components/machineinputfield/types.ts","../src/components/menuoption/menuoption.stories.tsx","../src/components/menuoption/menuoption.tsx","../src/components/menuoption/index.ts","../src/components/menuoption/types.ts","../src/components/minimodal/minimodal.stories.tsx","../src/components/minimodal/minimodal.tsx","../src/components/minimodal/index.ts","../src/components/minimodal/types.ts","../src/components/modal/modal.stories.tsx","../src/components/modal/modal.tsx","../src/components/modal/index.tsx","../src/components/modal/types.ts","../src/components/multiselect/dropdown.tsx","../src/components/multiselect/multiselect.stories.tsx","../src/components/multiselect/multiselect.tsx","../src/components/multiselect/multiselecttypes.ts","../src/components/multiselect/dropdowntypes.ts","../src/components/multiselect/index.ts","../src/components/nlpinput/nlpinput.stories.tsx","../src/components/nlpinput/nlpinput.tsx","../src/components/nlpinput/index.ts","../src/components/nlpinput/type.tsx","../src/components/nlpinput/components/nlpdropdown/nlpdropdowntype.ts","../src/components/nlpinput/components/nlpdropdown/nlpdropdown.tsx","../src/components/paper/paper.stories.tsx","../src/components/paper/paper.tsx","../src/components/paper/index.ts","../src/components/paper/types.ts","../src/components/radiobutton/radiobutton.stories.tsx","../src/components/radiobutton/radiobutton.tsx","../src/components/radiobutton/index.ts","../src/components/radiobutton/radiobuttontypes.tsx","../src/components/radiogroup/radiogroup.stories.tsx","../src/components/radiogroup/radiogroup.tsx","../src/components/radiogroup/index.ts","../src/components/radiogroup/radiogrouptypes.tsx","../src/components/search/search.stories.tsx","../src/components/search/search.tsx","../src/components/search/index.ts","../src/components/search/types.ts","../src/components/select/select.stories.tsx","../src/components/select/select.tsx","../src/components/select/index.ts","../src/components/select/types.ts","../src/components/select/components/dropdown/dropdown.tsx","../src/components/select/components/dropdown/dropdowntypes.ts","../src/components/sequentialconnectingbranch/sequentialconnectingbranch.stories.tsx","../src/components/sequentialconnectingbranch/sequentialconnectingbranch.tsx","../src/components/sequentialconnectingbranch/index.ts","../src/components/sequentialconnectingbranch/types.ts","../src/components/sequentialconnectingbranch/components/addbrowsermodal/addbrowsermodal.tsx","../src/components/sequentialconnectingbranch/components/addbrowsermodal/types.ts","../src/components/sequentialconnectingbranch/components/branches/branches.tsx","../src/components/sequentialconnectingbranch/components/branches/types.ts","../src/components/sequentialconnectingbranch/components/connectingbranches/connectingbranches.tsx","../src/components/sequentialconnectingbranch/components/connectingbranches/types.ts","../src/components/sequentialconnectingbranch/components/datasetlistmodal/datasetlistmodal.tsx","../src/components/sequentialconnectingbranch/components/datasetlistmodal/types.ts","../src/components/statedropdown/statedropdown.stories.tsx","../src/components/statedropdown/statedropdown.tsx","../src/components/statedropdown/statedropdowntypes.tsx","../src/components/statedropdown/index.ts","../src/components/statusbutton/statusbutton.stories.tsx","../src/components/statusbutton/statusbutton.tsx","../src/components/statusbutton/index.ts","../src/components/statusbutton/types.ts","../src/components/table/table.stories.tsx","../src/components/table/table.tsx","../src/components/table/types.ts","../src/components/table/index.ts","../src/components/tabletree/tabletree.stories.tsx","../src/components/tabletree/tabletree.tsx","../src/components/tabletree/data.ts","../src/components/tabletree/index.ts","../src/components/tabs/tabs.stories.tsx","../src/components/tabs/tabs.tsx","../src/components/tabs/index.ts","../src/components/tabs/types.ts","../src/components/textarea/textarea.stories.tsx","../src/components/textarea/textarea.tsx","../src/components/textarea/types.ts","../src/components/textarea/index.tsx","../src/components/themeprovider/themeprovider.tsx","../src/components/themeprovider/index.ts","../src/components/themeprovider/types.ts","../src/components/toast/toast.stories.tsx","../src/components/toast/toast.tsx","../src/components/toast/index.ts","../src/components/toast/types.ts","../src/components/toggle/toggle.stories.tsx","../src/components/toggle/toggle.tsx","../src/components/toggle/index.ts","../src/components/toggle/types.ts","../src/components/tooltip/tooltip.stories.tsx","../src/components/tooltip/tooltip.tsx","../src/components/tooltip/index.ts","../src/components/tooltip/types.ts","../src/components/typography/typography.stories.tsx","../src/components/typography/typography.tsx","../src/components/typography/index.ts","../src/components/typography/types.ts","../src/components/variableinput/variableinput.stories.tsx","../src/components/variableinput/variableinput.tsx","../src/components/variableinput/index.ts","../src/components/variableinput/types.ts","../src/hooks/useclickoutside.tsx","../src/hooks/usefiledropzone.tsx","../src/hooks/useportalposition.tsx","../src/hooks/usetheme.tsx","../src/hooks/keyboardevents/useesckeyevent.tsx","../src/utils/tablecell/tablecell.ts","../src/utils/checkempty/checkempty.stories.tsx","../src/utils/checkempty/checkempty.ts","../src/utils/comparearrays/comparearrays.stories.tsx","../src/utils/comparearrays/comparearrays.ts","../src/utils/compareobjects/compareobjects.stories.tsx","../src/utils/compareobjects/compareobjects.ts","../src/utils/debounce/debounce.stories.tsx","../src/utils/debounce/debounce.ts","../src/utils/ffid/ffid.stories.tsx","../src/utils/ffid/ffid.ts","../src/utils/findandinsert/findandinsert.stories.tsx","../src/utils/findandinsert/findandinsert.ts","../src/utils/getencrypteddata/getencrypteddata.stories.tsx","../src/utils/getencrypteddata/getencrypteddata.ts","../src/utils/getextension/getextension.stories.tsx","../src/utils/getextension/getextension.ts","../src/utils/throttle/throttle.stories.tsx","../src/utils/throttle/throttle.ts","../src/utils/truncatetext/truncatetext.stories.tsx","../src/utils/truncatetext/truncatetext.ts"],"version":"5.6.3"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/assets/Themes/BaseTheme.scss

@@ -77,6 +77,13 @@ $base-theme: (
   file-details-bg: #ffffff,
   ff-mini-modal-border: #ffffff,
   ff-mini-modal-box-shadow: #3713553d,
+  ff-mini-modal-arrow-shadow: #00000040,
+
+  ff-error-light: #e42525,
+  ff-chips-fill-color: #f9d5ff,
+  ff-chips-blur-color: #575757,
+  ff-chip-bg: #ffffff,
+  ff-chip-text-color: #1e161f,
   ff-mini-modal-footer-background: #aeb0c0,
   input-default-border-color: #a3a3a3,
   input-hover-border-color: #1e161f,
@@ -106,7 +113,7 @@ $base-theme: (
   text-color-light: #1e161f80,
   radio-button-border: #b5b5b5,
   radio-button-hover: #d3d3d3,
-  menu-variant-dark-icon-color:#ffffff,
+  menu-variant-dark-icon-color: #ffffff,
   menu-option-icon-color: #ffffff,
   menu-option-icon-clicked: #71347b,
   delete-text-color: #c50303,
@@ -173,6 +180,11 @@ $base-theme: (
   modal-header-text-color: #ffc600,
   switch-license-text-color: #61296a,
   switch-license-header-text-color: #610b86,
+  dotted-border-color: #000000,
+  select-license-header-text-color: #5f2868,
+  in-active-button-color: #808080,
+  button-background-gradient-color: #9c1ebb,
+  details-page-value-color: #808080,
   // TODO:: Need to change the color code values of below 7 color (N/A in DS)
   ff-machine-input-field-border-color: #f1ebf2,
   ff-machine-input-field-text-color: #1e161f,
@@ -181,6 +193,11 @@ $base-theme: (
   ff-connecting-branch-modal-border: #e0e0e0,
   ff-connecting-branch-scope-color: #079455,
   ff-connecting-branch-delete-color: #e42525,
+  ff-app-header-menu-border-bottom-color: #ffffff,
+  ff-app-header-submenu-border-bottom-color:
+    linear-gradient(90deg, #592f7c 0%, #741ebb 100%),
+  ff-delete-button-attachment: #a91224,
+  email-table-border-color: #959595,
 );
 :root {
   @each $key, $value in $base-theme {

package/src/assets/Themes/DarkTheme.scss

@@ -85,6 +85,13 @@ $dark-theme: (
   file-details-bg: #ffffff,
   ff-mini-modal-border: #ffffff,
   ff-mini-modal-box-shadow: #3713553d,
+  ff-mini-modal-arrow-shadow: #00000040,
+
+  ff-error-light: #e42525,
+  ff-chips-fill-color: #f9d5ff,
+  ff-chips-blur-color: #575757,
+  ff-chip-bg: #ffffff,
+  ff-chip-text-color: #1e161f,
   ff-mini-modal-footer-background: #aeb0c0,
   input-default-border-color: #a3a3a3,
   input-hover-border-color: #1e161f,
@@ -182,6 +189,15 @@ $dark-theme: (
   modal-header-text-color: #ffc600,
   switch-license-text-color: #61296a,
   switch-license-header-text-color: #610b86,
+  dotted-border-color:#000000,
+  select-license-header-text-color:#5F2868,
+  in-active-button-color:#808080,
+  button-background-gradient-color:#9C1EBB,
+  ff-app-header-menu-border-bottom-color:#FFFFFF,
+  ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592F7C 0%, #741EBB 100%),
+  details-page-value-color: #808080,
+  ff-delete-button-attachment: #a91224,
+  email-table-border-color: #959595,
 );
 :root {
   @each $key, $value in $dark-theme {

package/src/assets/icons/add_file.svg

@@ -0,0 +1,14 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_911_11481)">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+            d="M19.1307 13.4822C19.6597 13.4822 20.0885 13.0534 20.0885 12.5243C20.0885 11.9953 19.6597 11.5665 19.1307 11.5665L12.9579 11.5665L12.9579 5.39368C12.9579 4.86467 12.529 4.43582 12 4.43582C11.471 4.43582 11.0421 4.86467 11.0421 5.39368L11.0421 11.5665L4.86934 11.5665C4.34033 11.5665 3.91148 11.9953 3.91148 12.5243C3.91148 13.0534 4.34032 13.4822 4.86934 13.4822L11.0421 13.4822V19.655C11.0421 20.184 11.471 20.6129 12 20.6129C12.529 20.6129 12.9579 20.184 12.9579 19.655V13.4822L19.1307 13.4822Z"
+            fill="currentColor" />
+    </g>
+    <defs>
+        <clipPath id="clip0_911_11481">
+            <path
+                d="M0 4.52441C0 2.31528 1.79086 0.524414 4 0.524414H20C22.2091 0.524414 24 2.31528 24 4.52441V20.5244C24 22.7336 22.2091 24.5244 20 24.5244H4C1.79086 24.5244 0 22.7336 0 20.5244V4.52441Z"
+                fill="currentColor" />
+        </clipPath>
+    </defs>
+</svg>

package/src/assets/icons/app_switch.svg

@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.36284 2.18142C4.36284 0.976656 3.38619 0 2.18142 0C0.976656 0 0 0.976656 0 2.18142C0 3.38619 0.976656 4.36284 2.18142 4.36284C3.38619 4.36284 4.36284 3.38619 4.36284 2.18142Z" fill="currentColor"/>
+<path d="M4.36284 7.99929C4.36284 6.79453 3.38619 5.81787 2.18142 5.81787C0.976656 5.81787 0 6.79453 0 7.99929C0 9.20406 0.976656 10.1807 2.18142 10.1807C3.38619 10.1807 4.36284 9.20406 4.36284 7.99929Z" fill="currentColor"/>
+<path d="M4.36284 13.8155C4.36284 12.6107 3.38619 11.634 2.18142 11.634C0.976656 11.634 0 12.6107 0 13.8155C0 15.0202 0.976656 15.9969 2.18142 15.9969C3.38619 15.9969 4.36284 15.0202 4.36284 13.8155Z" fill="currentColor"/>
+<path d="M10.18 2.18142C10.18 0.976656 9.20339 0 7.99862 0C6.79386 0 5.8172 0.976656 5.8172 2.18142C5.8172 3.38619 6.79386 4.36284 7.99862 4.36284C9.20339 4.36284 10.18 3.38619 10.18 2.18142Z" fill="currentColor"/>
+<path d="M10.18 7.99929C10.18 6.79453 9.20339 5.81787 7.99862 5.81787C6.79386 5.81787 5.8172 6.79453 5.8172 7.99929C5.8172 9.20406 6.79386 10.1807 7.99862 10.1807C9.20339 10.1807 10.18 9.20406 10.18 7.99929Z" fill="currentColor"/>
+<path d="M10.18 13.8155C10.18 12.6107 9.20339 11.634 7.99862 11.634C6.79386 11.634 5.8172 12.6107 5.8172 13.8155C5.8172 15.0202 6.79386 15.9969 7.99862 15.9969C9.20339 15.9969 10.18 15.0202 10.18 13.8155Z" fill="currentColor"/>
+<path d="M15.9977 2.18142C15.9977 0.976656 15.021 0 13.8162 0C12.6115 0 11.6348 0.976656 11.6348 2.18142C11.6348 3.38619 12.6115 4.36284 13.8162 4.36284C15.021 4.36284 15.9977 3.38619 15.9977 2.18142Z" fill="currentColor"/>
+<path d="M13.8189 5.81982C14.2503 5.81982 14.6721 5.94776 15.0308 6.18746C15.3895 6.42716 15.6691 6.76785 15.8342 7.16645C15.9993 7.56505 16.0425 8.00366 15.9584 8.42682C15.8742 8.84997 15.6664 9.23867 15.3614 9.54374C15.0563 9.84882 14.6676 10.0566 14.2444 10.1408C13.8213 10.2249 13.3827 10.1817 12.9841 10.0166C12.5855 9.85151 12.2448 9.57191 12.0051 9.21318C11.7654 8.85444 11.6375 8.43269 11.6375 8.00125C11.6375 7.4227 11.8673 6.86784 12.2764 6.45875C12.6855 6.04965 13.2403 5.81982 13.8189 5.81982Z" fill="currentColor"/>
+<path d="M13.8189 11.6372C14.2503 11.6372 14.6721 11.7651 15.0308 12.0048C15.3895 12.2445 15.6691 12.5852 15.8342 12.9838C15.9993 13.3824 16.0425 13.821 15.9584 14.2442C15.8742 14.6674 15.6664 15.056 15.3614 15.3611C15.0563 15.6662 14.6676 15.874 14.2444 15.9581C13.8213 16.0423 13.3827 15.9991 12.9841 15.834C12.5855 15.6689 12.2448 15.3893 12.0051 15.0306C11.7654 14.6718 11.6375 14.2501 11.6375 13.8186C11.6375 13.2401 11.8673 12.6852 12.2764 12.2761C12.6855 11.867 13.2403 11.6372 13.8189 11.6372Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/backward_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 7.63193L4.46894 7.63193L8.32419 11.397L6.66787 13L-5.68248e-07 6.5L6.66787 -5.82924e-07L8.31217 1.60299L4.46894 5.36338L16 5.36338L16 7.63193Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/cloud_server_host_icon.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.32309 14.2733L7.09953 15.1872C6.42885 15.4519 5.89312 15.6534 5.49418 15.7919C5.09482 15.9309 4.63078 16 4.10207 16C3.29014 16 2.65862 15.8011 2.2082 15.406C1.75778 15.0094 1.53251 14.5068 1.53251 13.8971C1.53251 13.661 1.54885 13.4182 1.58284 13.1709C1.61711 12.9232 1.6716 12.6443 1.74617 12.3326L2.58434 9.36594C2.6589 9.08187 2.72228 8.81271 2.77305 8.55818C2.82453 8.30522 2.84934 8.07249 2.84934 7.86298C2.84934 7.48412 2.7709 7.21912 2.61474 7.07013C2.45857 6.92157 2.16059 6.84614 1.71821 6.84614C1.50153 6.84614 1.27883 6.88084 1.05183 6.94796C0.823829 7.01535 0.62895 7.08046 0.465332 7.14097L0.689464 6.22637C1.23854 6.00281 1.76338 5.81138 2.26542 5.65249C2.76746 5.49318 3.24182 5.41345 3.69051 5.41345C4.49684 5.41345 5.11905 5.60832 5.55599 5.99808C5.99292 6.38813 6.21132 6.89375 6.21132 7.51682C6.21132 7.64573 6.19698 7.87288 6.16615 8.19753C6.13603 8.5229 6.07997 8.82103 5.99823 9.0922L5.16365 12.0469C5.09525 12.2843 5.03373 12.5556 4.98024 12.8609C4.92503 13.1641 4.89865 13.3959 4.89865 13.5513C4.89865 13.9437 4.98612 14.2115 5.1615 14.3539C5.33816 14.4963 5.64246 14.5672 6.07466 14.5672C6.27757 14.5672 6.50844 14.5312 6.76498 14.4605C7.0208 14.3898 7.20737 14.3277 7.32309 14.2733ZM7.53475 1.86849C7.53475 2.38329 7.34073 2.82295 6.95083 3.18446C6.56193 3.54725 6.0933 3.7288 5.54509 3.7288C4.99515 3.7288 4.52538 3.54725 4.13204 3.18446C3.73941 2.8228 3.54267 2.38329 3.54267 1.86849C3.54267 1.35469 3.73941 0.91431 4.13204 0.548213C4.52466 0.18269 4.9953 0 5.54509 0C6.09316 0 6.56193 0.18312 6.95083 0.548213C7.34101 0.91431 7.53475 1.35483 7.53475 1.86849Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/continue_without_sign.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.84022 8.49669C7.89307 8.49865 7.94605 8.49999 7.99952 8.49999C8.04908 8.49999 8.0984 8.49889 8.14759 8.49706C9.26673 8.52123 10.3674 8.81737 11.34 9.35863C11.6416 9.52648 12.0222 9.41808 12.1901 9.11645C12.3579 8.81481 12.2495 8.43419 11.9479 8.26635C11.5001 8.0172 11.0295 7.81188 10.5437 7.65221C11.5786 6.87634 12.2495 5.64001 12.2495 4.25C12.2495 1.90649 10.3429 0 7.99952 0C5.65601 0 3.74952 1.90649 3.74952 4.25C3.74952 5.64086 4.42115 6.87792 5.45716 7.65368C4.50807 7.96606 3.61744 8.45202 2.8379 9.09313C1.40883 10.2687 0.415176 11.9083 0.0400542 13.7101C-0.0774994 14.2746 0.0633697 14.8545 0.426406 15.301C0.787612 15.7452 1.32338 16 1.89613 16H6.78077C7.12586 16 7.40577 15.7202 7.40577 15.375C7.40577 15.0298 7.12586 14.75 6.78077 14.75H1.89613C1.62929 14.75 1.4684 14.6011 1.39613 14.5123C1.2715 14.359 1.22328 14.1595 1.26381 13.9648C1.91285 10.8473 4.66407 8.57055 7.84022 8.49669ZM4.99952 4.25C4.99952 2.59582 6.34522 1.25 7.99952 1.25C9.65369 1.25 10.9995 2.59582 10.9995 4.25C10.9995 5.85436 9.73365 7.16845 8.14832 7.24633C8.09864 7.24535 8.04908 7.24474 7.99952 7.24474C7.95069 7.24474 7.90198 7.24548 7.85328 7.24633C6.26673 7.16991 4.99952 5.85522 4.99952 4.25ZM15.9995 11.6196C16.0001 12.0371 15.8369 12.4294 15.5402 12.7246L14.3777 13.8806C14.2557 14.0019 14.0963 14.0625 13.937 14.0625C13.7765 14.0625 13.616 14.001 13.4938 13.8782C13.2504 13.6334 13.2515 13.2378 13.4962 12.9944L14.2754 12.2195H10.7335C10.0358 12.2195 9.46827 12.7871 9.46827 13.4847C9.46827 14.1824 10.0289 14.75 10.7183 14.75C11.0634 14.75 11.3433 15.0298 11.3433 15.375C11.3433 15.7202 11.0634 16 10.7183 16C10.046 16 9.41614 15.7375 8.94483 15.2608C8.4762 14.787 8.21827 14.1562 8.21827 13.4847C8.21827 12.0978 9.34656 10.9695 10.7335 10.9695H14.218L13.4974 10.2569C13.2521 10.0141 13.2498 9.6184 13.4926 9.37304C13.7352 9.12768 14.131 9.12536 14.3765 9.36815L15.5371 10.5159C15.8347 10.8102 15.9989 11.2021 15.9995 11.6196Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/forward_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.81324e-07 8.49429L11.5311 8.49429L7.67581 12.3559L9.33213 14L16 7.33333L9.33213 0.666667L7.68783 2.31076L11.5311 6.16757L6.84733e-07 6.16757L4.81324e-07 8.49429Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/hamburger_menu.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.66683C0 0.930456 0.596955 0.333496 1.33333 0.333496H14.6667C15.403 0.333496 16 0.930456 16 1.66683C16 2.4032 15.403 3.00016 14.6667 3.00016H1.33333C0.596953 3.00016 0 2.4032 0 1.66683ZM0 7.00016C0 6.26379 0.596955 5.66683 1.33333 5.66683H9.33333C10.0697 5.66683 10.6667 6.26379 10.6667 7.00016C10.6667 7.73654 10.0697 8.3335 9.33333 8.3335H1.33333C0.596953 8.3335 0 7.73654 0 7.00016ZM1.33333 11.0002C0.596955 11.0002 0 11.5971 0 12.3335C0 13.0699 0.596953 13.6668 1.33333 13.6668H14.6667C15.403 13.6668 16 13.0699 16 12.3335C16 11.5971 15.403 11.0002 14.6667 11.0002H1.33333Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/nlp_help_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 10.8281C16 8.49597 14.4286 6.45837 12.2126 5.84436C12.0734 2.59814 9.38928 0 6.10938 0C2.7406 0 0 2.7406 0 6.10938C0 7.20728 0.292236 8.27625 0.847168 9.21472L0.0224609 12.1962L3.00403 11.3716C3.8667 11.8817 4.83984 12.1691 5.84424 12.2124C6.45813 14.4285 8.49585 16 10.8281 16C11.759 16 12.6643 15.7521 13.4597 15.281L15.9774 15.9774L15.281 13.4597C15.7521 12.6643 16 11.759 16 10.8281ZM3.15198 10.3579L1.36707 10.8517L1.86084 9.06677L1.74829 8.89075C1.2179 8.06091 0.9375 7.09912 0.9375 6.10938C0.9375 3.25757 3.25757 0.9375 6.10938 0.9375C8.96118 0.9375 11.2812 3.25757 11.2812 6.10938C11.2812 8.96118 8.96118 11.2812 6.10938 11.2812C5.11963 11.2812 4.15796 11.0009 3.328 10.4705L3.15198 10.3579ZM14.6329 14.6329L13.3085 14.2665L13.1316 14.3816C12.4459 14.827 11.6493 15.0625 10.8281 15.0625C8.99512 15.0625 7.3844 13.8773 6.81372 12.1779C9.62061 11.8542 11.8542 9.62061 12.178 6.8136C13.8773 7.3844 15.0625 8.99512 15.0625 10.8281C15.0625 11.6493 14.827 12.4459 14.3816 13.1316L14.2665 13.3085L14.6329 14.6329ZM6.57812 8.46875V9.40625H5.64062V8.46875H6.57812ZM6.7417 5.37952C6.93848 5.19946 7.04687 4.95374 7.04687 4.6875C7.04687 4.17053 6.62634 3.75 6.10937 3.75C5.59241 3.75 5.17187 4.17053 5.17187 4.6875H4.23437C4.23437 3.65356 5.07544 2.8125 6.10937 2.8125C7.14331 2.8125 7.98437 3.65356 7.98437 4.6875C7.98437 5.21228 7.76208 5.71655 7.37463 6.07117L6.57812 6.80017V7.53125H5.64062V6.38733L6.7417 5.37952Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/notification_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9691 10.1187V7.07871C12.9691 4.82065 11.5284 2.85163 9.54476 2.11615C9.56791 2.00001 9.58076 1.88132 9.58076 1.76259C9.5808 0.789693 8.79352 0 7.82359 0C6.85365 0 6.06637 0.789693 6.06637 1.76259C6.06637 1.87873 6.07921 1.99483 6.09979 2.10581C5.41803 2.34839 4.78769 2.7329 4.24999 3.25419C3.23632 4.23484 2.67803 5.55354 2.67803 6.96774V10.1187C2.67803 10.2297 2.58798 10.3226 2.47477 10.3226C1.52542 10.3226 0.714972 11.04 0.627496 11.9536C0.578602 12.462 0.745864 12.9678 1.08804 13.3445C1.42763 13.7187 1.91391 13.9355 2.42072 13.9355H5.52351C5.65214 15.0942 6.63496 16 7.82359 16C9.01221 16 9.99503 15.0942 10.1237 13.9355H13.2265C13.7333 13.9355 14.2195 13.7187 14.5591 13.3445C14.8987 12.9678 15.066 12.462 15.0197 11.9536C14.9322 11.04 14.1192 10.3226 13.1724 10.3226C13.0592 10.3226 12.9691 10.2322 12.9691 10.1187ZM7.82359 1.03224C8.22492 1.03224 8.55167 1.35998 8.55167 1.76255C8.55167 1.79607 8.54651 1.82706 8.54136 1.86059C8.3664 1.83477 8.18887 1.81672 8.01134 1.81155C7.70517 1.8012 7.40416 1.82189 7.10573 1.86318C7.10057 1.82965 7.09542 1.79866 7.09542 1.76513C7.0955 1.35998 7.42225 1.03224 7.82359 1.03224ZM7.82359 14.9677C7.20356 14.9677 6.68386 14.5238 6.56291 13.9355H9.08422C8.96336 14.5239 8.44365 14.9677 7.82359 14.9677ZM13.9957 12.0516C14.0163 12.2736 13.9468 12.4877 13.8002 12.6503C13.6484 12.8129 13.4477 12.9032 13.2265 12.9032H2.42076C2.19949 12.9032 1.99885 12.8129 1.84959 12.6503C1.70037 12.4877 1.6309 12.2735 1.65148 12.0516C1.68748 11.6619 2.05028 11.3548 2.47477 11.3548C3.154 11.3548 3.70713 10.8 3.70713 10.1187V6.96774C3.70713 5.83741 4.15478 4.78195 4.96522 3.99742C5.73962 3.24647 6.74818 2.8387 7.82359 2.8387C7.87506 2.8387 7.92391 2.8387 7.97538 2.84128C10.1597 2.91869 11.94 4.82065 11.94 7.07871V10.1187C11.94 10.8 12.4932 11.3548 13.1724 11.3548C13.5969 11.3548 13.9571 11.6619 13.9957 12.0516Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/plus_user_icon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 1C7 0.447715 6.55228 0 6 0C5.44772 0 5 0.447715 5 1V2.49994C5 3.88062 3.88074 4.99988 2.50006 4.99988H1C0.447715 4.99988 0 5.44759 0 5.99988C0 6.55216 0.447715 6.99988 1 6.99988H2.5C3.88071 6.99988 5 8.11917 5 9.49988V11C5 11.5523 5.44772 12 6 12C6.55228 12 7 11.5523 7 11V9.49988C7 8.11917 8.11929 6.99988 9.5 6.99988H11C11.5523 6.99988 12 6.55216 12 5.99988C12 5.44759 11.5523 4.99988 11 4.99988H9.49994C8.11926 4.99988 7 3.88062 7 2.49994V1Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/reload.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6483 2.35282C12.4042 1.10288 10.7824 0.299891 9.03527 0.0688652C7.28812 -0.16216 5.51372 0.191745 3.98832 1.07548C2.46292 1.95921 1.27213 3.32318 0.601357 4.95502C-0.0694201 6.58686 -0.182542 8.395 0.279602 10.0979C0.741747 11.8008 1.75322 13.3029 3.15655 14.3704C4.55988 15.4378 6.2763 16.0107 8.03858 15.9998C9.80085 15.989 11.5101 15.3949 12.9002 14.3102C14.2902 13.2255 15.2831 11.7111 15.7243 10.0026H13.6483C13.2813 11.0382 12.6372 11.953 11.7862 12.6469C10.9352 13.3408 9.91013 13.7871 8.82296 13.9372C7.73579 14.0872 6.62836 13.9351 5.62165 13.4976C4.61494 13.0601 3.74769 12.3539 3.11465 11.4562C2.48161 10.5586 2.10714 9.50398 2.03214 8.40764C1.95715 7.3113 2.18451 6.21541 2.6894 5.2397C3.19429 4.264 3.95728 3.44601 4.89501 2.87511C5.83273 2.30422 6.90912 2.00238 8.00656 2.00257C8.79185 2.00381 9.569 2.16189 10.2925 2.46754C11.0161 2.77319 11.6715 3.22027 12.2203 3.78264L9.00446 7.00695H16V0.00205947L13.6483 2.35282Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/toast_close.svg

@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="13.426" height="13.423" viewBox="0 0 13.426 13.423">
-  <path id="Icon_ionic-ios-close" data-name="Icon ionic-ios-close" d="M19.589,18l4.8-4.8A1.124,1.124,0,0,0,22.8,11.616l-4.8,4.8-4.8-4.8A1.124,1.124,0,1,0,11.616,13.2l4.8,4.8-4.8,4.8A1.124,1.124,0,0,0,13.2,24.384l4.8-4.8,4.8,4.8A1.124,1.124,0,1,0,24.384,22.8Z" transform="translate(-11.285 -11.289)" fill="currentColor"/>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6259 2.18022C16.1247 1.68147 16.1247 0.872824 15.6259 0.374067C15.1272 -0.124689 14.3185 -0.124689 13.8198 0.374067L8 6.19384L2.18022 0.374067C1.68147 -0.124689 0.872824 -0.124689 0.374067 0.374067C-0.124689 0.872824 -0.124689 1.68147 0.374067 2.18022L6.19384 8L0.374067 13.8198C-0.124689 14.3185 -0.124689 15.1272 0.374067 15.6259C0.872824 16.1247 1.68147 16.1247 2.18022 15.6259L8 9.80616L13.8198 15.6259C14.3185 16.1247 15.1272 16.1247 15.6259 15.6259C16.1247 15.1272 16.1247 14.3185 15.6259 13.8198L9.80616 8L15.6259 2.18022Z" fill="currentColor"/>
 </svg>

package/src/assets/icons/update_icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="10" viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.71572 9.02032C7.87816 9.18275 8.04059 9.26397 8.28425 9.26397C8.5279 9.26397 8.77156 9.18275 8.85277 9.02032L15.7563 2.11676C16.0812 1.79189 16.0812 1.30458 15.7563 0.979708C15.4315 0.654835 14.9441 0.654835 14.6193 0.979708L8.28425 7.31473L5.44161 4.47209C5.11673 4.14722 4.62943 4.14722 4.30455 4.47209C3.97968 4.79697 3.97968 5.28428 4.30455 5.60915L7.71572 9.02032ZM3.65482 9.02033C3.81726 9.18277 3.9797 9.26399 4.22335 9.26399C4.46701 9.26399 4.71066 9.18277 4.79188 9.02033C5.11675 8.69546 5.11675 8.20815 4.79188 7.88328L1.38071 4.47211C1.05584 4.14724 0.568528 4.14724 0.243655 4.47211C-0.0812183 4.79698 -0.0812183 5.28429 0.243655 5.60917L3.65482 9.02033ZM7.95939 4.79698C8.12183 4.95942 8.28426 5.04064 8.52792 5.04064C8.77157 5.04064 8.93401 4.95942 9.09645 4.79698L11.6954 2.11678C12.0203 1.79191 12.0203 1.3046 11.6954 0.979724C11.3706 0.65485 10.8832 0.65485 10.5584 0.979724L7.95939 3.65993C7.63452 3.9848 7.63452 4.47211 7.95939 4.79698Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/user_profile.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99962 8.3175C8.79071 8.3175 9.56403 8.08291 10.2218 7.64341C10.8796 7.2039 11.3922 6.57922 11.695 5.84835C11.9977 5.11748 12.0769 4.31325 11.9226 3.53736C11.7682 2.76147 11.3873 2.04877 10.8279 1.48939C10.2685 0.930007 9.55583 0.549061 8.77995 0.394727C8.00406 0.240394 7.19983 0.319607 6.46896 0.622343C5.73809 0.925079 5.11341 1.43774 4.6739 2.09551C4.2344 2.75327 3.99981 3.5266 3.99981 4.31769C4.00201 5.37783 4.42412 6.39392 5.17376 7.14355C5.92339 7.89319 6.93948 8.3153 7.99962 8.3175ZM7.99962 10.3178C5.35275 10.3178 0 11.6677 0 14.3176V16.3179H15.9992V14.3176C15.9992 11.6677 10.6495 10.3178 7.99962 10.3178Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/window_maximize.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.58189 0H14.2429C14.7086 0.00113232 15.1548 0.188831 15.4841 0.522043C15.8134 0.855255 15.9989 1.30686 16 1.7781V11.3632C15.9989 11.8345 15.8134 12.2861 15.4841 12.6193C15.1548 12.9525 14.7086 13.1402 14.2429 13.1413H4.58189C4.11623 13.1402 3.66997 12.9525 3.3407 12.6193C3.01143 12.2861 2.82595 11.8345 2.82483 11.3632V1.7781C2.82595 1.30686 3.01143 0.855255 3.3407 0.522043C3.66997 0.188831 4.11623 0.00113232 4.58189 0ZM4.58189 11.3618H14.2429V1.7781H4.58189V11.3618Z" fill="currentColor"/>
+<path d="M1.75706 2.85889H11.4181C11.8837 2.86002 12.33 3.04772 12.6593 3.38093C12.9885 3.71414 13.174 4.16575 13.1751 4.63698V14.2221C13.174 14.6933 12.9885 15.145 12.6593 15.4782C12.33 15.8114 11.8837 15.9991 11.4181 16.0002H1.75706C1.2914 15.9991 0.845138 15.8114 0.515867 15.4782C0.186597 15.145 0.00111893 14.6933 0 14.2221V4.63698C0.00111893 4.16575 0.186597 3.71414 0.515867 3.38093C0.845138 3.04772 1.2914 2.86002 1.75706 2.85889ZM1.75706 14.2207H11.4181V4.63698H1.75706V14.2207Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/window_minimize.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="4" viewBox="0 0 16 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5008 0H1.5008C1.10276 0 0.721029 0.158121 0.439574 0.439575C0.15812 0.72103 0 1.10276 0 1.5008L0 2.5008C0 2.89884 0.15812 3.28057 0.439574 3.56203C0.721029 3.84348 1.10276 4.0016 1.5008 4.0016H14.5008C14.8986 4.00117 15.2799 3.84287 15.561 3.56146C15.8421 3.28005 16 2.89856 16 2.5008V1.5008C16 1.10304 15.8421 0.721548 15.561 0.44014C15.2799 0.158731 14.8986 0.000424051 14.5008 0Z" fill="currentColor"/>
+</svg>

package/src/components/AppHeader/AppHeader.scss

@@ -21,11 +21,28 @@
       align-items: center;
       .ff-app-header-nav-bar-item {
         margin-left: 8px;
+        padding: 7px;
         color: var(--ff-header-text-color);
         cursor: pointer;
         display: flex;
+        position: relative;
+        &:not(.ff-app-header-nav-bar-item--selected):hover::after {
+          animation: oscillate-border-width 0.5s ease-in-out forwards;
+        }      
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 25%;
+          width: 0%;
+          height: 2px;
+          background: var(--ff-app-header-menu-border-bottom-color);
+          border-radius: 4px;
+          transition: width 0.15s  ease-in-out;
+        }
+      
         &--selected {
-          padding: 3px;
+          padding: 3px 6px 3px 3px;
           background-color: var(--primary-icon-color);
           border-radius: 20px;
           .ff-app-header-nav-bar-item-label {
@@ -39,9 +56,35 @@
           .ff-app-header-nav-bar-submenu-item {
             color: var(--ff-header-submenu-text-color);
             align-content: center;
+            position: relative;
+            &:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {
+              animation: oscillate-border-width 0.5s ease-in-out forwards;
+            }
+            &::after {
+              content: '';
+              position: absolute;
+              bottom: 0;
+              left: 25%;
+              width: 0%;
+              height: 2px;
+              background:var(--ff-app-header-submenu-border-bottom-color);
+              border-radius: 4px;
+              transition: width 0.15s ease-in-out;
+            }
             padding-left: 8px;
             &--selected{
               color: var(--ff-header-submenu-highlight-text-color);
+              &::after {
+                content: '';
+                position: absolute;
+                bottom: 0;
+                left: 10%;
+                width: 90%;
+                height: 2px;
+                border-radius: 4px;
+                box-shadow: 0px 1px 0.2px 0px #00000029;
+                background: var(--ff-app-header-submenu-border-bottom-color);
+              }
             }
           }
           .ff-app-header-quickmenu-container {
@@ -65,3 +108,17 @@
     padding: 8px;
   }
 }
+@keyframes oscillate-border-width {
+  0% {
+    width: 50%;
+    left: 25%;
+  }
+  50% {
+    width: 70%;
+    left: 15%;
+  }
+  100% {
+    width: 50%;
+    left: 25%;
+  }
+}

package/src/components/AttachmentButton/AttachmentButton.scss

@@ -0,0 +1,9 @@
+.ff-input-field {
+  display: none;
+}
+.ff-attachment-files {
+  padding: 9px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}

package/src/components/AttachmentButton/AttachmentButton.stories.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import AttachmentButton from './AttachmentButton';
+
+const meta: Meta<typeof AttachmentButton> = {
+  title: 'Components/AttachmentButton',
+  component: AttachmentButton,
+  argTypes: {
+    onFilesChange: { action: 'files changed' },
+    disabled: { control: 'boolean' },
+    maxFileSizeMB: { control: 'number' },
+    maxFiles: { control: 'number' },
+  },
+};
+
+type Story = StoryObj<typeof AttachmentButton>;
+
+const defaultArgs = {
+  disabled: false,
+  maxFileSizeMB: 5,
+  maxFiles: 10,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Upload Files',
+  },
+  render: (args) => {
+    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+
+    const handleFilesChange = (files: File[]) => {
+      setSelectedFiles(files);
+      args.onFilesChange(files);
+    };
+
+    return (
+      <AttachmentButton
+        {...args}
+        selectedFiles={selectedFiles}
+        onFilesChange={handleFilesChange}
+      />
+    );
+  },
+};
+
+export const SmallFileLimit: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Upload Files (2 MB Max)',
+    maxFileSizeMB: 2,
+    maxFiles: 5,
+  },
+  render: Default.render,
+};
+
+export const LargeFileLimit: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Upload Large Files (20 MB Max)',
+    maxFileSizeMB: 20,
+    maxFiles: 5,
+  },
+  render: Default.render,
+};
+
+export const DisabledUploader: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Disabled Uploader',
+    disabled: true,
+  },
+  render: Default.render,
+};
+
+export default meta;

package/src/components/AttachmentButton/AttachmentButton.tsx

@@ -0,0 +1,113 @@
+import React, { useRef, useState } from 'react';
+import Typography from '../Typography';
+import Button from '../Button';
+import Toaster from '../Toast';
+import Icon from '../Icon';
+import { AttachmentUploaderProps } from './types';
+import './AttachmentButton.scss';
+
+const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
+  label,
+  selectedFiles,
+  onFilesChange,
+  disabled = false,
+  maxFileSizeMB = 5, // Default to 5 MB if not provided
+  maxFiles = 10, // Default to 10 files if not provided
+}) => {
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [fileError, setFileError] = useState<string>('');
+  const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
+
+  const handleAttachmentClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = () => {
+    setFileError('');
+    if (fileInputRef.current?.files) {
+      const files = Array.from(fileInputRef.current.files);
+      const duplicateFiles = files.filter((file) =>
+        selectedFiles.some((selectedFile) => selectedFile.name === file.name)
+      );
+      if (duplicateFiles.length > 0) {
+        setFileError('This file is already selected.');
+        fileInputRef.current.value = '';
+        return;
+      }
+      if (selectedFiles.length + files.length > maxFiles) {
+        setFileError(`You can only select up to ${maxFiles} files.`);
+        fileInputRef.current.value = '';
+        return;
+      }
+      const oversizedFiles = files.filter(
+        (file) => file.size > maxFileSizeBytes
+      );
+      if (oversizedFiles.length > 0) {
+        setFileError(`Each file must be less than ${maxFileSizeMB} MB.`);
+        fileInputRef.current.value = '';
+        return;
+      }
+      onFilesChange([...selectedFiles, ...files]);
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleDeleteFile = (index: number) => {
+    const updatedFiles = [...selectedFiles];
+    updatedFiles.splice(index, 1);
+    onFilesChange(updatedFiles);
+  };
+
+  return (
+    <div>
+      <Typography fontWeight="semi-bold">{label}</Typography>
+      {selectedFiles.length === 0 && (
+        <Button
+          variant="primary"
+          label="Select Files"
+          size="medium"
+          onClick={handleAttachmentClick}
+          disabled={disabled}
+        />
+      )}
+      <input
+        type="file"
+        ref={fileInputRef}
+        className="ff-input-field"
+        onChange={handleFileChange}
+        multiple
+        accept="*"
+      />
+      {fileError && (
+        <Toaster
+          isOpen={!!fileError}
+          variant="info"
+          toastTitle="Error"
+          toastMessage={fileError}
+          zIndex={10000000}
+        />
+      )}
+      {selectedFiles.map((file, index) => (
+        <div key={file.name} className="ff-attachment-files">
+          <Typography color="var(--brand-color)">{file.name}</Typography>
+          <Icon
+            name="delete"
+            color="var(--ff-delete-button-attachment)"
+            onClick={() => handleDeleteFile(index)}
+          />
+          {index === selectedFiles.length - 1 &&
+            selectedFiles.length < maxFiles && (
+              <Icon
+                name="add_file"
+                height={24}
+                width={24}
+                onClick={handleAttachmentClick}
+              />
+            )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default AttachmentButton;

package/src/components/AttachmentButton/index.ts

@@ -0,0 +1 @@
+export { default } from './AttachmentButton';

package/src/components/AttachmentButton/types.ts

@@ -0,0 +1,8 @@
+export interface AttachmentUploaderProps {
+  label: string; 
+  selectedFiles: File[]; 
+  onFilesChange: (files: File[]) => void;
+  disabled?: boolean;
+  maxFileSizeMB?: number;
+  maxFiles?: number;
+}