npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.3.0 → 3.0.0-dev.30.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1484) hide show

package/jsx/core/Button/Button.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.stories.jsx","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,MAAM,EAEN,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CACL,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACnD;;IACF,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC;QAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,~~GAAG~~,GAAG,EAAE;~~IAClC~~,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAChC;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,QAAQ,CAClC;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAC/B;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAC7B;;MACF,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAC7B;;MACF,EAAE,MAAM,CACV;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAuB,CAAC,~~EAAE~~,~~OAAO,EAAe,~~EAAE,EAAE;~~IAC1E~~,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CACxC;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,CAAC,qBAAqB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,~~CAC1E~~;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,CAAC,uBAAuB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,~~CAC9E~~;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,oBAAoB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,~~CACxE~~;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,~~CACpE~~;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACR;MAAA,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,~~CACpE~~;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CACL,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CACrE;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAG,CAAC,CAAC,CAAC,SAAS,CAC/C;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,KAAK;CACZ,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3E,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,~~GAAG~~,GAAG,EAAE;~~IAC/B~~,OAAO,CACL,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,sBAAsB,CAAC,MAAM,CAAC,QAAQ,CACnE;;IACF,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CACL,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,SAAS,CAAC,CAChE;;IACF,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACpC,CAAC;AAUF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,eAAe,EAAE,IAAI,CAAC,YAAY;oBAClC,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,iBAAiB,EAAE,IAAI,CAAC,cAAc;oBACtC,OAAO,EAAE,IAAI,CAAC,OAAO;iBACtB;aACF;SACF,CAAC,CAEF;MAAA,CAAC,MAAM,CAAC,mBAAmB,EAAE,MAAM,CACrC;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,IAAI;IAClB,KAAK,EAAE,SAAS;IAChB,cAAc,EAAE,SAAS;IACzB,OAAO,EAAE,WAAW;CACrB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC7C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACrC,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC9C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Button,\n ButtonProps,\n Configuration,\n Flex,\n Icon,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n title: 'Core/Button',\n component: Button,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <Button variant={args.variant} compact={args.compact}>\n Click me\n </Button>\n );\n};\n\nButtonVariants.args = {\n variant: 'primary',\n compact: false\n};\n\nButtonVariants.argTypes = {\n variant: {\n options: ['primary', 'secondary', 'simple', 'link', 'text'],\n control: { type: 'select' }\n },\n compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n return (\n <>\n <Button variant='primary' disabled>\n Primary disabled\n </Button>\n <Button variant='secondary' disabled>\n Secondary disabled\n </Button>\n <Button variant='simple' disabled>\n Simple disabled\n </Button>\n <Button variant='link' disabled>\n Link disabled\n </Button>\n <Button variant='text' disabled>\n Text disabled\n </Button>\n </>\n );\n};\n\nexport const IconButtons: Story<ButtonProps> = (~~{ compact }~~: ButtonProps) => {\n return (\n <Flex container={{ alignItems: 'center' }}>\n <Button variant='primary' label='Icon button primary' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='secondary' label='Icon button secondary' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='simple' label='Icon button simple' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='link' label='Icon button link' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='text' label='Icon button text' icon compact={compact}>\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n};\n\nIconButtons.args = {\n compact: false\n};\n\nIconButtons.argTypes = {\n compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n {args.icon ? <Icon name='plus' /> : 'Loading'}\n </Button>\n );\n};\n\nLoadingButtons.args = {\n variant: 'primary',\n icon: false\n};\n\nLoadingButtons.argTypes = {\n variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n return (\n <Button variant='primary' href='https://www.pega.com' target='_blank'>\n Go to pega.com\n </Button>\n );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <BareButton disabled={args.disabled} href={args.href \|\| undefined}>\n Click me\n </BareButton>\n );\n};\n\nBareButtonDemo.args = {\n disabled: false,\n href: ''\n};\n\nBareButtonDemo.argTypes = {\n disabled: { control: { type: 'boolean' } },\n href: { control: { type: 'text' } }\n};\n\ninterface ConfigurableButtonProps {\n borderWidth?: string;\n borderRadius?: number;\n color?: string;\n secondaryColor?: string;\n padding?: string;\n}\n\nexport const ConfigurableButton: Story<ConfigurableButtonProps> = (\n args: ConfigurableButtonProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n button: {\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius,\n color: args.color,\n 'secondary-color': args.secondaryColor,\n padding: args.padding\n }\n }\n }}\n >\n <Button>Configurable Button</Button>\n </Configuration>\n );\n};\n\nConfigurableButton.args = {\n borderWidth: '0.0625rem',\n borderRadius: 9999,\n color: '#076bc9',\n secondaryColor: '#ffffff',\n padding: '0rem 1rem'\n};\n\nConfigurableButton.argTypes = {\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'number' } },\n color: { control: { type: 'color' } },\n secondaryColor: { control: { type: 'color' } },\n padding: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"Button.stories.jsx","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Button,\n ButtonProps,\n Configuration,\n Flex,\n Icon,\n registerIcon\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n title: 'Core/Button',\n component: Button,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <Button variant={args.variant} compact={args.compact}>\n Click me\n </Button>\n );\n};\n\nButtonVariants.args = {\n variant: 'primary',\n compact: false\n};\n\nButtonVariants.argTypes = {\n variant: {\n options: ['primary', 'secondary', 'simple', 'link', 'text'],\n control: { type: 'select' }\n },\n compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons: Story = () => {\n return (\n <>\n <Button variant='primary' disabled>\n Primary disabled\n </Button>\n <Button variant='secondary' disabled>\n Secondary disabled\n </Button>\n <Button variant='simple' disabled>\n Simple disabled\n </Button>\n <Button variant='link' disabled>\n Link disabled\n </Button>\n <Button variant='text' disabled>\n Text disabled\n </Button>\n </>\n );\n};\n\nexport const IconButtons: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <Flex container={{ alignItems: 'center' }}>\n <Button variant='primary' label='Icon button primary' icon compact={args.compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='secondary' label='Icon button secondary' icon compact={args.compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='simple' label='Icon button simple' icon compact={args.compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='link' label='Icon button link' icon compact={args.compact}>\n <Icon name='plus' />\n </Button>\n <Button variant='text' label='Icon button text' icon compact={args.compact}>\n <Icon name='plus' />\n </Button>\n </Flex>\n );\n};\n\nIconButtons.args = {\n compact: false\n};\n\nIconButtons.argTypes = {\n compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n {args.icon ? <Icon name='plus' /> : 'Loading'}\n </Button>\n );\n};\n\nLoadingButtons.args = {\n variant: 'primary',\n icon: false\n};\n\nLoadingButtons.argTypes = {\n variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink: Story = () => {\n return (\n <Button variant='primary' href='https://www.pega.com' target='_blank'>\n Go to pega.com\n </Button>\n );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n return (\n <BareButton disabled={args.disabled} href={args.href \|\| undefined}>\n Click me\n </BareButton>\n );\n};\n\nBareButtonDemo.args = {\n disabled: false,\n href: ''\n};\n\nBareButtonDemo.argTypes = {\n disabled: { control: { type: 'boolean' } },\n href: { control: { type: 'text' } }\n};\n\ninterface ConfigurableButtonProps {\n borderWidth?: string;\n borderRadius?: number;\n color?: string;\n secondaryColor?: string;\n padding?: string;\n}\n\nexport const ConfigurableButton: Story<ConfigurableButtonProps> = (\n args: ConfigurableButtonProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n button: {\n 'border-width': args.borderWidth,\n 'border-radius': args.borderRadius,\n color: args.color,\n 'secondary-color': args.secondaryColor,\n padding: args.padding\n }\n }\n }}\n >\n <Button>Configurable Button</Button>\n </Configuration>\n );\n};\n\nConfigurableButton.args = {\n borderWidth: '0.0625rem',\n borderRadius: 9999,\n color: '#076bc9',\n secondaryColor: '#ffffff',\n padding: '0rem 1rem'\n};\n\nConfigurableButton.argTypes = {\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'number' } },\n color: { control: { type: 'color' } },\n secondaryColor: { control: { type: 'color' } },\n padding: { control: { type: 'text' } }\n};\n"]}

package/jsx/core/Card/Card.stories.d.ts CHANGED Viewed

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { CardFooterProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const SimpleCard: () => JSX.Element;
+export declare const SimpleCard: Story;
 export declare const FullCard: Story<CardFooterProps>;
 interface ConfigurableCardProps {
     borderRadius?: string;

package/jsx/core/Card/Card.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,eAAe,EAKhB,MAAM,yBAAyB,CAAC;;AAIjC,wBAMU;AAEV,eAAO,MAAM,UAAU,~~mBAatB~~,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,eAAe,CAwC3C,CAAC;AAaF,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAwBzD,CAAC"}
1	+ {"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,eAAe,EAKhB,MAAM,yBAAyB,CAAC;;AAIjC,wBAMU;AAEV,eAAO,MAAM,UAAU,EAAE,KAaxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,eAAe,CAwC3C,CAAC;AAaF,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAwBzD,CAAC"}

package/jsx/core/Card/Card.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Card.stories.jsx","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,EAEV,KAAK,EACL,UAAU,EACV,IAAI,EACJ,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,~~GAAG~~,GAAG,EAAE;~~IAC7B~~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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Card,\n CardHeader,\n CardMedia,\n CardContent,\n CardFooter,\n CardFooterProps,\n Image,\n MenuButton,\n Text,\n Configuration\n} from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Card.styles';\n\nexport default {\n title: 'Core/Card',\n component: Card,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const SimpleCard = () => {\n return (\n <Card as={StyledCard}>\n <CardHeader>\n <Text variant='h2'>Simple Card</Text>\n </CardHeader>\n <CardContent>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat.\n </CardContent>\n </Card>\n );\n};\n\nexport const FullCard: Story<CardFooterProps> = (args: CardFooterProps) => {\n return (\n <Card as={StyledCard}>\n <CardMedia>\n <Image\n src='https://www.pega.com/sites/default/files/default-og.jpg'\n height='100'\n alt='Media'\n />\n </CardMedia>\n <CardHeader\n actions={\n <MenuButton\n portal\n variant='simple'\n text='Card actions'\n icon='more'\n iconOnly\n menu={{\n items: [\n { id: 'action-1', primary: 'Card action 1' },\n { id: 'action-2', primary: 'Card action 2' },\n { id: 'action-3', primary: 'Card action 3' }\n ]\n }}\n />\n }\n >\n <Text variant='h2'>Full Card</Text>\n </CardHeader>\n <CardContent>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat.\n </CardContent>\n <CardFooter justify={args.justify}>\n <Text variant='secondary'>This is the CardFooter</Text>\n </CardFooter>\n </Card>\n );\n};\n\nFullCard.args = {\n justify: 'start'\n};\n\nFullCard.argTypes = {\n justify: {\n options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n control: { type: 'select' }\n }\n};\n\ninterface ConfigurableCardProps {\n borderRadius?: string;\n background?: string;\n}\n\nexport const ConfigurableCard: Story<ConfigurableCardProps> = (args: ConfigurableCardProps) => {\n return (\n <Configuration\n theme={{\n components: {\n card: {\n 'border-radius': args.borderRadius,\n background: args.background\n }\n }\n }}\n >\n <Card as={StyledCard}>\n <CardHeader>\n <Text variant='h2'>Simple Card</Text>\n </CardHeader>\n <CardContent>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n </CardContent>\n </Card>\n </Configuration>\n );\n};\n\nConfigurableCard.args = {\n borderRadius: '0.5rem',\n background: '#71baff'\n};\n\nConfigurableCard.argTypes = {\n borderRadius: { control: { type: 'text' } },\n background: { control: { type: 'color' } }\n};\n"]}
1	+ {"version":3,"file":"Card.stories.jsx","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Card,\n CardHeader,\n CardMedia,\n CardContent,\n CardFooter,\n CardFooterProps,\n Image,\n MenuButton,\n Text,\n Configuration\n} from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Card.styles';\n\nexport default {\n title: 'Core/Card',\n component: Card,\n parameters: {\n layout: 'centered'\n }\n} as Meta;\n\nexport const SimpleCard: Story = () => {\n return (\n <Card as={StyledCard}>\n <CardHeader>\n <Text variant='h2'>Simple Card</Text>\n </CardHeader>\n <CardContent>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat.\n </CardContent>\n </Card>\n );\n};\n\nexport const FullCard: Story<CardFooterProps> = (args: CardFooterProps) => {\n return (\n <Card as={StyledCard}>\n <CardMedia>\n <Image\n src='https://www.pega.com/sites/default/files/default-og.jpg'\n height='100'\n alt='Media'\n />\n </CardMedia>\n <CardHeader\n actions={\n <MenuButton\n portal\n variant='simple'\n text='Card actions'\n icon='more'\n iconOnly\n menu={{\n items: [\n { id: 'action-1', primary: 'Card action 1' },\n { id: 'action-2', primary: 'Card action 2' },\n { id: 'action-3', primary: 'Card action 3' }\n ]\n }}\n />\n }\n >\n <Text variant='h2'>Full Card</Text>\n </CardHeader>\n <CardContent>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat.\n </CardContent>\n <CardFooter justify={args.justify}>\n <Text variant='secondary'>This is the CardFooter</Text>\n </CardFooter>\n </Card>\n );\n};\n\nFullCard.args = {\n justify: 'start'\n};\n\nFullCard.argTypes = {\n justify: {\n options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n control: { type: 'select' }\n }\n};\n\ninterface ConfigurableCardProps {\n borderRadius?: string;\n background?: string;\n}\n\nexport const ConfigurableCard: Story<ConfigurableCardProps> = (args: ConfigurableCardProps) => {\n return (\n <Configuration\n theme={{\n components: {\n card: {\n 'border-radius': args.borderRadius,\n background: args.background\n }\n }\n }}\n >\n <Card as={StyledCard}>\n <CardHeader>\n <Text variant='h2'>Simple Card</Text>\n </CardHeader>\n <CardContent>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n ullamco laboris nisi ut aliquip ex ea commodo consequat.\n </CardContent>\n </Card>\n </Configuration>\n );\n};\n\nConfigurableCard.args = {\n borderRadius: '0.5rem',\n background: '#71baff'\n};\n\nConfigurableCard.argTypes = {\n borderRadius: { control: { type: 'text' } },\n background: { control: { type: 'color' } }\n};\n"]}

package/jsx/core/Checkbox/Checkbox.stories.d.ts CHANGED Viewed

@@ -2,8 +2,11 @@ import { Meta, Story } from '@storybook/react';
 import { RadioCheckProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DefaultCheckbox: Story<RadioCheckProps>;
-export declare const CheckboxCard: Story<RadioCheckProps>;
+interface CheckboxStoryProps extends RadioCheckProps {
+    showAdditionalInfo: boolean;
+}
+export declare const DefaultCheckbox: Story<CheckboxStoryProps>;
+export declare const CheckboxCard: Story<CheckboxStoryProps>;
 interface ConfigurableCheckboxProps extends RadioCheckProps {
     size?: string;
     backgroundColor?: string;
@@ -14,6 +17,7 @@ interface ConfigurableCheckboxProps extends RadioCheckProps {
     labelFontWeight?: string;
     checkedBackgroundColor?: string;
     checkedBorderColor?: string;
+    showAdditionalInfo?: boolean;
 }
 export declare const ConfigurableCheckbox: Story<ConfigurableCheckboxProps>;
 //# sourceMappingURL=Checkbox.stories.d.ts.map

package/jsx/core/Checkbox/Checkbox.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA2B,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEnF,~~wBAmBU~~;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,~~eAAe~~,~~CAWlD~~,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,~~eAAe~~,~~CAY/C~~,CAAC;AAEF,UAAU,yBAA0B,SAAQ,eAAe;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;~~CAC7B~~;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,~~CA8BjE~~,CAAC"}
1	+ {"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA2B,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEnF,wBAqBU;AAEV,UAAU,kBAAmB,SAAQ,eAAe;IAClD,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,kBAAkB,CAmBrD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAoBlD,CAAC;AAEF,UAAU,yBAA0B,SAAQ,eAAe;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAwCjE,CAAC"}

package/jsx/core/Checkbox/Checkbox.stories.jsx CHANGED Viewed

@@ -8,7 +8,8 @@ export default {
         required: false,
         disabled: false,
         readOnly: false,
-        indeterminate: false
+        indeterminate: false,
+        showAdditionalInfo: true
     },
     argTypes: {
         status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
@@ -16,14 +17,25 @@ export default {
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
         readOnly: { control: { type: 'boolean' } },
-        indeterminate: { control: { type: 'boolean' } }
+        indeterminate: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } }
     }
 };
 export const DefaultCheckbox = (args) => {
-    return (<Checkbox status={args.status} label={args.label} required={args.required} disabled={args.disabled} readOnly={args.readOnly} indeterminate={args.indeterminate}/>);
+    return (<Checkbox additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} status={args.status} label={args.label} required={args.required} disabled={args.disabled} readOnly={args.readOnly} indeterminate={args.indeterminate}/>);
 };
 export const CheckboxCard = (args) => {
-    return (<Checkbox variant='card' status={args.status} label={args.label} required={args.required} disabled={args.disabled} readOnly={args.readOnly} indeterminate={args.indeterminate}/>);
+    return (<Checkbox additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} variant='card' status={args.status} label={args.label} required={args.required} disabled={args.disabled} readOnly={args.readOnly} indeterminate={args.indeterminate}/>);
 };
 export const ConfigurableCheckbox = (args) => {
     return (<Configuration theme={{
@@ -47,7 +59,12 @@ export const ConfigurableCheckbox = (args) => {
                 }
             }
         }}>
-      <Checkbox label='Configurable Checkbox'/>
+      <Checkbox additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} label='Configurable Checkbox'/>
     </Configuration>);
 };
 ConfigurableCheckbox.args = {
@@ -59,7 +76,8 @@ ConfigurableCheckbox.args = {
     labelColor: '#939393',
     labelFontWeight: '400',
     checkedBackgroundColor: '#076bc9',
-    checkedBorderColor: '#076bc9'
+    checkedBorderColor: '#076bc9',
+    showAdditionalInfo: true
 };
 ConfigurableCheckbox.argTypes = {
     size: { control: { type: 'text' } },
@@ -76,6 +94,7 @@ ConfigurableCheckbox.argTypes = {
     required: { table: { disable: true } },
     disabled: { table: { disable: true } },
     readOnly: { table: { disable: true } },
-    indeterminate: { table: { disable: true } }
+    indeterminate: { table: { disable: true } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=Checkbox.stories.jsx.map

package/jsx/core/Checkbox/Checkbox.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAmB,MAAM,yBAAyB,CAAC;AAEnF,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,kBAAkB;QACzB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;~~KACrB~~;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,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;QAC1C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;~~KAChD~~;CACM,CAAC;~~AAEV~~,MAAM,CAAC,MAAM,eAAe,~~GAA2B~~,CAAC,~~IAAqB~~,EAAE,EAAE;~~IAC/E~~,OAAO,CACL,CAAC,QAAQ,CACP,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,EAClC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,~~GAA2B~~,CAAC,~~IAAqB~~,EAAE,EAAE;~~IAC5E~~,OAAO,CACL,CAAC,QAAQ,CACP,OAAO,CAAC,MAAM,CACd,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,EAClC,CACH,CAAC;AACJ,CAAC,CAAC;~~AAcF~~,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE;oBACR,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;gBACD,aAAa,EAAE;oBACb,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI,CAAC,UAAU;wBACtB,aAAa,EAAE,IAAI,CAAC,eAAe;qBACpC;oBACD,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,UAAU,EAAE;wBACV,kBAAkB,EAAE,IAAI,CAAC,sBAAsB;wBAC/C,cAAc,EAAE,IAAI,CAAC,kBAAkB;qBACxC;iBACF;aACF;SACF,CAAC,CAEF;MAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,uBAAuB,~~EACzC~~;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,SAAS;IACrB,eAAe,EAAE,KAAK;IACtB,sBAAsB,EAAE,SAAS;IACjC,kBAAkB,EAAE,SAAS;~~CAC9B~~,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACtD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAClD,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;~~CAC5C~~,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Checkbox, Configuration, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Checkbox',\n component: Checkbox,\n args: {\n status: undefined,\n label: 'Check me, please',\n required: false,\n disabled: false,\n readOnly: false,\n indeterminate: false\n },\n argTypes: {\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n label: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n indeterminate: { control: { type: 'boolean' } }\n }\n} as Meta;\n\nexport const DefaultCheckbox: Story<~~RadioCheckProps~~> = (args: ~~RadioCheckProps~~) => {\n return (\n <Checkbox\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n indeterminate={args.indeterminate}\n />\n );\n};\n\nexport const CheckboxCard: Story<~~RadioCheckProps~~> = (args: ~~RadioCheckProps~~) => {\n return (\n <Checkbox\n variant='card'\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n indeterminate={args.indeterminate}\n />\n );\n};\n\ninterface ConfigurableCheckboxProps extends RadioCheckProps {\n size?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: string;\n labelColor?: string;\n labelFontWeight?: string;\n checkedBackgroundColor?: string;\n checkedBorderColor?: string;\n}\n\nexport const ConfigurableCheckbox: Story<ConfigurableCheckboxProps> = (\n args: ConfigurableCheckboxProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n checkbox: {\n 'border-radius': args.borderRadius\n },\n 'radio-check': {\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'background-color': args.backgroundColor,\n label: {\n color: args.labelColor,\n 'font-weight': args.labelFontWeight\n },\n size: args.size,\n ':checked': {\n 'background-color': args.checkedBackgroundColor,\n 'border-color': args.checkedBorderColor\n }\n }\n }\n }}\n >\n <Checkbox label='Configurable Checkbox' />\n </Configuration>\n );\n};\n\nConfigurableCheckbox.args = {\n size: '1.25rem',\n backgroundColor: '#ffffff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: '0.5',\n labelColor: '#939393',\n labelFontWeight: '400',\n checkedBackgroundColor: '#076bc9',\n checkedBorderColor: '#076bc9'\n};\n\nConfigurableCheckbox.argTypes = {\n size: { control: { type: 'text' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'text' } },\n labelColor: { control: { type: 'color' } },\n labelFontWeight: { control: { type: 'text' } },\n checkedBackgroundColor: { control: { type: 'color' } },\n checkedBorderColor: { control: { type: 'color' } },\n status: { table: { disable: true } },\n label: { table: { disable: true } },\n required: { table: { disable: true } },\n disabled: { table: { disable: true } },\n readOnly: { table: { disable: true } },\n indeterminate: { table: { disable: true } }\n};\n"]}
1	+ {"version":3,"file":"Checkbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Checkbox, Configuration, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/Checkbox',\n component: Checkbox,\n args: {\n status: undefined,\n label: 'Check me, please',\n required: false,\n disabled: false,\n readOnly: false,\n indeterminate: false,\n showAdditionalInfo: true\n },\n argTypes: {\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n label: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n indeterminate: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface CheckboxStoryProps extends RadioCheckProps {\n showAdditionalInfo: boolean;\n}\n\nexport const DefaultCheckbox: Story<CheckboxStoryProps> = (args: CheckboxStoryProps) => {\n return (\n <Checkbox\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n indeterminate={args.indeterminate}\n />\n );\n};\n\nexport const CheckboxCard: Story<CheckboxStoryProps> = (args: CheckboxStoryProps) => {\n return (\n <Checkbox\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n status={args.status}\n label={args.label}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n indeterminate={args.indeterminate}\n />\n );\n};\n\ninterface ConfigurableCheckboxProps extends RadioCheckProps {\n size?: string;\n backgroundColor?: string;\n borderColor?: string;\n borderWidth?: string;\n borderRadius?: string;\n labelColor?: string;\n labelFontWeight?: string;\n checkedBackgroundColor?: string;\n checkedBorderColor?: string;\n showAdditionalInfo?: boolean;\n}\n\nexport const ConfigurableCheckbox: Story<ConfigurableCheckboxProps> = (\n args: ConfigurableCheckboxProps\n) => {\n return (\n <Configuration\n theme={{\n components: {\n checkbox: {\n 'border-radius': args.borderRadius\n },\n 'radio-check': {\n 'border-color': args.borderColor,\n 'border-width': args.borderWidth,\n 'background-color': args.backgroundColor,\n label: {\n color: args.labelColor,\n 'font-weight': args.labelFontWeight\n },\n size: args.size,\n ':checked': {\n 'background-color': args.checkedBackgroundColor,\n 'border-color': args.checkedBorderColor\n }\n }\n }\n }}\n >\n <Checkbox\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='Configurable Checkbox'\n />\n </Configuration>\n );\n};\n\nConfigurableCheckbox.args = {\n size: '1.25rem',\n backgroundColor: '#ffffff',\n borderColor: '#939393',\n borderWidth: '0.0625rem',\n borderRadius: '0.5',\n labelColor: '#939393',\n labelFontWeight: '400',\n checkedBackgroundColor: '#076bc9',\n checkedBorderColor: '#076bc9',\n showAdditionalInfo: true\n};\n\nConfigurableCheckbox.argTypes = {\n size: { control: { type: 'text' } },\n backgroundColor: { control: { type: 'color' } },\n borderColor: { control: { type: 'color' } },\n borderWidth: { control: { type: 'text' } },\n borderRadius: { control: { type: 'text' } },\n labelColor: { control: { type: 'color' } },\n labelFontWeight: { control: { type: 'text' } },\n checkedBackgroundColor: { control: { type: 'color' } },\n checkedBorderColor: { control: { type: 'color' } },\n status: { table: { disable: true } },\n label: { table: { disable: true } },\n required: { table: { disable: true } },\n disabled: { table: { disable: true } },\n readOnly: { table: { disable: true } },\n indeterminate: { table: { disable: true } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/CheckboxGroup/CheckboxGroup.stories.d.ts CHANGED Viewed

@@ -1,7 +1,11 @@
 import { Meta, Story } from '@storybook/react';
-import { RadioCheckGroupProps } from '@pega/cosmos-react-core';
+import { RadioCheckGroupProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const CheckboxGroupDemo: Story<RadioCheckGroupProps>;
-export declare const CheckboxCardGroup: Story<RadioCheckGroupProps>;
+interface RadioCheckGroupStoryProps extends RadioCheckGroupProps {
+    showAdditionalInfo?: boolean;
+    showNestedAdditionalInfo?: boolean;
+}
+export declare const CheckboxGroupDemo: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
+export declare const CheckboxCardGroup: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
 //# sourceMappingURL=CheckboxGroup.stories.d.ts.map

package/jsx/core/CheckboxGroup/CheckboxGroup.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,oBAAoB,~~EAErB~~,MAAM,yBAAyB,CAAC;;AAIjC,~~wBAiBU~~;AAEV,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,~~oBAAoB~~,~~CAiBzD~~,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,~~oBAAoB~~,~~CAqEzD~~,CAAC"}
1	+ {"version":3,"file":"CheckboxGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,oBAAoB,EAEpB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAIjC,wBAqBU;AAEV,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CA+EtF,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAuFtF,CAAC"}

package/jsx/core/CheckboxGroup/CheckboxGroup.stories.jsx CHANGED Viewed

@@ -8,18 +8,49 @@ export default {
         inline: false,
         required: false,
         disabled: false,
-        readOnly: false
+        readOnly: false,
+        showAdditionalInfo: true,
+        showNestedAdditionalInfo: false
     },
     argTypes: {
         labelHidden: { control: { type: 'boolean' } },
         inline: { control: { type: 'boolean' } },
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
-        readOnly: { control: { type: 'boolean' } }
+        readOnly: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } },
+        showNestedAdditionalInfo: { control: { type: 'boolean' } }
     }
 };
 export const CheckboxGroupDemo = (args) => {
-    return (<CheckboxGroup label='What do you want to eat?' name='Fruit' labelHidden={args.labelHidden} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
+    return args.showNestedAdditionalInfo ? (<CheckboxGroup additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} label='What do you want to eat?' name='Fruit' labelHidden={args.labelHidden} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
+      <Checkbox additionalInfo={{
+            heading: 'Additional Info',
+            content: 'Some additional info'
+        }} label='Banana' id='Banana' defaultChecked/>
+      <Checkbox additionalInfo={{
+            heading: 'Additional Info',
+            content: 'Some additional info'
+        }} label='Apple' id='Apple'/>
+      <Checkbox additionalInfo={{
+            heading: 'Additional Info',
+            content: 'Some additional info'
+        }} label='Mango' id='Mango'/>
+      <Checkbox additionalInfo={{
+            heading: 'Additional Info',
+            content: 'Some additional info'
+        }} label='Orange' id='Orange'/>
+    </CheckboxGroup>) : (<CheckboxGroup additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} label='What do you want to eat?' name='Fruit' labelHidden={args.labelHidden} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
       <Checkbox label='Banana' id='Banana' defaultChecked/>
       <Checkbox label='Apple' id='Apple'/>
       <Checkbox label='Mango' id='Mango'/>
@@ -27,8 +58,18 @@ export const CheckboxGroupDemo = (args) => {
     </CheckboxGroup>);
 };
 export const CheckboxCardGroup = (args) => {
-    return (<CheckboxGroup variant='card' label='Which visuals appear satisfying?' labelHidden={args.labelHidden} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
-      <Checkbox label={<Flex container={{ direction: 'column', gap: 1 }}>
+    return (<CheckboxGroup additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} variant='card' label='Which visuals appear satisfying?' labelHidden={args.labelHidden} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly}>
+      <Checkbox additionalInfo={args.showNestedAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} label={<Flex container={{ direction: 'column', gap: 1 }}>
             <Text variant='h4'>A paragraph</Text>
             <Paragraph>
               This is a paragraph of text. It is meant to appear visually satisfying amongst the

package/jsx/core/CheckboxGroup/CheckboxGroup.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Checkbox,\n CheckboxGroup,\n FieldGroup,\n FieldValueList,\n Flex,\n RadioCheckGroupProps,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './CheckboxGroup.styles';\n\nexport default {\n title: 'Core/CheckboxGroup',\n component: CheckboxGroup,\n args: {\n labelHidden: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false\n },\n argTypes: {\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n }\n} as Meta;\n\nexport const CheckboxGroupDemo: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n return (\n <CheckboxGroup\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox label='Banana' id='Banana' defaultChecked />\n <Checkbox label='Apple' id='Apple' />\n <Checkbox label='Mango' id='Mango' />\n <Checkbox label='Orange' id='Orange' />\n </CheckboxGroup>\n );\n};\n\nexport const CheckboxCardGroup: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n return (\n <CheckboxGroup\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <Checkbox\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <Checkbox\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Cosmos!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <Checkbox\n label={\n <FieldGroup name='Gold service plan'>\n <FieldValueList\n fields={[\n { id: 'service', name: 'Service length', value: '1 year' },\n { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n ]}\n />\n </FieldGroup>\n }\n id='phone-plan'\n />\n </CheckboxGroup>\n );\n};\n"]}
1	+ {"version":3,"file":"CheckboxGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n Checkbox,\n CheckboxGroup,\n FieldGroup,\n FieldValueList,\n Flex,\n RadioCheckGroupProps,\n Text,\n OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './CheckboxGroup.styles';\n\nexport default {\n title: 'Core/CheckboxGroup',\n component: CheckboxGroup,\n args: {\n labelHidden: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true,\n showNestedAdditionalInfo: false\n },\n argTypes: {\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n}\n\nexport const CheckboxGroupDemo: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <CheckboxGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n label='Banana'\n id='Banana'\n defaultChecked\n />\n <Checkbox\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n label='Apple'\n id='Apple'\n />\n <Checkbox\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n label='Mango'\n id='Mango'\n />\n <Checkbox\n additionalInfo={{\n heading: 'Additional Info',\n content: 'Some additional info'\n }}\n label='Orange'\n id='Orange'\n />\n </CheckboxGroup>\n ) : (\n <CheckboxGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label='What do you want to eat?'\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox label='Banana' id='Banana' defaultChecked />\n <Checkbox label='Apple' id='Apple' />\n <Checkbox label='Mango' id='Mango' />\n <Checkbox label='Orange' id='Orange' />\n </CheckboxGroup>\n );\n};\n\nexport const CheckboxCardGroup: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <CheckboxGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <Checkbox\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <Checkbox\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <Checkbox\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Cosmos!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <Checkbox\n label={\n <FieldGroup name='Gold service plan'>\n <FieldValueList\n fields={[\n { id: 'service', name: 'Service length', value: '1 year' },\n { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n ]}\n />\n </FieldGroup>\n }\n id='phone-plan'\n />\n </CheckboxGroup>\n );\n};\n"]}

package/jsx/core/ColorPicker/ColorPicker.stories.d.ts CHANGED Viewed

@@ -1,8 +1,10 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { ColorPickerProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ColorPickerDemo: Story<ColorPickerProps>;
-export declare const MultiColor: () => JSX.Element;
+interface ColorPickerStoryProps extends ColorPickerProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const ColorPickerDemo: Story<ColorPickerStoryProps>;
+export declare const MultiColor: Story;
 //# sourceMappingURL=ColorPicker.stories.d.ts.map

package/jsx/core/ColorPicker/ColorPicker.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;~~AAK~~/C,OAAO,~~EAEL~~,gBAAgB,~~EAMjB~~,MAAM,yBAAyB,CAAC;;~~AAEjC~~,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,~~gBAAgB~~,~~CAoBnD~~,CAAC;~~AA0BF~~,eAAO,MAAM,UAAU,~~mBAmFtB~~,CAAC"}
1	+ {"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAe,gBAAgB,EAA8B,MAAM,yBAAyB,CAAC;;AAIpG,wBAGU;AAEV,UAAU,qBAAsB,SAAQ,gBAAgB;IACtD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA4BxD,CAAC;AA4BF,eAAO,MAAM,UAAU,EAAE,KA2ExB,CAAC"}

package/jsx/core/ColorPicker/ColorPicker.stories.jsx CHANGED Viewed

@@ -1,14 +1,18 @@
 import { useMemo, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { ColorPicker, Flex, Grid, Text, tryCatch, useTheme } from '@pega/cosmos-react-core';
+import { ColorPicker, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';
+import { StyledColorPane } from './ColorPicker.styles';
 export default {
     title: 'Core/ColorPicker',
     component: ColorPicker
 };
 export const ColorPickerDemo = (args) => {
     const [value, setValue] = useState('#10a5ac');
-    return (<ColorPicker label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} swatchOnly={args.swatchOnly} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly} value={value} onChange={e => {
+    return (<ColorPicker additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Select a color from the dropdown or by entering its hex code.'
+            }
+            : undefined} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} swatchOnly={args.swatchOnly} inline={args.inline} required={args.required} disabled={args.disabled} readOnly={args.readOnly} value={value} onChange={e => {
             setValue(e.hex);
         }}/>);
 };
@@ -21,7 +25,8 @@ ColorPickerDemo.args = {
     inline: false,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 ColorPickerDemo.argTypes = {
     label: { control: { type: 'text' } },
@@ -32,16 +37,10 @@ ColorPickerDemo.argTypes = {
     inline: { control: { type: 'boolean' } },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
-    readOnly: { control: { type: 'boolean' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const MultiColor = () => {
-    const StyledColorPane = styled.div(({ color }) => {
-        const c = tryCatch(() => readableColor(color));
-        return css `
-      color: ${c};
-      background: ${color};
-    `;
-    });
     const { base: { palette } } = useTheme();
     const opaqueColors = useMemo(() => Object.entries(palette).filter(([, color]) => {
         return /^#[0-9A-F]{6}$/i.test(color);

package/jsx/core/ColorPicker/ColorPicker.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAC1C~~,OAAO,~~MAAM,~~EAAE,~~EAAE~~,~~GAAG~~,EAAE,~~MAAM~~,~~mBAAmB~~,~~CAAC;AAChD~~,~~OAAO,~~EAAE,~~aAAa~~,EAAE,MAAM,~~UAAU~~,CAAC;~~AAEzC~~,OAAO,~~EACL~~,~~WAAW~~,~~EAEX~~,~~IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,QAAQ,EACT,~~MAAM,~~yBAAyB~~,CAAC;~~AAEjC~~,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;~~AAEV~~,MAAM,CAAC,MAAM,eAAe,~~GAA4B~~,CAAC,~~IAAsB~~,EAAE,EAAE;~~IACjF~~,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,CAAC,WAAW,CACV,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,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,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;~~CAChB~~,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACxC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;~~CAC3C~~,~~CAAC;AAEF~~,~~MAAM~~,~~CAAC~~,~~MAAM~~,~~UAAU~~,~~GAAG,GAAG,~~EAAE~~;IAC7B~~,~~MAAM~~,~~eAAe,GAAG,MAAM,CAAC,GAAG,CAAoB,CAAC,~~EAAE,~~KAAK~~,EAAE,EAAE,~~EAAE~~;~~QAClE~~,MAAM,CAAC,~~GAAG~~,~~QAAQ~~,~~CAAC~~,GAAG,EAAE~~,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC~~;~~QAC/C~~,~~OAAO,GAAG,CAAA;eACC,CAAC;oBACI,KAAK;KACpB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,~~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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport ~~styled,~~ { ~~css~~ } ~~from~~ ~~'styled-components';\nimport~~ { ~~readableColor~~ } from '~~polished~~';\n\nimport {~~\n ColorPicker,\n ColorPickerProps,\n Flex,\n Grid,\n Text,\n tryCatch,\n useTheme\n~~} from '~~@pega/cosmos-react-core~~';\n\nexport default {\n title: 'Core/ColorPicker',\n component: ColorPicker\n} as Meta;\n\nexport const ColorPickerDemo: Story<~~ColorPickerProps~~> = (args: ~~ColorPickerProps~~) => {\n const [value, setValue] = useState('#10a5ac');\n\n return (\n <ColorPicker\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n swatchOnly={args.swatchOnly}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n value={value}\n onChange={e => {\n setValue(e.hex);\n }}\n />\n );\n};\n\nColorPickerDemo.args = {\n label: 'ColorPicker label',\n labelHidden: false,\n info: 'Pick a color',\n status: undefined,\n swatchOnly: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nColorPickerDemo.argTypes = {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n swatchOnly: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n~~};\n\nexport~~ ~~const MultiColor = () =>~~ {~~\n const~~ ~~StyledColorPane~~ ~~= styled.div<~~{ ~~color~~: ~~string~~ }~~>(({~~ ~~color~~ }~~) => {~~\n const c = ~~tryCatch~~(() => ~~readableColor(color));\n return css`\n color: $~~{~~c};\n background: ${color};\n `;\n });\n~~\n const {\n base: { palette }\n } = useTheme();\n\n const opaqueColors = useMemo(\n () =>\n Object.entries(palette).filter(([, color]) => {\n return /^#[0-9A-F]{6}$/i.test(color);\n }),\n [palette]\n );\n\n const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n return (\n <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n alignItems: 'center',\n colGap: 4,\n rowGap: 1\n }}\n style={{ padding: '1rem' }}\n >\n <>\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <div key={key}>\n <ColorPicker\n inline\n label={opaqueColors[i][0]}\n value={color}\n onChange={e => {\n const newColor = e.hex;\n setValues(cur => {\n return cur.map((c, j) => {\n if (i === j) return newColor;\n return c;\n });\n });\n }}\n />\n </div>\n );\n })}\n </>\n </Grid>\n\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n gap: 0.125\n }}\n >\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledColorPane}\n color={color}\n key={key}\n >\n <Text variant='h1' as='span'>\n {color}\n </Text>\n </Flex>\n );\n })}\n </Grid>\n </Grid>\n );\n};\n"]}
1	+ {"version":3,"file":"ColorPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport { ColorPicker, ColorPickerProps, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { StyledColorPane } from './ColorPicker.styles';\n\nexport default {\n title: 'Core/ColorPicker',\n component: ColorPicker\n} as Meta;\n\ninterface ColorPickerStoryProps extends ColorPickerProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const ColorPickerDemo: Story<ColorPickerStoryProps> = (args: ColorPickerStoryProps) => {\n const [value, setValue] = useState('#10a5ac');\n\n return (\n <ColorPicker\n additionalInfo={\n args.showAdditionalInfo\n ? {\n heading: 'Additional Info',\n content: 'Select a color from the dropdown or by entering its hex code.'\n }\n : undefined\n }\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n swatchOnly={args.swatchOnly}\n inline={args.inline}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n value={value}\n onChange={e => {\n setValue(e.hex);\n }}\n />\n );\n};\n\nColorPickerDemo.args = {\n label: 'ColorPicker label',\n labelHidden: false,\n info: 'Pick a color',\n status: undefined,\n swatchOnly: false,\n inline: false,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: true\n};\n\nColorPickerDemo.argTypes = {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n swatchOnly: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor: Story = () => {\n const {\n base: { palette }\n } = useTheme();\n\n const opaqueColors = useMemo(\n () =>\n Object.entries(palette).filter(([, color]) => {\n return /^#[0-9A-F]{6}$/i.test(color);\n }),\n [palette]\n );\n\n const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n return (\n <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n alignItems: 'center',\n colGap: 4,\n rowGap: 1\n }}\n style={{ padding: '1rem' }}\n >\n <>\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <div key={key}>\n <ColorPicker\n inline\n label={opaqueColors[i][0]}\n value={color}\n onChange={e => {\n const newColor = e.hex;\n setValues(cur => {\n return cur.map((c, j) => {\n if (i === j) return newColor;\n return c;\n });\n });\n }}\n />\n </div>\n );\n })}\n </>\n </Grid>\n\n <Grid\n container={{\n cols: '1fr 1fr 1fr 1fr',\n gap: 0.125\n }}\n >\n {values.map((color, i) => {\n const key = `color-${i}`;\n return (\n <Flex\n container={{ justify: 'center', alignItems: 'center' }}\n as={StyledColorPane}\n color={color}\n key={key}\n >\n <Text variant='h1' as='span'>\n {color}\n </Text>\n </Flex>\n );\n })}\n </Grid>\n </Grid>\n );\n};\n"]}

package/jsx/core/ColorPicker/ColorPicker.styles.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare const StyledColorPane: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color: string;
+}, never>;
+//# sourceMappingURL=ColorPicker.styles.d.ts.map

package/jsx/core/ColorPicker/ColorPicker.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"ColorPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe;WAAuB,MAAM;SAMvD,CAAC"}

package/jsx/core/ColorPicker/ColorPicker.styles.js ADDED Viewed

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { tryCatch } from '@pega/cosmos-react-core';
+export const StyledColorPane = styled.div(({ color }) => {
+    const c = tryCatch(() => readableColor(color));
+    return css `
+    color: ${c};
+    background: ${color};
+  `;
+});
+//# sourceMappingURL=ColorPicker.styles.js.map

package/jsx/core/ColorPicker/ColorPicker.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ColorPicker.styles.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/C,OAAO,GAAG,CAAA;aACC,CAAC;kBACI,KAAK;GACpB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledColorPane = styled.div<{ color: string }>(({ color }) => {\n const c = tryCatch(() => readableColor(color));\n return css`\n color: ${c};\n background: ${color};\n `;\n});\n"]}

package/jsx/core/ComboBox/ComboBox.stories.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ interface ComboBoxStoryProps {
     required?: ComboBoxProps['required'];
     disabled?: ComboBoxProps['disabled'];
     readOnly?: ComboBoxProps['readOnly'];
+    showAdditionalInfo?: boolean;
 }
 export declare const FilterableSingleSelect: Story<ComboBoxStoryProps>;
 export declare const NonFilterableSingleSelect: Story<ComboBoxStoryProps>;

package/jsx/core/ComboBox/ComboBox.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,aAAa,EAId,MAAM,yBAAyB,CAAC;;AAIjC,~~wBAsBU~~;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;~~CACtC~~;AASD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,kBAAkB,~~CAyE5D~~,CAAC;AAcF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,kBAAkB,~~CAwE~~/D,CAAC;AAeF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,kBAAkB,~~CAyD3D~~,CAAC;AAaF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,kBAAkB,~~CAyC9D~~,CAAC;AAgBF,eAAO,MAAM,qCAAqC,EAAE,KAAK,CAAC,kBAAkB,~~CA2D3E~~,CAAC;AAgBF,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,kBAAkB,~~CA4HvE~~,CAAC"}
1	+ {"version":3,"file":"ComboBox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,aAAa,EAId,MAAM,yBAAyB,CAAC;;AAIjC,wBAwBU;AAEV,UAAU,kBAAkB;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,WAAW,CAAC,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AASD,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,kBAAkB,CAiF5D,CAAC;AAcF,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,kBAAkB,CAgF/D,CAAC;AAeF,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,kBAAkB,CAiE3D,CAAC;AAaF,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,kBAAkB,CAiD9D,CAAC;AAgBF,eAAO,MAAM,qCAAqC,EAAE,KAAK,CAAC,kBAAkB,CAmE3E,CAAC;AAgBF,eAAO,MAAM,iCAAiC,EAAE,KAAK,CAAC,kBAAkB,CAoIvE,CAAC"}