@pingux/astro 2.128.0 → 2.129.0-alpha.0

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

@@ -18,6 +18,7 @@ exports["default"] = exports.Required = exports.Indeterminate = exports.HelperTe
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _MenuDownIcon = _interopRequireDefault(require("@pingux/mdi-react/MenuDownIcon"));
@@ -41,9 +42,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CheckboxField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Badge', 'Box', 'CheckboxField', 'IconButtonToggle', 'Link', 'SwitchField', 'Text']
       }
     }
   },
@@ -87,11 +90,11 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.CheckboxField, args);
 };
 exports.Default = Default;
-var DefaultSelected = function DefaultSelected() {
-  return (0, _react2.jsx)(_index.CheckboxField, {
+var DefaultSelected = function DefaultSelected(args) {
+  return (0, _react2.jsx)(_index.CheckboxField, (0, _extends2["default"])({}, args, {
     isDefaultSelected: true,
     label: "Click me"
-  });
+  }));
 };
 exports.DefaultSelected = DefaultSelected;
 var Controlled = function Controlled() {
@@ -108,22 +111,25 @@ var Controlled = function Controlled() {
   });
 };
 exports.Controlled = Controlled;
-var Required = function Required() {
-  return (0, _react2.jsx)(_index.CheckboxField, {
+Controlled.parameters = {
+  codesandbox: false
+};
+var Required = function Required(args) {
+  return (0, _react2.jsx)(_index.CheckboxField, (0, _extends2["default"])({}, args, {
     isRequired: true,
     label: (0, _react2.jsx)(_index.Text, null, "I agree to the", ' ', (0, _react2.jsx)(_index.Link, {
       href: "https://pingidentity.com",
       target: "_blank"
     }, "Terms and Conditions"))
-  });
+  }));
 };
 exports.Required = Required;
-var HelperText = function HelperText() {
-  return (0, _react2.jsx)(_index.CheckboxField, {
+var HelperText = function HelperText(args) {
+  return (0, _react2.jsx)(_index.CheckboxField, (0, _extends2["default"])({}, args, {
     status: _statuses["default"].ERROR,
     helperText: "Here is some helpful text...",
     label: "Click me"
-  });
+  }));
 };
 exports.HelperText = HelperText;
 var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndeterminate() {
@@ -252,6 +258,9 @@ var ExpandableAndToggleableIndeterminate = function ExpandableAndToggleableIndet
   })));
 };
 exports.ExpandableAndToggleableIndeterminate = ExpandableAndToggleableIndeterminate;
+ExpandableAndToggleableIndeterminate.parameters = {
+  codesandbox: false
+};
 var Indeterminate = function Indeterminate() {
   // Whether the parent checkbox is indeterminate (default is true for our example)
   var _useState11 = (0, _react.useState)(true),
@@ -339,20 +348,21 @@ 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
 };
-var Disabled = function Disabled() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.CheckboxField, {
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.CheckboxField, (0, _extends2["default"])({}, args, {
     isDisabled: true,
     label: "Disabled"
-  }), (0, _react2.jsx)(_index.CheckboxField, {
+  })), (0, _react2.jsx)(_index.CheckboxField, (0, _extends2["default"])({}, args, {
     isDisabled: true,
     isSelected: true,
     label: "Disabled"
-  }), (0, _react2.jsx)(_index.CheckboxField, {
+  })), (0, _react2.jsx)(_index.CheckboxField, (0, _extends2["default"])({}, args, {
     isDisabled: true,
     isIndeterminate: true,
     label: "Disabled"
-  }));
+  })));
 };
 exports.Disabled = Disabled;

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

@@ -7,9 +7,6 @@ declare const _default: {
     parameters: {
         docs: {
             page: () => React.JSX.Element;
-            source: {
-                type: string;
-            };
         };
         a11y: {
             config: {

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

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.TypescriptEditor = exports.ReadOnly = exports.JsonEditor = exports.JavascriptEditor = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
@@ -18,9 +19,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CodeEditor["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -40,28 +38,28 @@ exports["default"] = _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";
-var TypescriptEditor = function TypescriptEditor() {
-  return (0, _react2.jsx)(_index.CodeEditor, {
+var TypescriptEditor = function TypescriptEditor(args) {
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
     defaultValue: tsCode,
     language: "typescript",
     height: "200px"
-  });
+  }));
 };
 exports.TypescriptEditor = TypescriptEditor;
-var JavascriptEditor = function JavascriptEditor() {
-  return (0, _react2.jsx)(_index.CodeEditor, {
+var JavascriptEditor = function JavascriptEditor(args) {
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
     defaultValue: jsCode,
     language: "javascript",
     height: "200px"
-  });
+  }));
 };
 exports.JavascriptEditor = JavascriptEditor;
-var JsonEditor = function JsonEditor() {
-  return (0, _react2.jsx)(_index.CodeEditor, {
+var JsonEditor = function JsonEditor(args) {
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
     defaultValue: jsonCode,
     language: "json",
     height: "200px"
-  });
+  }));
 };
 exports.JsonEditor = JsonEditor;
 var ReadOnly = function ReadOnly() {

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

@@ -54,6 +54,11 @@ var _default = {
           selector: '.prism-code'
         }]
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['CodeView']
+      }
     }
   }
 };
@@ -80,10 +85,10 @@ Default.parameters = {
     }
   }
 };
-var WithLineNumbers = function WithLineNumbers() {
-  return (0, _react2.jsx)(_index.CodeView, {
+var WithLineNumbers = function WithLineNumbers(args) {
+  return (0, _react2.jsx)(_index.CodeView, (0, _extends2["default"])({}, args, {
     hasLineNumbers: true
-  }, code);
+  }), code);
 };
 exports.WithLineNumbers = WithLineNumbers;
 WithLineNumbers.parameters = {
@@ -99,15 +104,15 @@ WithLineNumbers.parameters = {
     }
   }
 };
-var WithCustomSize = function WithCustomSize() {
-  return (0, _react2.jsx)(_index.CodeView, {
+var WithCustomSize = function WithCustomSize(args) {
+  return (0, _react2.jsx)(_index.CodeView, (0, _extends2["default"])({}, 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    ");
 };
 exports.WithCustomSize = WithCustomSize;
 WithCustomSize.parameters = {
@@ -123,13 +128,13 @@ WithCustomSize.parameters = {
     }
   }
 };
-var WithAdditionalLanguage = function WithAdditionalLanguage() {
+var WithAdditionalLanguage = function WithAdditionalLanguage(args) {
   var _context;
   var cssCode = (0, _trim["default"])(_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 (0, _react2.jsx)(_index.CodeView, {
+  return (0, _react2.jsx)(_index.CodeView, (0, _extends2["default"])({}, args, {
     language: "css",
     Prism: _prismjs["default"]
-  }, cssCode);
+  }), cssCode);
 };
 exports.WithAdditionalLanguage = WithAdditionalLanguage;
 WithAdditionalLanguage.parameters = {
@@ -143,7 +148,8 @@ WithAdditionalLanguage.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };
 var WithChangedCopiedValue = function WithChangedCopiedValue(args) {
   return (0, _react2.jsx)(_index.CodeView, (0, _extends2["default"])({
@@ -161,17 +167,17 @@ WithChangedCopiedValue.parameters = {
     }
   }
 };
-var WithCustomLanguage = function WithCustomLanguage() {
+var WithCustomLanguage = function WithCustomLanguage(args) {
   var _context2, _context3;
   var javaCode = (0, _trim["default"])(_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 = (0, _trim["default"])(_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 (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.CodeView, {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.CodeView, (0, _extends2["default"])({}, args, {
     language: "java",
     Prism: _prismjs["default"]
-  }, javaCode), (0, _react2.jsx)(_index.CodeView, {
+  }), javaCode), (0, _react2.jsx)(_index.CodeView, (0, _extends2["default"])({}, args, {
     language: "powershell",
     Prism: _prismjs["default"]
-  }, powershellCode));
+  }), powershellCode));
 };
 exports.WithCustomLanguage = WithCustomLanguage;
 WithCustomLanguage.parameters = {
@@ -182,5 +188,6 @@ WithCustomLanguage.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };

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

@@ -21,9 +21,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CollapsiblePanel["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['CollapsiblePanel']
       }
     }
   },

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

@@ -38,9 +38,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ColorField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['ColorField', 'OverlayProvider']
       }
     }
   },

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

@@ -158,9 +158,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ComboBoxField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -246,6 +243,9 @@ var WithSections = function WithSections(args) {
   }));
 };
 exports.WithSections = WithSections;
+WithSections.parameters = {
+  codesandbox: false
+};
 var AsyncLoading = function AsyncLoading() {
   // This example uses `useAsyncList` from "@react-stately/data"
   var list = (0, _reactStately.useAsyncList)({
@@ -267,7 +267,7 @@ var AsyncLoading = function AsyncLoading() {
               // Otherwise, the cursor is the next URL to load,
               // as returned from the previous page.
               _context.next = 4;
-              return fetch(cursor || "https://swapi.dev/api/people/?search=".concat(filterText), {
+              return fetch(cursor || "https://swapi.py4e.com/api/people/?search=".concat(filterText), {
                 signal: signal
               });
             case 4:

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

@@ -1,5 +1,5 @@
 import { StoryFn } from '@storybook/react';
-import { CopyTextProps } from '../../index';
+import { CopyTextProps } 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<CopyTextProps>;

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

@@ -27,6 +27,11 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CopyText["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'CopyText', 'Text', 'Link', 'TextField']
+      }
     }
   },
   argTypes: {

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

@@ -1,185 +1,8 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("../../index").DataTableProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        docs: {
-            page: () => React.JSX.Element;
-            source: {
-                type: string;
-            };
-        };
-    };
-    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;
-        };
-        density: {
-            control: {
-                disable: boolean;
-            };
-        };
-        overflowMode: {
-            control: {
-                disable: boolean;
-            };
-        };
-        selectedKeys: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        disabledKeys: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        defaultSelectedKeys: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        onSelectionChange: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        selectionMode: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        width: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        height: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        sortDescriptor: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        onSortChange: {
-            description: string;
-        };
-        allowsSorting: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        hideHeader: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        loadingState: {
-            description: string;
-            control: {
-                disable: boolean;
-            };
-        };
-        onLoadMore: {
-            description: string;
-        };
-        items: {
-            control: {
-                disable: boolean;
-            };
-            description: string;
-        };
-    };
-    args: {
-        density: string;
-        overflowMode: 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;
+    (): React.JSX.Element;
     parameters: {
         a11y: {
             config: {
@@ -192,7 +15,7 @@ export declare const Default: {
     };
 };
 export declare const OnyxDefault: {
-    (args: any): React.JSX.Element;
+    (): React.JSX.Element;
     parameters: {
         a11y: {
             config: {

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

@@ -52,11 +52,9 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DataTable["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: _objectSpread({
     density: {
@@ -169,7 +167,7 @@ var getCellProps = function getCellProps(columnKey, align) {
     align: align
   };
 };
-var Default = function Default(args) {
+var Default = function Default() {
   var date = '2023-05-03';
   var time = '07:16:30 pm UTC';
   var timestampCell = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, date), (0, _react2.jsx)(_index.Box, null, time));
@@ -249,10 +247,11 @@ var Default = function Default(args) {
     userIdentity: 'Vincent Diep',
     menu: (0, _react2.jsx)(_index.DataTableMenu, null)
   }];
-  return (0, _react2.jsx)(_index.DataTable, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_index.DataTable, {
     "aria-label": "Static table",
-    height: "100%"
-  }), (0, _react2.jsx)(_index.DataTableHeader, {
+    height: "100%",
+    density: "spacious"
+  }, (0, _react2.jsx)(_index.DataTableHeader, {
     columns: columns
   }, function (column) {
     return (0, _react2.jsx)(_index.DataTableColumn, (0, _extends2["default"])({}, getCellProps(column.key, false), getHeaderProps(), {
@@ -280,7 +279,7 @@ Default.parameters = {
     }
   }
 };
-var OnyxDefault = function OnyxDefault(args) {
+var OnyxDefault = function OnyxDefault() {
   var date = '2023-05-03';
   var time = '07:16:30 pm UTC';
   var timestampCell = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, null, date), (0, _react2.jsx)(_index.Box, null, time));
@@ -359,11 +358,11 @@ var OnyxDefault = function OnyxDefault(args) {
     userIdentity: 'Vincent Diep',
     menu: (0, _react2.jsx)(_index.DataTableMenu, null)
   }];
-  return (0, _react2.jsx)(_index.DataTable, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_index.DataTable, {
     "aria-label": "Onyx table",
     height: "100%",
     scale: "xl"
-  }), (0, _react2.jsx)(_index.DataTableHeader, {
+  }, (0, _react2.jsx)(_index.DataTableHeader, {
     columns: columns
   }, function (column) {
     return (0, _react2.jsx)(_index.DataTableColumn, {

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

@@ -38,12 +38,10 @@ var _default = {
   component: _DatePicker["default"],
   parameters: {
     docs: {
-      source: {
-        type: 'code'
-      },
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_DatePicker2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      }
+      },
+      codesandbox: false
     },
     a11y: {
       config: {
@@ -116,7 +114,7 @@ var _default = {
     isReadOnly: false,
     isRequired: false,
     label: 'Example Label',
-    onChange: null
+    onChange: function onChange() {}
   }
 };
 exports["default"] = _default;

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

@@ -4,7 +4,22 @@ import { EnvironmentBreadcrumbProps, EnvironmentItemProps } 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<EnvironmentBreadcrumbProps<EnvironmentItemProps>>;
-export declare const WithSections: () => React.JSX.Element;
-export declare const OrgLevel: () => React.JSX.Element;
-export declare const DefaultOpen: () => React.JSX.Element;
-export declare const ControlledMenu: () => React.JSX.Element;
+export declare const WithSections: {
+    (): React.JSX.Element;
+    parameters: {
+        codesandbox: boolean;
+    };
+};
+export declare const OrgLevel: (args: any) => React.JSX.Element;
+export declare const DefaultOpen: {
+    (): React.JSX.Element;
+    parameters: {
+        codesandbox: boolean;
+    };
+};
+export declare const ControlledMenu: {
+    (): React.JSX.Element;
+    parameters: {
+        codesandbox: boolean;
+    };
+};