@storybook/blocks 7.0.0-alpha.8

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,23 @@
+# Storybook Doc Blocks
+
+Portable documentation components for building design systems in Storybook.
+
+## Blocks development
+
+To bootstrap, in the monorepo root:
+
+```sh
+yarn && yarn bootstrap --core
+```
+
+To develop this package, in the monorepo root:
+
+```sh
+yarn build blocks --watch
+```
+
+To run storybook, in this directory:
+
+```sh
+yarn storybook
+```

package/dist/Color-Y7QPKMAJ.mjs

@@ -0,0 +1 @@
+import{a as R,b as C,c as m,d as X,e as L}from"./chunk-EJDOMQ7I.mjs";import u,{useCallback as v,useEffect as _,useMemo as O,useState as k}from"react";import{HexColorPicker as W,HslaStringColorPicker as F,RgbaStringColorPicker as j}from"react-colorful";import h from"color-convert";import M from"lodash/throttle";import{styled as x}from"@storybook/theming";import{TooltipNote as N,WithTooltip as I,Form as A,Icons as q}from"@storybook/components";function S(){return S=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(t[o]=r[o])}return t},S.apply(this,arguments)}m(S,"_extends");var D=x.div({position:"relative",maxWidth:250}),J=x(I)({position:"absolute",zIndex:1,top:4,left:4}),K=x.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"}}),Q=x(N)(({theme:t})=>({fontFamily:t.typography.fonts.base})),U=x.div({display:"grid",gridTemplateColumns:"repeat(9, 16px)",gap:6,padding:3,marginTop:5,width:200}),Y=x.div(({theme:t,active:e})=>({width:16,height:16,boxShadow:e?`${t.appBorderColor} 0 0 0 1px inset, ${t.color.mediumdark}50 0 0 0 4px`:`${t.appBorderColor} 0 0 0 1px inset`,borderRadius:t.appBorderRadius})),Z=`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>')`,B=m(l=>{var s=l,{value:t,active:e,onClick:r,style:o}=s,n=X(s,["value","active","onClick","style"]);let a=`linear-gradient(${t}, ${t}), ${Z}, linear-gradient(#fff, #fff)`;return u.createElement(Y,S({},n,{active:e,onClick:r},{style:C(R({},o),{backgroundImage:a})}))},"Swatch"),tt=x(A.Input)(({theme:t})=>({width:"100%",paddingLeft:30,paddingRight:30,boxSizing:"border-box",fontFamily:t.typography.fonts.base})),et=x(q)(({theme:t})=>({position:"absolute",zIndex:1,top:6,right:7,width:20,height:20,padding:4,boxSizing:"border-box",cursor:"pointer",color:t.input.color})),c;(function(t){t.RGB="rgb",t.HSL="hsl",t.HEX="hex"})(c||(c={}));var w=Object.values(c),rt=/\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/,nt=/^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i,ot=/^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i,P=/^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i,st=/^\s*#?([0-9a-f]{3})\s*$/i,at={[c.HEX]:W,[c.RGB]:j,[c.HSL]:F},y={[c.HEX]:"transparent",[c.RGB]:"rgba(0, 0, 0, 0)",[c.HSL]:"hsla(0, 0%, 0%, 0)"},G=m(t=>{let e=t==null?void 0:t.match(rt);if(!e)return[0,0,0,1];let[,r,o,n,l=1]=e;return[r,o,n,l].map(Number)},"stringToArgs"),$=m(t=>{if(!t)return;let e=!0;if(nt.test(t)){let[s,a,i,b]=G(t),[f,d,p]=h.rgb.hsl([s,a,i])||[0,0,0];return{valid:e,value:t,keyword:h.rgb.keyword([s,a,i]),colorSpace:c.RGB,[c.RGB]:t,[c.HSL]:`hsla(${f}, ${d}%, ${p}%, ${b})`,[c.HEX]:`#${h.rgb.hex([s,a,i]).toLowerCase()}`}}if(ot.test(t)){let[s,a,i,b]=G(t),[f,d,p]=h.hsl.rgb([s,a,i])||[0,0,0];return{valid:e,value:t,keyword:h.hsl.keyword([s,a,i]),colorSpace:c.HSL,[c.RGB]:`rgba(${f}, ${d}, ${p}, ${b})`,[c.HSL]:t,[c.HEX]:`#${h.hsl.hex([s,a,i]).toLowerCase()}`}}let r=t.replace("#",""),o=h.keyword.rgb(r)||h.hex.rgb(r),n=h.rgb.hsl(o),l=t;if(/[^#a-f0-9]/i.test(t)?l=r:P.test(t)&&(l=`#${r}`),l.startsWith("#"))e=P.test(l);else try{h.keyword.hex(l)}catch{e=!1}return{valid:e,value:l,keyword:h.rgb.keyword(o),colorSpace:c.HEX,[c.RGB]:`rgba(${o[0]}, ${o[1]}, ${o[2]}, 1)`,[c.HSL]:`hsla(${n[0]}, ${n[1]}%, ${n[2]}%, 1)`,[c.HEX]:l}},"parseValue"),it=m((t,e,r)=>{if(!t||!(e!=null&&e.valid))return y[r];if(r!==c.HEX)return(e==null?void 0:e[r])||y[r];if(!e.hex.startsWith("#"))try{return`#${h.keyword.hex(e.hex)}`}catch{return y.hex}let o=e.hex.match(st);if(!o)return P.test(e.hex)?e.hex:y.hex;let[n,l,s]=o[1].split("");return`#${n}${n}${l}${l}${s}${s}`},"getRealValue"),ct=m((t,e)=>{let[r,o]=k(t||""),[n,l]=k(()=>$(r)),[s,a]=k((n==null?void 0:n.colorSpace)||c.HEX);_(()=>{t===void 0&&(o(""),l(void 0),a(c.HEX))},[t]);let i=O(()=>it(r,n,s).toLowerCase(),[r,n,s]),b=v(d=>{let p=$(d),E=(p==null?void 0:p.value)||d||"";o(E),E===""&&(l(void 0),e(void 0)),p&&(l(p),a(p.colorSpace),e(p.value))},[e]),f=v(()=>{let d=w.indexOf(s)+1;d>=w.length&&(d=0),a(w[d]);let p=(n==null?void 0:n[w[d]])||"";o(p),e(p)},[n,s,e]);return{value:r,realValue:i,updateValue:b,color:n,colorSpace:s,cycleColorSpace:f}},"useColorInput"),H=m(t=>t.replace(/\s*/,"").toLowerCase(),"id"),lt=m((t,e,r)=>{let[o,n]=k(e!=null&&e.valid?[e]:[]);_(()=>{e===void 0&&n([])},[e]);let l=O(()=>(t||[]).map(i=>typeof i=="string"?$(i):i.title?C(R({},$(i.color)),{keyword:i.title}):$(i.color)).concat(o).filter(Boolean).slice(-27),[t,o]),s=v(a=>{!(a!=null&&a.valid)||l.some(i=>H(i[r])===H(a[r]))||n(i=>i.concat(a))},[r,l]);return{presets:l,addPreset:s}},"usePresets"),dt=m(({name:t,value:e,onChange:r,onFocus:o,onBlur:n,presetColors:l,startOpen:s})=>{let{value:a,realValue:i,updateValue:b,color:f,colorSpace:d,cycleColorSpace:p}=ct(e,M(r,200)),{presets:E,addPreset:T}=lt(l,f,d),z=at[d];return u.createElement(D,null,u.createElement(J,{trigger:"click",startOpen:s,closeOnClick:!0,onVisibilityChange:()=>T(f),tooltip:u.createElement(K,null,u.createElement(z,S({color:i==="transparent"?"#000000":i},{onChange:b,onFocus:o,onBlur:n})),E.length>0&&u.createElement(U,null,E.map((g,V)=>u.createElement(I,{key:`${g.value}-${V}`,hasChrome:!1,tooltip:u.createElement(Q,{note:g.keyword||g.value})},u.createElement(B,{value:g[d],active:f&&H(g[d])===H(f[d]),onClick:()=>b(g.value)})))))},u.createElement(B,{value:i,style:{margin:4}})),u.createElement(tt,{id:L(t),value:a,onChange:g=>b(g.target.value),onFocus:g=>g.target.select(),placeholder:"Choose color..."}),a?u.createElement(et,{icon:"markup",onClick:p}):null)},"ColorControl"),$t=dt;export{dt as ColorControl,$t as default};

package/dist/chunk-EJDOMQ7I.mjs

@@ -0,0 +1 @@
+var s=Object.defineProperty,a=Object.defineProperties;var d=Object.getOwnPropertyDescriptors;var n=Object.getOwnPropertySymbols;var g=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var l=(t,e,o)=>e in t?s(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,x=(t,e)=>{for(var o in e||(e={}))g.call(e,o)&&l(t,o,e[o]);if(n)for(var o of n(e))p.call(e,o)&&l(t,o,e[o]);return t},C=(t,e)=>a(t,d(e)),c=(t,e)=>s(t,"name",{value:e,configurable:!0});var I=(t,e)=>{var o={};for(var r in t)g.call(t,r)&&e.indexOf(r)<0&&(o[r]=t[r]);if(t!=null&&n)for(var r of n(t))e.indexOf(r)<0&&p.call(t,r)&&(o[r]=t[r]);return o};var S=c(t=>`control-${t.replace(/\s+/g,"-")}`,"getControlId"),b=c(t=>`set-${t.replace(/\s+/g,"-")}`,"getControlSetterButtonId");export{x as a,C as b,c,I as d,S as e,b as f};

package/dist/index.d.ts

@@ -0,0 +1,498 @@
+import React, { FunctionComponent, ComponentProps, FC, ElementType, Context, ReactNode } from 'react';
+import { Conditional, Parameters, AnyFramework, StrictArgTypes, ProjectAnnotations, StoryId as StoryId$1, BaseAnnotations, StoryAnnotations } from '@storybook/csf';
+import * as _storybook_store from '@storybook/store';
+import { PropDescriptor, ModuleExport, ModuleExports, Story as Story$2 } from '@storybook/store';
+import { DocsContextProps, DocsRenderFunction, Preview as Preview$1 } from '@storybook/preview-web';
+export { DocsContextProps } from '@storybook/preview-web';
+import { SyntaxHighlighter, ActionItem, SyntaxHighlighterFormatTypes } from '@storybook/components';
+import { StoryId } from '@storybook/api';
+
+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 {
+    language?: string;
+    code?: string;
+    format?: ComponentProps<typeof SyntaxHighlighter>['format'];
+    dark?: boolean;
+}
+declare type SourceProps$1 = SourceErrorProps & SourceCodeProps;
+/**
+ * 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;
+    isColumn?: boolean;
+    columns?: number;
+    withSource?: SourceProps$1;
+    isExpanded?: boolean;
+    withToolbar?: boolean;
+    className?: string;
+    additionalActions?: ActionItem[];
+}
+
+interface ArgType {
+    name?: string;
+    description?: string;
+    defaultValue?: any;
+    if?: Conditional;
+    [key: string]: any;
+}
+interface ArgTypes {
+    [key: string]: ArgType;
+}
+interface Args {
+    [key: string]: any;
+}
+declare type Globals = {
+    [name: string]: any;
+};
+
+declare enum ArgsTableError {
+    NO_COMPONENT = "No component found.",
+    ARGS_UNSUPPORTED = "Args unsupported. See Args documentation for your framework."
+}
+declare type SortType = 'alpha' | 'requiredFirst' | 'none';
+interface ArgsTableOptionProps {
+    updateArgs?: (args: Args) => void;
+    resetArgs?: (argNames?: string[]) => void;
+    compact?: boolean;
+    inAddonPanel?: boolean;
+    initialExpandedArgs?: boolean;
+    isLoading?: boolean;
+    sort?: SortType;
+}
+interface ArgsTableDataProps {
+    rows: ArgTypes;
+    args?: Args;
+    globals?: Globals;
+}
+interface ArgsTableErrorProps {
+    error: ArgsTableError;
+}
+interface ArgsTableLoadingProps {
+    isLoading: true;
+}
+declare type ArgsTableProps$1 = ArgsTableOptionProps & (ArgsTableDataProps | ArgsTableErrorProps | ArgsTableLoadingProps);
+/**
+ * Display the props for a component as a props table. Each row is a collection of
+ * ArgDefs, usually derived from docgen info for the component.
+ */
+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$2 {
+    title?: string;
+    height?: string;
+    id: string;
+}
+interface InlineStoryProps extends CommonProps$2 {
+    parameters: Parameters;
+    storyFn: ElementType;
+}
+declare type IFrameStoryProps = CommonProps$2;
+declare 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;
+}>;
+
+interface TypesetProps {
+    fontFamily?: string;
+    fontSizes: string[];
+    fontWeight?: number;
+    sampleText?: string;
+}
+/**
+ * Convenient styleguide documentation showing examples of type
+ * with different sizes and weights and configurable sample text.
+ */
+declare const Typeset: FunctionComponent<TypesetProps>;
+
+declare type Colors = string[] | {
+    [key: string]: string;
+};
+interface ColorItemProps {
+    title: string;
+    subtitle: string;
+    colors: Colors;
+}
+/**
+ * A single color row your styleguide showing title, subtitle and one or more colors, used
+ * as a child of `ColorPalette`.
+ */
+declare const ColorItem: FunctionComponent<ColorItemProps>;
+/**
+ * Styleguide documentation for colors, including names, captions, and color swatches,
+ * all specified as `ColorItem` children of this wrapper component.
+ */
+declare const ColorPalette: FunctionComponent;
+
+interface IconItemProps {
+    name: string;
+}
+/**
+ * An individual icon with a caption and an example (passed as `children`).
+ */
+declare const IconItem: FunctionComponent<IconItemProps>;
+/**
+ * Show a grid of icons, as specified by `IconItem`.
+ */
+declare const IconGallery: FunctionComponent;
+
+declare const anchorBlockIdFromId: (storyId: string) => string;
+interface AnchorProps {
+    storyId: string;
+}
+declare const Anchor: FC<AnchorProps>;
+
+declare const DocsContext: Context<DocsContextProps<AnyFramework>>;
+
+declare const CURRENT_SELECTION = ".";
+declare const PRIMARY_STORY = "^";
+declare type Component = any;
+interface StoryData {
+    id?: string;
+    kind?: string;
+    name?: string;
+    parameters?: any;
+}
+declare type DocsStoryProps = StoryData & {
+    expanded?: boolean;
+    withToolbar?: boolean;
+};
+
+interface BaseProps {
+    include?: PropDescriptor;
+    exclude?: PropDescriptor;
+    sort?: SortType;
+}
+declare type OfProps = BaseProps & {
+    of: '.' | '^' | Component;
+};
+declare type ComponentsProps = BaseProps & {
+    components: {
+        [label: string]: Component;
+    };
+};
+declare type StoryProps$1 = BaseProps & {
+    story: '.' | '^' | string;
+    showComponent?: boolean;
+};
+declare type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps$1;
+declare const extractComponentArgTypes: (component: Component, { id, storyById }: DocsContextProps, include?: PropDescriptor, exclude?: PropDescriptor) => StrictArgTypes;
+declare const getComponent: (props: ArgsTableProps, { id, storyById }: DocsContextProps) => Component;
+declare const StoryTable: FC<StoryProps$1 & {
+    component: Component;
+    subcomponents: Record<string, Component>;
+}>;
+declare const ComponentsTable: FC<ComponentsProps>;
+declare const ArgsTable: FC<ArgsTableProps>;
+
+interface SourceItem {
+    code: string;
+    format: SyntaxHighlighterFormatTypes;
+}
+declare type StorySources = Record<StoryId, SourceItem>;
+interface SourceContextProps {
+    sources: StorySources;
+    setSource?: (id: StoryId, item: SourceItem) => void;
+}
+declare const SourceContext: Context<SourceContextProps>;
+declare const SourceContainer: FC<{}>;
+
+declare enum SourceState {
+    OPEN = "open",
+    CLOSED = "closed",
+    NONE = "none"
+}
+interface CommonProps$1 {
+    language?: string;
+    dark?: boolean;
+    format?: PureSourceProps['format'];
+    code?: string;
+}
+declare type SingleSourceProps = {
+    id: string;
+} & CommonProps$1;
+declare type MultiSourceProps = {
+    ids: string[];
+} & CommonProps$1;
+declare type CodeProps = {
+    code: string;
+} & CommonProps$1;
+declare type NoneProps = CommonProps$1;
+declare type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
+declare type SourceStateProps = {
+    state: SourceState;
+};
+declare type PureSourceProps = ComponentProps<typeof Source$1>;
+declare const getSourceProps: (props: SourceProps, docsContext: DocsContextProps<any>, sourceContext: SourceContextProps) => PureSourceProps & SourceStateProps;
+/**
+ * Story source doc block renders source code if provided,
+ * 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 type CanvasProps = PreviewProps & {
+    withSource?: SourceState;
+    mdxSource?: string;
+};
+declare const Canvas: FC<CanvasProps>;
+
+declare enum DescriptionType {
+    INFO = "info",
+    NOTES = "notes",
+    DOCGEN = "docgen",
+    LEGACY_5_2 = "legacy-5.2",
+    AUTO = "auto"
+}
+interface DescriptionProps {
+    of?: '.' | Component;
+    type?: DescriptionType;
+    markdown?: string;
+    children?: string;
+}
+declare const getDescriptionProps: ({ of, type, markdown, children }: DescriptionProps, { id, storyById }: DocsContextProps<any>) => DescriptionProps$1;
+declare const DescriptionContainer: FunctionComponent<DescriptionProps>;
+
+declare class DocsRenderer<TFramework extends AnyFramework> {
+    render: DocsRenderFunction<TFramework>;
+    unmount: (element: HTMLElement) => void;
+    constructor();
+}
+
+declare const DocsPage: FC;
+
+interface DocsContainerProps<TFramework extends AnyFramework = AnyFramework> {
+    context: DocsContextProps<TFramework>;
+}
+declare const DocsContainer: FunctionComponent<DocsContainerProps>;
+
+declare const DocsStory: FunctionComponent<DocsStoryProps>;
+
+declare const ExternalDocsContainer: React.FC<{
+    projectAnnotations: any;
+}>;
+
+declare type StoryExport = ModuleExport;
+declare type MetaExport = ModuleExports;
+declare class ExternalPreview<TFramework extends AnyFramework> extends Preview$1<TFramework> {
+    projectAnnotations: ProjectAnnotations;
+    private initialized;
+    private importPaths;
+    private titles;
+    storyIds: Map<any, string>;
+    private storyIndex;
+    private moduleExportsByImportPath;
+    constructor(projectAnnotations: ProjectAnnotations);
+    storyIdByModuleExport(storyExport: StoryExport, meta: MetaExport): string;
+    addStoryFromExports(storyExport: StoryExport, meta: MetaExport): Promise<void>;
+    storyById(storyId: StoryId$1): _storybook_store.Story<TFramework>;
+}
+
+interface HeadingProps {
+    children: JSX.Element | string;
+    disableAnchor?: boolean;
+}
+declare const Heading: FunctionComponent<HeadingProps>;
+
+declare type MetaProps = BaseAnnotations & {
+    of?: ModuleExports;
+};
+/**
+ * This component is used to declare component metadata in docs
+ * and gets transformed into a default export underneath the hood.
+ */
+declare const Meta: FC<MetaProps>;
+
+declare const Preview: (props: ComponentProps<typeof Canvas>) => JSX.Element;
+
+interface PrimaryProps {
+    name?: string;
+}
+declare const Primary: FC<PrimaryProps>;
+
+declare const Props: (props: ComponentProps<typeof ArgsTable>) => JSX.Element;
+
+interface StoriesProps {
+    title?: JSX.Element | string;
+    includePrimary?: boolean;
+}
+declare const Stories: FunctionComponent<StoriesProps>;
+
+declare const storyBlockIdFromId: (storyId: string) => string;
+declare type PureStoryProps = ComponentProps<typeof Story$1>;
+declare type CommonProps = StoryAnnotations & {
+    height?: string;
+    inline?: boolean;
+};
+declare type StoryDefProps = {
+    name: string;
+    children: ReactNode;
+};
+declare type StoryRefProps = {
+    id?: string;
+    of?: ModuleExport;
+    meta?: ModuleExports;
+};
+declare type StoryImportProps = {
+    name: string;
+    story: ElementType;
+};
+declare type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;
+declare const lookupStoryId: (storyName: string, { mdxStoryNameToKey, mdxComponentAnnotations }: DocsContextProps) => string;
+declare const getStoryId: (props: StoryProps, context: DocsContextProps) => StoryId$1;
+declare const getStoryProps: <TFramework extends AnyFramework>({ height, inline }: StoryProps, story: Story$2<TFramework>) => PureStoryProps;
+declare const Story: FunctionComponent<StoryProps>;
+
+declare const Subheading: FunctionComponent<HeadingProps>;
+
+interface SubtitleProps {
+    children?: JSX.Element | string;
+}
+declare const Subtitle: FunctionComponent<SubtitleProps>;
+
+interface TitleProps {
+    children?: JSX.Element | string;
+}
+declare const extractTitle: ({ title }: DocsContextProps) => string;
+declare const Title: FunctionComponent<TitleProps>;
+
+declare const Wrapper: FunctionComponent;
+
+declare const assertIsFn: (val: any) => any;
+declare const AddContext: FC<DocsContextProps>;
+interface CodeOrSourceMdxProps {
+    className?: string;
+}
+declare const CodeOrSourceMdx: FC<CodeOrSourceMdxProps>;
+interface AnchorMdxProps {
+    href: string;
+    target: string;
+}
+declare const AnchorMdx: FC<AnchorMdxProps>;
+interface HeaderMdxProps {
+    as: string;
+    id: string;
+}
+declare const HeaderMdx: FC<HeaderMdxProps>;
+declare const HeadersMdx: {};
+
+interface ControlProps<T> {
+    name: string;
+    value?: T;
+    defaultValue?: T;
+    argType?: ArgType;
+    onChange: (value: T) => T | void;
+    onFocus?: (evt: any) => void;
+    onBlur?: (evt: any) => void;
+}
+declare type BooleanValue = boolean;
+interface BooleanConfig {
+}
+declare type ColorValue = string;
+declare type PresetColor = ColorValue | {
+    color: ColorValue;
+    title?: string;
+};
+interface ColorConfig {
+    presetColors?: PresetColor[];
+    startOpen?: boolean;
+}
+declare type DateValue = Date | number;
+interface DateConfig {
+}
+declare type NumberValue = number;
+interface NumberConfig {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare type RangeConfig = NumberConfig;
+declare type ObjectValue = any;
+interface ObjectConfig {
+}
+declare type OptionsSingleSelection = any;
+declare type OptionsMultiSelection = any[];
+declare type OptionsSelection = OptionsSingleSelection | OptionsMultiSelection;
+declare type OptionsArray = any[];
+declare type OptionsObject = Record<string, any>;
+declare type Options = OptionsArray | OptionsObject;
+declare type OptionsControlType = 'radio' | 'inline-radio' | 'check' | 'inline-check' | 'select' | 'multi-select';
+interface OptionsConfig {
+    labels: Record<any, string>;
+    options: Options;
+    type: OptionsControlType;
+}
+interface NormalizedOptionsConfig {
+    options: OptionsObject;
+}
+declare type TextValue = string;
+interface TextConfig {
+}
+declare type ControlType = 'array' | 'boolean' | 'color' | 'date' | 'number' | 'range' | 'object' | OptionsControlType | 'text';
+declare type Control = BooleanConfig | ColorConfig | DateConfig | NumberConfig | ObjectConfig | OptionsConfig | RangeConfig | TextConfig;
+declare type Controls = Record<string, Control>;
+
+declare type ColorControlProps = ControlProps<ColorValue> & ColorConfig;
+
+declare type BooleanProps = ControlProps<BooleanValue> & BooleanConfig;
+declare const BooleanControl: FC<BooleanProps>;
+
+declare const parseDate: (value: string) => Date;
+declare const parseTime: (value: string) => Date;
+declare const formatDate: (value: Date | number) => string;
+declare const formatTime: (value: Date | number) => string;
+declare type DateProps = ControlProps<DateValue> & DateConfig;
+declare const DateControl: FC<DateProps>;
+
+declare type NumberProps = ControlProps<NumberValue | null> & NumberConfig;
+declare const parse: (value: string) => number;
+declare const format: (value: NumberValue) => string;
+declare const NumberControl: FC<NumberProps>;
+
+declare type OptionsProps = ControlProps<OptionsSelection> & OptionsConfig;
+declare const OptionsControl: FC<OptionsProps>;
+
+declare type ObjectProps = ControlProps<ObjectValue> & ObjectConfig & {
+    theme: any;
+};
+declare const ObjectControl: FC<ObjectProps>;
+
+declare type RangeProps = ControlProps<NumberValue | null> & RangeConfig;
+declare const RangeControl: FC<RangeProps>;
+
+declare type TextProps = ControlProps<TextValue | undefined> & TextConfig;
+declare const TextControl: FC<TextProps>;
+
+interface FilesControlProps extends ControlProps<string[]> {
+    accept?: string;
+}
+declare const FilesControl: FunctionComponent<FilesControlProps>;
+
+declare 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, CURRENT_SELECTION, Canvas, CodeOrSourceMdx, ColorConfig, ColorControl, ColorItem, ColorPalette, ColorProps, ColorValue, Component, ComponentsTable, Control, ControlProps, ControlType, Controls, DateConfig, DateControl, DateProps, DateValue, DescriptionContainer as Description, DescriptionType, DocsContainer, DocsContainerProps, DocsContext, DocsPage, DocsRenderer, DocsStory, DocsStoryProps, ExternalDocsContainer, ExternalPreview, 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, Preview, Primary, Props, 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, getDescriptionProps, getSourceProps, getStoryId, getStoryProps, lookupStoryId, parse, parseDate, parseTime, storyBlockIdFromId };