@pega/cosmos-react-demos 2.0.0

package/lib/core/Card/Card.stories.jsx

@@ -0,0 +1,55 @@
+import { Card, CardHeader, CardMedia, CardContent, CardFooter, Image, MenuButton, Text } from '@pega/cosmos-react-core';
+import { StyledCard } from './Card.styles';
+export default {
+    title: 'Core/Card',
+    component: Card,
+    parameters: {
+        layout: 'centered'
+    }
+};
+export const SimpleCard = () => {
+    return (<Card as={StyledCard}>
+      <CardHeader>
+        <Text variant='h2'>Simple Card</Text>
+      </CardHeader>
+      <CardContent>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
+      </CardContent>
+    </Card>);
+};
+export const FullCard = (args) => {
+    return (<Card as={StyledCard}>
+      <CardMedia>
+        <Image src='https://www.pega.com/sites/default/files/default-og.jpg' height='100' alt='Media'/>
+      </CardMedia>
+      <CardHeader actions={<MenuButton portal variant='simple' text='Card actions' icon='more' iconOnly menu={{
+                items: [
+                    { id: 'action-1', primary: 'Card action 1' },
+                    { id: 'action-2', primary: 'Card action 2' },
+                    { id: 'action-3', primary: 'Card action 3' }
+                ]
+            }}/>}>
+        <Text variant='h2'>Full Card</Text>
+      </CardHeader>
+      <CardContent>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+        laboris nisi ut aliquip ex ea commodo consequat.
+      </CardContent>
+      <CardFooter justify={args.justify}>
+        <Text variant='secondary'>This is the CardFooter</Text>
+      </CardFooter>
+    </Card>);
+};
+FullCard.args = {
+    justify: 'start'
+};
+FullCard.argTypes = {
+    justify: {
+        options: ['start', 'end', 'center', 'between', 'around', 'evenly'],
+        control: { type: 'select' }
+    }
+};
+//# sourceMappingURL=Card.stories.jsx.map

package/lib/core/Card/Card.stories.jsx.map

@@ -0,0 +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,EACL,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,OAAO,CACL,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CACnB;MAAA,CAAC,UAAU,CACT;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CACtC;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,WAAW,CACV;;;;MAGF,EAAE,WAAW,CACf;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACxE,OAAO,CACL,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CACnB;MAAA,CAAC,SAAS,CACR;QAAA,CAAC,KAAK,CACJ,GAAG,CAAC,yDAAyD,CAC7D,MAAM,CAAC,KAAK,CACZ,GAAG,CAAC,OAAO,EAEf;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,UAAU,CACT,OAAO,CAAC,CACN,CAAC,UAAU,CACT,MAAM,CACN,OAAO,CAAC,QAAQ,CAChB,IAAI,CAAC,cAAc,CACnB,IAAI,CAAC,MAAM,CACX,QAAQ,CACR,IAAI,CAAC,CAAC;gBACJ,KAAK,EAAE;oBACL,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;oBAC5C,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;oBAC5C,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;iBAC7C;aACF,CAAC,EACF,CACH,CAED;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CACpC;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,WAAW,CACV;;;;MAGF,EAAE,WAAW,CACb;MAAA,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAChC;QAAA,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,sBAAsB,EAAE,IAAI,CACxD;MAAA,EAAE,UAAU,CACd;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC;QAClE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","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} 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"]}

package/lib/core/Card/Card.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledCard: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Card.styles.d.ts.map

package/lib/core/Card/Card.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Card/Card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,6GAEtB,CAAC"}

package/lib/core/Card/Card.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export const StyledCard = styled.article `
+  width: 25rem;
+`;
+//# sourceMappingURL=Card.styles.js.map

package/lib/core/Card/Card.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.styles.js","sourceRoot":"","sources":["../../../src/core/Card/Card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAA;;CAEvC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const StyledCard = styled.article`\n  width: 25rem;\n`;\n"]}

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

@@ -0,0 +1,7 @@
+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>;
+//# sourceMappingURL=Checkbox.stories.d.ts.map

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

@@ -0,0 +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,EAAY,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEpE,wBAmBU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAWlD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,eAAe,CAY/C,CAAC"}

package/lib/core/Checkbox/Checkbox.stories.jsx

@@ -0,0 +1,28 @@
+import { Checkbox } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Checkbox',
+    component: Checkbox,
+    args: {
+        status: undefined,
+        label: 'Check me, please',
+        required: false,
+        disabled: false,
+        readOnly: false,
+        indeterminate: false
+    },
+    argTypes: {
+        status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        label: { control: { type: 'text' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { control: { type: 'boolean' } },
+        indeterminate: { 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}/>);
+};
+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}/>);
+};
+//# sourceMappingURL=Checkbox.stories.jsx.map

package/lib/core/Checkbox/Checkbox.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.stories.jsx","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAmB,MAAM,yBAAyB,CAAC;AAEpE,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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Checkbox, 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"]}

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

@@ -0,0 +1,7 @@
+import { Meta, Story } from '@storybook/react';
+import { RadioCheckGroupProps } 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>;
+//# sourceMappingURL=CheckboxGroup.stories.d.ts.map

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

@@ -0,0 +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"}

package/lib/core/CheckboxGroup/CheckboxGroup.stories.jsx

@@ -0,0 +1,60 @@
+import { Checkbox, CheckboxGroup, FieldGroup, FieldValueList, Flex, Text } from '@pega/cosmos-react-core';
+import { Paragraph, StyledImage } from './CheckboxGroup.styles';
+export default {
+    title: 'Core/CheckboxGroup',
+    component: CheckboxGroup,
+    args: {
+        labelHidden: false,
+        inline: false,
+        required: false,
+        disabled: false,
+        readOnly: false
+    },
+    argTypes: {
+        labelHidden: { control: { type: 'boolean' } },
+        inline: { control: { type: 'boolean' } },
+        required: { control: { type: 'boolean' } },
+        disabled: { control: { type: 'boolean' } },
+        readOnly: { 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}>
+      <Checkbox label='Banana' id='Banana' defaultChecked/>
+      <Checkbox label='Apple' id='Apple'/>
+      <Checkbox label='Mango' id='Mango'/>
+      <Checkbox label='Orange' id='Orange'/>
+    </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 }}>
+            <Text variant='h4'>A paragraph</Text>
+            <Paragraph>
+              This is a paragraph of text. It is meant to appear visually satisfying amongst the
+              other options in this group.
+            </Paragraph>
+          </Flex>} id='paragraph' defaultChecked/>
+      <Checkbox label={<Flex container={{ direction: 'column', gap: 1 }}>
+            <Text variant='h4'>Space</Text>
+            <StyledImage src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale' alt='space'/>
+          </Flex>} id='space-photo'/>
+      <Checkbox label={<Flex container={{ gap: 1, alignItems: 'start' }}>
+            <StyledImage src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale' alt='space'/>
+            <Flex container={{ direction: 'column', gap: 1 }}>
+              <Text variant='h4'>Space</Text>
+              <Paragraph>
+                Space is the final frontier. There is so much to discover within Cosmos!
+              </Paragraph>
+            </Flex>
+          </Flex>} id='cosmos'/>
+      <Checkbox label={<FieldGroup name='Gold service plan'>
+            <FieldValueList fields={[
+                { id: 'service', name: 'Service length', value: '1 year' },
+                { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
+                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }
+            ]}/>
+          </FieldGroup>} id='phone-plan'/>
+    </CheckboxGroup>);
+};
+//# sourceMappingURL=CheckboxGroup.stories.jsx.map

package/lib/core/CheckboxGroup/CheckboxGroup.stories.jsx.map

@@ -0,0 +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"]}

package/lib/core/CheckboxGroup/CheckboxGroup.styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Paragraph: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").TextProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledImage: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").ImageProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=CheckboxGroup.styles.d.ts.map

package/lib/core/CheckboxGroup/CheckboxGroup.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.styles.d.ts","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,SAAS,mOAErB,CAAC;AAEF,eAAO,MAAM,WAAW,oOAEvB,CAAC"}

package/lib/core/CheckboxGroup/CheckboxGroup.styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import { Image, Text } from '@pega/cosmos-react-core';
+export const Paragraph = styled(Text) `
+  width: 30ch;
+`;
+export const StyledImage = styled(Image) `
+  max-width: 6rem;
+`;
+//# sourceMappingURL=CheckboxGroup.styles.js.map

package/lib/core/CheckboxGroup/CheckboxGroup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.styles.js","sourceRoot":"","sources":["../../../src/core/CheckboxGroup/CheckboxGroup.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAEpC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;CAEvC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Image, Text } from '@pega/cosmos-react-core';\n\nexport const Paragraph = styled(Text)`\n  width: 30ch;\n`;\n\nexport const StyledImage = styled(Image)`\n  max-width: 6rem;\n`;\n"]}

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

@@ -0,0 +1,8 @@
+/// <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;
+//# sourceMappingURL=ColorPicker.stories.d.ts.map

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

@@ -0,0 +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"}

package/lib/core/ColorPicker/ColorPicker.stories.jsx

@@ -0,0 +1,91 @@
+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';
+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 => {
+            setValue(e.hex);
+        }}/>);
+};
+ColorPickerDemo.args = {
+    label: 'ColorPicker label',
+    labelHidden: false,
+    info: 'Pick a color',
+    status: undefined,
+    swatchOnly: false,
+    inline: false,
+    required: false,
+    disabled: false,
+    readOnly: false
+};
+ColorPickerDemo.argTypes = {
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    swatchOnly: { control: { type: 'boolean' } },
+    inline: { control: { type: 'boolean' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { 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);
+    }), [palette]);
+    const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));
+    return (<Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>
+      <Grid container={{
+            cols: '1fr 1fr 1fr 1fr',
+            alignItems: 'center',
+            colGap: 4,
+            rowGap: 1
+        }} style={{ padding: '1rem' }}>
+        <>
+          {values.map((color, i) => {
+            const key = `color-${i}`;
+            return (<div key={key}>
+                <ColorPicker inline label={opaqueColors[i][0]} value={color} onChange={e => {
+                    const newColor = e.hex;
+                    setValues(cur => {
+                        return cur.map((c, j) => {
+                            if (i === j)
+                                return newColor;
+                            return c;
+                        });
+                    });
+                }}/>
+              </div>);
+        })}
+        </>
+      </Grid>
+
+      <Grid container={{
+            cols: '1fr 1fr 1fr 1fr',
+            gap: 0.125
+        }}>
+        {values.map((color, i) => {
+            const key = `color-${i}`;
+            return (<Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledColorPane} color={color} key={key}>
+              <Text variant='h1' as='span'>
+                {color}
+              </Text>
+            </Flex>);
+        })}
+      </Grid>
+    </Grid>);
+};
+//# sourceMappingURL=ColorPicker.stories.jsx.map

package/lib/core/ColorPicker/ColorPicker.stories.jsx.map

@@ -0,0 +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';\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"]}

package/lib/core/ComboBox/ComboBox.mocks.d.ts

@@ -0,0 +1,24 @@
+import { MenuProps } from '@pega/cosmos-react-core';
+export declare const getFilterRegex: (inputValue: string) => RegExp;
+export declare const list: MenuProps['items'];
+export declare const treeItem: {
+    id: string;
+    primary: string;
+    secondary: string[];
+    items: {
+        id: string;
+        primary: string;
+        secondary: string[];
+    }[];
+};
+export declare const tree: (import("@pega/cosmos-react-core").MenuItemProps | import("@pega/cosmos-react-core").MenuGroupProps | {
+    id: string;
+    primary: string;
+    secondary: string[];
+    items: {
+        id: string;
+        primary: string;
+        secondary: string[];
+    }[];
+})[];
+//# sourceMappingURL=ComboBox.mocks.d.ts.map

package/lib/core/ComboBox/ComboBox.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,eAAO,MAAM,cAAc,eAAgB,MAAM,WAEhD,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,SAAS,CAAC,OAAO,CAsCnC,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;CASpB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;;IAAsB,CAAC"}

package/lib/core/ComboBox/ComboBox.mocks.js

@@ -0,0 +1,54 @@
+export const getFilterRegex = (inputValue) => {
+    return new RegExp(`^${inputValue.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&')}`, 'i');
+};
+export const list = [
+    { id: '1', primary: 'Joseph Morales', secondary: ['Experts', 'Engineer'] },
+    { id: '2', primary: 'Nora Lee', secondary: ['Experts', 'Engineer'] },
+    { id: '3', primary: 'Douglas Smith', secondary: ['Intermediate', 'Architect'] },
+    { id: '4', primary: 'Vernon Lee', secondary: ['Intermediate', 'Product Owner'] },
+    { id: '5', primary: 'Eula Morales', secondary: ['Intermediate', 'Architect'] },
+    { id: '6', primary: 'Paul Smith', secondary: ['Leads', 'Engineer'] },
+    { id: '7', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },
+    { id: '8', primary: 'Edward Green', secondary: ['Leads', 'Architect'] },
+    { id: '9', primary: 'John Smith', secondary: ['Leads', 'Product Owner'] },
+    { id: '10', primary: 'Olivia Cockburn', secondary: ['Experts', 'Engineer'] },
+    { id: '11', primary: 'Reese Witherspoon', secondary: ['Experts', 'Engineer'] },
+    { id: '12', primary: 'Peter Hernandez', secondary: ['Intermediate', 'Architect'] },
+    { id: '13', primary: 'Helena Johnson', secondary: ['Intermediate', 'Product Owner'] },
+    { id: '14', primary: 'Katheryn Hudson', secondary: ['Intermediate', 'Architect'] },
+    { id: '15', primary: 'Mia Hershel', secondary: ['Leads', 'Engineer'] },
+    { id: '16', primary: 'Ann Mitchell', secondary: ['Leads', 'Engineer'] },
+    { id: '17', primary: 'Rafael Bottom', secondary: ['Leads', 'Architect'] },
+    { id: '18', primary: 'Christopher Gatsby', secondary: ['Leads', 'Product Owner'] },
+    { id: '19', primary: 'Julianne Moore', secondary: ['Experts', 'Engineer'] },
+    { id: '20', primary: 'Emily Stone', secondary: ['Experts', 'Engineer'] },
+    { id: '21', primary: 'Richard Wiles', secondary: ['Intermediate', 'Architect'] },
+    { id: '22', primary: 'Ella Connor', secondary: ['Intermediate', 'Product Owner'] },
+    { id: '23', primary: 'Robyn Fenton', secondary: ['Intermediate', 'Architect'] },
+    { id: '24', primary: 'Lucille Hale', secondary: ['Leads', 'Engineer'] },
+    { id: '25', primary: 'Angelina Pitt', secondary: ['Leads', 'Engineer'] },
+    { id: '26', primary: 'Tanya Robinson', secondary: ['Leads', 'Architect'] },
+    { id: '27', primary: 'Laura Horowitz', secondary: ['Leads', 'Product Owner'] },
+    {
+        id: 't',
+        label: 'Toms',
+        items: [
+            { id: '28', primary: 'Tom Jones' },
+            { id: '29', primary: 'Tom Hardy' },
+            { id: '30', primary: 'Tom Hanks' },
+            { id: '31', primary: 'Tom Sawyer' }
+        ]
+    }
+];
+export const treeItem = {
+    id: '01',
+    primary: 'Group',
+    secondary: ['Leads', 'Engineer'],
+    items: [
+        { id: '01-1', primary: 'Paul McDonald', secondary: ['Leads', 'Engineer'] },
+        { id: '01-2', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },
+        { id: '01-3', primary: 'Edward Green', secondary: ['Leads', 'Engineer'] }
+    ]
+};
+export const tree = [treeItem, ...list];
+//# sourceMappingURL=ComboBox.mocks.js.map

package/lib/core/ComboBox/ComboBox.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.mocks.js","sourceRoot":"","sources":["../../../src/core/ComboBox/ComboBox.mocks.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,EAAE;IACnD,OAAO,IAAI,MAAM,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,uBAAuB,EAAE,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,CAAC;AACpF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAuB;IACtC,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IAC1E,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IACpE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAC/E,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,EAAE;IAChF,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAC9E,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACpE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACtE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE;IACvE,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,EAAE;IACzE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IAC5E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IAC9E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAClF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,EAAE;IACrF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAClF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACtE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACvE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE;IACzE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,EAAE;IAClF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IAC3E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;IACxE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAChF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,eAAe,CAAC,EAAE;IAClF,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE;IAC/E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACvE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;IACxE,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,EAAE;IAC1E,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,eAAe,CAAC,EAAE;IAC9E;QACE,EAAE,EAAE,GAAG;QACP,KAAK,EAAE,MAAM;QACb,KAAK,EAAE;YACL,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE;YAClC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE;YAClC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE;YAClC,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE;SACpC;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,EAAE,EAAE,IAAI;IACR,OAAO,EAAE,OAAO;IAChB,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC;IAChC,KAAK,EAAE;QACL,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;QAC1E,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;QACzE,EAAE,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE;KAC1E;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAC","sourcesContent":["import { MenuProps } from '@pega/cosmos-react-core';\n\nexport const getFilterRegex = (inputValue: string) => {\n  return new RegExp(`^${inputValue.replace(/[.*+\\-?^${}()|[\\]\\\\]/g, '\\\\$&')}`, 'i');\n};\n\nexport const list: MenuProps['items'] = [\n  { id: '1', primary: 'Joseph Morales', secondary: ['Experts', 'Engineer'] },\n  { id: '2', primary: 'Nora Lee', secondary: ['Experts', 'Engineer'] },\n  { id: '3', primary: 'Douglas Smith', secondary: ['Intermediate', 'Architect'] },\n  { id: '4', primary: 'Vernon Lee', secondary: ['Intermediate', 'Product Owner'] },\n  { id: '5', primary: 'Eula Morales', secondary: ['Intermediate', 'Architect'] },\n  { id: '6', primary: 'Paul Smith', secondary: ['Leads', 'Engineer'] },\n  { id: '7', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },\n  { id: '8', primary: 'Edward Green', secondary: ['Leads', 'Architect'] },\n  { id: '9', primary: 'John Smith', secondary: ['Leads', 'Product Owner'] },\n  { id: '10', primary: 'Olivia Cockburn', secondary: ['Experts', 'Engineer'] },\n  { id: '11', primary: 'Reese Witherspoon', secondary: ['Experts', 'Engineer'] },\n  { id: '12', primary: 'Peter Hernandez', secondary: ['Intermediate', 'Architect'] },\n  { id: '13', primary: 'Helena Johnson', secondary: ['Intermediate', 'Product Owner'] },\n  { id: '14', primary: 'Katheryn Hudson', secondary: ['Intermediate', 'Architect'] },\n  { id: '15', primary: 'Mia Hershel', secondary: ['Leads', 'Engineer'] },\n  { id: '16', primary: 'Ann Mitchell', secondary: ['Leads', 'Engineer'] },\n  { id: '17', primary: 'Rafael Bottom', secondary: ['Leads', 'Architect'] },\n  { id: '18', primary: 'Christopher Gatsby', secondary: ['Leads', 'Product Owner'] },\n  { id: '19', primary: 'Julianne Moore', secondary: ['Experts', 'Engineer'] },\n  { id: '20', primary: 'Emily Stone', secondary: ['Experts', 'Engineer'] },\n  { id: '21', primary: 'Richard Wiles', secondary: ['Intermediate', 'Architect'] },\n  { id: '22', primary: 'Ella Connor', secondary: ['Intermediate', 'Product Owner'] },\n  { id: '23', primary: 'Robyn Fenton', secondary: ['Intermediate', 'Architect'] },\n  { id: '24', primary: 'Lucille Hale', secondary: ['Leads', 'Engineer'] },\n  { id: '25', primary: 'Angelina Pitt', secondary: ['Leads', 'Engineer'] },\n  { id: '26', primary: 'Tanya Robinson', secondary: ['Leads', 'Architect'] },\n  { id: '27', primary: 'Laura Horowitz', secondary: ['Leads', 'Product Owner'] },\n  {\n    id: 't',\n    label: 'Toms',\n    items: [\n      { id: '28', primary: 'Tom Jones' },\n      { id: '29', primary: 'Tom Hardy' },\n      { id: '30', primary: 'Tom Hanks' },\n      { id: '31', primary: 'Tom Sawyer' }\n    ]\n  }\n];\n\nexport const treeItem = {\n  id: '01',\n  primary: 'Group',\n  secondary: ['Leads', 'Engineer'],\n  items: [\n    { id: '01-1', primary: 'Paul McDonald', secondary: ['Leads', 'Engineer'] },\n    { id: '01-2', primary: 'Frank Walker', secondary: ['Leads', 'Engineer'] },\n    { id: '01-3', primary: 'Edward Green', secondary: ['Leads', 'Engineer'] }\n  ]\n};\n\nexport const tree = [treeItem, ...list];\n"]}

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

@@ -0,0 +1,21 @@
+import { Meta, Story } from '@storybook/react';
+import { ComboBoxProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+interface ComboBoxStoryProps {
+    label?: ComboBoxProps['label'];
+    labelHidden?: ComboBoxProps['labelHidden'];
+    info?: ComboBoxProps['info'];
+    placeholder?: ComboBoxProps['placeholder'];
+    status?: ComboBoxProps['status'];
+    required?: ComboBoxProps['required'];
+    disabled?: ComboBoxProps['disabled'];
+    readOnly?: ComboBoxProps['readOnly'];
+}
+export declare const FilterableSingleSelect: Story<ComboBoxStoryProps>;
+export declare const NonFilterableSingleSelect: Story<ComboBoxStoryProps>;
+export declare const FilterableMultiSelect: Story<ComboBoxStoryProps>;
+export declare const NonFilterableMultiSelect: Story<ComboBoxStoryProps>;
+export declare const FilterableMultiSelectSelectableParent: Story<ComboBoxStoryProps>;
+export declare const FilterableMultiSelectLazyChildren: Story<ComboBoxStoryProps>;
+//# sourceMappingURL=ComboBox.stories.d.ts.map

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

@@ -0,0 +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"}