@storybook/components

  • Version 7.6.17
  • Published
  • 3.96 MB
  • 10 dependencies
  • MIT license

Install

npm i @storybook/components
yarn add @storybook/components
pnpm add @storybook/components

Overview

Core Storybook Components

Index

Variables

variable A

const A: _storybook_theming.StyledComponent<any, {}, {}>;

    variable ActionBar

    const ActionBar: FC<ActionBarProps>;

      variable afterMain

      const afterMain: string;

        variable afterRead

        const afterRead: string;

          variable afterWrite

          const afterWrite: string;

            variable Badge

            const Badge: FC<BadgeProps>;

              variable Bar

              const Bar: _storybook_theming.StyledComponent<
              ScrollAreaProps & { children?: React__default.ReactNode } & {
              scrollable?: boolean;
              } & { theme?: _storybook_theming.Theme } & {
              border?: boolean;
              scrollable?: boolean;
              },
              {},
              {}
              >;

                variable beforeMain

                const beforeMain: string;

                  variable beforeRead

                  const beforeRead: string;

                    variable beforeWrite

                    const beforeWrite: string;

                      variable Blockquote

                      const Blockquote: _storybook_theming.StyledComponent<
                      { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                      React$1.DetailedHTMLProps<
                      React$1.BlockquoteHTMLAttributes<HTMLElement>,
                      HTMLElement
                      >,
                      {}
                      >;

                        variable bottom

                        const bottom: string;

                          variable Button

                          const Button: FC<
                          ComponentProps<
                          _storybook_theming.StyledComponent<
                          {
                          theme?: _storybook_theming.Theme;
                          as?: React__default.ElementType<any>;
                          } & {
                          isLink?: boolean;
                          primary?: boolean;
                          secondary?: boolean;
                          tertiary?: boolean;
                          gray?: boolean;
                          inForm?: boolean;
                          disabled?: boolean;
                          small?: boolean;
                          outline?: boolean;
                          containsIcon?: boolean;
                          children?: ReactNode;
                          href?: string;
                          },
                          React__default.DetailedHTMLProps<
                          React__default.ButtonHTMLAttributes<HTMLButtonElement>,
                          HTMLButtonElement
                          >,
                          {}
                          >
                          >
                          >;

                            variable ButtonWrapper

                            const ButtonWrapper: _storybook_theming.StyledComponent<
                            { theme?: _storybook_theming.Theme; as?: React__default.ElementType<any> } & {
                            isLink?: boolean;
                            primary?: boolean;
                            secondary?: boolean;
                            tertiary?: boolean;
                            gray?: boolean;
                            inForm?: boolean;
                            disabled?: boolean;
                            small?: boolean;
                            outline?: boolean;
                            containsIcon?: boolean;
                            children?: ReactNode;
                            href?: string;
                            },
                            React__default.DetailedHTMLProps<
                            React__default.ButtonHTMLAttributes<HTMLButtonElement>,
                            HTMLButtonElement
                            >,
                            {}
                            >;

                              variable components

                              const components: {
                              h1: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLHeadingElement>,
                              HTMLHeadingElement
                              >
                              ) => React$1.JSX.Element;
                              h2: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLHeadingElement>,
                              HTMLHeadingElement
                              >
                              ) => React$1.JSX.Element;
                              h3: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLHeadingElement>,
                              HTMLHeadingElement
                              >
                              ) => React$1.JSX.Element;
                              h4: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLHeadingElement>,
                              HTMLHeadingElement
                              >
                              ) => React$1.JSX.Element;
                              h5: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLHeadingElement>,
                              HTMLHeadingElement
                              >
                              ) => React$1.JSX.Element;
                              h6: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLHeadingElement>,
                              HTMLHeadingElement
                              >
                              ) => React$1.JSX.Element;
                              pre: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLPreElement>,
                              HTMLPreElement
                              >
                              ) => React$1.JSX.Element;
                              a: (
                              props: React$1.DetailedHTMLProps<
                              React$1.AnchorHTMLAttributes<HTMLAnchorElement>,
                              HTMLAnchorElement
                              >
                              ) => React$1.JSX.Element;
                              hr: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLHRElement>,
                              HTMLHRElement
                              >
                              ) => React$1.JSX.Element;
                              dl: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLDListElement>,
                              HTMLDListElement
                              >
                              ) => React$1.JSX.Element;
                              blockquote: (
                              props: React$1.DetailedHTMLProps<
                              React$1.BlockquoteHTMLAttributes<HTMLElement>,
                              HTMLElement
                              >
                              ) => React$1.JSX.Element;
                              table: (
                              props: React$1.DetailedHTMLProps<
                              React$1.TableHTMLAttributes<HTMLTableElement>,
                              HTMLTableElement
                              >
                              ) => React$1.JSX.Element;
                              img: (
                              props: React$1.DetailedHTMLProps<
                              React$1.ImgHTMLAttributes<HTMLImageElement>,
                              HTMLImageElement
                              >
                              ) => React$1.JSX.Element;
                              div: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLDivElement>,
                              HTMLDivElement
                              >
                              ) => React$1.JSX.Element;
                              span: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLSpanElement>,
                              HTMLSpanElement
                              >
                              ) => React$1.JSX.Element;
                              li: (
                              props: React$1.DetailedHTMLProps<
                              React$1.LiHTMLAttributes<HTMLLIElement>,
                              HTMLLIElement
                              >
                              ) => React$1.JSX.Element;
                              ul: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLUListElement>,
                              HTMLUListElement
                              >
                              ) => React$1.JSX.Element;
                              ol: (
                              props: React$1.DetailedHTMLProps<
                              React$1.OlHTMLAttributes<HTMLOListElement>,
                              HTMLOListElement
                              >
                              ) => React$1.JSX.Element;
                              p: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLParagraphElement>,
                              HTMLParagraphElement
                              >
                              ) => React$1.JSX.Element;
                              code: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLElement>,
                              HTMLElement
                              >
                              ) => React$1.JSX.Element;
                              tt: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLTitleElement>,
                              HTMLTitleElement
                              >
                              ) => React$1.JSX.Element;
                              resetwrapper: (
                              props: React$1.DetailedHTMLProps<
                              React$1.HTMLAttributes<HTMLDivElement>,
                              HTMLDivElement
                              >
                              ) => React$1.JSX.Element;
                              };

                                variable DefaultCodeBlock

                                const DefaultCodeBlock: _storybook_theming.StyledComponent<
                                { theme?: _storybook_theming.Theme; as?: React__default.ElementType<any> },
                                React__default.DetailedHTMLProps<
                                React__default.HTMLAttributes<HTMLElement>,
                                HTMLElement
                                >,
                                {}
                                >;

                                  variable Div

                                  const Div: _storybook_theming.StyledComponent<
                                  { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                  React$1.DetailedHTMLProps<
                                  React$1.HTMLAttributes<HTMLDivElement>,
                                  HTMLDivElement
                                  >,
                                  {}
                                  >;

                                    variable DL

                                    const DL: _storybook_theming.StyledComponent<
                                    { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                    React$1.DetailedHTMLProps<
                                    React$1.HTMLAttributes<HTMLDListElement>,
                                    HTMLDListElement
                                    >,
                                    {}
                                    >;

                                      variable DocumentWrapper

                                      const DocumentWrapper: _storybook_theming.StyledComponent<
                                      { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                      React$1.DetailedHTMLProps<
                                      React$1.HTMLAttributes<HTMLDivElement>,
                                      HTMLDivElement
                                      >,
                                      {}
                                      >;

                                        variable ErrorFormatter

                                        const ErrorFormatter: FC<{ error: Error }>;

                                          variable FlexBar

                                          const FlexBar: FC<FlexBarProps>;

                                            variable Form

                                            const Form: any;

                                              variable H1

                                              const H1: _storybook_theming.StyledComponent<
                                              { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                              React$1.DetailedHTMLProps<
                                              React$1.HTMLAttributes<HTMLHeadingElement>,
                                              HTMLHeadingElement
                                              >,
                                              {}
                                              >;

                                                variable H2

                                                const H2: _storybook_theming.StyledComponent<
                                                { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                React$1.DetailedHTMLProps<
                                                React$1.HTMLAttributes<HTMLHeadingElement>,
                                                HTMLHeadingElement
                                                >,
                                                {}
                                                >;

                                                  variable H3

                                                  const H3: _storybook_theming.StyledComponent<
                                                  { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                  React$1.DetailedHTMLProps<
                                                  React$1.HTMLAttributes<HTMLHeadingElement>,
                                                  HTMLHeadingElement
                                                  >,
                                                  {}
                                                  >;

                                                    variable H4

                                                    const H4: _storybook_theming.StyledComponent<
                                                    { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                    React$1.DetailedHTMLProps<
                                                    React$1.HTMLAttributes<HTMLHeadingElement>,
                                                    HTMLHeadingElement
                                                    >,
                                                    {}
                                                    >;

                                                      variable H5

                                                      const H5: _storybook_theming.StyledComponent<
                                                      { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                      React$1.DetailedHTMLProps<
                                                      React$1.HTMLAttributes<HTMLHeadingElement>,
                                                      HTMLHeadingElement
                                                      >,
                                                      {}
                                                      >;

                                                        variable H6

                                                        const H6: _storybook_theming.StyledComponent<
                                                        { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                        React$1.DetailedHTMLProps<
                                                        React$1.HTMLAttributes<HTMLHeadingElement>,
                                                        HTMLHeadingElement
                                                        >,
                                                        {}
                                                        >;

                                                          variable HR

                                                          const HR: _storybook_theming.StyledComponent<
                                                          { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                          React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHRElement>, HTMLHRElement>,
                                                          {}
                                                          >;

                                                            variable IconButton

                                                            const IconButton: _storybook_theming.StyledComponent<any, {}, {}>;

                                                              variable icons

                                                              const icons: {
                                                              readonly user: React__default.JSX.Element;
                                                              readonly useralt: React__default.JSX.Element;
                                                              readonly useradd: React__default.JSX.Element;
                                                              readonly users: React__default.JSX.Element;
                                                              readonly profile: React__default.JSX.Element;
                                                              readonly facehappy: React__default.JSX.Element;
                                                              readonly faceneutral: React__default.JSX.Element;
                                                              readonly facesad: React__default.JSX.Element;
                                                              readonly accessibility: React__default.JSX.Element;
                                                              readonly accessibilityalt: React__default.JSX.Element;
                                                              readonly arrowup: React__default.JSX.Element;
                                                              readonly arrowdown: React__default.JSX.Element;
                                                              readonly arrowleft: React__default.JSX.Element;
                                                              readonly arrowright: React__default.JSX.Element;
                                                              readonly arrowupalt: React__default.JSX.Element;
                                                              readonly arrowdownalt: React__default.JSX.Element;
                                                              readonly arrowleftalt: React__default.JSX.Element;
                                                              readonly arrowrightalt: React__default.JSX.Element;
                                                              readonly expandalt: React__default.JSX.Element;
                                                              readonly collapse: React__default.JSX.Element;
                                                              readonly expand: React__default.JSX.Element;
                                                              readonly unfold: React__default.JSX.Element;
                                                              readonly transfer: React__default.JSX.Element;
                                                              readonly redirect: React__default.JSX.Element;
                                                              readonly undo: React__default.JSX.Element;
                                                              readonly reply: React__default.JSX.Element;
                                                              readonly sync: React__default.JSX.Element;
                                                              readonly upload: React__default.JSX.Element;
                                                              readonly download: React__default.JSX.Element;
                                                              readonly back: React__default.JSX.Element;
                                                              readonly proceed: React__default.JSX.Element;
                                                              readonly refresh: React__default.JSX.Element;
                                                              readonly globe: React__default.JSX.Element;
                                                              readonly compass: React__default.JSX.Element;
                                                              readonly location: React__default.JSX.Element;
                                                              readonly pin: React__default.JSX.Element;
                                                              readonly time: React__default.JSX.Element;
                                                              readonly dashboard: React__default.JSX.Element;
                                                              readonly timer: React__default.JSX.Element;
                                                              readonly home: React__default.JSX.Element;
                                                              readonly admin: React__default.JSX.Element;
                                                              readonly info: React__default.JSX.Element;
                                                              readonly question: React__default.JSX.Element;
                                                              readonly support: React__default.JSX.Element;
                                                              readonly alert: React__default.JSX.Element;
                                                              readonly email: React__default.JSX.Element;
                                                              readonly phone: React__default.JSX.Element;
                                                              readonly link: React__default.JSX.Element;
                                                              readonly unlink: React__default.JSX.Element;
                                                              readonly bell: React__default.JSX.Element;
                                                              readonly rss: React__default.JSX.Element;
                                                              readonly sharealt: React__default.JSX.Element;
                                                              readonly share: React__default.JSX.Element;
                                                              readonly circlehollow: React__default.JSX.Element;
                                                              readonly circle: React__default.JSX.Element;
                                                              readonly bookmarkhollow: React__default.JSX.Element;
                                                              readonly bookmark: React__default.JSX.Element;
                                                              readonly hearthollow: React__default.JSX.Element;
                                                              readonly heart: React__default.JSX.Element;
                                                              readonly starhollow: React__default.JSX.Element;
                                                              readonly star: React__default.JSX.Element;
                                                              readonly certificate: React__default.JSX.Element;
                                                              readonly verified: React__default.JSX.Element;
                                                              readonly thumbsup: React__default.JSX.Element;
                                                              readonly shield: React__default.JSX.Element;
                                                              readonly basket: React__default.JSX.Element;
                                                              readonly beaker: React__default.JSX.Element;
                                                              readonly hourglass: React__default.JSX.Element;
                                                              readonly flag: React__default.JSX.Element;
                                                              readonly cloudhollow: React__default.JSX.Element;
                                                              readonly cloud: React__default.JSX.Element;
                                                              readonly edit: React__default.JSX.Element;
                                                              readonly cog: React__default.JSX.Element;
                                                              readonly nut: React__default.JSX.Element;
                                                              readonly wrench: React__default.JSX.Element;
                                                              readonly ellipsis: React__default.JSX.Element;
                                                              readonly check: React__default.JSX.Element;
                                                              readonly form: React__default.JSX.Element;
                                                              readonly batchdeny: React__default.JSX.Element;
                                                              readonly batchaccept: React__default.JSX.Element;
                                                              readonly controls: React__default.JSX.Element;
                                                              readonly plus: React__default.JSX.Element;
                                                              readonly closeAlt: React__default.JSX.Element;
                                                              readonly cross: React__default.JSX.Element;
                                                              readonly trash: React__default.JSX.Element;
                                                              readonly pinalt: React__default.JSX.Element;
                                                              readonly unpin: React__default.JSX.Element;
                                                              readonly add: React__default.JSX.Element;
                                                              readonly subtract: React__default.JSX.Element;
                                                              readonly close: React__default.JSX.Element;
                                                              readonly delete: React__default.JSX.Element;
                                                              readonly passed: React__default.JSX.Element;
                                                              readonly changed: React__default.JSX.Element;
                                                              readonly failed: React__default.JSX.Element;
                                                              readonly clear: React__default.JSX.Element;
                                                              readonly comment: React__default.JSX.Element;
                                                              readonly commentadd: React__default.JSX.Element;
                                                              readonly requestchange: React__default.JSX.Element;
                                                              readonly comments: React__default.JSX.Element;
                                                              readonly lock: React__default.JSX.Element;
                                                              readonly unlock: React__default.JSX.Element;
                                                              readonly key: React__default.JSX.Element;
                                                              readonly outbox: React__default.JSX.Element;
                                                              readonly credit: React__default.JSX.Element;
                                                              readonly button: React__default.JSX.Element;
                                                              readonly type: React__default.JSX.Element;
                                                              readonly pointerdefault: React__default.JSX.Element;
                                                              readonly pointerhand: React__default.JSX.Element;
                                                              readonly browser: React__default.JSX.Element;
                                                              readonly tablet: React__default.JSX.Element;
                                                              readonly mobile: React__default.JSX.Element;
                                                              readonly watch: React__default.JSX.Element;
                                                              readonly sidebar: React__default.JSX.Element;
                                                              readonly sidebaralt: React__default.JSX.Element;
                                                              readonly sidebaralttoggle: React__default.JSX.Element;
                                                              readonly sidebartoggle: React__default.JSX.Element;
                                                              readonly bottombar: React__default.JSX.Element;
                                                              readonly bottombartoggle: React__default.JSX.Element;
                                                              readonly cpu: React__default.JSX.Element;
                                                              readonly database: React__default.JSX.Element;
                                                              readonly memory: React__default.JSX.Element;
                                                              readonly structure: React__default.JSX.Element;
                                                              readonly box: React__default.JSX.Element;
                                                              readonly power: React__default.JSX.Element;
                                                              readonly photo: React__default.JSX.Element;
                                                              readonly component: React__default.JSX.Element;
                                                              readonly grid: React__default.JSX.Element;
                                                              readonly outline: React__default.JSX.Element;
                                                              readonly photodrag: React__default.JSX.Element;
                                                              readonly search: React__default.JSX.Element;
                                                              readonly zoom: React__default.JSX.Element;
                                                              readonly zoomout: React__default.JSX.Element;
                                                              readonly zoomreset: React__default.JSX.Element;
                                                              readonly eye: React__default.JSX.Element;
                                                              readonly eyeclose: React__default.JSX.Element;
                                                              readonly lightning: React__default.JSX.Element;
                                                              readonly lightningoff: React__default.JSX.Element;
                                                              readonly contrast: React__default.JSX.Element;
                                                              readonly switchalt: React__default.JSX.Element;
                                                              readonly mirror: React__default.JSX.Element;
                                                              readonly grow: React__default.JSX.Element;
                                                              readonly paintbrush: React__default.JSX.Element;
                                                              readonly ruler: React__default.JSX.Element;
                                                              readonly stop: React__default.JSX.Element;
                                                              readonly camera: React__default.JSX.Element;
                                                              readonly video: React__default.JSX.Element;
                                                              readonly speaker: React__default.JSX.Element;
                                                              readonly play: React__default.JSX.Element;
                                                              readonly playback: React__default.JSX.Element;
                                                              readonly playnext: React__default.JSX.Element;
                                                              readonly rewind: React__default.JSX.Element;
                                                              readonly fastforward: React__default.JSX.Element;
                                                              readonly stopalt: React__default.JSX.Element;
                                                              readonly sidebyside: React__default.JSX.Element;
                                                              readonly stacked: React__default.JSX.Element;
                                                              readonly sun: React__default.JSX.Element;
                                                              readonly moon: React__default.JSX.Element;
                                                              readonly book: React__default.JSX.Element;
                                                              readonly document: React__default.JSX.Element;
                                                              readonly copy: React__default.JSX.Element;
                                                              readonly category: React__default.JSX.Element;
                                                              readonly folder: React__default.JSX.Element;
                                                              readonly print: React__default.JSX.Element;
                                                              readonly graphline: React__default.JSX.Element;
                                                              readonly calendar: React__default.JSX.Element;
                                                              readonly graphbar: React__default.JSX.Element;
                                                              readonly menu: React__default.JSX.Element;
                                                              readonly menualt: React__default.JSX.Element;
                                                              readonly filter: React__default.JSX.Element;
                                                              readonly docchart: React__default.JSX.Element;
                                                              readonly doclist: React__default.JSX.Element;
                                                              readonly markup: React__default.JSX.Element;
                                                              readonly bold: React__default.JSX.Element;
                                                              readonly italic: React__default.JSX.Element;
                                                              readonly paperclip: React__default.JSX.Element;
                                                              readonly listordered: React__default.JSX.Element;
                                                              readonly listunordered: React__default.JSX.Element;
                                                              readonly paragraph: React__default.JSX.Element;
                                                              readonly markdown: React__default.JSX.Element;
                                                              readonly repository: React__default.JSX.Element;
                                                              readonly commit: React__default.JSX.Element;
                                                              readonly branch: React__default.JSX.Element;
                                                              readonly pullrequest: React__default.JSX.Element;
                                                              readonly merge: React__default.JSX.Element;
                                                              readonly apple: React__default.JSX.Element;
                                                              readonly linux: React__default.JSX.Element;
                                                              readonly ubuntu: React__default.JSX.Element;
                                                              readonly windows: React__default.JSX.Element;
                                                              readonly storybook: React__default.JSX.Element;
                                                              readonly azuredevops: React__default.JSX.Element;
                                                              readonly bitbucket: React__default.JSX.Element;
                                                              readonly chrome: React__default.JSX.Element;
                                                              readonly chromatic: React__default.JSX.Element;
                                                              readonly componentdriven: React__default.JSX.Element;
                                                              readonly discord: React__default.JSX.Element;
                                                              readonly facebook: React__default.JSX.Element;
                                                              readonly figma: React__default.JSX.Element;
                                                              readonly gdrive: React__default.JSX.Element;
                                                              readonly github: React__default.JSX.Element;
                                                              readonly gitlab: React__default.JSX.Element;
                                                              readonly google: React__default.JSX.Element;
                                                              readonly graphql: React__default.JSX.Element;
                                                              readonly medium: React__default.JSX.Element;
                                                              readonly redux: React__default.JSX.Element;
                                                              readonly twitter: React__default.JSX.Element;
                                                              readonly youtube: React__default.JSX.Element;
                                                              readonly vscode: React__default.JSX.Element;
                                                              };

                                                                variable Icons

                                                                const Icons: FunctionComponent<IconsProps>;

                                                                  variable Img

                                                                  const Img: _storybook_theming.StyledComponent<
                                                                  { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                  React$1.DetailedHTMLProps<
                                                                  React$1.ImgHTMLAttributes<HTMLImageElement>,
                                                                  HTMLImageElement
                                                                  >,
                                                                  {}
                                                                  >;

                                                                    variable Item

                                                                    const Item: _storybook_theming.StyledComponent<
                                                                    {
                                                                    theme?: _storybook_theming.Theme;
                                                                    as?: React__default.ElementType<any>;
                                                                    } & ItemProps,
                                                                    React__default.DetailedHTMLProps<
                                                                    React__default.AnchorHTMLAttributes<HTMLAnchorElement>,
                                                                    HTMLAnchorElement
                                                                    >,
                                                                    {}
                                                                    >;

                                                                      variable LazySyntaxHighlighter

                                                                      const LazySyntaxHighlighter: React__default.LazyExoticComponent<
                                                                      (
                                                                      props: SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps
                                                                      ) => React__default.JSX.Element
                                                                      >;

                                                                        variable LazySyntaxHighlighterWithFormatter

                                                                        const LazySyntaxHighlighterWithFormatter: React__default.LazyExoticComponent<
                                                                        (
                                                                        props: SyntaxHighlighterBaseProps & SyntaxHighlighterCustomProps
                                                                        ) => React__default.JSX.Element
                                                                        >;

                                                                          variable LazyWithTooltip

                                                                          const LazyWithTooltip: React__default.LazyExoticComponent<
                                                                          React__default.FC<
                                                                          Omit<WithTooltipPureProps, 'onVisibleChange'> & {
                                                                          startOpen?: boolean;
                                                                          onVisibleChange?: (visible: boolean) => boolean | void;
                                                                          }
                                                                          >
                                                                          >;

                                                                            variable LazyWithTooltipPure

                                                                            const LazyWithTooltipPure: React__default.LazyExoticComponent<
                                                                            React__default.FC<WithTooltipPureProps>
                                                                            >;

                                                                              variable left

                                                                              const left: string;

                                                                                variable LI

                                                                                const LI: _storybook_theming.StyledComponent<
                                                                                { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                                React$1.DetailedHTMLProps<
                                                                                React$1.LiHTMLAttributes<HTMLLIElement>,
                                                                                HTMLLIElement
                                                                                >,
                                                                                {}
                                                                                >;
                                                                                  const Link: FC<any>;

                                                                                    variable ListItem

                                                                                    const ListItem: FC<ListItemProps>;

                                                                                      variable Loader

                                                                                      const Loader: FC<any>;

                                                                                        variable main

                                                                                        const main: string;

                                                                                          variable OL

                                                                                          const OL: _storybook_theming.StyledComponent<
                                                                                          { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                                          React$1.DetailedHTMLProps<
                                                                                          React$1.OlHTMLAttributes<HTMLOListElement>,
                                                                                          HTMLOListElement
                                                                                          >,
                                                                                          {}
                                                                                          >;

                                                                                            variable P

                                                                                            const P: _storybook_theming.StyledComponent<
                                                                                            { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                                            React$1.DetailedHTMLProps<
                                                                                            React$1.HTMLAttributes<HTMLParagraphElement>,
                                                                                            HTMLParagraphElement
                                                                                            >,
                                                                                            {}
                                                                                            >;

                                                                                              variable Placeholder

                                                                                              const Placeholder: FunctionComponent<PlaceholderProps>;

                                                                                                variable Pre

                                                                                                const Pre: _storybook_theming.StyledComponent<
                                                                                                { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                                                React$1.DetailedHTMLProps<
                                                                                                React$1.HTMLAttributes<HTMLPreElement>,
                                                                                                HTMLPreElement
                                                                                                >,
                                                                                                {}
                                                                                                >;

                                                                                                  variable ProgressWrapper

                                                                                                  const ProgressWrapper: _storybook_theming.StyledComponent<
                                                                                                  { theme?: _storybook_theming.Theme; as?: React__default.ElementType<any> },
                                                                                                  React__default.DetailedHTMLProps<
                                                                                                  React__default.HTMLAttributes<HTMLDivElement>,
                                                                                                  HTMLDivElement
                                                                                                  >,
                                                                                                  {}
                                                                                                  >;

                                                                                                    variable read

                                                                                                    const read: string;

                                                                                                      variable resetComponents

                                                                                                      const resetComponents: Record<string, ElementType>;

                                                                                                        variable ResetWrapper

                                                                                                        const ResetWrapper: _storybook_theming.StyledComponent<
                                                                                                        { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                                                        React$1.DetailedHTMLProps<
                                                                                                        React$1.HTMLAttributes<HTMLDivElement>,
                                                                                                        HTMLDivElement
                                                                                                        >,
                                                                                                        {}
                                                                                                        >;
                                                                                                        • This is a "local" reset to style subtrees with Storybook styles

                                                                                                          We can't style individual elements (e.g. h1, h2, etc.) in here because the CSS specificity is too high, so those styles can too easily override child elements that are not expecting it.

                                                                                                        const right: string;

                                                                                                          variable ScrollArea

                                                                                                          const ScrollArea: FC<ScrollAreaProps>;

                                                                                                            variable Separator

                                                                                                            const Separator: _storybook_theming.StyledComponent<
                                                                                                            {
                                                                                                            theme?: _storybook_theming.Theme;
                                                                                                            as?: React__default.ElementType<any>;
                                                                                                            } & SeparatorProps,
                                                                                                            React__default.DetailedHTMLProps<
                                                                                                            React__default.HTMLAttributes<HTMLSpanElement>,
                                                                                                            HTMLSpanElement
                                                                                                            >,
                                                                                                            {}
                                                                                                            >;

                                                                                                              variable Spaced

                                                                                                              const Spaced: FC<SpacedProps>;

                                                                                                                variable Span

                                                                                                                const Span: _storybook_theming.StyledComponent<
                                                                                                                { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                                                                React$1.DetailedHTMLProps<
                                                                                                                React$1.HTMLAttributes<HTMLSpanElement>,
                                                                                                                HTMLSpanElement
                                                                                                                >,
                                                                                                                {}
                                                                                                                >;

                                                                                                                  variable StorybookIcon

                                                                                                                  const StorybookIcon: FC;
                                                                                                                    const StorybookLogo: FC<{ alt: string }>;

                                                                                                                      variable Svg

                                                                                                                      const Svg: _storybook_theming.StyledComponent<
                                                                                                                      { theme?: _storybook_theming.Theme; as?: React__default.ElementType<any> },
                                                                                                                      React__default.SVGProps<SVGSVGElement>,
                                                                                                                      {}
                                                                                                                      >;

                                                                                                                        variable Symbols

                                                                                                                        const Symbols: React__default.NamedExoticComponent<SymbolsProps>;

                                                                                                                          variable SyntaxHighlighter

                                                                                                                          const SyntaxHighlighter: {
                                                                                                                          (
                                                                                                                          props:
                                                                                                                          | ComponentProps<typeof LazySyntaxHighlighter>
                                                                                                                          | ComponentProps<typeof LazySyntaxHighlighterWithFormatter>
                                                                                                                          ): React__default.JSX.Element;
                                                                                                                          registerLanguage(name: string, func: any): void;
                                                                                                                          };

                                                                                                                            variable TabBar

                                                                                                                            const TabBar: _storybook_theming.StyledComponent<
                                                                                                                            { theme?: _storybook_theming.Theme; as?: React__default.ElementType<any> },
                                                                                                                            React__default.DetailedHTMLProps<
                                                                                                                            React__default.HTMLAttributes<HTMLDivElement>,
                                                                                                                            HTMLDivElement
                                                                                                                            >,
                                                                                                                            {}
                                                                                                                            >;

                                                                                                                              variable TabButton

                                                                                                                              const TabButton: _storybook_theming.StyledComponent<any, {}, {}>;

                                                                                                                                variable Table

                                                                                                                                const Table: _storybook_theming.StyledComponent<
                                                                                                                                { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                                                                                React$1.DetailedHTMLProps<
                                                                                                                                React$1.TableHTMLAttributes<HTMLTableElement>,
                                                                                                                                HTMLTableElement
                                                                                                                                >,
                                                                                                                                {}
                                                                                                                                >;

                                                                                                                                  variable Tabs

                                                                                                                                  const Tabs: FC<TabsProps>;

                                                                                                                                    variable TabWrapper

                                                                                                                                    const TabWrapper: FC<TabWrapperProps>;

                                                                                                                                      variable TargetContainer

                                                                                                                                      const TargetContainer: _storybook_theming.StyledComponent<
                                                                                                                                      { theme?: _storybook_theming.Theme; as?: React__default.ElementType<any> } & {
                                                                                                                                      trigger: Config['trigger'];
                                                                                                                                      },
                                                                                                                                      React__default.DetailedHTMLProps<
                                                                                                                                      React__default.HTMLAttributes<HTMLDivElement>,
                                                                                                                                      HTMLDivElement
                                                                                                                                      >,
                                                                                                                                      {}
                                                                                                                                      >;
                                                                                                                                        const TooltipLinkList: FC<TooltipLinkListProps>;

                                                                                                                                          variable TooltipMessage

                                                                                                                                          const TooltipMessage: FC<TooltipMessageProps>;

                                                                                                                                            variable TooltipNote

                                                                                                                                            const TooltipNote: FC<TooltipNoteProps>;

                                                                                                                                              variable top

                                                                                                                                              const top: string;

                                                                                                                                                variable TT

                                                                                                                                                const TT: _storybook_theming.StyledComponent<
                                                                                                                                                { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                                                                                                React$1.DetailedHTMLProps<
                                                                                                                                                React$1.HTMLAttributes<HTMLTitleElement>,
                                                                                                                                                HTMLTitleElement
                                                                                                                                                >,
                                                                                                                                                {}
                                                                                                                                                >;

                                                                                                                                                  variable UL

                                                                                                                                                  const UL: _storybook_theming.StyledComponent<
                                                                                                                                                  { theme?: _storybook_theming.Theme; as?: React$1.ElementType<any> },
                                                                                                                                                  React$1.DetailedHTMLProps<
                                                                                                                                                  React$1.HTMLAttributes<HTMLUListElement>,
                                                                                                                                                  HTMLUListElement
                                                                                                                                                  >,
                                                                                                                                                  {}
                                                                                                                                                  >;

                                                                                                                                                    variable write

                                                                                                                                                    const write: string;

                                                                                                                                                      variable Zoom

                                                                                                                                                      const Zoom: { Element: typeof ZoomElement; IFrame: typeof ZoomIFrame };

                                                                                                                                                        Functions

                                                                                                                                                        function AddonPanel

                                                                                                                                                        AddonPanel: ({
                                                                                                                                                        active,
                                                                                                                                                        children,
                                                                                                                                                        }: AddonPanelProps) => React__default.JSX.Element;

                                                                                                                                                          function ClipboardCode

                                                                                                                                                          ClipboardCode: ({
                                                                                                                                                          code,
                                                                                                                                                          ...props
                                                                                                                                                          }: ClipboardCodeProps) => React__default.JSX.Element;

                                                                                                                                                            function Code

                                                                                                                                                            Code: ({
                                                                                                                                                            className,
                                                                                                                                                            children,
                                                                                                                                                            ...props
                                                                                                                                                            }: ComponentProps<
                                                                                                                                                            _storybook_theming.StyledComponent<
                                                                                                                                                            { theme?: _storybook_theming.Theme; as?: React__default.ElementType<any> },
                                                                                                                                                            React__default.DetailedHTMLProps<
                                                                                                                                                            React__default.HTMLAttributes<HTMLElement>,
                                                                                                                                                            HTMLElement
                                                                                                                                                            >,
                                                                                                                                                            {}
                                                                                                                                                            >
                                                                                                                                                            >) => React__default.JSX.Element;

                                                                                                                                                              function codeCommon

                                                                                                                                                              codeCommon: ({ theme }: { theme: Theme }) => CSSObject;

                                                                                                                                                                function createCopyToClipboardFunction

                                                                                                                                                                createCopyToClipboardFunction: () => (text: string) => Promise<void>;

                                                                                                                                                                  function createPopper

                                                                                                                                                                  createPopper: <TModifier extends Partial<Modifier<any, any>>>(
                                                                                                                                                                  reference: Element | VirtualElement,
                                                                                                                                                                  popper: HTMLElement,
                                                                                                                                                                  options?: Partial<OptionsGeneric<TModifier>>
                                                                                                                                                                  ) => Instance;

                                                                                                                                                                    function getStoryHref

                                                                                                                                                                    getStoryHref: (
                                                                                                                                                                    baseUrl: string,
                                                                                                                                                                    storyId: string,
                                                                                                                                                                    additionalParams?: Record<string, string>
                                                                                                                                                                    ) => string;

                                                                                                                                                                      function IconButtonSkeleton

                                                                                                                                                                      IconButtonSkeleton: () => React__default.JSX.Element;

                                                                                                                                                                        function interleaveSeparators

                                                                                                                                                                        interleaveSeparators: (list: any[]) => any;

                                                                                                                                                                          function nameSpaceClassNames

                                                                                                                                                                          nameSpaceClassNames: (
                                                                                                                                                                          { ...props }: { [x: string]: any },
                                                                                                                                                                          key: string
                                                                                                                                                                          ) => { [x: string]: any };

                                                                                                                                                                            function withReset

                                                                                                                                                                            withReset: ({ theme }: { theme: Theme }) => CSSObject;

                                                                                                                                                                              function WithTooltip

                                                                                                                                                                              WithTooltip: (
                                                                                                                                                                              props: ComponentProps<
                                                                                                                                                                              React__default.LazyExoticComponent<
                                                                                                                                                                              React__default.FC<
                                                                                                                                                                              Omit<WithTooltipPureProps, 'onVisibleChange'> & {
                                                                                                                                                                              startOpen?: boolean;
                                                                                                                                                                              onVisibleChange?: (visible: boolean) => boolean | void;
                                                                                                                                                                              }
                                                                                                                                                                              >
                                                                                                                                                                              >
                                                                                                                                                                              >
                                                                                                                                                                              ) => React__default.JSX.Element;

                                                                                                                                                                                function WithTooltipPure

                                                                                                                                                                                WithTooltipPure: (
                                                                                                                                                                                props: ComponentProps<
                                                                                                                                                                                React__default.LazyExoticComponent<React__default.FC<WithTooltipPureProps>>
                                                                                                                                                                                >
                                                                                                                                                                                ) => React__default.JSX.Element;

                                                                                                                                                                                  function ZoomElement

                                                                                                                                                                                  ZoomElement: ({ scale, children }: ZoomProps) => React__default.JSX.Element;

                                                                                                                                                                                    Classes

                                                                                                                                                                                    class TabsState

                                                                                                                                                                                    class TabsState extends Component<TabsStateProps, TabsStateState> {}

                                                                                                                                                                                      constructor

                                                                                                                                                                                      constructor(props: TabsStateProps);

                                                                                                                                                                                        property defaultProps

                                                                                                                                                                                        static defaultProps: TabsStateProps;

                                                                                                                                                                                          property handlers

                                                                                                                                                                                          handlers: { onSelect: (id: string) => void };

                                                                                                                                                                                            method render

                                                                                                                                                                                            render: () => React__default.JSX.Element;

                                                                                                                                                                                              Interfaces

                                                                                                                                                                                              interface ActionItem

                                                                                                                                                                                              interface ActionItem {}

                                                                                                                                                                                                property className

                                                                                                                                                                                                className?: string;

                                                                                                                                                                                                  property disabled

                                                                                                                                                                                                  disabled?: boolean;

                                                                                                                                                                                                    property onClick

                                                                                                                                                                                                    onClick: (e: MouseEvent<HTMLButtonElement>) => void;

                                                                                                                                                                                                      property title

                                                                                                                                                                                                      title: string | JSX.Element;

                                                                                                                                                                                                        interface IconsProps

                                                                                                                                                                                                        interface IconsProps extends ComponentProps<typeof Svg> {}

                                                                                                                                                                                                          property icon

                                                                                                                                                                                                          icon: IconType;

                                                                                                                                                                                                            property useSymbol

                                                                                                                                                                                                            useSymbol?: boolean;

                                                                                                                                                                                                              interface SyntaxHighlighterRendererProps

                                                                                                                                                                                                              interface SyntaxHighlighterRendererProps {}

                                                                                                                                                                                                                property rows

                                                                                                                                                                                                                rows: any[];

                                                                                                                                                                                                                  property stylesheet

                                                                                                                                                                                                                  stylesheet: string;

                                                                                                                                                                                                                    property useInlineStyles

                                                                                                                                                                                                                    useInlineStyles: boolean;
                                                                                                                                                                                                                      interface Link extends Omit<ListItemProps, 'onClick'> {}

                                                                                                                                                                                                                        property id

                                                                                                                                                                                                                        id: string;

                                                                                                                                                                                                                          property isGatsby

                                                                                                                                                                                                                          isGatsby?: boolean;

                                                                                                                                                                                                                            property onClick

                                                                                                                                                                                                                            onClick?: (event: SyntheticEvent, item: ListItemProps) => void;

                                                                                                                                                                                                                              Type Aliases

                                                                                                                                                                                                                              type SyntaxHighlighterFormatTypes

                                                                                                                                                                                                                              type SyntaxHighlighterFormatTypes = boolean | 'dedent' | BuiltInParserName;

                                                                                                                                                                                                                                type SyntaxHighlighterProps

                                                                                                                                                                                                                                type SyntaxHighlighterProps = SyntaxHighlighterBaseProps &
                                                                                                                                                                                                                                SyntaxHighlighterCustomProps;

                                                                                                                                                                                                                                  Package Files (1)

                                                                                                                                                                                                                                  Dependencies (10)

                                                                                                                                                                                                                                  Dev Dependencies (13)

                                                                                                                                                                                                                                  Peer Dependencies (2)

                                                                                                                                                                                                                                  Badge

                                                                                                                                                                                                                                  To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                                                                                                  You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@storybook/components.

                                                                                                                                                                                                                                  • Markdown
                                                                                                                                                                                                                                    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@storybook/components)
                                                                                                                                                                                                                                  • HTML
                                                                                                                                                                                                                                    <a href="https://www.jsdocs.io/package/@storybook/components"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>