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

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;

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

@@ -6,10 +6,12 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = exports.CustomWidth = exports.CustomStyle = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
 var _react = _interopRequireDefault(require("react"));
+var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _Text = _interopRequireDefault(require("./Text.mdx"));
@@ -17,36 +19,42 @@ var _react2 = require("@emotion/react");
 var _default = {
   title: 'Components/Text',
   component: _index.Text,
+  decorators: [_storybookAddonDesigns.withDesign],
   parameters: {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Text', 'Separator']
+      }
     }
   },
   argTypes: {
+    as: {
+      control: false
+    },
+    role: {
+      control: false
+    },
     variant: {
-      control: {
-        type: 'none'
-      },
+      control: false,
       description: 'Text variant.'
     },
     children: {
-      control: {
-        type: 'none'
-      },
+      control: false,
       description: 'Text value.'
     },
     color: {
       control: {
-        type: 'none'
+        type: 'text'
       },
       description: 'Text color.'
     },
     bg: {
-      control: {
-        type: 'none'
-      },
+      control: false,
       description: 'Background color.'
     }
   }
@@ -426,15 +434,18 @@ var Default = function Default() {
   }))));
 };
 exports.Default = Default;
-var CustomWidth = function CustomWidth() {
+Default.parameters = {
+  codesandbox: false
+};
+var CustomWidth = function CustomWidth(args) {
   return (0, _react2.jsx)(_index.Box, {
     width: 200
-  }, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
     p: "xl"
-  }, "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
+  }, args), "superlongtextinonelinewithnowhitespacessoitcanbelongerthatanywidth"));
 };
 exports.CustomWidth = CustomWidth;
-var CustomStyle = function CustomStyle() {
+var CustomStyle = function CustomStyle(args) {
   var textProps = {
     fontFamily: 'times',
     fontSize: 'md',
@@ -448,11 +459,11 @@ var CustomStyle = function CustomStyle() {
   return (0, _react2.jsx)(_index.Box, {
     p: "xx",
     gap: "md"
-  }, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, args, {
     variant: "title"
-  }, "The Text component allows typography style props to be passed in directly."), (0, _react2.jsx)(_index.Text, textProps, loremText), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.Text, {
+  }), "The Text component allows typography style props to be passed in directly."), (0, _react2.jsx)(_index.Text, textProps, loremText), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({}, args, {
     variant: "title"
-  }, "Typography styles can also be passed in through the sx prop for the same result."), (0, _react2.jsx)(_index.Text, {
+  }), "Typography styles can also be passed in through the sx prop for the same result."), (0, _react2.jsx)(_index.Text, {
     sx: textProps
   }, loremText));
 };

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

@@ -1,39 +1,15 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("../../types/TextAreaField").TextAreaFieldProps & React.RefAttributes<HTMLInputElement>>;
-    parameters: {
-        docs: {
-            page: () => React.JSX.Element;
-            source: {
-                type: string;
-            };
-        };
-        a11y: {
-            config: {
-                rules: {
-                    id: string;
-                    enabled: boolean;
-                }[];
-            };
-        };
-    };
-    argTypes: any;
-    args: {
-        label: string;
-        labelMode: string;
-    };
-};
+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: (args: any) => React.JSX.Element;
-export declare const WithSlots: (args: any) => React.JSX.Element;
-export declare const FloatLabel: () => React.JSX.Element;
+export declare const WithSlots: () => React.JSX.Element;
+export declare const FloatLabel: (args: any) => React.JSX.Element;
 export declare const Controlled: () => React.JSX.Element;
-export declare const Disabled: () => React.JSX.Element;
-export declare const ReadOnly: () => React.JSX.Element;
-export declare const Required: () => React.JSX.Element;
-export declare const Rows: () => React.JSX.Element;
-export declare const Unresizable: () => React.JSX.Element;
-export declare const Error: () => React.JSX.Element;
-export declare const WithoutStatusIndicator: () => React.JSX.Element;
-export declare const MaxLength: () => React.JSX.Element;
+export declare const Disabled: (args: any) => React.JSX.Element;
+export declare const ReadOnly: (args: any) => React.JSX.Element;
+export declare const Required: (args: any) => React.JSX.Element;
+export declare const Rows: (args: any) => React.JSX.Element;
+export declare const Unresizable: (args: any) => React.JSX.Element;
+export declare const Error: (args: any) => React.JSX.Element;
+export declare const WithoutStatusIndicator: (args: any) => React.JSX.Element;
+export declare const MaxLength: (args: any) => React.JSX.Element;