diff --git a/docs-templates/calendar.md b/docs-templates/calendar.md
index afe10b006..1911c26e0 100644
--- a/docs-templates/calendar.md
+++ b/docs-templates/calendar.md
@@ -53,12 +53,14 @@ Also we can customize and style the ranges with CSS attribute selectors
 link_title: Calendar
 js: src/calendar/stories/__js/CalendarBase.component.jsx
 css: src/calendar/stories/CalendarBase.css
+utils: src/calendar/stories/__js/Utils.component.jsx
 -->
 
 <!-- CODESANDBOX
 link_title: RangeCalendar
 js: src/calendar/stories/__js/CalendarRange.component.jsx
 css: src/calendar/stories/CalendarRange.css
+utils: src/calendar/stories/__js/Utils.component.jsx
 -->
 
 <!-- INJECT_COMPOSITION src/calendar -->
diff --git a/docs-templates/datepicker.md b/docs-templates/datepicker.md
index 7238dfa5c..9203a6d0d 100644
--- a/docs-templates/datepicker.md
+++ b/docs-templates/datepicker.md
@@ -19,14 +19,16 @@ for the keyboard navigation & accessibility features.
 
 <!-- CODESANDBOX
 link_title: DatePicker
-js: src/datepicker/stories/__js/DatePicker.component.jsx
+js: src/datepicker/stories/__js/DatePickerBase.component.jsx
 css: src/datepicker/stories/DatePickerBase.css
+utils: src/datepicker/stories/__js/Utils.component.jsx
 -->
 
 <!-- CODESANDBOX
 link_title: RangeDatePicker
-js: src/datepicker/stories/__js/DateRangePicker.component.jsx
+js: src/datepicker/stories/__js/DatePickerRange.component.jsx
 css: src/datepicker/stories/DatePickerRange.css
+utils: src/datepicker/stories/__js/Utils.component.jsx
 -->
 
 <!-- INJECT_COMPOSITION src/datepicker -->
diff --git a/docs-templates/drawer.md b/docs-templates/drawer.md
index 9219a3a0e..a6b0c287a 100644
--- a/docs-templates/drawer.md
+++ b/docs-templates/drawer.md
@@ -13,6 +13,7 @@ component to provide the drawer ability from four ends. It follows the
 <!-- CODESANDBOX
 link_title: Drawer
 js: src/drawer/stories/__js/Drawer.component.jsx
+deps: ["@emotion/css"]
 -->
 
 <!-- INJECT_COMPOSITION src/drawer -->
diff --git a/docs-templates/timepicker.md b/docs-templates/timepicker.md
index 544f756c3..9e5566703 100644
--- a/docs-templates/timepicker.md
+++ b/docs-templates/timepicker.md
@@ -15,6 +15,7 @@ for the keyboard navigation & accessibility features.
 link_title: TimePicker
 js: src/timepicker/stories/__js/TimePicker.component.jsx
 css: src/timepicker/stories/TimePicker.css
+utils: src/timepicker/stories/__js/Utils.component.jsx
 -->
 
 <!-- INJECT_COMPOSITION src/timepicker -->
diff --git a/docs-templates/toast.md b/docs-templates/toast.md
index 0e3712761..d5701c605 100644
--- a/docs-templates/toast.md
+++ b/docs-templates/toast.md
@@ -52,6 +52,7 @@ link_title: Toast CSS Animated
 js: src/toast/stories/__js/ToastCSSAnimated.component.jsx
 utils: src/toast/stories/__js/Utils.component.jsx
 css: src/toast/stories/ToastStyled.css
+deps: ["react-transition-group"]
 -->
 
 <!-- CODESANDBOX
@@ -59,4 +60,5 @@ link_title: Toast React Spring
 js: src/toast/stories/__js/ToastReactSpring.component.jsx
 utils: src/toast/stories/__js/Utils.component.jsx
 css: src/toast/stories/ToastStyled.css
+deps: ["react-spring"]
 -->
diff --git a/docs/calendar.md b/docs/calendar.md
index 2e28634bf..2947bd3ba 100644
--- a/docs/calendar.md
+++ b/docs/calendar.md
@@ -141,9 +141,9 @@ Also we can customize and style the ranges with CSS attribute selectors
 }
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/z5377)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/9hpbv)
 
-[![Edit CodeSandbox](https://img.shields.io/badge/RangeCalendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/lxxfg)
+[![Edit CodeSandbox](https://img.shields.io/badge/RangeCalendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/ngv58)
 
 ## Composition
 
diff --git a/docs/datepicker.md b/docs/datepicker.md
index f3f76f7bf..795e06571 100644
--- a/docs/datepicker.md
+++ b/docs/datepicker.md
@@ -278,9 +278,9 @@ const RangeCalendar = state => {
 };
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/DatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/l56y1)
+[![Edit CodeSandbox](https://img.shields.io/badge/DatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/kr468)
 
-[![Edit CodeSandbox](https://img.shields.io/badge/RangeDatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/8oyx5)
+[![Edit CodeSandbox](https://img.shields.io/badge/RangeDatePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/4kj5z)
 
 ## Composition
 
diff --git a/docs/drawer.md b/docs/drawer.md
index 4df3ab084..141599401 100644
--- a/docs/drawer.md
+++ b/docs/drawer.md
@@ -95,7 +95,7 @@ const cssTransforms = {
 };
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Drawer-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/ostxr)
+[![Edit CodeSandbox](https://img.shields.io/badge/Drawer-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/igtld)
 
 ## Composition
 
diff --git a/docs/progress.md b/docs/progress.md
index e885532bb..838c93177 100644
--- a/docs/progress.md
+++ b/docs/progress.md
@@ -42,9 +42,9 @@ export default App;
 
 [![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Basic-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/cov1f)
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Linear-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/0p2yo)
+[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Linear-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/g0s94)
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Circular-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/e3eun)
+[![Edit CodeSandbox](https://img.shields.io/badge/Progress%20Circular-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/15d8l)
 
 ## Accessibility Requirement
 
diff --git a/docs/timepicker.md b/docs/timepicker.md
index 4d8061bed..35551ac11 100644
--- a/docs/timepicker.md
+++ b/docs/timepicker.md
@@ -113,7 +113,7 @@ export const App = props => {
 export default App;
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/TimePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/v6nh4)
+[![Edit CodeSandbox](https://img.shields.io/badge/TimePicker-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/vqzej)
 
 ## Composition
 
diff --git a/docs/toast.md b/docs/toast.md
index 445ef678e..f131ac7b8 100644
--- a/docs/toast.md
+++ b/docs/toast.md
@@ -105,6 +105,6 @@ animations has the chance to finish without being interrupted.
 
 [![Edit CodeSandbox](https://img.shields.io/badge/Toast%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/1297l)
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20CSS%20Animated-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/i0emy)
+[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20CSS%20Animated-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/hmpn1)
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20React%20Spring-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/2uhsj)
+[![Edit CodeSandbox](https://img.shields.io/badge/Toast%20React%20Spring-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/vfobg)