@pingux/astro 2.128.0 → 2.129.0-alpha.0

package/lib/components/Button/Button.stories.js

@@ -6,8 +6,8 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["isConfigured"];
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -33,12 +33,16 @@ export default {
   },
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ButtonReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'Icon', 'Text'],
+        '@pingux/mdi-react/PlusIcon': 'PlusIcon',
+        '@pingux/mdi-react/CreateIcon': 'CreateIcon'
+      }
     }
   }
 };
@@ -51,10 +55,10 @@ Default.parameters = {
     url: FIGMA_LINKS.button["default"]
   }
 };
-export var Primary = function Primary() {
-  return ___EmotionJSX(Button, {
+export var Primary = function Primary(args) {
+  return ___EmotionJSX(Button, _extends({}, args, {
     variant: "primary"
-  }, "Button Text");
+  }), "Button Text");
 };
 Primary.parameters = {
   design: {
@@ -62,10 +66,10 @@ Primary.parameters = {
     url: FIGMA_LINKS.button.primary
   }
 };
-export var Critical = function Critical() {
-  return ___EmotionJSX(Button, {
+export var Critical = function Critical(args) {
+  return ___EmotionJSX(Button, _extends({}, args, {
     variant: "critical"
-  }, "Button Text");
+  }), "Button Text");
 };
 Critical.parameters = {
   design: {
@@ -73,16 +77,16 @@ Critical.parameters = {
     url: FIGMA_LINKS.button.critical
   }
 };
-export var InlineButton = function InlineButton() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
+export var InlineButton = function InlineButton(args) {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inline"
-  }, "Button Text"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimary"
-  }, "Button Text"));
+  }), "Button Text"));
 };
 InlineButton.parameters = {
   design: {
@@ -90,13 +94,13 @@ InlineButton.parameters = {
     url: FIGMA_LINKS.button.inlineButton
   }
 };
-export var TextIconButton = function TextIconButton() {
+export var TextIconButton = function TextIconButton(args) {
   return ___EmotionJSX(Box, {
     width: 20
-  }, ___EmotionJSX(Button, {
+  }, ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     variant: "withIcon"
-  }, ___EmotionJSX(Icon, {
+  }), ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
     color: "accent.30",
@@ -104,10 +108,10 @@ export var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Button Text"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     variant: "primaryWithIcon"
-  }, ___EmotionJSX(Icon, {
+  }), ___EmotionJSX(Icon, {
     mr: "xs",
     icon: PlusIcon,
     color: "white",
@@ -115,11 +119,11 @@ export var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Button Text"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inlineWithIcon"
-  }, ___EmotionJSX(Icon, {
+  }), ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
     color: "accent.30",
@@ -127,11 +131,11 @@ export var TextIconButton = function TextIconButton() {
     title: {
       name: 'Add Circle Icon'
     }
-  }), "Button Text"), ___EmotionJSX(Button, {
+  }), "Button Text"), ___EmotionJSX(Button, _extends({}, args, {
     mb: "sm",
     mr: "auto",
     variant: "inlinePrimaryWithIcon"
-  }, ___EmotionJSX(Icon, {
+  }), ___EmotionJSX(Icon, {
     icon: PlusIcon,
     mr: "xs",
     color: "accent.30",
@@ -147,10 +151,10 @@ TextIconButton.parameters = {
     url: FIGMA_LINKS.button.textIconButton
   }
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(Button, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(Button, _extends({}, args, {
     isDisabled: true
-  }, "Button Text");
+  }), "Button Text");
 };
 Disabled.parameters = {
   design: {

package/lib/components/ButtonBar/ButtonBar.stories.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Button, ButtonBar } from '../../index';
@@ -9,12 +10,14 @@ export default {
   component: ButtonBar,
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ButtonBarReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Button', 'ButtonBar']
+      }
     }
   },
   argTypes: {
@@ -46,10 +49,10 @@ Default.parameters = {
     url: FIGMA_LINKS.buttonBar["default"]
   }
 };
-export var RightAligned = function RightAligned() {
-  return ___EmotionJSX(ButtonBar, {
+export var RightAligned = function RightAligned(args) {
+  return ___EmotionJSX(ButtonBar, _extends({}, args, {
     align: "right"
-  }, ___EmotionJSX(Button, {
+  }), ___EmotionJSX(Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {
@@ -69,8 +72,8 @@ RightAligned.parameters = {
     url: FIGMA_LINKS.buttonBar.rightAligned
   }
 };
-export var Secondary = function Secondary() {
-  return ___EmotionJSX(ButtonBar, null, ___EmotionJSX(Button, {
+export var Secondary = function Secondary(args) {
+  return ___EmotionJSX(ButtonBar, args, ___EmotionJSX(Button, {
     variant: "primary",
     "data-id": "save-button",
     onPress: function onPress() {
@@ -95,10 +98,10 @@ Secondary.parameters = {
     url: FIGMA_LINKS.buttonBar.secondary
   }
 };
-export var SecondaryRightAligned = function SecondaryRightAligned() {
-  return ___EmotionJSX(ButtonBar, {
+export var SecondaryRightAligned = function SecondaryRightAligned(args) {
+  return ___EmotionJSX(ButtonBar, _extends({
     align: "right"
-  }, ___EmotionJSX(Button, {
+  }, args), ___EmotionJSX(Button, {
     variant: "link",
     "data-id": "cancel-button",
     onPress: function onPress() {

package/lib/components/Callout/Callout.stories.js

@@ -6,6 +6,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -26,12 +27,14 @@ export default {
   argTypes: _objectSpread({}, statusArgTypes),
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CalloutReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Callout', 'Link', 'Text']
+      }
     }
   }
 };
@@ -46,10 +49,10 @@ Default.parameters = {
     url: FIGMA_LINKS.callout["default"]
   }
 };
-export var ErrorStatus = function ErrorStatus() {
-  return ___EmotionJSX(Callout, {
+export var ErrorStatus = function ErrorStatus(args) {
+  return ___EmotionJSX(Callout, _extends({
     status: statuses.ERROR
-  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat. Etiam at urna erat."));
+  }, args), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat. Etiam at urna erat."));
 };
 ErrorStatus.parameters = {
   design: {
@@ -60,10 +63,10 @@ ErrorStatus.parameters = {
 
 // Avoiding using Error as the function name due to it being a JS built-in method
 ErrorStatus.storyName = 'Error';
-export var Success = function Success() {
-  return ___EmotionJSX(Callout, {
+export var Success = function Success(args) {
+  return ___EmotionJSX(Callout, _extends({
     status: statuses.SUCCESS
-  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
+  }, args), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
 };
 Success.parameters = {
   design: {
@@ -85,10 +88,10 @@ WithLink.parameters = {
     url: FIGMA_LINKS.callout.withLink
   }
 };
-export var Warning = function Warning() {
-  return ___EmotionJSX(Callout, {
+export var Warning = function Warning(args) {
+  return ___EmotionJSX(Callout, _extends({
     status: statuses.WARNING
-  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
+  }, args), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae lacinia diam, nec ullamcorper neque. In egestas dui vel dolor tincidunt, sit amet ullamcorper leo consequat."));
 };
 Warning.parameters = {
   design: {

package/lib/components/Card/Card.stories.js

@@ -28,6 +28,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CardReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'Card', 'Text', 'TextField']
+      }
     }
   },
   argTypes: _objectSpread({}, cardArgTypes),
@@ -38,6 +43,12 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(Card, args);
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.card["default"]
+  }
+};
 export var HeaderAndFooter = function HeaderAndFooter(args) {
   var textStyling = {
     fontSize: 'md',
@@ -89,12 +100,6 @@ CardWidth.parameters = {
     url: FIGMA_LINKS.card.cardWidth
   }
 };
-Default.parameters = {
-  design: {
-    type: 'figma',
-    url: FIGMA_LINKS.card["default"]
-  }
-};
 export var CardRow = function CardRow(args) {
   var sx = {
     li: {
@@ -134,7 +139,7 @@ CardRow.parameters = {
     url: FIGMA_LINKS.card.cardRow
   }
 };
-export var InteractiveCard = function InteractiveCard() {
+export var InteractiveCard = function InteractiveCard(args) {
   var sx = {
     alignContent: 'center',
     height: '221px',
@@ -142,7 +147,7 @@ export var InteractiveCard = function InteractiveCard() {
     textAlign: 'center',
     maxWidth: '233px'
   };
-  return ___EmotionJSX(Card, {
+  return ___EmotionJSX(Card, _extends({}, args, {
     onPress: function onPress() {
       return console.log('card pressed');
     },
@@ -152,7 +157,7 @@ export var InteractiveCard = function InteractiveCard() {
     tabIndex: "0",
     variant: "cards.interactive",
     sx: sx
-  }, "Interactive Card");
+  }), "Interactive Card");
 };
 InteractiveCard.parameters = {
   design: {
@@ -160,16 +165,16 @@ InteractiveCard.parameters = {
     url: FIGMA_LINKS.card.interactiveCard
   }
 };
-export var WithInteractiveContent = function WithInteractiveContent() {
-  return ___EmotionJSX(Card, {
+export var WithInteractiveContent = function WithInteractiveContent(args) {
+  return ___EmotionJSX(Card, _extends({
     isInteractiveWithin: true
-  }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."), ___EmotionJSX(TextField, {
+  }, args), ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga sed ratione, recusandae ipsam explicabo, quasi vel maxime sint harum qui rerum perferendis. Voluptatem nisi eaque, distinctio accusamus nobis voluptas nemo."), ___EmotionJSX(TextField, {
     label: "Interactive TextField",
     mt: "md",
     width: "300px"
   }));
 };
-export var ActiveCard = function ActiveCard() {
+export var ActiveCard = function ActiveCard(args) {
   var sx = {
     alignContent: 'center',
     height: '221px',
@@ -181,7 +186,7 @@ export var ActiveCard = function ActiveCard() {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isSelected = _React$useState2[0],
     setIsSelected = _React$useState2[1];
-  return ___EmotionJSX(Card, {
+  return ___EmotionJSX(Card, _extends({}, args, {
     tabIndex: "0",
     variant: "cards.activeCard",
     sx: sx,
@@ -189,5 +194,5 @@ export var ActiveCard = function ActiveCard() {
     onPress: function onPress() {
       return setIsSelected(!isSelected);
     }
-  }, "Active Card");
+  }), "Active Card");
 };

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -7,6 +7,7 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/every";
@@ -30,9 +31,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CheckboxFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Badge', 'Box', 'CheckboxField', 'IconButtonToggle', 'Link', 'SwitchField', 'Text']
       }
     }
   },
@@ -74,11 +77,11 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(CheckboxField, args);
 };
-export var DefaultSelected = function DefaultSelected() {
-  return ___EmotionJSX(CheckboxField, {
+export var DefaultSelected = function DefaultSelected(args) {
+  return ___EmotionJSX(CheckboxField, _extends({}, args, {
     isDefaultSelected: true,
     label: "Click me"
-  });
+  }));
 };
 export var Controlled = function Controlled() {
   var _React$useState = React.useState(false),
@@ -93,21 +96,24 @@ export var Controlled = function Controlled() {
     label: "Click me"
   });
 };
-export var Required = function Required() {
-  return ___EmotionJSX(CheckboxField, {
+Controlled.parameters = {
+  codesandbox: false
+};
+export var Required = function Required(args) {
+  return ___EmotionJSX(CheckboxField, _extends({}, args, {
     isRequired: true,
     label: ___EmotionJSX(Text, null, "I agree to the", ' ', ___EmotionJSX(Link, {
       href: "https://pingidentity.com",
       target: "_blank"
     }, "Terms and Conditions"))
-  });
+  }));
 };
-export var HelperText = function HelperText() {
-  return ___EmotionJSX(CheckboxField, {
+export var HelperText = function HelperText(args) {
+  return ___EmotionJSX(CheckboxField, _extends({}, args, {
     status: statuses.ERROR,
     helperText: "Here is some helpful text...",
     label: "Click me"
-  });
+  }));
 };
 export var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndeterminate() {
   var _useState = useState(false),
@@ -234,6 +240,9 @@ export var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleab
     }));
   })));
 };
+ExpandableAndToggleableIndeterminate.parameters = {
+  codesandbox: false
+};
 export var Indeterminate = function Indeterminate() {
   // Whether the parent checkbox is indeterminate (default is true for our example)
   var _useState11 = useState(true),
@@ -320,19 +329,20 @@ Indeterminate.parameters = {
     description: {
       story: 'When a `CheckboxField` is indeterminate, it\'s necessary to control the state in order to determine how it should function when pressed. Here is an example of how to do that.'
     }
-  }
+  },
+  codesandbox: false
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(CheckboxField, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(CheckboxField, _extends({}, args, {
     isDisabled: true,
     label: "Disabled"
-  }), ___EmotionJSX(CheckboxField, {
+  })), ___EmotionJSX(CheckboxField, _extends({}, args, {
     isDisabled: true,
     isSelected: true,
     label: "Disabled"
-  }), ___EmotionJSX(CheckboxField, {
+  })), ___EmotionJSX(CheckboxField, _extends({}, args, {
     isDisabled: true,
     isIndeterminate: true,
     label: "Disabled"
-  }));
+  })));
 };

package/lib/components/CodeEditor/CodeEditor.stories.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { CodeEditor } from '../../index';
@@ -10,9 +11,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeEditorReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -31,26 +29,26 @@ export default {
 var jsonCode = "{\n  \"name\": \"Luke Skywalker\", \n  \"height\": \"172\", \n  \"mass\": \"77\", \n  \"hair_color\": \"blond\", \n  \"skin_color\": \"fair\", \n  \"eye_color\": \"blue\", \n  \"birth_year\": \"19BBY\", \n  \"gender\": \"male\", \n  \"homeworld\": \"https://swapi.dev/api/planets/1/\", \n  \"films\": [\n      \"https://swapi.dev/api/films/1/\", \n      \"https://swapi.dev/api/films/2/\", \n      \"https://swapi.dev/api/films/3/\", \n      \"https://swapi.dev/api/films/6/\"\n  ],\n  \"starships\": [\n      \"https://swapi.dev/api/starships/12/\", \n      \"https://swapi.dev/api/starships/22/\"\n  ]\n}";
 var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number) {\n  return integer + 1;\n}\n\naddOne('I am a string');\n";
 var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
-export var TypescriptEditor = function TypescriptEditor() {
-  return ___EmotionJSX(CodeEditor, {
+export var TypescriptEditor = function TypescriptEditor(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
     defaultValue: tsCode,
     language: "typescript",
     height: "200px"
-  });
+  }));
 };
-export var JavascriptEditor = function JavascriptEditor() {
-  return ___EmotionJSX(CodeEditor, {
+export var JavascriptEditor = function JavascriptEditor(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
     defaultValue: jsCode,
     language: "javascript",
     height: "200px"
-  });
+  }));
 };
-export var JsonEditor = function JsonEditor() {
-  return ___EmotionJSX(CodeEditor, {
+export var JsonEditor = function JsonEditor(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
     defaultValue: jsonCode,
     language: "json",
     height: "200px"
-  });
+  }));
 };
 export var ReadOnly = function ReadOnly() {
   return ___EmotionJSX(CodeEditor, {

package/lib/components/CodeView/CodeView.stories.js

@@ -46,6 +46,11 @@ export default {
           selector: '.prism-code'
         }]
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['CodeView']
+      }
     }
   }
 };
@@ -70,10 +75,10 @@ Default.parameters = {
     }
   }
 };
-export var WithLineNumbers = function WithLineNumbers() {
-  return ___EmotionJSX(CodeView, {
+export var WithLineNumbers = function WithLineNumbers(args) {
+  return ___EmotionJSX(CodeView, _extends({}, args, {
     hasLineNumbers: true
-  }, code);
+  }), code);
 };
 WithLineNumbers.parameters = {
   docs: {
@@ -88,15 +93,15 @@ WithLineNumbers.parameters = {
     }
   }
 };
-export var WithCustomSize = function WithCustomSize() {
-  return ___EmotionJSX(CodeView, {
+export var WithCustomSize = function WithCustomSize(args) {
+  return ___EmotionJSX(CodeView, _extends({}, args, {
     language: "jsx",
     sx: {
       width: '100%',
       height: 300
     },
     hasNoCopyButton: true
-  }, "\nconst BadgeWithIcon = () => (\n  <>\n    <Badge label=\"Badge with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" title={{ name: 'Clear Icon' }} />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon Button\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" title={{ name: 'Earth Icon' }} />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" title={{ name: 'Copy Icon' }} />\n    </Badge>\n  </>\n);\n    ");
+  }), "\nconst BadgeWithIcon = () => (\n  <>\n    <Badge label=\"Badge with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" title={{ name: 'Clear Icon' }} />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon Button\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" title={{ name: 'Earth Icon' }} />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" title={{ name: 'Copy Icon' }} />\n    </Badge>\n  </>\n);\n    ");
 };
 WithCustomSize.parameters = {
   docs: {
@@ -111,13 +116,13 @@ WithCustomSize.parameters = {
     }
   }
 };
-export var WithAdditionalLanguage = function WithAdditionalLanguage() {
+export var WithAdditionalLanguage = function WithAdditionalLanguage(args) {
   var _context;
   var cssCode = _trimInstanceProperty(_context = "\n  body {\n    margin: 0;\n    font-family: Roboto, sans-serif;\n  }\n  \n  h1 {\n    color: red;\n    margin-left: 40px;\n  }\n ").call(_context);
-  return ___EmotionJSX(CodeView, {
+  return ___EmotionJSX(CodeView, _extends({}, args, {
     language: "css",
     Prism: Prism
-  }, cssCode);
+  }), cssCode);
 };
 WithAdditionalLanguage.parameters = {
   docs: {
@@ -130,7 +135,8 @@ WithAdditionalLanguage.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };
 export var WithChangedCopiedValue = function WithChangedCopiedValue(args) {
   return ___EmotionJSX(CodeView, _extends({
@@ -147,17 +153,17 @@ WithChangedCopiedValue.parameters = {
     }
   }
 };
-export var WithCustomLanguage = function WithCustomLanguage() {
+export var WithCustomLanguage = function WithCustomLanguage(args) {
   var _context2, _context3;
   var javaCode = _trimInstanceProperty(_context2 = "\n  public class Factorial {\n  public static void main(String[] args) {\n    int num = 5;\n    int factorial = 1;\n    for (int i = 1; i <= num; i++) {\n      factorial *= i;\n    }\n    System.out.println(\"Factorial of \" + num + \" is: \" + factorial);\n  }\n}\n ").call(_context2);
   var powershellCode = _trimInstanceProperty(_context3 = "\n  Get-Process\n  Get-Process -Name \"notepad\"\n  Stop-Process -Name \"notepad\"\n  Get-Service\n  Start-Service -Name \"service_name\"\n  Get-Date\n  Get-Date -Format \"yyyy-MM-dd HH:mm:ss\"\n  Get-WmiObject -Class Win32_OperatingSystem\n  $env:COMPUTERNAME\n ").call(_context3);
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, _extends({}, args, {
     language: "java",
     Prism: Prism
-  }, javaCode), ___EmotionJSX(CodeView, {
+  }), javaCode), ___EmotionJSX(CodeView, _extends({}, args, {
     language: "powershell",
     Prism: Prism
-  }, powershellCode));
+  }), powershellCode));
 };
 WithCustomLanguage.parameters = {
   a11y: {
@@ -167,5 +173,6 @@ WithCustomLanguage.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -13,9 +13,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CollapsiblePanelReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['CollapsiblePanel']
       }
     }
   },

package/lib/components/ColorField/ColorField.stories.js

@@ -27,9 +27,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ColorFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['ColorField', 'OverlayProvider']
       }
     }
   },