@storybook/blocks 7.0.0-beta.8 → 7.0.0-rc.0

package/dist/Color-3YIJY6X7.mjs

@@ -0,0 +1 @@
+import{getControlId}from"./chunk-GWAJ4KRU.mjs";import React,{useCallback,useEffect,useMemo,useState}from"react";import{HexColorPicker,HslaStringColorPicker,RgbaStringColorPicker}from"react-colorful";import convert from"color-convert";import throttle from"lodash/throttle.js";import{styled}from"@storybook/theming";import{TooltipNote,WithTooltip,Form,Icons}from"@storybook/components";var Wrapper=styled.div({position:"relative",maxWidth:250}),PickerTooltip=styled(WithTooltip)({position:"absolute",zIndex:1,top:4,left:4}),TooltipContent=styled.div({width:200,margin:5,".react-colorful__saturation":{borderRadius:"4px 4px 0 0"},".react-colorful__hue":{boxShadow:"inset 0 0 0 1px rgb(0 0 0 / 5%)"},".react-colorful__last-control":{borderRadius:"0 0 4px 4px"}}),Note=styled(TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),Swatches=styled.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),SwatchColor=styled.div(({theme,active})=>({width:16,height:16,boxShadow:active?`${theme.appBorderColor} 0 0 0 1px inset, ${theme.textMutedColor}50 0 0 0 4px`:`${theme.appBorderColor} 0 0 0 1px inset`,borderRadius:theme.appBorderRadius})),swatchBackground=`url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`,Swatch=({value,active,onClick,style,...props})=>{let backgroundImage=`linear-gradient(${value}, ${value}), ${swatchBackground}, linear-gradient(#fff, #fff)`;return React.createElement(SwatchColor,{...props,active,onClick,style:{...style,backgroundImage}})},Input=styled(Form.Input)(({theme})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:theme.typography.fonts.base})),ToggleIcon=styled(Icons)(({theme})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:theme.input.color})),ColorSpace=(ColorSpace2=>(ColorSpace2.RGB="rgb",ColorSpace2.HSL="hsl",ColorSpace2.HEX="hex",ColorSpace2))(ColorSpace||{}),COLOR_SPACES=Object.values(ColorSpace),COLOR_REGEXP=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,RGB_REGEXP=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,HSL_REGEXP=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,HEX_REGEXP=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,SHORTHEX_REGEXP=/^\s*#?([0-9a-f]{3})\s*$/i,ColorPicker={["hex"]:HexColorPicker,["rgb"]:RgbaStringColorPicker,["hsl"]:HslaStringColorPicker},fallbackColor={["hex"]:"transparent",["rgb"]:"rgba(0, 0, 0, 0)",["hsl"]:"hsla(0, 0%, 0%, 0)"},stringToArgs=value=>{let match=value?.match(COLOR_REGEXP);if(!match)return[0,0,0,1];let[,x,y,z,a=1]=match;return[x,y,z,a].map(Number)},parseValue=value=>{if(!value)return;let valid=!0;if(RGB_REGEXP.test(value)){let[r,g,b,a]=stringToArgs(value),[h,s,l]=convert.rgb.hsl([r,g,b])||[0,0,0];return{valid,value,keyword:convert.rgb.keyword([r,g,b]),colorSpace:"rgb",["rgb"]:value,["hsl"]:`hsla(${h}, ${s}%, ${l}%, ${a})`,["hex"]:`#${convert.rgb.hex([r,g,b]).toLowerCase()}`}}if(HSL_REGEXP.test(value)){let[h,s,l,a]=stringToArgs(value),[r,g,b]=convert.hsl.rgb([h,s,l])||[0,0,0];return{valid,value,keyword:convert.hsl.keyword([h,s,l]),colorSpace:"hsl",["rgb"]:`rgba(${r}, ${g}, ${b}, ${a})`,["hsl"]:value,["hex"]:`#${convert.hsl.hex([h,s,l]).toLowerCase()}`}}let plain=value.replace("#",""),rgb=convert.keyword.rgb(plain)||convert.hex.rgb(plain),hsl=convert.rgb.hsl(rgb),mapped=value;if(/[^#a-f0-9]/i.test(value)?mapped=plain:HEX_REGEXP.test(value)&&(mapped=`#${plain}`),mapped.startsWith("#"))valid=HEX_REGEXP.test(mapped);else try{convert.keyword.hex(mapped)}catch{valid=!1}return{valid,value:mapped,keyword:convert.rgb.keyword(rgb),colorSpace:"hex",["rgb"]:`rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 1)`,["hsl"]:`hsla(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%, 1)`,["hex"]:mapped}},getRealValue=(value,color,colorSpace)=>{if(!value||!color?.valid)return fallbackColor[colorSpace];if(colorSpace!=="hex")return color?.[colorSpace]||fallbackColor[colorSpace];if(!color.hex.startsWith("#"))try{return`#${convert.keyword.hex(color.hex)}`}catch{return fallbackColor.hex}let short=color.hex.match(SHORTHEX_REGEXP);if(!short)return HEX_REGEXP.test(color.hex)?color.hex:fallbackColor.hex;let[r,g,b]=short[1].split("");return`#${r}${r}${g}${g}${b}${b}`},useColorInput=(initialValue,onChange)=>{let[value,setValue]=useState(initialValue||""),[color,setColor]=useState(()=>parseValue(value)),[colorSpace,setColorSpace]=useState(color?.colorSpace||"hex");useEffect(()=>{let nextValue=initialValue||"",nextColor=parseValue(nextValue);setValue(nextValue),setColor(nextColor),setColorSpace(nextColor?.colorSpace||"hex")},[initialValue]);let realValue=useMemo(()=>getRealValue(value,color,colorSpace).toLowerCase(),[value,color,colorSpace]),updateValue=useCallback(update=>{let parsed=parseValue(update),v=parsed?.value||update||"";setValue(v),v===""&&(setColor(void 0),onChange(void 0)),parsed&&(setColor(parsed),setColorSpace(parsed.colorSpace),onChange(parsed.value))},[onChange]),cycleColorSpace=useCallback(()=>{let next=COLOR_SPACES.indexOf(colorSpace)+1;next>=COLOR_SPACES.length&&(next=0),setColorSpace(COLOR_SPACES[next]);let update=color?.[COLOR_SPACES[next]]||"";setValue(update),onChange(update)},[color,colorSpace,onChange]);return{value,realValue,updateValue,color,colorSpace,cycleColorSpace}},id=value=>value.replace(/\s*/,"").toLowerCase(),usePresets=(presetColors,currentColor,colorSpace)=>{let[selectedColors,setSelectedColors]=useState(currentColor?.valid?[currentColor]:[]);useEffect(()=>{currentColor===void 0&&setSelectedColors([])},[currentColor]);let presets=useMemo(()=>(presetColors||[]).map(preset=>typeof preset=="string"?parseValue(preset):preset.title?{...parseValue(preset.color),keyword:preset.title}:parseValue(preset.color)).concat(selectedColors).filter(Boolean).slice(-27),[presetColors,selectedColors]),addPreset=useCallback(color=>{color?.valid&&(presets.some(preset=>id(preset[colorSpace])===id(color[colorSpace]))||setSelectedColors(arr=>arr.concat(color)))},[colorSpace,presets]);return{presets,addPreset}},ColorControl=({name,value:initialValue,onChange,onFocus,onBlur,presetColors,startOpen=!1})=>{let throttledOnChange=useCallback(throttle(onChange,200),[onChange]),{value,realValue,updateValue,color,colorSpace,cycleColorSpace}=useColorInput(initialValue,throttledOnChange),{presets,addPreset}=usePresets(presetColors,color,colorSpace),Picker=ColorPicker[colorSpace];return React.createElement(Wrapper,null,React.createElement(PickerTooltip,{startOpen,closeOnOutsideClick:!0,onVisibleChange:()=>addPreset(color),tooltip:React.createElement(TooltipContent,null,React.createElement(Picker,{color:realValue==="transparent"?"#000000":realValue,onChange:updateValue,onFocus,onBlur}),presets.length>0&&React.createElement(Swatches,null,presets.map((preset,index)=>React.createElement(WithTooltip,{key:`${preset.value}-${index}`,hasChrome:!1,tooltip:React.createElement(Note,{note:preset.keyword||preset.value})},React.createElement(Swatch,{value:preset[colorSpace],active:color&&id(preset[colorSpace])===id(color[colorSpace]),onClick:()=>updateValue(preset.value)})))))},React.createElement(Swatch,{value:realValue,style:{margin:4}})),React.createElement(Input,{id:getControlId(name),value,onChange:e=>updateValue(e.target.value),onFocus:e=>e.target.select(),placeholder:"Choose color..."}),value?React.createElement(ToggleIcon,{icon:"markup",onClick:cycleColorSpace}):null)},Color_default=ColorControl;export{ColorControl,Color_default as default};

package/dist/index.d.ts

@@ -1,37 +1,49 @@
-import { Conditional, Parameters, DocsContextProps, Renderer, StrictArgTypes, StoryId, ProjectAnnotations, BaseAnnotations, ModuleExports, PreparedStory, StoryAnnotations, ModuleExport, ComponentTitle } from '@storybook/types';
+import * as _storybook_types from '@storybook/types';
+import { Conditional, DocsContextProps, PreparedStory, ModuleExports, ModuleExport, Parameters as Parameters$1, StrictArgTypes, Renderer as Renderer$1, Args as Args$1, StoryId, StoryAnnotations, ResolvedModuleExportType, ResolvedModuleExportFromType, ProjectAnnotations, BaseAnnotations, ComponentTitle } from '@storybook/types';
 export { DocsContextProps } from '@storybook/types';
-import React, { FunctionComponent, ComponentProps, ReactNode, FC, ElementType, Context } from 'react';
+import React, { ComponentProps, FunctionComponent, ReactNode, FC, Context } from 'react';
+import { Renderer } from '@storybook/csf';
 import { PropDescriptor } from '@storybook/preview-api';
 import { SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from '@storybook/components';
+import { SourceType } from '@storybook/docs-tools';
 import { Channel } from '@storybook/channels';
 import { ThemeVars } from '@storybook/theming';
+import PureMarkdown from 'markdown-to-jsx';
 
 declare enum SourceError {
     NO_STORY = "There\u2019s no story here.",
     SOURCE_UNAVAILABLE = "Oh no! The source is not available."
 }
-interface SourceErrorProps {
-    isLoading?: boolean;
-    error?: SourceError;
-}
 interface SourceCodeProps {
+    /**
+     * The language the syntax highlighter uses for your story’s code
+     */
     language?: string;
+    /**
+     * Use this to override the content of the source block.
+     */
     code?: string;
+    /**
+     * The (prettier) formatter the syntax highlighter uses for your story’s code.
+     */
     format?: ComponentProps<typeof SyntaxHighlighter>['format'];
+    /**
+     * Display the source snippet in a dark mode.
+     */
     dark?: boolean;
 }
-type SourceProps$1 = SourceErrorProps & SourceCodeProps;
+interface SourceProps$1 extends SourceCodeProps {
+    isLoading?: boolean;
+    error?: SourceError;
+}
 /**
  * Syntax-highlighted source code for a component (or anything!)
  */
 declare const Source$1: FunctionComponent<SourceProps$1>;
 
-interface DescriptionProps$1 {
-    markdown: string;
-}
-
 interface PreviewProps {
     isLoading?: true;
+    layout?: Layout;
     isColumn?: boolean;
     columns?: number;
     withSource?: SourceProps$1;
@@ -41,6 +53,7 @@ interface PreviewProps {
     additionalActions?: ActionItem[];
     children?: ReactNode;
 }
+type Layout = 'padded' | 'fullscreen' | 'centered';
 
 interface ArgType {
     name?: string;
@@ -49,7 +62,7 @@ interface ArgType {
     if?: Conditional;
     [key: string]: any;
 }
-interface ArgTypes {
+interface ArgTypes$1 {
     [key: string]: ArgType;
 }
 interface Args {
@@ -75,7 +88,7 @@ interface ArgsTableOptionProps {
     sort?: SortType;
 }
 interface ArgsTableDataProps {
-    rows: ArgTypes;
+    rows: ArgTypes$1;
     args?: Args;
     globals?: Globals;
 }
@@ -94,29 +107,28 @@ declare const ArgsTable$1: FC<ArgsTableProps$1>;
 
 declare const NoControlsWarning: () => JSX.Element;
 
-declare enum StoryError {
-    NO_STORY = "No component or story to display"
+interface CommonProps {
+    story: PreparedStory;
+    inline: boolean;
+    primary: boolean;
 }
-interface CommonProps$2 {
-    title?: string;
+interface InlineStoryProps extends CommonProps {
+    inline: true;
     height?: string;
-    id: string;
+    autoplay: boolean;
+    forceInitialArgs: boolean;
+    renderStoryToElement: DocsContextProps['renderStoryToElement'];
 }
-interface InlineStoryProps extends CommonProps$2 {
-    parameters: Parameters;
-    storyFn: ElementType;
+interface IFrameStoryProps extends CommonProps {
+    inline: false;
+    height: string;
 }
-type IFrameStoryProps = CommonProps$2;
 type StoryProps$2 = InlineStoryProps | IFrameStoryProps;
 /**
  * A story element, either rendered inline or in an iframe,
  * with configurable height.
  */
-declare const Story$1: FunctionComponent<StoryProps$2 & {
-    inline?: boolean;
-    error?: StoryError;
-    children?: React.ReactNode;
-}>;
+declare const Story$1: FunctionComponent<StoryProps$2>;
 
 interface TypesetProps {
     fontFamily?: string;
@@ -174,19 +186,24 @@ interface AnchorProps {
 }
 declare const Anchor: FC<AnchorProps>;
 
-declare const DocsContext: Context<DocsContextProps<Renderer>>;
+type ArgTypesParameters = {
+    include?: PropDescriptor;
+    exclude?: PropDescriptor;
+    sort?: SortType;
+};
+type ArgTypesProps = ArgTypesParameters & {
+    of?: Renderer['component'] | ModuleExports;
+};
+declare const ArgTypes: FC<ArgTypesProps>;
 
 declare const PRIMARY_STORY = "^";
 type Component = any;
-interface StoryData {
-    id?: string;
-    kind?: string;
-    name?: string;
-    parameters?: any;
-}
-type DocsStoryProps = StoryData & {
+type DocsStoryProps = {
+    of: ModuleExport;
     expanded?: boolean;
     withToolbar?: boolean;
+    __forceInitialArgs?: boolean;
+    __primary?: boolean;
 };
 
 interface BaseProps {
@@ -207,8 +224,8 @@ type StoryProps$1 = BaseProps & {
     showComponent?: boolean;
 };
 type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps$1;
-declare const extractComponentArgTypes: (component: Component, context: DocsContextProps, include?: PropDescriptor, exclude?: PropDescriptor) => StrictArgTypes;
-declare const getComponent: (props: ArgsTableProps, context: DocsContextProps) => Component;
+declare const extractComponentArgTypes: (component: Component, parameters: Parameters$1, include?: PropDescriptor, exclude?: PropDescriptor) => StrictArgTypes;
+declare const getComponent: (props: ArgsTableProps, component: Component) => Component;
 declare const StoryTable: FC<StoryProps$1 & {
     component: Component;
     subcomponents: Record<string, Component>;
@@ -216,16 +233,21 @@ declare const StoryTable: FC<StoryProps$1 & {
 declare const ComponentsTable: FC<ComponentsProps>;
 declare const ArgsTable: FC<ArgsTableProps>;
 
+declare const DocsContext: Context<DocsContextProps<Renderer$1>>;
+
+type ArgsHash = string;
+declare function argsHash(args: Args$1): ArgsHash;
 interface SourceItem {
     code: string;
-    format: SyntaxHighlighterFormatTypes;
+    format?: SyntaxHighlighterFormatTypes;
 }
-type StorySources = Record<StoryId, SourceItem>;
+type StorySources = Record<StoryId, Record<ArgsHash, SourceItem>>;
 interface SourceContextProps {
     sources: StorySources;
     setSource?: (id: StoryId, item: SourceItem) => void;
 }
 declare const SourceContext: Context<SourceContextProps>;
+declare const UNKNOWN_ARGS_HASH = "--unknown--";
 declare const SourceContainer: FC<{
     channel: Channel;
 }>;
@@ -235,23 +257,41 @@ declare enum SourceState {
     CLOSED = "closed",
     NONE = "none"
 }
-interface CommonProps$1 {
-    language?: string;
-    dark?: boolean;
-    format?: PureSourceProps['format'];
-    code?: string;
-}
-type SingleSourceProps = {
-    id: string;
-} & CommonProps$1;
-type MultiSourceProps = {
-    ids: string[];
-} & CommonProps$1;
-type CodeProps = {
-    code: string;
-} & CommonProps$1;
-type NoneProps = CommonProps$1;
-type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
+type SourceParameters = SourceCodeProps & {
+    /**
+     * Where to read the source code from, see `SourceType`
+     */
+    type?: SourceType;
+    /**
+     * Transform the detected source for display
+     */
+    transformSource?: (code: string, story: PreparedStory) => string;
+    /**
+     * Internal: set by our CSF loader (`enrichCsf` in `@storybook/csf-tools`).
+     */
+    originalSource?: string;
+};
+type SourceProps = Omit<SourceParameters, 'transformSource' | 'storySource'> & {
+    /**
+     * Pass the export defining a story to render its source
+     *
+     * ```jsx
+     * import { Source } from '@storybook/blocks';
+     * import * as ButtonStories from './Button.stories';
+     *
+     * <Source of={ButtonStories.Primary} />
+     * ```
+     */
+    of?: ModuleExport;
+    /** @deprecated use of={storyExport} instead */
+    id?: string;
+    /** @deprecated use of={storyExport} instead */
+    ids?: string[];
+    /**
+     * Internal prop to control if a story re-renders on args updates
+     */
+    __forceInitialArgs?: boolean;
+};
 type SourceStateProps = {
     state: SourceState;
 };
@@ -262,13 +302,169 @@ declare const useSourceProps: (props: SourceProps, docsContext: DocsContextProps
  * or the source for a story if `storyId` is provided, or
  * the source for the current story if nothing is provided.
  */
-declare const Source: FC<PureSourceProps>;
+declare const Source: FC<SourceProps>;
+
+type PureStoryProps = ComponentProps<typeof Story$1>;
+/**
+ * Props to define a story
+ *
+ * @deprecated Define stories in CSF files
+ */
+type StoryDefProps = StoryAnnotations;
+/**
+ * Props to reference another story
+ */
+type StoryRefProps = {
+    /**
+     * @deprecated Use of={storyExport} instead
+     */
+    id?: string;
+    /**
+     * @deprecated Use of={storyExport} and define the story in the CSF file
+     */
+    story?: StoryAnnotations;
+    /**
+     * Pass the export defining a story to render that story
+     *
+     * ```jsx
+     * import { Meta, Story } from '@storybook/blocks';
+     * import * as ButtonStories from './Button.stories';
+     *
+     * <Meta of={ButtonStories} />
+     * <Story of={ButtonStories.Primary} />
+     * ```
+     */
+    of?: ModuleExport;
+    /**
+     * Pass all exports of the CSF file if this MDX file is unattached
+     *
+     * ```jsx
+     * import { Story } from '@storybook/blocks';
+     * import * as ButtonStories from './Button.stories';
+     *
+     * <Story of={ButtonStories.Primary} meta={ButtonStories} />
+     * ```
+     */
+    meta?: ModuleExports;
+};
+type StoryParameters = {
+    /**
+     * Render the story inline or in an iframe
+     */
+    inline?: boolean;
+    /**
+     * When rendering in an iframe (`inline={false}`), set the story height
+     */
+    height?: string;
+    /**
+     * Whether to run the story's play function
+     */
+    autoplay?: boolean;
+    /**
+     * Internal prop to control if a story re-renders on args updates
+     */
+    __forceInitialArgs?: boolean;
+    /**
+     * Internal prop if this story is the primary story
+     */
+    __primary?: boolean;
+};
+type StoryProps = (StoryDefProps | StoryRefProps) & StoryParameters;
+declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;
+declare const getStoryProps: <TFramework extends Renderer$1>(props: StoryParameters, story: PreparedStory<TFramework>, context: DocsContextProps<TFramework>) => PureStoryProps;
+declare const Story: FC<StoryProps>;
 
-type CanvasProps = Omit<PreviewProps, 'isExpanded' | 'isLoading'> & {
+type DeprecatedCanvasProps = {
+    /**
+     * @deprecated multiple stories are not supported
+     */
+    isColumn?: boolean;
+    /**
+     * @deprecated multiple stories are not supported
+     */
+    columns?: number;
+    /**
+     * @deprecated use `sourceState` instead
+     */
     withSource?: SourceState;
+    /**
+     * @deprecated use `source.code` instead
+     */
     mdxSource?: string;
+    /**
+     * @deprecated reference stories with the `of` prop instead
+     */
+    children?: ReactNode;
+};
+type CanvasProps = Pick<PreviewProps, 'withToolbar' | 'additionalActions' | 'className'> & {
+    /**
+     * Pass the export defining a story to render that story
+     *
+     * ```jsx
+     * import { Meta, Canvas } from '@storybook/blocks';
+     * import * as ButtonStories from './Button.stories';
+     *
+     * <Meta of={ButtonStories} />
+     * <Canvas of={ButtonStories.Primary} />
+     * ```
+     */
+    of?: ModuleExport;
+    /**
+     * Pass all exports of the CSF file if this MDX file is unattached
+     *
+     * ```jsx
+     * import { Canvas } from '@storybook/blocks';
+     * import * as ButtonStories from './Button.stories';
+     *
+     * <Canvas of={ButtonStories.Primary} meta={ButtonStories} />
+     * ```
+     */
+    meta?: ModuleExports;
+    /**
+     * Specify the initial state of the source panel
+     * hidden: the source panel is hidden by default
+     * shown: the source panel is shown by default
+     * none: the source panel is not available and the button to show it is hidden
+     * @default 'hidden'
+     */
+    sourceState?: 'hidden' | 'shown' | 'none';
+    /**
+     * how to layout the story within the canvas
+     * padded: the story has padding within the canvas
+     * fullscreen: the story is rendered edge to edge within the canvas
+     * centered: the story is centered within the canvas
+     * @default 'padded'
+     */
+    layout?: Layout;
+    /**
+     * @see {SourceProps}
+     */
+    source?: Omit<SourceProps, 'dark'>;
+    /**
+     * @see {StoryProps}
+     */
+    story?: Pick<StoryProps, 'inline' | 'height' | 'autoplay' | '__forceInitialArgs' | '__primary'>;
+};
+declare const Canvas: FC<CanvasProps & DeprecatedCanvasProps>;
+
+type ControlsParameters = {
+    include?: PropDescriptor;
+    exclude?: PropDescriptor;
+    sort?: SortType;
+};
+type ControlsProps = ControlsParameters & {
+    of?: Renderer['component'] | ModuleExports;
 };
-declare const Canvas: FC<CanvasProps>;
+declare const Controls: FC<ControlsProps>;
+
+type Of = Parameters<DocsContextProps['resolveOf']>[0];
+/**
+ * A hook to resolve the `of` prop passed to a block.
+ * will return the resolved module
+ * if the resolved module is a meta it will include a preparedMeta property similar to a preparedStory
+ * if the resolved module is a component it will include the project annotations
+ */
+declare const useOf: <TType extends ResolvedModuleExportType>(moduleExportOrType: Of, validTypes?: TType[]) => ResolvedModuleExportFromType<TType, _storybook_types.Renderer>;
 
 declare enum DescriptionType {
     INFO = "info",
@@ -277,32 +473,35 @@ declare enum DescriptionType {
     AUTO = "auto"
 }
 interface DescriptionProps {
-    of?: '.' | Component;
     /**
-     * @deprecated Manually specifying description type is deprecated. In the future all descriptions will be extracted from JSDocs on the meta, story or component.
+     * Specify where to get the description from. Can be a component, a CSF file or a story.
+     * If not specified, the description will be extracted from the meta of the attached CSF file.
+     */
+    of?: Of;
+    /**
+     * @deprecated Manually specifying description type is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo
      */
     type?: DescriptionType;
     /**
-     * @deprecated The 'markdown' prop on the Description block is deprecated. Write the markdown directly in the .mdx file instead
+     * @deprecated The 'markdown' prop on the Description block is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo
      */
     markdown?: string;
     /**
-     * @deprecated The 'children' prop on the Description block is deprecated. Write the markdown directly in the .mdx file instead
+     * @deprecated The 'children' prop on the Description block is deprecated. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#description-block-parametersnotes-and-parametersinfo
      */
     children?: string;
 }
-declare const useDescriptionProps: ({ of, type, markdown, children }: DescriptionProps, { storyById }: DocsContextProps<any>) => DescriptionProps$1;
 declare const DescriptionContainer: FC<DescriptionProps>;
 
-type DocsProps<TFramework extends Renderer = Renderer> = {
-    docsParameter: Parameters;
+type DocsProps<TFramework extends Renderer$1 = Renderer$1> = {
+    docsParameter: Parameters$1;
     context: DocsContextProps<TFramework>;
 };
 declare const Docs: FunctionComponent<DocsProps>;
 
 declare const DocsPage: FC;
 
-interface DocsContainerProps<TFramework extends Renderer = Renderer> {
+interface DocsContainerProps<TFramework extends Renderer$1 = Renderer$1> {
     context: DocsContextProps<TFramework>;
     theme?: ThemeVars;
     children?: ReactNode;
@@ -311,7 +510,7 @@ declare const DocsContainer: FunctionComponent<DocsContainerProps>;
 
 declare const DocsStory: FC<DocsStoryProps>;
 
-type ExternalDocsProps<TFramework extends Renderer = Renderer> = {
+type ExternalDocsProps<TFramework extends Renderer$1 = Renderer$1> = {
     projectAnnotationsList: ProjectAnnotations<TFramework>[];
 };
 declare const ExternalDocs: FunctionComponent<ExternalDocsProps>;
@@ -326,6 +525,9 @@ interface HeadingProps {
 }
 declare const Heading: FC<HeadingProps>;
 
+type MarkdownProps = typeof PureMarkdown extends React.ComponentType<infer Props> ? Props : never;
+declare const Markdown: (props: MarkdownProps) => JSX.Element;
+
 type MetaProps = BaseAnnotations & {
     of?: ModuleExports;
 };
@@ -336,6 +538,9 @@ type MetaProps = BaseAnnotations & {
 declare const Meta: FC<MetaProps>;
 
 interface PrimaryProps {
+    /**
+     * @deprecated Primary block should only be used to render the primary story, which is automatically found.
+     */
     name?: string;
 }
 declare const Primary: FC<PrimaryProps>;
@@ -346,28 +551,6 @@ interface StoriesProps {
 }
 declare const Stories: FC<StoriesProps>;
 
-declare const storyBlockIdFromId: (storyId: string) => string;
-type PureStoryProps = ComponentProps<typeof Story$1>;
-type CommonProps = StoryAnnotations & {
-    height?: string;
-    inline?: boolean;
-};
-type StoryDefProps = {
-    name: string;
-};
-type StoryRefProps = {
-    id?: string;
-    of?: ModuleExport;
-    meta?: ModuleExports;
-};
-type StoryImportProps = {
-    name: string;
-};
-type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
-declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId;
-declare const getStoryProps: <TFramework extends Renderer>({ height, inline }: StoryProps, story: PreparedStory<TFramework>) => PureStoryProps;
-declare const Story: FC<StoryProps>;
-
 declare const Subheading: FC<HeadingProps>;
 
 interface SubtitleProps {
@@ -381,6 +564,8 @@ interface TitleProps {
 declare const extractTitle: (title: ComponentTitle) => string;
 declare const Title: FunctionComponent<TitleProps>;
 
+declare const Unstyled: React.FC;
+
 declare const Wrapper: FC;
 
 declare const assertIsFn: (val: any) => any;
@@ -459,7 +644,6 @@ interface TextConfig {
 }
 type ControlType = 'array' | 'boolean' | 'color' | 'date' | 'number' | 'range' | 'object' | OptionsControlType | 'text';
 type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
-type Controls = Record<string, Control>;
 
 type ColorControlProps = ControlProps<ColorValue> & ColorConfig;
 
@@ -524,4 +708,4 @@ type ColorProps = ColorControlProps;
 declare const LazyColorControl: React.LazyExoticComponent<React.FC<ColorControlProps>>;
 declare const ColorControl: (props: ComponentProps<typeof LazyColorControl>) => JSX.Element;
 
-export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgsTable, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, ComponentsTable, Control, ControlProps, ControlType, Controls, DateConfig, DateControl, DateProps, DateValue, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContainerProps, DocsContext, DocsPage, DocsProps, DocsStory, DocsStoryProps, ExternalDocs, ExternalDocsContainer, ExternalDocsProps, FilesControl, FilesControlProps, HeaderMdx, HeadersMdx, Heading, HeadingProps, IconGallery, IconItem, Meta, NoControlsWarning, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable$1 as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceState, Stories, Story, StoryData, StoryProps, StorySources, StoryTable, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, Wrapper, anchorBlockIdFromId, assertIsFn, extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId, getStoryProps, parse, parseDate, parseTime, storyBlockIdFromId, useDescriptionProps, useSourceProps };
+export { AddContext, Anchor, AnchorMdx, AnchorProps, ArgTypes, ArgsTable, BooleanConfig, BooleanControl, BooleanProps, BooleanValue, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, ComponentsTable, Control, ControlProps, ControlType, Controls, DateConfig, DateControl, DateProps, DateValue, DescriptionContainer as Description, DescriptionType, Docs, DocsContainer, DocsContainerProps, DocsContext, DocsPage, DocsProps, DocsStory, DocsStoryProps, ExternalDocs, ExternalDocsContainer, ExternalDocsProps, FilesControl, FilesControlProps, HeaderMdx, HeadersMdx, Heading, HeadingProps, IconGallery, IconItem, Markdown, Meta, NoControlsWarning, NormalizedOptionsConfig, NumberConfig, NumberControl, NumberValue, ObjectConfig, ObjectControl, ObjectProps, ObjectValue, Of, Options, OptionsArray, OptionsConfig, OptionsControl, OptionsControlType, OptionsMultiSelection, OptionsObject, OptionsProps, OptionsSelection, OptionsSingleSelection, PRIMARY_STORY, PresetColor, Primary, ArgsTable$1 as PureArgsTable, RangeConfig, RangeControl, SortType, Source, SourceContainer, SourceContext, SourceContextProps, SourceItem, SourceProps, SourceState, Stories, Story, StoryProps, StorySources, StoryTable, Subheading, Subtitle, TextConfig, TextControl, TextProps, TextValue, Title, Typeset, UNKNOWN_ARGS_HASH, Unstyled, Wrapper, anchorBlockIdFromId, argsHash, assertIsFn, extractComponentArgTypes, extractTitle, format, formatDate, formatTime, getComponent, getStoryId, getStoryProps, parse, parseDate, parseTime, useOf, useSourceProps };