@pega/cosmos-react-demos 4.0.0-dev.20.0 → 4.0.0-dev.21.0

package/lib/core/Form/Form.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, FormEvent, useState } from 'react';\n\nimport {\n  Banner,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  FormField,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent, ReadOnlyFormContent } from './Form.mocks';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  excludeStories: ['ConfigurableForm'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const ReadOnlyOneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return (\n    <ReadOnlyFormContent\n      cols={1}\n      heading={args.heading}\n      description={args.description}\n      showActions\n    />\n  );\n};\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner variant='success' messages={['Form submitted', `Input value: ${success}`]} />\n  );\n\n  const errorBanner = (\n    <Banner variant='urgent' messages={['All required fields in the form must be completed.']} />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: number;\n  hoverBorderColor?: string;\n  focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: Story<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'form-control': {\n            'foreground-color': args.foregroundColor,\n            'background-color': args.backgroundColor,\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            ':hover': {\n              'border-color': args.hoverBorderColor\n            },\n            ':focus': {\n              'border-color': args.focusBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <FormContent cols={2} showActions />\n    </Configuration>\n  );\n};\n\nConfigurableForm.args = {\n  foregroundColor: '#054a8a',\n  backgroundColor: '#e2f1ff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: 0.5,\n  hoverBorderColor: '#3f3f3f',\n  focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n  foregroundColor: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  hoverBorderColor: { control: { type: 'color' } },\n  focusBorderColor: { control: { type: 'color' } },\n  heading: { table: { disable: true } },\n  description: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\nimport type { ChangeEvent, FormEvent } from 'react';\n\nimport {\n  Banner,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  FormField,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { FormContent, ReadOnlyFormContent } from './Form.mocks';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  excludeStories: ['ConfigurableForm'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const ReadOnlyOneColumnForm: StoryFn<FormStoryProps> = (args: FormStoryProps) => {\n  return (\n    <ReadOnlyFormContent\n      cols={1}\n      heading={args.heading}\n      description={args.description}\n      showActions\n    />\n  );\n};\n\nexport const OneColumnForm: StoryFn<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: StoryFn<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: StoryFn<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: StoryFn<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner variant='success' messages={['Form submitted', `Input value: ${success}`]} />\n  );\n\n  const errorBanner = (\n    <Banner variant='urgent' messages={['All required fields in the form must be completed.']} />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableFormProps extends FormStoryProps {\n  foregroundColor?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: number;\n  hoverBorderColor?: string;\n  focusBorderColor?: string;\n}\n\nexport const ConfigurableForm: StoryFn<ConfigurableFormProps> = (args: ConfigurableFormProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'form-control': {\n            'foreground-color': args.foregroundColor,\n            'background-color': args.backgroundColor,\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            ':hover': {\n              'border-color': args.hoverBorderColor\n            },\n            ':focus': {\n              'border-color': args.focusBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <FormContent cols={2} showActions />\n    </Configuration>\n  );\n};\n\nConfigurableForm.args = {\n  foregroundColor: '#054a8a',\n  backgroundColor: '#e2f1ff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: 0.5,\n  hoverBorderColor: '#3f3f3f',\n  focusBorderColor: 'transparent'\n};\n\nConfigurableForm.argTypes = {\n  foregroundColor: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  hoverBorderColor: { control: { type: 'color' } },\n  focusBorderColor: { control: { type: 'color' } },\n  heading: { table: { disable: true } },\n  description: { table: { disable: true } }\n};\n"]}

package/lib/core/Grid/GridContainer.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, Story } from '@storybook/react';
-import { GridContainerProps } from '@pega/cosmos-react-core';
-declare const _default: Meta;
+import type { StoryFn } from '@storybook/react';
+import type { GridContainerProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface GridStoryProps {
     colGap?: GridContainerProps['colGap'];
@@ -11,13 +11,13 @@ interface GridStoryProps {
     alignItems?: GridContainerProps['alignItems'];
     alignContent?: GridContainerProps['alignContent'];
 }
-export declare const ColumnsAndRows: Story;
-export declare const Areas: Story;
-export declare const Template: Story;
-export declare const GapsAndPadding: Story<GridStoryProps>;
-export declare const JustifyGridItems: Story<GridStoryProps>;
-export declare const JustifyGridContent: Story<GridStoryProps>;
-export declare const AlignGridItems: Story<GridStoryProps>;
-export declare const AlignGridContent: Story<GridStoryProps>;
-export declare const ResponsiveGrid: Story;
+export declare const ColumnsAndRows: StoryFn;
+export declare const Areas: StoryFn;
+export declare const Template: StoryFn;
+export declare const GapsAndPadding: StoryFn<GridStoryProps>;
+export declare const JustifyGridItems: StoryFn<GridStoryProps>;
+export declare const JustifyGridContent: StoryFn<GridStoryProps>;
+export declare const AlignGridItems: StoryFn<GridStoryProps>;
+export declare const AlignGridContent: StoryFn<GridStoryProps>;
+export declare const ResponsiveGrid: StoryFn;
 //# sourceMappingURL=GridContainer.stories.d.ts.map

package/lib/core/Grid/GridContainer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.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,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KA0BnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAyBtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,CAoBhD,CAAC;AAcF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAmBlD,CAAC;AAUF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,cAAc,CAkBpD,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,CAmBhD,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAoBlD,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC"}
+{"version":3,"file":"GridContainer.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;;AAIlE,wBAMU;AAEV,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAC;IAChC,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;IAClD,cAAc,CAAC,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAC9C,YAAY,CAAC,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,EAAE,OAkB5B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,OA0BnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAyBtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,cAAc,CAoBlD,CAAC;AAcF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,cAAc,CAmBpD,CAAC;AAUF,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,cAAc,CAkBtD,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,cAAc,CAmBlD,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,cAAc,CAoBpD,CAAC;AAaF,eAAO,MAAM,cAAc,EAAE,OAkB5B,CAAC"}

package/lib/core/Grid/GridContainer.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridContainerProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n  title: 'Core/Grid/Container',\n  component: Grid,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GridStoryProps {\n  colGap?: GridContainerProps['colGap'];\n  rowGap?: GridContainerProps['rowGap'];\n  pad?: GridContainerProps['pad'];\n  justifyItems?: GridContainerProps['justifyItems'];\n  justifyContent?: GridContainerProps['justifyContent'];\n  alignItems?: GridContainerProps['alignItems'];\n  alignContent?: GridContainerProps['alignContent'];\n}\n\nexport const ColumnsAndRows: Story = () => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem [line1] 1fr [line2] 3fr [line3]',\n        rows: 'repeat(3, 3rem) auto',\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`colRows-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nexport const Areas: Story = () => {\n  return (\n    <Grid\n      container={{\n        cols: '5rem 1fr 3fr',\n        rows: 'repeat(3, 3rem) auto',\n        areas: '\"sidebar header header\" \"sidebar . main\" \"sidebar . main\" \"sidebar footer footer\"',\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      <Grid item={{ area: 'header' }} as={StyledGridItem}>\n        <Text>Header</Text>\n      </Grid>\n      <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n        <Text>Side</Text>\n      </Grid>\n      <Grid item={{ area: 'main' }} as={StyledGridItem}>\n        <Text>Main</Text>\n      </Grid>\n      <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n        <Text>Footer</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const Template: Story = () => {\n  const rowsAndAreas =\n    '\"sidebar header header\" 3rem \"sidebar . main\" 3rem \"sidebar . main\" 3rem \"sidebar footer footer\" auto';\n  const columns = '5rem 1fr 3fr';\n\n  return (\n    <Grid\n      container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      <Grid item={{ area: 'header' }} as={StyledGridItem}>\n        <Text>Header</Text>\n      </Grid>\n      <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n        <Text>Side</Text>\n      </Grid>\n      <Grid item={{ area: 'main' }} as={StyledGridItem}>\n        <Text>Main</Text>\n      </Grid>\n      <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n        <Text>Footer</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const GapsAndPadding: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        colGap: args.colGap,\n        rows: 'repeat(3, 3rem) auto',\n        rowGap: args.rowGap,\n        pad: args.pad\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`colRowGap-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nGapsAndPadding.args = {\n  pad: 1,\n  colGap: 1,\n  rowGap: 1\n};\n\nGapsAndPadding.argTypes = {\n  pad: { control: { type: 'number' } },\n  colGap: { control: { type: 'number' } },\n  rowGap: { control: { type: 'number' } }\n};\n\nexport const JustifyGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        rows: 'repeat(3, 3rem) auto',\n        justifyItems: args.justifyItems,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`justifyItems-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nJustifyGridItems.args = {\n  justifyItems: 'stretch'\n};\n\nJustifyGridItems.argTypes = {\n  justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const JustifyGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(3, 7rem)',\n        rows: 'repeat(4, 3rem)',\n        justifyContent: args.justifyContent,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`justifyContent-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nJustifyGridContent.args = {\n  justifyContent: 'start'\n};\n\nJustifyGridContent.argTypes = {\n  justifyContent: {\n    options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignGridItems: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        rows: 'repeat(3, 5rem) auto',\n        alignItems: args.alignItems,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`alignItems-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nAlignGridItems.args = {\n  alignItems: 'stretch'\n};\n\nAlignGridItems.argTypes = {\n  alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridContent: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(3, 7rem)',\n        rows: 'repeat(4, 3rem)',\n        alignContent: args.alignContent,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={30}\n      fitContent\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`alignContent-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nAlignGridContent.args = {\n  alignContent: 'start'\n};\n\nAlignGridContent.argTypes = {\n  alignContent: {\n    options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const ResponsiveGrid: Story = () => {\n  return (\n    <Grid\n      container={{ pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }}\n      xl={{ container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }}\n      lg={{ container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }}\n      md={{ container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }}\n      sm={{ container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }}\n      xs={{ container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }}\n      as={StyledGridContainer}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`colRows-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n"]}
+{"version":3,"file":"GridContainer.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridContainer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Grid, Text } from '@pega/cosmos-react-core';\nimport type { GridContainerProps } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n  title: 'Core/Grid/Container',\n  component: Grid,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GridStoryProps {\n  colGap?: GridContainerProps['colGap'];\n  rowGap?: GridContainerProps['rowGap'];\n  pad?: GridContainerProps['pad'];\n  justifyItems?: GridContainerProps['justifyItems'];\n  justifyContent?: GridContainerProps['justifyContent'];\n  alignItems?: GridContainerProps['alignItems'];\n  alignContent?: GridContainerProps['alignContent'];\n}\n\nexport const ColumnsAndRows: StoryFn = () => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem [line1] 1fr [line2] 3fr [line3]',\n        rows: 'repeat(3, 3rem) auto',\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`colRows-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nexport const Areas: StoryFn = () => {\n  return (\n    <Grid\n      container={{\n        cols: '5rem 1fr 3fr',\n        rows: 'repeat(3, 3rem) auto',\n        areas: '\"sidebar header header\" \"sidebar . main\" \"sidebar . main\" \"sidebar footer footer\"',\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      <Grid item={{ area: 'header' }} as={StyledGridItem}>\n        <Text>Header</Text>\n      </Grid>\n      <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n        <Text>Side</Text>\n      </Grid>\n      <Grid item={{ area: 'main' }} as={StyledGridItem}>\n        <Text>Main</Text>\n      </Grid>\n      <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n        <Text>Footer</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const Template: StoryFn = () => {\n  const rowsAndAreas =\n    '\"sidebar header header\" 3rem \"sidebar . main\" 3rem \"sidebar . main\" 3rem \"sidebar footer footer\" auto';\n  const columns = '5rem 1fr 3fr';\n\n  return (\n    <Grid\n      container={{ template: `${rowsAndAreas} / ${columns}`, pad: 2 }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      <Grid item={{ area: 'header' }} as={StyledGridItem}>\n        <Text>Header</Text>\n      </Grid>\n      <Grid item={{ area: 'sidebar' }} as={StyledGridItem}>\n        <Text>Side</Text>\n      </Grid>\n      <Grid item={{ area: 'main' }} as={StyledGridItem}>\n        <Text>Main</Text>\n      </Grid>\n      <Grid item={{ area: 'footer' }} as={StyledGridItem}>\n        <Text>Footer</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const GapsAndPadding: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        colGap: args.colGap,\n        rows: 'repeat(3, 3rem) auto',\n        rowGap: args.rowGap,\n        pad: args.pad\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`colRowGap-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nGapsAndPadding.args = {\n  pad: 1,\n  colGap: 1,\n  rowGap: 1\n};\n\nGapsAndPadding.argTypes = {\n  pad: { control: { type: 'number' } },\n  colGap: { control: { type: 'number' } },\n  rowGap: { control: { type: 'number' } }\n};\n\nexport const JustifyGridItems: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        rows: 'repeat(3, 3rem) auto',\n        justifyItems: args.justifyItems,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`justifyItems-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nJustifyGridItems.args = {\n  justifyItems: 'stretch'\n};\n\nJustifyGridItems.argTypes = {\n  justifyItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const JustifyGridContent: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(3, 7rem)',\n        rows: 'repeat(4, 3rem)',\n        justifyContent: args.justifyContent,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`justifyContent-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nJustifyGridContent.args = {\n  justifyContent: 'start'\n};\n\nJustifyGridContent.argTypes = {\n  justifyContent: {\n    options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const AlignGridItems: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: '7rem 1fr 3fr',\n        rows: 'repeat(3, 5rem) auto',\n        alignItems: args.alignItems,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`alignItems-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nAlignGridItems.args = {\n  alignItems: 'stretch'\n};\n\nAlignGridItems.argTypes = {\n  alignItems: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridContent: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{\n        cols: 'repeat(3, 7rem)',\n        rows: 'repeat(4, 3rem)',\n        alignContent: args.alignContent,\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={30}\n      fitContent\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`alignContent-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n\nAlignGridContent.args = {\n  alignContent: 'start'\n};\n\nAlignGridContent.argTypes = {\n  alignContent: {\n    options: ['start', 'end', 'center', 'around', 'between', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\nexport const ResponsiveGrid: StoryFn = () => {\n  return (\n    <Grid\n      container={{ pad: 1, cols: 'repeat(3, 7rem)', rows: 'repeat(4, 3rem)' }}\n      xl={{ container: { cols: 'repeat(12, 1fr)', rows: 'repeat(1, 3rem)' } }}\n      lg={{ container: { cols: 'repeat(6, 1fr)', rows: 'repeat(2, 3rem)' } }}\n      md={{ container: { cols: 'repeat(4, 1fr)', rows: 'repeat(3, 3rem)' } }}\n      sm={{ container: { cols: 'repeat(3, 1fr)', rows: 'repeat(4, 3rem)' } }}\n      xs={{ container: { cols: 'repeat(2, 1fr)', rows: 'repeat(6, 3rem)' } }}\n      as={StyledGridContainer}\n    >\n      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(index => (\n        <StyledGridItem key={`colRows-${index}`}>\n          <Text>Item {index}</Text>\n        </StyledGridItem>\n      ))}\n    </Grid>\n  );\n};\n"]}

package/lib/core/Grid/GridItem.stories.d.ts

@@ -1,12 +1,12 @@
-import { Meta, Story } from '@storybook/react';
-import { GridItemProps } from '@pega/cosmos-react-core';
-declare const _default: Meta;
+import type { StoryFn } from '@storybook/react';
+import type { GridItemProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface GridStoryProps {
     justifySelf?: GridItemProps['justifySelf'];
     alignSelf?: GridItemProps['alignSelf'];
 }
-export declare const StartAndEnd: Story;
-export declare const JustifyGridSelf: Story<GridStoryProps>;
-export declare const AlignGridSelf: Story<GridStoryProps>;
+export declare const StartAndEnd: StoryFn;
+export declare const JustifyGridSelf: StoryFn<GridStoryProps>;
+export declare const AlignGridSelf: StoryFn<GridStoryProps>;
 //# sourceMappingURL=GridItem.stories.d.ts.map

package/lib/core/Grid/GridItem.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/GridItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,aAAa,EAAQ,MAAM,yBAAyB,CAAC;;AAIpE,wBAMU;AAEV,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,EAAE,KAkCzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAcjD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAmB/C,CAAC"}
+{"version":3,"file":"GridItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Grid/GridItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAI7D,wBAMU;AAEV,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW,EAAE,OAkCzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,cAAc,CAcnD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,cAAc,CAmBjD,CAAC"}

package/lib/core/Grid/GridItem.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Grid, GridItemProps, Text } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n  title: 'Core/Grid/Item',\n  component: Grid,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GridStoryProps {\n  justifySelf?: GridItemProps['justifySelf'];\n  alignSelf?: GridItemProps['alignSelf'];\n}\n\nexport const StartAndEnd: Story = () => {\n  return (\n    <Grid\n      container={{\n        cols: '[line0] 7rem [line1] 1fr [col2-end col3-start] 3fr [line3]',\n        rows: 'repeat(3, 3rem) auto',\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      <Grid item={{ colStart: 'line0', colEnd: 'col3-start' }} as={StyledGridItem}>\n        <Text>Item 1</Text>\n      </Grid>\n      <StyledGridItem>\n        <Text>Item 2</Text>\n      </StyledGridItem>\n      <StyledGridItem>\n        <Text>Item 3</Text>\n      </StyledGridItem>\n      <Grid item={{ colStart: 'line1', colEnd: 'line3' }} as={StyledGridItem}>\n        <Text>Item 4</Text>\n      </Grid>\n      <Grid item={{ rowStart: '3', rowEnd: '5' }} as={StyledGridItem}>\n        <Text>Item 5</Text>\n      </Grid>\n      <Grid\n        item={{ colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }}\n        as={StyledGridItem}\n      >\n        <Text>Item 6</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const JustifyGridSelf: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledGridContainer}>\n      <StyledGridItem>\n        <Text>Item 1</Text>\n      </StyledGridItem>\n      <Grid item={{ justifySelf: args.justifySelf }} as={StyledGridItem} editable>\n        <Text>Item 2</Text>\n      </Grid>\n      <StyledGridItem>\n        <Text>Item 3</Text>\n      </StyledGridItem>\n    </Grid>\n  );\n};\n\nJustifyGridSelf.args = {\n  justifySelf: 'stretch'\n};\n\nJustifyGridSelf.argTypes = {\n  justifySelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridSelf: Story<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{ cols: '7rem 1fr 3fr', pad: 2 }}\n      as={StyledGridContainer}\n      height={10}\n      fitContent\n    >\n      <StyledGridItem>\n        <Text>Item 1</Text>\n      </StyledGridItem>\n      <Grid item={{ alignSelf: args.alignSelf }} as={StyledGridItem} editable>\n        <Text>Item 2</Text>\n      </Grid>\n      <StyledGridItem>\n        <Text>Item 3</Text>\n      </StyledGridItem>\n    </Grid>\n  );\n};\n\nAlignGridSelf.args = {\n  alignSelf: 'stretch'\n};\n\nAlignGridSelf.argTypes = {\n  alignSelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n"]}
+{"version":3,"file":"GridItem.stories.js","sourceRoot":"","sources":["../../../src/core/Grid/GridItem.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Grid, Text } from '@pega/cosmos-react-core';\nimport type { GridItemProps } from '@pega/cosmos-react-core';\n\nimport { StyledGridContainer, StyledGridItem } from './Grid.styles';\n\nexport default {\n  title: 'Core/Grid/Item',\n  component: Grid,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface GridStoryProps {\n  justifySelf?: GridItemProps['justifySelf'];\n  alignSelf?: GridItemProps['alignSelf'];\n}\n\nexport const StartAndEnd: StoryFn = () => {\n  return (\n    <Grid\n      container={{\n        cols: '[line0] 7rem [line1] 1fr [col2-end col3-start] 3fr [line3]',\n        rows: 'repeat(3, 3rem) auto',\n        pad: 2\n      }}\n      as={StyledGridContainer}\n      height={20}\n    >\n      <Grid item={{ colStart: 'line0', colEnd: 'col3-start' }} as={StyledGridItem}>\n        <Text>Item 1</Text>\n      </Grid>\n      <StyledGridItem>\n        <Text>Item 2</Text>\n      </StyledGridItem>\n      <StyledGridItem>\n        <Text>Item 3</Text>\n      </StyledGridItem>\n      <Grid item={{ colStart: 'line1', colEnd: 'line3' }} as={StyledGridItem}>\n        <Text>Item 4</Text>\n      </Grid>\n      <Grid item={{ rowStart: '3', rowEnd: '5' }} as={StyledGridItem}>\n        <Text>Item 5</Text>\n      </Grid>\n      <Grid\n        item={{ colStart: '2', colEnd: 'span line3', rowStart: '3', rowEnd: 'span 2' }}\n        as={StyledGridItem}\n      >\n        <Text>Item 6</Text>\n      </Grid>\n    </Grid>\n  );\n};\n\nexport const JustifyGridSelf: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid container={{ cols: '7rem 1fr 3fr', pad: 2 }} as={StyledGridContainer}>\n      <StyledGridItem>\n        <Text>Item 1</Text>\n      </StyledGridItem>\n      <Grid item={{ justifySelf: args.justifySelf }} as={StyledGridItem} editable>\n        <Text>Item 2</Text>\n      </Grid>\n      <StyledGridItem>\n        <Text>Item 3</Text>\n      </StyledGridItem>\n    </Grid>\n  );\n};\n\nJustifyGridSelf.args = {\n  justifySelf: 'stretch'\n};\n\nJustifyGridSelf.argTypes = {\n  justifySelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n\nexport const AlignGridSelf: StoryFn<GridStoryProps> = (args: GridStoryProps) => {\n  return (\n    <Grid\n      container={{ cols: '7rem 1fr 3fr', pad: 2 }}\n      as={StyledGridContainer}\n      height={10}\n      fitContent\n    >\n      <StyledGridItem>\n        <Text>Item 1</Text>\n      </StyledGridItem>\n      <Grid item={{ alignSelf: args.alignSelf }} as={StyledGridItem} editable>\n        <Text>Item 2</Text>\n      </Grid>\n      <StyledGridItem>\n        <Text>Item 3</Text>\n      </StyledGridItem>\n    </Grid>\n  );\n};\n\nAlignGridSelf.args = {\n  alignSelf: 'stretch'\n};\n\nAlignGridSelf.argTypes = {\n  alignSelf: { options: ['stretch', 'start', 'center', 'end'], control: { type: 'select' } }\n};\n"]}

package/lib/core/HTML/HTML.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, Story } from '@storybook/react';
-import { HTMLProps } from '@pega/cosmos-react-core';
-declare const _default: Meta;
+import type { StoryFn } from '@storybook/react';
+import type { HTMLProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const HTMLDemo: Story<HTMLProps>;
+export declare const HTMLDemo: StoryFn<HTMLProps>;
 //# sourceMappingURL=HTML.stories.d.ts.map

package/lib/core/HTML/HTML.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.stories.d.ts","sourceRoot":"","sources":["../../../src/core/HTML/HTML.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAE1D,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAwD,CAAC"}
+{"version":3,"file":"HTML.stories.d.ts","sourceRoot":"","sources":["../../../src/core/HTML/HTML.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAEzD,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAwD,CAAC"}

package/lib/core/HTML/HTML.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.stories.js","sourceRoot":"","sources":["../../../src/core/HTML/HTML.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC;AAE/F,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EACL,kHAAkH;CACrH,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { HTML, HTMLProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/HTML',\n  component: HTML\n} as Meta;\n\nexport const HTMLDemo: Story<HTMLProps> = (args: HTMLProps) => <HTML content={args.content} />;\n\nHTMLDemo.args = {\n  content:\n    '<div><p>Hello, World!<p><ul><li>List item 1<ul><li>Sub list item 1</li></ul></li><li>List item 2</li></ul></div>'\n};\n\nHTMLDemo.argTypes = {\n  content: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"HTML.stories.js","sourceRoot":"","sources":["../../../src/core/HTML/HTML.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAuB,CAAC,IAAe,EAAE,EAAE,CAAC,KAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC;AAEjG,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EACL,kHAAkH;CACrH,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { HTML } from '@pega/cosmos-react-core';\nimport type { HTMLProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/HTML',\n  component: HTML\n} as Meta;\n\nexport const HTMLDemo: StoryFn<HTMLProps> = (args: HTMLProps) => <HTML content={args.content} />;\n\nHTMLDemo.args = {\n  content:\n    '<div><p>Hello, World!<p><ul><li>List item 1<ul><li>Sub list item 1</li></ul></li><li>List item 2</li></ul></div>'\n};\n\nHTMLDemo.argTypes = {\n  content: { control: { type: 'text' } }\n};\n"]}

package/lib/core/Icon/Icon.stories.d.ts

@@ -1,11 +1,11 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta;
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const StaticIcon: Story;
-export declare const CustomIcon: Story;
-export declare const DynamicIcon: Story;
+export declare const StaticIcon: StoryFn;
+export declare const CustomIcon: StoryFn;
+export declare const DynamicIcon: StoryFn;
 interface IconListProps {
     set: 'budicon' | 'streamline';
 }
-export declare const IconList: Story<IconListProps>;
+export declare const IconList: StoryFn<IconListProps>;
 //# sourceMappingURL=Icon.stories.d.ts.map

package/lib/core/Icon/Icon.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAsB/C,wBAGU;AAIV,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAC;AAEF,UAAU,aAAa;IACrB,GAAG,EAAE,SAAS,GAAG,YAAY,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,aAAa,CAwEzC,CAAC"}
+{"version":3,"file":"Icon.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAsBtD,wBAGU;AAIV,eAAO,MAAM,UAAU,EAAE,OASxB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,OAaxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAEzB,CAAC;AAEF,UAAU,aAAa;IACrB,GAAG,EAAE,SAAS,GAAG,YAAY,CAAC;CAC/B;AAED,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,aAAa,CAwE3C,CAAC"}

package/lib/core/Icon/Icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState, useCallback, useRef } from 'react';\n\nimport {\n  EmptyState,\n  Flex,\n  Icon,\n  icons,\n  streamlineIcons,\n  registerIcon,\n  Progress,\n  SearchInput,\n  Text,\n  useItemIntersection,\n  useTheme,\n  Configuration\n} from '@pega/cosmos-react-core';\nimport * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';\n\nimport { createCustomIcon } from './Icon.mocks';\nimport { StyledIconList, StyledIconListItem, StyledProgressContainer } from './Icon.styles';\n\nexport default {\n  title: 'Core/Icon',\n  component: Icon\n} as Meta;\n\nregisterIcon(pegasusIcon);\n\nexport const StaticIcon: Story = () => {\n  return (\n    <Icon\n      style={{ height: '5rem', width: '5rem' }}\n      name='pegasus'\n      role='img'\n      aria-label='Informative label'\n    />\n  );\n};\n\nexport const CustomIcon: Story = () => {\n  const theme = useTheme();\n\n  createCustomIcon(theme);\n\n  return (\n    <Icon\n      style={{ height: '5rem', width: '5rem' }}\n      name='custom-pega'\n      role='img'\n      aria-label='Custom icon'\n    />\n  );\n};\n\nexport const DynamicIcon: Story = () => {\n  return <Icon style={{ height: '5rem', width: '5rem' }} role='img' name='pega' />;\n};\n\ninterface IconListProps {\n  set: 'budicon' | 'streamline';\n}\n\nexport const IconList: Story<IconListProps> = (args: IconListProps) => {\n  const pageSize = 50;\n\n  const [search, setSearch] = useState('');\n  const totalMatches = useRef(0);\n  const [currentPageIndex, setCurrentPageIndex] = useState(0);\n  const ulRef = useRef<HTMLUListElement>(null);\n\n  const iconList: readonly string[] = args.set === 'budicon' ? icons : streamlineIcons;\n\n  const listContent = useMemo(() => {\n    const matches = search ? iconList.filter(icon => icon.includes(search)) : iconList;\n    const totalItemsToRender = (1 + currentPageIndex) * pageSize;\n    totalMatches.current = matches.length;\n\n    if (matches.length === 0) {\n      return <EmptyState forwardedAs='li' />;\n    }\n\n    return matches.slice(0, totalItemsToRender).map(icon => (\n      <Flex\n        key={icon}\n        container={{\n          direction: 'column',\n          justify: 'center',\n          alignItems: 'center',\n          alignContent: 'center'\n        }}\n        as={StyledIconListItem}\n      >\n        <Icon style={{ height: '3rem', width: '3rem' }} name={icon} />\n        <p style={{ textAlign: 'center' }}>{icon}</p>\n      </Flex>\n    ));\n  }, [iconList, search, currentPageIndex]);\n\n  const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * pageSize);\n  const itemsToLoadMore = totalMatches.current - itemsShown;\n\n  // When reaches to the bottom of the results, loads next pageSize items\n  useItemIntersection(\n    ulRef,\n    itemsShown,\n    () => {\n      setCurrentPageIndex(prev => 1 + prev);\n    },\n    ':scope > li'\n  );\n\n  // on search, reset to first page and scroll to top\n  const onSearchChange = useCallback((value: string) => {\n    setSearch(value);\n    setCurrentPageIndex(0);\n    ulRef?.current?.scrollIntoView();\n  }, []);\n\n  return (\n    <Configuration theme={{ base: { 'icon-set': args.set } }}>\n      <Flex container={{ direction: 'column', gap: 1 }} style={{ height: 'calc(100vh - 2rem)' }}>\n        <SearchInput value={search} onSearchChange={onSearchChange} />\n        {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}\n        <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>\n          {listContent}\n          {itemsToLoadMore > 0 && (\n            <StyledProgressContainer>\n              <Progress placement='local' />\n            </StyledProgressContainer>\n          )}\n        </Flex>\n      </Flex>\n    </Configuration>\n  );\n};\n\nIconList.args = {\n  set: 'budicon'\n};\n\nIconList.argTypes = {\n  set: {\n    options: ['budicon', 'streamline'],\n    control: { type: 'radio' }\n  }\n};\n"]}
+{"version":3,"file":"Icon.stories.js","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useMemo, useState, useCallback, useRef } from 'react';\n\nimport {\n  EmptyState,\n  Flex,\n  Icon,\n  icons,\n  streamlineIcons,\n  registerIcon,\n  Progress,\n  SearchInput,\n  Text,\n  useItemIntersection,\n  useTheme,\n  Configuration\n} from '@pega/cosmos-react-core';\nimport * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';\n\nimport { createCustomIcon } from './Icon.mocks';\nimport { StyledIconList, StyledIconListItem, StyledProgressContainer } from './Icon.styles';\n\nexport default {\n  title: 'Core/Icon',\n  component: Icon\n} as Meta;\n\nregisterIcon(pegasusIcon);\n\nexport const StaticIcon: StoryFn = () => {\n  return (\n    <Icon\n      style={{ height: '5rem', width: '5rem' }}\n      name='pegasus'\n      role='img'\n      aria-label='Informative label'\n    />\n  );\n};\n\nexport const CustomIcon: StoryFn = () => {\n  const theme = useTheme();\n\n  createCustomIcon(theme);\n\n  return (\n    <Icon\n      style={{ height: '5rem', width: '5rem' }}\n      name='custom-pega'\n      role='img'\n      aria-label='Custom icon'\n    />\n  );\n};\n\nexport const DynamicIcon: StoryFn = () => {\n  return <Icon style={{ height: '5rem', width: '5rem' }} role='img' name='pega' />;\n};\n\ninterface IconListProps {\n  set: 'budicon' | 'streamline';\n}\n\nexport const IconList: StoryFn<IconListProps> = (args: IconListProps) => {\n  const pageSize = 50;\n\n  const [search, setSearch] = useState('');\n  const totalMatches = useRef(0);\n  const [currentPageIndex, setCurrentPageIndex] = useState(0);\n  const ulRef = useRef<HTMLUListElement>(null);\n\n  const iconList: readonly string[] = args.set === 'budicon' ? icons : streamlineIcons;\n\n  const listContent = useMemo(() => {\n    const matches = search ? iconList.filter(icon => icon.includes(search)) : iconList;\n    const totalItemsToRender = (1 + currentPageIndex) * pageSize;\n    totalMatches.current = matches.length;\n\n    if (matches.length === 0) {\n      return <EmptyState forwardedAs='li' />;\n    }\n\n    return matches.slice(0, totalItemsToRender).map(icon => (\n      <Flex\n        key={icon}\n        container={{\n          direction: 'column',\n          justify: 'center',\n          alignItems: 'center',\n          alignContent: 'center'\n        }}\n        as={StyledIconListItem}\n      >\n        <Icon style={{ height: '3rem', width: '3rem' }} name={icon} />\n        <p style={{ textAlign: 'center' }}>{icon}</p>\n      </Flex>\n    ));\n  }, [iconList, search, currentPageIndex]);\n\n  const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * pageSize);\n  const itemsToLoadMore = totalMatches.current - itemsShown;\n\n  // When reaches to the bottom of the results, loads next pageSize items\n  useItemIntersection(\n    ulRef,\n    itemsShown,\n    () => {\n      setCurrentPageIndex(prev => 1 + prev);\n    },\n    ':scope > li'\n  );\n\n  // on search, reset to first page and scroll to top\n  const onSearchChange = useCallback((value: string) => {\n    setSearch(value);\n    setCurrentPageIndex(0);\n    ulRef?.current?.scrollIntoView();\n  }, []);\n\n  return (\n    <Configuration theme={{ base: { 'icon-set': args.set } }}>\n      <Flex container={{ direction: 'column', gap: 1 }} style={{ height: 'calc(100vh - 2rem)' }}>\n        <SearchInput value={search} onSearchChange={onSearchChange} />\n        {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}\n        <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>\n          {listContent}\n          {itemsToLoadMore > 0 && (\n            <StyledProgressContainer>\n              <Progress placement='local' />\n            </StyledProgressContainer>\n          )}\n        </Flex>\n      </Flex>\n    </Configuration>\n  );\n};\n\nIconList.args = {\n  set: 'budicon'\n};\n\nIconList.argTypes = {\n  set: {\n    options: ['budicon', 'streamline'],\n    control: { type: 'radio' }\n  }\n};\n"]}

package/lib/core/IconPicker/IconPicker.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, Story } from '@storybook/react';
-import { IconPickerProps } from '@pega/cosmos-react-core';
-declare const _default: Meta;
+import type { StoryFn } from '@storybook/react';
+import type { IconPickerProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const IconPickerDemo: Story<IconPickerProps>;
+export declare const IconPickerDemo: StoryFn<IconPickerProps>;
 //# sourceMappingURL=IconPicker.stories.d.ts.map

package/lib/core/IconPicker/IconPicker.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAc,eAAe,EAAS,MAAM,yBAAyB,CAAC;;AAE7E,wBAyBU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,eAAe,CAmBjD,CAAC"}
+{"version":3,"file":"IconPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAE/D,wBAyBU;AAEV,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,eAAe,CAmBnD,CAAC"}

package/lib/core/IconPicker/IconPicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.stories.js","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAmB,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE7E,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE;QACJ,gBAAgB,EAAE,SAAS;QAC3B,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,wCAAwC;QAC9C,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAC9E,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACnC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAElE,OAAO,CACL,KAAC,UAAU,IACT,gBAAgB,EAAE,SAAS,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE;YACzB,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { IconPicker, IconPickerProps, icons } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/IconPicker',\n  component: IconPicker,\n  args: {\n    defaultSelection: 'pegasus',\n    label: 'IconPicker input',\n    labelHidden: false,\n    info: 'Type in or click to expand the Popover',\n    placeholder: '',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    defaultSelection: { options: icons, control: { type: 'select', icons: true } },\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    info: { control: { type: 'text' } },\n    placeholder: { control: { type: 'text' } },\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const IconPickerDemo: Story<IconPickerProps> = (args: IconPickerProps) => {\n  const [iconValue, setIconValue] = useState(args.defaultSelection);\n\n  return (\n    <IconPicker\n      defaultSelection={iconValue}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      onSelect={(icon: string) => {\n        setIconValue(icon);\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"IconPicker.stories.js","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG5D,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE;QACJ,gBAAgB,EAAE,SAAS;QAC3B,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,wCAAwC;QAC9C,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;QAC9E,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACnC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA6B,CAAC,IAAqB,EAAE,EAAE;IAChF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAElE,OAAO,CACL,KAAC,UAAU,IACT,gBAAgB,EAAE,SAAS,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,CAAC,IAAY,EAAE,EAAE;YACzB,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,GACD,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { IconPicker, icons } from '@pega/cosmos-react-core';\nimport type { IconPickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/IconPicker',\n  component: IconPicker,\n  args: {\n    defaultSelection: 'pegasus',\n    label: 'IconPicker input',\n    labelHidden: false,\n    info: 'Type in or click to expand the Popover',\n    placeholder: '',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    defaultSelection: { options: icons, control: { type: 'select', icons: true } },\n    label: { control: { type: 'text' } },\n    labelHidden: { control: { type: 'boolean' } },\n    info: { control: { type: 'text' } },\n    placeholder: { control: { type: 'text' } },\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const IconPickerDemo: StoryFn<IconPickerProps> = (args: IconPickerProps) => {\n  const [iconValue, setIconValue] = useState(args.defaultSelection);\n\n  return (\n    <IconPicker\n      defaultSelection={iconValue}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      onSelect={(icon: string) => {\n        setIconValue(icon);\n      }}\n    />\n  );\n};\n"]}

package/lib/core/Image/Image.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta;
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const ImageDemo: Story;
+export declare const ImageDemo: StoryFn;
 //# sourceMappingURL=Image.stories.d.ts.map

package/lib/core/Image/Image.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAI/C,wBAGU;AAEV,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC"}
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAItD,wBAGU;AAEV,eAAO,MAAM,SAAS,EAAE,OAIvB,CAAC"}

package/lib/core/Image/Image.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.js","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAU,GAAG,EAAE;IACnC,OAAO,CACL,KAAC,KAAK,IAAC,GAAG,EAAC,uEAAuE,EAAC,GAAG,EAAC,MAAM,GAAG,CACjG,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Image } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Image',\n  component: Image\n} as Meta;\n\nexport const ImageDemo: Story = () => {\n  return (\n    <Image src='https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg' alt='Pega' />\n  );\n};\n"]}
+{"version":3,"file":"Image.stories.js","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAY,GAAG,EAAE;IACrC,OAAO,CACL,KAAC,KAAK,IAAC,GAAG,EAAC,uEAAuE,EAAC,GAAG,EAAC,MAAM,GAAG,CACjG,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Image } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Image',\n  component: Image\n} as Meta;\n\nexport const ImageDemo: StoryFn = () => {\n  return (\n    <Image src='https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg' alt='Pega' />\n  );\n};\n"]}

package/lib/core/Input/Input.stories.d.ts

@@ -1,12 +1,12 @@
-import { Meta, Story } from '@storybook/react';
-import { InputProps } from '@pega/cosmos-react-core';
-declare const _default: Meta;
+import type { StoryFn } from '@storybook/react';
+import type { InputProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface InputStoryProps extends InputProps {
     showAction: boolean;
     showAdditionalInfo?: boolean;
 }
-export declare const InputDemo: Story<InputStoryProps>;
+export declare const InputDemo: StoryFn<InputStoryProps>;
 interface ConfigurableInputProps {
     height?: string;
     padding?: string;
@@ -15,6 +15,6 @@ interface ConfigurableInputProps {
     warningStatusColor?: string;
     status?: InputProps['status'];
 }
-export declare const ConfigurableInput: Story<ConfigurableInputProps>;
-export declare const InputWithSuggestion: Story<InputStoryProps>;
+export declare const ConfigurableInput: StoryFn<ConfigurableInputProps>;
+export declare const InputWithSuggestion: StoryFn<InputStoryProps>;
 //# sourceMappingURL=Input.stories.d.ts.map

package/lib/core/Input/Input.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA0C,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE7F,wBAIU;AAEV,UAAU,eAAgB,SAAQ,UAAU;IAC1C,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CAkC5C,CAAC;AAoCF,UAAU,sBAAsB;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CA+B3D,CAAC;AAoBF,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,eAAe,CA4DtD,CAAC"}
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAoB,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE5E,wBAIU;AAEV,UAAU,eAAgB,SAAQ,UAAU;IAC1C,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,eAAe,CAkC9C,CAAC;AAoCF,UAAU,sBAAsB;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,sBAAsB,CAiC7D,CAAC;AAoBF,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,eAAe,CA4DxD,CAAC"}

package/lib/core/Input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ChangeEvent, useEffect, useRef, useState } from 'react';\n\nimport { Configuration, FormControlProps, Input, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Input',\n  component: Input,\n  excludeStories: ['ConfigurableInput']\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n  showAction: boolean;\n  showAdditionalInfo?: boolean;\n}\n\nexport const InputDemo: Story<InputStoryProps> = (args: InputStoryProps) => {\n  return (\n    <Input\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      id='input-demo'\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    />\n  );\n};\n\nInputDemo.args = {\n  type: 'text',\n  showAction: false,\n  showAdditionalInfo: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputDemo.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAdditionalInfo: { control: { type: 'boolean' } },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  status: {\n    options: [undefined, 'success', 'warning', 'error', 'pending'],\n    control: { type: 'select' }\n  },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableInputProps {\n  height?: string;\n  padding?: string;\n  errorStatusColor?: string;\n  successStatusColor?: string;\n  warningStatusColor?: string;\n  status?: InputProps['status'];\n}\n\nexport const ConfigurableInput: Story<ConfigurableInputProps> = (args: ConfigurableInputProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          input: {\n            height: args.height,\n            padding: args.padding\n          },\n          'form-field': {\n            error: {\n              'status-color': args.errorStatusColor\n            },\n            success: {\n              'status-color': args.successStatusColor\n            },\n            warning: {\n              'status-color': args.warningStatusColor\n            }\n          }\n        }\n      }}\n    >\n      <Input\n        status={args.status}\n        label='Input'\n        placeholder='Enter your input'\n        info='Enter some value'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableInput.args = {\n  height: '2rem',\n  padding: '0.5rem',\n  errorStatusColor: '#d91c29',\n  successStatusColor: '#20aa50',\n  warningStatusColor: '#fd6000',\n  status: undefined\n};\n\nConfigurableInput.argTypes = {\n  height: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } },\n  errorStatusColor: { control: { type: 'color' } },\n  successStatusColor: { control: { type: 'color' } },\n  warningStatusColor: { control: { type: 'color' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n\nexport const InputWithSuggestion: Story<InputStoryProps> = (args: InputStoryProps) => {\n  const [status, setStatus] = useState<FormControlProps['status']>(undefined);\n  const [inputValue, setInputValue] = useState('');\n  const timerRef = useRef<number>();\n\n  const timer = () => {\n    window.clearTimeout(timerRef.current);\n    timerRef.current = window.setTimeout(() => {\n      setInputValue('AI suggestion value');\n      setStatus('pending');\n    }, 3000);\n  };\n\n  useEffect(() => {\n    timer();\n    return () => {\n      window.clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  return (\n    <Input\n      id='input-demo'\n      value={inputValue}\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setInputValue(e.target.value);\n        setStatus(undefined);\n        timer();\n      }}\n      onResolveSuggestion={accepted => {\n        if (accepted) {\n          setStatus('success');\n        } else {\n          setStatus(undefined);\n          setInputValue('');\n        }\n        timer();\n      }}\n    />\n  );\n};\n\nInputWithSuggestion.args = {\n  type: 'text',\n  showAction: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputWithSuggestion.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useRef, useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport { Configuration, Input } from '@pega/cosmos-react-core';\nimport type { FormControlProps, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Input',\n  component: Input,\n  excludeStories: ['ConfigurableInput']\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n  showAction: boolean;\n  showAdditionalInfo?: boolean;\n}\n\nexport const InputDemo: StoryFn<InputStoryProps> = (args: InputStoryProps) => {\n  return (\n    <Input\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      id='input-demo'\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    />\n  );\n};\n\nInputDemo.args = {\n  type: 'text',\n  showAction: false,\n  showAdditionalInfo: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputDemo.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAdditionalInfo: { control: { type: 'boolean' } },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  status: {\n    options: [undefined, 'success', 'warning', 'error', 'pending'],\n    control: { type: 'select' }\n  },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableInputProps {\n  height?: string;\n  padding?: string;\n  errorStatusColor?: string;\n  successStatusColor?: string;\n  warningStatusColor?: string;\n  status?: InputProps['status'];\n}\n\nexport const ConfigurableInput: StoryFn<ConfigurableInputProps> = (\n  args: ConfigurableInputProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          input: {\n            height: args.height,\n            padding: args.padding\n          },\n          'form-field': {\n            error: {\n              'status-color': args.errorStatusColor\n            },\n            success: {\n              'status-color': args.successStatusColor\n            },\n            warning: {\n              'status-color': args.warningStatusColor\n            }\n          }\n        }\n      }}\n    >\n      <Input\n        status={args.status}\n        label='Input'\n        placeholder='Enter your input'\n        info='Enter some value'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableInput.args = {\n  height: '2rem',\n  padding: '0.5rem',\n  errorStatusColor: '#d91c29',\n  successStatusColor: '#20aa50',\n  warningStatusColor: '#fd6000',\n  status: undefined\n};\n\nConfigurableInput.argTypes = {\n  height: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } },\n  errorStatusColor: { control: { type: 'color' } },\n  successStatusColor: { control: { type: 'color' } },\n  warningStatusColor: { control: { type: 'color' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n\nexport const InputWithSuggestion: StoryFn<InputStoryProps> = (args: InputStoryProps) => {\n  const [status, setStatus] = useState<FormControlProps['status']>(undefined);\n  const [inputValue, setInputValue] = useState('');\n  const timerRef = useRef<number>();\n\n  const timer = () => {\n    window.clearTimeout(timerRef.current);\n    timerRef.current = window.setTimeout(() => {\n      setInputValue('AI suggestion value');\n      setStatus('pending');\n    }, 3000);\n  };\n\n  useEffect(() => {\n    timer();\n    return () => {\n      window.clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  return (\n    <Input\n      id='input-demo'\n      value={inputValue}\n      type={args.type}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n      onChange={(e: ChangeEvent<HTMLInputElement>) => {\n        setInputValue(e.target.value);\n        setStatus(undefined);\n        timer();\n      }}\n      onResolveSuggestion={accepted => {\n        if (accepted) {\n          setStatus('success');\n        } else {\n          setStatus(undefined);\n          setInputValue('');\n        }\n        timer();\n      }}\n    />\n  );\n};\n\nInputWithSuggestion.args = {\n  type: 'text',\n  showAction: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputWithSuggestion.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { control: { type: 'text' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/Label/Label.stories.d.ts

@@ -1,10 +1,10 @@
-import { Meta, Story } from '@storybook/react';
-import { LabelProps } from '@pega/cosmos-react-core';
-declare const _default: Meta;
+import type { StoryFn } from '@storybook/react';
+import type { LabelProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const LabelDemo: Story<LabelProps>;
+export declare const LabelDemo: StoryFn<LabelProps>;
 interface ConfigurableLabelProps {
     fontSize?: string;
 }
-export declare const ConfigurableLabel: Story<ConfigurableLabelProps>;
+export declare const ConfigurableLabel: StoryFn<ConfigurableLabelProps>;
 //# sourceMappingURL=Label.stories.d.ts.map

package/lib/core/Label/Label.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAwB,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE3E,wBAIU;AAEV,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,UAAU,CAEvC,CAAC;AAUF,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAc3D,CAAC"}
+{"version":3,"file":"Label.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE1D,wBAIU;AAEV,eAAO,MAAM,SAAS,EAAE,OAAO,CAAC,UAAU,CAEzC,CAAC;AAUF,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,sBAAsB,CAgB7D,CAAC"}

package/lib/core/Label/Label.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.stories.js","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE3E,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,CAAC,mBAAmB,CAAC;CAC9B,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAC/D,OAAO,KAAC,KAAK,IAAC,WAAW,EAAE,IAAI,CAAC,WAAW,sBAAe,CAAC;AAC7D,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAMF,MAAM,CAAC,MAAM,iBAAiB,GAAkC,CAAC,IAA4B,EAAE,EAAE;IAC/F,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI,CAAC,QAAQ;iBAC3B;aACF;SACF,YAED,KAAC,KAAK,wBAAc,GACN,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9F,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Label, LabelProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Label',\n  component: Label,\n  excludeStories: ['ConfigurableLabel']\n} as Meta;\n\nexport const LabelDemo: Story<LabelProps> = (args: LabelProps) => {\n  return <Label labelHidden={args.labelHidden}>Label</Label>;\n};\n\nLabelDemo.args = {\n  labelHidden: false\n};\n\nLabelDemo.argTypes = {\n  labelHidden: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableLabelProps {\n  fontSize?: string;\n}\n\nexport const ConfigurableLabel: Story<ConfigurableLabelProps> = (args: ConfigurableLabelProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          label: {\n            'font-size': args.fontSize\n          }\n        }\n      }}\n    >\n      <Label>Label</Label>\n    </Configuration>\n  );\n};\n\nConfigurableLabel.args = {\n  fontSize: 'xs'\n};\n\nConfigurableLabel.argTypes = {\n  fontSize: { options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'], control: { type: 'select' } }\n};\n"]}
+{"version":3,"file":"Label.stories.js","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG/D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,CAAC,mBAAmB,CAAC;CAC9B,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAwB,CAAC,IAAgB,EAAE,EAAE;IACjE,OAAO,KAAC,KAAK,IAAC,WAAW,EAAE,IAAI,CAAC,WAAW,sBAAe,CAAC;AAC7D,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAMF,MAAM,CAAC,MAAM,iBAAiB,GAAoC,CAChE,IAA4B,EAC5B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI,CAAC,QAAQ;iBAC3B;aACF;SACF,YAED,KAAC,KAAK,wBAAc,GACN,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9F,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Configuration, Label } from '@pega/cosmos-react-core';\nimport type { LabelProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Label',\n  component: Label,\n  excludeStories: ['ConfigurableLabel']\n} as Meta;\n\nexport const LabelDemo: StoryFn<LabelProps> = (args: LabelProps) => {\n  return <Label labelHidden={args.labelHidden}>Label</Label>;\n};\n\nLabelDemo.args = {\n  labelHidden: false\n};\n\nLabelDemo.argTypes = {\n  labelHidden: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableLabelProps {\n  fontSize?: string;\n}\n\nexport const ConfigurableLabel: StoryFn<ConfigurableLabelProps> = (\n  args: ConfigurableLabelProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          label: {\n            'font-size': args.fontSize\n          }\n        }\n      }}\n    >\n      <Label>Label</Label>\n    </Configuration>\n  );\n};\n\nConfigurableLabel.args = {\n  fontSize: 'xs'\n};\n\nConfigurableLabel.argTypes = {\n  fontSize: { options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'], control: { type: 'select' } }\n};\n"]}

package/lib/core/Lightbox/Lightbox.stories.d.ts

@@ -1,10 +1,10 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta;
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface LightboxStoryProps {
     limit?: number;
     cycle?: boolean;
     error?: boolean;
 }
-export declare const LightboxDemo: Story<LightboxStoryProps>;
+export declare const LightboxDemo: StoryFn<LightboxStoryProps>;
 //# sourceMappingURL=Lightbox.stories.d.ts.map

package/lib/core/Lightbox/Lightbox.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAa/C,wBAGU;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqDlD,CAAC"}
+{"version":3,"file":"Lightbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAQtD,wBAGU;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAqDpD,CAAC"}

package/lib/core/Lightbox/Lightbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Lightbox.stories.js","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport {\n  Button,\n  DateTimeDisplay,\n  Lightbox,\n  LightboxProps,\n  LightboxItem\n} from '@pega/cosmos-react-core';\n\nimport { mockAPIImageResources, mockBadImageResource } from './Lightbox.mocks';\n\nexport default {\n  title: 'Core/Lightbox',\n  component: Lightbox\n} as Meta;\n\ninterface LightboxStoryProps {\n  limit?: number;\n  cycle?: boolean;\n  error?: boolean;\n}\n\nexport const LightboxDemo: Story<LightboxStoryProps> = (args: LightboxStoryProps) => {\n  const demoButtonRef = useRef<HTMLButtonElement>(null);\n  const [images, setImages] = useState<LightboxProps['items'] | null>(null);\n\n  const onClick = () => {\n    setImages(\n      (args.error ? [mockBadImageResource] : mockAPIImageResources.slice(0, args.limit)).map(\n        ({ id, name, description, mime_type, media_url }) => {\n          return {\n            id,\n            name,\n            description,\n            src: media_url,\n            metadata: [\n              mime_type.split('/').pop(),\n              <DateTimeDisplay value={new Date()} variant='date' />\n            ]\n          };\n        }\n      )\n    );\n  };\n\n  const onItemDownload = async (id: LightboxItem['id']) => {\n    const a = document.createElement('a');\n    a.href = await fetch(id)\n      .then(response => response.blob())\n      .then(blob => URL.createObjectURL(blob));\n\n    a.download = images?.find(image => image.id === id)?.name ?? id;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n  };\n\n  return (\n    <>\n      <Button ref={demoButtonRef} onClick={onClick}>\n        Open Lightbox\n      </Button>\n      {images && (\n        <Lightbox\n          items={images}\n          cycle={args.cycle || undefined}\n          onAfterClose={() => {\n            setImages(null);\n            demoButtonRef.current?.focus();\n          }}\n          onItemDownload={onItemDownload}\n        />\n      )}\n    </>\n  );\n};\n\nLightboxDemo.args = {\n  limit: 7,\n  cycle: false,\n  error: false\n};\n\nLightboxDemo.argTypes = {\n  limit: { control: { type: 'number' } },\n  cycle: { control: { type: 'boolean' } },\n  error: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Lightbox.stories.js","sourceRoot":"","sources":["../../../src/core/Lightbox/Lightbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Button, DateTimeDisplay, Lightbox, LightboxItem } from '@pega/cosmos-react-core';\nimport type { LightboxProps } from '@pega/cosmos-react-core';\n\nimport { mockAPIImageResources, mockBadImageResource } from './Lightbox.mocks';\n\nexport default {\n  title: 'Core/Lightbox',\n  component: Lightbox\n} as Meta;\n\ninterface LightboxStoryProps {\n  limit?: number;\n  cycle?: boolean;\n  error?: boolean;\n}\n\nexport const LightboxDemo: StoryFn<LightboxStoryProps> = (args: LightboxStoryProps) => {\n  const demoButtonRef = useRef<HTMLButtonElement>(null);\n  const [images, setImages] = useState<LightboxProps['items'] | null>(null);\n\n  const onClick = () => {\n    setImages(\n      (args.error ? [mockBadImageResource] : mockAPIImageResources.slice(0, args.limit)).map(\n        ({ id, name, description, mime_type, media_url }) => {\n          return {\n            id,\n            name,\n            description,\n            src: media_url,\n            metadata: [\n              mime_type.split('/').pop(),\n              <DateTimeDisplay value={new Date()} variant='date' />\n            ]\n          };\n        }\n      )\n    );\n  };\n\n  const onItemDownload = async (id: LightboxItem['id']) => {\n    const a = document.createElement('a');\n    a.href = await fetch(id)\n      .then(response => response.blob())\n      .then(blob => URL.createObjectURL(blob));\n\n    a.download = images?.find(image => image.id === id)?.name ?? id;\n    document.body.appendChild(a);\n    a.click();\n    document.body.removeChild(a);\n  };\n\n  return (\n    <>\n      <Button ref={demoButtonRef} onClick={onClick}>\n        Open Lightbox\n      </Button>\n      {images && (\n        <Lightbox\n          items={images}\n          cycle={args.cycle || undefined}\n          onAfterClose={() => {\n            setImages(null);\n            demoButtonRef.current?.focus();\n          }}\n          onItemDownload={onItemDownload}\n        />\n      )}\n    </>\n  );\n};\n\nLightboxDemo.args = {\n  limit: 7,\n  cycle: false,\n  error: false\n};\n\nLightboxDemo.argTypes = {\n  limit: { control: { type: 'number' } },\n  cycle: { control: { type: 'boolean' } },\n  error: { control: { type: 'boolean' } }\n};\n"]}