@pega/cosmos-react-demos 3.0.0-dev.1.0 → 3.0.0-dev.11.0

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

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const BreadcrumbsDemo: () => JSX.Element;
-export declare const ContainedBreadcrumbs: () => JSX.Element;
+export declare const BreadcrumbsDemo: Story;
+export declare const ContainedBreadcrumbs: Story;
 //# sourceMappingURL=Breadcrumbs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAMxC,wBAGU;AAEV,eAAO,MAAM,eAAe,mBAU3B,CAAC;AAEF,eAAO,MAAM,oBAAoB,mBAchC,CAAC"}
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAM/C,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAclC,CAAC"}

package/lib/core/Breadcrumbs/Breadcrumbs.stories.js

@@ -13,7 +13,7 @@ export const BreadcrumbsDemo = () => {
         { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },
         { id: 'View benefit claims', primary: 'View benefit claims' }
     ];
-    return _jsx(Breadcrumbs, { path: crumbs }, void 0);
+    return _jsx(Breadcrumbs, { path: crumbs });
 };
 export const ContainedBreadcrumbs = () => {
     const crumbs = [
@@ -23,6 +23,6 @@ export const ContainedBreadcrumbs = () => {
         { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },
         { id: 'View benefit claims', primary: 'View benefit claims' }
     ];
-    return (_jsx(Card, { as: StyledCard, children: _jsx(Breadcrumbs, { path: crumbs }, void 0) }, void 0));
+    return (_jsx(Card, { as: StyledCard, children: _jsx(Breadcrumbs, { path: crumbs }) }));
 };
 //# sourceMappingURL=Breadcrumbs.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.stories.js","sourceRoot":"","sources":["../../../src/core/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAClC,MAAM,MAAM,GAAG;QACb,EAAE,EAAE,EAAE,kBAAkB,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,mBAAmB,EAAE;QAClF,EAAE,EAAE,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE;QACtE,EAAE,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,gBAAgB,EAAE;QACzE,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE;QACnE,EAAE,EAAE,EAAE,qBAAqB,EAAE,OAAO,EAAE,qBAAqB,EAAE;KAC9D,CAAC;IAEF,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,MAAM,WAAI,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,MAAM,MAAM,GAAG;QACb,EAAE,EAAE,EAAE,kBAAkB,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,mBAAmB,EAAE;QAClF,EAAE,EAAE,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE;QACtE,EAAE,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,gBAAgB,EAAE;QACzE,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE;QACnE,EAAE,EAAE,EAAE,qBAAqB,EAAE,OAAO,EAAE,qBAAqB,EAAE;KAC9D,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,UAAU,YAClB,KAAC,WAAW,IAAC,IAAI,EAAE,MAAM,WAAI,WACxB,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\n\nimport { Breadcrumbs, Card } from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Breadcrumbs.styles';\n\nexport default {\n  title: 'Core/Breadcrumbs',\n  component: Breadcrumbs\n} as Meta;\n\nexport const BreadcrumbsDemo = () => {\n  const crumbs = [\n    { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },\n    { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },\n    { id: 'Benefit usage', primary: 'Benefit usage', href: '#benefit-usage' },\n    { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },\n    { id: 'View benefit claims', primary: 'View benefit claims' }\n  ];\n\n  return <Breadcrumbs path={crumbs} />;\n};\n\nexport const ContainedBreadcrumbs = () => {\n  const crumbs = [\n    { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },\n    { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },\n    { id: 'Benefit usage', primary: 'Benefit usage', href: '#benefit-usage' },\n    { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },\n    { id: 'View benefit claims', primary: 'View benefit claims' }\n  ];\n\n  return (\n    <Card as={StyledCard}>\n      <Breadcrumbs path={crumbs} />\n    </Card>\n  );\n};\n"]}
+{"version":3,"file":"Breadcrumbs.stories.js","sourceRoot":"","sources":["../../../src/core/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAU,GAAG,EAAE;IACzC,MAAM,MAAM,GAAG;QACb,EAAE,EAAE,EAAE,kBAAkB,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,mBAAmB,EAAE;QAClF,EAAE,EAAE,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE;QACtE,EAAE,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,gBAAgB,EAAE;QACzE,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE;QACnE,EAAE,EAAE,EAAE,qBAAqB,EAAE,OAAO,EAAE,qBAAqB,EAAE;KAC9D,CAAC;IAEF,OAAO,KAAC,WAAW,IAAC,IAAI,EAAE,MAAM,GAAI,CAAC;AACvC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAU,GAAG,EAAE;IAC9C,MAAM,MAAM,GAAG;QACb,EAAE,EAAE,EAAE,kBAAkB,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,mBAAmB,EAAE;QAClF,EAAE,EAAE,EAAE,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,IAAI,EAAE,eAAe,EAAE;QACtE,EAAE,EAAE,EAAE,eAAe,EAAE,OAAO,EAAE,eAAe,EAAE,IAAI,EAAE,gBAAgB,EAAE;QACzE,EAAE,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,cAAc,EAAE;QACnE,EAAE,EAAE,EAAE,qBAAqB,EAAE,OAAO,EAAE,qBAAqB,EAAE;KAC9D,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,UAAU,YAClB,KAAC,WAAW,IAAC,IAAI,EAAE,MAAM,GAAI,GACxB,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Breadcrumbs, Card } from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Breadcrumbs.styles';\n\nexport default {\n  title: 'Core/Breadcrumbs',\n  component: Breadcrumbs\n} as Meta;\n\nexport const BreadcrumbsDemo: Story = () => {\n  const crumbs = [\n    { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },\n    { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },\n    { id: 'Benefit usage', primary: 'Benefit usage', href: '#benefit-usage' },\n    { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },\n    { id: 'View benefit claims', primary: 'View benefit claims' }\n  ];\n\n  return <Breadcrumbs path={crumbs} />;\n};\n\nexport const ContainedBreadcrumbs: Story = () => {\n  const crumbs = [\n    { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },\n    { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },\n    { id: 'Benefit usage', primary: 'Benefit usage', href: '#benefit-usage' },\n    { id: 'Plan claims', primary: 'Plan claims', href: '#plan-claims' },\n    { id: 'View benefit claims', primary: 'View benefit claims' }\n  ];\n\n  return (\n    <Card as={StyledCard}>\n      <Breadcrumbs path={crumbs} />\n    </Card>\n  );\n};\n"]}

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

@@ -1,12 +1,19 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { ButtonProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const ButtonVariants: Story<ButtonProps>;
-export declare const DisabledButtons: () => JSX.Element;
+export declare const DisabledButtons: Story;
 export declare const IconButtons: Story<ButtonProps>;
 export declare const LoadingButtons: Story<ButtonProps>;
-export declare const ButtonAsLink: () => JSX.Element;
+export declare const ButtonAsLink: Story;
 export declare const BareButtonDemo: Story<ButtonProps>;
+interface ConfigurableButtonProps {
+    borderWidth?: string;
+    borderRadius?: number;
+    color?: string;
+    secondaryColor?: string;
+    padding?: string;
+}
+export declare const ConfigurableButton: Story<ConfigurableButtonProps>;
 //# sourceMappingURL=Button.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAA4B,MAAM,yBAAyB,CAAC;;AAMxF,wBAMU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAeF,eAAO,MAAM,eAAe,mBAoB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAoB1C,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAYF,eAAO,MAAM,YAAY,mBAMxB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,WAAW,EAKZ,MAAM,yBAAyB,CAAC;;AAMjC,wBAMU;AAEV,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAeF,eAAO,MAAM,eAAe,EAAE,KAoB7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAoB1C,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAYF,eAAO,MAAM,YAAY,EAAE,KAM1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAM7C,CAAC;AAYF,UAAU,uBAAuB;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAoB7D,CAAC"}

package/lib/core/Button/Button.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';
+import { Button, Configuration, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 registerIcon(plusIcon);
@@ -11,7 +11,7 @@ export default {
     }
 };
 export const ButtonVariants = (args) => {
-    return (_jsx(Button, { variant: args.variant, compact: args.compact, children: "Click me" }, void 0));
+    return (_jsx(Button, { variant: args.variant, compact: args.compact, children: "Click me" }));
 };
 ButtonVariants.args = {
     variant: 'primary',
@@ -25,10 +25,10 @@ ButtonVariants.argTypes = {
     compact: { control: { type: 'boolean' } }
 };
 export const DisabledButtons = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'primary', disabled: true, children: "Primary disabled" }, void 0), _jsx(Button, { variant: 'secondary', disabled: true, children: "Secondary disabled" }, void 0), _jsx(Button, { variant: 'simple', disabled: true, children: "Simple disabled" }, void 0), _jsx(Button, { variant: 'link', disabled: true, children: "Link disabled" }, void 0), _jsx(Button, { variant: 'text', disabled: true, children: "Text disabled" }, void 0)] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'primary', disabled: true, children: "Primary disabled" }), _jsx(Button, { variant: 'secondary', disabled: true, children: "Secondary disabled" }), _jsx(Button, { variant: 'simple', disabled: true, children: "Simple disabled" }), _jsx(Button, { variant: 'link', disabled: true, children: "Link disabled" }), _jsx(Button, { variant: 'text', disabled: true, children: "Text disabled" })] }));
 };
-export const IconButtons = ({ compact }) => {
-    return (_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Button, { variant: 'primary', label: 'Icon button primary', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'secondary', label: 'Icon button secondary', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'simple', label: 'Icon button simple', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'link', label: 'Icon button link', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'text', label: 'Icon button text', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0));
+export const IconButtons = (args) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Button, { variant: 'primary', label: 'Icon button primary', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }) }), _jsx(Button, { variant: 'secondary', label: 'Icon button secondary', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }) }), _jsx(Button, { variant: 'simple', label: 'Icon button simple', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }) }), _jsx(Button, { variant: 'link', label: 'Icon button link', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }) }), _jsx(Button, { variant: 'text', label: 'Icon button text', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }) })] }));
 };
 IconButtons.args = {
     compact: false
@@ -37,7 +37,7 @@ IconButtons.argTypes = {
     compact: { control: { type: 'boolean' } }
 };
 export const LoadingButtons = (args) => {
-    return (_jsx(Button, { variant: args.variant, icon: args.icon, label: 'Loading', loading: true, children: args.icon ? _jsx(Icon, { name: 'plus' }, void 0) : 'Loading' }, void 0));
+    return (_jsx(Button, { variant: args.variant, icon: args.icon, label: 'Loading', loading: true, children: args.icon ? _jsx(Icon, { name: 'plus' }) : 'Loading' }));
 };
 LoadingButtons.args = {
     variant: 'primary',
@@ -48,10 +48,10 @@ LoadingButtons.argTypes = {
     icon: { control: { type: 'boolean' } }
 };
 export const ButtonAsLink = () => {
-    return (_jsx(Button, { variant: 'primary', href: 'https://www.pega.com', target: '_blank', children: "Go to pega.com" }, void 0));
+    return (_jsx(Button, { variant: 'primary', href: 'https://www.pega.com', target: '_blank', children: "Go to pega.com" }));
 };
 export const BareButtonDemo = (args) => {
-    return (_jsx(BareButton, { disabled: args.disabled, href: args.href || undefined, children: "Click me" }, void 0));
+    return (_jsx(BareButton, { disabled: args.disabled, href: args.href || undefined, children: "Click me" }));
 };
 BareButtonDemo.args = {
     disabled: false,
@@ -61,4 +61,31 @@ BareButtonDemo.argTypes = {
     disabled: { control: { type: 'boolean' } },
     href: { control: { type: 'text' } }
 };
+export const ConfigurableButton = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                button: {
+                    'border-width': args.borderWidth,
+                    'border-radius': args.borderRadius,
+                    color: args.color,
+                    'secondary-color': args.secondaryColor,
+                    padding: args.padding
+                }
+            }
+        }, children: _jsx(Button, { children: "Configurable Button" }) }));
+};
+ConfigurableButton.args = {
+    borderWidth: '0.0625rem',
+    borderRadius: 9999,
+    color: '#076bc9',
+    secondaryColor: '#ffffff',
+    padding: '0rem 1rem'
+};
+ConfigurableButton.argTypes = {
+    borderWidth: { control: { type: 'text' } },
+    borderRadius: { control: { type: 'number' } },
+    color: { control: { type: 'color' } },
+    secondaryColor: { control: { type: 'color' } },
+    padding: { control: { type: 'text' } }
+};
 //# sourceMappingURL=Button.stories.js.map

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

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

@@ -1,8 +1,12 @@
-/// <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;
+    background?: string;
+}
+export declare const ConfigurableCard: Story<ConfigurableCardProps>;
 //# sourceMappingURL=Card.stories.d.ts.map

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

@@ -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,EAIhB,MAAM,yBAAyB,CAAC;;AAIjC,wBAMU;AAEV,eAAO,MAAM,UAAU,mBAatB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,eAAe,CAwC3C,CAAC"}
+{"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/lib/core/Card/Card.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardHeader, CardMedia, CardContent, CardFooter, Image, MenuButton, Text } from '@pega/cosmos-react-core';
+import { Card, CardHeader, CardMedia, CardContent, CardFooter, Image, MenuButton, Text, Configuration } from '@pega/cosmos-react-core';
 import { StyledCard } from './Card.styles';
 export default {
     title: 'Core/Card',
@@ -9,16 +9,16 @@ export default {
     }
 };
 export const SimpleCard = () => {
-    return (_jsxs(Card, { as: StyledCard, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: "Simple Card" }, void 0) }, void 0), _jsx(CardContent, { children: "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." }, void 0)] }, void 0));
+    return (_jsxs(Card, { as: StyledCard, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: "Simple Card" }) }), _jsx(CardContent, { children: "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." })] }));
 };
 export const FullCard = (args) => {
-    return (_jsxs(Card, { as: StyledCard, children: [_jsx(CardMedia, { children: _jsx(Image, { src: 'https://www.pega.com/sites/default/files/default-og.jpg', height: '100', alt: 'Media' }, void 0) }, void 0), _jsx(CardHeader, { actions: _jsx(MenuButton, { portal: true, variant: 'simple', text: 'Card actions', icon: 'more', iconOnly: true, menu: {
+    return (_jsxs(Card, { as: StyledCard, children: [_jsx(CardMedia, { children: _jsx(Image, { src: 'https://www.pega.com/sites/default/files/default-og.jpg', height: '100', alt: 'Media' }) }), _jsx(CardHeader, { actions: _jsx(MenuButton, { portal: true, variant: 'simple', text: 'Card actions', icon: 'more', iconOnly: true, menu: {
                         items: [
                             { id: 'action-1', primary: 'Card action 1' },
                             { id: 'action-2', primary: 'Card action 2' },
                             { id: 'action-3', primary: 'Card action 3' }
                         ]
-                    } }, void 0), children: _jsx(Text, { variant: 'h2', children: "Full Card" }, void 0) }, void 0), _jsx(CardContent, { children: "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." }, void 0), _jsx(CardFooter, { justify: args.justify, children: _jsx(Text, { variant: 'secondary', children: "This is the CardFooter" }, void 0) }, void 0)] }, void 0));
+                    } }), children: _jsx(Text, { variant: 'h2', children: "Full Card" }) }), _jsx(CardContent, { children: "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." }), _jsx(CardFooter, { justify: args.justify, children: _jsx(Text, { variant: 'secondary', children: "This is the CardFooter" }) })] }));
 };
 FullCard.args = {
     justify: 'start'
@@ -29,4 +29,22 @@ FullCard.argTypes = {
         control: { type: 'select' }
     }
 };
+export const ConfigurableCard = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                card: {
+                    'border-radius': args.borderRadius,
+                    background: args.background
+                }
+            }
+        }, children: _jsxs(Card, { as: StyledCard, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: "Simple Card" }) }), _jsx(CardContent, { children: "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." })] }) }));
+};
+ConfigurableCard.args = {
+    borderRadius: '0.5rem',
+    background: '#71baff'
+};
+ConfigurableCard.argTypes = {
+    borderRadius: { control: { type: 'text' } },
+    background: { control: { type: 'color' } }
+};
 //# sourceMappingURL=Card.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.js","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,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,aAClB,KAAC,UAAU,cACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,oCAAmB,WAC1B,EACb,KAAC,WAAW,kQAIE,YACT,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACxE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,aAClB,KAAC,SAAS,cACR,KAAC,KAAK,IACJ,GAAG,EAAC,yDAAyD,EAC7D,MAAM,EAAC,KAAK,EACZ,GAAG,EAAC,OAAO,WACX,WACQ,EACZ,KAAC,UAAU,IACT,OAAO,EACL,KAAC,UAAU,IACT,MAAM,QACN,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,IAAI,EAAE;wBACJ,KAAK,EAAE;4BACL,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;4BAC5C,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;4BAC5C,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;yBAC7C;qBACF,WACD,YAGJ,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,kCAAiB,WACxB,EACb,KAAC,WAAW,kQAIE,EACd,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAC/B,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,+CAA8B,WAC5C,YACR,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"]}
+{"version":3,"file":"Card.stories.js","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/lib/core/Checkbox/Checkbox.stories.d.ts

@@ -4,4 +4,16 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const DefaultCheckbox: Story<RadioCheckProps>;
 export declare const CheckboxCard: Story<RadioCheckProps>;
+interface ConfigurableCheckboxProps extends RadioCheckProps {
+    size?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderRadius?: string;
+    labelColor?: string;
+    labelFontWeight?: string;
+    checkedBackgroundColor?: string;
+    checkedBorderColor?: string;
+}
+export declare const ConfigurableCheckbox: Story<ConfigurableCheckboxProps>;
 //# sourceMappingURL=Checkbox.stories.d.ts.map

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

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

package/lib/core/Checkbox/Checkbox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox } from '@pega/cosmos-react-core';
+import { Checkbox, Configuration } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Checkbox',
     component: Checkbox,
@@ -21,9 +21,60 @@ export default {
     }
 };
 export const DefaultCheckbox = (args) => {
-    return (_jsx(Checkbox, { status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }, void 0));
+    return (_jsx(Checkbox, { status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }));
 };
 export const CheckboxCard = (args) => {
-    return (_jsx(Checkbox, { variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }, void 0));
+    return (_jsx(Checkbox, { 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 (_jsx(Configuration, { theme: {
+            components: {
+                checkbox: {
+                    'border-radius': args.borderRadius
+                },
+                'radio-check': {
+                    'border-color': args.borderColor,
+                    'border-width': args.borderWidth,
+                    'background-color': args.backgroundColor,
+                    label: {
+                        color: args.labelColor,
+                        'font-weight': args.labelFontWeight
+                    },
+                    size: args.size,
+                    ':checked': {
+                        'background-color': args.checkedBackgroundColor,
+                        'border-color': args.checkedBorderColor
+                    }
+                }
+            }
+        }, children: _jsx(Checkbox, { label: 'Configurable Checkbox' }) }));
+};
+ConfigurableCheckbox.args = {
+    size: '1.25rem',
+    backgroundColor: '#ffffff',
+    borderColor: '#939393',
+    borderWidth: '0.0625rem',
+    borderRadius: '0.5',
+    labelColor: '#939393',
+    labelFontWeight: '400',
+    checkedBackgroundColor: '#076bc9',
+    checkedBorderColor: '#076bc9'
+};
+ConfigurableCheckbox.argTypes = {
+    size: { control: { type: 'text' } },
+    backgroundColor: { control: { type: 'color' } },
+    borderColor: { control: { type: 'color' } },
+    borderWidth: { control: { type: 'text' } },
+    borderRadius: { control: { type: 'text' } },
+    labelColor: { control: { type: 'color' } },
+    labelFontWeight: { control: { type: 'text' } },
+    checkedBackgroundColor: { control: { type: 'color' } },
+    checkedBorderColor: { control: { type: 'color' } },
+    status: { table: { disable: true } },
+    label: { table: { disable: true } },
+    required: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    readOnly: { table: { disable: true } },
+    indeterminate: { table: { disable: true } }
 };
 //# sourceMappingURL=Checkbox.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.js","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,KAAC,QAAQ,IACP,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,WACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,WACjC,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"]}
+{"version":3,"file":"Checkbox.stories.js","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  },\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"]}

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

@@ -1,7 +1,7 @@
 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>;
+export declare const CheckboxGroupDemo: Story<OmitStrict<RadioCheckGroupProps, 'children'>>;
+export declare const CheckboxCardGroup: Story<OmitStrict<RadioCheckGroupProps, 'children'>>;
 //# sourceMappingURL=CheckboxGroup.stories.d.ts.map

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

@@ -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"}
+{"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,wBAiBU;AAEV,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAmBjF,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAuEjF,CAAC"}

package/lib/core/CheckboxGroup/CheckboxGroup.stories.js

@@ -20,13 +20,13 @@ export default {
     }
 };
 export const CheckboxGroupDemo = (args) => {
-    return (_jsxs(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, children: [_jsx(Checkbox, { label: 'Banana', id: 'Banana', defaultChecked: true }, void 0), _jsx(Checkbox, { label: 'Apple', id: 'Apple' }, void 0), _jsx(Checkbox, { label: 'Mango', id: 'Mango' }, void 0), _jsx(Checkbox, { label: 'Orange', id: 'Orange' }, void 0)] }, void 0));
+    return (_jsxs(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, children: [_jsx(Checkbox, { label: 'Banana', id: 'Banana', defaultChecked: true }), _jsx(Checkbox, { label: 'Apple', id: 'Apple' }), _jsx(Checkbox, { label: 'Mango', id: 'Mango' }), _jsx(Checkbox, { label: 'Orange', id: 'Orange' })] }));
 };
 export const CheckboxCardGroup = (args) => {
-    return (_jsxs(CheckboxGroup, { variant: 'card', label: 'Which visuals appear satisfying?', labelHidden: args.labelHidden, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(Checkbox, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }, void 0), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." }, void 0)] }, void 0), id: 'paragraph', defaultChecked: true }, void 0), _jsx(Checkbox, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0)] }, void 0), id: 'space-photo' }, void 0), _jsx(Checkbox, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" }, void 0)] }, void 0)] }, void 0), id: 'cosmos' }, void 0), _jsx(Checkbox, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
+    return (_jsxs(CheckboxGroup, { variant: 'card', label: 'Which visuals appear satisfying?', labelHidden: args.labelHidden, inline: args.inline, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(Checkbox, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(Checkbox, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(Checkbox, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(Checkbox, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(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' }
-                        ] }, void 0) }, void 0), id: 'phone-plan' }, void 0)] }, void 0));
+                        ] }) }), id: 'phone-plan' })] }));
 };
 //# sourceMappingURL=CheckboxGroup.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.stories.js","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"]}
+{"version":3,"file":"CheckboxGroup.stories.js","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  },\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<OmitStrict<RadioCheckGroupProps, 'children'>> = (\n  args: OmitStrict<RadioCheckGroupProps, 'children'>\n) => {\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<OmitStrict<RadioCheckGroupProps, 'children'>> = (\n  args: OmitStrict<RadioCheckGroupProps, 'children'>\n) => {\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/ColorPicker/ColorPicker.stories.d.ts

@@ -1,8 +1,7 @@
-/// <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;
+export declare const MultiColor: Story;
 //# sourceMappingURL=ColorPicker.stories.d.ts.map

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

@@ -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"}
+{"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,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAoBnD,CAAC;AA0BF,eAAO,MAAM,UAAU,EAAE,KA2ExB,CAAC"}

package/lib/core/ColorPicker/ColorPicker.stories.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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
@@ -11,7 +10,7 @@ export const ColorPickerDemo = (args) => {
     const [value, setValue] = useState('#10a5ac');
     return (_jsx(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);
-        } }, void 0));
+        } }));
 };
 ColorPickerDemo.args = {
     label: 'ColorPicker label',
@@ -36,13 +35,6 @@ ColorPickerDemo.argTypes = {
     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);
@@ -64,13 +56,13 @@ export const MultiColor = () => {
                                             return c;
                                         });
                                     });
-                                } }, void 0) }, key));
-                    }) }, void 0) }, void 0), _jsx(Grid, { container: {
+                                } }) }, key));
+                    }) }) }), _jsx(Grid, { container: {
                     cols: '1fr 1fr 1fr 1fr',
                     gap: 0.125
                 }, children: values.map((color, i) => {
                     const key = `color-${i}`;
-                    return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledColorPane, color: color, children: _jsx(Text, { variant: 'h1', as: 'span', children: color }, void 0) }, key));
-                }) }, void 0)] }, void 0));
+                    return (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledColorPane, color: color, children: _jsx(Text, { variant: 'h1', as: 'span', children: color }) }, key));
+                }) })] }));
 };
 //# sourceMappingURL=ColorPicker.stories.js.map