docs: ensure sandbox link injection order (#176)

docs/accordion.md

@@ -65,9 +65,9 @@ export function App(props) {
 export default App;
 ```
 
-[Accordion Basic - Open on Sandbox](https://codesandbox.io/s/scil2)
+[Accordion Styled - Open on Sandbox](https://codesandbox.io/s/69twh)
 
-[Accordion Styled - Open on Sandbox](https://codesandbox.io/s/lonmk)
+[Accordion Basic - Open on Sandbox](https://codesandbox.io/s/dso90)
 
 ## Accessibility Requirements
 

docs/breadcrumb.md

@@ -57,7 +57,7 @@ export const App = props => {
 export default App;
 ```
 
-[Breadcrumbs Basic - Open on Sandbox](https://codesandbox.io/s/t3ygx)
+[Breadcrumbs Basic - Open on Sandbox](https://codesandbox.io/s/we32g)
 
 ## Accessibility Requirement
 

docs/calendar.md

@@ -265,9 +265,9 @@ const DoubleChevronRight = props => (
 );
 ```
 
-[Calendar - Open On Sandbox](https://codesandbox.io/s/qutws)
+[RangeCalendar - Open On Sandbox](https://codesandbox.io/s/myy3o)
 
-[RangeCalendar - Open On Sandbox](https://codesandbox.io/s/g035s)
+[Calendar - Open On Sandbox](https://codesandbox.io/s/nr4o9)
 
 ## Composition
 

docs/datepicker.md

@@ -366,9 +366,9 @@ const DoubleChevronRight = props => (
 );
 ```
 
-[RangeDatePicker - Open On Sandbox](https://codesandbox.io/s/7r8jv)
+[RangeDatePicker - Open On Sandbox](https://codesandbox.io/s/94npf)
 
-[DatePicker - Open On Sandbox](https://codesandbox.io/s/x7w6p)
+[DatePicker - Open On Sandbox](https://codesandbox.io/s/dkrqk)
 
 ## Composition
 

docs/drawer.md

@@ -95,7 +95,7 @@ const cssTransforms = {
 };
 ```
 
-[Drawer - Open On Sandbox](https://codesandbox.io/s/ostxr)
+[Drawer - Open On Sandbox](https://codesandbox.io/s/q9njc)
 
 ## Composition
 

docs/link.md

@@ -28,7 +28,7 @@ export const App = props => {
 export default App;
 ```
 
-[Link - Open on Sandbox](https://codesandbox.io/s/5gwlm)
+[Link - Open on Sandbox](https://codesandbox.io/s/seki2)
 
 ## Composition
 

docs/meter.md

@@ -110,7 +110,7 @@ function meterBarStyle(meter, props) {
 }
 ```
 
-[Meter - Open On Sandbox](https://codesandbox.io/s/8mxwv)
+[Meter - Open On Sandbox](https://codesandbox.io/s/6b6s7)
 
 ## Accessibility Requirement
 
@@ -131,21 +131,21 @@ function meterBarStyle(meter, props) {
 
 - **`value`** <code>number</code> The `value` of the meter indicator.
 
-  If `undefined`/`not valid` the meter bar will be equal to `min`
+If `undefined`/`not valid` the meter bar will be equal to `min`
 
 - **`min`** <code>number</code> The minimum value of the meter
 - **`max`** <code>number</code> The maximum value of the meter
 - **`low`** <code>number</code> The higher limit of min range.
 
-  Defaults to `min`.
+Defaults to `min`.
 
 - **`optimum`** <code>number</code> The lower limit of max range.
 
-  Defaults to `median of low & high`.
+Defaults to `median of low & high`.
 
 - **`high`** <code>number</code> The lower limit of max range.
 
-  Defaults to `max`.
+Defaults to `max`.
 
 ### `Meter`
 
@@ -154,7 +154,7 @@ function meterBarStyle(meter, props) {
 
 - **`value`** <code>number</code> The `value` of the meter indicator.
 
-  If `undefined`/`not valid` the meter bar will be equal to `min`
+If `undefined`/`not valid` the meter bar will be equal to `min`
 
 - **`min`** <code>number</code> The minimum value of the meter
 - **`max`** <code>number</code> The maximum value of the meter

docs/number-input.md

@@ -52,7 +52,7 @@ export const App = props => {
 export default App;
 ```
 
-[NumberInput - Open On Sandbox](https://codesandbox.io/s/j0wly)
+[NumberInput - Open On Sandbox](https://codesandbox.io/s/0twyb)
 
 ## Accessibility Requirement
 
@@ -71,25 +71,23 @@ export default App;
 - **`value`** <code>string | number</code> The value of the counter. Should be
   less than `max` and greater than `min`
 
-  If no value, initial value is set to `""`
+If no value, initial value is set to `""`
 
 - **`keepWithinRange`** <code>boolean</code> This controls the value update
   behavior in general.
 
-  - If `true` and you use the stepper or up/down arrow keys, the value will not
-    exceed the `max` or go lower than `min`
-
-  - If `false`, the value will be allowed to go out of range.
+- If `true` and you use the stepper or up/down arrow keys, the value will not
+  exceed the `max` or go lower than `min`
 
+- If `false`, the value will be allowed to go out of range.
 - **`min`** <code>number</code> The minimum value of the counter
 - **`max`** <code>number</code> The maximum value of the counter
 - **`step`** <code>number</code> The step used to increment or decrement the
   value
 - **`precision`** <code>number</code> The number of decimal points used to round
   the value
 
-  If no precision, initial value is from the decimal places from value/step -
-  `0`
+If no precision, initial value is from the decimal places from value/step - `0`
 
 - **`defaultValue`** <code>string | number | undefined</code> The initial value
   of the counter. Should be less than `max` and greater than `min`
@@ -119,15 +117,14 @@ value will change based on mouse wheel
 - **`keepWithinRange`** <code>boolean</code> This controls the value update
   behavior in general.
 
-  - If `true` and you use the stepper or up/down arrow keys, the value will not
-    exceed the `max` or go lower than `min`
-
-  - If `false`, the value will be allowed to go out of range.
+- If `true` and you use the stepper or up/down arrow keys, the value will not
+  exceed the `max` or go lower than `min`
 
+- If `false`, the value will be allowed to go out of range.
 - **`value`** <code>string | number</code> The value of the counter. Should be
   less than `max` and greater than `min`
 
-  If no value, initial value is set to `""`
+If no value, initial value is set to `""`
 
 - **`min`** <code>number</code> The minimum value of the counter
 - **`max`** <code>number</code> The maximum value of the counter
@@ -161,11 +158,10 @@ form elements. In this case, only `aria-disabled` will be set.
 - **`keepWithinRange`** <code>boolean</code> This controls the value update
   behavior in general.
 
-  - If `true` and you use the stepper or up/down arrow keys, the value will not
-    exceed the `max` or go lower than `min`
-
-  - If `false`, the value will be allowed to go out of range.
+- If `true` and you use the stepper or up/down arrow keys, the value will not
+  exceed the `max` or go lower than `min`
 
+- If `false`, the value will be allowed to go out of range.
 - **`isAtMin`** <code>boolean</code> Truw, if value is equal to min.
 - **`focusInput`** <code>() =&#62; void</code> Focus input if focus input on
   value change is `true`
@@ -188,11 +184,10 @@ form elements. In this case, only `aria-disabled` will be set.
 - **`keepWithinRange`** <code>boolean</code> This controls the value update
   behavior in general.
 
-  - If `true` and you use the stepper or up/down arrow keys, the value will not
-    exceed the `max` or go lower than `min`
-
-  - If `false`, the value will be allowed to go out of range.
+- If `true` and you use the stepper or up/down arrow keys, the value will not
+  exceed the `max` or go lower than `min`
 
+- If `false`, the value will be allowed to go out of range.
 - **`isAtMax`** <code>boolean</code> True, if value is equal to max.
 - **`focusInput`** <code>() =&#62; void</code> Focus input if focus input on
   value change is `true`

docs/pagination.md

@@ -77,7 +77,7 @@ export const App = props => {
 export default App;
 ```
 
-[Pagination - Open On Sandbox](https://codesandbox.io/s/cwuhv)
+[Pagination - Open On Sandbox](https://codesandbox.io/s/p92pq)
 
 ## Accessibility Requirement
 

docs/picker-base.md

@@ -41,7 +41,7 @@ export const App = props => {
 export default App;
 ```
 
-[PickerBase - Open On Sandbox](https://codesandbox.io/s/h7pxf)
+[PickerBase - Open On Sandbox](https://codesandbox.io/s/ocnie)
 
 ## Composition
 

docs/progress.md

@@ -150,9 +150,9 @@ const indeterminateStyles = css({
 });
 ```
 
-[Progress Circular - Open On Sandbox](https://codesandbox.io/s/e3eun)
+[Progress Circular - Open On Sandbox](https://codesandbox.io/s/n1nyq)
 
-[Progress Linear- Open On Sandbox](https://codesandbox.io/s/0p2yo)
+[Progress Linear- Open On Sandbox](https://codesandbox.io/s/veo6j)
 
 ## Accessibility Requirement
 
@@ -170,7 +170,7 @@ const indeterminateStyles = css({
 
 - **`value`** <code>number | null</code> The `value` of the progress indicator.
 
-  If `null` the progress bar will be in `indeterminate` state
+If `null` the progress bar will be in `indeterminate` state
 
 - **`min`** <code>number</code> The minimum value of the progress
 - **`max`** <code>number</code> The maximum value of the
@@ -182,7 +182,7 @@ const indeterminateStyles = css({
 
 - **`value`** <code>number | null</code> The `value` of the progress indicator.
 
-  If `null` the progress bar will be in `indeterminate` state
+If `null` the progress bar will be in `indeterminate` state
 
 - **`min`** <code>number</code> The minimum value of the progress
 - **`max`** <code>number</code> The maximum value of the

docs/segment.md

@@ -42,7 +42,7 @@ export const App = props => {
 export default App;
 ```
 
-[Segment - Open On Sandbox](https://codesandbox.io/s/3wjgt)
+[Segment - Open On Sandbox](https://codesandbox.io/s/629us)
 
 ## Composition
 

docs/select.md

@@ -54,7 +54,7 @@ export const App = props => {
 export default App;
 ```
 
-[Select - Open On Sandbox](https://codesandbox.io/s/mfpy7)
+[Select - Open On Sandbox](https://codesandbox.io/s/zszcn)
 
 ## Props
 

docs/slider.md

@@ -144,7 +144,7 @@ export const App = args => {
 export default App;
 ```
 
-[Slider - Open On Sandbox](https://codesandbox.io/s/eng7z)
+[Slider - Open On Sandbox](https://codesandbox.io/s/mp22z)
 
 ## Accessibility Requirement
 
@@ -163,7 +163,7 @@ export default App;
 
 - **`values`** <code>number[]</code> The `value` of the slider indicator.
 
-  If `undefined`/`not valid` the slider bar will be the optimum of min & max
+If `undefined`/`not valid` the slider bar will be the optimum of min & max
 
 - **`min`** <code>number</code> The minimum value of the slider
 - **`max`** <code>number</code> The maximum value of the slider
@@ -262,7 +262,7 @@ export default App;
 
 - **`values`** <code>number[]</code> The `value` of the slider indicator.
 
-  If `undefined`/`not valid` the slider bar will be the optimum of min & max
+If `undefined`/`not valid` the slider bar will be the optimum of min & max
 
 - **`isDisabled`** <code>boolean</code> If `true`, the slider will be disabled
 - **`orientation`** <code>&#34;horizontal&#34; | &#34;vertical&#34;</code>

docs/timepicker.md

@@ -116,7 +116,7 @@ export const App = props => {
 export default App;
 ```
 
-[TimePicker - Open On Sandbox](https://codesandbox.io/s/jph5c)
+[TimePicker - Open On Sandbox](https://codesandbox.io/s/vymtn)
 
 ## Composition
 

docs/toast.md

@@ -53,6 +53,6 @@ export const App = () => {
 export default App;
 ```
 
-[Toast CSS Animated - Open On Sandbox](https://codesandbox.io/s/i0emy)
+[Toast - Open On Sandbox](https://codesandbox.io/s/2fbm9)
 
-[Toast - Open On Sandbox](https://codesandbox.io/s/l2i1y)
+[Toast CSS Animated - Open On Sandbox](https://codesandbox.io/s/8vkcv)

scripts/utils/inject-csb-links.js

@@ -22,17 +22,19 @@ const injectCsbLinks = async docsTemplate => {
       const linkTitle = parsed.link_title || "Open On CodeSandbox";
 
       const sandboxLink = await getSandboxShortURL(parsed);
-
-      docsTemplate = docsTemplate.replace(
-        CODESANDBOX_REPLACE_FLAG,
-        `[${linkTitle}](${sandboxLink})`,
-      );
+      return { sandboxLink, linkTitle };
     } catch (e) {
       console.log(e);
     }
   });
 
-  await Promise.all(promises);
+  const result = await Promise.allSettled(promises);
+  result.forEach(({ value: { sandboxLink, linkTitle } }) => {
+    docsTemplate = docsTemplate.replace(
+      CODESANDBOX_REPLACE_FLAG,
+      `[${linkTitle}](${sandboxLink})`,
+    );
+  });
 
   return docsTemplate;
 };