@pega/cosmos-react-demos 3.0.0-dev.2.0 → 3.0.0-dev.21.0

package/lib/core/File/FileDisplay.stories.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
-import { FileDisplay, FieldValueList, Image, Popover, ToasterContext, useElement, useOuterEvent, FileUploadItem } from '@pega/cosmos-react-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { FileDisplay, FieldValueList, ToasterContext, FileUploadItem } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/File/Display',
     component: FileDisplay,
@@ -27,40 +27,40 @@ export const FileDisplayTypes = (args) => {
         {
             id: '1',
             name: 'Image file',
-            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'image.jpg' : undefined, value: args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(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: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'video.avi' : undefined, value: args.withValue ? 'https://pega.com/media/some-video.avi' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(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: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'recording.mp3' : undefined, value: args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(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: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'document.doc' : undefined, value: args.withValue ? 'https://pega.com/media/document.doc' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(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: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'invoice.pdf' : undefined, value: args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(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: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'review.pps' : undefined, value: args.withValue ? 'https://pega.com/media/review.pps' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(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: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'welfare.xlsx' : undefined, value: args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'welfare.xlsx' : undefined, value: args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined, onPreview: handlePreview, onDownload: handleDownload }))
         }
     ];
-    return _jsx(FieldValueList, { fields: fields }, void 0);
+    return _jsx(FieldValueList, { fields: fields });
 };
 FileDisplayTypes.args = {
     withDisplayText: true
@@ -69,21 +69,15 @@ 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 { push } = useContext(ToasterContext);
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
     const handleDownload = args.withDownload
-        ? () => {
-            const element = document.createElement('a');
-            element.href = imageSrc;
-            element.download = 'cosmos_file_display_download.jpg';
-            element.click();
-        }
+        ? (url) => push({ content: `Downloaded ${url}` })
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(FileDisplay, { ref: setButtonEl, variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: buttonEl, children: _jsx(Image, { src: imageSrc, alt: args.displayText || 'Pega World iNspire' }, void 0) }, void 0)] }, void 0));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    return (_jsx(FileDisplay, { variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }));
 };
 FileDisplayDemo.args = {
     variant: 'file',
@@ -94,21 +88,15 @@ FileDisplayDemo.argTypes = {
     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 { push } = useContext(ToasterContext);
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
     const handleDownload = args.withDownload
-        ? () => {
-            const element = document.createElement('a');
-            element.href = imageSrc;
-            element.download = 'cosmos_file_display_download.jpg';
-            element.click();
-        }
+        ? (url) => push({ content: `Downloaded ${url}` })
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(FileUploadItem, { ref: setFileEl, name: args.name, meta: args.meta, error: args.error, progress: args.progress, thumbnail: imageSrc, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: fileEl, strategy: 'fixed', children: _jsx(Image, { src: imageSrc, alt: args.name }, void 0) }, void 0)] }, void 0));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    return (_jsx(FileUploadItem, { name: args.name, meta: args.meta, error: args.error, progress: args.progress, thumbnail: imageSrc, onPreview: handlePreview, onDownload: handleDownload }));
 };
 FileUploadItemDemo.args = {
     name: 'Pega World iNspire',

package/lib/core/File/FileDisplay.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","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"]}
+{"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext } from 'react';\n\nimport {\n  FileDisplay,\n  FileDisplayProps,\n  FileItemProps,\n  FieldValueList,\n  ToasterContext,\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 { 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 imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileDisplay\n      variant={args.variant}\n      displayText={args.displayText}\n      value={args.withValue ? imageSrc : undefined}\n      onPreview={handlePreview}\n      onDownload={handleDownload}\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 { 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 imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileUploadItem\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  );\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/lib/core/File/FileInput.stories.d.ts.map

@@ -1 +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"}
+{"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;;AAIjC,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/lib/core/File/FileInput.stories.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useMemo, useCallback, useRef, useContext } from 'react';
 import { FileInput, createUID, useAfterInitialEffect } from '@pega/cosmos-react-core';
-import { FileServiceContext } from '@pega/cosmos-react-demos/lib/work/CaseView/FileService.mock';
+import { FileServiceContext } from '../../work/CaseView/FileService.mock';
 export default {
     title: 'Core/File/Input',
     component: FileInput
@@ -43,7 +43,7 @@ export const FileInputDemo = (args) => {
     }, [files.length]);
     const info = useMemo(() => {
         return hasError
-            ? errCounts.current.invalidSize > 0 && (_jsx("div", { children: `File size must be less than ${sizeLimit}MB` }, void 0))
+            ? errCounts.current.invalidSize > 0 && (_jsx("div", { children: `File size must be less than ${sizeLimit}MB` }))
             : null;
     }, [hasError]);
     return (_jsx(FileInput, { label: args.label, labelHidden: args.labelHidden, multiple: args.multiple, status: hasError ? 'error' : undefined, info: info, required: args.required, disabled: args.disabled, onFilesAdded: onFilesAdded, files: files.map(file => {
@@ -57,7 +57,7 @@ export const FileInputDemo = (args) => {
                 }
             };
             return file;
-        }) }, void 0));
+        }) }));
 };
 FileInputDemo.args = {
     multiple: true,

package/lib/core/File/FileInput.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, useCallback, useRef, useContext } from 'react';\n\nimport {\n  FileInput,\n  FileInputProps,\n  createUID,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\nimport { FileServiceContext } from '@pega/cosmos-react-demos/lib/work/CaseView/FileService.mock';\n\nexport default {\n  title: 'Core/File/Input',\n  component: FileInput\n} as Meta;\n\ninterface FileInputStoryProps extends FileInputProps {\n  sizeLimit?: number;\n}\n\nexport const FileInputDemo: Story<FileInputStoryProps> = (args: FileInputStoryProps) => {\n  const { files, attachFile, cancelFile, deleteFile } = useContext(FileServiceContext);\n  const errCounts = useRef({ invalidType: 0, invalidSize: 0 });\n  const [hasError, setHasError] = useState(false);\n\n  const sizeLimit = args.sizeLimit || 100;\n\n  // Fires anytime files are added to the input either through selection or drop\n  const onFilesAdded = useCallback(\n    (addedFiles: File[]) => {\n      errCounts.current = { invalidType: 0, invalidSize: 0 };\n\n      const newFiles = addedFiles.filter(f => {\n        let isValidSize = true;\n\n        if (f.size / 1000000 > sizeLimit) {\n          errCounts.current.invalidSize += 1;\n          isValidSize = false;\n        }\n\n        return isValidSize;\n      });\n\n      setHasError(newFiles.length < addedFiles.length);\n\n      newFiles.forEach((File: File) => {\n        const id = createUID();\n        attachFile({\n          id,\n          thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,\n          name: File.name,\n          category: '',\n          File,\n          onCancel: () => {\n            cancelFile(id);\n          }\n        });\n      });\n    },\n    [attachFile, deleteFile]\n  );\n\n  useAfterInitialEffect(() => {\n    if (files.length === 0) setHasError(false);\n  }, [files.length]);\n\n  const info = useMemo(() => {\n    return hasError\n      ? errCounts.current.invalidSize > 0 && (\n          <div>{`File size must be less than ${sizeLimit}MB`}</div>\n        )\n      : null;\n  }, [hasError]);\n\n  return (\n    <FileInput\n      label={args.label}\n      labelHidden={args.labelHidden}\n      multiple={args.multiple}\n      status={hasError ? 'error' : undefined}\n      info={info}\n      required={args.required}\n      disabled={args.disabled}\n      onFilesAdded={onFilesAdded}\n      files={files.map(file => {\n        return {\n          ...file,\n          onCancel: undefined,\n          onPreview: () => {},\n          onDownload: () => {},\n          onDelete: () => {\n            deleteFile(file.id);\n          }\n        };\n\n        return file;\n      })}\n    />\n  );\n};\n\nFileInputDemo.args = {\n  multiple: true,\n  sizeLimit: 100,\n  label: 'File input label',\n  labelHidden: false,\n  required: false,\n  disabled: false\n};\n\nFileInputDemo.argTypes = {\n  multiple: { control: { type: 'boolean' } },\n  sizeLimit: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"FileInput.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, useCallback, useRef, useContext } from 'react';\n\nimport {\n  FileInput,\n  FileInputProps,\n  createUID,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport { FileServiceContext } from '../../work/CaseView/FileService.mock';\n\nexport default {\n  title: 'Core/File/Input',\n  component: FileInput\n} as Meta;\n\ninterface FileInputStoryProps extends FileInputProps {\n  sizeLimit?: number;\n}\n\nexport const FileInputDemo: Story<FileInputStoryProps> = (args: FileInputStoryProps) => {\n  const { files, attachFile, cancelFile, deleteFile } = useContext(FileServiceContext);\n  const errCounts = useRef({ invalidType: 0, invalidSize: 0 });\n  const [hasError, setHasError] = useState(false);\n\n  const sizeLimit = args.sizeLimit || 100;\n\n  // Fires anytime files are added to the input either through selection or drop\n  const onFilesAdded = useCallback(\n    (addedFiles: File[]) => {\n      errCounts.current = { invalidType: 0, invalidSize: 0 };\n\n      const newFiles = addedFiles.filter(f => {\n        let isValidSize = true;\n\n        if (f.size / 1000000 > sizeLimit) {\n          errCounts.current.invalidSize += 1;\n          isValidSize = false;\n        }\n\n        return isValidSize;\n      });\n\n      setHasError(newFiles.length < addedFiles.length);\n\n      newFiles.forEach((File: File) => {\n        const id = createUID();\n        attachFile({\n          id,\n          thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,\n          name: File.name,\n          category: '',\n          File,\n          onCancel: () => {\n            cancelFile(id);\n          }\n        });\n      });\n    },\n    [attachFile, deleteFile]\n  );\n\n  useAfterInitialEffect(() => {\n    if (files.length === 0) setHasError(false);\n  }, [files.length]);\n\n  const info = useMemo(() => {\n    return hasError\n      ? errCounts.current.invalidSize > 0 && (\n          <div>{`File size must be less than ${sizeLimit}MB`}</div>\n        )\n      : null;\n  }, [hasError]);\n\n  return (\n    <FileInput\n      label={args.label}\n      labelHidden={args.labelHidden}\n      multiple={args.multiple}\n      status={hasError ? 'error' : undefined}\n      info={info}\n      required={args.required}\n      disabled={args.disabled}\n      onFilesAdded={onFilesAdded}\n      files={files.map(file => {\n        return {\n          ...file,\n          onCancel: undefined,\n          onPreview: () => {},\n          onDownload: () => {},\n          onDelete: () => {\n            deleteFile(file.id);\n          }\n        };\n\n        return file;\n      })}\n    />\n  );\n};\n\nFileInputDemo.args = {\n  multiple: true,\n  sizeLimit: 100,\n  label: 'File input label',\n  labelHidden: false,\n  required: false,\n  disabled: false\n};\n\nFileInputDemo.argTypes = {\n  multiple: { control: { type: 'boolean' } },\n  sizeLimit: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { FlexContainerProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
@@ -18,5 +17,5 @@ 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;
+export declare const ResponsiveFlex: Story;
 //# sourceMappingURL=FlexContainer.stories.d.ts.map

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

@@ -1 +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"}
+{"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,EAAE,KAsB5B,CAAC"}

package/lib/core/Flex/FlexContainer.stories.js

@@ -9,7 +9,7 @@ export default {
     }
 };
 export const Direction = (args) => {
-    return (_jsxs(Flex, { container: { direction: args.direction, pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { direction: args.direction, pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 Direction.args = {
     direction: 'row'
@@ -21,7 +21,7 @@ Direction.argTypes = {
     }
 };
 export const GapAndPadding = (args) => {
-    return (_jsxs(Flex, { container: { pad: args.pad, gap: args.gap }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: args.pad, gap: args.gap }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 GapAndPadding.args = {
     pad: 1,
@@ -32,7 +32,7 @@ GapAndPadding.argTypes = {
     gap: { control: { type: 'number' } }
 };
 export const Wrap = (args) => {
-    return (_jsxs(Flex, { container: { wrap: args.wrap, pad: 2 }, as: StyledFlexContainer, width: 35, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { wrap: args.wrap, pad: 2 }, as: StyledFlexContainer, width: 35, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }) })] }));
 };
 Wrap.args = {
     wrap: 'nowrap'
@@ -41,7 +41,7 @@ Wrap.argTypes = {
     wrap: { options: ['nowrap', 'wrap', 'wrap-reverse'], control: { type: 'select' } }
 };
 export const Justify = (args) => {
-    return (_jsxs(Flex, { container: { justify: args.justify, pad: 2 }, as: StyledFlexContainer, children: [_jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: args.justify, pad: 2 }, as: StyledFlexContainer, children: [_jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 1" }) }), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 2" }) }), _jsx(StyledFlexItem, { children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 Justify.args = {
     justify: 'start'
@@ -53,7 +53,7 @@ Justify.argTypes = {
     }
 };
 export const AlignItems = (args) => {
-    return (_jsxs(Flex, { container: { alignItems: args.alignItems, pad: 2 }, as: StyledFlexContainer, height: 15, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, children: [_jsx(Text, { children: "Item 3 - First line" }, void 0), _jsx(Text, { children: "Item 3 - Second line" }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignItems: args.alignItems, pad: 2 }, as: StyledFlexContainer, height: 15, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }) }), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, children: [_jsx(Text, { children: "Item 3 - First line" }), _jsx(Text, { children: "Item 3 - Second line" })] })] }));
 };
 AlignItems.args = {
     alignItems: 'stretch'
@@ -65,7 +65,7 @@ AlignItems.argTypes = {
     }
 };
 export const AlignContent = (args) => {
-    return (_jsxs(Flex, { container: { alignContent: args.alignContent, wrap: 'wrap', pad: 2 }, as: StyledFlexContainer, height: 20, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignContent: args.alignContent, wrap: 'wrap', pad: 2 }, as: StyledFlexContainer, height: 20, width: 30, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 4" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 5" }) })] }));
 };
 AlignContent.args = {
     alignContent: 'stretch'
@@ -77,6 +77,6 @@ AlignContent.argTypes = {
     }
 };
 export const ResponsiveFlex = () => {
-    return (_jsxs(Flex, { container: { pad: 1, gap: 6 }, xl: { container: { gap: 12 } }, lg: { container: { gap: 9 } }, md: { container: { gap: 6 } }, sm: { container: { gap: 3 } }, xs: { container: { gap: 0 } }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: 1, gap: 6 }, xl: { container: { gap: 12 } }, lg: { container: { gap: 9 } }, md: { container: { gap: 6 } }, sm: { container: { gap: 3 } }, xs: { container: { gap: 0 } }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 2" }) }), _jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, children: _jsx(Text, { children: "Item 3" }) })] }));
 };
 //# sourceMappingURL=FlexContainer.stories.js.map

package/lib/core/Flex/FlexContainer.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexContainerProps, Text } 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: Story<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: Story<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: Story<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: Story<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: Story<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: Story<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 = () => {\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"]}
+{"version":3,"file":"FlexContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexContainer.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAsB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEzE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAYV,MAAM,CAAC,MAAM,SAAS,GAA0B,CAAC,IAAoB,EAAE,EAAE;IACvE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,mBAAmB,aAC7E,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,SAAS,EAAE;QACT,OAAO,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,gBAAgB,CAAC;QAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC3E,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,mBAAmB,aACxE,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,CAAC;CACP,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACpC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAClE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,mBAAmB,EAAE,KAAK,EAAE,EAAE,aAC9E,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,IAAI,GAAG;IACV,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,IAAI,CAAC,QAAQ,GAAG;IACd,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACnF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAA0B,CAAC,IAAoB,EAAE,EAAE;IACrE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,mBAAmB,aACzE,KAAC,cAAc,cACb,KAAC,IAAI,yBAAc,GACJ,EACjB,KAAC,cAAc,cACb,KAAC,IAAI,yBAAc,GACJ,EACjB,KAAC,cAAc,cACb,KAAC,IAAI,yBAAc,GACJ,IACZ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,IAAI,GAAG;IACb,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,OAAO,CAAC,QAAQ,GAAG;IACjB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC;QAClE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAA0B,CAAC,IAAoB,EAAE,EAAE;IACxE,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,EAAE,EAClD,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,aAET,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,kBACpD,KAAC,IAAI,yBAAc,GACd,EACP,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,aAC7E,KAAC,IAAI,sCAA2B,EAChC,KAAC,IAAI,uCAA4B,IAC5B,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,UAAU,EAAE;QACV,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,CAAC;QAC1D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,IAAoB,EAAE,EAAE;IAC1E,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,EACpE,EAAE,EAAE,mBAAmB,EACvB,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,aAET,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,YAAY,EAAE,SAAS;CACxB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,YAAY,EAAE;QACZ,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC;QACnE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU,GAAG,EAAE;IACxC,OAAO,CACL,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,EAC7B,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAC9B,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAC7B,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAC7B,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAC7B,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAC7B,EAAE,EAAE,mBAAmB,aAEvB,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,EACP,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,cAAc,YACzC,KAAC,IAAI,yBAAc,GACd,IACF,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexContainerProps, Text } 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: Story<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: Story<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: Story<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: Story<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: Story<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: Story<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: Story = () => {\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/lib/core/Flex/FlexItem.stories.js

@@ -9,7 +9,7 @@ export default {
     }
 };
 export const AlignSelf = (args) => {
-    return (_jsxs(Flex, { container: { alignItems: 'start', pad: 2 }, as: StyledFlexContainer, height: 10, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Item 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: 1, alignSelf: args.alignSelf }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }, void 0) }, void 0), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: [_jsx(Text, { children: "Item 3 - First line" }, void 0), _jsx(Text, { children: "Item 3 - Second line" }, void 0)] }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { alignItems: 'start', pad: 2 }, as: StyledFlexContainer, height: 10, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Item 1" }) }), _jsx(Flex, { item: { grow: 1, alignSelf: args.alignSelf }, as: StyledFlexItem, noPadding: true, children: _jsx(Text, { children: "Item 2" }) }), _jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: [_jsx(Text, { children: "Item 3 - First line" }), _jsx(Text, { children: "Item 3 - Second line" })] })] }));
 };
 AlignSelf.args = {
     alignSelf: 'auto'
@@ -21,7 +21,7 @@ AlignSelf.argTypes = {
     }
 };
 export const Grow = (args) => {
-    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 1" }, void 0) }, void 0), _jsx(Flex, { item: { grow: args.grow }, as: StyledFlexItem, children: _jsxs(Text, { children: ["Grow: ", args.grow] }, void 0) }, void 0), _jsx(Flex, { item: { grow: 0 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 0" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 1" }) }), _jsx(Flex, { item: { grow: args.grow }, as: StyledFlexItem, children: _jsxs(Text, { children: ["Grow: ", args.grow] }) }), _jsx(Flex, { item: { grow: 0 }, as: StyledFlexItem, inActive: true, children: _jsx(Text, { children: "Grow: 0" }) })] }));
 };
 Grow.args = {
     grow: 0
@@ -30,7 +30,7 @@ Grow.argTypes = {
     grow: { control: { type: 'number' } }
 };
 export const Shrink = (args) => {
-    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, width: 42, children: [_jsx(Flex, { item: { shrink: 1 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 1" }, void 0) }, void 0), _jsx(Flex, { item: { shrink: args.shrink }, as: StyledFlexItem, width: 15, children: _jsxs(Text, { children: ["Shrink: ", args.shrink] }, void 0) }, void 0), _jsx(Flex, { item: { shrink: 0 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 0" }, void 0) }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { pad: 2 }, as: StyledFlexContainer, width: 42, children: [_jsx(Flex, { item: { shrink: 1 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 1" }) }), _jsx(Flex, { item: { shrink: args.shrink }, as: StyledFlexItem, width: 15, children: _jsxs(Text, { children: ["Shrink: ", args.shrink] }) }), _jsx(Flex, { item: { shrink: 0 }, as: StyledFlexItem, width: 15, inActive: true, children: _jsx(Text, { children: "Shrink: 0" }) })] }));
 };
 Shrink.args = {
     shrink: 0

package/lib/core/Flex/FlexItem.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlexItem.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexItemProps, Text } 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: Story<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: Story<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: Story<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"]}
+{"version":3,"file":"FlexItem.stories.js","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Flex, FlexItemProps, Text } 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: Story<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: Story<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: Story<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/lib/core/Form/Form.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.mocks.tsx"],"names":[],"mappings":";AA+FA,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA8IrB,CAAC"}
+{"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;;;wBA+IrB,CAAC"}

package/lib/core/Form/Form.mocks.js

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useReducer, useRef, useContext } from 'react';
 import { Button, Checkbox, CheckboxGroup, Form, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, ToasterContext } from '@pega/cosmos-react-core';
 import { Editor as RichTextEditor } from '@pega/cosmos-react-rte';
-import { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';
-import { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';
+import { FileInputDemo } from '../File/FileInput.stories';
+import { FilterableSingleSelect as ComboboxFilterableStory } from '../ComboBox/ComboBox.stories';
 // Get initial field properties
 const initFields = () => {
     const common = { value: undefined, status: undefined };
@@ -75,7 +75,7 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
     const canSubmit = fields.every(field => field.value && field.validator());
     const actions = (_jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: () => {
                     push({ content: 'Form cancelled!' });
-                }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" }, void 0)] }, void 0));
+                }, children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', disabled: !canSubmit, children: "Submit" })] }));
     const onImageAdded = (image, id) => {
         const src = URL.createObjectURL(image);
         editorRef.current?.appendImage({ src, alt: image.name }, id);
@@ -83,7 +83,7 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
     return (_jsx(Form, { actions: showActions ? actions : undefined, description: description, heading: heading, onSubmit: (e) => {
             e.preventDefault();
             push({ content: 'Form submitted!' });
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }, void 0), _jsx(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 }), autoComplete: 'off' }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }, void 0) }, void 0), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal\u2026" }, void 0), _jsx(Option, { children: "Pizza" }, void 0), _jsx(Option, { children: "Sandwich" }, void 0), _jsx(Option, { children: "Salad" }, void 0)] }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(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 }) }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: _jsxs(Grid, { container: { gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }, children: [_jsx(Input, { name: 'name', label: 'Name', value: name.value, required: name.required, status: name.status, info: 'some help text here', onChange: (e) => setField({ ...e }), onBlur: (e) => setField({ ...e }), autoComplete: 'off' }), _jsx(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 }), autoComplete: 'off' }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(CheckboxGroup, { name: 'visited', label: 'Places you have worked', children: ['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (_jsx(Checkbox, { label: office, onChange: (e) => setField({ ...e }) }, office))) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RadioButtonGroup, { name: 'meetings', label: 'Do you enjoy early morning meetings?', children: ['Yes', "No… no I don't"].map(option => (_jsx(RadioButton, { label: option, onChange: (e) => setField({ ...e }) }, option))) }) }), _jsxs(Select, { label: 'What would you like to eat?', info: 'FYI: options are limited', children: [_jsx(Option, { children: "choose meal\u2026" }), _jsx(Option, { children: "Pizza" }), _jsx(Option, { children: "Sandwich" }), _jsx(Option, { children: "Salad" })] }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(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 }) }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(RichTextEditor, { label: 'Detailed meeting notes', info: 'The rich text editor can be used in forms, comments, and documents', toolbar: [
                             'inline-styling',
                             'headers',
                             'tables',
@@ -92,6 +92,6 @@ export const FormContent = ({ cols, heading, description, showActions }) => {
                             'lists',
                             'cut-copy-paste',
                             'indentation'
-                        ], onImageAdded: onImageAdded, ref: editorRef }, void 0) }, void 0), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, {}, void 0) }, void 0), _jsx(ComboboxFilterableStory, {}, void 0)] }, void 0) }, void 0));
+                        ], onImageAdded: onImageAdded, ref: editorRef }) }), _jsx(Grid, { item: { colStartEnd: '1/-1' }, children: _jsx(FileInputDemo, { label: 'Meeting attachments' }) }), _jsx(ComboboxFilterableStory, { label: 'Select a user' })] }) }));
 };
 //# sourceMappingURL=Form.mocks.js.map