@storybook/components 7.0.0-alpha.13 → 7.0.0-alpha.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/html.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import{a as p,da as e,ea as r}from"./chunk-LLX7EXC4.mjs";import"./chunk-S7OMGUUK.mjs";import{a as t}from"./chunk-CGLRSHNT.mjs";import"./chunk-YVBGO3YY.mjs";import"./chunk-QR7ITAPP.mjs";import{e as o}from"./chunk-OFUVGIED.mjs";o();import n from"util-deprecate";var s=n(()=>{},t`
1
+ import{a as p,da as e,ea as r}from"./chunk-EIX4N5H4.mjs";import"./chunk-DVII4Z7I.mjs";import{a as t}from"./chunk-CGLRSHNT.mjs";import"./chunk-YVBGO3YY.mjs";import"./chunk-QR7ITAPP.mjs";import{e as o}from"./chunk-OFUVGIED.mjs";o();import n from"util-deprecate";var s=n(()=>{},t`
2
2
  The entry point '@storybook/components/html' is deprecated. Please use '@storybook/components' directly instead.
3
3
 
4
4
  See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-storybook-components-html-entry-point
package/dist/index.d.ts CHANGED
@@ -1,121 +1,121 @@
1
1
  import * as react from 'react';
2
- import react__default, { ComponentProps, FunctionComponent, AnchorHTMLAttributes, MouseEvent, ReactNode, ReactElement, Component, RefObject, SyntheticEvent, ElementType } from 'react';
2
+ import react__default, { ComponentProps, FC, AnchorHTMLAttributes, MouseEvent, ReactNode, FunctionComponent, ReactElement, Component, RefObject, SyntheticEvent, DetailedHTMLProps, ButtonHTMLAttributes, ElementType } from 'react';
3
3
  import * as _storybook_theming from '@storybook/theming';
4
4
  import { Theme, CSSObject } from '@storybook/theming';
5
5
  import { BuiltInParserName } from 'prettier';
6
6
  import * as react_textarea_autosize from 'react-textarea-autosize';
7
7
 
8
- declare const A: _storybook_theming.StyledComponent<any, {
9
- theme: _storybook_theming.Theme;
8
+ declare const A: _storybook_theming.StyledComponent<react.AnchorHTMLAttributes<HTMLAnchorElement> & {
9
+ children?: react.ReactNode;
10
10
  } & {
11
- theme: _storybook_theming.Theme;
12
- }, _storybook_theming.Theme>;
13
-
14
- declare const Blockquote: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>, {
15
- theme: _storybook_theming.Theme;
16
- } & {
17
- theme: _storybook_theming.Theme;
18
- }, _storybook_theming.Theme>;
19
-
20
- declare const DefaultCodeBlock: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLElement>, HTMLElement>, {
21
- theme: _storybook_theming.Theme;
22
- }, _storybook_theming.Theme>;
11
+ theme?: _storybook_theming.Theme;
12
+ }, {}, {}>;
13
+
14
+ declare const Blockquote: _storybook_theming.StyledComponent<{
15
+ theme?: _storybook_theming.Theme;
16
+ as?: react.ElementType<any>;
17
+ }, react.DetailedHTMLProps<react.BlockquoteHTMLAttributes<HTMLElement>, HTMLElement>, {}>;
18
+
19
+ declare const DefaultCodeBlock: _storybook_theming.StyledComponent<{
20
+ theme?: _storybook_theming.Theme;
21
+ as?: react__default.ElementType<any>;
22
+ }, react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
23
23
  declare const Code: ({ className, children, ...props }: ComponentProps<typeof DefaultCodeBlock>) => JSX.Element;
24
24
 
25
- declare const Div: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
26
- theme: _storybook_theming.Theme;
27
- }, _storybook_theming.Theme>;
28
-
29
- declare const DL: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, {
30
- theme: _storybook_theming.Theme;
31
- }, _storybook_theming.Theme>;
32
-
33
- declare const H1: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
34
- theme: _storybook_theming.Theme;
35
- } & {
36
- theme: _storybook_theming.Theme;
37
- }, _storybook_theming.Theme>;
38
-
39
- declare const H2: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
40
- theme: _storybook_theming.Theme;
41
- } & {
42
- theme: _storybook_theming.Theme;
43
- }, _storybook_theming.Theme>;
44
-
45
- declare const H3: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
46
- theme: _storybook_theming.Theme;
47
- } & {
48
- theme: _storybook_theming.Theme;
49
- }, _storybook_theming.Theme>;
50
-
51
- declare const H4: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
52
- theme: _storybook_theming.Theme;
53
- } & {
54
- theme: _storybook_theming.Theme;
55
- }, _storybook_theming.Theme>;
56
-
57
- declare const H5: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
58
- theme: _storybook_theming.Theme;
59
- } & {
60
- theme: _storybook_theming.Theme;
61
- }, _storybook_theming.Theme>;
62
-
63
- declare const H6: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
64
- theme: _storybook_theming.Theme;
65
- } & {
66
- theme: _storybook_theming.Theme;
67
- }, _storybook_theming.Theme>;
68
-
69
- declare const HR: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, Pick<react.ClassAttributes<HTMLHRElement> & react.HTMLAttributes<HTMLHRElement>, keyof react.HTMLAttributes<HTMLHRElement>>, _storybook_theming.Theme>;
70
-
71
- declare const Img: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, Pick<react.ClassAttributes<HTMLImageElement> & react.ImgHTMLAttributes<HTMLImageElement>, keyof react.ImgHTMLAttributes<HTMLImageElement>>, _storybook_theming.Theme>;
72
-
73
- declare const LI: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
74
- theme: _storybook_theming.Theme;
75
- } & {
76
- theme: _storybook_theming.Theme;
77
- }, _storybook_theming.Theme>;
78
-
79
- declare const OL: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {
80
- theme: _storybook_theming.Theme;
81
- }, _storybook_theming.Theme>;
82
-
83
- declare const P: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
84
- theme: _storybook_theming.Theme;
85
- } & {
86
- theme: _storybook_theming.Theme;
87
- }, _storybook_theming.Theme>;
88
-
89
- declare const Pre: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLPreElement>, HTMLPreElement>, {
90
- theme: _storybook_theming.Theme;
91
- } & {
92
- theme: _storybook_theming.Theme;
93
- }, _storybook_theming.Theme>;
94
-
95
- declare const Span: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
96
- theme: _storybook_theming.Theme;
97
- } & {
98
- theme: _storybook_theming.Theme;
99
- }, _storybook_theming.Theme>;
100
-
101
- declare const Table: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {
102
- theme: _storybook_theming.Theme;
103
- } & {
104
- theme: _storybook_theming.Theme;
105
- }, _storybook_theming.Theme>;
106
-
107
- declare const TT: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, {
108
- theme: _storybook_theming.Theme;
109
- }, _storybook_theming.Theme>;
110
-
111
- declare const UL: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
112
- theme: _storybook_theming.Theme;
113
- }, _storybook_theming.Theme>;
25
+ declare const Div: _storybook_theming.StyledComponent<{
26
+ theme?: _storybook_theming.Theme;
27
+ as?: react.ElementType<any>;
28
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
29
+
30
+ declare const DL: _storybook_theming.StyledComponent<{
31
+ theme?: _storybook_theming.Theme;
32
+ as?: react.ElementType<any>;
33
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDListElement>, HTMLDListElement>, {}>;
34
+
35
+ declare const H1: _storybook_theming.StyledComponent<{
36
+ theme?: _storybook_theming.Theme;
37
+ as?: react.ElementType<any>;
38
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
39
+
40
+ declare const H2: _storybook_theming.StyledComponent<{
41
+ theme?: _storybook_theming.Theme;
42
+ as?: react.ElementType<any>;
43
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
44
+
45
+ declare const H3: _storybook_theming.StyledComponent<{
46
+ theme?: _storybook_theming.Theme;
47
+ as?: react.ElementType<any>;
48
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
49
+
50
+ declare const H4: _storybook_theming.StyledComponent<{
51
+ theme?: _storybook_theming.Theme;
52
+ as?: react.ElementType<any>;
53
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
54
+
55
+ declare const H5: _storybook_theming.StyledComponent<{
56
+ theme?: _storybook_theming.Theme;
57
+ as?: react.ElementType<any>;
58
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
59
+
60
+ declare const H6: _storybook_theming.StyledComponent<{
61
+ theme?: _storybook_theming.Theme;
62
+ as?: react.ElementType<any>;
63
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {}>;
64
+
65
+ declare const HR: _storybook_theming.StyledComponent<{
66
+ theme?: _storybook_theming.Theme;
67
+ as?: react.ElementType<any>;
68
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLHRElement>, HTMLHRElement>, {}>;
69
+
70
+ declare const Img: _storybook_theming.StyledComponent<{
71
+ theme?: _storybook_theming.Theme;
72
+ as?: react.ElementType<any>;
73
+ }, react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
74
+
75
+ declare const LI: _storybook_theming.StyledComponent<{
76
+ theme?: _storybook_theming.Theme;
77
+ as?: react.ElementType<any>;
78
+ }, react.DetailedHTMLProps<react.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
79
+
80
+ declare const OL: _storybook_theming.StyledComponent<{
81
+ theme?: _storybook_theming.Theme;
82
+ as?: react.ElementType<any>;
83
+ }, react.DetailedHTMLProps<react.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, {}>;
84
+
85
+ declare const P: _storybook_theming.StyledComponent<{
86
+ theme?: _storybook_theming.Theme;
87
+ as?: react.ElementType<any>;
88
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
89
+
90
+ declare const Pre: _storybook_theming.StyledComponent<{
91
+ theme?: _storybook_theming.Theme;
92
+ as?: react.ElementType<any>;
93
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLPreElement>, HTMLPreElement>, {}>;
94
+
95
+ declare const Span: _storybook_theming.StyledComponent<{
96
+ theme?: _storybook_theming.Theme;
97
+ as?: react.ElementType<any>;
98
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
99
+
100
+ declare const Table: _storybook_theming.StyledComponent<{
101
+ theme?: _storybook_theming.Theme;
102
+ as?: react.ElementType<any>;
103
+ }, react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
104
+
105
+ declare const TT: _storybook_theming.StyledComponent<{
106
+ theme?: _storybook_theming.Theme;
107
+ as?: react.ElementType<any>;
108
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLTitleElement>, HTMLTitleElement>, {}>;
109
+
110
+ declare const UL: _storybook_theming.StyledComponent<{
111
+ theme?: _storybook_theming.Theme;
112
+ as?: react.ElementType<any>;
113
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
114
114
 
115
115
  interface BadgeProps {
116
116
  status: 'positive' | 'negative' | 'neutral' | 'warning' | 'critical';
117
117
  }
118
- declare const Badge: FunctionComponent<BadgeProps>;
118
+ declare const Badge: FC<BadgeProps>;
119
119
 
120
120
  interface LinkStylesProps {
121
121
  secondary?: boolean;
@@ -136,9 +136,12 @@ interface LinkProps extends LinkInnerProps, LinkStylesProps {
136
136
  onClick?: (e: MouseEvent) => void;
137
137
  href?: string;
138
138
  }
139
- declare const Link$1: FunctionComponent<LinkProps & AProps>;
139
+ declare const Link$1: FC<LinkProps & AProps>;
140
140
 
141
- declare const DocumentWrapper: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}, _storybook_theming.Theme>;
141
+ declare const DocumentWrapper: _storybook_theming.StyledComponent<{
142
+ theme?: _storybook_theming.Theme;
143
+ as?: react.ElementType<any>;
144
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
142
145
 
143
146
  interface SyntaxHighlighterRendererProps {
144
147
  rows: any[];
@@ -171,7 +174,7 @@ interface SyntaxHighlighterBaseProps {
171
174
  }
172
175
  declare type SyntaxHighlighterProps = SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps;
173
176
 
174
- declare const LazySyntaxHighlighter: react__default.LazyExoticComponent<react__default.FunctionComponent<SyntaxHighlighterProps>>;
177
+ declare const LazySyntaxHighlighter: react__default.LazyExoticComponent<react__default.FC<SyntaxHighlighterProps>>;
175
178
  declare const SyntaxHighlighter: (props: ComponentProps<typeof LazySyntaxHighlighter>) => JSX.Element;
176
179
 
177
180
  declare function createCopyToClipboardFunction(): (text: string) => any;
@@ -185,7 +188,7 @@ interface ActionItem {
185
188
  interface ActionBarProps {
186
189
  actionItems: ActionItem[];
187
190
  }
188
- declare const ActionBar: FunctionComponent<ActionBarProps>;
191
+ declare const ActionBar: FC<ActionBarProps>;
189
192
 
190
193
  interface SpacedProps {
191
194
  children?: react__default.ReactNode;
@@ -193,7 +196,7 @@ interface SpacedProps {
193
196
  row?: number;
194
197
  outer?: number | boolean;
195
198
  }
196
- declare const Spaced: FunctionComponent<SpacedProps>;
199
+ declare const Spaced: FC<SpacedProps>;
197
200
 
198
201
  interface PlaceholderProps {
199
202
  children?: react__default.ReactNode;
@@ -206,7 +209,7 @@ interface ScrollAreaProps {
206
209
  vertical?: boolean;
207
210
  className?: string;
208
211
  }
209
- declare const ScrollArea: FunctionComponent<ScrollAreaProps>;
212
+ declare const ScrollArea: FC<ScrollAreaProps>;
210
213
 
211
214
  declare type ZoomProps = {
212
215
  scale: number;
@@ -234,7 +237,10 @@ declare const Zoom: {
234
237
  IFrame: typeof ZoomIFrame;
235
238
  };
236
239
 
237
- declare const ButtonWrapper: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
240
+ declare const ButtonWrapper: _storybook_theming.StyledComponent<{
241
+ theme?: _storybook_theming.Theme;
242
+ as?: react__default.ElementType<any>;
243
+ } & {
238
244
  isLink?: boolean;
239
245
  primary?: boolean;
240
246
  secondary?: boolean;
@@ -247,41 +253,55 @@ declare const ButtonWrapper: _storybook_theming.StyledComponent<react__default.D
247
253
  containsIcon?: boolean;
248
254
  children?: ReactNode;
249
255
  href?: string;
250
- }, _storybook_theming.Theme>;
251
- declare const Button: FunctionComponent<ComponentProps<typeof ButtonWrapper>>;
256
+ }, react__default.DetailedHTMLProps<react__default.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
257
+ declare const Button: FC<ComponentProps<typeof ButtonWrapper>>;
252
258
 
253
259
  interface FieldProps {
254
260
  children?: ReactNode;
255
261
  label?: ReactNode;
256
262
  }
257
263
 
258
- declare const Form: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, Pick<react.ClassAttributes<HTMLFormElement> & react.FormHTMLAttributes<HTMLFormElement>, keyof react.FormHTMLAttributes<HTMLFormElement>>, _storybook_theming.Theme> & {
259
- Field: react.FunctionComponent<FieldProps>;
260
- Input: _storybook_theming.StyledComponent<any, {
264
+ declare const Form: _storybook_theming.StyledComponent<{
265
+ theme?: _storybook_theming.Theme;
266
+ as?: react.ElementType<any>;
267
+ }, react.DetailedHTMLProps<react.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {}> & {
268
+ Field: react.FC<FieldProps>;
269
+ Input: _storybook_theming.StyledComponent<Pick<Omit<react.HTMLProps<HTMLInputElement>, "height" | "size" | "valid" | "align"> & {
261
270
  size?: "flex" | "auto" | "100%";
262
- align?: "start" | "center" | "end";
271
+ align?: "center" | "end" | "start";
263
272
  valid?: "valid" | "error" | "warn";
264
273
  height?: number;
265
- }, _storybook_theming.Theme> & {
274
+ }, "className" | "color" | "content" | "height" | "translate" | "width" | "default" | "hidden" | "href" | "children" | "download" | "hrefLang" | "media" | "rel" | "target" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "cite" | "data" | "form" | "label" | "span" | "summary" | "pattern" | "list" | "step" | "start" | "disabled" | "wrap" | "key" | "as" | "size" | "open" | "multiple" | "cellPadding" | "cellSpacing" | "alt" | "crossOrigin" | "sizes" | "src" | "srcSet" | "useMap" | "value" | "reversed" | "max" | "method" | "min" | "name" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "valid" | "align" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "async" | "autoComplete" | "autoPlay" | "capture" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "encType" | "frameBorder" | "headers" | "high" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "required" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "wmode"> & react.RefAttributes<any> & {
275
+ theme?: _storybook_theming.Theme;
276
+ } & {
277
+ size?: "flex" | "auto" | "100%";
278
+ align?: "center" | "end" | "start";
279
+ valid?: "valid" | "error" | "warn";
280
+ height?: number;
281
+ }, {}, {}> & {
266
282
  displayName: string;
267
283
  };
268
- Select: _storybook_theming.StyledComponent<any, Omit<react.SelectHTMLAttributes<HTMLSelectElement>, "height" | "size" | "valid" | "align"> & {
284
+ Select: _storybook_theming.StyledComponent<Omit<react.SelectHTMLAttributes<HTMLSelectElement>, "height" | "size" | "valid" | "align"> & {
269
285
  size?: "flex" | "auto" | "100%";
270
- align?: "start" | "center" | "end";
286
+ align?: "center" | "end" | "start";
271
287
  valid?: "valid" | "error" | "warn";
272
288
  height?: number;
273
- }, _storybook_theming.Theme> & {
289
+ } & react.RefAttributes<any> & {
290
+ theme?: _storybook_theming.Theme;
291
+ }, {}, {}> & {
274
292
  displayName: string;
275
293
  };
276
- Textarea: _storybook_theming.StyledComponent<any, Omit<react_textarea_autosize.TextareaAutosizeProps, "height" | "size" | "valid" | "align"> & {
294
+ Textarea: _storybook_theming.StyledComponent<Omit<react_textarea_autosize.TextareaAutosizeProps, "height" | "size" | "valid" | "align"> & {
277
295
  size?: "flex" | "auto" | "100%";
278
- align?: "start" | "center" | "end";
296
+ align?: "center" | "end" | "start";
279
297
  valid?: "valid" | "error" | "warn";
280
298
  height?: number;
281
- }, _storybook_theming.Theme> & {
299
+ } & react.RefAttributes<any> & {
300
+ theme?: _storybook_theming.Theme;
301
+ }, {}, {}> & {
282
302
  displayName: string;
283
303
  };
284
- Button: react.FunctionComponent<any>;
304
+ Button: react.FC<any>;
285
305
  };
286
306
 
287
307
  declare const top: "top";
@@ -450,11 +470,11 @@ interface WithTooltipPureProps {
450
470
  onDoubleClick?: () => void;
451
471
  }
452
472
 
453
- declare const LazyWithTooltip: react__default.LazyExoticComponent<react__default.FunctionComponent<WithTooltipPureProps & {
473
+ declare const LazyWithTooltip: react__default.LazyExoticComponent<react__default.FC<WithTooltipPureProps & {
454
474
  startOpen?: boolean;
455
475
  }>>;
456
476
  declare const WithTooltip: (props: ComponentProps<typeof LazyWithTooltip>) => JSX.Element;
457
- declare const LazyWithTooltipPure: react__default.LazyExoticComponent<react__default.FunctionComponent<WithTooltipPureProps>>;
477
+ declare const LazyWithTooltipPure: react__default.LazyExoticComponent<react__default.FC<WithTooltipPureProps>>;
458
478
  declare const WithTooltipPure: (props: ComponentProps<typeof LazyWithTooltipPure>) => JSX.Element;
459
479
 
460
480
  interface TooltipMessageProps {
@@ -466,18 +486,21 @@ interface TooltipMessageProps {
466
486
  onClick?: () => void;
467
487
  }[];
468
488
  }
469
- declare const TooltipMessage: FunctionComponent<TooltipMessageProps>;
489
+ declare const TooltipMessage: FC<TooltipMessageProps>;
470
490
 
471
491
  interface TooltipNoteProps {
472
492
  note: string;
473
493
  }
474
- declare const TooltipNote: FunctionComponent<TooltipNoteProps>;
494
+ declare const TooltipNote: FC<TooltipNoteProps>;
475
495
 
476
496
  interface ItemProps {
477
497
  disabled?: boolean;
478
498
  }
479
- declare const Item: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, ItemProps, _storybook_theming.Theme>;
480
- declare type LinkWrapperType = FunctionComponent<any>;
499
+ declare const Item: _storybook_theming.StyledComponent<{
500
+ theme?: _storybook_theming.Theme;
501
+ as?: react__default.ElementType<any>;
502
+ } & ItemProps, react__default.DetailedHTMLProps<react__default.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
503
+ declare type LinkWrapperType = FC<any>;
481
504
  interface ListItemProps extends Omit<ComponentProps<typeof Item>, 'href' | 'title'> {
482
505
  loading?: boolean;
483
506
  left?: ReactNode;
@@ -499,15 +522,18 @@ interface TooltipLinkListProps {
499
522
  links: Link[];
500
523
  LinkWrapper?: LinkWrapperType;
501
524
  }
502
- declare const TooltipLinkList: FunctionComponent<TooltipLinkListProps>;
525
+ declare const TooltipLinkList: FC<TooltipLinkListProps>;
503
526
 
504
- declare const TabBar: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<react__default.ClassAttributes<HTMLDivElement> & react__default.HTMLAttributes<HTMLDivElement>, keyof react__default.HTMLAttributes<HTMLDivElement>>, _storybook_theming.Theme>;
527
+ declare const TabBar: _storybook_theming.StyledComponent<{
528
+ theme?: _storybook_theming.Theme;
529
+ as?: react__default.ElementType<any>;
530
+ }, react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
505
531
  interface TabWrapperProps {
506
532
  active: boolean;
507
533
  render?: () => JSX.Element;
508
534
  children?: ReactNode;
509
535
  }
510
- declare const TabWrapper: FunctionComponent<TabWrapperProps>;
536
+ declare const TabWrapper: FC<TabWrapperProps>;
511
537
  interface TabsProps {
512
538
  children?: FuncChildren[] | ReactNode;
513
539
  id?: string;
@@ -520,7 +546,7 @@ interface TabsProps {
520
546
  absolute?: boolean;
521
547
  bordered?: boolean;
522
548
  }
523
- declare const Tabs: FunctionComponent<TabsProps>;
549
+ declare const Tabs: FC<TabsProps>;
524
550
  declare type FuncChildren = ({ active }: {
525
551
  active: boolean;
526
552
  }) => JSX.Element;
@@ -543,31 +569,50 @@ declare class TabsState extends Component<TabsStateProps, TabsStateState> {
543
569
  render(): JSX.Element;
544
570
  }
545
571
 
572
+ interface BarButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
573
+ href?: void;
574
+ }
575
+ interface BarLinkProps extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> {
576
+ href: string;
577
+ }
546
578
  interface TabButtonProps {
547
579
  active?: boolean;
548
580
  textColor?: string;
549
581
  }
550
- declare const TabButton: _storybook_theming.StyledComponent<any, TabButtonProps, _storybook_theming.Theme>;
582
+ declare const TabButton: _storybook_theming.StyledComponent<((BarButtonProps | BarLinkProps) & {
583
+ theme?: _storybook_theming.Theme;
584
+ }) & TabButtonProps, {}, {}>;
551
585
  interface IconButtonProps {
552
586
  active?: boolean;
553
587
  disabled?: boolean;
554
588
  }
555
- declare const IconButton: _storybook_theming.StyledComponent<any, IconButtonProps, _storybook_theming.Theme>;
589
+ declare const IconButton: _storybook_theming.StyledComponent<((BarButtonProps | BarLinkProps) & {
590
+ theme?: _storybook_theming.Theme;
591
+ }) & IconButtonProps, {}, {}>;
556
592
  declare const IconButtonSkeleton: () => JSX.Element;
557
593
 
558
- declare const Separator: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, SeparatorProps, _storybook_theming.Theme>;
594
+ declare const Separator: _storybook_theming.StyledComponent<{
595
+ theme?: _storybook_theming.Theme;
596
+ as?: react__default.ElementType<any>;
597
+ } & SeparatorProps, react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
559
598
  declare const interleaveSeparators: (list: any[]) => any;
560
599
  interface SeparatorProps {
561
600
  force?: boolean;
562
601
  }
563
602
 
564
- declare const Bar: _storybook_theming.StyledComponent<any, Pick<any, string | number | symbol>, _storybook_theming.Theme>;
603
+ declare const Bar: _storybook_theming.StyledComponent<ScrollAreaProps & {
604
+ children?: react__default.ReactNode;
605
+ } & {
606
+ theme?: _storybook_theming.Theme;
607
+ } & {
608
+ border?: boolean;
609
+ }, {}, {}>;
565
610
  interface FlexBarProps {
566
611
  border?: boolean;
567
612
  children?: any;
568
613
  backgroundColor?: string;
569
614
  }
570
- declare const FlexBar: FunctionComponent<FlexBarProps>;
615
+ declare const FlexBar: FC<FlexBarProps>;
571
616
 
572
617
  interface AddonPanelProps {
573
618
  active: boolean;
@@ -753,7 +798,10 @@ declare type IconKey = keyof typeof icons;
753
798
  interface SvgProps {
754
799
  inline?: boolean;
755
800
  }
756
- declare const Svg: _storybook_theming.StyledComponent<react.SVGProps<SVGSVGElement>, SvgProps, _storybook_theming.Theme>;
801
+ declare const Svg: _storybook_theming.StyledComponent<{
802
+ theme?: _storybook_theming.Theme;
803
+ as?: react.ElementType<any>;
804
+ } & SvgProps, react.SVGProps<SVGSVGElement>, {}>;
757
805
 
758
806
  interface IconsProps extends ComponentProps<typeof Svg> {
759
807
  icon?: IconKey;
@@ -765,13 +813,16 @@ interface SymbolsProps extends ComponentProps<typeof Svg> {
765
813
  }
766
814
  declare const Symbols: react__default.NamedExoticComponent<SymbolsProps>;
767
815
 
768
- declare const StorybookLogo: FunctionComponent<{
816
+ declare const StorybookLogo: FC<{
769
817
  alt: string;
770
818
  }>;
771
819
 
772
- declare const StorybookIcon: FunctionComponent<{}>;
820
+ declare const StorybookIcon: FC;
773
821
 
774
- declare const ProgressWrapper: _storybook_theming.StyledComponent<react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<react__default.ClassAttributes<HTMLDivElement> & react__default.HTMLAttributes<HTMLDivElement>, keyof react__default.HTMLAttributes<HTMLDivElement>>, _storybook_theming.Theme>;
822
+ declare const ProgressWrapper: _storybook_theming.StyledComponent<{
823
+ theme?: _storybook_theming.Theme;
824
+ as?: react__default.ElementType<any>;
825
+ }, react__default.DetailedHTMLProps<react__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
775
826
  interface Progress {
776
827
  value: number;
777
828
  message: string;
@@ -785,8 +836,8 @@ interface LoaderProps {
785
836
  error?: Error;
786
837
  size?: number;
787
838
  }
788
- declare const PureLoader: FunctionComponent<LoaderProps & ComponentProps<typeof ProgressWrapper>>;
789
- declare const Loader: FunctionComponent<ComponentProps<typeof PureLoader>>;
839
+ declare const PureLoader: FC<LoaderProps & ComponentProps<typeof ProgressWrapper>>;
840
+ declare const Loader: FC<ComponentProps<typeof PureLoader>>;
790
841
 
791
842
  declare const getStoryHref: (baseUrl: string, storyId: string, additionalParams?: Record<string, string>) => string;
792
843
 
@@ -803,7 +854,10 @@ declare const nameSpaceClassNames: ({ ...props }: {
803
854
  * because the CSS specificity is too high, so those styles can too
804
855
  * easily override child elements that are not expecting it.
805
856
  */
806
- declare const ResetWrapper: _storybook_theming.StyledComponent<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}, _storybook_theming.Theme>;
857
+ declare const ResetWrapper: _storybook_theming.StyledComponent<{
858
+ theme?: _storybook_theming.Theme;
859
+ as?: react.ElementType<any>;
860
+ }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
807
861
 
808
862
  declare const codeCommon: ({ theme }: {
809
863
  theme: Theme;