@pingux/astro 2.128.0 → 2.129.0-alpha.0

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

@@ -43,9 +43,11 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['EnvironmentBreadcrumb', 'Badge', 'Box', 'Item', 'Section', 'Text']
       }
     }
   }
@@ -277,10 +279,13 @@ var WithSections = function WithSections() {
   });
 };
 exports.WithSections = WithSections;
-var OrgLevel = function OrgLevel() {
-  return (0, _react2.jsx)(_index.EnvironmentBreadcrumb, {
+WithSections.parameters = {
+  codesandbox: false
+};
+var OrgLevel = function OrgLevel(args) {
+  return (0, _react2.jsx)(_index.EnvironmentBreadcrumb, (0, _extends2["default"])({
     name: "Organization"
-  });
+  }, args));
 };
 exports.OrgLevel = OrgLevel;
 var DefaultOpen = function DefaultOpen() {
@@ -329,6 +334,9 @@ var DefaultOpen = function DefaultOpen() {
   });
 };
 exports.DefaultOpen = DefaultOpen;
+DefaultOpen.parameters = {
+  codesandbox: false
+};
 var ControlledMenu = function ControlledMenu() {
   var _useState11 = (0, _react.useState)(false),
     _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
@@ -379,4 +387,7 @@ var ControlledMenu = function ControlledMenu() {
     }) : null);
   });
 };
-exports.ControlledMenu = ControlledMenu;
+exports.ControlledMenu = ControlledMenu;
+ControlledMenu.parameters = {
+  codesandbox: false
+};

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

@@ -4,6 +4,6 @@ import { FieldHelperTextProps } 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<FieldHelperTextProps>;
-export declare const Error: () => React.JSX.Element;
-export declare const Success: () => React.JSX.Element;
-export declare const Warning: () => React.JSX.Element;
+export declare const Error: (args: any) => React.JSX.Element;
+export declare const Success: (args: any) => React.JSX.Element;
+export declare const Warning: (args: any) => React.JSX.Element;

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

@@ -13,6 +13,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Warning = exports.Success = exports.Error = exports.Default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _index = require("../../index");
@@ -30,21 +31,21 @@ var Default = function Default(args) {
   return (0, _react2.jsx)(_index.FieldHelperText, args, "Look at me!");
 };
 exports.Default = Default;
-var Error = function Error() {
-  return (0, _react2.jsx)(_index.FieldHelperText, {
+var Error = function Error(args) {
+  return (0, _react2.jsx)(_index.FieldHelperText, (0, _extends2["default"])({}, args, {
     status: "error"
-  }, "Look at me!");
+  }), "Look at me!");
 };
 exports.Error = Error;
-var Success = function Success() {
-  return (0, _react2.jsx)(_index.FieldHelperText, {
+var Success = function Success(args) {
+  return (0, _react2.jsx)(_index.FieldHelperText, (0, _extends2["default"])({}, args, {
     status: "success"
-  }, "Look at me!");
+  }), "Look at me!");
 };
 exports.Success = Success;
-var Warning = function Warning() {
-  return (0, _react2.jsx)(_index.FieldHelperText, {
+var Warning = function Warning(args) {
+  return (0, _react2.jsx)(_index.FieldHelperText, (0, _extends2["default"])({}, args, {
     status: "warning"
-  }, "Look at me!");
+  }), "Look at me!");
 };
 exports.Warning = Warning;

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

@@ -40,9 +40,6 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_FileInputField["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
       }
     }
   },
@@ -107,15 +104,15 @@ var Default = function Default(args) {
   }, args));
 };
 exports.Default = Default;
-var CustomButtonText = function CustomButtonText() {
-  return (0, _react2.jsx)(_index.FileInputField, {
+var CustomButtonText = function CustomButtonText(args) {
+  return (0, _react2.jsx)(_index.FileInputField, (0, _extends2["default"])({}, args, {
     defaultButtonText: "Original Button Name",
     label: "Custom Button Text",
     sx: fitContentWidthSx
-  });
+  }));
 };
 exports.CustomButtonText = CustomButtonText;
-var ControlledState = function ControlledState() {
+var ControlledState = function ControlledState(args) {
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     userFiles = _useState2[0],
@@ -144,7 +141,7 @@ var ControlledState = function ControlledState() {
     setUserFiles([]);
     setError(null);
   };
-  return (0, _react2.jsx)(_index.FileInputField, {
+  return (0, _react2.jsx)(_index.FileInputField, (0, _extends2["default"])({}, args, {
     label: "Controlled State With limit on file size upload below 2 mb",
     onFileSelect: handleFileSelect,
     onRemove: handleFileRemove,
@@ -153,7 +150,7 @@ var ControlledState = function ControlledState() {
     status: error && _statuses["default"].ERROR,
     helperText: error,
     isMultiple: true
-  });
+  }));
 };
 exports.ControlledState = ControlledState;
 var DefaultFileListUncontrolled = function DefaultFileListUncontrolled() {
@@ -177,8 +174,8 @@ var DefaultFileListUncontrolled = function DefaultFileListUncontrolled() {
   });
 };
 exports.DefaultFileListUncontrolled = DefaultFileListUncontrolled;
-var ErrorStatusSingleFile = function ErrorStatusSingleFile() {
-  return (0, _react2.jsx)(_index.FileInputField, {
+var ErrorStatusSingleFile = function ErrorStatusSingleFile(args) {
+  return (0, _react2.jsx)(_index.FileInputField, (0, _extends2["default"])({}, args, {
     defaultFileList: [{
       id: 'test-id3',
       name: 'PingId Desktop (Windows)',
@@ -189,11 +186,11 @@ var ErrorStatusSingleFile = function ErrorStatusSingleFile() {
     sx: fitContentWidthSx,
     helperText: "There is an error",
     status: _statuses["default"].ERROR
-  });
+  }));
 };
 exports.ErrorStatusSingleFile = ErrorStatusSingleFile;
-var ErrorWithMultipleFiles = function ErrorWithMultipleFiles() {
-  return (0, _react2.jsx)(_index.FileInputField, {
+var ErrorWithMultipleFiles = function ErrorWithMultipleFiles(args) {
+  return (0, _react2.jsx)(_index.FileInputField, (0, _extends2["default"])({}, args, {
     defaultFileList: [{
       id: 'test-id3',
       name: 'PingId Desktop (Windows)',
@@ -208,10 +205,10 @@ var ErrorWithMultipleFiles = function ErrorWithMultipleFiles() {
     sx: fitContentWidthSx,
     helperText: "There is an error but helperText text will be default since no status passed",
     isMultiple: true
-  });
+  }));
 };
 exports.ErrorWithMultipleFiles = ErrorWithMultipleFiles;
-var WithCustomWidth = function WithCustomWidth() {
+var WithCustomWidth = function WithCustomWidth(args) {
   var textSx = {
     textOverflow: 'ellipsis',
     overflow: 'hidden',
@@ -219,7 +216,7 @@ var WithCustomWidth = function WithCustomWidth() {
   };
   return (0, _react2.jsx)(_index.Box, {
     width: 200
-  }, (0, _react2.jsx)(_index.FileInputField, {
+  }, (0, _react2.jsx)(_index.FileInputField, (0, _extends2["default"])({}, args, {
     defaultButtonText: "Long Long Button Text With A Lot of Words In It",
     defaultFileList: [{
       id: 'test-id1',
@@ -231,7 +228,7 @@ var WithCustomWidth = function WithCustomWidth() {
       sx: textSx
     },
     isMultiple: true
-  }));
+  })));
 };
 exports.WithCustomWidth = WithCustomWidth;
 var WithFileTypePdfAndImage = function WithFileTypePdfAndImage() {

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

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

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

@@ -6,6 +6,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Default = 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");
@@ -19,17 +20,41 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Grid["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Grid', 'Text']
+      }
+    }
+  },
+  argTypes: {
+    repeat: {
+      options: ['fit', 'fill'],
+      control: {
+        type: 'select'
+      }
+    },
+    gap: {
+      control: {
+        type: 'number'
+      }
+    },
+    width: {
+      control: false
+    },
+    columns: {
+      control: false
     }
   }
 };
 exports["default"] = _default;
-var Default = function Default() {
+var Default = function Default(args) {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Text, {
     mb: "sm",
     fontStyle: "italic"
-  }, "Minimum width of child elements at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, {
+  }, "Minimum width of child elements at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, (0, _extends2["default"])({
     width: [128, null, 192]
-  }, (0, _react2.jsx)(_index.Box, {
+  }, args), (0, _react2.jsx)(_index.Box, {
     bg: "accent.90"
   }, "Box"), (0, _react2.jsx)(_index.Box, {
     bg: "neutral.80"
@@ -41,10 +66,10 @@ var Default = function Default() {
     mt: "xl",
     mb: "sm",
     fontStyle: "italic"
-  }, "Defined number of equally-sized columns at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, {
+  }, "Defined number of equally-sized columns at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, (0, _extends2["default"])({
     gap: 2,
     columns: [2, null, 4]
-  }, (0, _react2.jsx)(_index.Box, {
+  }, args), (0, _react2.jsx)(_index.Box, {
     bg: "accent.90"
   }, "Box"), (0, _react2.jsx)(_index.Box, {
     bg: "neutral.80"
@@ -56,10 +81,10 @@ var Default = function Default() {
     mt: "xl",
     mb: "sm",
     fontStyle: "italic"
-  }, "Columns using grid syntax sizing at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, {
+  }, "Columns using grid syntax sizing at responsive breakpoints"), (0, _react2.jsx)(_index.Grid, (0, _extends2["default"])({
     gap: 2,
     columns: [2, '1fr 2fr']
-  }, (0, _react2.jsx)(_index.Box, {
+  }, args), (0, _react2.jsx)(_index.Box, {
     bg: "accent.90"
   }, "Box"), (0, _react2.jsx)(_index.Box, {
     bg: "neutral.80"

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

@@ -23,6 +23,11 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_HelpHint["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'HelpHint', 'Link', 'Text']
+      }
     }
   },
   argTypes: {
@@ -50,10 +55,10 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.helpHint["default"]
   }
 };
-var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
+var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps(args) {
   return (0, _react2.jsx)(_index.Box, {
     p: 100
-  }, (0, _react2.jsx)(_index.HelpHint, {
+  }, (0, _react2.jsx)(_index.HelpHint, (0, _extends2["default"])({}, args, {
     popoverProps: {
       'data-testid': 'popover-container'
     },
@@ -61,13 +66,13 @@ var WithPopoverAndIconButtonProps = function WithPopoverAndIconButtonProps() {
       'aria-label': 'Help hint'
     },
     direction: "bottom"
-  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
+  }), "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
 };
 exports.WithPopoverAndIconButtonProps = WithPopoverAndIconButtonProps;
-var ContentWithLink = function ContentWithLink() {
+var ContentWithLink = function ContentWithLink(args) {
   return (0, _react2.jsx)(_index.Box, {
     p: 100
-  }, (0, _react2.jsx)(_index.HelpHint, null, (0, _react2.jsx)(_index.Text, {
+  }, (0, _react2.jsx)(_index.HelpHint, args, (0, _react2.jsx)(_index.Text, {
     variant: "popover"
   }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"), (0, _react2.jsx)(_index.Link, {
     variant: "popover",
@@ -90,11 +95,11 @@ var WithDelay = function WithDelay(args) {
   })));
 };
 exports.WithDelay = WithDelay;
-var Customization = function Customization() {
+var Customization = function Customization(args) {
   return (0, _react2.jsx)(_index.Box, {
     p: 100
-  }, (0, _react2.jsx)(_index.HelpHint, {
+  }, (0, _react2.jsx)(_index.HelpHint, (0, _extends2["default"])({}, args, {
     direction: "bottom"
-  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
+  }), "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"));
 };
 exports.Customization = Customization;

package/lib/cjs/components/HelpHint/HelpHint.styles.js

@@ -57,7 +57,8 @@ exports.hintButton = hintButton;
 var popoverContainer = _objectSpread(_objectSpread({}, _TooltipStyles.container), {}, {
   p: '10px',
   fontSize: 'sm',
-  fontWeight: 1
+  fontWeight: 1,
+  fontFamily: 'standard'
 });
 var _default = {
   hintButton: hintButton,

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

@@ -42,9 +42,15 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Icon["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/mdi-react/AccountGroupIcon': 'AccountGroupIcon',
+        '@pingux/mdi-react/AccountIcon': 'AccountIcon',
+        '@pingux/mdi-react/LockIcon': 'LockIcon',
+        '@pingux/mdi-react/SearchIcon': 'SearchIcon',
+        '@pingux/mdi-react/TagIcon': 'TagIcon'
       }
     }
   },
@@ -88,7 +94,7 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.icon["default"]
   }
 };
-var SVGIcons = function SVGIcons() {
+var SVGIcons = function SVGIcons(args) {
   // SVGR can used to convert .svg files to components instead of doing this manually
   var SVGComponent = function SVGComponent(props) {
     var id = (0, _uuid.v4)();
@@ -104,11 +110,11 @@ var SVGIcons = function SVGIcons() {
       d: "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
     }));
   };
-  return (0, _react2.jsx)(_index.Icon, {
+  return (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({}, args, {
     icon: SVGComponent,
     color: "active",
     size: "sm"
-  });
+  }));
 };
 exports.SVGIcons = SVGIcons;
 var rowHeadings = ['SVG Size', 'Code Example', 'Icon Example'];
@@ -171,6 +177,9 @@ var Sizes = function Sizes() {
   })))));
 };
 exports.Sizes = Sizes;
+Sizes.parameters = {
+  codesandbox: false
+};
 var CommonlyUsed = function CommonlyUsed() {
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
     isRow: true,
@@ -239,4 +248,7 @@ var CommonlyUsed = function CommonlyUsed() {
     fontFamily: "monospace"
   }, "import TagIcon from '@pingux/mdi-react/TagIcon'; ")));
 };
-exports.CommonlyUsed = CommonlyUsed;
+exports.CommonlyUsed = CommonlyUsed;
+CommonlyUsed.parameters = {
+  codesandbox: false
+};

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

@@ -24,9 +24,13 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_IconBadge["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/mdi-react/AccountGroupIcon': 'GroupIcon',
+        '@pingux/mdi-react/ArrowTopRightThickIcon': 'ArrowIcon',
+        '@pingux/astro': ['Box', 'Icon', 'IconBadge']
       }
     }
   }

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

@@ -6,7 +6,7 @@ export default _default;
 export declare const Default: StoryFn<IconButtonProps>;
 export declare const Inverted: StoryFn<IconButtonProps>;
 export declare const WithTooltip: {
-    (): React.JSX.Element;
+    (args: any): React.JSX.Element;
     parameters: {
         design: {
             type: string;
@@ -30,6 +30,7 @@ export declare const Sizes: {
             type: string;
             url: string;
         };
+        codesandbox: boolean;
     };
 };
 export declare const CommonlyUsed: {
@@ -39,5 +40,6 @@ export declare const CommonlyUsed: {
             type: string;
             url: string;
         };
+        codesandbox: boolean;
     };
 };

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

@@ -28,9 +28,16 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_IconButton["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['Box', 'Icon', 'IconButton', 'Text'],
+        '@pingux/mdi-react/CreateIcon': 'CreateIcon',
+        '@pingux/mdi-react/DeleteIcon': 'DeleteIcon',
+        '@pingux/mdi-react/DotsVerticalIcon': 'DotsVerticalIcon',
+        '@pingux/mdi-react/PencilIcon': 'PencilIcon',
+        '@pingux/mdi-react/PlusIcon': 'PlusIcon'
       }
     }
   },
@@ -74,11 +81,11 @@ Inverted.parameters = {
     url: _figmaLinks.FIGMA_LINKS.iconButton.inverted
   }
 };
-var WithTooltip = function WithTooltip() {
-  return (0, _react2.jsx)(_index.IconButton, {
+var WithTooltip = function WithTooltip(args) {
+  return (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
     "aria-label": "icon button with tooltip",
     title: "Edit"
-  }, (0, _react2.jsx)(_index.Icon, {
+  }, args), (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
     size: "sm",
     title: {
@@ -220,7 +227,8 @@ Sizes.parameters = {
   design: {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.iconButton.sizes
-  }
+  },
+  codesandbox: false
 };
 var CommonlyUsed = function CommonlyUsed() {
   return (
@@ -549,5 +557,6 @@ CommonlyUsed.parameters = {
   design: {
     type: 'figma',
     url: _figmaLinks.FIGMA_LINKS.iconButton.commonlyUsed
-  }
+  },
+  codesandbox: false
 };

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

@@ -28,6 +28,13 @@ var _default = {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_IconButtonToggle["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
       }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['IconButtonToggle'],
+        '@pingux/mdi-react/EyeOffOutlineIcon': 'EyeOffIcon',
+        '@pingux/mdi-react/EyeOutlineIcon': 'EyeIcon'
+      }
     }
   }
 };

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

@@ -30,9 +30,12 @@ var _default = {
     docs: {
       page: function page() {
         return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_IconWrapper["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
-      },
-      source: {
-        type: 'code'
+      }
+    },
+    codesandbox: {
+      mapComponent: {
+        '@pingux/astro': ['IconWrapper'],
+        '@pingux/mdi-react/DeleteIcon': 'DeleteIcon'
       }
     }
   },

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

@@ -1,37 +1,5 @@
-import React from 'react';
 import { StoryFn } from '@storybook/react';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<Omit<import("../../types/image").ImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
-    parameters: {
-        docs: {
-            page: () => React.JSX.Element;
-        };
-    };
-    argTypes: {
-        isDisabled: {};
-        variant: {
-            control: {
-                type: string;
-            };
-        };
-        as: {
-            control: {
-                type: string;
-                options: any;
-            };
-        };
-        src: {
-            control: {
-                type: string;
-            };
-        };
-    };
-    args: {
-        as: string;
-        src: 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;
 export declare const Avatar: StoryFn;