@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useCallback, FormEvent, useReducer } from 'react';\n\nimport { Banner, Button, Configuration, Form, Input, Link } from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\nimport { CaseViewDemo } from '../../work/CaseView/CaseView.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner\n} as Meta;\n\nexport const SuccessBanner = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='success'\n          variant='success'\n          onDismiss={() => setShowBanner(false)}\n          heading='2 items uploaded successfully'\n          messages={['pega_data.json', 'business-earnings.xlsx']}\n        />\n      )}\n    </>\n  );\n};\n\nexport const ErrorBanner = () => {\n  return (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      action={\n        <div>\n          <Button variant='link'>Try again</Button>\n        </div>\n      }\n      messages={['Your request failed to send!', 'Please review your request and try again']}\n    />\n  );\n};\n\nexport const WarningBanner = () => {\n  return (\n    <Banner\n      id='warning'\n      variant='warning'\n      action={\n        <div>\n          <Button variant='link'>Why this matters</Button>\n        </div>\n      }\n      messages={['Your submission is missing some important documents.']}\n    />\n  );\n};\n\nexport const InfoBanner = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='info'\n          variant='info'\n          onDismiss={() => setShowBanner(false)}\n          messages={[\n            'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'\n          ]}\n        />\n      )}\n    </>\n  );\n};\n\ninterface ConfigurableErrorBannerProps {\n  background?: string;\n}\n\nexport const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps> = (\n  args: ConfigurableErrorBannerProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          banner: {\n            urgent: {\n              background: args.background\n            }\n          }\n        }\n      }}\n    >\n      <Banner\n        id='error'\n        variant='urgent'\n        heading='Error'\n        action={\n          <div>\n            <Button variant='link'>Try again</Button>\n          </div>\n        }\n        messages={['Your request failed to send!', 'Please review your request and try again']}\n      />\n    </Configuration>\n  );\n};\n\nConfigurableErrorBanner.args = {\n  background: '#d91c29'\n};\n\nConfigurableErrorBanner.argTypes = {\n  background: { control: { type: 'color' } }\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm = () => {\n  const [fields, setField] = useReducer(fieldReducer, demoFields);\n  const [banner, setBanner] = useState<any>();\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    const errorFields = fields.filter(field => !field.validator(field.value));\n    let heading = 'Wow, great job!';\n    let variant: 'success' | 'urgent' = 'success';\n    let messages = fields.map(f => `${f.name} was typed perfectly`);\n    let bannerAction;\n\n    if (errorFields.length > 0) {\n      heading = \"I'm sorry you're having trouble\";\n      variant = 'urgent';\n      messages = errorFields.map(f => `${f.name} was not typed correctly`);\n      bannerAction = (\n        <Link href='https://community.pega.com/support' target='_blank'>\n          Visit Pega support for assistance\n        </Link>\n      );\n    }\n\n    setBanner(\n      <Banner\n        {...{\n          heading,\n          variant,\n          messages,\n          id: 'formBanner',\n          action: bannerAction,\n          onDismiss() {\n            setBanner(false);\n          }\n        }}\n      />\n    );\n  }, []);\n\n  return (\n    <Form\n      banners={banner}\n      actions={formActions}\n      onSubmit={onSubmit}\n      style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n    >\n      {fields.map((field: DemoFormField) => {\n        return (\n          <Input\n            key={field.name}\n            autoComplete='off'\n            name={field.name}\n            label={field.label}\n            info={field.info}\n            value={field.value}\n            onChange={(e: InputEvent) => setField(e.target as any)}\n          />\n        );\n      })}\n    </Form>\n  );\n};\n\n// -----------------------------------------------------------------------------\n// CaseView story\n// -----------------------------------------------------------------------------\nexport const ShownInCaseView = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <CaseViewDemo\n      banners={\n        hasBanner && (\n          <Banner\n            id='case-view-error'\n            heading='Waring'\n            onDismiss={() => setHasBanner(false)}\n            variant='warning'\n            messages={['Your submission is missing some important documents.']}\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInCaseView.parameters = {\n  layout: 'fullscreen'\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell = () => {\n  const [hasBanner, setHasBanner] = useState([]);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            id='app-shell-banner-success'\n            heading='2 items uploaded successfully'\n            onDismiss={() => setHasBanner([])}\n            variant='success'\n            messages={['pega_data.json', 'business-earnings.xlsx']}\n            action={\n              <Link target='_blank' href='https://www.pega.com'>\n                Link Here!\n              </Link>\n            }\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}
+{"version":3,"file":"Banner.stories.js","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useCallback, FormEvent, useReducer } from 'react';\n\nimport { Banner, Button, Configuration, Form, Input, Link } from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\nimport { CaseViewDemo } from '../../work/CaseView/CaseView.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner\n} as Meta;\n\nexport const SuccessBanner: Story = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='success'\n          variant='success'\n          onDismiss={() => setShowBanner(false)}\n          heading='2 items uploaded successfully'\n          messages={['pega_data.json', 'business-earnings.xlsx']}\n        />\n      )}\n    </>\n  );\n};\n\nexport const ErrorBanner: Story = () => {\n  return (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      action={\n        <div>\n          <Button variant='link'>Try again</Button>\n        </div>\n      }\n      messages={['Your request failed to send!', 'Please review your request and try again']}\n    />\n  );\n};\n\nexport const WarningBanner: Story = () => {\n  return (\n    <Banner\n      id='warning'\n      variant='warning'\n      action={\n        <div>\n          <Button variant='link'>Why this matters</Button>\n        </div>\n      }\n      messages={['Your submission is missing some important documents.']}\n    />\n  );\n};\n\nexport const InfoBanner: Story = () => {\n  const [showBanner, setShowBanner] = useState(true);\n\n  return (\n    <>\n      {!showBanner && <Button onClick={() => setShowBanner(true)}>Open banner</Button>}\n      {showBanner && (\n        <Banner\n          id='info'\n          variant='info'\n          onDismiss={() => setShowBanner(false)}\n          messages={[\n            'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'\n          ]}\n        />\n      )}\n    </>\n  );\n};\n\ninterface ConfigurableErrorBannerProps {\n  background?: string;\n}\n\nexport const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps> = (\n  args: ConfigurableErrorBannerProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          banner: {\n            urgent: {\n              background: args.background\n            }\n          }\n        }\n      }}\n    >\n      <Banner\n        id='error'\n        variant='urgent'\n        heading='Error'\n        action={\n          <div>\n            <Button variant='link'>Try again</Button>\n          </div>\n        }\n        messages={['Your request failed to send!', 'Please review your request and try again']}\n      />\n    </Configuration>\n  );\n};\n\nConfigurableErrorBanner.args = {\n  background: '#d91c29'\n};\n\nConfigurableErrorBanner.argTypes = {\n  background: { control: { type: 'color' } }\n};\n\n// -----------------------------------------------------------------------------\n// Form story\n// -----------------------------------------------------------------------------\n\nexport const ShownInForm: Story = () => {\n  const [fields, setField] = useReducer(fieldReducer, demoFields);\n  const [banner, setBanner] = useState<any>();\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    const errorFields = fields.filter(field => !field.validator(field.value));\n    let heading = 'Wow, great job!';\n    let variant: 'success' | 'urgent' = 'success';\n    let messages = fields.map(f => `${f.name} was typed perfectly`);\n    let bannerAction;\n\n    if (errorFields.length > 0) {\n      heading = \"I'm sorry you're having trouble\";\n      variant = 'urgent';\n      messages = errorFields.map(f => `${f.name} was not typed correctly`);\n      bannerAction = (\n        <Link href='https://community.pega.com/support' target='_blank'>\n          Visit Pega support for assistance\n        </Link>\n      );\n    }\n\n    setBanner(\n      <Banner\n        {...{\n          heading,\n          variant,\n          messages,\n          id: 'formBanner',\n          action: bannerAction,\n          onDismiss() {\n            setBanner(false);\n          }\n        }}\n      />\n    );\n  }, []);\n\n  return (\n    <Form\n      banners={banner}\n      actions={formActions}\n      onSubmit={onSubmit}\n      style={{ margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }}\n    >\n      {fields.map((field: DemoFormField) => {\n        return (\n          <Input\n            key={field.name}\n            autoComplete='off'\n            name={field.name}\n            label={field.label}\n            info={field.info}\n            value={field.value}\n            onChange={(e: InputEvent) => setField(e.target as any)}\n          />\n        );\n      })}\n    </Form>\n  );\n};\n\n// -----------------------------------------------------------------------------\n// CaseView story\n// -----------------------------------------------------------------------------\nexport const ShownInCaseView: Story = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <CaseViewDemo\n      banners={\n        hasBanner && (\n          <Banner\n            id='case-view-error'\n            heading='Waring'\n            onDismiss={() => setHasBanner(false)}\n            variant='warning'\n            messages={['Your submission is missing some important documents.']}\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInCaseView.parameters = {\n  layout: 'fullscreen'\n};\n\n// -----------------------------------------------------------------------------\n// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell: Story = () => {\n  const [hasBanner, setHasBanner] = useState([]);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            id='app-shell-banner-success'\n            heading='2 items uploaded successfully'\n            onDismiss={() => setHasBanner([])}\n            variant='success'\n            messages={['pega_data.json', 'business-earnings.xlsx']}\n            action={\n              <Link target='_blank' href='https://www.pega.com'>\n                Link Here!\n              </Link>\n            }\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}

package/lib/core/Boolean/BooleanDisplay.stories.js

@@ -5,7 +5,7 @@ export default {
     component: BooleanDisplay
 };
 export const BooleanDisplayDemo = (args) => {
-    return (_jsx(BooleanDisplay, { value: args.value, trueLabel: args.trueLabel, falseLabel: args.falseLabel }, void 0));
+    return (_jsx(BooleanDisplay, { value: args.value, trueLabel: args.trueLabel, falseLabel: args.falseLabel }));
 };
 BooleanDisplayDemo.args = {
     value: true,

package/lib/core/Boolean/BooleanDisplay.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Boolean/BooleanDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAuB,MAAM,yBAAyB,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,cAAc;CAClB,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAA+B,CAAC,IAAyB,EAAE,EAAE;IAC1F,OAAO,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,WAAI,CAC9F,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,IAAI;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACxC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { BooleanDisplay, BooleanDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Boolean',\n  component: BooleanDisplay\n} as Meta;\n\nexport const BooleanDisplayDemo: Story<BooleanDisplayProps> = (args: BooleanDisplayProps) => {\n  return (\n    <BooleanDisplay value={args.value} trueLabel={args.trueLabel} falseLabel={args.falseLabel} />\n  );\n};\n\nBooleanDisplayDemo.args = {\n  value: true,\n  trueLabel: 'Yes',\n  falseLabel: 'No'\n};\n\nBooleanDisplayDemo.argTypes = {\n  value: { control: { type: 'boolean' } },\n  trueLabel: { control: { type: 'text' } },\n  falseLabel: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"BooleanDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Boolean/BooleanDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAuB,MAAM,yBAAyB,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,cAAc;CAClB,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAA+B,CAAC,IAAyB,EAAE,EAAE;IAC1F,OAAO,CACL,KAAC,cAAc,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,GAAI,CAC9F,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,IAAI;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACxC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC1C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { BooleanDisplay, BooleanDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Boolean',\n  component: BooleanDisplay\n} as Meta;\n\nexport const BooleanDisplayDemo: Story<BooleanDisplayProps> = (args: BooleanDisplayProps) => {\n  return (\n    <BooleanDisplay value={args.value} trueLabel={args.trueLabel} falseLabel={args.falseLabel} />\n  );\n};\n\nBooleanDisplayDemo.args = {\n  value: true,\n  trueLabel: 'Yes',\n  falseLabel: 'No'\n};\n\nBooleanDisplayDemo.argTypes = {\n  value: { control: { type: 'boolean' } },\n  trueLabel: { control: { type: 'text' } },\n  falseLabel: { control: { type: 'text' } }\n};\n"]}

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,13 +1,12 @@
-/// <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;

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,EAEL,WAAW,EAKZ,MAAM,yBAAyB,CAAC;;AAMjC,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;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"}
+{"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

@@ -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,
@@ -72,7 +72,7 @@ export const ConfigurableButton = (args) => {
                     padding: args.padding
                 }
             }
-        }, children: _jsx(Button, { children: "Configurable Button" }, void 0) }, void 0));
+        }, children: _jsx(Button, { children: "Configurable Button" }) }));
 };
 ConfigurableButton.args = {
     borderWidth: '0.0625rem',

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 {\n  Button,\n  ButtonProps,\n  Configuration,\n  Flex,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Button',\n  component: Button,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} compact={args.compact}>\n      Click me\n    </Button>\n  );\n};\n\nButtonVariants.args = {\n  variant: 'primary',\n  compact: false\n};\n\nButtonVariants.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'simple', 'link', 'text'],\n    control: { type: 'select' }\n  },\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n  return (\n    <>\n      <Button variant='primary' disabled>\n        Primary disabled\n      </Button>\n      <Button variant='secondary' disabled>\n        Secondary disabled\n      </Button>\n      <Button variant='simple' disabled>\n        Simple disabled\n      </Button>\n      <Button variant='link' disabled>\n        Link disabled\n      </Button>\n      <Button variant='text' disabled>\n        Text disabled\n      </Button>\n    </>\n  );\n};\n\nexport const IconButtons: Story<ButtonProps> = ({ compact }: ButtonProps) => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Button variant='primary' label='Icon button primary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='secondary' label='Icon button secondary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='simple' label='Icon button simple' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='link' label='Icon button link' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='text' label='Icon button text' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n    </Flex>\n  );\n};\n\nIconButtons.args = {\n  compact: false\n};\n\nIconButtons.argTypes = {\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n      {args.icon ? <Icon name='plus' /> : 'Loading'}\n    </Button>\n  );\n};\n\nLoadingButtons.args = {\n  variant: 'primary',\n  icon: false\n};\n\nLoadingButtons.argTypes = {\n  variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n  icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n  return (\n    <Button variant='primary' href='https://www.pega.com' target='_blank'>\n      Go to pega.com\n    </Button>\n  );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <BareButton disabled={args.disabled} href={args.href || undefined}>\n      Click me\n    </BareButton>\n  );\n};\n\nBareButtonDemo.args = {\n  disabled: false,\n  href: ''\n};\n\nBareButtonDemo.argTypes = {\n  disabled: { control: { type: 'boolean' } },\n  href: { control: { type: 'text' } }\n};\n\ninterface ConfigurableButtonProps {\n  borderWidth?: string;\n  borderRadius?: number;\n  color?: string;\n  secondaryColor?: string;\n  padding?: string;\n}\n\nexport const ConfigurableButton: Story<ConfigurableButtonProps> = (\n  args: ConfigurableButtonProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            color: args.color,\n            'secondary-color': args.secondaryColor,\n            padding: args.padding\n          }\n        }\n      }}\n    >\n      <Button>Configurable Button</Button>\n    </Configuration>\n  );\n};\n\nConfigurableButton.args = {\n  borderWidth: '0.0625rem',\n  borderRadius: 9999,\n  color: '#076bc9',\n  secondaryColor: '#ffffff',\n  padding: '0rem 1rem'\n};\n\nConfigurableButton.argTypes = {\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  color: { control: { type: 'color' } },\n  secondaryColor: { control: { type: 'color' } },\n  padding: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,MAAM,EAEN,aAAa,EACb,IAAI,EACJ,IAAI,EACJ,YAAY,EACb,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AACxF,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,yBAE3C,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC;QAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU,GAAG,EAAE;IACzC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,uCAEzB,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,QAAQ,yCAE3B,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,QAAQ,sCAExB,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,oCAEtB,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,oCAEtB,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACnE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,qBAAqB,EAAC,IAAI,QAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAC9E,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,uBAAuB,EAAC,IAAI,QAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAClF,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,oBAAoB,EAAC,IAAI,QAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAC5E,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,QAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YACxE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,QAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YACxE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACb,IACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,KAAK;CACf,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,SAAS,EAAC,OAAO,kBACpE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,GACtC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,KAAK;CACZ,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC3E,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACvC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU,GAAG,EAAE;IACtC,OAAO,CACL,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,+BAE5D,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACtE,OAAO,CACL,KAAC,UAAU,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,yBAEpD,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACpC,CAAC;AAUF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,eAAe,EAAE,IAAI,CAAC,YAAY;oBAClC,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,iBAAiB,EAAE,IAAI,CAAC,cAAc;oBACtC,OAAO,EAAE,IAAI,CAAC,OAAO;iBACtB;aACF;SACF,YAED,KAAC,MAAM,sCAA6B,GACtB,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,IAAI;IAClB,KAAK,EAAE,SAAS;IAChB,cAAc,EAAE,SAAS;IACzB,OAAO,EAAE,WAAW;CACrB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC7C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACrC,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC9C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  ButtonProps,\n  Configuration,\n  Flex,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Button',\n  component: Button,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} compact={args.compact}>\n      Click me\n    </Button>\n  );\n};\n\nButtonVariants.args = {\n  variant: 'primary',\n  compact: false\n};\n\nButtonVariants.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'simple', 'link', 'text'],\n    control: { type: 'select' }\n  },\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons: 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,9 +1,8 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { CardFooterProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const SimpleCard: () => JSX.Element;
+export declare const SimpleCard: Story;
 export declare const FullCard: Story<CardFooterProps>;
 interface ConfigurableCardProps {
     borderRadius?: string;

package/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,EAKhB,MAAM,yBAAyB,CAAC;;AAIjC,wBAMU;AAEV,eAAO,MAAM,UAAU,mBAatB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,eAAe,CAwC3C,CAAC;AAaF,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAwBzD,CAAC"}
+{"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

@@ -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'
@@ -37,11 +37,11 @@ export const ConfigurableCard = (args) => {
                     background: args.background
                 }
             }
-        }, children: _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) }, void 0));
+        }, 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: '#ffffff'
+    background: '#71baff'
 };
 ConfigurableCard.argTypes = {
     borderRadius: { control: { type: 'text' } },

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":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Card,\n  CardHeader,\n  CardMedia,\n  CardContent,\n  CardFooter,\n  CardFooterProps,\n  Image,\n  MenuButton,\n  Text,\n  Configuration\n} from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Card.styles';\n\nexport default {\n  title: 'Core/Card',\n  component: Card,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const SimpleCard = () => {\n  return (\n    <Card as={StyledCard}>\n      <CardHeader>\n        <Text variant='h2'>Simple Card</Text>\n      </CardHeader>\n      <CardContent>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n        laboris nisi ut aliquip ex ea commodo consequat.\n      </CardContent>\n    </Card>\n  );\n};\n\nexport const FullCard: Story<CardFooterProps> = (args: CardFooterProps) => {\n  return (\n    <Card as={StyledCard}>\n      <CardMedia>\n        <Image\n          src='https://www.pega.com/sites/default/files/default-og.jpg'\n          height='100'\n          alt='Media'\n        />\n      </CardMedia>\n      <CardHeader\n        actions={\n          <MenuButton\n            portal\n            variant='simple'\n            text='Card actions'\n            icon='more'\n            iconOnly\n            menu={{\n              items: [\n                { id: 'action-1', primary: 'Card action 1' },\n                { id: 'action-2', primary: 'Card action 2' },\n                { id: 'action-3', primary: 'Card action 3' }\n              ]\n            }}\n          />\n        }\n      >\n        <Text variant='h2'>Full Card</Text>\n      </CardHeader>\n      <CardContent>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n        laboris nisi ut aliquip ex ea commodo consequat.\n      </CardContent>\n      <CardFooter justify={args.justify}>\n        <Text variant='secondary'>This is the CardFooter</Text>\n      </CardFooter>\n    </Card>\n  );\n};\n\nFullCard.args = {\n  justify: 'start'\n};\n\nFullCard.argTypes = {\n  justify: {\n    options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\ninterface ConfigurableCardProps {\n  borderRadius?: string;\n  background?: string;\n}\n\nexport const ConfigurableCard: Story<ConfigurableCardProps> = (args: ConfigurableCardProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          card: {\n            'border-radius': args.borderRadius,\n            background: args.background\n          }\n        }\n      }}\n    >\n      <Card as={StyledCard}>\n        <CardHeader>\n          <Text variant='h2'>Simple Card</Text>\n        </CardHeader>\n        <CardContent>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n          ullamco laboris nisi ut aliquip ex ea commodo consequat.\n        </CardContent>\n      </Card>\n    </Configuration>\n  );\n};\n\nConfigurableCard.args = {\n  borderRadius: '0.5rem',\n  background: '#ffffff'\n};\n\nConfigurableCard.argTypes = {\n  borderRadius: { control: { type: 'text' } },\n  background: { control: { type: 'color' } }\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.js

@@ -21,10 +21,10 @@ 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: {
@@ -47,7 +47,7 @@ export const ConfigurableCheckbox = (args) => {
                     }
                 }
             }
-        }, children: _jsx(Checkbox, { label: 'Configurable Checkbox' }, void 0) }, void 0));
+        }, children: _jsx(Checkbox, { label: 'Configurable Checkbox' }) }));
 };
 ConfigurableCheckbox.args = {
     size: '1.25rem',
@@ -55,7 +55,7 @@ ConfigurableCheckbox.args = {
     borderColor: '#939393',
     borderWidth: '0.0625rem',
     borderRadius: '0.5',
-    labelColor: '#000000',
+    labelColor: '#939393',
     labelFontWeight: '400',
     checkedBackgroundColor: '#076bc9',
     checkedBorderColor: '#076bc9'

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,EAAE,aAAa,EAAmB,MAAM,yBAAyB,CAAC;AAEnF,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,kBAAkB;QACzB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;KACrB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAChD;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC/E,OAAO,CACL,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;AAcF,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE;oBACR,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;gBACD,aAAa,EAAE;oBACb,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI,CAAC,UAAU;wBACtB,aAAa,EAAE,IAAI,CAAC,eAAe;qBACpC;oBACD,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,UAAU,EAAE;wBACV,kBAAkB,EAAE,IAAI,CAAC,sBAAsB;wBAC/C,cAAc,EAAE,IAAI,CAAC,kBAAkB;qBACxC;iBACF;aACF;SACF,YAED,KAAC,QAAQ,IAAC,KAAK,EAAC,uBAAuB,WAAG,WAC5B,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,SAAS;IACrB,eAAe,EAAE,KAAK;IACtB,sBAAsB,EAAE,SAAS;IACjC,kBAAkB,EAAE,SAAS;CAC9B,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACtD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAClD,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Checkbox, Configuration, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Checkbox',\n  component: Checkbox,\n  args: {\n    status: undefined,\n    label: 'Check me, please',\n    required: false,\n    disabled: false,\n    readOnly: false,\n    indeterminate: false\n  },\n  argTypes: {\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    label: { control: { type: 'text' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } },\n    indeterminate: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const DefaultCheckbox: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <Checkbox\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      indeterminate={args.indeterminate}\n    />\n  );\n};\n\nexport const CheckboxCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <Checkbox\n      variant='card'\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      indeterminate={args.indeterminate}\n    />\n  );\n};\n\ninterface ConfigurableCheckboxProps extends RadioCheckProps {\n  size?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: string;\n  labelColor?: string;\n  labelFontWeight?: string;\n  checkedBackgroundColor?: string;\n  checkedBorderColor?: string;\n}\n\nexport const ConfigurableCheckbox: Story<ConfigurableCheckboxProps> = (\n  args: ConfigurableCheckboxProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          checkbox: {\n            'border-radius': args.borderRadius\n          },\n          'radio-check': {\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'background-color': args.backgroundColor,\n            label: {\n              color: args.labelColor,\n              'font-weight': args.labelFontWeight\n            },\n            size: args.size,\n            ':checked': {\n              'background-color': args.checkedBackgroundColor,\n              'border-color': args.checkedBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <Checkbox label='Configurable Checkbox' />\n    </Configuration>\n  );\n};\n\nConfigurableCheckbox.args = {\n  size: '1.25rem',\n  backgroundColor: '#ffffff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: '0.5',\n  labelColor: '#000000',\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"]}
+{"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