@pega/cosmos-react-demos 2.0.0 → 2.1.3

package/jsx/core/FieldGroup/FieldGroupList.stories.jsx

@@ -0,0 +1,150 @@
+import { useReducer } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button, createUID, DateInput, FieldGroupList, FileInput, Form, Input, Select, Option, Text, TextArea } from '@pega/cosmos-react-core';
+import { DemoFieldRenderer, demoGroupMeta, fieldGroupReducer } from './FieldGroupList.mocks';
+export default {
+    title: 'Core/FieldGroupList',
+    component: FieldGroupList
+};
+const ExpensesFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return <Input label={label}/>;
+    }
+    if (type === 'select') {
+        return (<Select label={label}>
+        <Option>Select</Option>
+        <Option>Advertising</Option>
+        <Option>Car and truck expenses</Option>
+        <Option>Commissions and fees</Option>
+        <Option>Contract labor</Option>
+        <Option>Legal and professional services</Option>
+        <Option>Office expense</Option>
+        <Option>Rent or lease</Option>
+        <Option>Vehicles, machinery, and equipment</Option>
+        <Option>Repairs and maintenance</Option>
+        <Option>Travel and meals</Option>
+        <Option>Deductible meals</Option>
+        <Option>Utilities</Option>
+        <Option>Other</Option>
+      </Select>);
+    }
+    if (type === 'file') {
+        return <FileInput label={label} multiple/>;
+    }
+    if (type === 'textarea') {
+        return <TextArea label={label}/>;
+    }
+    if (type === 'date') {
+        return <DateInput label={label}/>;
+    }
+    return null;
+};
+const expensesGroupMeta = {
+    label: 'Expense',
+    fields: [
+        { type: 'select', label: 'Type of expense' },
+        { type: 'date', label: 'Date of expense' },
+        { type: 'file', label: 'Receipts' },
+        { type: 'textarea', label: 'Notes' }
+    ]
+};
+export const ExpensesDemo = () => {
+    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), undefined, () => [
+        {
+            name: `${expensesGroupMeta.label} 1`,
+            id: createUID(),
+            children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)
+        }
+    ]);
+    return (<Form actions={<>
+          <Button name='Cancel' variant='secondary' onClick={(e) => {
+                action('Click')(`${e.currentTarget.name}:${e.type}`);
+            }}>
+            Cancel
+          </Button>
+          <Button name='Submit' type='submit' variant='primary'>
+            Submit
+          </Button>
+        </>} onSubmit={(e) => {
+            e.preventDefault();
+            action('Submit')(`Form:${e.type}`);
+        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
+      <Text variant='h2'>Expense report</Text>
+      <FieldGroupList items={state} onAdd={() => {
+            dispatch({ action: 'add' });
+        }} onDelete={id => {
+            dispatch({ action: 'delete', id });
+        }}/>
+    </Form>);
+};
+const InsuranceFieldRenderer = ({ label, type }) => {
+    if (type === 'text') {
+        return <Input label={label}/>;
+    }
+    if (type === 'select') {
+        return (<Select label={label}>
+        <Option>Select</Option>
+        <Option>Mother</Option>
+        <Option>Father</Option>
+        <Option>Guardian</Option>
+        <Option>Child</Option>
+        <Option>Spouse</Option>
+        <Option>Sibling</Option>
+        <Option>Other</Option>
+      </Select>);
+    }
+    return null;
+};
+const insuranceGroupMeta = {
+    label: 'Entry',
+    fields: [
+        { type: 'text', label: 'First name' },
+        { type: 'text', label: 'Last name' },
+        { type: 'select', label: 'Relationship' }
+    ]
+};
+export const InsuranceDemo = () => {
+    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), undefined, () => [
+        {
+            name: `${insuranceGroupMeta.label} 1`,
+            id: createUID(),
+            children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)
+        }
+    ]);
+    return (<Form actions={<>
+          <Button name='Cancel' variant='secondary' onClick={(e) => {
+                action('Click')(`${e.currentTarget.name}:${e.type}`);
+            }}>
+            Cancel
+          </Button>
+          <Button name='Submit' type='submit' variant='primary'>
+            Submit
+          </Button>
+        </>} onSubmit={(e) => {
+            e.preventDefault();
+            action('Submit')(`Form:${e.type}`);
+        }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
+      <Text variant='h1'>Insurance step 1</Text>
+      <Text variant='h2'>Dependants</Text>
+      <FieldGroupList items={state} onAdd={() => {
+            dispatch({ action: 'add' });
+        }} onDelete={id => {
+            dispatch({ action: 'delete', id });
+        }}/>
+    </Form>);
+};
+export const FieldGroupListDemo = () => {
+    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
+        {
+            name: `${demoGroupMeta.label} 1`,
+            id: createUID(),
+            children: demoGroupMeta.fields.map(DemoFieldRenderer)
+        }
+    ]);
+    return (<FieldGroupList items={state} onAdd={() => {
+            dispatch({ action: 'add' });
+        }} onDelete={id => {
+            dispatch({ action: 'delete', id });
+        }}/>);
+};
+//# sourceMappingURL=FieldGroupList.stories.jsx.map

package/jsx/core/FieldGroup/FieldGroupList.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroupList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  FieldGroupList,\n  FileInput,\n  Form,\n  Input,\n  Select,\n  Option,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  fieldGroupReducer,\n  FieldMeta,\n  GroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList\n};\n\nconst ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Advertising</Option>\n        <Option>Car and truck expenses</Option>\n        <Option>Commissions and fees</Option>\n        <Option>Contract labor</Option>\n        <Option>Legal and professional services</Option>\n        <Option>Office expense</Option>\n        <Option>Rent or lease</Option>\n        <Option>Vehicles, machinery, and equipment</Option>\n        <Option>Repairs and maintenance</Option>\n        <Option>Travel and meals</Option>\n        <Option>Deductible meals</Option>\n        <Option>Utilities</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n  if (type === 'file') {\n    return <FileInput label={label} multiple />;\n  }\n  if (type === 'textarea') {\n    return <TextArea label={label} />;\n  }\n  if (type === 'date') {\n    return <DateInput label={label} />;\n  }\n\n  return null;\n};\n\nconst expensesGroupMeta: GroupMeta = {\n  label: 'Expense',\n  fields: [\n    { type: 'select', label: 'Type of expense' },\n    { type: 'date', label: 'Date of expense' },\n    { type: 'file', label: 'Receipts' },\n    { type: 'textarea', label: 'Notes' }\n  ]\n};\n\nexport const ExpensesDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${expensesGroupMeta.label} 1`,\n        id: createUID(),\n        children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h2'>Expense report</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nconst InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n  if (type === 'text') {\n    return <Input label={label} />;\n  }\n  if (type === 'select') {\n    return (\n      <Select label={label}>\n        <Option>Select</Option>\n        <Option>Mother</Option>\n        <Option>Father</Option>\n        <Option>Guardian</Option>\n        <Option>Child</Option>\n        <Option>Spouse</Option>\n        <Option>Sibling</Option>\n        <Option>Other</Option>\n      </Select>\n    );\n  }\n\n  return null;\n};\n\nconst insuranceGroupMeta: GroupMeta = {\n  label: 'Entry',\n  fields: [\n    { type: 'text', label: 'First name' },\n    { type: 'text', label: 'Last name' },\n    { type: 'select', label: 'Relationship' }\n  ]\n};\n\nexport const InsuranceDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${insuranceGroupMeta.label} 1`,\n        id: createUID(),\n        children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <Form\n      actions={\n        <>\n          <Button\n            name='Cancel'\n            variant='secondary'\n            onClick={(e: MouseEvent<HTMLButtonElement>) => {\n              action('Click')(`${e.currentTarget.name}:${e.type}`);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button name='Submit' type='submit' variant='primary'>\n            Submit\n          </Button>\n        </>\n      }\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        action('Submit')(`Form:${e.type}`);\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Text variant='h1'>Insurance step 1</Text>\n      <Text variant='h2'>Dependants</Text>\n      <FieldGroupList\n        items={state}\n        onAdd={() => {\n          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo = () => {\n  const [state, dispatch] = useReducer(\n    fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n    undefined,\n    () => [\n      {\n        name: `${demoGroupMeta.label} 1`,\n        id: createUID(),\n        children: demoGroupMeta.fields.map(DemoFieldRenderer)\n      }\n    ]\n  );\n\n  return (\n    <FieldGroupList\n      items={state}\n      onAdd={() => {\n        dispatch({ action: 'add' });\n      }}\n      onDelete={id => {\n        dispatch({ action: 'delete', id });\n      }}\n    />\n  );\n};\n"]}

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

@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react';
+import { FieldValueListProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface FieldValueListStoryProps extends FieldValueListProps {
+    name: string;
+    value: string;
+}
+export declare const FieldValueListDemo: Story<FieldValueListStoryProps>;
+//# sourceMappingURL=FieldValueList.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAkB,mBAAmB,EAAsB,MAAM,yBAAyB,CAAC;;AAElG,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CA4C9D,CAAC"}

package/jsx/core/File/FileDisplay.stories.d.ts

@@ -0,0 +1,20 @@
+import { Meta, Story } from '@storybook/react';
+import { FileDisplayProps, FileUploadItemProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface FileDisplayDemoProps {
+    withDisplayText?: boolean;
+    withValue?: boolean;
+    withPreview?: boolean;
+    withDownload?: boolean;
+}
+export declare const FileDisplayTypes: Story<FileDisplayDemoProps>;
+export declare const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps>;
+interface FileUploadItemDemoProps extends FileDisplayDemoProps {
+    name: FileUploadItemProps['name'];
+    meta?: FileUploadItemProps['meta'];
+    error?: FileUploadItemProps['error'];
+    progress?: FileUploadItemProps['progress'];
+}
+export declare const FileUploadItemDemo: Story<FileUploadItemDemoProps>;
+//# sourceMappingURL=FileDisplay.stories.d.ts.map

package/jsx/core/File/FileDisplay.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAQhB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAsC1E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAwC7D,CAAC"}

package/jsx/core/File/FileDisplay.stories.jsx

@@ -0,0 +1,135 @@
+import { useContext, useState } from 'react';
+import { FileDisplay, FieldValueList, Image, Popover, ToasterContext, useElement, useOuterEvent, FileUploadItem } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/File/Display',
+    component: FileDisplay,
+    args: {
+        withValue: true,
+        withPreview: true,
+        withDownload: true
+    },
+    argTypes: {
+        withValue: { control: { type: 'boolean' } },
+        withPreview: { control: { type: 'boolean' } },
+        withDownload: { control: { type: 'boolean' } }
+    }
+};
+export const FileDisplayTypes = (args) => {
+    const { push } = useContext(ToasterContext);
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
+    const handleDownload = args.withDownload
+        ? (url) => push({ content: `Downloaded ${url}` })
+        : undefined;
+    const fields = [
+        {
+            id: '1',
+            name: 'Image file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'image.jpg' : undefined} value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '2',
+            name: 'Video file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'video.avi' : undefined} value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '3',
+            name: 'Audio file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'recording.mp3' : undefined} value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '4',
+            name: 'Document file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'document.doc' : undefined} value={args.withValue ? 'https://pega.com/media/document.doc' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '5',
+            name: 'PDF file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'invoice.pdf' : undefined} value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '6',
+            name: 'Presentation file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'review.pps' : undefined} value={args.withValue ? 'https://pega.com/media/review.pps' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        },
+        {
+            id: '7',
+            name: 'Spreadsheet file',
+            value: (<FileDisplay displayText={args.withDisplayText ? 'welfare.xlsx' : undefined} value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined} onPreview={handlePreview} onDownload={handleDownload}/>)
+        }
+    ];
+    return <FieldValueList fields={fields}/>;
+};
+FileDisplayTypes.args = {
+    withDisplayText: true
+};
+FileDisplayTypes.argTypes = {
+    withDisplayText: { control: { type: 'boolean' } }
+};
+export const FileDisplayDemo = (args) => {
+    const [buttonEl, setButtonEl] = useElement();
+    const [popoverEl, setPopoverEl] = useElement();
+    const [showPreview, setShowPreview] = useState(false);
+    useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const handleDownload = args.withDownload
+        ? () => {
+            const element = document.createElement('a');
+            element.href = imageSrc;
+            element.download = 'cosmos_file_display_download.jpg';
+            element.click();
+        }
+        : undefined;
+    return (<>
+      <FileDisplay ref={setButtonEl} variant={args.variant} displayText={args.displayText} value={args.withValue ? imageSrc : undefined} onPreview={handlePreview} onDownload={handleDownload}/>
+      <Popover ref={setPopoverEl} show={showPreview} target={buttonEl}>
+        <Image src={imageSrc} alt={args.displayText || 'Pega World iNspire'}/>
+      </Popover>
+    </>);
+};
+FileDisplayDemo.args = {
+    variant: 'file',
+    displayText: 'Pega World iNspire'
+};
+FileDisplayDemo.argTypes = {
+    variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },
+    displayText: { control: { type: 'text' } }
+};
+export const FileUploadItemDemo = (args) => {
+    const [fileEl, setFileEl] = useElement();
+    const [popoverEl, setPopoverEl] = useElement();
+    const [showPreview, setShowPreview] = useState(false);
+    useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const handleDownload = args.withDownload
+        ? () => {
+            const element = document.createElement('a');
+            element.href = imageSrc;
+            element.download = 'cosmos_file_display_download.jpg';
+            element.click();
+        }
+        : undefined;
+    return (<>
+      <FileUploadItem ref={setFileEl} name={args.name} meta={args.meta} error={args.error} progress={args.progress} thumbnail={imageSrc} onPreview={handlePreview} onDownload={handleDownload}/>
+      <Popover ref={setPopoverEl} show={showPreview} target={fileEl} strategy='fixed'>
+        <Image src={imageSrc} alt={args.name}/>
+      </Popover>
+    </>);
+};
+FileUploadItemDemo.args = {
+    name: 'Pega World iNspire',
+    meta: 'Some additional information',
+    error: false,
+    progress: 100
+};
+FileUploadItemDemo.argTypes = {
+    withValue: { table: { disable: true } },
+    name: { control: { type: 'text' } },
+    meta: { control: { type: 'text' } },
+    error: { control: { type: 'boolean' } },
+    progress: { control: { type: 'number' } }
+};
+//# sourceMappingURL=FileDisplay.stories.jsx.map

package/jsx/core/File/FileDisplay.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileDisplay.stories.jsx","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EACL,WAAW,EAGX,cAAc,EACd,KAAK,EACL,OAAO,EACP,cAAc,EACd,UAAU,EACV,aAAa,EAEb,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,SAAS,EAAE,IAAI;QACf,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,IAAI;KACnB;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC/C;CACM,CAAC;AASV,MAAM,CAAC,MAAM,gBAAgB,GAAgC,CAAC,IAA0B,EAAE,EAAE;IAC1F,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW;QACpC,CAAC,CAAC,CAAC,GAAyB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,aAAa,GAAG,EAAE,EAAE,CAAC;QACtE,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY;QACtC,CAAC,CAAC,CAAC,GAAyB,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,EAAE,EAAE,CAAC;QACvE,CAAC,CAAC,SAAS,CAAC;IAEd,MAAM,MAAM,GAAG;QACb;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,CACL,CAAC,WAAW,CACV,WAAW,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAC5D,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,iDAAiD,CAAC,CAAC,CAAC,SAAS,CAAC,CACtF,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,EAC3B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,CACL,CAAC,WAAW,CACV,WAAW,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAC5D,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,uCAAuC,CAAC,CAAC,CAAC,SAAS,CAAC,CAC5E,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,EAC3B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE,CACL,CAAC,WAAW,CACV,WAAW,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAAC,CAChE,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oDAAoD,CAAC,CAAC,CAAC,SAAS,CAAC,CACzF,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,EAC3B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,CACL,CAAC,WAAW,CACV,WAAW,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/D,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1E,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,EAC3B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,UAAU;YAChB,KAAK,EAAE,CACL,CAAC,WAAW,CACV,WAAW,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAC9D,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,SAAS,CAAC,CACzE,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,EAC3B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,mBAAmB;YACzB,KAAK,EAAE,CACL,CAAC,WAAW,CACV,WAAW,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAC7D,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,SAAS,CAAC,CACxE,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,EAC3B,CACH;SACF;QACD;YACE,EAAE,EAAE,GAAG;YACP,IAAI,EAAE,kBAAkB;YACxB,KAAK,EAAE,CACL,CAAC,WAAW,CACV,WAAW,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/D,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,qCAAqC,CAAC,CAAC,CAAC,SAAS,CAAC,CAC1E,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,EAC3B,CACH;SACF;KACF,CAAC;IAEF,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,EAAG,CAAC;AAC5C,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,eAAe,EAAE,IAAI;CACtB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAClD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAmD,CAC7E,IAA6C,EAC7C,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAE,CAAC;IAC7C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,aAAa,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3E,MAAM,QAAQ,GACZ,uGAAuG,CAAC;IAE1G,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhF,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY;QACtC,CAAC,CAAC,GAAG,EAAE;YACH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAC5C,OAAO,CAAC,IAAI,GAAG,QAAQ,CAAC;YACxB,OAAO,CAAC,QAAQ,GAAG,kCAAkC,CAAC;YACtD,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,EACE;MAAA,CAAC,WAAW,CACV,GAAG,CAAC,CAAC,WAAW,CAAC,CACjB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAC7C,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,EAE7B;MAAA,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,CAC9D;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,oBAAoB,CAAC,EACtE;MAAA,EAAE,OAAO,CACX;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,OAAO,EAAE,MAAM;IACf,WAAW,EAAE,oBAAoB;CAClC,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1E,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AASF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,EAAE,CAAC;IACzC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,UAAU,EAAE,CAAC;IAC/C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,aAAa,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;IAEzE,MAAM,QAAQ,GACZ,uGAAuG,CAAC;IAE1G,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAEhF,MAAM,cAAc,GAAG,IAAI,CAAC,YAAY;QACtC,CAAC,CAAC,GAAG,EAAE;YACH,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;YAC5C,OAAO,CAAC,IAAI,GAAG,QAAQ,CAAC;YACxB,OAAO,CAAC,QAAQ,GAAG,kCAAkC,CAAC;YACtD,OAAO,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC;QACH,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,EACE;MAAA,CAAC,cAAc,CACb,GAAG,CAAC,CAAC,SAAS,CAAC,CACf,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,SAAS,CAAC,CAAC,QAAQ,CAAC,CACpB,SAAS,CAAC,CAAC,aAAa,CAAC,CACzB,UAAU,CAAC,CAAC,cAAc,CAAC,EAE7B;MAAA,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,QAAQ,CAAC,OAAO,CAC7E;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EACvC;MAAA,EAAE,OAAO,CACX;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,IAAI,EAAE,oBAAoB;IAC1B,IAAI,EAAE,6BAA6B;IACnC,KAAK,EAAE,KAAK;IACZ,QAAQ,EAAE,GAAG;CACd,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport {\n  FileDisplay,\n  FileDisplayProps,\n  FileItemProps,\n  FieldValueList,\n  Image,\n  Popover,\n  ToasterContext,\n  useElement,\n  useOuterEvent,\n  FileUploadItemProps,\n  FileUploadItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/File/Display',\n  component: FileDisplay,\n  args: {\n    withValue: true,\n    withPreview: true,\n    withDownload: true\n  },\n  argTypes: {\n    withValue: { control: { type: 'boolean' } },\n    withPreview: { control: { type: 'boolean' } },\n    withDownload: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n  withDisplayText?: boolean;\n  withValue?: boolean;\n  withPreview?: boolean;\n  withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const fields = [\n    {\n      id: '1',\n      name: 'Image file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '2',\n      name: 'Video file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'video.avi' : undefined}\n          value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '3',\n      name: 'Audio file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n          value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '4',\n      name: 'Document file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'document.doc' : undefined}\n          value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '5',\n      name: 'PDF file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n          value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '6',\n      name: 'Presentation file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'review.pps' : undefined}\n          value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '7',\n      name: 'Spreadsheet file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n          value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    }\n  ];\n\n  return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n  withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n  withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n  args: FileDisplayProps & FileDisplayDemoProps\n) => {\n  const [buttonEl, setButtonEl] = useElement();\n  const [popoverEl, setPopoverEl] = useElement();\n  const [showPreview, setShowPreview] = useState(false);\n\n  useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n  const handleDownload = args.withDownload\n    ? () => {\n        const element = document.createElement('a');\n        element.href = imageSrc;\n        element.download = 'cosmos_file_display_download.jpg';\n        element.click();\n      }\n    : undefined;\n\n  return (\n    <>\n      <FileDisplay\n        ref={setButtonEl}\n        variant={args.variant}\n        displayText={args.displayText}\n        value={args.withValue ? imageSrc : undefined}\n        onPreview={handlePreview}\n        onDownload={handleDownload}\n      />\n      <Popover ref={setPopoverEl} show={showPreview} target={buttonEl}>\n        <Image src={imageSrc} alt={args.displayText || 'Pega World iNspire'} />\n      </Popover>\n    </>\n  );\n};\n\nFileDisplayDemo.args = {\n  variant: 'file',\n  displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n  variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n  displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n  name: FileUploadItemProps['name'];\n  meta?: FileUploadItemProps['meta'];\n  error?: FileUploadItemProps['error'];\n  progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: Story<FileUploadItemDemoProps> = (\n  args: FileUploadItemDemoProps\n) => {\n  const [fileEl, setFileEl] = useElement();\n  const [popoverEl, setPopoverEl] = useElement();\n  const [showPreview, setShowPreview] = useState(false);\n\n  useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n  const handleDownload = args.withDownload\n    ? () => {\n        const element = document.createElement('a');\n        element.href = imageSrc;\n        element.download = 'cosmos_file_display_download.jpg';\n        element.click();\n      }\n    : undefined;\n\n  return (\n    <>\n      <FileUploadItem\n        ref={setFileEl}\n        name={args.name}\n        meta={args.meta}\n        error={args.error}\n        progress={args.progress}\n        thumbnail={imageSrc}\n        onPreview={handlePreview}\n        onDownload={handleDownload}\n      />\n      <Popover ref={setPopoverEl} show={showPreview} target={fileEl} strategy='fixed'>\n        <Image src={imageSrc} alt={args.name} />\n      </Popover>\n    </>\n  );\n};\n\nFileUploadItemDemo.args = {\n  name: 'Pega World iNspire',\n  meta: 'Some additional information',\n  error: false,\n  progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n  withValue: { table: { disable: true } },\n  name: { control: { type: 'text' } },\n  meta: { control: { type: 'text' } },\n  error: { control: { type: 'boolean' } },\n  progress: { control: { type: 'number' } }\n};\n"]}

package/jsx/core/File/FileInput.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/react';
+import { FileInputProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface FileInputStoryProps extends FileInputProps {
+    sizeLimit?: number;
+}
+export declare const FileInputDemo: Story<FileInputStoryProps>;
+//# sourceMappingURL=FileInput.stories.d.ts.map

package/jsx/core/File/FileInput.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,cAAc,EAGf,MAAM,yBAAyB,CAAC;;AAGjC,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CA+EpD,CAAC"}

package/jsx/core/Flex/Flex.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledFlexContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    height?: number | undefined;
+    width?: number | undefined;
+}, never>;
+export declare const StyledFlexItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    inActive?: boolean | undefined;
+    noPadding?: boolean | undefined;
+    width?: number | undefined;
+}, never>;
+//# sourceMappingURL=Flex.styles.d.ts.map

package/jsx/core/Flex/Flex.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB;;;SAiB/B,CAAC;AAIF,eAAO,MAAM,cAAc;;;;SAwBzB,CAAC"}

package/jsx/core/Flex/Flex.styles.js

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+import { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledFlexContainer = styled.div(({ height, theme, width }) => {
+    return css `
+      border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
+      background-color: ${theme.base.colors.blue.light};
+
+      ${height &&
+        css `
+        height: ${height}rem;
+      `}
+
+      ${width &&
+        css `
+        width: ${width}rem;
+      `}
+    `;
+});
+StyledFlexContainer.defaultProps = defaultThemeProp;
+export const StyledFlexItem = styled.div(({ inActive, noPadding, theme, width }) => {
+    const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
+    return css `
+    border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};
+    padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};
+    text-align: center;
+    background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};
+    color: ${theme.base.colors.black};
+
+    ${width &&
+        css `
+      width: ${width}rem;
+    `}
+
+    span {
+      font-size: ${fontSize.xl};
+      font-weight: ${theme.base['font-weight'].bold};
+    }
+  `;
+});
+StyledFlexItem.defaultProps = defaultThemeProp;
+//# sourceMappingURL=Flex.styles.js.map

package/jsx/core/Flex/Flex.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.styles.js","sourceRoot":"","sources":["../../../src/core/Flex/Flex.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE9E,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAC3C,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3B,OAAO,GAAG,CAAA;2BACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;0BACrD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;QAE9C,MAAM;QACR,GAAG,CAAA;kBACS,MAAM;OACjB;;QAEC,KAAK;QACP,GAAG,CAAA;iBACQ,KAAK;OACf;KACF,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAIrC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3C,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEtF,OAAO,GAAG,CAAA;yBACa,KAAK,CAAC,IAAI,CAAC,OAAO,WAAW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;eAC9D,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,OAAO,IAAI;;wBAE3C,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK;aAC9E,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;MAE9B,KAAK;QACP,GAAG,CAAA;eACQ,KAAK;KACf;;;mBAGc,QAAQ,CAAC,EAAE;qBACT,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;GAEhD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { calculateFontSize, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledFlexContainer = styled.div<{ height?: number; width?: number }>(\n  ({ height, theme, width }) => {\n    return css`\n      border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n      background-color: ${theme.base.colors.blue.light};\n\n      ${height &&\n      css`\n        height: ${height}rem;\n      `}\n\n      ${width &&\n      css`\n        width: ${width}rem;\n      `}\n    `;\n  }\n);\n\nStyledFlexContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFlexItem = styled.div<{\n  inActive?: boolean;\n  noPadding?: boolean;\n  width?: number;\n}>(({ inActive, noPadding, theme, width }) => {\n  const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n\n  return css`\n    border: calc(0.5 * ${theme.base.spacing}) solid ${theme.base.colors.black};\n    padding: ${noPadding ? '0' : `calc(4 * ${theme.base.spacing}) `};\n    text-align: center;\n    background-color: ${inActive ? theme.base.colors.white : theme.base.colors.orange.light};\n    color: ${theme.base.colors.black};\n\n    ${width &&\n    css`\n      width: ${width}rem;\n    `}\n\n    span {\n      font-size: ${fontSize.xl};\n      font-weight: ${theme.base['font-weight'].bold};\n    }\n  `;\n});\n\nStyledFlexItem.defaultProps = defaultThemeProp;\n"]}

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

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Meta, Story } from '@storybook/react';
+import { FlexContainerProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface FlexStoryProps {
+    direction?: FlexContainerProps['direction'];
+    gap?: FlexContainerProps['gap'];
+    pad?: FlexContainerProps['pad'];
+    wrap?: FlexContainerProps['wrap'];
+    justify?: FlexContainerProps['justify'];
+    alignItems?: FlexContainerProps['alignItems'];
+    alignContent?: FlexContainerProps['alignContent'];
+}
+export declare const Direction: Story<FlexStoryProps>;
+export declare const GapAndPadding: Story<FlexStoryProps>;
+export declare const Wrap: Story<FlexStoryProps>;
+export declare const Justify: Story<FlexStoryProps>;
+export declare const AlignItems: Story<FlexStoryProps>;
+export declare const AlignContent: Story<FlexStoryProps>;
+export declare const ResponsiveFlex: () => JSX.Element;
+//# sourceMappingURL=FlexContainer.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlexContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,kBAAkB,EAAQ,MAAM,yBAAyB,CAAC;;AAIzE,wBAMU;AAEV,UAAU,cAAc;IACtB,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAC;IAC5C,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAC;IAClC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAc3C,CAAC;AAaF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAc/C,CAAC;AAYF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,cAAc,CAoBtC,CAAC;AAUF,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,cAAc,CAczC,CAAC;AAaF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,cAAc,CAoB5C,CAAC;AAaF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAyB9C,CAAC;AAaF,eAAO,MAAM,cAAc,mBAsB1B,CAAC"}