@pingux/astro 2.128.0 → 2.129.0-alpha.0

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -146,9 +146,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -231,6 +228,9 @@ export var WithSections = function WithSections(args) {
     });
   }));
 };
+WithSections.parameters = {
+  codesandbox: false
+};
 export var AsyncLoading = function AsyncLoading() {
   // This example uses `useAsyncList` from "@react-stately/data"
   var list = useAsyncList({
@@ -252,7 +252,7 @@ export var AsyncLoading = function AsyncLoading() {
               // Otherwise, the cursor is the next URL to load,
               // as returned from the previous page.
               _context.next = 4;
-              return fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
+              return fetch(cursor || "https://swapi.py4e.com/api/people/?search=".concat(filterText), {
                 signal: signal
               });
             case 4:

package/lib/components/CopyText/CopyText.stories.js

@@ -19,6 +19,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CopyTextReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'CopyText', 'Text', 'Link', 'TextField']
+      }
     }
   },
   argTypes: {

package/lib/components/DataTable/DataTable.stories.js

@@ -41,11 +41,9 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DataTableReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: _objectSpread({
     density: {
@@ -157,7 +155,7 @@ var getCellProps = function getCellProps(columnKey, align) {
     align: align
   };
 };
-export var Default = function Default(args) {
+export var Default = function Default() {
   var date = '2023-05-03';
   var time = '07:16:30 pm UTC';
   var timestampCell = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, date), ___EmotionJSX(Box, null, time));
@@ -237,10 +235,11 @@ export var Default = function Default(args) {
     userIdentity: 'Vincent Diep',
     menu: ___EmotionJSX(DataTableMenu, null)
   }];
-  return ___EmotionJSX(DataTable, _extends({}, args, {
+  return ___EmotionJSX(DataTable, {
     "aria-label": "Static table",
-    height: "100%"
-  }), ___EmotionJSX(DataTableHeader, {
+    height: "100%",
+    density: "spacious"
+  }, ___EmotionJSX(DataTableHeader, {
     columns: columns
   }, function (column) {
     return ___EmotionJSX(DataTableColumn, _extends({}, getCellProps(column.key, false), getHeaderProps(), {
@@ -267,7 +266,7 @@ Default.parameters = {
     }
   }
 };
-export var OnyxDefault = function OnyxDefault(args) {
+export var OnyxDefault = function OnyxDefault() {
   var date = '2023-05-03';
   var time = '07:16:30 pm UTC';
   var timestampCell = ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, null, date), ___EmotionJSX(Box, null, time));
@@ -346,11 +345,11 @@ export var OnyxDefault = function OnyxDefault(args) {
     userIdentity: 'Vincent Diep',
     menu: ___EmotionJSX(DataTableMenu, null)
   }];
-  return ___EmotionJSX(DataTable, _extends({}, args, {
+  return ___EmotionJSX(DataTable, {
     "aria-label": "Onyx table",
     height: "100%",
     scale: "xl"
-  }), ___EmotionJSX(DataTableHeader, {
+  }, ___EmotionJSX(DataTableHeader, {
     columns: columns
   }, function (column) {
     return ___EmotionJSX(DataTableColumn, {

package/lib/components/DatePicker/DatePicker.stories.js

@@ -27,12 +27,10 @@ export default {
   component: DatePicker,
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DatePickerReadme, null), ___EmotionJSX(DocsLayout, null));
-      }
+      },
+      codesandbox: false
     },
     a11y: {
       config: {
@@ -105,7 +103,7 @@ export default {
     isReadOnly: false,
     isRequired: false,
     label: 'Example Label',
-    onChange: null
+    onChange: function onChange() {}
   }
 };
 export var Default = function Default(args) {

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -31,9 +31,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EnvironmentBreadcrumbReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['EnvironmentBreadcrumb', 'Badge', 'Box', 'Item', 'Section', 'Text']
       }
     }
   }
@@ -262,10 +264,13 @@ export var WithSections = function WithSections() {
     });
   });
 };
-export var OrgLevel = function OrgLevel() {
-  return ___EmotionJSX(EnvironmentBreadcrumb, {
+WithSections.parameters = {
+  codesandbox: false
+};
+export var OrgLevel = function OrgLevel(args) {
+  return ___EmotionJSX(EnvironmentBreadcrumb, _extends({
     name: "Organization"
-  });
+  }, args));
 };
 export var DefaultOpen = function DefaultOpen() {
   var _useState9 = useState(defaultEnvironments[0]),
@@ -312,6 +317,9 @@ export var DefaultOpen = function DefaultOpen() {
     }) : null);
   });
 };
+DefaultOpen.parameters = {
+  codesandbox: false
+};
 export var ControlledMenu = function ControlledMenu() {
   var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
@@ -361,4 +369,7 @@ export var ControlledMenu = function ControlledMenu() {
       align: "right"
     }) : null);
   });
+};
+ControlledMenu.parameters = {
+  codesandbox: false
 };

package/lib/components/FieldHelperText/FieldHelperText.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; }
@@ -21,18 +22,18 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(FieldHelperText, args, "Look at me!");
 };
-export var Error = function Error() {
-  return ___EmotionJSX(FieldHelperText, {
+export var Error = function Error(args) {
+  return ___EmotionJSX(FieldHelperText, _extends({}, args, {
     status: "error"
-  }, "Look at me!");
+  }), "Look at me!");
 };
-export var Success = function Success() {
-  return ___EmotionJSX(FieldHelperText, {
+export var Success = function Success(args) {
+  return ___EmotionJSX(FieldHelperText, _extends({}, args, {
     status: "success"
-  }, "Look at me!");
+  }), "Look at me!");
 };
-export var Warning = function Warning() {
-  return ___EmotionJSX(FieldHelperText, {
+export var Warning = function Warning(args) {
+  return ___EmotionJSX(FieldHelperText, _extends({}, args, {
     status: "warning"
-  }, "Look at me!");
+  }), "Look at me!");
 };

package/lib/components/FileInputField/FileInputField.stories.js

@@ -29,9 +29,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(FileInputFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -94,14 +91,14 @@ export var Default = function Default(args) {
     sx: fitContentWidthSx
   }, args));
 };
-export var CustomButtonText = function CustomButtonText() {
-  return ___EmotionJSX(FileInputField, {
+export var CustomButtonText = function CustomButtonText(args) {
+  return ___EmotionJSX(FileInputField, _extends({}, args, {
     defaultButtonText: "Original Button Name",
     label: "Custom Button Text",
     sx: fitContentWidthSx
-  });
+  }));
 };
-export var ControlledState = function ControlledState() {
+export var ControlledState = function ControlledState(args) {
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     userFiles = _useState2[0],
@@ -130,7 +127,7 @@ export var ControlledState = function ControlledState() {
     setUserFiles([]);
     setError(null);
   };
-  return ___EmotionJSX(FileInputField, {
+  return ___EmotionJSX(FileInputField, _extends({}, args, {
     label: "Controlled State With limit on file size upload below 2 mb",
     onFileSelect: handleFileSelect,
     onRemove: handleFileRemove,
@@ -139,7 +136,7 @@ export var ControlledState = function ControlledState() {
     status: error && statuses.ERROR,
     helperText: error,
     isMultiple: true
-  });
+  }));
 };
 export var DefaultFileListUncontrolled = function DefaultFileListUncontrolled() {
   return ___EmotionJSX(FileInputField, {
@@ -161,8 +158,8 @@ export var DefaultFileListUncontrolled = function DefaultFileListUncontrolled()
     sx: fitContentWidthSx
   });
 };
-export var ErrorStatusSingleFile = function ErrorStatusSingleFile() {
-  return ___EmotionJSX(FileInputField, {
+export var ErrorStatusSingleFile = function ErrorStatusSingleFile(args) {
+  return ___EmotionJSX(FileInputField, _extends({}, args, {
     defaultFileList: [{
       id: 'test-id3',
       name: 'PingId Desktop (Windows)',
@@ -173,10 +170,10 @@ export var ErrorStatusSingleFile = function ErrorStatusSingleFile() {
     sx: fitContentWidthSx,
     helperText: "There is an error",
     status: statuses.ERROR
-  });
+  }));
 };
-export var ErrorWithMultipleFiles = function ErrorWithMultipleFiles() {
-  return ___EmotionJSX(FileInputField, {
+export var ErrorWithMultipleFiles = function ErrorWithMultipleFiles(args) {
+  return ___EmotionJSX(FileInputField, _extends({}, args, {
     defaultFileList: [{
       id: 'test-id3',
       name: 'PingId Desktop (Windows)',
@@ -191,9 +188,9 @@ export var ErrorWithMultipleFiles = function ErrorWithMultipleFiles() {
     sx: fitContentWidthSx,
     helperText: "There is an error but helperText text will be default since no status passed",
     isMultiple: true
-  });
+  }));
 };
-export var WithCustomWidth = function WithCustomWidth() {
+export var WithCustomWidth = function WithCustomWidth(args) {
   var textSx = {
     textOverflow: 'ellipsis',
     overflow: 'hidden',
@@ -201,7 +198,7 @@ export var WithCustomWidth = function WithCustomWidth() {
   };
   return ___EmotionJSX(Box, {
     width: 200
-  }, ___EmotionJSX(FileInputField, {
+  }, ___EmotionJSX(FileInputField, _extends({}, args, {
     defaultButtonText: "Long Long Button Text With A Lot of Words In It",
     defaultFileList: [{
       id: 'test-id1',
@@ -213,7 +210,7 @@ export var WithCustomWidth = function WithCustomWidth() {
       sx: textSx
     },
     isMultiple: true
-  }));
+  })));
 };
 export var WithFileTypePdfAndImage = function WithFileTypePdfAndImage() {
   var fileTypes = ['application/pdf', 'image/*'];

package/lib/components/Footer/Footer.stories.js

@@ -20,7 +20,8 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(FooterReadme, null), ___EmotionJSX(DocsLayout, null));
       }
-    }
+    },
+    codesandbox: false
   }
 };
 var legalLinks = [{

package/lib/components/Grid/Grid.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 { Box, Grid, Text } from '../../index';
@@ -11,16 +12,40 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(GridReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Grid', 'Text']
+      }
+    }
+  },
+  argTypes: {
+    repeat: {
+      options: ['fit', 'fill'],
+      control: {
+        type: 'select'
+      }
+    },
+    gap: {
+      control: {
+        type: 'number'
+      }
+    },
+    width: {
+      control: false
+    },
+    columns: {
+      control: false
     }
   }
 };
-export var Default = function Default() {
+export var Default = function Default(args) {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
     mb: "sm",
     fontStyle: "italic"
-  }, "Minimum width of child elements at responsive breakpoints"), ___EmotionJSX(Grid, {
+  }, "Minimum width of child elements at responsive breakpoints"), ___EmotionJSX(Grid, _extends({
     width: [128, null, 192]
-  }, ___EmotionJSX(Box, {
+  }, args), ___EmotionJSX(Box, {
     bg: "accent.90"
   }, "Box"), ___EmotionJSX(Box, {
     bg: "neutral.80"
@@ -32,10 +57,10 @@ export var Default = function Default() {
     mt: "xl",
     mb: "sm",
     fontStyle: "italic"
-  }, "Defined number of equally-sized columns at responsive breakpoints"), ___EmotionJSX(Grid, {
+  }, "Defined number of equally-sized columns at responsive breakpoints"), ___EmotionJSX(Grid, _extends({
     gap: 2,
     columns: [2, null, 4]
-  }, ___EmotionJSX(Box, {
+  }, args), ___EmotionJSX(Box, {
     bg: "accent.90"
   }, "Box"), ___EmotionJSX(Box, {
     bg: "neutral.80"
@@ -47,10 +72,10 @@ export var Default = function Default() {
     mt: "xl",
     mb: "sm",
     fontStyle: "italic"
-  }, "Columns using grid syntax sizing at responsive breakpoints"), ___EmotionJSX(Grid, {
+  }, "Columns using grid syntax sizing at responsive breakpoints"), ___EmotionJSX(Grid, _extends({
     gap: 2,
     columns: [2, '1fr 2fr']
-  }, ___EmotionJSX(Box, {
+  }, args), ___EmotionJSX(Box, {
     bg: "accent.90"
   }, "Box"), ___EmotionJSX(Box, {
     bg: "neutral.80"

package/lib/components/HelpHint/HelpHint.stories.js

@@ -15,6 +15,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(HelpHintReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'HelpHint', 'Link', 'Text']
+      }
     }
   },
   argTypes: {
@@ -40,10 +45,10 @@ Default.parameters = {
     url: FIGMA_LINKS.helpHint["default"]
   }
 };
-export var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
+export var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps(args) {
   return ___EmotionJSX(Box, {
     p: 100
-  }, ___EmotionJSX(HelpHint, {
+  }, ___EmotionJSX(HelpHint, _extends({}, args, {
     popoverProps: {
       'data-testid': 'popover-container'
     },
@@ -51,12 +56,12 @@ export var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProp
       'aria-label': 'Help hint'
     },
     direction: "bottom"
-  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
+  }), "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
 };
-export var ContentWithLink = function ContentWithLink() {
+export var ContentWithLink = function ContentWithLink(args) {
   return ___EmotionJSX(Box, {
     p: 100
-  }, ___EmotionJSX(HelpHint, null, ___EmotionJSX(Text, {
+  }, ___EmotionJSX(HelpHint, args, ___EmotionJSX(Text, {
     variant: "popover"
   }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"), ___EmotionJSX(Link, {
     variant: "popover",
@@ -77,10 +82,10 @@ export var WithDelay = function WithDelay(args) {
     closeDelay: 5000
   })));
 };
-export var Customization = function Customization() {
+export var Customization = function Customization(args) {
   return ___EmotionJSX(Box, {
     p: 100
-  }, ___EmotionJSX(HelpHint, {
+  }, ___EmotionJSX(HelpHint, _extends({}, args, {
     direction: "bottom"
-  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
+  }), "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
 };

package/lib/components/HelpHint/HelpHint.styles.js

@@ -49,7 +49,8 @@ export var hintButton = {
 var popoverContainer = _objectSpread(_objectSpread({}, container), {}, {
   p: '10px',
   fontSize: 'sm',
-  fontWeight: 1
+  fontWeight: 1,
+  fontFamily: 'standard'
 });
 export default {
   hintButton: hintButton,

package/lib/components/Icon/Icon.stories.js

@@ -35,9 +35,15 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/mdi-react/AccountGroupIcon': 'AccountGroupIcon',
+        '@pingux/mdi-react/AccountIcon': 'AccountIcon',
+        '@pingux/mdi-react/LockIcon': 'LockIcon',
+        '@pingux/mdi-react/SearchIcon': 'SearchIcon',
+        '@pingux/mdi-react/TagIcon': 'TagIcon'
       }
     }
   },
@@ -79,7 +85,7 @@ Default.parameters = {
     url: FIGMA_LINKS.icon["default"]
   }
 };
-export var SVGIcons = function SVGIcons() {
+export var SVGIcons = function SVGIcons(args) {
   // SVGR can used to convert .svg files to components instead of doing this manually
   var SVGComponent = function SVGComponent(props) {
     var id = uuid();
@@ -95,11 +101,11 @@ export var SVGIcons = function SVGIcons() {
       d: "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
     }));
   };
-  return ___EmotionJSX(Icon, {
+  return ___EmotionJSX(Icon, _extends({}, args, {
     icon: SVGComponent,
     color: "active",
     size: "sm"
-  });
+  }));
 };
 var rowHeadings = ['SVG Size', 'Code Example', 'Icon Example'];
 export var Sizes = function Sizes() {
@@ -160,6 +166,9 @@ export var Sizes = function Sizes() {
     }
   })))));
 };
+Sizes.parameters = {
+  codesandbox: false
+};
 export var CommonlyUsed = function CommonlyUsed() {
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     isRow: true,
@@ -227,4 +236,7 @@ export var CommonlyUsed = function CommonlyUsed() {
   }), ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, "import TagIcon from '@pingux/mdi-react/TagIcon'; ")));
+};
+CommonlyUsed.parameters = {
+  codesandbox: false
 };

package/lib/components/IconBadge/IconBadge.stories.js

@@ -16,9 +16,13 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconBadgeReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/mdi-react/AccountGroupIcon': 'GroupIcon',
+        '@pingux/mdi-react/ArrowTopRightThickIcon': 'ArrowIcon',
+        '@pingux/astro': ['Box', 'Icon', 'IconBadge']
       }
     }
   }

package/lib/components/IconButton/IconButton.stories.js

@@ -20,9 +20,16 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButtonReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Icon', 'IconButton', 'Text'],
+        '@pingux/mdi-react/CreateIcon': 'CreateIcon',
+        '@pingux/mdi-react/DeleteIcon': 'DeleteIcon',
+        '@pingux/mdi-react/DotsVerticalIcon': 'DotsVerticalIcon',
+        '@pingux/mdi-react/PencilIcon': 'PencilIcon',
+        '@pingux/mdi-react/PlusIcon': 'PlusIcon'
       }
     }
   },
@@ -63,11 +70,11 @@ Inverted.parameters = {
     url: FIGMA_LINKS.iconButton.inverted
   }
 };
-export var WithTooltip = function WithTooltip() {
-  return ___EmotionJSX(IconButton, {
+export var WithTooltip = function WithTooltip(args) {
+  return ___EmotionJSX(IconButton, _extends({
     "aria-label": "icon button with tooltip",
     title: "Edit"
-  }, ___EmotionJSX(Icon, {
+  }, args), ___EmotionJSX(Icon, {
     icon: CreateIcon,
     size: "sm",
     title: {
@@ -206,7 +213,8 @@ Sizes.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.iconButton.sizes
-  }
+  },
+  codesandbox: false
 };
 export var CommonlyUsed = function CommonlyUsed() {
   return (
@@ -534,5 +542,6 @@ CommonlyUsed.parameters = {
   design: {
     type: 'figma',
     url: FIGMA_LINKS.iconButton.commonlyUsed
-  }
+  },
+  codesandbox: false
 };

package/lib/components/IconButtonToggle/IconButtonToggle.stories.js

@@ -15,6 +15,13 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButtonToggleReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['IconButtonToggle'],
+        '@pingux/mdi-react/EyeOffOutlineIcon': 'EyeOffIcon',
+        '@pingux/mdi-react/EyeOutlineIcon': 'EyeIcon'
+      }
     }
   }
 };

package/lib/components/IconWrapper/IconWrapper.stories.js

@@ -23,9 +23,12 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconWrapperReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['IconWrapper'],
+        '@pingux/mdi-react/DeleteIcon': 'DeleteIcon'
       }
     }
   },