@pingux/astro 2.128.0 → 2.129.0-alpha.0

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

@@ -133,9 +133,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_SelectField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['OverlayProvider', 'Icon', 'Item', 'Section', 'SelectField']
       }
     }
   },
@@ -231,11 +233,11 @@ var WithCustomHeight = function WithCustomHeight(args) {
   }));
 };
 exports.WithCustomHeight = WithCustomHeight;
-var FloatLabel = function FloatLabel() {
-  return (0, _react2.jsx)(_index.SelectField, {
+var FloatLabel = function FloatLabel(args) {
+  return (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
     label: "What's your favorite color?",
     labelMode: "float"
-  }, (0, _react2.jsx)(_index.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     key: "red"
   }, "Red"), (0, _react2.jsx)(_index.Item, {
     key: "blue"
@@ -244,6 +246,16 @@ var FloatLabel = function FloatLabel() {
   }, "Yellow"));
 };
 exports.FloatLabel = FloatLabel;
+FloatLabel.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var Controlled = function Controlled() {
   var _useState = (0, _react.useState)('yellow'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -265,10 +277,10 @@ var Controlled = function Controlled() {
   }, "Yellow"));
 };
 exports.Controlled = Controlled;
-var WithNoneOption = function WithNoneOption() {
-  return (0, _react2.jsx)(_index.SelectField, {
+var WithNoneOption = function WithNoneOption(args) {
+  return (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Section, null, (0, _react2.jsx)(_index.Item, {
+  }), (0, _react2.jsx)(_index.Section, null, (0, _react2.jsx)(_index.Item, {
     key: "none"
   }, "None")), (0, _react2.jsx)(_index.Section, null, (0, _react2.jsx)(_index.Item, {
     key: "red"
@@ -308,11 +320,11 @@ var WithSlots = function WithSlots() {
   }, "Custom Range"));
 };
 exports.WithSlots = WithSlots;
-var DisabledField = function DisabledField() {
-  return (0, _react2.jsx)(_index.SelectField, {
+var DisabledField = function DisabledField(args) {
+  return (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
     label: "What's your favorite color?",
     isDisabled: true
-  }, (0, _react2.jsx)(_index.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     key: "red"
   }, "Red"), (0, _react2.jsx)(_index.Item, {
     key: "blue"
@@ -321,11 +333,11 @@ var DisabledField = function DisabledField() {
   }, "Yellow"));
 };
 exports.DisabledField = DisabledField;
-var DisabledOptions = function DisabledOptions() {
-  return (0, _react2.jsx)(_index.SelectField, {
+var DisabledOptions = function DisabledOptions(args) {
+  return (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
     label: "What's your favorite color?",
     disabledKeys: ['blue']
-  }, (0, _react2.jsx)(_index.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     key: "red"
   }, "Red"), (0, _react2.jsx)(_index.Item, {
     key: "blue"
@@ -334,19 +346,19 @@ var DisabledOptions = function DisabledOptions() {
   }, "Yellow"));
 };
 exports.DisabledOptions = DisabledOptions;
-var NoOptionsAvailable = function NoOptionsAvailable() {
-  return (0, _react2.jsx)(_index.SelectField, {
+var NoOptionsAvailable = function NoOptionsAvailable(args) {
+  return (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
     label: "Select an option...",
     placeholder: "No options available"
-  });
+  }));
 };
 exports.NoOptionsAvailable = NoOptionsAvailable;
-var HelperText = function HelperText() {
-  return (0, _react2.jsx)(_index.SelectField, {
+var HelperText = function HelperText(args) {
+  return (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
     status: "error",
     helperText: "Here is some helpful text...",
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     key: "red"
   }, "Red"), (0, _react2.jsx)(_index.Item, {
     key: "blue"
@@ -355,6 +367,16 @@ var HelperText = function HelperText() {
   }, "Yellow"));
 };
 exports.HelperText = HelperText;
+HelperText.parameters = {
+  a11y: {
+    config: {
+      rules: [{
+        id: 'color-contrast',
+        enabled: false
+      }]
+    }
+  }
+};
 var options = (0, _map["default"])(_context = (0, _fill["default"])(_context2 = new Array(400)).call(_context2, {
   key: 'string',
   name: 'string'
@@ -433,11 +455,11 @@ var AsyncLoading = function AsyncLoading() {
   }));
 };
 exports.AsyncLoading = AsyncLoading;
-var WithoutStatusIndicator = function WithoutStatusIndicator() {
-  return (0, _react2.jsx)(_index.SelectField, {
+var WithoutStatusIndicator = function WithoutStatusIndicator(args) {
+  return (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
     label: "What's your favorite color?",
     hasNoStatusIndicator: true
-  }, (0, _react2.jsx)(_index.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     key: "none"
   }, "None"), (0, _react2.jsx)(_index.Item, {
     key: "red"
@@ -448,12 +470,12 @@ var WithoutStatusIndicator = function WithoutStatusIndicator() {
   }, "Yellow"));
 };
 exports.WithoutStatusIndicator = WithoutStatusIndicator;
-var WithHelpHint = function WithHelpHint() {
-  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, {
+var WithHelpHint = function WithHelpHint(args) {
+  return (0, _react2.jsx)(_reactAria.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, args, {
     width: "100%",
     hintText: "Example Hint",
     label: "What's your favorite color?"
-  }, (0, _react2.jsx)(_index.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     key: "red"
   }, "Red"), (0, _react2.jsx)(_index.Item, {
     key: "blue"

package/lib/cjs/components/Separator/Separator.stories.d.ts

@@ -4,4 +4,6 @@ import { SeparatorProps } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<SeparatorProps>;
-export declare const verticalSeparator: () => React.JSX.Element;
+export declare const verticalSeparator: ({ ...args }: {
+    [x: string]: any;
+}) => React.JSX.Element;

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

@@ -45,21 +45,22 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.separator["default"]
   }
 };
-var verticalSeparator = function verticalSeparator() {
+var verticalSeparator = function verticalSeparator(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
   return (0, _react2.jsx)(_index.Box, {
     height: "50px",
     flexDirection: "row",
     alignItems: "center"
-  }, "Lorem ipsum", (0, _react2.jsx)(_index.Separator, {
+  }, "Lorem ipsum", (0, _react2.jsx)(_index.Separator, (0, _extends2["default"])({}, args, {
     orientation: "vertical",
     sx: {
       mx: '15px !important'
     }
-  }), "Lorem ipsum", (0, _react2.jsx)(_index.Separator, {
+  })), "Lorem ipsum", (0, _react2.jsx)(_index.Separator, (0, _extends2["default"])({}, args, {
     orientation: "vertical",
     sx: {
       mx: '15px !important'
     }
-  }), "Lorem ipsum");
+  })), "Lorem ipsum");
 };
 exports.verticalSeparator = verticalSeparator;

package/lib/cjs/components/Skeleton/Skeleton.stories.d.ts

@@ -4,4 +4,4 @@ import { SkeletonProps } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const Default: StoryFn<SkeletonProps>;
-export declare const inferringDimensions: () => React.JSX.Element;
+export declare const inferringDimensions: (args: any) => React.JSX.Element;

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

@@ -24,6 +24,11 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Skeleton["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Avatar', 'Box', 'Skeleton', 'Text']
+      }
     }
   },
   argTypes: {
@@ -55,8 +60,8 @@ var Default = function Default(_ref) {
   }, args)));
 };
 exports.Default = Default;
-var inferringDimensions = function inferringDimensions() {
-  var isLoaded = true;
+var inferringDimensions = function inferringDimensions(args) {
+  var isLoading = true;
   return (0, _react2.jsx)(_index.Box, {
     width: "200px"
   }, (0, _react2.jsx)(_index.Box, {
@@ -64,21 +69,21 @@ var inferringDimensions = function inferringDimensions() {
     isRow: true,
     alignItems: "center",
     gap: "md"
-  }, isLoaded && (0, _react2.jsx)(_index.Skeleton, {
+  }, isLoading && (0, _react2.jsx)(_index.Skeleton, (0, _extends2["default"])({}, args, {
     variant: "circular"
-  }, (0, _react2.jsx)(_index.Avatar, {
+  }), (0, _react2.jsx)(_index.Avatar, {
     src: _images.pingImg
   })), (0, _react2.jsx)(_index.Box, {
     flex: "1 1 0"
-  }, (0, _react2.jsx)(_index.Skeleton, {
+  }, (0, _react2.jsx)(_index.Skeleton, (0, _extends2["default"])({}, args, {
     variant: "text"
-  }, isLoaded && (0, _react2.jsx)(_index.Text, {
+  }), isLoading && (0, _react2.jsx)(_index.Text, {
     variant: "h1"
   }, ".")))), (0, _react2.jsx)(_index.Box, {
     mb: "sm"
-  }, (0, _react2.jsx)(_index.Skeleton, {
+  }, (0, _react2.jsx)(_index.Skeleton, (0, _extends2["default"])({}, args, {
     variant: "rounded"
-  }, isLoaded && (0, _react2.jsx)(_index.Box, {
+  }), isLoading && (0, _react2.jsx)(_index.Box, {
     height: 100
   }))));
 };

package/lib/cjs/components/SliderField/SliderField.stories.d.ts

@@ -7,7 +7,7 @@ export declare const Default: ({ ...args }: {
 export declare const Controlled: ({ ...args }: {
     [x: string]: any;
 }) => React.JSX.Element;
-export declare const Vertical: () => React.JSX.Element;
-export declare const MultiThumb: () => React.JSX.Element;
+export declare const Vertical: (args: any) => React.JSX.Element;
+export declare const MultiThumb: (args: any) => React.JSX.Element;
 export declare const ControlledMultiThumb: () => React.JSX.Element;
 export declare const CustomProps: () => React.JSX.Element;

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

@@ -99,22 +99,22 @@ var Controlled = function Controlled(_ref2) {
   }));
 };
 exports.Controlled = Controlled;
-var Vertical = function Vertical() {
-  return (0, _react2.jsx)(_index.SliderField, {
+var Vertical = function Vertical(args) {
+  return (0, _react2.jsx)(_index.SliderField, (0, _extends2["default"])({}, args, {
     label: loremText,
     orientation: "vertical",
     size: "150px"
-  });
+  }));
 };
 exports.Vertical = Vertical;
-var MultiThumb = function MultiThumb() {
-  return (0, _react2.jsx)(_index.SliderField, {
+var MultiThumb = function MultiThumb(args) {
+  return (0, _react2.jsx)(_index.SliderField, (0, _extends2["default"])({}, args, {
     label: loremText,
     isMultiThumb: true,
     defaultValue: [100, 180],
     maxValue: 540,
     minValue: 40
-  });
+  }));
 };
 exports.MultiThumb = MultiThumb;
 var ControlledMultiThumb = function ControlledMultiThumb() {

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

@@ -12,7 +12,6 @@ exports["default"] = exports.WithCustomTooltip = exports.Panel = exports.Disable
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactStately = require("react-stately");
 var _CreationOutlineIcon = _interopRequireDefault(require("@pingux/mdi-react/CreationOutlineIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
@@ -64,9 +63,12 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Stepper["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'OverlayPanel', 'OverlayProvider', 'PanelHeader', 'PanelHeaderCloseButton', 'Stepper', 'Text', 'Item'],
+        '@pingux/mdi-react/CreationOutlineIcon': 'CreationOutlineIcon'
       }
     }
   }
@@ -105,7 +107,7 @@ var sx = {
   }
 };
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Stepper, args, (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _react2.jsx)(_index.Stepper, args, (0, _react2.jsx)(_index.Item, {
     key: "step1",
     textValue: "Duis Aute"
   }, (0, _react2.jsx)(_index.Box, {
@@ -115,7 +117,7 @@ var Default = function Default(args) {
     fontWeight: "3"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
     fontSize: "md"
-  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
@@ -125,7 +127,7 @@ var Default = function Default(args) {
     fontWeight: "3"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
     fontSize: "md"
-  }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
@@ -141,7 +143,7 @@ exports.Default = Default;
 var DisabledToolTips = function DisabledToolTips(args) {
   return (0, _react2.jsx)(_index.Stepper, (0, _extends2["default"])({}, args, {
     mode: "tooltipIsDisabled"
-  }), (0, _react2.jsx)(_reactStately.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     key: "step1",
     textValue: "Duis Aute"
   }, (0, _react2.jsx)(_index.Box, {
@@ -151,7 +153,7 @@ var DisabledToolTips = function DisabledToolTips(args) {
     fontWeight: "3"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
     fontSize: "md"
-  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
@@ -161,7 +163,7 @@ var DisabledToolTips = function DisabledToolTips(args) {
     fontWeight: "3"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
     fontSize: "md"
-  }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
@@ -187,7 +189,7 @@ var WithCustomTooltip = function WithCustomTooltip(args) {
       direction: 'left',
       offset: 15
     }
-  }), (0, _react2.jsx)(_reactStately.Item, {
+  }), (0, _react2.jsx)(_index.Item, {
     key: "step1",
     textValue: "Duis Aute"
   }, (0, _react2.jsx)(_index.Box, {
@@ -197,7 +199,7 @@ var WithCustomTooltip = function WithCustomTooltip(args) {
     fontWeight: "3"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
     fontSize: "md"
-  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
@@ -207,7 +209,7 @@ var WithCustomTooltip = function WithCustomTooltip(args) {
     fontWeight: "3"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
     fontSize: "md"
-  }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_reactStately.Item, {
+  }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
@@ -230,7 +232,7 @@ var ControlledStepper = function ControlledStepper() {
     activeStep: activeStep,
     onStepChange: setActiveStep
   }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, {
+    return (0, _react2.jsx)(_index.Item, {
       key: item.name,
       textValue: item.title
     }, (0, _react2.jsx)(_index.Box, {
@@ -244,6 +246,9 @@ var ControlledStepper = function ControlledStepper() {
   });
 };
 exports.ControlledStepper = ControlledStepper;
+ControlledStepper.parameters = {
+  codesandbox: false
+};
 var Panel = function Panel() {
   var _useState3 = (0, _react.useState)(1),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -283,7 +288,7 @@ var Panel = function Panel() {
       onStepChange: setActiveStep,
       sx: sx.stepperContainer
     }, function (item) {
-      return (0, _react2.jsx)(_reactStately.Item, {
+      return (0, _react2.jsx)(_index.Item, {
         key: item.name,
         textValue: item.title
       }, (0, _react2.jsx)(_index.Box, {
@@ -297,4 +302,7 @@ var Panel = function Panel() {
     })))
   );
 };
-exports.Panel = Panel;
+exports.Panel = Panel;
+Panel.parameters = {
+  codesandbox: false
+};

package/lib/cjs/components/SwitchField/SwitchField.stories.js

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.WithTooltip = exports.Required = exports.NoVisibleLabel = exports.Disabled = exports.DefaultSelected = exports.Default = exports.Controlled = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -38,9 +39,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_SwitchField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -67,35 +65,35 @@ var Controlled = function Controlled() {
   });
 };
 exports.Controlled = Controlled;
-var DefaultSelected = function DefaultSelected() {
-  return (0, _react2.jsx)(_index.SwitchField, {
+var DefaultSelected = function DefaultSelected(args) {
+  return (0, _react2.jsx)(_index.SwitchField, (0, _extends2["default"])({}, args, {
     isDefaultSelected: true,
     label: "Default selected",
     value: "my-switch"
-  });
+  }));
 };
 exports.DefaultSelected = DefaultSelected;
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.SwitchField, {
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.SwitchField, (0, _extends2["default"])({}, args, {
     isDisabled: true,
     label: "Disabled",
     value: "my-switch"
-  });
+  }));
 };
 exports.Disabled = Disabled;
-var NoVisibleLabel = function NoVisibleLabel() {
-  return (0, _react2.jsx)(_index.SwitchField, {
+var NoVisibleLabel = function NoVisibleLabel(args) {
+  return (0, _react2.jsx)(_index.SwitchField, (0, _extends2["default"])({}, args, {
     "aria-label": "my-label",
     value: "my-switch"
-  });
+  }));
 };
 exports.NoVisibleLabel = NoVisibleLabel;
-var Required = function Required() {
-  return (0, _react2.jsx)(_index.SwitchField, {
+var Required = function Required(args) {
+  return (0, _react2.jsx)(_index.SwitchField, (0, _extends2["default"])({}, args, {
     isRequired: true,
     label: "Required",
     value: "my-switch"
-  });
+  }));
 };
 exports.Required = Required;
 var WithTooltip = function WithTooltip() {

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

@@ -21,7 +21,18 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Table["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Table', 'TableBody', 'TableCaption', 'TableCell', 'TableHead', 'TableRow', 'Text']
+      }
+    },
+    controls: {
+      include: ['id']
     }
+  },
+  args: {
+    id: 'table'
   }
 };
 exports["default"] = _default;
@@ -43,8 +54,8 @@ var objects = [{
   additional_grant: '+25,000',
   total_grant: '75,000'
 }];
-var Default = function Default() {
-  return (0, _react2.jsx)(_index.Table, null, (0, _react2.jsx)(_index.TableCaption, null, (0, _react2.jsx)(_index.Text, {
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.Table, args, (0, _react2.jsx)(_index.TableCaption, null, (0, _react2.jsx)(_index.Text, {
     fontWeight: 3,
     fontSize: "lg"
   }, caption)), (0, _react2.jsx)(_index.TableHead, null, (0, _react2.jsx)(_index.TableRow, {

package/lib/cjs/components/Tabs/Tabs.stories.js

@@ -53,9 +53,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Tabs["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Badge', 'Box', 'Icon', 'Tab', 'Tabs', 'Text']
       }
     }
   }
@@ -101,6 +103,9 @@ var Controlled = function Controlled() {
   });
 };
 exports.Controlled = Controlled;
+Controlled.parameters = {
+  codesandbox: false
+};
 var Centered = function Centered() {
   return (0, _react2.jsx)(_index.Tabs, {
     tabListProps: {
@@ -115,6 +120,9 @@ var Centered = function Centered() {
   });
 };
 exports.Centered = Centered;
+Centered.parameters = {
+  codesandbox: false
+};
 var DisabledSingleTab = function DisabledSingleTab() {
   return (0, _react2.jsx)(_index.Tabs, {
     items: tabs,
@@ -127,6 +135,9 @@ var DisabledSingleTab = function DisabledSingleTab() {
   });
 };
 exports.DisabledSingleTab = DisabledSingleTab;
+DisabledSingleTab.parameters = {
+  codesandbox: false
+};
 var DisabledAllTabs = function DisabledAllTabs() {
   return (0, _react2.jsx)(_index.Tabs, {
     isDisabled: true,
@@ -139,6 +150,9 @@ var DisabledAllTabs = function DisabledAllTabs() {
   });
 };
 exports.DisabledAllTabs = DisabledAllTabs;
+DisabledAllTabs.parameters = {
+  codesandbox: false
+};
 var ContentSlots = function ContentSlots() {
   var beforeTabNode = (0, _react2.jsx)(_index.Icon, {
     icon: _LockIcon["default"],
@@ -185,6 +199,9 @@ var ContentSlots = function ContentSlots() {
   }, (0, _react2.jsx)(_index.Text, null, "Users Matched"))));
 };
 exports.ContentSlots = ContentSlots;
+ContentSlots.parameters = {
+  codesandbox: false
+};
 var WithList = function WithList() {
   var _context;
   var allTabs = (0, _concat["default"])(_context = []).call(_context, tabs, [{
@@ -214,6 +231,9 @@ var WithList = function WithList() {
   });
 };
 exports.WithList = WithList;
+WithList.parameters = {
+  codesandbox: false
+};
 var CustomTabLine = function CustomTabLine() {
   return (0, _react2.jsx)(_index.Tabs, {
     items: tabs
@@ -228,6 +248,9 @@ var CustomTabLine = function CustomTabLine() {
   });
 };
 exports.CustomTabLine = CustomTabLine;
+CustomTabLine.parameters = {
+  codesandbox: false
+};
 var CustomPanelProps = function CustomPanelProps() {
   return (0, _react2.jsx)(_index.Tabs, {
     tabPanelProps: {
@@ -243,4 +266,7 @@ var CustomPanelProps = function CustomPanelProps() {
     }, item.children);
   });
 };
-exports.CustomPanelProps = CustomPanelProps;
+exports.CustomPanelProps = CustomPanelProps;
+CustomPanelProps.parameters = {
+  codesandbox: false
+};

package/lib/cjs/components/Text/Text.stories.d.ts

@@ -1,6 +1,7 @@
 import { StoryFn } from '@storybook/react';
+import { TextProps } from '../../types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const Default: StoryFn;
+export declare const Default: StoryFn<TextProps>;
 export declare const CustomWidth: StoryFn;
 export declare const CustomStyle: StoryFn;