pixel-react 1.0.4 → 1.0.6

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/addbutton/addbutton.stories.tsx","../src/components/addbutton/addbutton.tsx","../src/components/addbutton/index.ts","../src/components/addbutton/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/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/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/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/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/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/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/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/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/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/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/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/find/findandinsert.stories.tsx","../src/utils/find/findandinsert.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/button/button.stories.tsx","../src/components/button/button.tsx","../src/components/button/index.ts","../src/components/button/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/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/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/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/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/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/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/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/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/find/findandinsert.stories.tsx","../src/utils/find/findandinsert.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.2"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",
@@ -56,6 +56,8 @@
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.0",
     "classnames": "^2.5.1",
+    "date-fns-tz": "^3.2.0",
+    "react-day-picker": "^9.2.1",
     "react-hook-form": "^7.53.0",
     "react-window": "^1.8.10",
     "scss": "^0.2.4",

package/src/assets/Themes/BaseTheme.scss

@@ -151,6 +151,13 @@ $base-theme: (
 
   primary-icon-color: #ffffff,
   secondary-icon-color: #71347b,
+  disabled-primary-color: #F9F9F9,
+  license_expireSoon_color:#BA7422,
+  license_active_color:#268735,
+  license_expired_color:#E34242,
+  license_header_text_color:#592f7c,
+  license_active_status_color:#518e18,
+  license_expired_status_color:#ab3425,
 );
 :root {
   @each $key, $value in $base-theme {

package/src/assets/Themes/DarkTheme.scss

@@ -141,7 +141,6 @@ $dark-theme: (
   status-button-text-aborted: #c50303,
   status-button-text-notExecuted: #c50303,
 
-
   // TODO:: Need to change the color code values of below 10 color (N/A in DS)
   ff-select-option-border-color: #ded1e5,
   ff-select-option-wrapper-box-shadow: #592f7c33,
@@ -161,6 +160,13 @@ $dark-theme: (
 
   primary-icon-color: #ffffff,
   secondary-icon-color: #71347b,
+  disabled-primary-color: #F9F9F9,
+  license_expireSoon_color:#BA7422,
+  license_active_color:#268735,
+  license_expired_color:#E34242,
+  license_header_text_color:#592f7c,
+  license_active_status_color:#518e18,
+  license_expired_status_color:#ab3425,
 );
 :root {
   @each $key, $value in $dark-theme {

package/src/assets/icons/add_variable_icon.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 16V16C2.567 16 1 14.433 1 12.5V4.5C1 2.567 2.567 1 4.5 1V1M11.5 1V1C13.433 1 15 2.567 15 4.5V8.5V12.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M15 15V17M15 17V19M15 17H13M15 17H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M8.50631 10.8893L10.4739 6H12L9.35135 12H7.63604L5 6H6.53874L8.50631 10.8893Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/calendar_icon.svg

@@ -0,0 +1,9 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.878 4.05558C13.7895 2.60703 12.5608 1.47217 11.0809 1.47217H10.3604V0.920871C10.3604 0.616552 10.1095 0.369568 9.80034 0.369568C9.4912 0.369568 9.2403 0.616552 9.2403 0.920871V1.47217H4.75997V0.920871C4.75997 0.616552 4.50907 0.369568 4.19993 0.369568C3.89079 0.369568 3.63989 0.616552 3.63989 0.920871V1.47217H2.9194C1.43921 1.47217 0.210478 2.60703 0.122271 4.05558C-0.0437812 6.78012 -0.0407009 9.5438 0.131512 12.2697C0.218878 13.654 1.3454 14.763 2.75166 14.849C4.16101 14.9353 5.58043 14.9783 6.99986 14.9783C8.419 14.9783 9.83871 14.9353 11.248 14.849C12.6543 14.763 13.7808 13.654 13.8682 12.2697C14.0407 9.54518 14.0438 6.78177 13.878 4.05558ZM12.7506 12.2014C12.698 13.0319 12.0223 13.697 11.1789 13.7486C8.40612 13.9181 5.59415 13.9181 2.82139 13.7486C1.97769 13.6968 1.302 13.0316 1.24963 12.2014C1.11718 10.1056 1.09002 7.98774 1.16087 5.8826H12.8397C12.9103 7.98857 12.8831 10.1064 12.7506 12.2014ZM4.19993 3.67738C4.50907 3.67738 4.75997 3.4304 4.75997 3.12608V2.57478H9.2403V3.12608C9.2403 3.4304 9.4912 3.67738 9.80034 3.67738C10.1095 3.67738 10.3604 3.4304 10.3604 3.12608V2.57478H11.0809C11.9694 2.57478 12.707 3.25426 12.7599 4.12146C12.773 4.34033 12.7786 4.56057 12.7896 4.77999H1.21071C1.22191 4.56057 1.22723 4.34033 1.24039 4.12146C1.29332 3.25426 2.03061 2.57478 2.9194 2.57478H3.63989V3.12608C3.63989 3.4304 3.89079 3.67738 4.19993 3.67738Z" fill="currentColor"/>
+<path d="M4.19944 9.19047C4.66339 9.19047 5.0395 8.82023 5.0395 8.36351C5.0395 7.9068 4.66339 7.53656 4.19944 7.53656C3.73548 7.53656 3.35938 7.9068 3.35938 8.36351C3.35938 8.82023 3.73548 9.19047 4.19944 9.19047Z" fill="currentColor"/>
+<path d="M7.00022 9.19047C7.46417 9.19047 7.84028 8.82023 7.84028 8.36351C7.84028 7.9068 7.46417 7.53656 7.00022 7.53656C6.53626 7.53656 6.16016 7.9068 6.16016 8.36351C6.16016 8.82023 6.53626 9.19047 7.00022 9.19047Z" fill="currentColor"/>
+<path d="M4.19944 11.9468C4.66339 11.9468 5.0395 11.5766 5.0395 11.1199C5.0395 10.6631 4.66339 10.2929 4.19944 10.2929C3.73548 10.2929 3.35938 10.6631 3.35938 11.1199C3.35938 11.5766 3.73548 11.9468 4.19944 11.9468Z" fill="currentColor"/>
+<path d="M9.79905 9.19047C10.263 9.19047 10.6391 8.82023 10.6391 8.36351C10.6391 7.9068 10.263 7.53656 9.79905 7.53656C9.33509 7.53656 8.95898 7.9068 8.95898 8.36351C8.95898 8.82023 9.33509 9.19047 9.79905 9.19047Z" fill="currentColor"/>
+<path d="M9.79905 11.9468C10.263 11.9468 10.6391 11.5766 10.6391 11.1199C10.6391 10.6631 10.263 10.2929 9.79905 10.2929C9.33509 10.2929 8.95898 10.6631 8.95898 11.1199C8.95898 11.5766 9.33509 11.9468 9.79905 11.9468Z" fill="currentColor"/>
+<path d="M7.00022 11.9468C7.46417 11.9468 7.84028 11.5766 7.84028 11.1199C7.84028 10.6631 7.46417 10.2929 7.00022 10.2929C6.53626 10.2929 6.16016 10.6631 6.16016 11.1199C6.16016 11.5766 6.53626 11.9468 7.00022 11.9468Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/clock_icon.svg

@@ -0,0 +1,11 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_842_32771)">
+<path d="M6.9998 0.583282C5.7307 0.583282 4.49011 0.959613 3.43489 1.66469C2.37968 2.36976 1.55723 3.3719 1.07157 4.5444C0.58591 5.71689 0.458839 7.00707 0.706427 8.25178C0.954016 9.49649 1.56514 10.6398 2.46253 11.5372C3.35992 12.4346 4.50326 13.0457 5.74797 13.2933C6.99268 13.5409 8.28286 13.4138 9.45535 12.9282C10.6278 12.4425 11.63 11.6201 12.3351 10.5649C13.0401 9.50964 13.4165 8.26905 13.4165 6.99995C13.4145 5.29876 12.7378 3.66782 11.5349 2.4649C10.3319 1.26197 8.70099 0.585289 6.9998 0.583282ZM6.9998 12.25C5.96145 12.25 4.94641 11.942 4.08306 11.3652C3.2197 10.7883 2.54679 9.96835 2.14943 9.00904C1.75207 8.04973 1.6481 6.99413 1.85068 5.97573C2.05325 4.95732 2.55326 4.02186 3.28749 3.28764C4.02171 2.55341 4.95717 2.0534 5.97557 1.85083C6.99398 1.64825 8.04957 1.75222 9.00889 2.14958C9.9682 2.54694 10.7881 3.21985 11.365 4.08321C11.9419 4.94656 12.2498 5.9616 12.2498 6.99995C12.2481 8.39181 11.6944 9.72619 10.7102 10.7104C9.72604 11.6946 8.39166 12.2483 6.9998 12.25Z" fill="#71347B"/>
+<path d="M7.58354 6.75855V3.50005C7.58354 3.34534 7.52208 3.19697 7.41268 3.08757C7.30329 2.97818 7.15491 2.91672 7.0002 2.91672C6.84549 2.91672 6.69712 2.97818 6.58772 3.08757C6.47833 3.19697 6.41687 3.34534 6.41687 3.50005V7.00005C6.4169 7.15475 6.47838 7.3031 6.58779 7.41247L8.33779 9.16247C8.4478 9.26873 8.59516 9.32752 8.7481 9.32619C8.90105 9.32486 9.04736 9.26352 9.15551 9.15536C9.26367 9.04721 9.32502 8.9009 9.32635 8.74795C9.32768 8.595 9.26888 8.44765 9.16262 8.33763L7.58354 6.75855Z" fill="#71347B"/>
+</g>
+<defs>
+<clipPath id="clip0_842_32771">
+<rect width="14" height="14" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/icons/info_icon.svg

@@ -0,0 +1,4 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 7C13.5 10.5898 10.5898 13.5 7 13.5C3.41016 13.5 0.5 10.5898 0.5 7C0.5 3.41015 3.41015 0.5 7 0.5C10.5898 0.5 13.5 3.41016 13.5 7Z" stroke="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00141 4.44022C7.47304 4.44022 7.85537 4.05789 7.85537 3.58626C7.85537 3.11463 7.47304 2.7323 7.00141 2.7323C6.52978 2.7323 6.14745 3.11463 6.14745 3.58626C6.14745 4.05789 6.52978 4.44022 7.00141 4.44022ZM5.8623 5.36406H5.3623V6.36406H5.8623H6.50092V9.91851H5.8623H5.3623V10.9185H5.8623H7.00092H8.13953H8.63953V9.91851H8.13953H7.50092V5.86406C7.50092 5.58792 7.27706 5.36406 7.00092 5.36406H5.8623Z" fill="currentColor"/>
+</svg>

package/src/assets/icons/left_arrow_icon.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 5.49982H13.5M1.5 5.49982C1.50001 6.48801 5.99985 9.99999 5.99985 9.99999M1.5 5.49982C1.49999 4.51162 5.99987 1 5.99987 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/icons/right_arrow_icon.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="11" viewBox="0 0 15 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.4999 5.49976L1.5 5.49976" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.00003 9.99995C9.00003 9.99995 13.5 6.48814 13.5 5.49995C13.5 4.51176 9 1 9 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/styles/_mixins.scss

@@ -3,6 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  align-content: center;
 }
 
 // Mixin for transition effects

package/src/assets/utils/functionUtils.ts

@@ -3,3 +3,40 @@ export const isFunction = (functionToCheck: any) => {
     functionToCheck && {}.toString.call(functionToCheck) === '[object Function]'
   );
 };
+
+
+export const convertTo24Hour = (time12h: string): string => {
+  const [time, modifier] = time12h.split(' ');
+  if (!time || !modifier) return '00:00';
+
+  let [hours, minutes] = time.split(':');
+  if (!hours || !minutes) return '00:00';
+
+  if (hours === '12') {
+    hours = '00';
+  }
+
+  if (modifier.toUpperCase() === 'PM') {
+    hours = (parseInt(hours, 10) + 12).toString();
+  }
+
+  return `${hours.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+};
+
+export const convertTo12Hour = (time24: string): string => {
+  const [hoursStr, minutesStr] = time24.split(':');
+  const hours = parseInt(hoursStr ?? '0', 10);
+  const minutes = parseInt(minutesStr ?? '0', 10);
+
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  const hours12 = hours % 12 || 12;
+
+  return `${hours12.toString().padStart(2, '0')}:${minutes
+    .toString()
+    .padStart(2, '0')} ${ampm}`;
+};
+
+export const isValid12HourTime = (timeString: string): boolean => {
+  const regex = /^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i;
+  return regex.test(timeString);
+};

package/src/components/DatePicker/DatePicker.scss

@@ -0,0 +1,387 @@
+@use '../../assets/styles/fonts';
+@import 'react-day-picker/style.css';
+
+/* Custom date picker styling */
+.ff-date-picker {
+  // day-picker variable override
+  .rdp-root {
+    --rdp-accent-color: var(--brand-color);
+    --rdp-day-height: 24px;
+    --rdp-day-width: 36px;
+    @include fonts.fontPoppins(12px);
+    --rdp-font-family: 'Poppins', sans-serif;
+  }
+
+  .ff-cursor-pointer{
+    cursor: pointer;
+  }
+
+  position: relative;
+
+  .ff-datepicker-input-container {
+    display: flex;
+    gap: 10px;
+
+    .ff-input-with-icon {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      .ff-date-input,
+      .ff-time-input {
+        padding: 4px 8px;
+        padding-left: 2rem;
+        height: 32px;
+        border-radius: 5px;
+        border: 1px solid var(--border-color);
+        @extend .fontXs;
+        color: var(--status-skipped-text-color); 
+        line-height: 15px;
+        box-sizing: border-box;
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      .ff-calendar-icon,
+      .ff-clock-icon {
+        position: absolute;
+        transform: translate(50%, 50%);
+        display: flex;
+        align-items: center;
+        pointer-events: none;
+      }
+    }
+
+    .ff-date-input-field {
+      flex: 1;
+      .ff-date-input {
+        width: 100%;
+      }
+
+      .ff-date-input-message {
+        @extend .font-size-8;
+        padding: 0px 4px;
+        margin-left: 8px;
+        line-height: 12px;
+        &--danger {
+          color: var(--input-error-text-color);
+        }
+      }
+    }
+
+    .ff-time-input-field {
+      flex: 0 0 120px;
+      .ff-time-input {
+        width: 100%;
+      }
+    }
+  }
+  .ff-date-picker-container {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    border-radius: 8px;
+    padding: 4px;
+    box-sizing: border-box;
+    background-color: var(--tab-bg-color);
+    box-shadow: 0 0 12px 0 #00000033;
+    gap: 8px;
+    z-index: 10;
+
+    .ff-calendar-container {
+      display: flex;
+      align-items: flex-start;
+      gap: 4px;
+      height: 240px;
+    }
+
+    .ff-date-picker-controls {
+      padding: 4px;
+      display: flex;
+      justify-content: end;
+      gap: 8px;
+      border-top: 1px solid var(--border-color);
+
+      .ff-date-picker-button {
+        font-weight: 600;
+        line-height: 15px;
+      }
+    }
+  }
+
+  .ff-calendar {
+    .ff-calendar-nav-button {
+      margin: 0 5px;
+      border: 1px solid var(--border-color);
+      background-color: var(--toggle-button-bg-color);
+      box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);
+      padding: 4px;
+      border-radius: 30%;
+      cursor: pointer;
+
+      &:disabled {
+        cursor: auto;
+        opacity: 0.5;
+      }
+    }
+
+    .ff-calendar-haeder {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      color: var(--text-color);
+    }
+
+    .ff-custom-year_grid,
+    .ff-custom-month_grid {
+      width: calc((var(--rdp-day-width) + 4px) * 7);
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+      padding: 5px;
+      max-width: 100%;
+
+      .ff-custom-year,
+      .ff-custom-month {
+        padding: 10px 0;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 8px;
+        background-color: #f9f9f9; // color need to be change
+
+        &--selected {
+          background-color: var(--brand-color);
+          color: var(--primary-button-text-color);
+        }
+      }
+    }
+
+    .rdp-weekdays {
+      th {
+        color: #6f7c8e; // color need to be change
+        font-weight: 400;
+      }
+    }
+
+    .rdp-day {
+      padding: 2px;
+      font-weight: 500;
+    }
+
+    .rdp-day_button {
+      border-radius: 4px;
+      padding: 3px 9px;
+
+      &:hover {
+        background-color: var(--hover-color);
+      }
+    }
+    .rdp-selected {
+      font: inherit;
+      .rdp-day_button {
+        background: var(--rdp-accent-color);
+        color: var(--drawer-footer-bg);
+        border: none;
+      }
+    }
+    .rdp-today:not(.rdp-outside) {
+      .rdp-day_button {
+        border: 2px solid var(--rdp-accent-color);
+      }
+    }
+  }
+
+  // Timepicker css ************************************************************************
+
+  .ff-time-picker-container {
+    position: relative;
+    width: 150px;
+    height: 100%;
+    overflow-y: hidden;
+    border-left: 1px solid #ccc;
+    padding: 10px 5px;
+    box-sizing: border-box;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .ff-time-picker-fields {
+      display: flex;
+      height: 14%;
+      width: 100%;
+      margin-bottom: 5px;
+      box-sizing: border-box;
+
+      .ff-time-input-container {
+        display: flex;
+        border: 1px solid var(--border-color);
+        border-right: 0;
+        border-radius: 4px 0 0 4px;
+        width: 55%;
+        position: relative;
+
+        .ff-time-input {
+          border: none;
+          padding: 5px;
+          width: 100%;
+          text-align: center;
+          border-radius: 4px 0 0 4px;
+          @extend .fontSm;
+
+          &::placeholder {
+            opacity: 0;
+            line-height: 18px;
+          }
+        }
+
+        .ff-time-input-label {
+          position: absolute;
+          left: 10px;
+          top: 50%;
+          transform: translateY(-50%);
+          transition: 0.2s ease all;
+          color: var(--input-default-label-color);
+          pointer-events: none;
+        }
+
+        &--float .ff-time-input-label {
+          top: 0;
+          left: 5px;
+          color: var(--brand-color);
+          background-color: var(--input-label-bg-color);
+          line-height: 12px;
+          padding: 0 2px;
+          font-size: 8px !important;
+
+          &--danger {
+            color: var(--input-error-text-color);
+          }
+        }
+
+        &:hover {
+          border-color: var(--input-hover-border-color);
+        }
+
+        &:focus-within {
+          border-color: var(--brand-color);
+
+          .ff-time-input-label {
+            top: 0;
+            left: 5px;
+            color: var(--brand-color);
+            background-color: var(--input-label-bg-color);
+            line-height: 12px;
+            padding: 0 2px;
+            font-size: 8px !important;
+
+            &--danger {
+              color: var(--input-error-text-color);
+            }
+          }
+
+          .ff-time-input {
+            &::placeholder {
+              opacity: 1;
+              margin-bottom: 1px;
+            }
+          }
+        }
+
+        &--danger {
+          border-color: var(--input-error-text-color) !important;
+        }
+
+        .ff-time-input:focus {
+          outline: none;
+        }
+      }
+      .ff-time-period-container {
+        position: relative;
+        width: 45%;
+        display: flex;
+        border: 1px solid var(--border-color);
+        border-radius: 0 4px 4px 0;
+
+        .ff-time-period-select {
+          display: flex;
+          align-items: center;
+          padding: 0 5px;
+          width: 100%;
+          border-radius: 4px;
+          background-color: white;
+          cursor: pointer;
+          border: none;
+        }
+        &--active {
+          border-color: var(--brand-color) !important;
+        }
+        &:hover {
+          border-color: var(--input-hover-border-color);
+        }
+
+        .ff-time-period-icon {
+          margin-left: auto;
+          pointer-events: none;
+        }
+
+        .ff-time-period-options {
+          position: fixed;
+          z-index: 100;
+          min-width: 60px;
+          margin: 4px 0 0;
+          padding: 0;
+          list-style: none;
+          border: 1px solid var(--ff-select-background-color);
+          border-radius: 4px;
+          background-color: var(--primary-button-text-color);
+          box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        .ff-option-item {
+          padding: 8px;
+          color: var(--text-color);
+          border-radius: 4px;
+          cursor: pointer;
+          transition: background-color 0.2s ease;
+
+          &:hover {
+            background-color: var(--ff-select-option-hover-color);
+          }
+        }
+      }
+    }
+    .ff-time-picker-options {
+      height: 86%;
+      overflow-y: auto;
+      padding-right: 5px;
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        height: 12px;
+
+        &-thumb {
+          background-color: var(--ff-select-scroll-thumb-color);
+          border-radius: 4px;
+        }
+
+        &-track {
+          background-color: var(--hover-color); // color need to be change
+          border-radius: 4px;
+        }
+      }
+
+      .ff-time-option {
+        padding: 10px 12px;
+        cursor: pointer;
+        text-align: center;
+        border-radius: 8px;
+        background-color: rgba(249, 249, 249);   // color need to be change
+        margin: 10px 0;
+      }
+    }
+  }
+}