@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.21.0

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

@@ -1 +1 @@
-{"version":3,"file":"Keyboard.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Keyboard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAY,aAAa,EAAQ,MAAM,yBAAyB,CAAC;;AAExE,wBAGU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,aAAa,CAM9C,CAAC"}
+{"version":3,"file":"Keyboard.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Keyboard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAE7D,wBAGU;AAEV,eAAO,MAAM,aAAa,EAAE,OAAO,CAAC,aAAa,CAMhD,CAAC"}

package/lib/core/Badges/Keyboard.stories.js

@@ -11,6 +11,6 @@ KeyboardBadge.args = {
     keyName: 'Command'
 };
 KeyboardBadge.argTypes = {
-    keyName: { control: { type: 'text' }, defaultValue: 'Ctrl' }
+    keyName: { control: { type: 'text' } }
 };
 //# sourceMappingURL=Keyboard.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Keyboard.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Keyboard.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAiB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACzE,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAC,SAAS,2BACX,KAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,kCACxC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE;CAC7D,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Keyboard, KeyboardProps, Text } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Keyboard',\n  component: Keyboard\n} as Meta;\n\nexport const KeyboardBadge: Story<KeyboardProps> = (args: KeyboardProps) => {\n  return (\n    <Text variant='primary'>\n      Generally <Keyboard keyName={args.keyName} /> is used as a modifier key\n    </Text>\n  );\n};\n\nKeyboardBadge.args = {\n  keyName: 'Command'\n};\n\nKeyboardBadge.argTypes = {\n  keyName: { control: { type: 'text' }, defaultValue: 'Ctrl' }\n};\n"]}
+{"version":3,"file":"Keyboard.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Keyboard.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGzD,eAAe;IACb,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,IAAmB,EAAE,EAAE;IAC3E,OAAO,CACL,MAAC,IAAI,IAAC,OAAO,EAAC,SAAS,2BACX,KAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,kCACxC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Keyboard, Text } from '@pega/cosmos-react-core';\nimport type { KeyboardProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Keyboard',\n  component: Keyboard\n} as Meta;\n\nexport const KeyboardBadge: StoryFn<KeyboardProps> = (args: KeyboardProps) => {\n  return (\n    <Text variant='primary'>\n      Generally <Keyboard keyName={args.keyName} /> is used as a modifier key\n    </Text>\n  );\n};\n\nKeyboardBadge.args = {\n  keyName: 'Command'\n};\n\nKeyboardBadge.argTypes = {\n  keyName: { control: { type: 'text' } }\n};\n"]}

package/lib/core/Badges/Selection.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 SelectableBadge: Story;
+export declare const SelectableBadge: StoryFn;
 //# sourceMappingURL=Selection.stories.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Selection.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Selection.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAU,GAAG,EAAE;IACzC,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,YAAY,2BAAwB,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Selectable } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Selectable',\n  component: Selectable\n} as Meta;\n\nexport const SelectableBadge: Story = () => {\n  return <Selectable id='selectable'>Selectable</Selectable>;\n};\n"]}
+{"version":3,"file":"Selection.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Selection.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,UAAU;CACd,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAAY,GAAG,EAAE;IAC3C,OAAO,KAAC,UAAU,IAAC,EAAE,EAAC,YAAY,2BAAwB,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Selectable } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Selectable',\n  component: Selectable\n} as Meta;\n\nexport const SelectableBadge: StoryFn = () => {\n  return <Selectable id='selectable'>Selectable</Selectable>;\n};\n"]}

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

@@ -1,11 +1,11 @@
-import { Meta, Story } from '@storybook/react';
-import { StatusProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+import type { StoryFn } from '@storybook/react';
+import type { StatusProps } 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 StatusBadge: Story<StatusProps>;
+export declare const StatusBadge: StoryFn<StatusProps>;
 interface ConfigurableStatusBadgeProps {
     foreground?: string;
     background?: string;
 }
-export declare const ConfigurableStatusBadge: Story<ConfigurableStatusBadgeProps>;
+export declare const ConfigurableStatusBadge: StoryFn<ConfigurableStatusBadgeProps>;
 //# sourceMappingURL=Status.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Status.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Status.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAyB,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE7E,wBAIU;AAEV,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,WAAW,CAE1C,CAAC;AAaF,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAqBvE,CAAC"}
+{"version":3,"file":"Status.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Status.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE3D,wBAIU;AAEV,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC,WAAW,CAE5C,CAAC;AAaF,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,OAAO,CAAC,4BAA4B,CAqBzE,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Status.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Status.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE7E,eAAe;IACb,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,oBAAoB;IAC3B,cAAc,EAAE,CAAC,yBAAyB,CAAC;CACpC,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACnE,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,OAAO,GAAU,CAAC;AAChE,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;QACzD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAOF,MAAM,CAAC,MAAM,uBAAuB,GAAwC,CAC1E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,MAAM,EAAE;wBACN,OAAO,EAAE;4BACP,UAAU,EAAE,IAAI,CAAC,UAAU;4BAC3B,UAAU,EAAE,IAAI,CAAC,UAAU;yBAC5B;qBACF;iBACF;aACF;SACF,YAED,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,qCAA8B,GACzC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Status, StatusProps } from '@pega/cosmos-react-core';\n\nexport default {\n  component: Status,\n  title: 'Core/Badges/Status',\n  excludeStories: ['ConfigurableStatusBadge']\n} as Meta;\n\nexport const StatusBadge: Story<StatusProps> = (args: StatusProps) => {\n  return <Status variant={args.variant}>{args.variant}</Status>;\n};\n\nStatusBadge.args = {\n  variant: 'success'\n};\n\nStatusBadge.argTypes = {\n  variant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  }\n};\n\ninterface ConfigurableStatusBadgeProps {\n  foreground?: string;\n  background?: string;\n}\n\nexport const ConfigurableStatusBadge: Story<ConfigurableStatusBadgeProps> = (\n  args: ConfigurableStatusBadgeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          badges: {\n            status: {\n              success: {\n                foreground: args.foreground,\n                background: args.background\n              }\n            }\n          }\n        }\n      }}\n    >\n      <Status variant='success'>Configurable Success</Status>\n    </Configuration>\n  );\n};\n\nConfigurableStatusBadge.args = {\n  foreground: '#156f35',\n  background: '#d4f7d5'\n};\n\nConfigurableStatusBadge.argTypes = {\n  foreground: { control: { type: 'color' } },\n  background: { control: { type: 'color' } }\n};\n"]}
+{"version":3,"file":"Status.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Status.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAGhE,eAAe;IACb,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,oBAAoB;IAC3B,cAAc,EAAE,CAAC,yBAAyB,CAAC;CACpC,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,IAAiB,EAAE,EAAE;IACrE,OAAO,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,OAAO,GAAU,CAAC;AAChE,CAAC,CAAC;AAEF,WAAW,CAAC,IAAI,GAAG;IACjB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,WAAW,CAAC,QAAQ,GAAG;IACrB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC;QACzD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC;AAOF,MAAM,CAAC,MAAM,uBAAuB,GAA0C,CAC5E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,MAAM,EAAE;wBACN,OAAO,EAAE;4BACP,UAAU,EAAE,IAAI,CAAC,UAAU;4BAC3B,UAAU,EAAE,IAAI,CAAC,UAAU;yBAC5B;qBACF;iBACF;aACF;SACF,YAED,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,qCAA8B,GACzC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport { Configuration, Status } from '@pega/cosmos-react-core';\nimport type { StatusProps } from '@pega/cosmos-react-core';\n\nexport default {\n  component: Status,\n  title: 'Core/Badges/Status',\n  excludeStories: ['ConfigurableStatusBadge']\n} as Meta;\n\nexport const StatusBadge: StoryFn<StatusProps> = (args: StatusProps) => {\n  return <Status variant={args.variant}>{args.variant}</Status>;\n};\n\nStatusBadge.args = {\n  variant: 'success'\n};\n\nStatusBadge.argTypes = {\n  variant: {\n    options: ['success', 'urgent', 'warn', 'pending', 'info'],\n    control: { type: 'select' }\n  }\n};\n\ninterface ConfigurableStatusBadgeProps {\n  foreground?: string;\n  background?: string;\n}\n\nexport const ConfigurableStatusBadge: StoryFn<ConfigurableStatusBadgeProps> = (\n  args: ConfigurableStatusBadgeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          badges: {\n            status: {\n              success: {\n                foreground: args.foreground,\n                background: args.background\n              }\n            }\n          }\n        }\n      }}\n    >\n      <Status variant='success'>Configurable Success</Status>\n    </Configuration>\n  );\n};\n\nConfigurableStatusBadge.args = {\n  foreground: '#156f35',\n  background: '#d4f7d5'\n};\n\nConfigurableStatusBadge.argTypes = {\n  foreground: { control: { type: 'color' } },\n  background: { control: { type: 'color' } }\n};\n"]}

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,14 +1,18 @@
-import { Meta, Story } from '@storybook/react';
-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;
-export declare const SuccessBanner: Story;
-export declare const ErrorBanner: Story;
-export declare const WarningBanner: Story;
-export declare const InfoBanner: Story;
+interface BannerDemoProps extends Pick<BannerProps, 'variant'> {
+    count?: number;
+    descriptions?: boolean;
+    actions?: boolean;
+    disableFocusControl?: boolean;
+}
+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;;AAS/C,wBAIU;AAEV,eAAO,MAAM,aAAa,EAAE,KAiB3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAczB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAa3B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkBxB,CAAC;AAEF,UAAU,4BAA4B;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CA4BvE,CAAC;AAcF,eAAO,MAAM,WAAW,EAAE,KA4DzB,CAAC;AAKF,eAAO,MAAM,eAAe,EAAE,KAsB7B,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

@@ -1,28 +1,92 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useReducer } from 'react';
-import { Banner, Button, Configuration, Form, Input, Link } from '@pega/cosmos-react-core';
+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',
     component: Banner,
     excludeStories: ['ConfigurableErrorBanner']
 };
-export const SuccessBanner = () => {
-    const [showBanner, setShowBanner] = useState(true);
-    return (_jsxs(_Fragment, { children: [!showBanner && _jsx(Button, { onClick: () => setShowBanner(true), children: "Open banner" }), showBanner && (_jsx(Banner, { id: 'success', variant: 'success', onDismiss: () => setShowBanner(false), heading: '2 items uploaded successfully', messages: ['pega_data.json', 'business-earnings.xlsx'] }))] }));
-};
-export const ErrorBanner = () => {
-    return (_jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', action: _jsx("div", { children: _jsx(Button, { variant: 'link', children: "Try again" }) }), messages: ['Your request failed to send!', 'Please review your request and try again'] }));
+export const BannerDemo = (args) => {
+    const [show, setShow] = useState(true);
+    const bannerHandleRef = useRef(null);
+    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;
+        messages.forEach(msg => {
+            if (currentCount < count) {
+                currentCount += 1;
+                if (typeof msg === 'string') {
+                    currentMessages.push(msg);
+                }
+                else if (!msg.items) {
+                    currentMessages.push({ ...msg, action });
+                }
+                else {
+                    const [items, subCount] = sliceMessages(msg.items, count - currentCount);
+                    currentCount += subCount;
+                    currentMessages.push({
+                        ...msg,
+                        action,
+                        items: items.length > 0 ? items : undefined
+                    });
+                }
+            }
+        });
+        return [currentMessages, currentCount];
+    };
+    const [messagesToRender] = sliceMessages([
+        {
+            label: `Individual ${args.variant} label.`,
+            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: args.descriptions ? `Individual ${args.variant} description.` : undefined
+        },
+        `Individual ${args.variant} label.`,
+        {
+            label: `Individual ${args.variant} label.`,
+            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.`,
+            items: [
+                {
+                    label: `Parent ${args.variant} label.`,
+                    items: [`Child ${args.variant} label.`]
+                }
+            ]
+        }
+    ], args.count ?? Infinity);
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [show ? (_jsx(Banner, { variant: args.variant, messages: messagesToRender, onDismiss: () => setShow(false), handle: bannerHandleRef })) : (_jsx(Button, { onClick: () => setShow(true), children: "Open banner" })), !args.disableFocusControl && (_jsx(Button, { onClick: () => bannerHandleRef.current?.focus(), style: { maxWidth: 'fit-content' }, children: "Focus" }))] }));
 };
-export const WarningBanner = () => {
-    return (_jsx(Banner, { id: 'warning', variant: 'warning', action: _jsx("div", { children: _jsx(Button, { variant: 'link', children: "Why this matters" }) }), messages: ['Your submission is missing some important documents.'] }));
+BannerDemo.args = {
+    variant: 'info',
+    count: 7,
+    descriptions: true,
+    actions: true
 };
-export const InfoBanner = () => {
-    const [showBanner, setShowBanner] = useState(true);
-    return (_jsxs(_Fragment, { children: [!showBanner && _jsx(Button, { onClick: () => setShowBanner(true), children: "Open banner" }), showBanner && (_jsx(Banner, { id: 'info', variant: 'info', onDismiss: () => setShowBanner(false), messages: [
-                    'US-123456 is currently being modified by Jane Smith and may not be edited simultaneously.'
-                ] }))] }));
+BannerDemo.argTypes = {
+    variant: { options: ['urgent', 'warning', 'success', 'info'], control: { type: 'select' } },
+    count: { control: { type: 'range', min: 1, max: 7 } },
+    descriptions: { control: { type: 'boolean' } },
+    actions: { control: { type: 'boolean' } }
 };
 export const ConfigurableErrorBanner = (args) => {
     return (_jsx(Configuration, { theme: {
@@ -33,7 +97,7 @@ export const ConfigurableErrorBanner = (args) => {
                     }
                 }
             }
-        }, children: _jsx(Banner, { id: 'error', variant: 'urgent', heading: 'Error', action: _jsx("div", { children: _jsx(Button, { variant: 'link', children: "Try again" }) }), messages: ['Your request failed to send!', 'Please review your request and try again'] }) }));
+        }, children: _jsx(Banner, { variant: 'urgent', messages: ['Your request failed to send!', 'Please review your request and try again'] }) }));
 };
 ConfigurableErrorBanner.args = {
     background: '#d91c29'
@@ -46,32 +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 heading = 'Wow, great job!';
-        let variant = 'success';
-        let messages = fields.map(f => `${f.name} was typed perfectly`);
-        let bannerAction;
-        if (errorFields.length > 0) {
-            heading = "I'm sorry you're having trouble";
-            variant = 'urgent';
-            messages = errorFields.map(f => `${f.name} was not typed correctly`);
-            bannerAction = (_jsx(Link, { href: 'https://community.pega.com/support', target: '_blank', children: "Visit Pega support for assistance" }));
-        }
-        setBanner(_jsx(Banner, { ...{
-                heading,
-                variant,
-                messages,
-                id: 'formBanner',
-                action: bannerAction,
-                onDismiss() {
+        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);
     }, []);
-    return (_jsx(Form, { banners: banner, actions: formActions, onSubmit: onSubmit, style: { margin: 'auto', padding: '2.5rem', maxWidth: '37.5rem' }, children: fields.map((field) => {
+    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, 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));
         }) }));
 };
@@ -80,7 +143,10 @@ export const ShownInForm = () => {
 // -----------------------------------------------------------------------------
 export const ShownInAppShell = () => {
     const [hasBanner, setHasBanner] = useState(true);
-    return (_jsx(AppShellDemo, { banners: hasBanner && (_jsx(Banner, { id: 'app-shell-banner-success', heading: '2 items uploaded successfully', onDismiss: () => setHasBanner(false), variant: 'success', messages: ['pega_data.json', 'business-earnings.xlsx'], action: _jsx(Link, { target: '_blank', href: 'https://www.pega.com', children: "Link Here!" }) })) }));
+    return (_jsx(AppShellDemo, { banners: hasBanner && (_jsx(Banner, { onDismiss: () => setHasBanner(false), variant: 'success', messages: [
+                'Uploaded pega_data.json successfully',
+                'Uploaded business-earnings.xlsx successfully'
+            ] })) }));
 };
 ShownInAppShell.parameters = {
     layout: 'fullscreen'

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';\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\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            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            id='app-shell-banner-success'\n            heading='2 items uploaded successfully'\n            onDismiss={() => setHasBanner(false)}\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 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: {