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

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

@@ -10,6 +10,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.WithSeparator = exports.WithSections = exports.Placement = exports.NotFlippable = exports.NotClosedOnSelect = exports.DefaultOpen = exports.Default = exports.Controlled = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _DotsVerticalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsVerticalIcon"));
 var _addonActions = require("@storybook/addon-actions");
@@ -29,9 +30,12 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PopoverMenu["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Icon', 'IconButton', 'Item', 'Menu', 'OverlayProvider', 'PopoverMenu', 'Section', 'Text'],
+        '@pingux/mdi-react/DotsVerticalIcon': 'DotsVerticalIcon'
       }
     }
   },
@@ -86,13 +90,13 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.popoverMenu["default"]
   }
 };
-var DefaultOpen = function DefaultOpen() {
+var DefaultOpen = function DefaultOpen(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, (0, _extends2["default"])({}, args, {
       isDefaultOpen: true
-    }, (0, _react2.jsx)(_index.IconButton, {
+    }), (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "more options",
       variant: "inverted"
     }, (0, _react2.jsx)(_index.Icon, {
@@ -152,13 +156,16 @@ var Controlled = function Controlled() {
   );
 };
 exports.Controlled = Controlled;
-var Placement = function Placement() {
+Controlled.parameters = {
+  codesandbox: false
+};
+var Placement = function Placement(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, (0, _extends2["default"])({}, args, {
       direction: "left"
-    }, (0, _react2.jsx)(_index.IconButton, {
+    }), (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "more options",
       variant: "inverted"
     }, (0, _react2.jsx)(_index.Icon, {
@@ -182,14 +189,14 @@ var Placement = function Placement() {
   );
 };
 exports.Placement = Placement;
-var NotFlippable = function NotFlippable() {
+var NotFlippable = function NotFlippable(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, (0, _extends2["default"])({}, args, {
       direction: "left",
       isNotFlippable: true
-    }, (0, _react2.jsx)(_index.IconButton, {
+    }), (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "more options",
       variant: "inverted"
     }, (0, _react2.jsx)(_index.Icon, {
@@ -213,13 +220,13 @@ var NotFlippable = function NotFlippable() {
   );
 };
 exports.NotFlippable = NotFlippable;
-var NotClosedOnSelect = function NotClosedOnSelect() {
+var NotClosedOnSelect = function NotClosedOnSelect(args) {
   return (
     // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
-    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, {
+    (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.PopoverMenu, (0, _extends2["default"])({}, args, {
       isNotClosedOnSelect: true
-    }, (0, _react2.jsx)(_index.IconButton, {
+    }), (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "more options",
       variant: "inverted"
     }, (0, _react2.jsx)(_index.Icon, {

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

@@ -19,9 +19,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ProgressBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },

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

@@ -1,18 +1,5 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("../../types/radioGroupField").RadioGroupFieldProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        docs: {
-            page: () => React.JSX.Element;
-        };
-    };
-    argTypes: any;
-    args: {
-        label: string;
-        defaultValue: 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;
@@ -24,10 +11,10 @@ export declare const Default: {
     };
 };
 export declare const Controlled: () => React.JSX.Element;
-export declare const Required: () => React.JSX.Element;
-export declare const CheckedContent: () => React.JSX.Element;
+export declare const Required: (args: any) => React.JSX.Element;
+export declare const CheckedContent: (args: any) => React.JSX.Element;
 export declare const HelperText: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         a11y: {
             config: {
@@ -39,4 +26,4 @@ export declare const HelperText: {
         };
     };
 };
-export declare const HorizontalOrientation: () => React.JSX.Element;
+export declare const HorizontalOrientation: (args: any) => React.JSX.Element;

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

@@ -15,6 +15,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Required = exports.HorizontalOrientation = exports.HelperText = exports.Default = exports.Controlled = exports.CheckedContent = 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"));
@@ -37,6 +38,11 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_RadioGroupField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RadioField', 'RadioGroupField']
+      }
     }
   },
   argTypes: _objectSpread(_objectSpread({
@@ -115,11 +121,11 @@ var Controlled = function Controlled() {
   }));
 };
 exports.Controlled = Controlled;
-var Required = function Required() {
-  return (0, _react2.jsx)(_index.RadioGroupField, {
+var Required = function Required(args) {
+  return (0, _react2.jsx)(_index.RadioGroupField, (0, _extends2["default"])({}, args, {
     label: "Pick one",
     isRequired: true
-  }, (0, _react2.jsx)(_index.RadioField, {
+  }), (0, _react2.jsx)(_index.RadioField, {
     value: "A",
     label: "A"
   }), (0, _react2.jsx)(_index.RadioField, {
@@ -131,10 +137,10 @@ var Required = function Required() {
   }));
 };
 exports.Required = Required;
-var CheckedContent = function CheckedContent() {
-  return (0, _react2.jsx)(_index.RadioGroupField, {
+var CheckedContent = function CheckedContent(args) {
+  return (0, _react2.jsx)(_index.RadioGroupField, (0, _extends2["default"])({}, args, {
     label: "Pick one"
-  }, (0, _react2.jsx)(_index.RadioField, {
+  }), (0, _react2.jsx)(_index.RadioField, {
     value: "A",
     label: "A",
     checkedContent: "You chose A..."
@@ -149,12 +155,12 @@ var CheckedContent = function CheckedContent() {
   }));
 };
 exports.CheckedContent = CheckedContent;
-var HelperText = function HelperText() {
-  return (0, _react2.jsx)(_index.RadioGroupField, {
+var HelperText = function HelperText(args) {
+  return (0, _react2.jsx)(_index.RadioGroupField, (0, _extends2["default"])({}, args, {
     label: "Pick one",
     helperText: "Here is some helpful text...",
     status: "error"
-  }, (0, _react2.jsx)(_index.RadioField, {
+  }), (0, _react2.jsx)(_index.RadioField, {
     value: "A",
     label: "A"
   }), (0, _react2.jsx)(_index.RadioField, {
@@ -178,11 +184,11 @@ HelperText.parameters = {
     }
   }
 };
-var HorizontalOrientation = function HorizontalOrientation() {
-  return (0, _react2.jsx)(_index.RadioGroupField, {
+var HorizontalOrientation = function HorizontalOrientation(args) {
+  return (0, _react2.jsx)(_index.RadioGroupField, (0, _extends2["default"])({}, args, {
     label: "Pick one",
     orientation: "horizontal"
-  }, (0, _react2.jsx)(_index.RadioField, {
+  }), (0, _react2.jsx)(_index.RadioField, {
     value: "A",
     label: "Option A"
   }), (0, _react2.jsx)(_index.RadioField, {

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

@@ -1,98 +1,6 @@
-import React from 'react';
 import { StoryFn } from '@storybook/react';
 import { RangeCalendarProps } from '../../types';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<RangeCalendarProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        actions: {
-            argTypesRegex: string;
-        };
-        source: {
-            type: string;
-        };
-        docs: {
-            page: () => React.JSX.Element;
-        };
-    };
-    argTypes: {
-        'aria-controls': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-describedby': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-details': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-errormessage': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-label': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-        'aria-labelledby': {
-            control: {
-                type: string;
-            };
-            table: {
-                type: {
-                    summary: string;
-                };
-                category: string;
-            };
-            description: string;
-        };
-    };
-    args: {
-        defaultFocusedValue: 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: StoryFn<RangeCalendarProps>;
 export declare const DefaultValue: StoryFn<RangeCalendarProps>;

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

@@ -37,9 +37,6 @@ var _default = {
     actions: {
       argTypesRegex: '^on.*'
     },
-    source: {
-      type: 'code'
-    },
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_RangeCalendar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
@@ -58,14 +55,14 @@ var Default = function Default(args) {
   }));
 };
 exports.Default = Default;
-var DefaultValue = function DefaultValue() {
-  return (0, _react2.jsx)(_index.RangeCalendar, {
+var DefaultValue = function DefaultValue(args) {
+  return (0, _react2.jsx)(_index.RangeCalendar, (0, _extends2["default"])({}, args, {
     "aria-label": "calendar-with-default-vaue",
     defaultValue: {
       start: '2030-01-15',
       end: '2030-01-22'
     }
-  });
+  }));
 };
 exports.DefaultValue = DefaultValue;
 var Disabled = function Disabled(args) {
@@ -92,26 +89,26 @@ var UnavailableDates = function UnavailableDates() {
   });
 };
 exports.UnavailableDates = UnavailableDates;
-var MinimumDate = function MinimumDate() {
-  return (0, _react2.jsx)(_index.RangeCalendar, {
+var MinimumDate = function MinimumDate(args) {
+  return (0, _react2.jsx)(_index.RangeCalendar, (0, _extends2["default"])({}, args, {
     "aria-label": "range-calendar-component-min-date",
     minValue: "2030-01-15",
     defaultValue: {
       start: '2030-01-15',
       end: '2030-01-20'
     }
-  });
+  }));
 };
 exports.MinimumDate = MinimumDate;
-var MaximumDate = function MaximumDate() {
-  return (0, _react2.jsx)(_index.RangeCalendar, {
+var MaximumDate = function MaximumDate(args) {
+  return (0, _react2.jsx)(_index.RangeCalendar, (0, _extends2["default"])({}, args, {
     "aria-label": "range-calendar-component-max-date",
     defaultValue: {
       start: '2030-01-12',
       end: '2030-01-15'
     },
     maxValue: "2030-01-17"
-  });
+  }));
 };
 exports.MaximumDate = MaximumDate;
 var Controlled = function Controlled(args) {

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

@@ -22,6 +22,11 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_RequirementsList["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RequirementsList']
+      }
     }
   },
   argTypes: {

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

@@ -26,9 +26,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_RockerButtonGroup["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['RockerButton', 'RockerButtonGroup']
       }
     }
   },
@@ -73,6 +75,9 @@ var Uncontrolled = function Uncontrolled() {
   }, "Maybe"));
 };
 exports.Uncontrolled = Uncontrolled;
+Uncontrolled.parameters = {
+  codesandbox: false
+};
 var Controlled = function Controlled() {
   var _useState = (0, _react.useState)('and'),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -93,6 +98,9 @@ var Controlled = function Controlled() {
   }, "Maybe"));
 };
 exports.Controlled = Controlled;
+Controlled.parameters = {
+  codesandbox: false
+};
 var DisabledSingleButton = function DisabledSingleButton() {
   return (0, _react2.jsx)(_.RockerButtonGroup, {
     defaultSelectedKey: "or",
@@ -109,6 +117,9 @@ var DisabledSingleButton = function DisabledSingleButton() {
   }, "Maybe"));
 };
 exports.DisabledSingleButton = DisabledSingleButton;
+DisabledSingleButton.parameters = {
+  codesandbox: false
+};
 var customColors = function customColors() {
   return (0, _react2.jsx)(_.RockerButtonGroup, null, (0, _react2.jsx)(_.RockerButton, {
     name: "and",
@@ -130,4 +141,7 @@ var customColors = function customColors() {
     }
   }, "Maybe"));
 };
-exports.customColors = customColors;
+exports.customColors = customColors;
+customColors.parameters = {
+  codesandbox: false
+};

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

@@ -42,9 +42,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_SearchField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['SearchField', 'Button', 'Icon', 'Box', 'Text']
       }
     }
   },
@@ -126,15 +128,15 @@ var CustomIcon = function CustomIcon() {
   });
 };
 exports.CustomIcon = CustomIcon;
-var NoClearButton = function NoClearButton() {
-  return (0, _react2.jsx)(_index.SearchField, {
+var NoClearButton = function NoClearButton(args) {
+  return (0, _react2.jsx)(_index.SearchField, (0, _extends2["default"])({}, args, {
     hasNoClearButton: true,
     "aria-label": "Search Users",
     placeholder: "Search Users",
     onSubmit: function onSubmit(text) {
       return alert(text);
     } // eslint-disable-line no-alert
-  });
+  }));
 };
 exports.NoClearButton = NoClearButton;
 var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {

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

@@ -9,29 +9,13 @@ export type SelectSectionProps = {
     key?: string;
     children?: SelectItemProps[];
 };
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("../../types/selectField").SelectFieldProps<object> & React.RefAttributes<HTMLSelectElement>>;
-    parameters: {
-        docs: {
-            page: () => React.JSX.Element;
-            source: {
-                type: string;
-            };
-        };
-    };
-    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 WithSections: (args: any) => React.JSX.Element;
 export declare const WithCustomHeight: (args: any) => React.JSX.Element;
 export declare const FloatLabel: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         a11y: {
             config: {
@@ -44,13 +28,13 @@ export declare const FloatLabel: {
     };
 };
 export declare const Controlled: () => React.JSX.Element;
-export declare const WithNoneOption: () => React.JSX.Element;
+export declare const WithNoneOption: (args: any) => React.JSX.Element;
 export declare const WithSlots: () => React.JSX.Element;
-export declare const DisabledField: () => React.JSX.Element;
-export declare const DisabledOptions: () => React.JSX.Element;
-export declare const NoOptionsAvailable: () => React.JSX.Element;
+export declare const DisabledField: (args: any) => React.JSX.Element;
+export declare const DisabledOptions: (args: any) => React.JSX.Element;
+export declare const NoOptionsAvailable: (args: any) => React.JSX.Element;
 export declare const HelperText: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         a11y: {
             config: {
@@ -71,5 +55,5 @@ export declare const DynamicItems: {
     };
 };
 export declare const AsyncLoading: () => React.JSX.Element;
-export declare const WithoutStatusIndicator: () => React.JSX.Element;
-export declare const WithHelpHint: () => React.JSX.Element;
+export declare const WithoutStatusIndicator: (args: any) => React.JSX.Element;
+export declare const WithHelpHint: (args: any) => React.JSX.Element;

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"
@@ -275,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"
@@ -318,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"
@@ -331,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"
@@ -344,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"
@@ -453,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"
@@ -468,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"