diff --git a/example/index.tsx b/example/index.tsx
index ac7eccd..6ae63ff 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -1,5 +1,5 @@
 import 'react-app-polyfill/ie11';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import {
   Box,
@@ -12,6 +12,13 @@ import {
   Heading,
   HStack,
   Link,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
   StackDivider,
   Switch,
   Tab,
@@ -22,6 +29,7 @@ import {
   Text,
   ThemeConfig,
   useColorMode,
+  useDisclosure,
   VStack,
 } from '@chakra-ui/react';
 import {
@@ -51,6 +59,8 @@ const App = () => {
   const [firstDayOfWeek, setFirstDayOfWeek] = useState<FirstDayOfWeek>(1);
   const [isSingleChecked, setSingleCheck] = useState(true);
   const [isRangeChecked, setRangeCheck] = useState(true);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const modalRef = useRef(null);
 
   return (
     <VStack
@@ -66,7 +76,7 @@ const App = () => {
         <GitHubButton
           href="https://github.com/aboveyunhai/chakra-dayzed-datepicker"
           data-size="large"
-          data-show-count="true"
+          data-show-count="false"
           aria-label="Star aboveyunhai/chakra-dayzed-datepicker on GitHub"
         >
           Star
@@ -137,60 +147,148 @@ const App = () => {
         <TabPanels height={'20rem'}>
           <TabPanel>
             <Panel>
-              <Section title="Single:">
-                <Flex alignItems={'center'} gap={2}>
-                  <Box marginRight={'1rem'}>closeOnSelect:</Box>
-                  <Switch
-                    isChecked={isSingleChecked}
-                    onChange={(e) => setSingleCheck(e.currentTarget.checked)}
-                  />
-                  <Button
-                    size={'sm'}
-                    onClick={() => {
-                      setDate(undefined);
-                    }}
-                  >
-                    Set Empty (undefined)
-                  </Button>
-                </Flex>
-                <SingleDatepicker
-                  name="date-input"
-                  date={date}
-                  disabledDates={
-                    new Set([
-                      startOfDay(subDays(demoDate, 6)).getTime(),
-                      startOfDay(subDays(demoDate, 4)).getTime(),
-                      startOfDay(subDays(demoDate, 2)).getTime(),
-                    ])
-                  }
-                  minDate={subDays(demoDate, 8)}
-                  maxDate={addDays(demoDate, 8)}
-                  onDateChange={setDate}
-                  closeOnSelect={isSingleChecked}
-                />
-              </Section>
-              <Section title="Range:">
-                <Flex alignItems={'center'} gap={2}>
-                  <Box marginRight={'1rem'}>closeOnSelect:</Box>
-                  <Switch
-                    isChecked={isRangeChecked}
-                    onChange={(e) => setRangeCheck(e.currentTarget.checked)}
-                  />
-                  <Button
-                    size={'sm'}
-                    onClick={() => {
-                      setSelectedDates([]);
-                    }}
-                  >
-                    Set Empty (Empty Array: "[]")
-                  </Button>
-                </Flex>
-                <RangeDatepicker
-                  selectedDates={selectedDates}
-                  onDateChange={setSelectedDates}
-                  closeOnSelect={isRangeChecked}
-                />
-              </Section>
+              <Flex flexDir={'column'} gap={3} pb="5rem">
+                <Section title="Single:">
+                  <Flex alignItems={'center'} gap={2}>
+                    <Box marginRight={'1rem'}>closeOnSelect:</Box>
+                    <Switch
+                      name="closeOnSelect-switch"
+                      isChecked={isSingleChecked}
+                      onChange={(e) => setSingleCheck(e.currentTarget.checked)}
+                    />
+                    <Button
+                      size={'sm'}
+                      onClick={() => {
+                        setDate(undefined);
+                      }}
+                    >
+                      Set Empty (undefined)
+                    </Button>
+                  </Flex>
+                  {/* chakra ui add prefix for the trigger for some reasons? */}
+                  <Flex gap="1rem" alignItems="center">
+                    <label htmlFor={`popover-trigger-default`}>Default:</label>
+                    <SingleDatepicker
+                      id="default"
+                      date={date}
+                      disabledDates={
+                        new Set([
+                          startOfDay(subDays(demoDate, 6)).getTime(),
+                          startOfDay(subDays(demoDate, 4)).getTime(),
+                          startOfDay(subDays(demoDate, 2)).getTime(),
+                        ])
+                      }
+                      propsConfigs={{}}
+                      minDate={subDays(demoDate, 8)}
+                      maxDate={addDays(demoDate, 8)}
+                      onDateChange={setDate}
+                      closeOnSelect={isSingleChecked}
+                    />
+                  </Flex>
+                  <Flex gap="1rem" alignItems="center">
+                    <label htmlFor={`input`}>Input:</label>
+                    <SingleDatepicker
+                      id="input"
+                      triggerVariant="input"
+                      date={date}
+                      disabledDates={
+                        new Set([
+                          startOfDay(subDays(demoDate, 6)).getTime(),
+                          startOfDay(subDays(demoDate, 4)).getTime(),
+                          startOfDay(subDays(demoDate, 2)).getTime(),
+                        ])
+                      }
+                      minDate={subDays(demoDate, 8)}
+                      maxDate={addDays(demoDate, 8)}
+                      onDateChange={setDate}
+                      closeOnSelect={isSingleChecked}
+                    />
+                  </Flex>
+                </Section>
+                <Section title="Range:">
+                  <Flex alignItems={'center'} gap={2}>
+                    <Box marginRight={'1rem'}>closeOnSelect:</Box>
+                    <Switch
+                      name="closeOnSelect-switch"
+                      isChecked={isRangeChecked}
+                      onChange={(e) => setRangeCheck(e.currentTarget.checked)}
+                    />
+                    <Button
+                      size={'sm'}
+                      onClick={() => {
+                        setSelectedDates([]);
+                      }}
+                    >
+                      Set Empty (Empty Array: "[]")
+                    </Button>
+                  </Flex>
+                  <Flex gap="1rem" alignItems="center">
+                    <label htmlFor={`popover-trigger-default-range`}>
+                      Default:
+                    </label>
+                    <RangeDatepicker
+                      id="default-range"
+                      selectedDates={selectedDates}
+                      onDateChange={setSelectedDates}
+                      closeOnSelect={isRangeChecked}
+                    />
+                  </Flex>
+                  <Flex gap="1rem" alignItems="center">
+                    <label htmlFor={`input-range`}>Input:</label>
+                    <RangeDatepicker
+                      id="input-range"
+                      triggerVariant="input"
+                      selectedDates={selectedDates}
+                      onDateChange={setSelectedDates}
+                      closeOnSelect={isRangeChecked}
+                    />
+                  </Flex>
+                </Section>
+                <Section title="Inside Modal:">
+                  <Button onClick={onOpen}>Open Modal</Button>
+                  <Modal isOpen={isOpen} onClose={onClose}>
+                    <ModalOverlay />
+                    <ModalContent ref={modalRef}>
+                      <ModalHeader>Modal Title</ModalHeader>
+                      <ModalCloseButton />
+                      <ModalBody>
+                        <Flex flexDir={'column'} gap={2}>
+                          <div>Default:</div>
+                          <SingleDatepicker
+                            date={date}
+                            onDateChange={setDate}
+                          />
+                          <RangeDatepicker
+                            selectedDates={selectedDates}
+                            onDateChange={setSelectedDates}
+                          />
+                          <div>
+                            if <code>{`usePortal={true}`} </code> <br />
+                            please add <code> {`portalRef={modalRef}`}</code>
+                          </div>
+                          <SingleDatepicker
+                            date={date}
+                            onDateChange={setDate}
+                            portalRef={modalRef}
+                          />
+                          <RangeDatepicker
+                            selectedDates={selectedDates}
+                            onDateChange={setSelectedDates}
+                            usePortal={true}
+                            portalRef={modalRef}
+                          />
+                        </Flex>
+                      </ModalBody>
+                      <ModalFooter>
+                        <Button colorScheme="blue" mr={3} onClick={onClose}>
+                          Close
+                        </Button>
+                        <Button variant="ghost">Secondary Action</Button>
+                      </ModalFooter>
+                    </ModalContent>
+                  </Modal>
+                </Section>
+              </Flex>
             </Panel>
           </TabPanel>
           <TabPanel>
diff --git a/example/package-lock.json b/example/package-lock.json
index 259d7b6..364165c 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "example",
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
diff --git a/package-lock.json b/package-lock.json
index e21f9e5..9ca3d1f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "react-focus-lock": "^2.9.5"
       },
       "devDependencies": {
-        "@chakra-ui/react": "^1.7.1",
+        "@chakra-ui/react": "^1.7.3",
         "@emotion/react": "^11.4.0",
         "@emotion/styled": "^11.3.0",
         "@size-limit/preset-small-lib": "^6.0.4",
@@ -1772,16 +1772,16 @@
       "dev": true
     },
     "node_modules/@chakra-ui/accordion": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/accordion/-/accordion-1.4.1.tgz",
-      "integrity": "sha512-/E0FW5YHNVD6WwMGiuQuXpA70P2CKAV+MzcMITnSGPWsh9XD0mcXvMkIALVojfFk9tcCFdIGnxX/HWr41LzgIg==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/accordion/-/accordion-1.4.2.tgz",
+      "integrity": "sha512-BAGMvcm2sFE5Ft7jwC9nF03/Yv7qztuhzwKBBy4iL0p1nCPh6kV54RBXUcoj3VWe+yrmNiAVYKRTdqQBTJFwOw==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/descendant": "2.1.1",
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1"
       },
       "peerDependencies": {
@@ -1790,12 +1790,12 @@
       }
     },
     "node_modules/@chakra-ui/alert": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/alert/-/alert-1.3.1.tgz",
-      "integrity": "sha512-BeR6l/1CLZarA3uAe+5Q3hioYf7SixYfy9rOte/29ck1lx9PLjjuPYYmuDPtZNbGibhUCh48z4U/uK2x8mbpKQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/alert/-/alert-1.3.2.tgz",
+      "integrity": "sha512-+OMeVeGtydpj6nry0zH7qFDt36zEaxckRnufx1BGiCfWdUg6ahVwKXl8qX93Q8w82od7eAoBKMgGJz7IVL5NPw==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       },
@@ -1889,12 +1889,12 @@
       }
     },
     "node_modules/@chakra-ui/close-button": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/close-button/-/close-button-1.2.1.tgz",
-      "integrity": "sha512-A/cuFtJPF8rp5p6tCIGlQdHB89gLCSOzxWssoTXAGJnmlwY2YunFHxgkYZXwPbDqFrM8ndya7Ys+AuL1JZsa3g==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/close-button/-/close-button-1.2.2.tgz",
+      "integrity": "sha512-SqeLib0qgMjK3OsO1g5OnAHUmdCC8GMjToNEea7TeSrA44bH9EXVhFTkMMu2PnDVHbQmi4Ee1cuulNJt0UhQ3g==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/utils": "1.9.1"
       },
       "peerDependencies": {
@@ -1903,9 +1903,9 @@
       }
     },
     "node_modules/@chakra-ui/color-mode": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.3.1.tgz",
-      "integrity": "sha512-UuuYMfYxaBE5fPtIR6dwIJn3snT0tVX67RN2RHv4/LQgUeiddq4VziXT3bd+tyIe9+zcsqrZhV7J7YP0h/Id/Q==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.3.2.tgz",
+      "integrity": "sha512-/rWcbrzbaWCyyUnT07Qjz0xf/ltHS31CHOKtVCWr2uTgfn2gOQpdxsKRbjrLYPOYZGTMdINUHNiAsqQjLoAoTQ==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/hooks": "1.7.1",
@@ -2022,13 +2022,13 @@
       }
     },
     "node_modules/@chakra-ui/form-control": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.1.tgz",
-      "integrity": "sha512-ASZYQFOs5mAoaNXAN/ZaesMy3XV07F0/Eba5PQ7Dejdn91aep6lqF889hmr8yqcR646xCOY7ISyYsskfh9QHrQ==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.2.tgz",
+      "integrity": "sha512-uWv0/f+JEM0ZE5Hnj3TzCnJ09EB+A+DSs9QgyECOuxx9Ju6gnns2uaRki2BfxksQL9ZZomPCkMtXazY9Wa81ag==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       },
@@ -2053,9 +2053,9 @@
       }
     },
     "node_modules/@chakra-ui/icon": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/icon/-/icon-1.2.1.tgz",
-      "integrity": "sha512-uZxFsiY4Tld+LvGIX7cky0H6oMRac8udPMQRzIk/UQeNZcsWisGetatbQsew3y1lWV/iH/8+TlDuW13GWGyGGQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/icon/-/icon-2.0.0.tgz",
+      "integrity": "sha512-/GuU+xIcOIy9uSUUUCu249ZJB/nLDbjWGkfpoSdBwqT4+ytJrKt+0Ckh3Ub14sz3BJD+Z6IiIt6ySOA9+7lbsA==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/utils": "1.9.1"
@@ -2080,12 +2080,12 @@
       }
     },
     "node_modules/@chakra-ui/input": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/input/-/input-1.3.1.tgz",
-      "integrity": "sha512-Z+LqkwVPMeUBuvB9dLDPKkBnWV52Q1PVl3KW9ouDIFg7SoemeYkBt3p4ttEKE+eIPsPlrcH1u2A/RGcCTZOe1g==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/input/-/input-1.3.2.tgz",
+      "integrity": "sha512-VMxmQgFiQ2UnBlkgLX/336G0IfYfw8YWF2ZoEFj5WL9kDSrrL1FXSBgjFGxrper74G4W20tESBCfU1S891y6cg==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       },
@@ -2095,12 +2095,12 @@
       }
     },
     "node_modules/@chakra-ui/layout": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.5.1.tgz",
-      "integrity": "sha512-nKiyZ5adjNTbBV3oFIUGIPijwutO1NGdev1jHtnZc3xo2urCIkBvKU8+mVjlX04IwZ7oLKoP3EiDDv0g7+o41Q==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.6.0.tgz",
+      "integrity": "sha512-WUfQ104y1wNueU33/hPlZsMzYJGjO0dXMpVkQf5ZNhNX3IGDO+5+MO2x2xloP+j45yNPi3p8ti/HBnm3dXI+3Q==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       },
@@ -2122,9 +2122,9 @@
       }
     },
     "node_modules/@chakra-ui/media-query": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/media-query/-/media-query-1.2.1.tgz",
-      "integrity": "sha512-Ho/qiPGTjNukFTE9WBdYV9FIXU7KFTJPqdRQPWANkz+j275n6sqSE1j5LRJllP+ett21KeuWLN4zL33pP0Ox+g==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/media-query/-/media-query-1.2.2.tgz",
+      "integrity": "sha512-xSmDVleE1drWiGH/MX3RqyVm29x/8Vf6G0UGaI2kCpbNmon+Q1zHW/yDHvptIuctLrPHYO8LOBxuUjfnIXwC2g==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/react-env": "1.1.1",
@@ -2137,9 +2137,9 @@
       }
     },
     "node_modules/@chakra-ui/menu": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/menu/-/menu-1.8.1.tgz",
-      "integrity": "sha512-fgzzFukBj4sQzTRf4q/+nHiVTKhrMtJdofnluqce/SCRJ1G+bbovUySblTzfI8iFlTSZt/eWc/Nju4JB1S+3Yg==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/menu/-/menu-1.8.2.tgz",
+      "integrity": "sha512-u2GfkwTqbWa8L/7i/kOFbU3JANiT2HStR+gsYKuiuOPiuBcUb8OlgfJfP70OtVKegNKmVEMjvzXtld3wCCo/1g==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/clickable": "1.2.1",
@@ -2147,7 +2147,7 @@
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/popper": "2.4.1",
         "@chakra-ui/react-utils": "1.2.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1"
       },
       "peerDependencies": {
@@ -2157,17 +2157,17 @@
       }
     },
     "node_modules/@chakra-ui/modal": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/modal/-/modal-1.10.1.tgz",
-      "integrity": "sha512-cboC2ITm+5FjhrBc6yJ5cW4VXnfwlLhFa1EkPqF1k4kvYGyUHArvPN1q8AiPYOIrupHYu2Iu6YmQPg7TJwNImg==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/modal/-/modal-1.10.2.tgz",
+      "integrity": "sha512-ZlmYetPHwHW4CAM09j4/+Ui54dXR1nzU6mOwhWe4/IzLvEyoEU6fHJeKyGxVUpYTG/7wltG/wKFRJpYa77tiBg==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/close-button": "1.2.1",
+        "@chakra-ui/close-button": "1.2.2",
         "@chakra-ui/focus-lock": "1.2.1",
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/portal": "1.3.1",
         "@chakra-ui/react-utils": "1.2.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1",
         "aria-hidden": "^1.1.1",
         "react-remove-scroll": "2.4.1"
@@ -2180,15 +2180,15 @@
       }
     },
     "node_modules/@chakra-ui/number-input": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/number-input/-/number-input-1.3.1.tgz",
-      "integrity": "sha512-4vBRSShT5pedElgP9YGVC+9RHzQGmUVZqu3p0gZW0fLGVVQ9C1EGrO7djL+k3tgklyu8RvSwkRDJqEPvbQKDgQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/number-input/-/number-input-1.3.2.tgz",
+      "integrity": "sha512-7x7AoqwPXU1odyDcqIwjBwf0MJUwYMM2fa+6YZ52F941GKlvkDiiJOhK6xfhhBzkLUQD6DN8zgAmmGhaZ6UQXw==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/counter": "1.2.1",
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       },
@@ -2214,12 +2214,12 @@
       }
     },
     "node_modules/@chakra-ui/popover": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/popover/-/popover-1.10.1.tgz",
-      "integrity": "sha512-/dMUQfd+h9j3GBtkA/nYaQ5xeu4vk0psUClFvLOAJRwXGN3aMrzn/mhrvHWQ/cJuwQrO1WzxH2+g6pwsFOm9ng==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/popover/-/popover-1.11.0.tgz",
+      "integrity": "sha512-cCHXAfhIRir+M0ehlYIjDw3mHpiCxDTJ9WV0H1zHQV8nDYVIlZw3nEntaq8oJrv0wpIzq2WCW5ss+bBR7nLZ1A==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/close-button": "1.2.1",
+        "@chakra-ui/close-button": "1.2.2",
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/popper": "2.4.1",
         "@chakra-ui/react-utils": "1.2.1",
@@ -2274,16 +2274,16 @@
       }
     },
     "node_modules/@chakra-ui/provider": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/provider/-/provider-1.7.1.tgz",
-      "integrity": "sha512-E2z56BAYytg+sA7arxUtg54AzhYPpR5QUcR4L679aahgiod+5y6H5TSZcTnxTFRLXVLZbBbP/eH63seIcRqCRQ==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/provider/-/provider-1.7.3.tgz",
+      "integrity": "sha512-D1SrQ7do4yzAv9/OTF3yj/BkLm7kFo5DdeuOCyvXGpVJumnvbtjltRmC7rFQH4R+y9qXPvfQP4LKMNBqSxPNng==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/css-reset": "1.1.1",
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/portal": "1.3.1",
         "@chakra-ui/react-env": "1.1.1",
-        "@chakra-ui/system": "1.8.1",
+        "@chakra-ui/system": "1.8.3",
         "@chakra-ui/utils": "1.9.1"
       },
       "peerDependencies": {
@@ -2294,12 +2294,12 @@
       }
     },
     "node_modules/@chakra-ui/radio": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/radio/-/radio-1.4.1.tgz",
-      "integrity": "sha512-Rq7goauffMNqwGVuPh4zh0kX0AuvTll66PhOwPu+GYHzsYO5+L9X875Q9QBnJEFtDjNF/MVIrH9WrKWjdWLqWw==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/radio/-/radio-1.4.3.tgz",
+      "integrity": "sha512-TQdyfdUD3BLklOP67n82JN8ksQv1BYjvaYsK0m6WCa0LDJr9aCC+XtUPgVq/1L2t4HqHdiGOrGBooF4vvy/+BA==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1",
@@ -2311,56 +2311,56 @@
       }
     },
     "node_modules/@chakra-ui/react": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-1.7.1.tgz",
-      "integrity": "sha512-mbU6M/lxD9BCuXXSEcscPpWqR4mWxXyTk0vkWcgLG59lMFAZ4/Ll+rG1xRHaCuRsAndWNws8h4+NcxY0eECfLQ==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-1.7.3.tgz",
+      "integrity": "sha512-6mrfDUOa9MoQ44Xvi7xgdDq48jTTTjW9BupCGf2R3DI+z6RbUKIHzbcoDJZt2HGY6j9EarMVNRoQJzvzGUKpoQ==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/accordion": "1.4.1",
-        "@chakra-ui/alert": "1.3.1",
+        "@chakra-ui/accordion": "1.4.2",
+        "@chakra-ui/alert": "1.3.2",
         "@chakra-ui/avatar": "1.3.1",
         "@chakra-ui/breadcrumb": "1.3.1",
         "@chakra-ui/button": "1.5.1",
         "@chakra-ui/checkbox": "1.6.1",
-        "@chakra-ui/close-button": "1.2.1",
+        "@chakra-ui/close-button": "1.2.2",
         "@chakra-ui/control-box": "1.1.1",
         "@chakra-ui/counter": "1.2.1",
         "@chakra-ui/css-reset": "1.1.1",
         "@chakra-ui/editable": "1.3.1",
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/image": "1.1.1",
-        "@chakra-ui/input": "1.3.1",
-        "@chakra-ui/layout": "1.5.1",
+        "@chakra-ui/input": "1.3.2",
+        "@chakra-ui/layout": "1.6.0",
         "@chakra-ui/live-region": "1.1.1",
-        "@chakra-ui/media-query": "1.2.1",
-        "@chakra-ui/menu": "1.8.1",
-        "@chakra-ui/modal": "1.10.1",
-        "@chakra-ui/number-input": "1.3.1",
+        "@chakra-ui/media-query": "1.2.2",
+        "@chakra-ui/menu": "1.8.2",
+        "@chakra-ui/modal": "1.10.2",
+        "@chakra-ui/number-input": "1.3.2",
         "@chakra-ui/pin-input": "1.7.1",
-        "@chakra-ui/popover": "1.10.1",
+        "@chakra-ui/popover": "1.11.0",
         "@chakra-ui/popper": "2.4.1",
         "@chakra-ui/portal": "1.3.1",
         "@chakra-ui/progress": "1.2.1",
-        "@chakra-ui/provider": "1.7.1",
-        "@chakra-ui/radio": "1.4.1",
+        "@chakra-ui/provider": "1.7.3",
+        "@chakra-ui/radio": "1.4.3",
         "@chakra-ui/react-env": "1.1.1",
-        "@chakra-ui/select": "1.2.1",
-        "@chakra-ui/skeleton": "1.2.1",
-        "@chakra-ui/slider": "1.5.1",
+        "@chakra-ui/select": "1.2.2",
+        "@chakra-ui/skeleton": "1.2.3",
+        "@chakra-ui/slider": "1.5.2",
         "@chakra-ui/spinner": "1.2.1",
-        "@chakra-ui/stat": "1.2.1",
+        "@chakra-ui/stat": "1.2.2",
         "@chakra-ui/switch": "1.3.1",
-        "@chakra-ui/system": "1.8.1",
+        "@chakra-ui/system": "1.8.3",
         "@chakra-ui/table": "1.3.1",
         "@chakra-ui/tabs": "1.6.1",
-        "@chakra-ui/tag": "1.2.1",
-        "@chakra-ui/textarea": "1.2.1",
-        "@chakra-ui/theme": "1.12.1",
-        "@chakra-ui/toast": "1.4.1",
-        "@chakra-ui/tooltip": "1.4.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/tag": "1.2.2",
+        "@chakra-ui/textarea": "1.2.2",
+        "@chakra-ui/theme": "1.12.2",
+        "@chakra-ui/toast": "1.5.0",
+        "@chakra-ui/tooltip": "1.4.2",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1",
         "@chakra-ui/visually-hidden": "1.1.1"
       },
@@ -2397,12 +2397,12 @@
       }
     },
     "node_modules/@chakra-ui/select": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/select/-/select-1.2.1.tgz",
-      "integrity": "sha512-GqRmYGjVnw/Z/2RQiW7Ywuu9O5E0spmMUBjeE/v0rqjixBqrmdApjg5pmJ4YmUMvUI/WkGtR3FR5W9Y5PpvfKw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/select/-/select-1.2.2.tgz",
+      "integrity": "sha512-EchJW3St1DtSWHe//DHwKjGsQYL2zbKcNCLnJWQKGMPZsQhAD2wsm4xjowFrV8AkY7jbVM/U2v68puN7YTC3hg==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/utils": "1.9.1"
       },
       "peerDependencies": {
@@ -2411,14 +2411,14 @@
       }
     },
     "node_modules/@chakra-ui/skeleton": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/skeleton/-/skeleton-1.2.1.tgz",
-      "integrity": "sha512-08yOmINorbxtv1xgZpHiTE7YCYdicZ5dCkc7nCVxvYQihH5efkEiLbP3EefZzFCTqa2KFN8BvgD5eA76TqleXA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/skeleton/-/skeleton-1.2.3.tgz",
+      "integrity": "sha512-u5ASkzPiBjfvKxKuBienUfmyYDTHziSWQ8Ny6k83LbwLv9IcmBNGsSkmsp7hesgi9cMHGBQ3hY2GTqG9ljndIg==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/media-query": "1.2.1",
-        "@chakra-ui/system": "1.8.1",
+        "@chakra-ui/media-query": "1.2.2",
+        "@chakra-ui/system": "1.8.3",
         "@chakra-ui/utils": "1.9.1"
       },
       "peerDependencies": {
@@ -2426,9 +2426,9 @@
       }
     },
     "node_modules/@chakra-ui/slider": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/slider/-/slider-1.5.1.tgz",
-      "integrity": "sha512-3C0DnUapVdVq9hU1VWAsk0qc6ws1TesjQl/KTkxlP4yBJxKAja1HtyeN9c1x4jizl1a1Q7BJrYICupy70Ju76A==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/slider/-/slider-1.5.2.tgz",
+      "integrity": "sha512-zP07TMew61GkJe47Nu7zEg/SUEwPHpN4alW6VUM6Y8UaVpQaDx7InarbWTc/bXdTP03SfE+hQ6WD9Oy7noe4hQ==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/hooks": "1.7.1",
@@ -2455,12 +2455,12 @@
       }
     },
     "node_modules/@chakra-ui/stat": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/stat/-/stat-1.2.1.tgz",
-      "integrity": "sha512-BTZFeh/8VdgUX080taCQj1g/rS4wGc+y3GQnklqlZ9N/bEv0gyLqQga7TFC/NkVl3cvjRiMnCCPj6vRih9x+Og==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/stat/-/stat-1.2.2.tgz",
+      "integrity": "sha512-0StsPDC56MjzhdlBl0R8wU0uwj9L1tvhQzge/ELSDn4tQDI7VovrxpFzVH0qsj7EZDwZa0BRQaSrstzWvgmJ/Q==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/utils": "1.9.1",
         "@chakra-ui/visually-hidden": "1.1.1"
       },
@@ -2470,9 +2470,9 @@
       }
     },
     "node_modules/@chakra-ui/styled-system": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.14.1.tgz",
-      "integrity": "sha512-dgXFYZdJicsddUnPV1X7lQksgMD0z5EvwGaIh2JHJERqNRIvth/CBAnVLQQvy/xSJK5YaSEmeuVVU0veUOQcXg==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.15.0.tgz",
+      "integrity": "sha512-LnsKeiYkUuJ+NMTwueiX0Mj8CW9XAMJrJxpQm/X3GY5L5PO7Hv6wW725Ovqdy4mhG3IK7S8444FthpsDv/luHw==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/utils": "1.9.1",
@@ -2494,14 +2494,14 @@
       }
     },
     "node_modules/@chakra-ui/system": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.8.1.tgz",
-      "integrity": "sha512-CFHdAjXuEDIAvNBatTBo1Tfu/HJ1LfbmjGWI4uTRfA4sDIt+cCRc/VKSfl0IKQwy70yJOMoTehZBjS8g3RTymQ==",
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.8.3.tgz",
+      "integrity": "sha512-6MaevsT7A2ifgOGQQCQsfvzPVd0kEXqFrX1Oxd842bawaqthmbFdo2bBTdaia/+Ivq/8Xot2uAQSbU+3NuRiUA==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/color-mode": "1.3.1",
+        "@chakra-ui/color-mode": "1.3.2",
         "@chakra-ui/react-utils": "1.2.1",
-        "@chakra-ui/styled-system": "1.14.1",
+        "@chakra-ui/styled-system": "1.15.0",
         "@chakra-ui/utils": "1.9.1",
         "react-fast-compare": "3.2.0"
       },
@@ -2542,12 +2542,12 @@
       }
     },
     "node_modules/@chakra-ui/tag": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/tag/-/tag-1.2.1.tgz",
-      "integrity": "sha512-O068n+qBc+CSyvpRBJ6Lwep6SydQ9UysRqw1ETF+4fJSp9dMrBp8vOcl2SVacKaCu13qdv8UdRMBxUiTz3lh7A==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/tag/-/tag-1.2.2.tgz",
+      "integrity": "sha512-H25y9nEyUAUdwQDND9P4mMXKf1wf9UH4A3DyP237qVKIyYBpa4aCH8eJU4dunh2yIzASB0DWcr7lsul/HAHxmg==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/utils": "1.9.1"
       },
       "peerDependencies": {
@@ -2556,12 +2556,12 @@
       }
     },
     "node_modules/@chakra-ui/textarea": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/textarea/-/textarea-1.2.1.tgz",
-      "integrity": "sha512-3xDsL1qQ+eY5r4GcRL4bg90vtV/xxVlw0Z3PFehFP5JW7VwXNZIRjauR/+HlOA8eYq0cF6ch2boR1GPso6rQtw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/textarea/-/textarea-1.2.2.tgz",
+      "integrity": "sha512-DoLdKxHk0DyrQDnj1la9wjl2AW3/SK62nfWDYLAm0ouFsw1VKPw9nU+Yyj0dPruQTzI19nLaYF26i97rtnT27g==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/utils": "1.9.1"
       },
       "peerDependencies": {
@@ -2570,9 +2570,9 @@
       }
     },
     "node_modules/@chakra-ui/theme": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/theme/-/theme-1.12.1.tgz",
-      "integrity": "sha512-8yDril3rSzv42eKR0x7KdnrpN1ubY0m6q37CVUADgtboJqoJwWWX2/hqkv8CX6WJf8ZwPwFL5QIwS2FPSGgi+g==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/theme/-/theme-1.12.2.tgz",
+      "integrity": "sha512-LVjSf16yYHD40ILrsDEd3idVQRvJSY7JY8lvTGWo2p6v+JQESWF+zXlYi9Le+TXRpZuFvJuuQ1SEvoqVwdcJ8Q==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/anatomy": "1.2.1",
@@ -2597,16 +2597,16 @@
       }
     },
     "node_modules/@chakra-ui/toast": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/toast/-/toast-1.4.1.tgz",
-      "integrity": "sha512-vzQkYwnGq2nx0bOKIQ6XpJaGzUwnWKmUjcVrz9NzGwVI4g93PS7+13515R0m1NrDp30132OeDXQ+tmQwCRRe6w==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/toast/-/toast-1.5.0.tgz",
+      "integrity": "sha512-rTsFx/Qos5oVPN6aZMbT/wTxwZlFNSXQqrTpJYaRcRFQGzxIDDxmGkKYfPnyJjRP9i6EqynJhXEIyhMA0xO0dw==",
       "dev": true,
       "dependencies": {
-        "@chakra-ui/alert": "1.3.1",
-        "@chakra-ui/close-button": "1.2.1",
+        "@chakra-ui/alert": "1.3.2",
+        "@chakra-ui/close-button": "1.2.2",
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/theme": "1.12.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/theme": "1.12.2",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1",
         "@reach/alert": "0.13.2"
       },
@@ -2618,9 +2618,9 @@
       }
     },
     "node_modules/@chakra-ui/tooltip": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/tooltip/-/tooltip-1.4.1.tgz",
-      "integrity": "sha512-KvTuqSqIpIgE+YNUwN7ONDRkSGR6SK9+dgSx2PfKy0Sel7UgDPVtxByuZ6tfJ9O1VTRYEdF9k+s6Gf8eRFQbNA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/tooltip/-/tooltip-1.4.2.tgz",
+      "integrity": "sha512-+wyYXG8qenKkFy2YSFfOBf3rlWADnu6S9EUxP+3Rmm78unOWXDuTJWzqy2QlXs2BwoQoifaz1LVwzmMb7WLVgQ==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/hooks": "1.7.1",
@@ -2638,9 +2638,9 @@
       }
     },
     "node_modules/@chakra-ui/transition": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/transition/-/transition-1.4.1.tgz",
-      "integrity": "sha512-s/VFucc6grNdP1bxw0oQLzy167gjAgyl/GiGH9nt54nioDEiSsvn70qKg7sjajNTvpoot+urQUdr4Qh+fIUFZQ==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/transition/-/transition-1.4.2.tgz",
+      "integrity": "sha512-S+BNmpErHlntl//uaqv0sJegzMsQms0OnJapeZaRsvZL4s1SVYrR8kMrXigkdpeh4lAUqGsLpQHPKkzaKGbBOw==",
       "dev": true,
       "dependencies": {
         "@chakra-ui/utils": "1.9.1"
@@ -3795,9 +3795,9 @@
       }
     },
     "node_modules/@popperjs/core": {
-      "version": "2.10.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
-      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "dev": true,
       "funding": {
         "type": "opencollective",
@@ -4533,7 +4533,7 @@
     "node_modules/@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==",
       "dev": true
     },
     "node_modules/@types/webpack": {
@@ -5223,23 +5223,17 @@
       "dev": true
     },
     "node_modules/aria-hidden": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.3.tgz",
-      "integrity": "sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
       "dev": true,
       "dependencies": {
-        "tslib": "^1.0.0"
+        "tslib": "^2.0.0"
       },
       "engines": {
-        "node": ">=8.5.0"
+        "node": ">=10"
       }
     },
-    "node_modules/aria-hidden/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
     "node_modules/aria-query": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
@@ -13178,20 +13172,20 @@
       }
     },
     "node_modules/react-remove-scroll-bar": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz",
-      "integrity": "sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
       "dev": true,
       "dependencies": {
-        "react-style-singleton": "^2.1.0",
-        "tslib": "^1.0.0"
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
       },
       "engines": {
-        "node": ">=8.5.0"
+        "node": ">=10"
       },
       "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0"
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -13199,12 +13193,6 @@
         }
       }
     },
-    "node_modules/react-remove-scroll-bar/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
     "node_modules/react-remove-scroll/node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
@@ -13212,21 +13200,21 @@
       "dev": true
     },
     "node_modules/react-style-singleton": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
-      "integrity": "sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
       "dev": true,
       "dependencies": {
         "get-nonce": "^1.0.0",
         "invariant": "^2.2.4",
-        "tslib": "^1.0.0"
+        "tslib": "^2.0.0"
       },
       "engines": {
-        "node": ">=8.5.0"
+        "node": ">=10"
       },
       "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0"
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -13234,12 +13222,6 @@
         }
       }
     },
-    "node_modules/react-style-singleton/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -16561,26 +16543,26 @@
       "dev": true
     },
     "@chakra-ui/accordion": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/accordion/-/accordion-1.4.1.tgz",
-      "integrity": "sha512-/E0FW5YHNVD6WwMGiuQuXpA70P2CKAV+MzcMITnSGPWsh9XD0mcXvMkIALVojfFk9tcCFdIGnxX/HWr41LzgIg==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/accordion/-/accordion-1.4.2.tgz",
+      "integrity": "sha512-BAGMvcm2sFE5Ft7jwC9nF03/Yv7qztuhzwKBBy4iL0p1nCPh6kV54RBXUcoj3VWe+yrmNiAVYKRTdqQBTJFwOw==",
       "dev": true,
       "requires": {
         "@chakra-ui/descendant": "2.1.1",
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1"
       }
     },
     "@chakra-ui/alert": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/alert/-/alert-1.3.1.tgz",
-      "integrity": "sha512-BeR6l/1CLZarA3uAe+5Q3hioYf7SixYfy9rOte/29ck1lx9PLjjuPYYmuDPtZNbGibhUCh48z4U/uK2x8mbpKQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/alert/-/alert-1.3.2.tgz",
+      "integrity": "sha512-+OMeVeGtydpj6nry0zH7qFDt36zEaxckRnufx1BGiCfWdUg6ahVwKXl8qX93Q8w82od7eAoBKMgGJz7IVL5NPw==",
       "dev": true,
       "requires": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       }
@@ -16650,19 +16632,19 @@
       }
     },
     "@chakra-ui/close-button": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/close-button/-/close-button-1.2.1.tgz",
-      "integrity": "sha512-A/cuFtJPF8rp5p6tCIGlQdHB89gLCSOzxWssoTXAGJnmlwY2YunFHxgkYZXwPbDqFrM8ndya7Ys+AuL1JZsa3g==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/close-button/-/close-button-1.2.2.tgz",
+      "integrity": "sha512-SqeLib0qgMjK3OsO1g5OnAHUmdCC8GMjToNEea7TeSrA44bH9EXVhFTkMMu2PnDVHbQmi4Ee1cuulNJt0UhQ3g==",
       "dev": true,
       "requires": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/utils": "1.9.1"
       }
     },
     "@chakra-ui/color-mode": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.3.1.tgz",
-      "integrity": "sha512-UuuYMfYxaBE5fPtIR6dwIJn3snT0tVX67RN2RHv4/LQgUeiddq4VziXT3bd+tyIe9+zcsqrZhV7J7YP0h/Id/Q==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/color-mode/-/color-mode-1.3.2.tgz",
+      "integrity": "sha512-/rWcbrzbaWCyyUnT07Qjz0xf/ltHS31CHOKtVCWr2uTgfn2gOQpdxsKRbjrLYPOYZGTMdINUHNiAsqQjLoAoTQ==",
       "dev": true,
       "requires": {
         "@chakra-ui/hooks": "1.7.1",
@@ -16752,13 +16734,13 @@
       }
     },
     "@chakra-ui/form-control": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.1.tgz",
-      "integrity": "sha512-ASZYQFOs5mAoaNXAN/ZaesMy3XV07F0/Eba5PQ7Dejdn91aep6lqF889hmr8yqcR646xCOY7ISyYsskfh9QHrQ==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/form-control/-/form-control-1.5.2.tgz",
+      "integrity": "sha512-uWv0/f+JEM0ZE5Hnj3TzCnJ09EB+A+DSs9QgyECOuxx9Ju6gnns2uaRki2BfxksQL9ZZomPCkMtXazY9Wa81ag==",
       "dev": true,
       "requires": {
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       }
@@ -16776,9 +16758,9 @@
       }
     },
     "@chakra-ui/icon": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/icon/-/icon-1.2.1.tgz",
-      "integrity": "sha512-uZxFsiY4Tld+LvGIX7cky0H6oMRac8udPMQRzIk/UQeNZcsWisGetatbQsew3y1lWV/iH/8+TlDuW13GWGyGGQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/icon/-/icon-2.0.0.tgz",
+      "integrity": "sha512-/GuU+xIcOIy9uSUUUCu249ZJB/nLDbjWGkfpoSdBwqT4+ytJrKt+0Ckh3Ub14sz3BJD+Z6IiIt6ySOA9+7lbsA==",
       "dev": true,
       "requires": {
         "@chakra-ui/utils": "1.9.1"
@@ -16795,23 +16777,23 @@
       }
     },
     "@chakra-ui/input": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/input/-/input-1.3.1.tgz",
-      "integrity": "sha512-Z+LqkwVPMeUBuvB9dLDPKkBnWV52Q1PVl3KW9ouDIFg7SoemeYkBt3p4ttEKE+eIPsPlrcH1u2A/RGcCTZOe1g==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/input/-/input-1.3.2.tgz",
+      "integrity": "sha512-VMxmQgFiQ2UnBlkgLX/336G0IfYfw8YWF2ZoEFj5WL9kDSrrL1FXSBgjFGxrper74G4W20tESBCfU1S891y6cg==",
       "dev": true,
       "requires": {
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       }
     },
     "@chakra-ui/layout": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.5.1.tgz",
-      "integrity": "sha512-nKiyZ5adjNTbBV3oFIUGIPijwutO1NGdev1jHtnZc3xo2urCIkBvKU8+mVjlX04IwZ7oLKoP3EiDDv0g7+o41Q==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/layout/-/layout-1.6.0.tgz",
+      "integrity": "sha512-WUfQ104y1wNueU33/hPlZsMzYJGjO0dXMpVkQf5ZNhNX3IGDO+5+MO2x2xloP+j45yNPi3p8ti/HBnm3dXI+3Q==",
       "dev": true,
       "requires": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       }
@@ -16826,9 +16808,9 @@
       }
     },
     "@chakra-ui/media-query": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/media-query/-/media-query-1.2.1.tgz",
-      "integrity": "sha512-Ho/qiPGTjNukFTE9WBdYV9FIXU7KFTJPqdRQPWANkz+j275n6sqSE1j5LRJllP+ett21KeuWLN4zL33pP0Ox+g==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/media-query/-/media-query-1.2.2.tgz",
+      "integrity": "sha512-xSmDVleE1drWiGH/MX3RqyVm29x/8Vf6G0UGaI2kCpbNmon+Q1zHW/yDHvptIuctLrPHYO8LOBxuUjfnIXwC2g==",
       "dev": true,
       "requires": {
         "@chakra-ui/react-env": "1.1.1",
@@ -16836,9 +16818,9 @@
       }
     },
     "@chakra-ui/menu": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/menu/-/menu-1.8.1.tgz",
-      "integrity": "sha512-fgzzFukBj4sQzTRf4q/+nHiVTKhrMtJdofnluqce/SCRJ1G+bbovUySblTzfI8iFlTSZt/eWc/Nju4JB1S+3Yg==",
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/menu/-/menu-1.8.2.tgz",
+      "integrity": "sha512-u2GfkwTqbWa8L/7i/kOFbU3JANiT2HStR+gsYKuiuOPiuBcUb8OlgfJfP70OtVKegNKmVEMjvzXtld3wCCo/1g==",
       "dev": true,
       "requires": {
         "@chakra-ui/clickable": "1.2.1",
@@ -16846,37 +16828,37 @@
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/popper": "2.4.1",
         "@chakra-ui/react-utils": "1.2.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1"
       }
     },
     "@chakra-ui/modal": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/modal/-/modal-1.10.1.tgz",
-      "integrity": "sha512-cboC2ITm+5FjhrBc6yJ5cW4VXnfwlLhFa1EkPqF1k4kvYGyUHArvPN1q8AiPYOIrupHYu2Iu6YmQPg7TJwNImg==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/modal/-/modal-1.10.2.tgz",
+      "integrity": "sha512-ZlmYetPHwHW4CAM09j4/+Ui54dXR1nzU6mOwhWe4/IzLvEyoEU6fHJeKyGxVUpYTG/7wltG/wKFRJpYa77tiBg==",
       "dev": true,
       "requires": {
-        "@chakra-ui/close-button": "1.2.1",
+        "@chakra-ui/close-button": "1.2.2",
         "@chakra-ui/focus-lock": "1.2.1",
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/portal": "1.3.1",
         "@chakra-ui/react-utils": "1.2.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1",
         "aria-hidden": "^1.1.1",
         "react-remove-scroll": "2.4.1"
       }
     },
     "@chakra-ui/number-input": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/number-input/-/number-input-1.3.1.tgz",
-      "integrity": "sha512-4vBRSShT5pedElgP9YGVC+9RHzQGmUVZqu3p0gZW0fLGVVQ9C1EGrO7djL+k3tgklyu8RvSwkRDJqEPvbQKDgQ==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/number-input/-/number-input-1.3.2.tgz",
+      "integrity": "sha512-7x7AoqwPXU1odyDcqIwjBwf0MJUwYMM2fa+6YZ52F941GKlvkDiiJOhK6xfhhBzkLUQD6DN8zgAmmGhaZ6UQXw==",
       "dev": true,
       "requires": {
         "@chakra-ui/counter": "1.2.1",
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1"
       }
@@ -16894,12 +16876,12 @@
       }
     },
     "@chakra-ui/popover": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/popover/-/popover-1.10.1.tgz",
-      "integrity": "sha512-/dMUQfd+h9j3GBtkA/nYaQ5xeu4vk0psUClFvLOAJRwXGN3aMrzn/mhrvHWQ/cJuwQrO1WzxH2+g6pwsFOm9ng==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/popover/-/popover-1.11.0.tgz",
+      "integrity": "sha512-cCHXAfhIRir+M0ehlYIjDw3mHpiCxDTJ9WV0H1zHQV8nDYVIlZw3nEntaq8oJrv0wpIzq2WCW5ss+bBR7nLZ1A==",
       "dev": true,
       "requires": {
-        "@chakra-ui/close-button": "1.2.1",
+        "@chakra-ui/close-button": "1.2.2",
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/popper": "2.4.1",
         "@chakra-ui/react-utils": "1.2.1",
@@ -16938,26 +16920,26 @@
       }
     },
     "@chakra-ui/provider": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/provider/-/provider-1.7.1.tgz",
-      "integrity": "sha512-E2z56BAYytg+sA7arxUtg54AzhYPpR5QUcR4L679aahgiod+5y6H5TSZcTnxTFRLXVLZbBbP/eH63seIcRqCRQ==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/provider/-/provider-1.7.3.tgz",
+      "integrity": "sha512-D1SrQ7do4yzAv9/OTF3yj/BkLm7kFo5DdeuOCyvXGpVJumnvbtjltRmC7rFQH4R+y9qXPvfQP4LKMNBqSxPNng==",
       "dev": true,
       "requires": {
         "@chakra-ui/css-reset": "1.1.1",
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/portal": "1.3.1",
         "@chakra-ui/react-env": "1.1.1",
-        "@chakra-ui/system": "1.8.1",
+        "@chakra-ui/system": "1.8.3",
         "@chakra-ui/utils": "1.9.1"
       }
     },
     "@chakra-ui/radio": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/radio/-/radio-1.4.1.tgz",
-      "integrity": "sha512-Rq7goauffMNqwGVuPh4zh0kX0AuvTll66PhOwPu+GYHzsYO5+L9X875Q9QBnJEFtDjNF/MVIrH9WrKWjdWLqWw==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/radio/-/radio-1.4.3.tgz",
+      "integrity": "sha512-TQdyfdUD3BLklOP67n82JN8ksQv1BYjvaYsK0m6WCa0LDJr9aCC+XtUPgVq/1L2t4HqHdiGOrGBooF4vvy/+BA==",
       "dev": true,
       "requires": {
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/hooks": "1.7.1",
         "@chakra-ui/react-utils": "1.2.1",
         "@chakra-ui/utils": "1.9.1",
@@ -16965,56 +16947,56 @@
       }
     },
     "@chakra-ui/react": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-1.7.1.tgz",
-      "integrity": "sha512-mbU6M/lxD9BCuXXSEcscPpWqR4mWxXyTk0vkWcgLG59lMFAZ4/Ll+rG1xRHaCuRsAndWNws8h4+NcxY0eECfLQ==",
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/react/-/react-1.7.3.tgz",
+      "integrity": "sha512-6mrfDUOa9MoQ44Xvi7xgdDq48jTTTjW9BupCGf2R3DI+z6RbUKIHzbcoDJZt2HGY6j9EarMVNRoQJzvzGUKpoQ==",
       "dev": true,
       "requires": {
-        "@chakra-ui/accordion": "1.4.1",
-        "@chakra-ui/alert": "1.3.1",
+        "@chakra-ui/accordion": "1.4.2",
+        "@chakra-ui/alert": "1.3.2",
         "@chakra-ui/avatar": "1.3.1",
         "@chakra-ui/breadcrumb": "1.3.1",
         "@chakra-ui/button": "1.5.1",
         "@chakra-ui/checkbox": "1.6.1",
-        "@chakra-ui/close-button": "1.2.1",
+        "@chakra-ui/close-button": "1.2.2",
         "@chakra-ui/control-box": "1.1.1",
         "@chakra-ui/counter": "1.2.1",
         "@chakra-ui/css-reset": "1.1.1",
         "@chakra-ui/editable": "1.3.1",
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/image": "1.1.1",
-        "@chakra-ui/input": "1.3.1",
-        "@chakra-ui/layout": "1.5.1",
+        "@chakra-ui/input": "1.3.2",
+        "@chakra-ui/layout": "1.6.0",
         "@chakra-ui/live-region": "1.1.1",
-        "@chakra-ui/media-query": "1.2.1",
-        "@chakra-ui/menu": "1.8.1",
-        "@chakra-ui/modal": "1.10.1",
-        "@chakra-ui/number-input": "1.3.1",
+        "@chakra-ui/media-query": "1.2.2",
+        "@chakra-ui/menu": "1.8.2",
+        "@chakra-ui/modal": "1.10.2",
+        "@chakra-ui/number-input": "1.3.2",
         "@chakra-ui/pin-input": "1.7.1",
-        "@chakra-ui/popover": "1.10.1",
+        "@chakra-ui/popover": "1.11.0",
         "@chakra-ui/popper": "2.4.1",
         "@chakra-ui/portal": "1.3.1",
         "@chakra-ui/progress": "1.2.1",
-        "@chakra-ui/provider": "1.7.1",
-        "@chakra-ui/radio": "1.4.1",
+        "@chakra-ui/provider": "1.7.3",
+        "@chakra-ui/radio": "1.4.3",
         "@chakra-ui/react-env": "1.1.1",
-        "@chakra-ui/select": "1.2.1",
-        "@chakra-ui/skeleton": "1.2.1",
-        "@chakra-ui/slider": "1.5.1",
+        "@chakra-ui/select": "1.2.2",
+        "@chakra-ui/skeleton": "1.2.3",
+        "@chakra-ui/slider": "1.5.2",
         "@chakra-ui/spinner": "1.2.1",
-        "@chakra-ui/stat": "1.2.1",
+        "@chakra-ui/stat": "1.2.2",
         "@chakra-ui/switch": "1.3.1",
-        "@chakra-ui/system": "1.8.1",
+        "@chakra-ui/system": "1.8.3",
         "@chakra-ui/table": "1.3.1",
         "@chakra-ui/tabs": "1.6.1",
-        "@chakra-ui/tag": "1.2.1",
-        "@chakra-ui/textarea": "1.2.1",
-        "@chakra-ui/theme": "1.12.1",
-        "@chakra-ui/toast": "1.4.1",
-        "@chakra-ui/tooltip": "1.4.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/tag": "1.2.2",
+        "@chakra-ui/textarea": "1.2.2",
+        "@chakra-ui/theme": "1.12.2",
+        "@chakra-ui/toast": "1.5.0",
+        "@chakra-ui/tooltip": "1.4.2",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1",
         "@chakra-ui/visually-hidden": "1.1.1"
       }
@@ -17038,31 +17020,31 @@
       }
     },
     "@chakra-ui/select": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/select/-/select-1.2.1.tgz",
-      "integrity": "sha512-GqRmYGjVnw/Z/2RQiW7Ywuu9O5E0spmMUBjeE/v0rqjixBqrmdApjg5pmJ4YmUMvUI/WkGtR3FR5W9Y5PpvfKw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/select/-/select-1.2.2.tgz",
+      "integrity": "sha512-EchJW3St1DtSWHe//DHwKjGsQYL2zbKcNCLnJWQKGMPZsQhAD2wsm4xjowFrV8AkY7jbVM/U2v68puN7YTC3hg==",
       "dev": true,
       "requires": {
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/utils": "1.9.1"
       }
     },
     "@chakra-ui/skeleton": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/skeleton/-/skeleton-1.2.1.tgz",
-      "integrity": "sha512-08yOmINorbxtv1xgZpHiTE7YCYdicZ5dCkc7nCVxvYQihH5efkEiLbP3EefZzFCTqa2KFN8BvgD5eA76TqleXA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/skeleton/-/skeleton-1.2.3.tgz",
+      "integrity": "sha512-u5ASkzPiBjfvKxKuBienUfmyYDTHziSWQ8Ny6k83LbwLv9IcmBNGsSkmsp7hesgi9cMHGBQ3hY2GTqG9ljndIg==",
       "dev": true,
       "requires": {
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/media-query": "1.2.1",
-        "@chakra-ui/system": "1.8.1",
+        "@chakra-ui/media-query": "1.2.2",
+        "@chakra-ui/system": "1.8.3",
         "@chakra-ui/utils": "1.9.1"
       }
     },
     "@chakra-ui/slider": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/slider/-/slider-1.5.1.tgz",
-      "integrity": "sha512-3C0DnUapVdVq9hU1VWAsk0qc6ws1TesjQl/KTkxlP4yBJxKAja1HtyeN9c1x4jizl1a1Q7BJrYICupy70Ju76A==",
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/slider/-/slider-1.5.2.tgz",
+      "integrity": "sha512-zP07TMew61GkJe47Nu7zEg/SUEwPHpN4alW6VUM6Y8UaVpQaDx7InarbWTc/bXdTP03SfE+hQ6WD9Oy7noe4hQ==",
       "dev": true,
       "requires": {
         "@chakra-ui/hooks": "1.7.1",
@@ -17081,20 +17063,20 @@
       }
     },
     "@chakra-ui/stat": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/stat/-/stat-1.2.1.tgz",
-      "integrity": "sha512-BTZFeh/8VdgUX080taCQj1g/rS4wGc+y3GQnklqlZ9N/bEv0gyLqQga7TFC/NkVl3cvjRiMnCCPj6vRih9x+Og==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/stat/-/stat-1.2.2.tgz",
+      "integrity": "sha512-0StsPDC56MjzhdlBl0R8wU0uwj9L1tvhQzge/ELSDn4tQDI7VovrxpFzVH0qsj7EZDwZa0BRQaSrstzWvgmJ/Q==",
       "dev": true,
       "requires": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/utils": "1.9.1",
         "@chakra-ui/visually-hidden": "1.1.1"
       }
     },
     "@chakra-ui/styled-system": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.14.1.tgz",
-      "integrity": "sha512-dgXFYZdJicsddUnPV1X7lQksgMD0z5EvwGaIh2JHJERqNRIvth/CBAnVLQQvy/xSJK5YaSEmeuVVU0veUOQcXg==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/styled-system/-/styled-system-1.15.0.tgz",
+      "integrity": "sha512-LnsKeiYkUuJ+NMTwueiX0Mj8CW9XAMJrJxpQm/X3GY5L5PO7Hv6wW725Ovqdy4mhG3IK7S8444FthpsDv/luHw==",
       "dev": true,
       "requires": {
         "@chakra-ui/utils": "1.9.1",
@@ -17112,14 +17094,14 @@
       }
     },
     "@chakra-ui/system": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.8.1.tgz",
-      "integrity": "sha512-CFHdAjXuEDIAvNBatTBo1Tfu/HJ1LfbmjGWI4uTRfA4sDIt+cCRc/VKSfl0IKQwy70yJOMoTehZBjS8g3RTymQ==",
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/system/-/system-1.8.3.tgz",
+      "integrity": "sha512-6MaevsT7A2ifgOGQQCQsfvzPVd0kEXqFrX1Oxd842bawaqthmbFdo2bBTdaia/+Ivq/8Xot2uAQSbU+3NuRiUA==",
       "dev": true,
       "requires": {
-        "@chakra-ui/color-mode": "1.3.1",
+        "@chakra-ui/color-mode": "1.3.2",
         "@chakra-ui/react-utils": "1.2.1",
-        "@chakra-ui/styled-system": "1.14.1",
+        "@chakra-ui/styled-system": "1.15.0",
         "@chakra-ui/utils": "1.9.1",
         "react-fast-compare": "3.2.0"
       }
@@ -17147,29 +17129,29 @@
       }
     },
     "@chakra-ui/tag": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/tag/-/tag-1.2.1.tgz",
-      "integrity": "sha512-O068n+qBc+CSyvpRBJ6Lwep6SydQ9UysRqw1ETF+4fJSp9dMrBp8vOcl2SVacKaCu13qdv8UdRMBxUiTz3lh7A==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/tag/-/tag-1.2.2.tgz",
+      "integrity": "sha512-H25y9nEyUAUdwQDND9P4mMXKf1wf9UH4A3DyP237qVKIyYBpa4aCH8eJU4dunh2yIzASB0DWcr7lsul/HAHxmg==",
       "dev": true,
       "requires": {
-        "@chakra-ui/icon": "1.2.1",
+        "@chakra-ui/icon": "2.0.0",
         "@chakra-ui/utils": "1.9.1"
       }
     },
     "@chakra-ui/textarea": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/textarea/-/textarea-1.2.1.tgz",
-      "integrity": "sha512-3xDsL1qQ+eY5r4GcRL4bg90vtV/xxVlw0Z3PFehFP5JW7VwXNZIRjauR/+HlOA8eYq0cF6ch2boR1GPso6rQtw==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/textarea/-/textarea-1.2.2.tgz",
+      "integrity": "sha512-DoLdKxHk0DyrQDnj1la9wjl2AW3/SK62nfWDYLAm0ouFsw1VKPw9nU+Yyj0dPruQTzI19nLaYF26i97rtnT27g==",
       "dev": true,
       "requires": {
-        "@chakra-ui/form-control": "1.5.1",
+        "@chakra-ui/form-control": "1.5.2",
         "@chakra-ui/utils": "1.9.1"
       }
     },
     "@chakra-ui/theme": {
-      "version": "1.12.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/theme/-/theme-1.12.1.tgz",
-      "integrity": "sha512-8yDril3rSzv42eKR0x7KdnrpN1ubY0m6q37CVUADgtboJqoJwWWX2/hqkv8CX6WJf8ZwPwFL5QIwS2FPSGgi+g==",
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/theme/-/theme-1.12.2.tgz",
+      "integrity": "sha512-LVjSf16yYHD40ILrsDEd3idVQRvJSY7JY8lvTGWo2p6v+JQESWF+zXlYi9Le+TXRpZuFvJuuQ1SEvoqVwdcJ8Q==",
       "dev": true,
       "requires": {
         "@chakra-ui/anatomy": "1.2.1",
@@ -17188,24 +17170,24 @@
       }
     },
     "@chakra-ui/toast": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/toast/-/toast-1.4.1.tgz",
-      "integrity": "sha512-vzQkYwnGq2nx0bOKIQ6XpJaGzUwnWKmUjcVrz9NzGwVI4g93PS7+13515R0m1NrDp30132OeDXQ+tmQwCRRe6w==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/toast/-/toast-1.5.0.tgz",
+      "integrity": "sha512-rTsFx/Qos5oVPN6aZMbT/wTxwZlFNSXQqrTpJYaRcRFQGzxIDDxmGkKYfPnyJjRP9i6EqynJhXEIyhMA0xO0dw==",
       "dev": true,
       "requires": {
-        "@chakra-ui/alert": "1.3.1",
-        "@chakra-ui/close-button": "1.2.1",
+        "@chakra-ui/alert": "1.3.2",
+        "@chakra-ui/close-button": "1.2.2",
         "@chakra-ui/hooks": "1.7.1",
-        "@chakra-ui/theme": "1.12.1",
-        "@chakra-ui/transition": "1.4.1",
+        "@chakra-ui/theme": "1.12.2",
+        "@chakra-ui/transition": "1.4.2",
         "@chakra-ui/utils": "1.9.1",
         "@reach/alert": "0.13.2"
       }
     },
     "@chakra-ui/tooltip": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/tooltip/-/tooltip-1.4.1.tgz",
-      "integrity": "sha512-KvTuqSqIpIgE+YNUwN7ONDRkSGR6SK9+dgSx2PfKy0Sel7UgDPVtxByuZ6tfJ9O1VTRYEdF9k+s6Gf8eRFQbNA==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/tooltip/-/tooltip-1.4.2.tgz",
+      "integrity": "sha512-+wyYXG8qenKkFy2YSFfOBf3rlWADnu6S9EUxP+3Rmm78unOWXDuTJWzqy2QlXs2BwoQoifaz1LVwzmMb7WLVgQ==",
       "dev": true,
       "requires": {
         "@chakra-ui/hooks": "1.7.1",
@@ -17217,9 +17199,9 @@
       }
     },
     "@chakra-ui/transition": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/@chakra-ui/transition/-/transition-1.4.1.tgz",
-      "integrity": "sha512-s/VFucc6grNdP1bxw0oQLzy167gjAgyl/GiGH9nt54nioDEiSsvn70qKg7sjajNTvpoot+urQUdr4Qh+fIUFZQ==",
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@chakra-ui/transition/-/transition-1.4.2.tgz",
+      "integrity": "sha512-S+BNmpErHlntl//uaqv0sJegzMsQms0OnJapeZaRsvZL4s1SVYrR8kMrXigkdpeh4lAUqGsLpQHPKkzaKGbBOw==",
       "dev": true,
       "requires": {
         "@chakra-ui/utils": "1.9.1"
@@ -18104,9 +18086,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.10.2",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
-      "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "dev": true
     },
     "@reach/alert": {
@@ -18751,7 +18733,7 @@
     "@types/warning": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=",
+      "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==",
       "dev": true
     },
     "@types/webpack": {
@@ -19263,20 +19245,12 @@
       "dev": true
     },
     "aria-hidden": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.1.3.tgz",
-      "integrity": "sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz",
+      "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==",
       "dev": true,
       "requires": {
-        "tslib": "^1.0.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
+        "tslib": "^2.0.0"
       }
     },
     "aria-query": {
@@ -25117,40 +25091,24 @@
       }
     },
     "react-remove-scroll-bar": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.2.0.tgz",
-      "integrity": "sha512-UU9ZBP1wdMR8qoUs7owiVcpaPwsQxUDC2lypP6mmixaGlARZa7ZIBx1jcuObLdhMOvCsnZcvetOho0wzPa9PYg==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
       "dev": true,
       "requires": {
-        "react-style-singleton": "^2.1.0",
-        "tslib": "^1.0.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
       }
     },
     "react-style-singleton": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.1.1.tgz",
-      "integrity": "sha512-jNRp07Jza6CBqdRKNgGhT3u9umWvils1xsuMOjZlghBDH2MU0PL2WZor4PGYjXpnRCa9DQSlHMs/xnABWOwYbA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
       "dev": true,
       "requires": {
         "get-nonce": "^1.0.0",
         "invariant": "^2.2.4",
-        "tslib": "^1.0.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
+        "tslib": "^2.0.0"
       }
     },
     "readable-stream": {
diff --git a/package.json b/package.json
index dc3af4f..851d19d 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     }
   ],
   "devDependencies": {
-    "@chakra-ui/react": "^1.7.1",
+    "@chakra-ui/react": "^1.7.3",
     "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@size-limit/preset-small-lib": "^6.0.4",
diff --git a/src/components/calendarIcon.tsx b/src/components/calendarIcon.tsx
new file mode 100644
index 0000000..47f02d2
--- /dev/null
+++ b/src/components/calendarIcon.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const CalendarIcon = () => {
+  return (
+    <svg viewBox="0 0 14 14" width={'14px'} height={'14px'} focusable="false">
+      <path
+        fill="currentColor"
+        d="M10.8889,5.5 L3.11111,5.5 L3.11111,7.05556 L10.8889,7.05556 L10.8889,5.5 Z M12.4444,1.05556 L11.6667,1.05556 L11.6667,0 L10.1111,0 L10.1111,1.05556 L3.88889,1.05556 L3.88889,0 L2.33333,0 L2.33333,1.05556 L1.55556,1.05556 C0.692222,1.05556 0.00777777,1.75556 0.00777777,2.61111 L0,12.5 C0,13.3556 0.692222,14 1.55556,14 L12.4444,14 C13.3,14 14,13.3556 14,12.5 L14,2.61111 C14,1.75556 13.3,1.05556 12.4444,1.05556 Z M12.4444,12.5 L1.55556,12.5 L1.55556,3.94444 L12.4444,3.94444 L12.4444,12.5 Z M8.55556,8.61111 L3.11111,8.61111 L3.11111,10.1667 L8.55556,10.1667 L8.55556,8.61111 Z"
+      ></path>
+    </svg>
+  );
+};
diff --git a/src/range.tsx b/src/range.tsx
index 5ceed64..af6dd72 100644
--- a/src/range.tsx
+++ b/src/range.tsx
@@ -2,9 +2,11 @@ import React, { useState } from 'react';
 import { Props as DayzedHookProps } from 'dayzed';
 import { Month_Names_Short, Weekday_Names_Short } from './utils/calanderUtils';
 import {
+  Button,
   Flex,
   Input,
   Popover,
+  PopoverAnchor,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
@@ -21,6 +23,8 @@ import {
 } from './utils/commonTypes';
 import { format } from 'date-fns';
 import FocusLock from 'react-focus-lock';
+import { VariantProps } from './single';
+import { CalendarIcon } from './components/calendarIcon';
 
 interface RangeCalendarPanelProps {
   dayzedHookProps: DayzedHookProps;
@@ -80,18 +84,22 @@ export const RangeCalendarPanel: React.FC<RangeCalendarPanelProps> = ({
   );
 };
 
-export interface RangeDatepickerProps extends DatepickerProps {
+interface RangeProps extends DatepickerProps {
   selectedDates: Date[];
   configs?: DatepickerConfigs;
   disabled?: boolean;
+  children?: (value: Date[]) => React.ReactNode;
   defaultIsOpen?: boolean;
   closeOnSelect?: boolean;
   onDateChange: (date: Date[]) => void;
   id?: string;
   name?: string;
   usePortal?: boolean;
+  portalRef?: React.MutableRefObject<null>;
 }
 
+export type RangeDatepickerProps = RangeProps & VariantProps;
+
 const DefaultConfigs: Required<DatepickerConfigs> = {
   dateFormat: 'MM/dd/yyyy',
   monthNames: Month_Names_Short,
@@ -100,23 +108,44 @@ const DefaultConfigs: Required<DatepickerConfigs> = {
   monthsToDisplay: 2,
 };
 
-export const RangeDatepicker: React.FC<RangeDatepickerProps> = ({
-  configs,
-  propsConfigs = {},
-  id,
-  name,
-  usePortal,
-  defaultIsOpen = false,
-  closeOnSelect = true,
-  ...props
-}) => {
-  const { selectedDates, minDate, maxDate, onDateChange, disabled } = props;
+const defaultProps = {
+  defaultIsOpen: false,
+  closeOnSelect: true,
+  triggerVariant: 'default' as const,
+};
+
+export const RangeDatepicker: React.FC<RangeDatepickerProps> = (props) => {
+  const mergedProps = { ...defaultProps, ...props };
+  const {
+    configs,
+    propsConfigs,
+    id,
+    name,
+    usePortal,
+    portalRef,
+    defaultIsOpen,
+    closeOnSelect,
+    selectedDates,
+    minDate,
+    maxDate,
+    onDateChange,
+    disabled,
+    children,
+    triggerVariant,
+  } = mergedProps;
 
   // chakra popover utils
   const [dateInView, setDateInView] = useState(selectedDates[0] || new Date());
   const [offset, setOffset] = useState(0);
   const { onOpen, onClose, isOpen } = useDisclosure({ defaultIsOpen });
 
+  const Icon =
+    mergedProps.triggerVariant === 'input' && mergedProps.triggerIcon ? (
+      mergedProps.triggerIcon
+    ) : (
+      <CalendarIcon />
+    );
+
   const datepickerConfigs = {
     ...DefaultConfigs,
     ...configs,
@@ -160,15 +189,16 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = ({
   // eventually we want to allow user to freely type their own input and parse the input
   let intVal = selectedDates[0]
     ? `${format(selectedDates[0], datepickerConfigs.dateFormat)}`
-    : '';
+    : `${datepickerConfigs.dateFormat}`;
   intVal += selectedDates[1]
     ? ` - ${format(selectedDates[1], datepickerConfigs.dateFormat)}`
-    : '';
+    : ` - ${datepickerConfigs.dateFormat}`;
 
   const PopoverContentWrapper = usePortal ? Portal : React.Fragment;
 
   return (
     <Popover
+      id={id}
       placement="bottom-start"
       variant="responsive"
       isOpen={isOpen}
@@ -176,29 +206,69 @@ export const RangeDatepicker: React.FC<RangeDatepickerProps> = ({
       onClose={onPopoverClose}
       isLazy
     >
-      <PopoverTrigger>
-        <Input
-          onKeyPress={(e) => {
-            if (e.key === ' ' && !isOpen) {
-              e.preventDefault();
-              onOpen();
-            }
-          }}
-          id={id}
-          autoComplete="off"
-          isDisabled={disabled}
-          name={name}
-          value={intVal}
-          onChange={(e) => e.target.value}
-          {...propsConfigs.inputProps}
-        />
-      </PopoverTrigger>
-      <PopoverContentWrapper>
+      {!children && triggerVariant === 'default' ? (
+        <PopoverTrigger>
+          <Button
+            type="button"
+            variant={'outline'}
+            lineHeight={1}
+            paddingX="1rem"
+            fontSize={'sm'}
+            disabled={disabled}
+            {...propsConfigs?.triggerBtnProps}
+          >
+            {intVal}
+          </Button>
+        </PopoverTrigger>
+      ) : null}
+      {!children && triggerVariant === 'input' ? (
+        <Flex position="relative" alignItems={'center'}>
+          <PopoverAnchor>
+            <Input
+              id={id}
+              onKeyPress={(e) => {
+                if (e.key === ' ' && !isOpen) {
+                  e.preventDefault();
+                  onOpen();
+                }
+              }}
+              autoComplete="off"
+              width={'16rem'}
+              paddingRight={'2.5rem'}
+              isDisabled={disabled}
+              name={name}
+              value={intVal}
+              onChange={(e) => e.target.value}
+              {...propsConfigs?.inputProps}
+            />
+          </PopoverAnchor>
+          <PopoverTrigger>
+            <Button
+              position="absolute"
+              variant={'ghost'}
+              right="0"
+              size="sm"
+              marginRight="5px"
+              zIndex={1}
+              type="button"
+              disabled={disabled}
+              padding={'8px'}
+              {...propsConfigs?.triggerIconBtnProps}
+            >
+              {Icon}
+            </Button>
+          </PopoverTrigger>
+        </Flex>
+      ) : null}
+      {children ? children(selectedDates) : null}
+      <PopoverContentWrapper
+        {...(usePortal ? { containerRef: portalRef } : {})}
+      >
         <PopoverContent
           width="100%"
           {...propsConfigs?.popoverCompProps?.popoverContentProps}
         >
-          <PopoverBody {...propsConfigs.popoverCompProps?.popoverBodyProps}>
+          <PopoverBody {...propsConfigs?.popoverCompProps?.popoverBodyProps}>
             <FocusLock>
               <RangeCalendarPanel
                 dayzedHookProps={{
diff --git a/src/single.tsx b/src/single.tsx
index 05f9fb8..8c0e927 100644
--- a/src/single.tsx
+++ b/src/single.tsx
@@ -1,14 +1,19 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
+  Button,
+  ButtonProps,
+  Flex,
   Input,
+  InputProps,
   Popover,
+  PopoverAnchor,
   PopoverBody,
   PopoverContent,
   PopoverTrigger,
   Portal,
   useDisclosure,
 } from '@chakra-ui/react';
-import { format } from 'date-fns';
+import { format, parse, startOfDay } from 'date-fns';
 import FocusLock from 'react-focus-lock';
 import { Month_Names_Short, Weekday_Names_Short } from './utils/calanderUtils';
 import { CalendarPanel } from './components/calendarPanel';
@@ -16,9 +21,11 @@ import {
   DatepickerConfigs,
   DatepickerProps,
   OnDateSelected,
+  PropsConfigs,
 } from './utils/commonTypes';
+import { CalendarIcon } from './components/calendarIcon';
 
-export interface SingleDatepickerProps extends DatepickerProps {
+interface SingleProps extends DatepickerProps {
   date?: Date;
   onDateChange: (date: Date) => void;
   configs?: DatepickerConfigs;
@@ -27,13 +34,34 @@ export interface SingleDatepickerProps extends DatepickerProps {
    * disabledDates: `Uses startOfDay as comparison`
    */
   disabledDates?: Set<number>;
+  children?: (value: Date | undefined) => React.ReactNode;
   defaultIsOpen?: boolean;
   closeOnSelect?: boolean;
   id?: string;
   name?: string;
   usePortal?: boolean;
+  portalRef?: React.MutableRefObject<null>;
 }
 
+export type VariantProps =
+  | {
+      propsConfigs?: PropsConfigs;
+    }
+  | {
+      triggerVariant: 'default';
+      propsConfigs?: PropsConfigs;
+    }
+  | {
+      triggerVariant: 'input';
+      triggerIcon?: React.ReactNode;
+      propsConfigs?: Omit<PropsConfigs, 'triggerBtnProps'> & {
+        inputProps?: InputProps;
+        triggerIconBtnProps?: ButtonProps;
+      };
+    };
+
+export type SingleDatepickerProps = SingleProps & VariantProps;
+
 const DefaultConfigs: Required<DatepickerConfigs> = {
   dateFormat: 'yyyy-MM-dd',
   monthNames: Month_Names_Short,
@@ -42,15 +70,14 @@ const DefaultConfigs: Required<DatepickerConfigs> = {
   monthsToDisplay: 1,
 };
 
-export const SingleDatepicker: React.FC<SingleDatepickerProps> = ({
-  configs,
-  propsConfigs,
-  usePortal,
-  disabledDates,
-  defaultIsOpen = false,
-  closeOnSelect = true,
-  ...props
-}) => {
+const defaultProps = {
+  defaultIsOpen: false,
+  closeOnSelect: true,
+  triggerVariant: 'default' as const,
+};
+
+export const SingleDatepicker: React.FC<SingleDatepickerProps> = (props) => {
+  const mergedProps = { ...defaultProps, ...props };
   const {
     date: selectedDate,
     name,
@@ -59,18 +86,38 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = ({
     id,
     minDate,
     maxDate,
-  } = props;
+    configs,
+    usePortal,
+    portalRef,
+    disabledDates,
+    defaultIsOpen,
+    triggerVariant,
+    propsConfigs,
+    closeOnSelect,
+    children,
+  } = mergedProps;
 
   const [dateInView, setDateInView] = useState(selectedDate);
   const [offset, setOffset] = useState(0);
 
   const { onOpen, onClose, isOpen } = useDisclosure({ defaultIsOpen });
 
+  const Icon =
+    mergedProps.triggerVariant === 'input' && mergedProps.triggerIcon ? (
+      mergedProps.triggerIcon
+    ) : (
+      <CalendarIcon />
+    );
+
   const datepickerConfigs = {
     ...DefaultConfigs,
     ...configs,
   };
 
+  const [tempInput, setInputVal] = useState(
+    selectedDate ? format(selectedDate, datepickerConfigs.dateFormat) : ''
+  );
+
   const onPopoverClose = () => {
     onClose();
     setDateInView(selectedDate);
@@ -87,10 +134,32 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = ({
     }
   };
 
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputVal(event.target.value);
+    const newDate = parse(
+      event.target.value,
+      datepickerConfigs.dateFormat,
+      new Date()
+    );
+    if (!(newDate instanceof Date && !isNaN(newDate.getTime()))) {
+      return;
+    }
+    const isDisabled = disabledDates?.has(startOfDay(newDate).getTime());
+    if (isDisabled) return;
+    onDateChange(newDate);
+  };
+
   const PopoverContentWrapper = usePortal ? Portal : React.Fragment;
 
+  useEffect(() => {
+    if (selectedDate) {
+      setInputVal(format(selectedDate, datepickerConfigs.dateFormat));
+    }
+  }, [selectedDate, datepickerConfigs.dateFormat]);
+
   return (
     <Popover
+      id={id}
       placement="bottom-start"
       variant="responsive"
       isOpen={isOpen}
@@ -98,28 +167,67 @@ export const SingleDatepicker: React.FC<SingleDatepickerProps> = ({
       onClose={onPopoverClose}
       isLazy
     >
-      <PopoverTrigger>
-        <Input
-          onKeyPress={(e) => {
-            if (e.key === ' ' && !isOpen) {
-              e.preventDefault();
-              onOpen();
-            }
-          }}
-          id={id}
-          autoComplete="off"
-          isDisabled={disabled}
-          name={name}
-          value={
-            selectedDate
+      {!children && triggerVariant === 'default' ? (
+        <PopoverTrigger>
+          <Button
+            type="button"
+            variant={'outline'}
+            lineHeight={1}
+            paddingX="1rem"
+            disabled={disabled}
+            fontSize={'sm'}
+            {...propsConfigs?.triggerBtnProps}
+          >
+            {selectedDate
               ? format(selectedDate, datepickerConfigs.dateFormat)
-              : ''
-          }
-          onChange={(e) => e.target.value}
-          {...propsConfigs?.inputProps}
-        />
-      </PopoverTrigger>
-      <PopoverContentWrapper>
+              : ''}
+          </Button>
+        </PopoverTrigger>
+      ) : null}
+      {!children && triggerVariant === 'input' ? (
+        <Flex position="relative" alignItems={'center'}>
+          <PopoverAnchor>
+            <Input
+              id={id}
+              onKeyPress={(e) => {
+                if (e.key === ' ' && !isOpen) {
+                  e.preventDefault();
+                  onOpen();
+                }
+              }}
+              autoComplete="off"
+              width={'10rem'}
+              disabled={disabled}
+              isDisabled={disabled}
+              name={name}
+              value={tempInput}
+              onChange={handleInputChange}
+              paddingRight={'2.5rem'}
+              {...propsConfigs?.inputProps}
+            />
+          </PopoverAnchor>
+          <PopoverTrigger>
+            <Button
+              position="absolute"
+              variant={'ghost'}
+              right="0"
+              size="sm"
+              marginRight="5px"
+              zIndex={1}
+              type="button"
+              disabled={disabled}
+              padding={'8px'}
+              {...propsConfigs?.triggerIconBtnProps}
+            >
+              {Icon}
+            </Button>
+          </PopoverTrigger>
+        </Flex>
+      ) : null}
+      {children ? children(selectedDate) : null}
+      <PopoverContentWrapper
+        {...(usePortal ? { containerRef: portalRef } : {})}
+      >
         <PopoverContent
           width="100%"
           {...propsConfigs?.popoverCompProps?.popoverContentProps}
diff --git a/src/utils/commonTypes.ts b/src/utils/commonTypes.ts
index 9ba901d..02acded 100644
--- a/src/utils/commonTypes.ts
+++ b/src/utils/commonTypes.ts
@@ -46,6 +46,7 @@ export interface PropsConfigs {
   dateNavBtnProps?: ButtonProps;
   dayOfMonthBtnProps?: DayOfMonthBtnStyleProps;
   inputProps?: InputProps;
+  triggerBtnProps?: ButtonProps;
   popoverCompProps?: PopoverCompProps;
   calendarPanelProps?: CalendarPanelProps;
   dateHeadingProps?: HeadingProps;