@pingux/astro 2.128.1-alpha.0 → 2.129.0-alpha.1

package/lib/components/ProgressBar/ProgressBar.stories.js

@@ -11,9 +11,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ProgressBarReadMe, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },

package/lib/components/RadioGroupField/RadioGroupField.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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 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; }
@@ -26,6 +27,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RadioGroupFieldReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RadioField', 'RadioGroupField']
+      }
     }
   },
   argTypes: _objectSpread(_objectSpread({
@@ -101,11 +107,11 @@ export var Controlled = function Controlled() {
     label: "C"
   }));
 };
-export var Required = function Required() {
-  return ___EmotionJSX(RadioGroupField, {
+export var Required = function Required(args) {
+  return ___EmotionJSX(RadioGroupField, _extends({}, args, {
     label: "Pick one",
     isRequired: true
-  }, ___EmotionJSX(RadioField, {
+  }), ___EmotionJSX(RadioField, {
     value: "A",
     label: "A"
   }), ___EmotionJSX(RadioField, {
@@ -116,10 +122,10 @@ export var Required = function Required() {
     label: "C"
   }));
 };
-export var CheckedContent = function CheckedContent() {
-  return ___EmotionJSX(RadioGroupField, {
+export var CheckedContent = function CheckedContent(args) {
+  return ___EmotionJSX(RadioGroupField, _extends({}, args, {
     label: "Pick one"
-  }, ___EmotionJSX(RadioField, {
+  }), ___EmotionJSX(RadioField, {
     value: "A",
     label: "A",
     checkedContent: "You chose A..."
@@ -133,12 +139,12 @@ export var CheckedContent = function CheckedContent() {
     checkedContent: "You chose C..."
   }));
 };
-export var HelperText = function HelperText() {
-  return ___EmotionJSX(RadioGroupField, {
+export var HelperText = function HelperText(args) {
+  return ___EmotionJSX(RadioGroupField, _extends({}, args, {
     label: "Pick one",
     helperText: "Here is some helpful text...",
     status: "error"
-  }, ___EmotionJSX(RadioField, {
+  }), ___EmotionJSX(RadioField, {
     value: "A",
     label: "A"
   }), ___EmotionJSX(RadioField, {
@@ -161,11 +167,11 @@ HelperText.parameters = {
     }
   }
 };
-export var HorizontalOrientation = function HorizontalOrientation() {
-  return ___EmotionJSX(RadioGroupField, {
+export var HorizontalOrientation = function HorizontalOrientation(args) {
+  return ___EmotionJSX(RadioGroupField, _extends({}, args, {
     label: "Pick one",
     orientation: "horizontal"
-  }, ___EmotionJSX(RadioField, {
+  }), ___EmotionJSX(RadioField, {
     value: "A",
     label: "Option A"
   }), ___EmotionJSX(RadioField, {

package/lib/components/RangeCalendar/RangeCalendar.stories.js

@@ -26,9 +26,6 @@ export default {
     actions: {
       argTypesRegex: '^on.*'
     },
-    source: {
-      type: 'code'
-    },
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RangeCalendarReadme, null), ___EmotionJSX(DocsLayout, null));
@@ -45,14 +42,14 @@ export var Default = function Default(args) {
     "aria-label": "range-calendar"
   }));
 };
-export var DefaultValue = function DefaultValue() {
-  return ___EmotionJSX(RangeCalendar, {
+export var DefaultValue = function DefaultValue(args) {
+  return ___EmotionJSX(RangeCalendar, _extends({}, args, {
     "aria-label": "calendar-with-default-vaue",
     defaultValue: {
       start: '2030-01-15',
       end: '2030-01-22'
     }
-  });
+  }));
 };
 export var Disabled = function Disabled(args) {
   return ___EmotionJSX(RangeCalendar, _extends({}, args, {
@@ -76,25 +73,25 @@ export var UnavailableDates = function UnavailableDates() {
     isDateUnavailable: isDateUnavailable
   });
 };
-export var MinimumDate = function MinimumDate() {
-  return ___EmotionJSX(RangeCalendar, {
+export var MinimumDate = function MinimumDate(args) {
+  return ___EmotionJSX(RangeCalendar, _extends({}, args, {
     "aria-label": "range-calendar-component-min-date",
     minValue: "2030-01-15",
     defaultValue: {
       start: '2030-01-15',
       end: '2030-01-20'
     }
-  });
+  }));
 };
-export var MaximumDate = function MaximumDate() {
-  return ___EmotionJSX(RangeCalendar, {
+export var MaximumDate = function MaximumDate(args) {
+  return ___EmotionJSX(RangeCalendar, _extends({}, args, {
     "aria-label": "range-calendar-component-max-date",
     defaultValue: {
       start: '2030-01-12',
       end: '2030-01-15'
     },
     maxValue: "2030-01-17"
-  });
+  }));
 };
 export var Controlled = function Controlled(args) {
   var _useState = useState({

package/lib/components/RequirementsList/RequirementsList.stories.js

@@ -14,6 +14,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RequirementsListReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RequirementsList']
+      }
     }
   },
   argTypes: {

package/lib/components/RockerButtonGroup/RockerButtonGroup.stories.js

@@ -13,9 +13,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(RockerButtonGroupReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RockerButton', 'RockerButtonGroup']
       }
     }
   },
@@ -57,6 +59,9 @@ export var Uncontrolled = function Uncontrolled() {
     key: "maybe"
   }, "Maybe"));
 };
+Uncontrolled.parameters = {
+  codesandbox: false
+};
 export var Controlled = function Controlled() {
   var _useState = useState('and'),
     _useState2 = _slicedToArray(_useState, 2),
@@ -76,6 +81,9 @@ export var Controlled = function Controlled() {
     key: "maybe"
   }, "Maybe"));
 };
+Controlled.parameters = {
+  codesandbox: false
+};
 export var DisabledSingleButton = function DisabledSingleButton() {
   return ___EmotionJSX(RockerButtonGroup, {
     defaultSelectedKey: "or",
@@ -91,6 +99,9 @@ export var DisabledSingleButton = function DisabledSingleButton() {
     key: "maybe"
   }, "Maybe"));
 };
+DisabledSingleButton.parameters = {
+  codesandbox: false
+};
 export var customColors = function customColors() {
   return ___EmotionJSX(RockerButtonGroup, null, ___EmotionJSX(RockerButton, {
     name: "and",
@@ -111,4 +122,7 @@ export var customColors = function customColors() {
       bg: '#e30080 !important'
     }
   }, "Maybe"));
+};
+customColors.parameters = {
+  codesandbox: false
 };

package/lib/components/SearchField/SearchField.stories.js

@@ -31,9 +31,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SearchFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['SearchField', 'Button', 'Icon', 'Box', 'Text']
       }
     }
   },
@@ -114,15 +116,15 @@ export var CustomIcon = function CustomIcon() {
   });
 };
 
-export var NoClearButton = function NoClearButton() {
-  return ___EmotionJSX(SearchField, {
+export var NoClearButton = function NoClearButton(args) {
+  return ___EmotionJSX(SearchField, _extends({}, args, {
     hasNoClearButton: true,
     "aria-label": "Search Users",
     placeholder: "Search Users",
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-  });
+  }));
 };
 
 export var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {

package/lib/components/SelectField/SelectField.stories.js

@@ -122,9 +122,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SelectFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['OverlayProvider', 'Icon', 'Item', 'Section', 'SelectField']
       }
     }
   },
@@ -216,11 +218,11 @@ export var WithCustomHeight = function WithCustomHeight(args) {
     }, item.name);
   }));
 };
-export var FloatLabel = function FloatLabel() {
-  return ___EmotionJSX(SelectField, {
+export var FloatLabel = function FloatLabel(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?",
     labelMode: "float"
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
@@ -258,10 +260,10 @@ export var Controlled = function Controlled() {
     key: "yellow"
   }, "Yellow"));
 };
-export var WithNoneOption = function WithNoneOption() {
-  return ___EmotionJSX(SelectField, {
+export var WithNoneOption = function WithNoneOption(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?"
-  }, ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
     key: "none"
   }, "None")), ___EmotionJSX(Section, null, ___EmotionJSX(Item, {
     key: "red"
@@ -299,11 +301,11 @@ export var WithSlots = function WithSlots() {
     key: "customRange"
   }, "Custom Range"));
 };
-export var DisabledField = function DisabledField() {
-  return ___EmotionJSX(SelectField, {
+export var DisabledField = function DisabledField(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?",
     isDisabled: true
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
@@ -311,11 +313,11 @@ export var DisabledField = function DisabledField() {
     key: "yellow"
   }, "Yellow"));
 };
-export var DisabledOptions = function DisabledOptions() {
-  return ___EmotionJSX(SelectField, {
+export var DisabledOptions = function DisabledOptions(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?",
     disabledKeys: ['blue']
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
@@ -323,18 +325,18 @@ export var DisabledOptions = function DisabledOptions() {
     key: "yellow"
   }, "Yellow"));
 };
-export var NoOptionsAvailable = function NoOptionsAvailable() {
-  return ___EmotionJSX(SelectField, {
+export var NoOptionsAvailable = function NoOptionsAvailable(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "Select an option...",
     placeholder: "No options available"
-  });
+  }));
 };
-export var HelperText = function HelperText() {
-  return ___EmotionJSX(SelectField, {
+export var HelperText = function HelperText(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     status: "error",
     helperText: "Here is some helpful text...",
     label: "What's your favorite color?"
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"
@@ -428,11 +430,11 @@ export var AsyncLoading = function AsyncLoading() {
     }, item.name);
   }));
 };
-export var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return ___EmotionJSX(SelectField, {
+export var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return ___EmotionJSX(SelectField, _extends({}, args, {
     label: "What's your favorite color?",
     hasNoStatusIndicator: true
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "none"
   }, "None"), ___EmotionJSX(Item, {
     key: "red"
@@ -442,12 +444,12 @@ export var WithoutStatusIndicator = function WithoutStatusIndicator() {
     key: "yellow"
   }, "Yellow"));
 };
-export var WithHelpHint = function WithHelpHint() {
-  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, {
+export var WithHelpHint = function WithHelpHint(args) {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({}, args, {
     width: "100%",
     hintText: "Example Hint",
     label: "What's your favorite color?"
-  }, ___EmotionJSX(Item, {
+  }), ___EmotionJSX(Item, {
     key: "red"
   }, "Red"), ___EmotionJSX(Item, {
     key: "blue"

package/lib/components/Separator/Separator.stories.js

@@ -35,20 +35,21 @@ Default.parameters = {
     url: FIGMA_LINKS.separator["default"]
   }
 };
-export var verticalSeparator = function verticalSeparator() {
+export var verticalSeparator = function verticalSeparator(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return ___EmotionJSX(Box, {
     height: "50px",
     flexDirection: "row",
     alignItems: "center"
-  }, "Lorem ipsum", ___EmotionJSX(Separator, {
+  }, "Lorem ipsum", ___EmotionJSX(Separator, _extends({}, args, {
     orientation: "vertical",
     sx: {
       mx: '15px !important'
     }
-  }), "Lorem ipsum", ___EmotionJSX(Separator, {
+  })), "Lorem ipsum", ___EmotionJSX(Separator, _extends({}, args, {
     orientation: "vertical",
     sx: {
       mx: '15px !important'
     }
-  }), "Lorem ipsum");
+  })), "Lorem ipsum");
 };

package/lib/components/Skeleton/Skeleton.stories.js

@@ -16,6 +16,11 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SkeletonReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Avatar', 'Box', 'Skeleton', 'Text']
+      }
     }
   },
   argTypes: {
@@ -45,8 +50,8 @@ export var Default = function Default(_ref) {
     mt: "sm"
   }, args)));
 };
-export var inferringDimensions = function inferringDimensions() {
-  var isLoaded = true;
+export var inferringDimensions = function inferringDimensions(args) {
+  var isLoading = true;
   return ___EmotionJSX(Box, {
     width: "200px"
   }, ___EmotionJSX(Box, {
@@ -54,21 +59,21 @@ export var inferringDimensions = function inferringDimensions() {
     isRow: true,
     alignItems: "center",
     gap: "md"
-  }, isLoaded && ___EmotionJSX(Skeleton, {
+  }, isLoading && ___EmotionJSX(Skeleton, _extends({}, args, {
     variant: "circular"
-  }, ___EmotionJSX(Avatar, {
+  }), ___EmotionJSX(Avatar, {
     src: pingImg
   })), ___EmotionJSX(Box, {
     flex: "1 1 0"
-  }, ___EmotionJSX(Skeleton, {
+  }, ___EmotionJSX(Skeleton, _extends({}, args, {
     variant: "text"
-  }, isLoaded && ___EmotionJSX(Text, {
+  }), isLoading && ___EmotionJSX(Text, {
     variant: "h1"
   }, ".")))), ___EmotionJSX(Box, {
     mb: "sm"
-  }, ___EmotionJSX(Skeleton, {
+  }, ___EmotionJSX(Skeleton, _extends({}, args, {
     variant: "rounded"
-  }, isLoaded && ___EmotionJSX(Box, {
+  }), isLoading && ___EmotionJSX(Box, {
     height: 100
   }))));
 };

package/lib/components/SliderField/SliderField.stories.js

@@ -83,21 +83,21 @@ export var Controlled = function Controlled(_ref2) {
     label: loremText
   }));
 };
-export var Vertical = function Vertical() {
-  return ___EmotionJSX(SliderField, {
+export var Vertical = function Vertical(args) {
+  return ___EmotionJSX(SliderField, _extends({}, args, {
     label: loremText,
     orientation: "vertical",
     size: "150px"
-  });
+  }));
 };
-export var MultiThumb = function MultiThumb() {
-  return ___EmotionJSX(SliderField, {
+export var MultiThumb = function MultiThumb(args) {
+  return ___EmotionJSX(SliderField, _extends({}, args, {
     label: loremText,
     isMultiThumb: true,
     defaultValue: [100, 180],
     maxValue: 540,
     minValue: 40
-  });
+  }));
 };
 export var ControlledMultiThumb = function ControlledMultiThumb() {
   var _useState3 = useState([0, 50]),

package/lib/components/Stepper/Stepper.stories.js

@@ -1,12 +1,11 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useRef, useState } from 'react';
-import { Item } from 'react-stately';
 import CreationOutlineIcon from '@pingux/mdi-react/CreationOutlineIcon';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { useOverlayPanelState } from '../../hooks';
-import { Box, Button, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Stepper, Text } from '../../index';
+import { Box, Button, Item, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Stepper, Text } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
 import StepperReadme from './Stepper.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -51,9 +50,12 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(StepperReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'OverlayPanel', 'OverlayProvider', 'PanelHeader', 'PanelHeaderCloseButton', 'Stepper', 'Text', 'Item'],
+        '@pingux/mdi-react/CreationOutlineIcon': 'CreationOutlineIcon'
       }
     }
   }
@@ -226,6 +228,9 @@ export var ControlledStepper = function ControlledStepper() {
     }, item.children)));
   });
 };
+ControlledStepper.parameters = {
+  codesandbox: false
+};
 export var Panel = function Panel() {
   var _useState3 = useState(1),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -278,4 +283,7 @@ export var Panel = function Panel() {
       }, item.children)));
     })))
   );
+};
+Panel.parameters = {
+  codesandbox: false
 };

package/lib/components/SwitchField/SwitchField.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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 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; }
@@ -27,9 +28,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(SwitchFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -53,32 +51,32 @@ export var Controlled = function Controlled() {
     value: "my-switch"
   });
 };
-export var DefaultSelected = function DefaultSelected() {
-  return ___EmotionJSX(SwitchField, {
+export var DefaultSelected = function DefaultSelected(args) {
+  return ___EmotionJSX(SwitchField, _extends({}, args, {
     isDefaultSelected: true,
     label: "Default selected",
     value: "my-switch"
-  });
+  }));
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(SwitchField, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(SwitchField, _extends({}, args, {
     isDisabled: true,
     label: "Disabled",
     value: "my-switch"
-  });
+  }));
 };
-export var NoVisibleLabel = function NoVisibleLabel() {
-  return ___EmotionJSX(SwitchField, {
+export var NoVisibleLabel = function NoVisibleLabel(args) {
+  return ___EmotionJSX(SwitchField, _extends({}, args, {
     "aria-label": "my-label",
     value: "my-switch"
-  });
+  }));
 };
-export var Required = function Required() {
-  return ___EmotionJSX(SwitchField, {
+export var Required = function Required(args) {
+  return ___EmotionJSX(SwitchField, _extends({}, args, {
     isRequired: true,
     label: "Required",
     value: "my-switch"
-  });
+  }));
 };
 export var WithTooltip = function WithTooltip() {
   var tooltipTrigger = useRef(null);

package/lib/components/Table/Table.stories.js

@@ -13,7 +13,18 @@ export default {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TableReadme, null), ___EmotionJSX(DocsLayout, null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Table', 'TableBody', 'TableCaption', 'TableCell', 'TableHead', 'TableRow', 'Text']
+      }
+    },
+    controls: {
+      include: ['id']
     }
+  },
+  args: {
+    id: 'table'
   }
 };
 var caption = 'Lorem Ipsum';
@@ -34,8 +45,8 @@ var objects = [{
   additional_grant: '+25,000',
   total_grant: '75,000'
 }];
-export var Default = function Default() {
-  return ___EmotionJSX(Table, null, ___EmotionJSX(TableCaption, null, ___EmotionJSX(Text, {
+export var Default = function Default(args) {
+  return ___EmotionJSX(Table, args, ___EmotionJSX(TableCaption, null, ___EmotionJSX(Text, {
     fontWeight: 3,
     fontSize: "lg"
   }, caption)), ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {