@pingux/astro 2.128.0 → 2.129.0-alpha.0

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

@@ -1,30 +1,5 @@
 import React from 'react';
-import { MessageItem } from '../../types';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("../../index").MessagesProps<MessageItem> & React.RefAttributes<HTMLDivElement>>;
-    decorators: ((...args: any) => any)[];
-    argTypes: {
-        items: {
-            control: {
-                type: string;
-            };
-        };
-        onClose: {
-            control: {
-                type: string;
-            };
-        };
-    };
-    parameters: {
-        docs: {
-            page: () => React.JSX.Element;
-            source: {
-                type: 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;
@@ -46,10 +21,11 @@ export declare const DefaultDynamic: {
                 }[];
             };
         };
+        codesandbox: boolean;
     };
 };
 export declare const Controlled: {
-    (args: any): React.JSX.Element;
+    (): React.JSX.Element;
     parameters: {
         a11y: {
             config: {
@@ -59,10 +35,11 @@ export declare const Controlled: {
                 }[];
             };
         };
+        codesandbox: boolean;
     };
 };
 export declare const ControlledWithButton: {
-    (args: any): React.JSX.Element;
+    (): React.JSX.Element;
     parameters: {
         a11y: {
             config: {
@@ -72,6 +49,7 @@ export declare const ControlledWithButton: {
                 }[];
             };
         };
+        codesandbox: boolean;
     };
 };
 export declare const UseReducer: {
@@ -85,6 +63,7 @@ export declare const UseReducer: {
                 }[];
             };
         };
+        codesandbox: boolean;
     };
 };
 export declare const UseReducerWithMultipleContainers: {
@@ -98,10 +77,11 @@ export declare const UseReducerWithMultipleContainers: {
                 }[];
             };
         };
+        codesandbox: boolean;
     };
 };
 export declare const WithTextStyling: {
-    (args: any): React.JSX.Element;
+    (): React.JSX.Element;
     parameters: {
         design: {
             type: string;
@@ -115,6 +95,7 @@ export declare const WithTextStyling: {
                 }[];
             };
         };
+        codesandbox: boolean;
     };
 };
 export declare const WithLink: {

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

@@ -24,7 +24,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 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 _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
@@ -58,9 +57,12 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Messages["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Button', 'Item', 'Link', 'Messages'],
+        '@pingux/mdi-react/AccountIcon': 'AccountIcon'
       }
     }
   }
@@ -84,19 +86,19 @@ var messages = [{
   status: _statuses["default"].ERROR
 }];
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_index.Item, {
     key: "message1",
     "data-id": "message1",
     status: _statuses["default"].SUCCESS
-  }, loremText), (0, _react2.jsx)(_reactStately.Item, {
+  }, loremText), (0, _react2.jsx)(_index.Item, {
     key: "message2",
     "data-id": "message2",
     status: _statuses["default"].WARNING
-  }, loremText), (0, _react2.jsx)(_reactStately.Item, {
+  }, loremText), (0, _react2.jsx)(_index.Item, {
     key: "message2",
     "data-id": "message3",
     status: _statuses["default"].ERROR
-  }, loremText), (0, _react2.jsx)(_reactStately.Item, {
+  }, loremText), (0, _react2.jsx)(_index.Item, {
     key: "message2",
     "data-id": "message4"
   }, loremText));
@@ -112,7 +114,7 @@ var DefaultDynamic = function DefaultDynamic(args) {
   return (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
     items: messages
   }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_index.Item, item, item.text);
   });
 };
 
@@ -126,9 +128,10 @@ DefaultDynamic.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };
-var Controlled = function Controlled(args) {
+var Controlled = function Controlled() {
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     items = _useState2[0],
@@ -148,11 +151,11 @@ var Controlled = function Controlled(args) {
       }));
     }, 200);
   };
-  return (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_index.Messages, {
     items: items,
     onClose: removeMessage
-  }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, item, item.text);
   });
 };
 
@@ -166,9 +169,10 @@ Controlled.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };
-var ControlledWithButton = function ControlledWithButton(args) {
+var ControlledWithButton = function ControlledWithButton() {
   var _useState3 = (0, _react.useState)([]),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     items = _useState4[0],
@@ -195,11 +199,11 @@ var ControlledWithButton = function ControlledWithButton(args) {
   };
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
     onPress: addMessage
-  }, "Click me!"), (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
+  }, "Click me!"), (0, _react2.jsx)(_index.Messages, {
     items: items,
     onClose: removeMessage
-  }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, item, item.text);
   }));
 };
 
@@ -213,7 +217,8 @@ ControlledWithButton.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };
 var UseReducer = function UseReducer() {
   // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
@@ -254,7 +259,7 @@ var UseReducer = function UseReducer() {
     items: items,
     onClose: removeMessage
   }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_index.Item, item, item.text);
   }));
 };
 
@@ -268,7 +273,8 @@ UseReducer.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };
 var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
   var _useReducer3 = (0, _react.useReducer)(_index2.multiMessagesReducerStory, {
@@ -308,7 +314,7 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
       width: '45%'
     }
   }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_index.Item, item, item.text);
   }), (0, _react2.jsx)(_index.Messages, {
     items: items['container-two'],
     onClose: function onClose(key) {
@@ -318,7 +324,7 @@ var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers
       left: '55%'
     }
   }, function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.text);
+    return (0, _react2.jsx)(_index.Item, item, item.text);
   }));
 };
 
@@ -332,9 +338,10 @@ UseReducerWithMultipleContainers.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };
-var WithTextStyling = function WithTextStyling(args) {
+var WithTextStyling = function WithTextStyling() {
   var items = [{
     key: 'message1',
     node: (0, _react2.jsx)("strong", null, loremText)
@@ -343,10 +350,10 @@ var WithTextStyling = function WithTextStyling(args) {
     node: (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)("b", null, "Lorem Ipsum! "), "dolor sit amet, consectetur adipiscing elit"),
     status: 'error'
   }];
-  return (0, _react2.jsx)(_index.Messages, (0, _extends2["default"])({}, args, {
+  return (0, _react2.jsx)(_index.Messages, {
     items: items
-  }), function (item) {
-    return (0, _react2.jsx)(_reactStately.Item, item, item.node || item.text);
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, item, item.node || item.text);
   });
 };
 
@@ -364,10 +371,11 @@ WithTextStyling.parameters = {
         enabled: false
       }]
     }
-  }
+  },
+  codesandbox: false
 };
 var WithLink = function WithLink(args) {
-  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_index.Item, {
     key: "message1"
   }, loremText, ' ', (0, _react2.jsx)(_index.Link, {
     href: "https://lorem.ipsum"
@@ -391,7 +399,7 @@ WithLink.parameters = {
   }
 };
 var Customization = function Customization(args) {
-  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _react2.jsx)(_index.Messages, args, (0, _react2.jsx)(_index.Item, {
     bg: "accent.99",
     color: "active",
     icon: _AccountIcon["default"]

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

@@ -25,7 +25,8 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Modal["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: {
     title: {

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

@@ -98,9 +98,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_MultivaluesField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     },
     a11y: {
@@ -114,7 +111,8 @@ var _default = {
           enabled: false
         }]
       }
-    }
+    },
+    codesandbox: false
   }
 };
 exports["default"] = _default;

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

@@ -66,7 +66,8 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NavBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
-    }
+    },
+    codesandbox: false
   }
 };
 exports["default"] = _default;

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

@@ -37,7 +37,8 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NavSideBar["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: {},
   args: {

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

@@ -26,11 +26,9 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NavigationHeader["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: {
     src: {

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

@@ -16,6 +16,7 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.WithHelperText = exports.Units = exports.StepValues = exports.MinimumAndMaximumValues = exports.DisabledAndReadOnly = exports.Default = exports.Decimals = exports.CurrencyValues = exports.ControlledState = void 0;
 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 _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
@@ -36,9 +37,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_NumberField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -117,8 +115,8 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.NumberField, args);
 };
 exports.Default = Default;
-var Decimals = function Decimals() {
-  return (0, _react2.jsx)(_index.NumberField, {
+var Decimals = function Decimals(args) {
+  return (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Adjust exposure",
     defaultValue: 0,
     formatOptions: {
@@ -126,7 +124,7 @@ var Decimals = function Decimals() {
       minimumFractionDigits: 1,
       maximumFractionDigits: 2
     }
-  });
+  }));
 };
 exports.Decimals = Decimals;
 var ControlledState = function ControlledState() {
@@ -141,8 +139,8 @@ var ControlledState = function ControlledState() {
   });
 };
 exports.ControlledState = ControlledState;
-var CurrencyValues = function CurrencyValues() {
-  return (0, _react2.jsx)(_index.NumberField, {
+var CurrencyValues = function CurrencyValues(args) {
+  return (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Transaction amount",
     defaultValue: 45,
     formatOptions: {
@@ -151,15 +149,15 @@ var CurrencyValues = function CurrencyValues() {
       currencyDisplay: 'code',
       currencySign: 'accounting'
     }
-  });
+  }));
 };
 exports.CurrencyValues = CurrencyValues;
-var DisabledAndReadOnly = function DisabledAndReadOnly() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.NumberField, {
+var DisabledAndReadOnly = function DisabledAndReadOnly(args) {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Disabled",
     isDisabled: true,
     value: 25
-  }), (0, _react2.jsx)(_index.NumberField, {
+  })), (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Read only",
     isReadOnly: true,
     value: 32,
@@ -168,21 +166,21 @@ var DisabledAndReadOnly = function DisabledAndReadOnly() {
         marginTop: '15px'
       }
     }
-  }));
+  })));
 };
 exports.DisabledAndReadOnly = DisabledAndReadOnly;
-var MinimumAndMaximumValues = function MinimumAndMaximumValues() {
-  return (0, _react2.jsx)(_index.NumberField, {
+var MinimumAndMaximumValues = function MinimumAndMaximumValues(args) {
+  return (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Enter your age",
     minValue: 0
-  });
+  }));
 };
 exports.MinimumAndMaximumValues = MinimumAndMaximumValues;
-var StepValues = function StepValues() {
-  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.NumberField, {
+var StepValues = function StepValues(args) {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Step",
     step: 10
-  }), (0, _react2.jsx)(_index.NumberField, {
+  })), (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Step + minValue",
     minValue: 2,
     step: 3,
@@ -191,7 +189,7 @@ var StepValues = function StepValues() {
         marginTop: '15px'
       }
     }
-  }), (0, _react2.jsx)(_index.NumberField, {
+  })), (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Step + minValue + maxValue",
     minValue: 2,
     maxValue: 21,
@@ -204,19 +202,19 @@ var StepValues = function StepValues() {
         marginTop: '15px'
       }
     }
-  }));
+  })));
 };
 exports.StepValues = StepValues;
-var WithHelperText = function WithHelperText() {
-  return (0, _react2.jsx)(_index.NumberField, {
+var WithHelperText = function WithHelperText(args) {
+  return (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Helper Text",
     defaultValue: 88,
     helperText: "Useful Text"
-  });
+  }));
 };
 exports.WithHelperText = WithHelperText;
-var Units = function Units() {
-  return (0, _react2.jsx)(_index.NumberField, {
+var Units = function Units(args) {
+  return (0, _react2.jsx)(_index.NumberField, (0, _extends2["default"])({}, args, {
     label: "Package width",
     defaultValue: 4,
     formatOptions: {
@@ -224,6 +222,6 @@ var Units = function Units() {
       unit: 'inch',
       unitDisplay: 'long'
     }
-  });
+  }));
 };
 exports.Units = Units;

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

@@ -50,11 +50,9 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_OverlayPanel["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
-    }
+    },
+    codesandbox: false
   }
 };
 exports["default"] = _default;

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

@@ -20,9 +20,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PageHeader["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Link', 'PageHeader']
       }
     }
   },
@@ -53,10 +55,10 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.pageHeader["default"]
   }
 };
-var WithoutButton = function WithoutButton() {
-  return (0, _react2.jsx)(_index.PageHeader, {
+var WithoutButton = function WithoutButton(args) {
+  return (0, _react2.jsx)(_index.PageHeader, (0, _extends2["default"])({
     title: "Lorem ipsum"
-  }, description, (0, _react2.jsx)(_index.Link, {
+  }, args), description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
 };
@@ -67,13 +69,13 @@ WithoutButton.parameters = {
     url: _figmaLinks.FIGMA_LINKS.pageHeader.withoutButton
   }
 };
-var WithoutLink = function WithoutLink() {
-  return (0, _react2.jsx)(_index.PageHeader, {
+var WithoutLink = function WithoutLink(args) {
+  return (0, _react2.jsx)(_index.PageHeader, (0, _extends2["default"])({
     buttonProps: {
       onPress: function onPress() {}
     },
     title: "Lorem ipsum"
-  }, description);
+  }, args), description);
 };
 exports.WithoutLink = WithoutLink;
 WithoutLink.parameters = {
@@ -82,13 +84,13 @@ WithoutLink.parameters = {
     url: _figmaLinks.FIGMA_LINKS.pageHeader.withoutLink
   }
 };
-var Customization = function Customization() {
-  return (0, _react2.jsx)(_index.PageHeader, {
+var Customization = function Customization(args) {
+  return (0, _react2.jsx)(_index.PageHeader, (0, _extends2["default"])({
     buttonProps: {
       bg: 'critical.bright'
     },
     title: "Lorem ipsum"
-  }, description, (0, _react2.jsx)(_index.Link, {
+  }, args), description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
 };

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

@@ -1,37 +1,5 @@
 import React from 'react';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("../../types/pagination").PaginationProps & React.RefAttributes<HTMLDivElement>>;
-    parameters: {
-        docs: {
-            page: () => React.JSX.Element;
-        };
-    };
-    argTypes: {
-        totalCount: {
-            control: {
-                type: string;
-            };
-        };
-        currentPageIndex: {
-            control: {
-                type: string;
-            };
-        };
-        offsetCount: {
-            control: {
-                type: string;
-            };
-        };
-        offsetOptions: {
-            control: {
-                type: string;
-            };
-        };
-        onPageIndexChange: {};
-        onOffsetCountChange: {};
-    };
-};
+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 WithListView: () => React.JSX.Element;

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

@@ -30,7 +30,8 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_Pagination["default"], null);
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: {
     totalCount: {

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

@@ -25,9 +25,13 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_PanelHeader["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Breadcrumbs', 'Item', 'PanelHeader', 'PanelHeaderCloseButton', 'PanelHeaderMenu', 'PanelHeaderSwitchField'],
+        '@pingux/mdi-react/ChevronRightIcon': 'ChevronRightIcon',
+        '@pingux/mdi-react/AccountIcon': 'AccountIcon'
       }
     }
   },
@@ -90,8 +94,8 @@ WithControls.parameters = {
     url: _figmaLinks.FIGMA_LINKS.panelHeader.withControls
   }
 };
-var WithImage = function WithImage() {
-  return (0, _react2.jsx)(_index.PanelHeader, {
+var WithImage = function WithImage(args) {
+  return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
     data: {
       image: {
         src: _images.pingImg,
@@ -100,7 +104,7 @@ var WithImage = function WithImage() {
       },
       text: 'Fons Vernall'
     }
-  });
+  }));
 };
 exports.WithImage = WithImage;
 WithImage.parameters = {

package/lib/cjs/components/PanelHeader/controls/PanelHeaderCloseButton.stories.js

@@ -20,7 +20,8 @@ var _default = {
       source: {
         type: 'code'
       }
-    }
+    },
+    codesandbox: false
   },
   argTypes: _iconButtonAttributes.iconButtonArgTypes
 };