@pega/cosmos-react-demos 6.6.0 → 6.6.1

package/jsx/core/Flex/FlexContainer.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlexContainer.stories.jsx","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Text } from '@pega/cosmos-react-core';\nimport type { FlexContainerProps } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n  title: 'Core/Flex/Container',\n  component: Flex,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface FlexStoryProps {\n  direction?: FlexContainerProps['direction'];\n  gap?: FlexContainerProps['gap'];\n  pad?: FlexContainerProps['pad'];\n  wrap?: FlexContainerProps['wrap'];\n  justify?: FlexContainerProps['justify'];\n  alignItems?: FlexContainerProps['alignItems'];\n  alignContent?: FlexContainerProps['alignContent'];\n}\n\nexport const Direction: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ direction: args.direction, pad: 2 }} as={StyledFlexContainer}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nDirection.args = {\n  direction: 'row'\n};\n\nDirection.argTypes = {\n  direction: {\n    options: ['row', 'column', 'row-reverse', 'column-reverse'],\n    control: { type: 'select' }\n  }\n};\n\nexport const GapAndPadding: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: args.pad, gap: args.gap }} as={StyledFlexContainer}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nGapAndPadding.args = {\n  pad: 1,\n  gap: 1\n};\n\nGapAndPadding.argTypes = {\n  pad: { control: { type: 'number' } },\n  gap: { control: { type: 'number' } }\n};\n\nexport const Wrap: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ wrap: args.wrap, pad: 2 }} as={StyledFlexContainer} width={35}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 4</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 5</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nWrap.args = {\n  wrap: 'nowrap'\n};\n\nWrap.argTypes = {\n  wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }\n};\n\nexport const Justify: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ justify: args.justify, pad: 2 }} as={StyledFlexContainer}>\n      <StyledFlexItem>\n        <Text>Item 1</Text>\n      </StyledFlexItem>\n      <StyledFlexItem>\n        <Text>Item 2</Text>\n      </StyledFlexItem>\n      <StyledFlexItem>\n        <Text>Item 3</Text>\n      </StyledFlexItem>\n    </Flex>\n  );\n};\n\nJustify.args = {\n  justify: 'start'\n};\n\nJustify.argTypes = {\n  justify: {\n    options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignItems: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex\n      container={{ alignItems: args.alignItems, pad: 2 }}\n      as={StyledFlexContainer}\n      height={15}\n      width={30}\n    >\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem} noPadding>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3 - First line</Text>\n        <Text>Item 3 - Second line</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignItems.args = {\n  alignItems: 'stretch'\n};\n\nAlignItems.argTypes = {\n  alignItems: {\n    options: ['stretch', 'start', 'end', 'center', 'baseline'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignContent: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex\n      container={{ alignContent: args.alignContent, wrap: 'wrap', pad: 2 }}\n      as={StyledFlexContainer}\n      height={20}\n      width={30}\n    >\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 4</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 5</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignContent.args = {\n  alignContent: 'stretch'\n};\n\nAlignContent.argTypes = {\n  alignContent: {\n    options: ['stretch', 'start', 'end', 'center', 'between', 'around'],\n    control: { type: 'select' }\n  }\n};\n\nexport const ResponsiveFlex: StoryFn = () => {\n  return (\n    <Flex\n      container={{ pad: 1, gap: 6 }}\n      xl={{ container: { gap: 12 } }}\n      lg={{ container: { gap: 9 } }}\n      md={{ container: { gap: 6 } }}\n      sm={{ container: { gap: 3 } }}\n      xs={{ container: { gap: 0 } }}\n      as={StyledFlexContainer}\n    >\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem}>\n        <Text>Item 3</Text>\n      </Flex>\n    </Flex>\n  );\n};\n"]}

package/jsx/core/Flex/FlexItem.stories.d.ts

@@ -1,13 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-import type { FlexItemProps } from '@pega/cosmos-react-core';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface FlexStoryProps {
-    alignSelf?: FlexItemProps['alignSelf'];
-    grow?: FlexItemProps['grow'];
-    shrink?: FlexItemProps['shrink'];
-}
-export declare const AlignSelf: StoryFn<FlexStoryProps>;
-export declare const Grow: StoryFn<FlexStoryProps>;
-export declare const Shrink: StoryFn<FlexStoryProps>;
-//# sourceMappingURL=FlexItem.stories.d.ts.map

package/jsx/core/Flex/FlexItem.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlexItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAI7D,wBAMU;AAEV,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;CAClC;AAED,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,cAAc,CAe7C,CAAC;AAaF,eAAO,MAAM,IAAI,EAAE,OAAO,CAAC,cAAc,CAcxC,CAAC;AAUF,eAAO,MAAM,MAAM,EAAE,OAAO,CAAC,cAAc,CAc1C,CAAC"}

package/jsx/core/Flex/FlexItem.stories.jsx

@@ -1,71 +0,0 @@
-import { Flex, Text } from '@pega/cosmos-react-core';
-import { StyledFlexContainer, StyledFlexItem } from './Flex.styles';
-export default {
-    title: 'Core/Flex/Item',
-    component: Flex,
-    parameters: {
-        layout: 'fullscreen'
-    }
-};
-export const AlignSelf = (args) => {
-    return (<Flex container={{ alignItems: 'start', pad: 2 }} as={StyledFlexContainer} height={10}>
-      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>
-        <Text>Item 1</Text>
-      </Flex>
-      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledFlexItem} noPadding>
-        <Text>Item 2</Text>
-      </Flex>
-      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem} inActive>
-        <Text>Item 3 - First line</Text>
-        <Text>Item 3 - Second line</Text>
-      </Flex>
-    </Flex>);
-};
-AlignSelf.args = {
-    alignSelf: 'auto'
-};
-AlignSelf.argTypes = {
-    alignSelf: {
-        options: ['auto', 'start', 'end', 'baseline', 'center', 'stretch'],
-        control: { type: 'select' }
-    }
-};
-export const Grow = (args) => {
-    return (<Flex container={{ pad: 2 }} as={StyledFlexContainer}>
-      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>
-        <Text>Grow: 1</Text>
-      </Flex>
-      <Flex item={{ grow: args.grow }} as={StyledFlexItem}>
-        <Text>Grow: {args.grow}</Text>
-      </Flex>
-      <Flex item={{ grow: 0 }} as={StyledFlexItem} inActive>
-        <Text>Grow: 0</Text>
-      </Flex>
-    </Flex>);
-};
-Grow.args = {
-    grow: 0
-};
-Grow.argTypes = {
-    grow: { control: { type: 'number' } }
-};
-export const Shrink = (args) => {
-    return (<Flex container={{ pad: 2 }} as={StyledFlexContainer} width={42}>
-      <Flex item={{ shrink: 1 }} as={StyledFlexItem} width={15} inActive>
-        <Text>Shrink: 1</Text>
-      </Flex>
-      <Flex item={{ shrink: args.shrink }} as={StyledFlexItem} width={15}>
-        <Text>Shrink: {args.shrink}</Text>
-      </Flex>
-      <Flex item={{ shrink: 0 }} as={StyledFlexItem} width={15} inActive>
-        <Text>Shrink: 0</Text>
-      </Flex>
-    </Flex>);
-};
-Shrink.args = {
-    shrink: 0
-};
-Shrink.argTypes = {
-    shrink: { control: { type: 'number' } }
-};
-//# sourceMappingURL=FlexItem.stories.jsx.map

package/jsx/core/Flex/FlexItem.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlexItem.stories.jsx","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Text } from '@pega/cosmos-react-core';\nimport type { FlexItemProps } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n  title: 'Core/Flex/Item',\n  component: Flex,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface FlexStoryProps {\n  alignSelf?: FlexItemProps['alignSelf'];\n  grow?: FlexItemProps['grow'];\n  shrink?: FlexItemProps['shrink'];\n}\n\nexport const AlignSelf: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ alignItems: 'start', pad: 2 }} as={StyledFlexContainer} height={10}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledFlexItem} noPadding>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem} inActive>\n        <Text>Item 3 - First line</Text>\n        <Text>Item 3 - Second line</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignSelf.args = {\n  alignSelf: 'auto'\n};\n\nAlignSelf.argTypes = {\n  alignSelf: {\n    options: ['auto', 'start', 'end', 'baseline', 'center', 'stretch'],\n    control: { type: 'select' }\n  }\n};\n\nexport const Grow: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: 2 }} as={StyledFlexContainer}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n        <Text>Grow: 1</Text>\n      </Flex>\n      <Flex item={{ grow: args.grow }} as={StyledFlexItem}>\n        <Text>Grow: {args.grow}</Text>\n      </Flex>\n      <Flex item={{ grow: 0 }} as={StyledFlexItem} inActive>\n        <Text>Grow: 0</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nGrow.args = {\n  grow: 0\n};\n\nGrow.argTypes = {\n  grow: { control: { type: 'number' } }\n};\n\nexport const Shrink: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: 2 }} as={StyledFlexContainer} width={42}>\n      <Flex item={{ shrink: 1 }} as={StyledFlexItem} width={15} inActive>\n        <Text>Shrink: 1</Text>\n      </Flex>\n      <Flex item={{ shrink: args.shrink }} as={StyledFlexItem} width={15}>\n        <Text>Shrink: {args.shrink}</Text>\n      </Flex>\n      <Flex item={{ shrink: 0 }} as={StyledFlexItem} width={15} inActive>\n        <Text>Shrink: 0</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nShrink.args = {\n  shrink: 0\n};\n\nShrink.argTypes = {\n  shrink: { control: { type: 'number' } }\n};\n"]}

package/jsx/core/Form/Form.mocks.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-export declare const FormContent: ({ cols, heading, description, showActions }: {
-    cols: number;
-    showActions: boolean;
-    heading?: string | undefined;
-    description?: string | undefined;
-}) => import("react").JSX.Element | null;
-export declare const ReadOnlyFormContent: ({ cols, heading, description, showActions }: {
-    cols: number;
-    showActions: boolean;
-    heading?: string | undefined;
-    description?: string | undefined;
-}) => import("react").JSX.Element | null;
-//# sourceMappingURL=Form.mocks.d.ts.map

package/jsx/core/Form/Form.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":";AAgGA,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wCAiMrB,CAAC;AAEF,eAAO,MAAM,mBAAmB;UAMxB,MAAM;iBACC,OAAO;;;wCAiKrB,CAAC"}

package/jsx/core/Form/Form.mocks.jsx

@@ -1,265 +0,0 @@
-import { useReducer, useRef, useState, useEffect } from 'react';
-import { Button, Checkbox, CheckboxGroup, Form, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, useToaster, usePrevious } from '@pega/cosmos-react-core';
-import { Editor as RichTextEditor } from '@pega/cosmos-react-rte';
-import { FileInputDemo } from '../File/FileInput.stories';
-import { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';
-const initFields = () => {
-    const common = { value: undefined, status: undefined };
-    return [
-        {
-            ...common,
-            name: 'name',
-            required: true,
-            error: 'Please enter first and last name',
-            validator() {
-                if (!this.value)
-                    return false;
-                return /^[a-z]+\s[a-z]+$/i.test(this.value);
-            }
-        },
-        {
-            ...common,
-            name: 'email',
-            required: true,
-            error: 'Enter a @pega.com address',
-            validator() {
-                if (!this.value)
-                    return false;
-                return /^\S+@pega\.com$/.test(this.value);
-            }
-        },
-        {
-            ...common,
-            name: 'notes',
-            required: true,
-            help: 'See how fast you can type 20 characters…go',
-            error: 'You need to tell us more than 20 characters',
-            validator() {
-                if (!this.value)
-                    return false;
-                return this.value.length >= 20;
-            }
-        }
-    ];
-};
-const fieldReducer = (fields, { target, type }) => {
-    return fields.map(field => {
-        if (field.name === target.name) {
-            field.value = target.value;
-            if (type === 'blur' || field.status === 'error') {
-                if ((field.required || field.value) && !field.validator()) {
-                    field.status = 'error';
-                    field.info = field.error;
-                }
-                else {
-                    field.status = undefined;
-                    field.info = field.help;
-                }
-            }
-        }
-        return field;
-    });
-};
-export const FormContent = ({ cols, heading, description, showActions }) => {
-    const editorRef = useRef(null);
-    const [fields, setField] = useReducer(fieldReducer, undefined, initFields);
-    const { push } = useToaster();
-    const name = fields.find(field => field.name === 'name');
-    const email = fields.find(field => field.name === 'email');
-    const notes = fields.find(field => field.name === 'notes');
-    if (!name || !email || !notes)
-        return null;
-    const canSubmit = fields.every(field => field.value && field.validator());
-    const actions = (<>
-      <Button name='Cancel' variant='secondary' onClick={() => {
-            push({ content: 'Form cancelled!' });
-        }}>
-        Cancel
-      </Button>
-      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>
-        Submit
-      </Button>
-    </>);
-    const onImageAdded = (image, id) => {
-        const src = URL.createObjectURL(image);
-        editorRef.current?.appendImage({ src, alt: image.name }, id);
-    };
-    return (<Form actions={showActions ? actions : undefined} description={description} heading={heading} onSubmit={(e) => {
-            e.preventDefault();
-            push({ content: 'Form submitted!' });
-        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
-      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>
-        <Input name='name' label='Name' value={name.value} status={name.status} info='some help text here' onChange={(e) => setField({ ...e })} onBlur={(e) => setField({ ...e })} additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} required/>
-
-        <Input name='email' value={email.value} type='email' label='Email' required={email.required} status={email.status} info='some help text here' onChange={(e) => setField({ ...e })} onBlur={(e) => setField({ ...e })} additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }}/>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <CheckboxGroup name='visited' label='Places you have worked' additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} required>
-            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (<Checkbox key={office} label={office} onChange={(e) => setField({ ...e })}/>))}
-          </CheckboxGroup>
-        </Grid>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <Checkbox additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} label='Check me, please' required/>
-        </Grid>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?' additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} required>
-            {['Yes', "No… no I don't"].map(option => (<RadioButton key={option} label={option} onChange={(e) => setField({ ...e })}/>))}
-          </RadioButtonGroup>
-        </Grid>
-
-        <Select label='What would you like to eat?' info='FYI: options are limited' additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} required>
-          <Option>choose meal…</Option>
-          <Option>Pizza</Option>
-          <Option>Sandwich</Option>
-          <Option>Salad</Option>
-        </Select>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <TextArea name='notes' required={notes.required} label='Meeting notes' status={notes.status} info={notes.info || notes.help} onChange={(e) => setField({ ...e })} onBlur={(e) => setField({ ...e })} additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }}/>
-        </Grid>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <RichTextEditor label='Detailed meeting notes' info='The rich text editor can be used in forms, comments, and documents' toolbar={[
-            'inline-styling',
-            'headers',
-            'tables',
-            'links',
-            'images',
-            'lists',
-            'cut-copy-paste',
-            'indentation'
-        ]} onImageAdded={onImageAdded} ref={editorRef} additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} required/>
-        </Grid>
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <FileInputDemo label='Meeting attachments'/>
-        </Grid>
-
-        <ComboboxFilterableStory label='Select a user'/>
-      </Grid>
-    </Form>);
-};
-export const ReadOnlyFormContent = ({ cols, heading, description, showActions }) => {
-    const [value, setValue] = useState({ start: 1, end: '3' });
-    const prev = usePrevious(value);
-    useEffect(() => {
-        if (prev !== value)
-            setValue(value);
-    }, [prev, value]);
-    const [fields] = useReducer(fieldReducer, undefined, initFields);
-    const { push } = useToaster();
-    const name = fields.find(field => field.name === 'name');
-    const email = fields.find(field => field.name === 'email');
-    const notes = fields.find(field => field.name === 'notes');
-    if (!name || !email || !notes)
-        return null;
-    const canSubmit = fields.every(field => field.value && field.validator());
-    const actions = (<>
-      <Button name='Cancel' variant='secondary' onClick={() => {
-            push({ content: 'Form cancelled!' });
-        }}>
-        Cancel
-      </Button>
-      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>
-        Submit
-      </Button>
-    </>);
-    return (<Form actions={showActions ? actions : undefined} description={description} heading={heading} onSubmit={(e) => {
-            e.preventDefault();
-            push({ content: 'Form submitted!' });
-        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
-      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>
-        <Input readOnly name='name' label='Name' value='Test' required={false} status={name.status} additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }}/>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <CheckboxGroup name='places visited' label='Places you have worked' additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} readOnly required>
-            <Checkbox key='Cambridge' label='Cambridge'/>
-            <Checkbox key='Krakow' label='Krakow'/>
-            <Checkbox key='Hyderabad' label='Hyderabad'/>
-            <Checkbox key='Bangalore' label='Bangalore'/>
-          </CheckboxGroup>
-        </Grid>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <RadioButtonGroup name='meetings' label='Do you really enjoy early morning meetings?' additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} required>
-            <RadioButton key='Yes' label='Yes'/>
-            <RadioButton key="No.. no I don't" label="No.. no I don't" readOnly/>
-          </RadioButtonGroup>
-        </Grid>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <CheckboxGroup name='more places visited' label='More Places you have worked' additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} required>
-            <Checkbox key='Cambridge' label='Cambridge' readOnly/>
-            <Checkbox key='Krakow' label='Krakow'/>
-            <Checkbox key='Hyderabad' label='Hyderabad'/>
-            <Checkbox key='Bangalore' label='Bangalore'/>
-          </CheckboxGroup>
-        </Grid>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?' additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} readOnly required>
-            <RadioButton key='Yes' label='Yes'/>
-            <RadioButton key="No.. no I don't" label="No.. no I don't"/>
-          </RadioButtonGroup>
-        </Grid>
-
-        <Select label='What would you like to eat?' info='' additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }} readOnly>
-          <Option>choose meal…</Option>
-          <Option selected>Pizza</Option>
-          <Option>Sandwich</Option>
-          <Option>Salad</Option>
-        </Select>
-
-        <Grid item={{ colStartEnd: '1/-1' }}>
-          <TextArea readOnly name='notes' required={false} label='Meeting notes' status={notes.status} info={notes.info || notes.help} value='Test copy' additionalInfo={{
-            heading: 'Field info',
-            content: 'Lorem ipsum dolor set amet.'
-        }}/>
-        </Grid>
-      </Grid>
-    </Form>);
-};
-//# sourceMappingURL=Form.mocks.jsx.map

package/jsx/core/Form/Form.mocks.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, useRef, useState, useEffect } from 'react';\nimport type { ChangeEvent, FocusEvent, FormEvent } from 'react';\n\nimport {\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  Form,\n  Grid,\n  Input,\n  RadioButton,\n  RadioButtonGroup,\n  Select,\n  Option,\n  TextArea,\n  useToaster,\n  usePrevious\n} from '@pega/cosmos-react-core';\nimport type { FormControlProps, DateRangeInputProps } from '@pega/cosmos-react-core';\nimport { Editor as RichTextEditor } from '@pega/cosmos-react-rte';\nimport type { EditorState as RichTextEditorState } from '@pega/cosmos-react-rte';\n\nimport { FileInputDemo } from '../File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters…go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const FormContent = ({\n  cols,\n  heading,\n  description,\n  showActions\n}: {\n  cols: number;\n  showActions: boolean;\n  heading?: string;\n  description?: string;\n}) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useToaster();\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  return (\n    <Form\n      actions={showActions ? actions : undefined}\n      description={description}\n      heading={heading}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          additionalInfo={{\n            heading: 'Field info',\n            content: 'Lorem ipsum dolor set amet.'\n          }}\n          required\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          additionalInfo={{\n            heading: 'Field info',\n            content: 'Lorem ipsum dolor set amet.'\n          }}\n        />\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup\n            name='visited'\n            label='Places you have worked'\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n            required\n          >\n            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n              <Checkbox\n                key={office}\n                label={office}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <Checkbox\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n            label='Check me, please'\n            required\n          />\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup\n            name='meetings'\n            label='Do you enjoy early morning meetings?'\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n            required\n          >\n            {['Yes', \"No… no I don't\"].map(option => (\n              <RadioButton\n                key={option}\n                label={option}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </RadioButtonGroup>\n        </Grid>\n\n        <Select\n          label='What would you like to eat?'\n          info='FYI: options are limited'\n          additionalInfo={{\n            heading: 'Field info',\n            content: 'Lorem ipsum dolor set amet.'\n          }}\n          required\n        >\n          <Option>choose meal…</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <TextArea\n            name='notes'\n            required={notes.required}\n            label='Meeting notes'\n            status={notes.status}\n            info={notes.info || notes.help}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n          />\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RichTextEditor\n            label='Detailed meeting notes'\n            info='The rich text editor can be used in forms, comments, and documents'\n            toolbar={[\n              'inline-styling',\n              'headers',\n              'tables',\n              'links',\n              'images',\n              'lists',\n              'cut-copy-paste',\n              'indentation'\n            ]}\n            onImageAdded={onImageAdded}\n            ref={editorRef}\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n            required\n          />\n        </Grid>\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <FileInputDemo label='Meeting attachments' />\n        </Grid>\n\n        <ComboboxFilterableStory label='Select a user' />\n      </Grid>\n    </Form>\n  );\n};\n\nexport const ReadOnlyFormContent = ({\n  cols,\n  heading,\n  description,\n  showActions\n}: {\n  cols: number;\n  showActions: boolean;\n  heading?: string;\n  description?: string;\n}) => {\n  const [value, setValue] = useState<DateRangeInputProps['value']>({ start: 1, end: '3' });\n  const prev = usePrevious(value);\n  useEffect(() => {\n    if (prev !== value) setValue(value);\n  }, [prev, value]);\n  const [fields] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useToaster();\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  return (\n    <Form\n      actions={showActions ? actions : undefined}\n      description={description}\n      heading={heading}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n        <Input\n          readOnly\n          name='name'\n          label='Name'\n          value='Test'\n          required={false}\n          status={name.status}\n          additionalInfo={{\n            heading: 'Field info',\n            content: 'Lorem ipsum dolor set amet.'\n          }}\n        />\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup\n            name='places visited'\n            label='Places you have worked'\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n            readOnly\n            required\n          >\n            <Checkbox key='Cambridge' label='Cambridge' />\n            <Checkbox key='Krakow' label='Krakow' />\n            <Checkbox key='Hyderabad' label='Hyderabad' />\n            <Checkbox key='Bangalore' label='Bangalore' />\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup\n            name='meetings'\n            label='Do you really enjoy early morning meetings?'\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n            required\n          >\n            <RadioButton key='Yes' label='Yes' />\n            <RadioButton key=\"No.. no I don't\" label=\"No.. no I don't\" readOnly />\n          </RadioButtonGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup\n            name='more places visited'\n            label='More Places you have worked'\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n            required\n          >\n            <Checkbox key='Cambridge' label='Cambridge' readOnly />\n            <Checkbox key='Krakow' label='Krakow' />\n            <Checkbox key='Hyderabad' label='Hyderabad' />\n            <Checkbox key='Bangalore' label='Bangalore' />\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup\n            name='meetings'\n            label='Do you enjoy early morning meetings?'\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n            readOnly\n            required\n          >\n            <RadioButton key='Yes' label='Yes' />\n            <RadioButton key=\"No.. no I don't\" label=\"No.. no I don't\" />\n          </RadioButtonGroup>\n        </Grid>\n\n        <Select\n          label='What would you like to eat?'\n          info=''\n          additionalInfo={{\n            heading: 'Field info',\n            content: 'Lorem ipsum dolor set amet.'\n          }}\n          readOnly\n        >\n          <Option>choose meal…</Option>\n          <Option selected>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <TextArea\n            readOnly\n            name='notes'\n            required={false}\n            label='Meeting notes'\n            status={notes.status}\n            info={notes.info || notes.help}\n            value='Test copy'\n            additionalInfo={{\n              heading: 'Field info',\n              content: 'Lorem ipsum dolor set amet.'\n            }}\n          />\n        </Grid>\n      </Grid>\n    </Form>\n  );\n};\n"]}

package/jsx/core/Form/Form.stories.d.ts

@@ -1,25 +0,0 @@
-import type { StoryFn } from '@storybook/react';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-interface FormStoryProps {
-    heading?: string;
-    description?: string;
-}
-export declare const ReadOnlyOneColumnForm: StoryFn<FormStoryProps>;
-export declare const OneColumnForm: StoryFn<FormStoryProps>;
-export declare const TwoColumnForm: StoryFn<FormStoryProps>;
-export declare const ThreeColumnForm: StoryFn<FormStoryProps>;
-export declare const SimpleFormDemo: StoryFn<FormStoryProps & {
-    withBanners?: boolean;
-}>;
-interface ConfigurableFormProps extends FormStoryProps {
-    foregroundColor?: string;
-    backgroundColor?: string;
-    borderColor?: string;
-    borderWidth?: string;
-    borderRadius?: number;
-    hoverBorderColor?: string;
-    focusBorderColor?: string;
-}
-export declare const ConfigurableForm: StoryFn<ConfigurableFormProps>;
-//# sourceMappingURL=Form.stories.d.ts.map

package/jsx/core/Form/Form.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAgBtD,wBAeU;AACV,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,cAAc,CASzD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,cAAc,CAEnD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CAqD9E,CAAC;AAUF,UAAU,qBAAsB,SAAQ,cAAc;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,CAwB3D,CAAC"}

package/jsx/core/Form/Form.stories.jsx

@@ -1,106 +0,0 @@
-import { useState } from 'react';
-import { Banner, Button, Configuration, Flex, Form, FormField, Input } from '@pega/cosmos-react-core';
-import { FormContent, ReadOnlyFormContent } from './Form.mocks';
-export default {
-    title: 'Core/Form',
-    component: Form,
-    subcomponents: {
-        FormField
-    },
-    excludeStories: ['ConfigurableForm'],
-    args: {
-        heading: 'Form demo',
-        description: ''
-    },
-    argTypes: {
-        heading: { control: { type: 'text' } },
-        description: { control: { type: 'text' } }
-    }
-};
-export const ReadOnlyOneColumnForm = (args) => {
-    return (<ReadOnlyFormContent cols={1} heading={args.heading} description={args.description} showActions/>);
-};
-export const OneColumnForm = (args) => {
-    return <FormContent cols={1} heading={args.heading} description={args.description} showActions/>;
-};
-export const TwoColumnForm = (args) => {
-    return <FormContent cols={2} heading={args.heading} description={args.description} showActions/>;
-};
-export const ThreeColumnForm = (args) => {
-    return <FormContent cols={3} heading={args.heading} description={args.description} showActions/>;
-};
-export const SimpleFormDemo = (args) => {
-    const [inputValue, setInputValue] = useState('');
-    const [success, setSuccess] = useState('');
-    const actions = (<>
-      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>
-        Cancel
-      </Button>
-      <Button name='Submit' type='submit' variant='primary'>
-        Submit
-      </Button>
-    </>);
-    const successBanner = (<Banner variant='success' messages={['Form submitted', `Input value: ${success}`]}/>);
-    const errorBanner = (<Banner variant='urgent' messages={['All required fields in the form must be completed.']}/>);
-    const banner = success ? successBanner : errorBanner;
-    return (<Form banners={args.withBanners ? banner : undefined} actions={actions} heading={args.heading} description={args.description} onSubmit={(e) => {
-            e.preventDefault();
-            setSuccess(inputValue);
-            setInputValue('');
-        }}>
-      <Flex container={{ direction: 'column', itemGap: 2 }}>
-        <Input label='Name' info='Enter your first name' required value={inputValue} onChange={(e) => {
-            setSuccess('');
-            setInputValue(e.target.value);
-        }}/>
-      </Flex>
-    </Form>);
-};
-SimpleFormDemo.args = {
-    withBanners: false
-};
-SimpleFormDemo.argTypes = {
-    withBanners: { control: { type: 'boolean' } }
-};
-export const ConfigurableForm = (args) => {
-    return (<Configuration theme={{
-            components: {
-                'form-control': {
-                    'foreground-color': args.foregroundColor,
-                    'background-color': args.backgroundColor,
-                    'border-color': args.borderColor,
-                    'border-width': args.borderWidth,
-                    'border-radius': args.borderRadius,
-                    ':hover': {
-                        'border-color': args.hoverBorderColor
-                    },
-                    ':focus': {
-                        'border-color': args.focusBorderColor
-                    }
-                }
-            }
-        }}>
-      <FormContent cols={2} showActions/>
-    </Configuration>);
-};
-ConfigurableForm.args = {
-    foregroundColor: '#054a8a',
-    backgroundColor: '#e2f1ff',
-    borderColor: '#939393',
-    borderWidth: '0.0625rem',
-    borderRadius: 0.5,
-    hoverBorderColor: '#3f3f3f',
-    focusBorderColor: 'transparent'
-};
-ConfigurableForm.argTypes = {
-    foregroundColor: { control: { type: 'color' } },
-    backgroundColor: { control: { type: 'color' } },
-    borderColor: { control: { type: 'color' } },
-    borderWidth: { control: { type: 'text' } },
-    borderRadius: { control: { type: 'number' } },
-    hoverBorderColor: { control: { type: 'color' } },
-    focusBorderColor: { control: { type: 'color' } },
-    heading: { table: { disable: true } },
-    description: { table: { disable: true } }
-};
-//# sourceMappingURL=Form.stories.jsx.map