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

package/lib/components/CheckboxField/CheckboxField.stories.js

@@ -7,6 +7,7 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/every";
@@ -30,9 +31,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CheckboxFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Badge', 'Box', 'CheckboxField', 'IconButtonToggle', 'Link', 'SwitchField', 'Text']
       }
     }
   },
@@ -74,11 +77,11 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(CheckboxField, args);
 };
-export var DefaultSelected = function DefaultSelected() {
-  return ___EmotionJSX(CheckboxField, {
+export var DefaultSelected = function DefaultSelected(args) {
+  return ___EmotionJSX(CheckboxField, _extends({}, args, {
     isDefaultSelected: true,
     label: "Click me"
-  });
+  }));
 };
 export var Controlled = function Controlled() {
   var _React$useState = React.useState(false),
@@ -93,21 +96,24 @@ export var Controlled = function Controlled() {
     label: "Click me"
   });
 };
-export var Required = function Required() {
-  return ___EmotionJSX(CheckboxField, {
+Controlled.parameters = {
+  codesandbox: false
+};
+export var Required = function Required(args) {
+  return ___EmotionJSX(CheckboxField, _extends({}, args, {
     isRequired: true,
     label: ___EmotionJSX(Text, null, "I agree to the", ' ', ___EmotionJSX(Link, {
       href: "https://pingidentity.com",
       target: "_blank"
     }, "Terms and Conditions"))
-  });
+  }));
 };
-export var HelperText = function HelperText() {
-  return ___EmotionJSX(CheckboxField, {
+export var HelperText = function HelperText(args) {
+  return ___EmotionJSX(CheckboxField, _extends({}, args, {
     status: statuses.ERROR,
     helperText: "Here is some helpful text...",
     label: "Click me"
-  });
+  }));
 };
 export var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndeterminate() {
   var _useState = useState(false),
@@ -234,6 +240,9 @@ export var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleab
     }));
   })));
 };
+ExpandableAndToggleableIndeterminate.parameters = {
+  codesandbox: false
+};
 export var Indeterminate = function Indeterminate() {
   // Whether the parent checkbox is indeterminate (default is true for our example)
   var _useState11 = useState(true),
@@ -320,19 +329,20 @@ Indeterminate.parameters = {
     description: {
       story: 'When a `CheckboxField` is indeterminate, it\'s necessary to control the state in order to determine how it should function when pressed. Here is an example of how to do that.'
     }
-  }
+  },
+  codesandbox: false
 };
-export var Disabled = function Disabled() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(CheckboxField, {
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(CheckboxField, _extends({}, args, {
     isDisabled: true,
     label: "Disabled"
-  }), ___EmotionJSX(CheckboxField, {
+  })), ___EmotionJSX(CheckboxField, _extends({}, args, {
     isDisabled: true,
     isSelected: true,
     label: "Disabled"
-  }), ___EmotionJSX(CheckboxField, {
+  })), ___EmotionJSX(CheckboxField, _extends({}, args, {
     isDisabled: true,
     isIndeterminate: true,
     label: "Disabled"
-  }));
+  })));
 };

package/lib/components/CodeEditor/CodeEditor.stories.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { CodeEditor } from '../../index';
@@ -10,9 +11,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeEditorReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -31,26 +29,26 @@ export default {
 var jsonCode = "{\n  \"name\": \"Luke Skywalker\", \n  \"height\": \"172\", \n  \"mass\": \"77\", \n  \"hair_color\": \"blond\", \n  \"skin_color\": \"fair\", \n  \"eye_color\": \"blue\", \n  \"birth_year\": \"19BBY\", \n  \"gender\": \"male\", \n  \"homeworld\": \"https://swapi.dev/api/planets/1/\", \n  \"films\": [\n      \"https://swapi.dev/api/films/1/\", \n      \"https://swapi.dev/api/films/2/\", \n      \"https://swapi.dev/api/films/3/\", \n      \"https://swapi.dev/api/films/6/\"\n  ],\n  \"starships\": [\n      \"https://swapi.dev/api/starships/12/\", \n      \"https://swapi.dev/api/starships/22/\"\n  ]\n}";
 var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number) {\n  return integer + 1;\n}\n\naddOne('I am a string');\n";
 var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
-export var TypescriptEditor = function TypescriptEditor() {
-  return ___EmotionJSX(CodeEditor, {
+export var TypescriptEditor = function TypescriptEditor(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
     defaultValue: tsCode,
     language: "typescript",
     height: "200px"
-  });
+  }));
 };
-export var JavascriptEditor = function JavascriptEditor() {
-  return ___EmotionJSX(CodeEditor, {
+export var JavascriptEditor = function JavascriptEditor(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
     defaultValue: jsCode,
     language: "javascript",
     height: "200px"
-  });
+  }));
 };
-export var JsonEditor = function JsonEditor() {
-  return ___EmotionJSX(CodeEditor, {
+export var JsonEditor = function JsonEditor(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
     defaultValue: jsonCode,
     language: "json",
     height: "200px"
-  });
+  }));
 };
 export var ReadOnly = function ReadOnly() {
   return ___EmotionJSX(CodeEditor, {

package/lib/components/CodeView/CodeView.stories.js

@@ -46,6 +46,11 @@ export default {
           selector: '.prism-code'
         }]
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['CodeView']
+      }
     }
   }
 };
@@ -70,10 +75,10 @@ Default.parameters = {
     }
   }
 };
-export var WithLineNumbers = function WithLineNumbers() {
-  return ___EmotionJSX(CodeView, {
+export var WithLineNumbers = function WithLineNumbers(args) {
+  return ___EmotionJSX(CodeView, _extends({}, args, {
     hasLineNumbers: true
-  }, code);
+  }), code);
 };
 WithLineNumbers.parameters = {
   docs: {
@@ -88,15 +93,15 @@ WithLineNumbers.parameters = {
     }
   }
 };
-export var WithCustomSize = function WithCustomSize() {
-  return ___EmotionJSX(CodeView, {
+export var WithCustomSize = function WithCustomSize(args) {
+  return ___EmotionJSX(CodeView, _extends({}, args, {
     language: "jsx",
     sx: {
       width: '100%',
       height: 300
     },
     hasNoCopyButton: true
-  }, "\nconst BadgeWithIcon = () => (\n  <>\n    <Badge label=\"Badge with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" title={{ name: 'Clear Icon' }} />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon Button\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" title={{ name: 'Earth Icon' }} />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" title={{ name: 'Copy Icon' }} />\n    </Badge>\n  </>\n);\n    ");
+  }), "\nconst BadgeWithIcon = () => (\n  <>\n    <Badge label=\"Badge with Icon Button\" bg=\"navy\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Clear} ml=\"xs\" size=\"14px\" title={{ name: 'Clear Icon' }} />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon Button\">\n      <IconButton aria-label=\"Clear Badge with Icon Button\" variant=\"inverted\">\n        <Icon icon={Earth} ml=\"xs\" size=\"14px\" title={{ name: 'Earth Icon' }} />\n      </IconButton>\n    </Badge>\n\n    <div style={{ padding: '5px' }} />\n\n    <Badge label=\"Badge with Icon\" bg=\"green\">\n      <Icon icon={ContentCopy} ml=\"xs\" size=\"14px\" color=\"white\" title={{ name: 'Copy Icon' }} />\n    </Badge>\n  </>\n);\n    ");
 };
 WithCustomSize.parameters = {
   docs: {
@@ -111,13 +116,13 @@ WithCustomSize.parameters = {
     }
   }
 };
-export var WithAdditionalLanguage = function WithAdditionalLanguage() {
+export var WithAdditionalLanguage = function WithAdditionalLanguage(args) {
   var _context;
   var cssCode = _trimInstanceProperty(_context = "\n  body {\n    margin: 0;\n    font-family: Roboto, sans-serif;\n  }\n  \n  h1 {\n    color: red;\n    margin-left: 40px;\n  }\n ").call(_context);
-  return ___EmotionJSX(CodeView, {
+  return ___EmotionJSX(CodeView, _extends({}, args, {
     language: "css",
     Prism: Prism
-  }, cssCode);
+  }), cssCode);
 };
 WithAdditionalLanguage.parameters = {
   docs: {
@@ -130,7 +135,8 @@ WithAdditionalLanguage.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };
 export var WithChangedCopiedValue = function WithChangedCopiedValue(args) {
   return ___EmotionJSX(CodeView, _extends({
@@ -147,17 +153,17 @@ WithChangedCopiedValue.parameters = {
     }
   }
 };
-export var WithCustomLanguage = function WithCustomLanguage() {
+export var WithCustomLanguage = function WithCustomLanguage(args) {
   var _context2, _context3;
   var javaCode = _trimInstanceProperty(_context2 = "\n  public class Factorial {\n  public static void main(String[] args) {\n    int num = 5;\n    int factorial = 1;\n    for (int i = 1; i <= num; i++) {\n      factorial *= i;\n    }\n    System.out.println(\"Factorial of \" + num + \" is: \" + factorial);\n  }\n}\n ").call(_context2);
   var powershellCode = _trimInstanceProperty(_context3 = "\n  Get-Process\n  Get-Process -Name \"notepad\"\n  Stop-Process -Name \"notepad\"\n  Get-Service\n  Start-Service -Name \"service_name\"\n  Get-Date\n  Get-Date -Format \"yyyy-MM-dd HH:mm:ss\"\n  Get-WmiObject -Class Win32_OperatingSystem\n  $env:COMPUTERNAME\n ").call(_context3);
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeView, _extends({}, args, {
     language: "java",
     Prism: Prism
-  }, javaCode), ___EmotionJSX(CodeView, {
+  }), javaCode), ___EmotionJSX(CodeView, _extends({}, args, {
     language: "powershell",
     Prism: Prism
-  }, powershellCode));
+  }), powershellCode));
 };
 WithCustomLanguage.parameters = {
   a11y: {
@@ -167,5 +173,6 @@ WithCustomLanguage.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -13,9 +13,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CollapsiblePanelReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['CollapsiblePanel']
       }
     }
   },

package/lib/components/ColorField/ColorField.stories.js

@@ -27,9 +27,11 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ColorFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['ColorField', 'OverlayProvider']
       }
     }
   },

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

@@ -146,9 +146,6 @@ export default {
     docs: {
       page: function page() {
         return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ComboBoxFieldReadme, null), ___EmotionJSX(DocsLayout, null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -231,6 +228,9 @@ export var WithSections = function WithSections(args) {
     });
   }));
 };
+WithSections.parameters = {
+  codesandbox: false
+};
 export var AsyncLoading = function AsyncLoading() {
   // This example uses `useAsyncList` from "@react-stately/data"
   var list = useAsyncList({

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

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

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

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

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

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

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

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

package/lib/components/FieldHelperText/FieldHelperText.stories.js

@@ -6,6 +6,7 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -21,18 +22,18 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(FieldHelperText, args, "Look at me!");
 };
-export var Error = function Error() {
-  return ___EmotionJSX(FieldHelperText, {
+export var Error = function Error(args) {
+  return ___EmotionJSX(FieldHelperText, _extends({}, args, {
     status: "error"
-  }, "Look at me!");
+  }), "Look at me!");
 };
-export var Success = function Success() {
-  return ___EmotionJSX(FieldHelperText, {
+export var Success = function Success(args) {
+  return ___EmotionJSX(FieldHelperText, _extends({}, args, {
     status: "success"
-  }, "Look at me!");
+  }), "Look at me!");
 };
-export var Warning = function Warning() {
-  return ___EmotionJSX(FieldHelperText, {
+export var Warning = function Warning(args) {
+  return ___EmotionJSX(FieldHelperText, _extends({}, args, {
     status: "warning"
-  }, "Look at me!");
+  }), "Look at me!");
 };

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

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

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

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