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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"FlexItem.stories.jsx","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.jsx","sourceRoot":"","sources":["../../../src/core/Flex/FlexItem.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGrD,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,SAAS,GAA4B,CAAC,IAAoB,EAAE,EAAE;IACzE,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CACpF;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,CACnD;QAAA,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CACpB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,SAAS,CAC/E;QAAA,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CACpB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,CACvF;QAAA,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAC/B;QAAA,CAAC,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAClC;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,SAAS,EAAE,MAAM;CAClB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,SAAS,EAAE;QACT,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,CAAC;QAClE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAA4B,CAAC,IAAoB,EAAE,EAAE;IACpE,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,mBAAmB,CAAC,CACnD;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,CACnD;QAAA,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CACrB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAClD;QAAA,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,CAC/B;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,CACnD;QAAA,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CACrB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,IAAI,CAAC,IAAI,GAAG;IACV,IAAI,EAAE,CAAC;CACR,CAAC;AAEF,IAAI,CAAC,QAAQ,GAAG;IACd,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA4B,CAAC,IAAoB,EAAE,EAAE;IACtE,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,mBAAmB,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAC9D;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,CAChE;QAAA,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CACvB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CACjE;QAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CACnC;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,CAChE;QAAA,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CACvB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAI,GAAG;IACZ,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,CAAC,QAAQ,GAAG;IAChB,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACxC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Flex, Text } from '@pega/cosmos-react-core';\nimport type { FlexItemProps } from '@pega/cosmos-react-core';\n\nimport { StyledFlexContainer, StyledFlexItem } from './Flex.styles';\n\nexport default {\n  title: 'Core/Flex/Item',\n  component: Flex,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface FlexStoryProps {\n  alignSelf?: FlexItemProps['alignSelf'];\n  grow?: FlexItemProps['grow'];\n  shrink?: FlexItemProps['shrink'];\n}\n\nexport const AlignSelf: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ alignItems: 'start', pad: 2 }} as={StyledFlexContainer} height={10}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n        <Text>Item 1</Text>\n      </Flex>\n      <Flex item={{ grow: 1, alignSelf: args.alignSelf }} as={StyledFlexItem} noPadding>\n        <Text>Item 2</Text>\n      </Flex>\n      <Flex container={{ direction: 'column' }} item={{ grow: 1 }} as={StyledFlexItem} inActive>\n        <Text>Item 3 - First line</Text>\n        <Text>Item 3 - Second line</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nAlignSelf.args = {\n  alignSelf: 'auto'\n};\n\nAlignSelf.argTypes = {\n  alignSelf: {\n    options: ['auto', 'start', 'end', 'baseline', 'center', 'stretch'],\n    control: { type: 'select' }\n  }\n};\n\nexport const Grow: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: 2 }} as={StyledFlexContainer}>\n      <Flex item={{ grow: 1 }} as={StyledFlexItem} inActive>\n        <Text>Grow: 1</Text>\n      </Flex>\n      <Flex item={{ grow: args.grow }} as={StyledFlexItem}>\n        <Text>Grow: {args.grow}</Text>\n      </Flex>\n      <Flex item={{ grow: 0 }} as={StyledFlexItem} inActive>\n        <Text>Grow: 0</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nGrow.args = {\n  grow: 0\n};\n\nGrow.argTypes = {\n  grow: { control: { type: 'number' } }\n};\n\nexport const Shrink: StoryFn<FlexStoryProps> = (args: FlexStoryProps) => {\n  return (\n    <Flex container={{ pad: 2 }} as={StyledFlexContainer} width={42}>\n      <Flex item={{ shrink: 1 }} as={StyledFlexItem} width={15} inActive>\n        <Text>Shrink: 1</Text>\n      </Flex>\n      <Flex item={{ shrink: args.shrink }} as={StyledFlexItem} width={15}>\n        <Text>Shrink: {args.shrink}</Text>\n      </Flex>\n      <Flex item={{ shrink: 0 }} as={StyledFlexItem} width={15} inActive>\n        <Text>Shrink: 0</Text>\n      </Flex>\n    </Flex>\n  );\n};\n\nShrink.args = {\n  shrink: 0\n};\n\nShrink.argTypes = {\n  shrink: { control: { type: 'number' } }\n};\n"]}

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

@@ -1,15 +1,15 @@
-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 FormStoryProps {
     heading?: string;
     description?: string;
 }
-export declare const ReadOnlyOneColumnForm: Story<FormStoryProps>;
-export declare const OneColumnForm: Story<FormStoryProps>;
-export declare const TwoColumnForm: Story<FormStoryProps>;
-export declare const ThreeColumnForm: Story<FormStoryProps>;
-export declare const SimpleFormDemo: Story<FormStoryProps & {
+export declare const ReadOnlyOneColumnForm: StoryFn<FormStoryProps>;
+export declare const OneColumnForm: StoryFn<FormStoryProps>;
+export declare const TwoColumnForm: StoryFn<FormStoryProps>;
+export declare const ThreeColumnForm: StoryFn<FormStoryProps>;
+export declare const SimpleFormDemo: StoryFn<FormStoryProps & {
     withBanners?: boolean;
 }>;
 interface ConfigurableFormProps extends FormStoryProps {
@@ -21,5 +21,5 @@ interface ConfigurableFormProps extends FormStoryProps {
     hoverBorderColor?: string;
     focusBorderColor?: string;
 }
-export declare const ConfigurableForm: Story<ConfigurableFormProps>;
+export declare const ConfigurableForm: StoryFn<ConfigurableFormProps>;
 //# sourceMappingURL=Form.stories.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.jsx","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.jsx","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/jsx/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/jsx/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/jsx/core/Grid/GridContainer.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.stories.jsx","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.jsx","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/jsx/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/jsx/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/jsx/core/Grid/GridItem.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"GridItem.stories.jsx","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.jsx","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/jsx/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/jsx/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/jsx/core/HTML/HTML.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.stories.jsx","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,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,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.jsx","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,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAG,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/jsx/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/jsx/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/jsx/core/Icon/Icon.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.jsx","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.jsx","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/jsx/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/jsx/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/jsx/core/IconPicker/IconPicker.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.stories.jsx","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,CAAC,UAAU,CACT,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAC5B,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,CAAC,IAAY,EAAE,EAAE;YACzB,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,CAAC,EACF,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.jsx","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,CAAC,UAAU,CACT,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAC5B,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,CAAC,IAAY,EAAE,EAAE;YACzB,YAAY,CAAC,IAAI,CAAC,CAAC;QACrB,CAAC,CAAC,EACF,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/jsx/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/jsx/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/jsx/core/Image/Image.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.jsx","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,CAAC,KAAK,CAAC,GAAG,CAAC,uEAAuE,CAAC,GAAG,CAAC,MAAM,EAAG,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.jsx","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,CAAC,KAAK,CAAC,GAAG,CAAC,uEAAuE,CAAC,GAAG,CAAC,MAAM,EAAG,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"]}