@pega/cosmos-react-demos 4.0.0-dev.9.1 → 4.0.0

package/lib/core/Badges/Tag.stories.d.ts

@@ -1,5 +1,5 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const TagBadge: Story;
+export declare const TagBadge: StoryFn;
 //# sourceMappingURL=Tag.stories.d.ts.map

package/lib/core/Badges/Tag.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAI/C,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAEtB,CAAC"}
+{"version":3,"file":"Tag.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAItD,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,OAEtB,CAAC"}

package/lib/core/Badges/Tag.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Tag.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,GAAG;CACP,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAU,GAAG,EAAE;IAClC,OAAO,KAAC,GAAG,8BAAkB,CAAC;AAChC,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Tag } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Tag',\n  component: Tag\n} as Meta;\n\nexport const TagBadge: Story = () => {\n  return <Tag>#PegaCosmos</Tag>;\n};\n"]}
+{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Tag.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAE9C,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,GAAG;CACP,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAY,GAAG,EAAE;IACpC,OAAO,KAAC,GAAG,8BAAkB,CAAC;AAChC,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Tag } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Tag',\n  component: Tag\n} as Meta;\n\nexport const TagBadge: StoryFn = () => {\n  return <Tag>#PegaCosmos</Tag>;\n};\n"]}

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

@@ -1,17 +1,18 @@
-import { Meta, Story } from '@storybook/react';
-import { BannerProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { BannerProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface BannerDemoProps extends Pick<BannerProps, 'variant'> {
     count?: number;
-    noActions?: boolean;
+    descriptions?: boolean;
+    actions?: boolean;
     disableFocusControl?: boolean;
 }
-export declare const BannerDemo: Story<BannerDemoProps>;
+export declare const BannerDemo: StoryFn<BannerDemoProps>;
 interface ConfigurableErrorBannerProps {
     background?: string;
 }
-export declare const ConfigurableErrorBanner: Story<ConfigurableErrorBannerProps>;
-export declare const ShownInForm: Story;
-export declare const ShownInAppShell: Story;
+export declare const ConfigurableErrorBanner: StoryFn<ConfigurableErrorBannerProps>;
+export declare const ShownInForm: StoryFn;
+export declare const ShownInAppShell: StoryFn;
 //# sourceMappingURL=Banner.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,WAAW,EAQZ,MAAM,yBAAyB,CAAC;;AAMjC,wBAIU;AAEV,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,eAAe,CAgG7C,CAAC;AAcF,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAqBvE,CAAC;AAcF,eAAO,MAAM,WAAW,EAAE,KAsDzB,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC"}
+{"version":3,"file":"Banner.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Banner/Banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAE,WAAW,EAAoC,MAAM,yBAAyB,CAAC;;AAQ7F,wBAIU;AAEV,UAAU,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,eAAe,CAkG/C,CAAC;AAgBF,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,OAAO,CAAC,4BAA4B,CAqBzE,CAAC;AAcF,eAAO,MAAM,WAAW,EAAE,OA4DzB,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,OAkB7B,CAAC"}

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

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback, useReducer, useRef } from 'react';
 import { Banner, Button, Configuration, Flex, Form, Input } from '@pega/cosmos-react-core';
 import { AppShellDemo } from '../AppShell/AppShell.stories';
+import { loadingTimeoutMS } from '../Progress/Progress.mocks';
 import { demoFields, fieldReducer, formActions } from './Banner.mocks';
 export default {
     title: 'Core/Banner',
@@ -11,15 +12,15 @@ export default {
 export const BannerDemo = (args) => {
     const [show, setShow] = useState(true);
     const bannerHandleRef = useRef(null);
-    const action = args.noActions
-        ? undefined
-        : {
+    const action = args.actions
+        ? {
             text: `Individual ${args.variant} action.`,
             onClick: e => {
                 e.preventDefault();
             },
             href: 'https://pega.com'
-        };
+        }
+        : undefined;
     const sliceMessages = (messages, count) => {
         const currentMessages = [];
         let currentCount = 0;
@@ -48,16 +49,20 @@ export const BannerDemo = (args) => {
     const [messagesToRender] = sliceMessages([
         {
             label: `Individual ${args.variant} label.`,
-            description: '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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+            description: args.descriptions
+                ? '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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+                : undefined
         },
         {
             label: `Individual ${args.variant} label.`,
-            description: `Individual ${args.variant} description.`
+            description: args.descriptions ? `Individual ${args.variant} description.` : undefined
         },
         `Individual ${args.variant} label.`,
         {
             label: `Individual ${args.variant} label.`,
-            description: '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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+            description: args.descriptions
+                ? '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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
+                : undefined
         },
         {
             label: `Grandparent ${args.variant} label.`,
@@ -74,12 +79,14 @@ export const BannerDemo = (args) => {
 BannerDemo.args = {
     variant: 'info',
     count: 7,
-    noActions: false
+    descriptions: true,
+    actions: true
 };
 BannerDemo.argTypes = {
     variant: { options: ['urgent', 'warning', 'success', 'info'], control: { type: 'select' } },
     count: { control: { type: 'range', min: 1, max: 7 } },
-    noActions: { control: { type: 'boolean' } }
+    descriptions: { control: { type: 'boolean' } },
+    actions: { control: { type: 'boolean' } }
 };
 export const ConfigurableErrorBanner = (args) => {
     return (_jsx(Configuration, { theme: {
@@ -103,26 +110,31 @@ ConfigurableErrorBanner.argTypes = {
 // -----------------------------------------------------------------------------
 export const ShownInForm = () => {
     const [fields, setField] = useReducer(fieldReducer, demoFields);
+    const [loading, setLoading] = useState(false);
     const [banner, setBanner] = useState();
     const bannerHandleRef = useRef(null);
     const onSubmit = useCallback((e) => {
         e.preventDefault();
-        const errorFields = fields.filter(field => !field.validator(field.value));
-        let variant = 'success';
-        let messages = fields.map(f => `${f.name} was typed perfectly`);
-        if (errorFields.length > 0) {
-            variant = 'urgent';
-            messages = errorFields.map(f => `${f.name} was not typed correctly`);
-        }
-        setBanner(_jsx(Banner, { variant: variant, messages: messages, onDismiss: () => {
-                setBanner(false);
-            }, handle: bannerHandleRef }));
+        setLoading(true);
+        setTimeout(() => {
+            const errorFields = fields.filter(field => !field.validator(field.value));
+            let variant = 'success';
+            let messages = fields.map(f => `${f.name} was typed perfectly`);
+            if (errorFields.length > 0) {
+                variant = 'urgent';
+                messages = errorFields.map(f => `${f.name} was not typed correctly`);
+            }
+            setLoading(false);
+            setBanner(_jsx(Banner, { variant: variant, messages: messages, onDismiss: () => {
+                    setBanner(false);
+                }, handle: bannerHandleRef }));
+        }, loadingTimeoutMS);
     }, []);
     useEffect(() => {
         if (banner && fields.some(field => !field.validator(field.value)) && bannerHandleRef.current)
             bannerHandleRef.current.focus();
     }, [banner]);
-    return (_jsx(Form, { banners: banner, actions: formActions, onSubmit: onSubmit, style: { margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }, children: fields.map((field) => {
+    return (_jsx(Form, { banners: banner, actions: formActions, onSubmit: onSubmit, progress: loading ? 'Submitting...' : undefined, style: { margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }, children: fields.map((field) => {
             return (_jsx(Input, { name: field.name, label: field.label, info: field.info, value: field.value, onChange: (e) => setField(e.target) }, field.name));
         }) }));
 };

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 { useEffect, useState, useCallback, FormEvent, useReducer, useRef } from 'react';\n\nimport {\n  Banner,\n  BannerProps,\n  BannerMessage,\n  BannerHandleValue,\n  Button,\n  Configuration,\n  Flex,\n  Form,\n  Input\n} from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\n\nimport { demoFields, DemoFormField, fieldReducer, formActions } from './Banner.mocks';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner,\n  excludeStories: ['ConfigurableErrorBanner']\n} as Meta;\n\ninterface BannerDemoProps extends Pick<BannerProps, 'variant'> {\n  count?: number;\n  noActions?: boolean;\n  disableFocusControl?: boolean;\n}\n\nexport const BannerDemo: Story<BannerDemoProps> = (args: BannerDemoProps) => {\n  const [show, setShow] = useState(true);\n  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const action: BannerMessage['action'] = args.noActions\n    ? undefined\n    : {\n        text: `Individual ${args.variant} action.`,\n        onClick: e => {\n          e.preventDefault();\n        },\n        href: 'https://pega.com'\n      };\n\n  const sliceMessages = (\n    messages: BannerProps['messages'],\n    count: number\n  ): [messages: BannerProps['messages'], count: number] => {\n    const currentMessages: BannerProps['messages'] = [];\n    let currentCount = 0;\n\n    messages.forEach(msg => {\n      if (currentCount < count) {\n        currentCount += 1;\n\n        if (typeof msg === 'string') {\n          currentMessages.push(msg);\n        } else if (!msg.items) {\n          currentMessages.push({ ...msg, action });\n        } else {\n          const [items, subCount] = sliceMessages(msg.items, count - currentCount);\n          currentCount += subCount;\n          currentMessages.push({\n            ...msg,\n            action,\n            items: items.length > 0 ? items : undefined\n          });\n        }\n      }\n    });\n\n    return [currentMessages, currentCount];\n  };\n\n  const [messagesToRender] = sliceMessages(\n    [\n      {\n        label: `Individual ${args.variant} label.`,\n        description:\n          '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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n      },\n      {\n        label: `Individual ${args.variant} label.`,\n        description: `Individual ${args.variant} description.`\n      },\n      `Individual ${args.variant} label.`,\n      {\n        label: `Individual ${args.variant} label.`,\n        description:\n          '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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n      },\n      {\n        label: `Grandparent ${args.variant} label.`,\n        items: [\n          {\n            label: `Parent ${args.variant} label.`,\n            items: [`Child ${args.variant} label.`]\n          }\n        ]\n      }\n    ],\n    args.count ?? Infinity\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      {show ? (\n        <Banner\n          variant={args.variant}\n          messages={messagesToRender}\n          onDismiss={() => setShow(false)}\n          handle={bannerHandleRef}\n        />\n      ) : (\n        <Button onClick={() => setShow(true)}>Open banner</Button>\n      )}\n      {!args.disableFocusControl && (\n        <Button\n          onClick={() => bannerHandleRef.current?.focus()}\n          style={{ maxWidth: 'fit-content' }}\n        >\n          Focus\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nBannerDemo.args = {\n  variant: 'info',\n  count: 7,\n  noActions: false\n};\n\nBannerDemo.argTypes = {\n  variant: { options: ['urgent', 'warning', 'success', 'info'], control: { type: 'select' } },\n  count: { control: { type: 'range', min: 1, max: 7 } },\n  noActions: { control: { type: 'boolean' } }\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        variant='urgent'\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  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    const errorFields = fields.filter(field => !field.validator(field.value));\n    let variant: 'success' | 'urgent' = 'success';\n    let messages = fields.map(f => `${f.name} was typed perfectly`);\n\n    if (errorFields.length > 0) {\n      variant = 'urgent';\n      messages = errorFields.map(f => `${f.name} was not typed correctly`);\n    }\n\n    setBanner(\n      <Banner\n        variant={variant}\n        messages={messages}\n        onDismiss={() => {\n          setBanner(false);\n        }}\n        handle={bannerHandleRef}\n      />\n    );\n  }, []);\n\n  useEffect(() => {\n    if (banner && fields.some(field => !field.validator(field.value)) && bannerHandleRef.current)\n      bannerHandleRef.current.focus();\n  }, [banner]);\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            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// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell: Story = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            onDismiss={() => setHasBanner(false)}\n            variant='success'\n            messages={[\n              'Uploaded pega_data.json successfully',\n              'Uploaded business-earnings.xlsx successfully'\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 type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useState, useCallback, useReducer, useRef } from 'react';\nimport type { FormEvent } from 'react';\n\nimport { Banner, Button, Configuration, Flex, Form, Input } from '@pega/cosmos-react-core';\nimport type { BannerProps, BannerMessage, BannerHandleValue } from '@pega/cosmos-react-core';\n\nimport { AppShellDemo } from '../AppShell/AppShell.stories';\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nimport { demoFields, fieldReducer, formActions } from './Banner.mocks';\nimport type { DemoFormField } from './Banner.mocks';\n\nexport default {\n  title: 'Core/Banner',\n  component: Banner,\n  excludeStories: ['ConfigurableErrorBanner']\n} as Meta;\n\ninterface BannerDemoProps extends Pick<BannerProps, 'variant'> {\n  count?: number;\n  descriptions?: boolean;\n  actions?: boolean;\n  disableFocusControl?: boolean;\n}\n\nexport const BannerDemo: StoryFn<BannerDemoProps> = (args: BannerDemoProps) => {\n  const [show, setShow] = useState(true);\n  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const action: BannerMessage['action'] = args.actions\n    ? {\n        text: `Individual ${args.variant} action.`,\n        onClick: e => {\n          e.preventDefault();\n        },\n        href: 'https://pega.com'\n      }\n    : undefined;\n\n  const sliceMessages = (\n    messages: BannerProps['messages'],\n    count: number\n  ): [messages: BannerProps['messages'], count: number] => {\n    const currentMessages: BannerProps['messages'] = [];\n    let currentCount = 0;\n\n    messages.forEach(msg => {\n      if (currentCount < count) {\n        currentCount += 1;\n\n        if (typeof msg === 'string') {\n          currentMessages.push(msg);\n        } else if (!msg.items) {\n          currentMessages.push({ ...msg, action });\n        } else {\n          const [items, subCount] = sliceMessages(msg.items, count - currentCount);\n          currentCount += subCount;\n          currentMessages.push({\n            ...msg,\n            action,\n            items: items.length > 0 ? items : undefined\n          });\n        }\n      }\n    });\n\n    return [currentMessages, currentCount];\n  };\n\n  const [messagesToRender] = sliceMessages(\n    [\n      {\n        label: `Individual ${args.variant} label.`,\n        description: args.descriptions\n          ? '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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n          : undefined\n      },\n      {\n        label: `Individual ${args.variant} label.`,\n        description: args.descriptions ? `Individual ${args.variant} description.` : undefined\n      },\n      `Individual ${args.variant} label.`,\n      {\n        label: `Individual ${args.variant} label.`,\n        description: args.descriptions\n          ? '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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'\n          : undefined\n      },\n      {\n        label: `Grandparent ${args.variant} label.`,\n        items: [\n          {\n            label: `Parent ${args.variant} label.`,\n            items: [`Child ${args.variant} label.`]\n          }\n        ]\n      }\n    ],\n    args.count ?? Infinity\n  );\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      {show ? (\n        <Banner\n          variant={args.variant}\n          messages={messagesToRender}\n          onDismiss={() => setShow(false)}\n          handle={bannerHandleRef}\n        />\n      ) : (\n        <Button onClick={() => setShow(true)}>Open banner</Button>\n      )}\n      {!args.disableFocusControl && (\n        <Button\n          onClick={() => bannerHandleRef.current?.focus()}\n          style={{ maxWidth: 'fit-content' }}\n        >\n          Focus\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\nBannerDemo.args = {\n  variant: 'info',\n  count: 7,\n  descriptions: true,\n  actions: true\n};\n\nBannerDemo.argTypes = {\n  variant: { options: ['urgent', 'warning', 'success', 'info'], control: { type: 'select' } },\n  count: { control: { type: 'range', min: 1, max: 7 } },\n  descriptions: { control: { type: 'boolean' } },\n  actions: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableErrorBannerProps {\n  background?: string;\n}\n\nexport const ConfigurableErrorBanner: StoryFn<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        variant='urgent'\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: StoryFn = () => {\n  const [fields, setField] = useReducer(fieldReducer, demoFields);\n  const [loading, setLoading] = useState(false);\n  const [banner, setBanner] = useState<any>();\n  const bannerHandleRef = useRef<BannerHandleValue>(null);\n\n  const onSubmit = useCallback((e: FormEvent) => {\n    e.preventDefault();\n    setLoading(true);\n    setTimeout(() => {\n      const errorFields = fields.filter(field => !field.validator(field.value));\n      let variant: 'success' | 'urgent' = 'success';\n      let messages = fields.map(f => `${f.name} was typed perfectly`);\n\n      if (errorFields.length > 0) {\n        variant = 'urgent';\n        messages = errorFields.map(f => `${f.name} was not typed correctly`);\n      }\n\n      setLoading(false);\n      setBanner(\n        <Banner\n          variant={variant}\n          messages={messages}\n          onDismiss={() => {\n            setBanner(false);\n          }}\n          handle={bannerHandleRef}\n        />\n      );\n    }, loadingTimeoutMS);\n  }, []);\n\n  useEffect(() => {\n    if (banner && fields.some(field => !field.validator(field.value)) && bannerHandleRef.current)\n      bannerHandleRef.current.focus();\n  }, [banner]);\n\n  return (\n    <Form\n      banners={banner}\n      actions={formActions}\n      onSubmit={onSubmit}\n      progress={loading ? 'Submitting...' : undefined}\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            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// AppShell story\n// -----------------------------------------------------------------------------\nexport const ShownInAppShell: StoryFn = () => {\n  const [hasBanner, setHasBanner] = useState(true);\n  return (\n    <AppShellDemo\n      banners={\n        hasBanner && (\n          <Banner\n            onDismiss={() => setHasBanner(false)}\n            variant='success'\n            messages={[\n              'Uploaded pega_data.json successfully',\n              'Uploaded business-earnings.xlsx successfully'\n            ]}\n          />\n        )\n      }\n    />\n  );\n};\n\nShownInAppShell.parameters = {\n  layout: 'fullscreen'\n};\n"]}

package/lib/core/Boolean/BooleanDisplay.stories.d.ts

@@ -1,6 +1,6 @@
-import { Meta, Story } from '@storybook/react';
-import { BooleanDisplayProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { BooleanDisplayProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const BooleanDisplayDemo: Story<BooleanDisplayProps>;
+export declare const BooleanDisplayDemo: StoryFn<BooleanDisplayProps>;
 //# sourceMappingURL=BooleanDisplay.stories.d.ts.map

package/lib/core/Boolean/BooleanDisplay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Boolean/BooleanDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAE9E,wBAGU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,mBAAmB,CAIzD,CAAC"}
+{"version":3,"file":"BooleanDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Boolean/BooleanDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAEnE,wBAGU;AAEV,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,mBAAmB,CAI3D,CAAC"}

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,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"]}
+{"version":3,"file":"BooleanDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/Boolean/BooleanDisplay.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAGzD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,cAAc;CAClB,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAAiC,CAAC,IAAyB,EAAE,EAAE;IAC5F,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 type { Meta, StoryFn } from '@storybook/react';\n\nimport { BooleanDisplay } from '@pega/cosmos-react-core';\nimport type { BooleanDisplayProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Boolean',\n  component: BooleanDisplay\n} as Meta;\n\nexport const BooleanDisplayDemo: StoryFn<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,6 +1,10 @@
-import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import { BreadcrumbsProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const BreadcrumbsDemo: Story;
-export declare const ContainedBreadcrumbs: Story;
+interface StoryArgs {
+    leafOnly?: BreadcrumbsProps['leafOnly'];
+}
+export declare const BreadcrumbsDemo: StoryFn<StoryArgs>;
+export declare const ContainedBreadcrumbs: StoryFn<StoryArgs>;
 //# 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,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAM/C,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAclC,CAAC"}
+{"version":3,"file":"Breadcrumbs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,EAAe,gBAAgB,EAAQ,MAAM,yBAAyB,CAAC;;AAI9E,wBAGU;AAEV,UAAU,SAAS;IACjB,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACzC;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,SAAS,CAU9C,CAAC;AAUF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,SAAS,CAcnD,CAAC"}

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

@@ -5,7 +5,7 @@ export default {
     title: 'Core/Breadcrumbs',
     component: Breadcrumbs
 };
-export const BreadcrumbsDemo = () => {
+export const BreadcrumbsDemo = (args) => {
     const crumbs = [
         { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },
         { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },
@@ -13,9 +13,15 @@ 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 });
+    return _jsx(Breadcrumbs, { path: crumbs, leafOnly: args.leafOnly });
 };
-export const ContainedBreadcrumbs = () => {
+BreadcrumbsDemo.args = {
+    leafOnly: false
+};
+BreadcrumbsDemo.argTypes = {
+    leafOnly: { control: { type: 'boolean' } }
+};
+export const ContainedBreadcrumbs = (args) => {
     const crumbs = [
         { id: 'Plan information', primary: 'Plan information', href: '#plan-information' },
         { id: 'View benefit', primary: 'View benefit', href: '#view-benefit' },
@@ -23,6 +29,12 @@ 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 }) }));
+    return (_jsx(Card, { as: StyledCard, children: _jsx(Breadcrumbs, { path: crumbs, leafOnly: args.leafOnly }) }));
+};
+ContainedBreadcrumbs.args = {
+    leafOnly: false
+};
+ContainedBreadcrumbs.argTypes = {
+    leafOnly: { control: { type: 'boolean' } }
 };
 //# 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,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"]}
+{"version":3,"file":"Breadcrumbs.stories.js","sourceRoot":"","sources":["../../../src/core/Breadcrumbs/Breadcrumbs.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE9E,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAMV,MAAM,CAAC,MAAM,eAAe,GAAuB,CAAC,IAAe,EAAE,EAAE;IACrE,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,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,CAAC;AAChE,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAuB,CAAC,IAAe,EAAE,EAAE;IAC1E,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,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAI,GACjD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Breadcrumbs, BreadcrumbsProps, 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\ninterface StoryArgs {\n  leafOnly?: BreadcrumbsProps['leafOnly'];\n}\n\nexport const BreadcrumbsDemo: StoryFn<StoryArgs> = (args: StoryArgs) => {\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} leafOnly={args.leafOnly} />;\n};\n\nBreadcrumbsDemo.args = {\n  leafOnly: false\n};\n\nBreadcrumbsDemo.argTypes = {\n  leafOnly: { control: { type: 'boolean' } }\n};\n\nexport const ContainedBreadcrumbs: StoryFn<StoryArgs> = (args: StoryArgs) => {\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} leafOnly={args.leafOnly} />\n    </Card>\n  );\n};\n\nContainedBreadcrumbs.args = {\n  leafOnly: false\n};\n\nContainedBreadcrumbs.argTypes = {\n  leafOnly: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -1,13 +1,12 @@
-import { Meta, Story } from '@storybook/react';
-import { ButtonProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { ButtonProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const ButtonVariants: Story<ButtonProps>;
-export declare const DisabledButtons: Story;
-export declare const IconButtons: Story<ButtonProps>;
-export declare const LoadingButtons: Story<ButtonProps>;
-export declare const ButtonAsLink: Story;
-export declare const BareButtonDemo: Story<ButtonProps>;
+export declare const ButtonVariants: StoryFn<ButtonProps>;
+export declare const DisabledButtons: StoryFn;
+export declare const IconButtons: StoryFn<ButtonProps>;
+export declare const LoadingButtons: StoryFn<ButtonProps>;
+export declare const ButtonAsLink: StoryFn;
 interface ConfigurableButtonProps {
     borderWidth?: string;
     borderRadius?: number;
@@ -15,5 +14,5 @@ interface ConfigurableButtonProps {
     secondaryColor?: string;
     padding?: string;
 }
-export declare const ConfigurableButton: Story<ConfigurableButtonProps>;
+export declare const ConfigurableButton: StoryFn<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,EAEL,WAAW,EAKZ,MAAM,yBAAyB,CAAC;;AAMjC,wBAOU;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"}
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAK3D,wBAOU;AAEV,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,WAAW,CAM/C,CAAC;AAeF,eAAO,MAAM,eAAe,EAAE,OAoB7B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,WAAW,CAoB5C,CAAC;AAUF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,WAAW,CAM/C,CAAC;AAYF,eAAO,MAAM,YAAY,EAAE,OAM1B,CAAC;AAEF,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,OAAO,CAAC,uBAAuB,CAoB/D,CAAC"}

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 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);
 export default {
     title: 'Core/Button',
@@ -51,17 +50,6 @@ LoadingButtons.argTypes = {
 export const ButtonAsLink = () => {
     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" }));
-};
-BareButtonDemo.args = {
-    disabled: false,
-    href: ''
-};
-BareButtonDemo.argTypes = {
-    disabled: { control: { type: 'boolean' } },
-    href: { control: { type: 'text' } }
-};
 export const ConfigurableButton = (args) => {
     return (_jsx(Configuration, { theme: {
             components: {

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  excludeStories: ['ConfigurableButton'],\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"]}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Button, Configuration, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';\nimport type { ButtonProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Button',\n  component: Button,\n  excludeStories: ['ConfigurableButton'],\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const ButtonVariants: StoryFn<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: StoryFn = () => {\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: StoryFn<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: StoryFn<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: StoryFn = () => {\n  return (\n    <Button variant='primary' href='https://www.pega.com' target='_blank'>\n      Go to pega.com\n    </Button>\n  );\n};\n\ninterface ConfigurableButtonProps {\n  borderWidth?: string;\n  borderRadius?: number;\n  color?: string;\n  secondaryColor?: string;\n  padding?: string;\n}\n\nexport const ConfigurableButton: StoryFn<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,12 +1,12 @@
-import { Meta, Story } from '@storybook/react';
-import { CardFooterProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { CardFooterProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const SimpleCard: Story;
-export declare const FullCard: Story<CardFooterProps>;
+export declare const SimpleCard: StoryFn;
+export declare const FullCard: StoryFn<CardFooterProps>;
 interface ConfigurableCardProps {
     borderRadius?: string;
     background?: string;
 }
-export declare const ConfigurableCard: Story<ConfigurableCardProps>;
+export declare const ConfigurableCard: StoryFn<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,EAKhB,MAAM,yBAAyB,CAAC;;AAIjC,wBAOU;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"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAatD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAI/D,wBAOU;AAEV,eAAO,MAAM,UAAU,EAAE,OAaxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,OAAO,CAAC,eAAe,CAwC7C,CAAC;AAaF,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,OAAO,CAAC,qBAAqB,CAwB3D,CAAC"}

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,EACJ,aAAa,EACd,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,cAAc,EAAE,CAAC,kBAAkB,CAAC;IACpC,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAU,GAAG,EAAE;IACpC,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,aAClB,KAAC,UAAU,cACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,4BAAmB,GAC1B,EACb,KAAC,WAAW,0PAIE,IACT,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,GACX,GACQ,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,GACD,YAGJ,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,0BAAiB,GACxB,EACb,KAAC,WAAW,0PAIE,EACd,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAC/B,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,uCAA8B,GAC5C,IACR,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;AAOF,MAAM,CAAC,MAAM,gBAAgB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC5F,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,IAAI,EAAE;oBACJ,eAAe,EAAE,IAAI,CAAC,YAAY;oBAClC,UAAU,EAAE,IAAI,CAAC,UAAU;iBAC5B;aACF;SACF,YAED,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,aAClB,KAAC,UAAU,cACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,4BAAmB,GAC1B,EACb,KAAC,WAAW,0PAIE,IACT,GACO,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,YAAY,EAAE,QAAQ;IACtB,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC3C,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  Configuration\n} from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Card.styles';\n\nexport default {\n  title: 'Core/Card',\n  component: Card,\n  excludeStories: ['ConfigurableCard'],\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"]}
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport {\n  Card,\n  CardHeader,\n  CardMedia,\n  CardContent,\n  CardFooter,\n  Image,\n  MenuButton,\n  Text,\n  Configuration\n} from '@pega/cosmos-react-core';\nimport type { CardFooterProps } from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Card.styles';\n\nexport default {\n  title: 'Core/Card',\n  component: Card,\n  excludeStories: ['ConfigurableCard'],\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const SimpleCard: StoryFn = () => {\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: StoryFn<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: StoryFn<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

@@ -1,12 +1,12 @@
-import { Meta, Story } from '@storybook/react';
-import { RadioCheckProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { RadioCheckProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface CheckboxStoryProps extends RadioCheckProps {
     showAdditionalInfo: boolean;
 }
-export declare const DefaultCheckbox: Story<CheckboxStoryProps>;
-export declare const CheckboxCard: Story<CheckboxStoryProps>;
+export declare const DefaultCheckbox: StoryFn<CheckboxStoryProps>;
+export declare const CheckboxCard: StoryFn<CheckboxStoryProps>;
 interface ConfigurableCheckboxProps extends RadioCheckProps {
     size?: string;
     backgroundColor?: string;
@@ -19,5 +19,5 @@ interface ConfigurableCheckboxProps extends RadioCheckProps {
     checkedBorderColor?: string;
     showAdditionalInfo?: boolean;
 }
-export declare const ConfigurableCheckbox: Story<ConfigurableCheckboxProps>;
+export declare const ConfigurableCheckbox: StoryFn<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,EAA2B,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEnF,wBAsBU;AAEV,UAAU,kBAAmB,SAAQ,eAAe;IAClD,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,kBAAkB,CAmBrD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAoBlD,CAAC;AAEF,UAAU,yBAA0B,SAAQ,eAAe;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAwCjE,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAE/D,wBAwBU;AAEV,UAAU,kBAAmB,SAAQ,eAAe;IAClD,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,EAAE,OAAO,CAAC,kBAAkB,CAoBvD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAC,kBAAkB,CAoBpD,CAAC;AAEF,UAAU,yBAA0B,SAAQ,eAAe;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,yBAAyB,CAwCnE,CAAC"}

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

@@ -6,6 +6,7 @@ export default {
     excludeStories: ['ConfigurableCheckbox'],
     args: {
         status: undefined,
+        info: 'You must check this',
         label: 'Check me, please',
         required: false,
         disabled: false,
@@ -15,6 +16,7 @@ export default {
     },
     argTypes: {
         status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+        info: { control: { type: 'text', label: 'Helper text' } },
         label: { control: { type: 'text' } },
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
@@ -29,7 +31,7 @@ export const DefaultCheckbox = (args) => {
                 heading: 'Additional Info',
                 content: 'Some additional info'
             }
-            : undefined, status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }));
+            : undefined, info: args.info, 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, { additionalInfo: args.showAdditionalInfo