@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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

@@ -4,6 +4,7 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface SelectStoryProps extends SelectProps {
     showAction: boolean;
+    showAdditionalInfo?: boolean;
 }
 export declare const SelectDemo: Story<SelectStoryProps>;
 interface ConfigurableSelectProps {

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

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAyB,MAAM,yBAAyB,CAAC;;AAErF,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CA6B9C,CAAC;AAwBF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAyB7D,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAyB,MAAM,yBAAyB,CAAC;;AAErF,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAqC9C,CAAC;AA0BF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAyB7D,CAAC"}

package/lib/core/Select/Select.stories.js

@@ -5,7 +5,12 @@ export default {
     component: Select
 };
 export const SelectDemo = (args) => {
-    return (_jsxs(Select, { id: 'select-demo', label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, actions: args.showAction
+    return (_jsxs(Select, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, id: 'select-demo', label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, actions: args.showAction
             ? [
                 {
                     id: 'config',
@@ -13,7 +18,7 @@ export const SelectDemo = (args) => {
                     icon: 'gear'
                 }
             ]
-            : undefined, children: [_jsx(Option, { children: "Choose an option\u2026" }, void 0), _jsx(Option, { children: "Option 1" }, void 0), _jsx(Option, { children: "Option 2" }, void 0), _jsx(Option, { children: "Option 3" }, void 0)] }, void 0));
+            : undefined, children: [_jsx(Option, { children: "Choose an option\u2026" }), _jsx(Option, { children: "Option 1" }), _jsx(Option, { children: "Option 2" }), _jsx(Option, { children: "Option 3" })] }));
 };
 SelectDemo.args = {
     showAction: false,
@@ -23,7 +28,8 @@ SelectDemo.args = {
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 SelectDemo.argTypes = {
     showAction: { control: { type: 'boolean' } },
@@ -33,7 +39,8 @@ SelectDemo.argTypes = {
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
     required: { control: { type: 'boolean' } },
     disabled: { control: { type: 'boolean' } },
-    readOnly: { control: { type: 'boolean' } }
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
 };
 export const ConfigurableSelect = (args) => {
     return (_jsx(Configuration, { theme: {
@@ -46,7 +53,7 @@ export const ConfigurableSelect = (args) => {
                     'border-radius': args.borderRadius
                 }
             }
-        }, children: _jsxs(Select, { label: 'Select input', info: 'Choose a value', children: [_jsx(Option, { children: "Choose an option\u2026" }, void 0), _jsx(Option, { children: "Option 1" }, void 0), _jsx(Option, { children: "Option 2" }, void 0), _jsx(Option, { children: "Option 3" }, void 0)] }, void 0) }, void 0));
+        }, children: _jsxs(Select, { label: 'Select input', info: 'Choose a value', children: [_jsx(Option, { children: "Choose an option\u2026" }), _jsx(Option, { children: "Option 1" }), _jsx(Option, { children: "Option 2" }), _jsx(Option, { children: "Option 3" })] }) }));
 };
 ConfigurableSelect.args = {
     height: '2rem',

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

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Select, SelectProps, Option, Configuration } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Select',\n  component: Select\n} as Meta;\n\ninterface SelectStoryProps extends SelectProps {\n  showAction: boolean;\n}\n\nexport const SelectDemo: Story<SelectStoryProps> = (args: SelectStoryProps) => {\n  return (\n    <Select\n      id='select-demo'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    >\n      <Option>Choose an option…</Option>\n      <Option>Option 1</Option>\n      <Option>Option 2</Option>\n      <Option>Option 3</Option>\n    </Select>\n  );\n};\n\nSelectDemo.args = {\n  showAction: false,\n  label: 'Select input',\n  labelHidden: false,\n  info: 'Choose a value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nSelectDemo.argTypes = {\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableSelectProps {\n  height?: string;\n  padding?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: string;\n}\n\nexport const ConfigurableSelect: Story<ConfigurableSelectProps> = (\n  args: ConfigurableSelectProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          select: {\n            height: args.height,\n            padding: args.padding,\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius\n          }\n        }\n      }}\n    >\n      <Select label='Select input' info='Choose a value'>\n        <Option>Choose an option…</Option>\n        <Option>Option 1</Option>\n        <Option>Option 2</Option>\n        <Option>Option 3</Option>\n      </Select>\n    </Configuration>\n  );\n};\n\nConfigurableSelect.args = {\n  height: '2rem',\n  padding: '0.5rem',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: '0.5'\n};\n\nConfigurableSelect.argTypes = {\n  height: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Select, SelectProps, Option, Configuration } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Select',\n  component: Select\n} as Meta;\n\ninterface SelectStoryProps extends SelectProps {\n  showAction: boolean;\n  showAdditionalInfo?: boolean;\n}\n\nexport const SelectDemo: Story<SelectStoryProps> = (args: SelectStoryProps) => {\n  return (\n    <Select\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      id='select-demo'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    >\n      <Option>Choose an option…</Option>\n      <Option>Option 1</Option>\n      <Option>Option 2</Option>\n      <Option>Option 3</Option>\n    </Select>\n  );\n};\n\nSelectDemo.args = {\n  showAction: false,\n  label: 'Select input',\n  labelHidden: false,\n  info: 'Choose a value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  showAdditionalInfo: true\n};\n\nSelectDemo.argTypes = {\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } },\n  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableSelectProps {\n  height?: string;\n  padding?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: string;\n}\n\nexport const ConfigurableSelect: Story<ConfigurableSelectProps> = (\n  args: ConfigurableSelectProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          select: {\n            height: args.height,\n            padding: args.padding,\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius\n          }\n        }\n      }}\n    >\n      <Select label='Select input' info='Choose a value'>\n        <Option>Choose an option…</Option>\n        <Option>Option 1</Option>\n        <Option>Option 2</Option>\n        <Option>Option 3</Option>\n      </Select>\n    </Configuration>\n  );\n};\n\nConfigurableSelect.args = {\n  height: '2rem',\n  padding: '0.5rem',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: '0.5'\n};\n\nConfigurableSelect.argTypes = {\n  height: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'text' } }\n};\n"]}

package/lib/core/Sentiment/Sentiment.stories.js

@@ -15,7 +15,7 @@ export const SentimentDemo = (args) => {
         neutral: args.neutralLabel,
         negative: args.negativeLabel
     };
-    return (_jsx(Sentiment, { variant: args.variant, labelHidden: args.labelHidden, icons: iconNames, labels: labels }, void 0));
+    return (_jsx(Sentiment, { variant: args.variant, labelHidden: args.labelHidden, icons: iconNames, labels: labels }));
 };
 SentimentDemo.args = {
     variant: 'positive',
@@ -52,7 +52,7 @@ export const ConfigurableSentiment = (args) => {
                     }
                 }
             }
-        }, children: [_jsx(Sentiment, { variant: 'positive', icons: { positive: 'face-happy-solid' } }, void 0), _jsx(Sentiment, { variant: 'negative', icons: { negative: 'face-sad-solid' } }, void 0), _jsx(Sentiment, { variant: 'neutral', icons: { neutral: 'face-blank-solid' } }, void 0)] }, void 0));
+        }, children: [_jsx(Sentiment, { variant: 'positive', icons: { positive: 'face-happy-solid' } }), _jsx(Sentiment, { variant: 'negative', icons: { negative: 'face-sad-solid' } }), _jsx(Sentiment, { variant: 'neutral', icons: { neutral: 'face-blank-solid' } })] }));
 };
 ConfigurableSentiment.args = {
     positiveColor: '#20aa50',

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

@@ -1 +1 @@
-{"version":3,"file":"Sentiment.stories.js","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, icons, Sentiment, SentimentProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Sentiment',\n  component: Sentiment\n} as Meta;\n\ninterface SentimentStoryProps extends SentimentProps {\n  positiveLabel: string;\n  neutralLabel: string;\n  negativeLabel: string;\n  positiveIcon: string;\n  neutralIcon: string;\n  negativeIcon: string;\n}\n\nexport const SentimentDemo: Story<SentimentStoryProps> = (args: SentimentStoryProps) => {\n  const iconNames = {\n    positive: args.positiveIcon,\n    neutral: args.neutralIcon,\n    negative: args.negativeIcon\n  };\n\n  const labels = {\n    positive: args.positiveLabel,\n    neutral: args.neutralLabel,\n    negative: args.negativeLabel\n  };\n\n  return (\n    <Sentiment\n      variant={args.variant}\n      labelHidden={args.labelHidden}\n      icons={iconNames}\n      labels={labels}\n    />\n  );\n};\n\nSentimentDemo.args = {\n  variant: 'positive',\n  labelHidden: false,\n  positiveLabel: 'Yay!',\n  positiveIcon: 'face-happy-solid',\n  neutralLabel: 'Hm…',\n  neutralIcon: 'face-blank-solid',\n  negativeLabel: 'Uh-oh!',\n  negativeIcon: 'face-sad-solid'\n};\n\nSentimentDemo.argTypes = {\n  variant: { options: ['positive', 'neutral', 'negative'], control: { type: 'select' } },\n  labelHidden: { control: { type: 'boolean' } },\n  positiveLabel: { control: { type: 'text' } },\n  positiveIcon: { options: icons, control: { type: 'select', icons: true } },\n  neutralLabel: { control: { type: 'text' } },\n  neutralIcon: { options: icons, control: { type: 'select', icons: true } },\n  negativeLabel: { control: { type: 'text' } },\n  negativeIcon: { options: icons, control: { type: 'select', icons: true } }\n};\n\ninterface ConfigurableSentimentProps {\n  positiveColor?: string;\n  negativeColor?: string;\n  neutralColor?: string;\n}\n\nexport const ConfigurableSentiment: Story<ConfigurableSentimentProps> = (\n  args: ConfigurableSentimentProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          sentiment: {\n            positive: {\n              color: args.positiveColor\n            },\n            negative: {\n              color: args.negativeColor\n            },\n            neutral: {\n              color: args.neutralColor\n            }\n          }\n        }\n      }}\n    >\n      <Sentiment variant='positive' icons={{ positive: 'face-happy-solid' }} />\n      <Sentiment variant='negative' icons={{ negative: 'face-sad-solid' }} />\n      <Sentiment variant='neutral' icons={{ neutral: 'face-blank-solid' }} />\n    </Configuration>\n  );\n};\n\nConfigurableSentiment.args = {\n  positiveColor: '#20aa50',\n  negativeColor: '#d91c29',\n  neutralColor: '#939393'\n};\n\nConfigurableSentiment.argTypes = {\n  positiveColor: { control: { type: 'color' } },\n  negativeColor: { control: { type: 'color' } },\n  neutralColor: { control: { type: 'color' } }\n};\n"]}
+{"version":3,"file":"Sentiment.stories.js","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, icons, Sentiment, SentimentProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Sentiment',\n  component: Sentiment\n} as Meta;\n\ninterface SentimentStoryProps extends SentimentProps {\n  positiveLabel: string;\n  neutralLabel: string;\n  negativeLabel: string;\n  positiveIcon: string;\n  neutralIcon: string;\n  negativeIcon: string;\n}\n\nexport const SentimentDemo: Story<SentimentStoryProps> = (args: SentimentStoryProps) => {\n  const iconNames = {\n    positive: args.positiveIcon,\n    neutral: args.neutralIcon,\n    negative: args.negativeIcon\n  };\n\n  const labels = {\n    positive: args.positiveLabel,\n    neutral: args.neutralLabel,\n    negative: args.negativeLabel\n  };\n\n  return (\n    <Sentiment\n      variant={args.variant}\n      labelHidden={args.labelHidden}\n      icons={iconNames}\n      labels={labels}\n    />\n  );\n};\n\nSentimentDemo.args = {\n  variant: 'positive',\n  labelHidden: false,\n  positiveLabel: 'Yay!',\n  positiveIcon: 'face-happy-solid',\n  neutralLabel: 'Hm…',\n  neutralIcon: 'face-blank-solid',\n  negativeLabel: 'Uh-oh!',\n  negativeIcon: 'face-sad-solid'\n};\n\nSentimentDemo.argTypes = {\n  variant: { options: ['positive', 'neutral', 'negative'], control: { type: 'select' } },\n  labelHidden: { control: { type: 'boolean' } },\n  positiveLabel: { control: { type: 'text' } },\n  positiveIcon: { options: icons, control: { type: 'select', icons: true } },\n  neutralLabel: { control: { type: 'text' } },\n  neutralIcon: { options: icons, control: { type: 'select', icons: true } },\n  negativeLabel: { control: { type: 'text' } },\n  negativeIcon: { options: icons, control: { type: 'select', icons: true } }\n};\n\ninterface ConfigurableSentimentProps {\n  positiveColor?: string;\n  negativeColor?: string;\n  neutralColor?: string;\n}\n\nexport const ConfigurableSentiment: Story<ConfigurableSentimentProps> = (\n  args: ConfigurableSentimentProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          sentiment: {\n            positive: {\n              color: args.positiveColor\n            },\n            negative: {\n              color: args.negativeColor\n            },\n            neutral: {\n              color: args.neutralColor\n            }\n          }\n        }\n      }}\n    >\n      <Sentiment variant='positive' icons={{ positive: 'face-happy-solid' }} />\n      <Sentiment variant='negative' icons={{ negative: 'face-sad-solid' }} />\n      <Sentiment variant='neutral' icons={{ neutral: 'face-blank-solid' }} />\n    </Configuration>\n  );\n};\n\nConfigurableSentiment.args = {\n  positiveColor: '#20aa50',\n  negativeColor: '#d91c29',\n  neutralColor: '#939393'\n};\n\nConfigurableSentiment.argTypes = {\n  positiveColor: { control: { type: 'color' } },\n  negativeColor: { control: { type: 'color' } },\n  neutralColor: { control: { type: 'color' } }\n};\n"]}

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

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { SkipLinksProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const SkipLinksDemo: Story<SkipLinksProps>;
+//# sourceMappingURL=SkipLinks.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinks.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SkipLinks/SkipLinks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,cAAc,EAAE,MAAM,yBAAyB,CAAC;;AAIpE,wBAGU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CA0B/C,CAAC"}

package/lib/core/SkipLinks/SkipLinks.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { SkipLinks } from '@pega/cosmos-react-core';
+import { StyledSkipLinksWrapper } from './SkipLinks.styles';
+export default {
+    title: 'Core/SkipLinks',
+    component: SkipLinks
+};
+export const SkipLinksDemo = () => {
+    const items = useMemo(() => [
+        {
+            label: 'go to main content',
+            target: {
+                ariaLabel: 'main content',
+                selector: 'main'
+            }
+        },
+        {
+            label: 'go to footer',
+            target: {
+                ariaLabel: 'footer',
+                selector: 'footer'
+            }
+        }
+    ], []);
+    return (_jsx(StyledSkipLinksWrapper, { children: _jsx(SkipLinks, { items: items }) }));
+};
+//# sourceMappingURL=SkipLinks.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinks.stories.js","sourceRoot":"","sources":["../../../src/core/SkipLinks/SkipLinks.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAkB,MAAM,yBAAyB,CAAC;AAEpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,SAAS;CACb,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAA0B,GAAG,EAAE;IACvD,MAAM,KAAK,GAA4B,OAAO,CAC5C,GAAG,EAAE,CAAC;QACJ;YACE,KAAK,EAAE,oBAAoB;YAC3B,MAAM,EAAE;gBACN,SAAS,EAAE,cAAc;gBACzB,QAAQ,EAAE,MAAM;aACjB;SACF;QACD;YACE,KAAK,EAAE,cAAc;YACrB,MAAM,EAAE;gBACN,SAAS,EAAE,QAAQ;gBACnB,QAAQ,EAAE,QAAQ;aACnB;SACF;KACF,EACD,EAAE,CACH,CAAC;IAEF,OAAO,CACL,KAAC,sBAAsB,cACrB,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,GAAI,GACJ,CAC1B,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo } from 'react';\n\nimport { SkipLinks, SkipLinksProps } from '@pega/cosmos-react-core';\n\nimport { StyledSkipLinksWrapper } from './SkipLinks.styles';\n\nexport default {\n  title: 'Core/SkipLinks',\n  component: SkipLinks\n} as Meta;\n\nexport const SkipLinksDemo: Story<SkipLinksProps> = () => {\n  const items: SkipLinksProps['items'] = useMemo(\n    () => [\n      {\n        label: 'go to main content',\n        target: {\n          ariaLabel: 'main content',\n          selector: 'main'\n        }\n      },\n      {\n        label: 'go to footer',\n        target: {\n          ariaLabel: 'footer',\n          selector: 'footer'\n        }\n      }\n    ],\n    []\n  );\n\n  return (\n    <StyledSkipLinksWrapper>\n      <SkipLinks items={items} />\n    </StyledSkipLinksWrapper>\n  );\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinks.styles.d.ts","sourceRoot":"","sources":["../../../src/core/SkipLinks/SkipLinks.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,sBAAsB,yGAiBlC,CAAC"}

package/lib/core/SkipLinks/SkipLinks.styles.js

@@ -0,0 +1,16 @@
+import styled, { css } from 'styled-components';
+import { StyledSkipLinks, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledSkipLinksWrapper = styled.div(({ theme: { base: { spacing } } }) => {
+    return css `
+      ${StyledSkipLinks} {
+        &:not(:focus-within) {
+          clip: unset;
+          height: auto;
+          padding: ${spacing};
+          width: auto;
+        }
+      }
+    `;
+});
+StyledSkipLinksWrapper.defaultProps = defaultThemeProp;
+//# sourceMappingURL=SkipLinks.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinks.styles.js","sourceRoot":"","sources":["../../../src/core/SkipLinks/SkipLinks.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE5E,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;QACN,eAAe;;;;qBAIF,OAAO;;;;KAIvB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledSkipLinks, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledSkipLinksWrapper = styled.div(\n  ({\n    theme: {\n      base: { spacing }\n    }\n  }) => {\n    return css`\n      ${StyledSkipLinks} {\n        &:not(:focus-within) {\n          clip: unset;\n          height: auto;\n          padding: ${spacing};\n          width: auto;\n        }\n      }\n    `;\n  }\n);\n\nStyledSkipLinksWrapper.defaultProps = defaultThemeProp;\n"]}

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

@@ -1,11 +1,12 @@
 import { Meta, Story } from '@storybook/react';
-import { SliderProps } from '@pega/cosmos-react-core';
+import { SliderProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface SliderStoryProps extends SliderProps {
+declare type SliderStoryProps = OmitStrict<SliderProps, 'value' | 'onChange'> & {
     min: number;
     max: number;
     step: number;
-}
+    value?: SliderProps['value'];
+};
 export declare const SliderDemo: Story<SliderStoryProps>;
 //# sourceMappingURL=Slider.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE9D,wBAGU;AAGV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAoC9C,CAAC"}
+{"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAU,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE1E,wBAGU;AAGV,aAAK,gBAAgB,GAAG,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAoC9C,CAAC"}

package/lib/core/Slider/Slider.stories.js

@@ -6,7 +6,7 @@ export default {
     component: Slider
 };
 export const SliderDemo = (args) => {
-    const [value, setValue] = useState(args.value);
+    const [value, setValue] = useState(args.value || 0);
     let ticksObject = args.ticks;
     if (args.max > args.min && !ticksObject) {
         ticksObject = {};
@@ -18,7 +18,7 @@ export const SliderDemo = (args) => {
             ticksObject[tick] = tick.toString();
         });
     }
-    return (_jsx(Slider, { orientation: args.orientation, step: args.step, min: args.min, max: args.max, ticks: ticksObject, showProgress: args.showProgress, preview: args.preview, showInput: args.showInput, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: (changeValue) => setValue(changeValue) }, void 0));
+    return (_jsx(Slider, { orientation: args.orientation, step: args.step, min: args.min, max: args.max, ticks: ticksObject, showProgress: args.showProgress, preview: args.preview, showInput: args.showInput, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: (changeValue) => setValue(changeValue) }));
 };
 SliderDemo.args = {
     orientation: 'vertical',

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.js","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AASV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,WAAW,GAAyB,IAAI,CAAC,KAAK,CAAC;IAEnD,IAAI,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE;QACvC,WAAW,GAAG,EAAE,CAAC;QACjB,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAC1E,KAAK,CAAC,QAAQ,CAAC;aACZ,IAAI,CAAC,CAAC,CAAC;aACP,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,GAAG,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;aAC/C,OAAO,CAAC,IAAI,CAAC,EAAE;YACd,WAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QACvC,CAAC,CAAC,CAAC;KACN;IAED,OAAO,CACL,KAAC,MAAM,IACL,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,WAAW,EAClB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,WAAmB,EAAE,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,WACxD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,WAAW,EAAE,UAAU;IACvB,IAAI,EAAE,CAAC;IACP,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,EAAE;IACP,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,SAAS;IAChB,YAAY,EAAE,IAAI;IAClB,OAAO,EAAE,KAAK;IACd,SAAS,EAAE,IAAI;IACf,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,WAAW,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE;IACvF,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACrC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACpC,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC9C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Slider, SliderProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Slider',\n  component: Slider\n} as Meta;\n\n// Necessary to prevent linting undefined errors since these will never be undefined in the demo\ninterface SliderStoryProps extends SliderProps {\n  min: number;\n  max: number;\n  step: number;\n}\n\nexport const SliderDemo: Story<SliderStoryProps> = (args: SliderStoryProps) => {\n  const [value, setValue] = useState(args.value);\n  let ticksObject: SliderProps['ticks'] = args.ticks;\n\n  if (args.max > args.min && !ticksObject) {\n    ticksObject = {};\n    const numTicks = Math.floor((args.max - args.min) / (args.step || 1)) + 1;\n    Array(numTicks)\n      .fill(0)\n      .map((_, index) => args.min + index * args.step)\n      .forEach(tick => {\n        ticksObject![tick] = tick.toString();\n      });\n  }\n\n  return (\n    <Slider\n      orientation={args.orientation}\n      step={args.step}\n      min={args.min}\n      max={args.max}\n      ticks={ticksObject}\n      showProgress={args.showProgress}\n      preview={args.preview}\n      showInput={args.showInput}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={(changeValue: number) => setValue(changeValue)}\n    />\n  );\n};\n\nSliderDemo.args = {\n  orientation: 'vertical',\n  step: 1,\n  min: 0,\n  max: 10,\n  value: 5,\n  ticks: undefined,\n  showProgress: true,\n  preview: false,\n  showInput: true,\n  label: 'Slider input',\n  labelHidden: false,\n  info: 'Pick a value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nSliderDemo.argTypes = {\n  orientation: { options: ['vertical', 'horizontal'], control: { type: 'inline-radio' } },\n  step: { control: { type: 'number' } },\n  min: { control: { type: 'number' } },\n  max: { control: { type: 'number' } },\n  value: { control: { type: 'number' } },\n  ticks: { control: { type: 'object' } },\n  showProgress: { control: { type: 'boolean' } },\n  preview: { control: { type: 'boolean' } },\n  showInput: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Slider.stories.js","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Slider, SliderProps, OmitStrict } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Slider',\n  component: Slider\n} as Meta;\n\n// Necessary to prevent linting undefined errors since these will never be undefined in the demo\ntype SliderStoryProps = OmitStrict<SliderProps, 'value' | 'onChange'> & {\n  min: number;\n  max: number;\n  step: number;\n  value?: SliderProps['value'];\n};\n\nexport const SliderDemo: Story<SliderStoryProps> = (args: SliderStoryProps) => {\n  const [value, setValue] = useState(args.value || 0);\n  let ticksObject: SliderProps['ticks'] = args.ticks;\n\n  if (args.max > args.min && !ticksObject) {\n    ticksObject = {};\n    const numTicks = Math.floor((args.max - args.min) / (args.step || 1)) + 1;\n    Array(numTicks)\n      .fill(0)\n      .map((_, index) => args.min + index * args.step)\n      .forEach(tick => {\n        ticksObject![tick] = tick.toString();\n      });\n  }\n\n  return (\n    <Slider\n      orientation={args.orientation}\n      step={args.step}\n      min={args.min}\n      max={args.max}\n      ticks={ticksObject}\n      showProgress={args.showProgress}\n      preview={args.preview}\n      showInput={args.showInput}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={(changeValue: number) => setValue(changeValue)}\n    />\n  );\n};\n\nSliderDemo.args = {\n  orientation: 'vertical',\n  step: 1,\n  min: 0,\n  max: 10,\n  value: 5,\n  ticks: undefined,\n  showProgress: true,\n  preview: false,\n  showInput: true,\n  label: 'Slider input',\n  labelHidden: false,\n  info: 'Pick a value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nSliderDemo.argTypes = {\n  orientation: { options: ['vertical', 'horizontal'], control: { type: 'inline-radio' } },\n  step: { control: { type: 'number' } },\n  min: { control: { type: 'number' } },\n  max: { control: { type: 'number' } },\n  value: { control: { type: 'number' } },\n  ticks: { control: { type: 'object' } },\n  showProgress: { control: { type: 'boolean' } },\n  preview: { control: { type: 'boolean' } },\n  showInput: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -2,10 +2,10 @@ import { Meta, Story } from '@storybook/react';
 import { SummaryItemProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface SummaryItemStoryProps extends SummaryItemProps {
-    showSecondary: boolean;
-    showVisual: boolean;
-    showActions: boolean;
-}
+declare type SummaryItemStoryProps = SummaryItemProps & {
+    showSecondary?: boolean;
+    showVisual?: boolean;
+    showActions?: boolean;
+};
 export declare const SummaryItemDemo: Story<SummaryItemStoryProps>;
 //# sourceMappingURL=SummaryItem.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAOL,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAMU;AAEV,UAAU,qBAAsB,SAAQ,gBAAgB;IACtD,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA+CxD,CAAC"}
+{"version":3,"file":"SummaryItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAOL,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAMU;AAEV,aAAK,qBAAqB,GAAG,gBAAgB,GAAG;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA+CxD,CAAC"}

package/lib/core/SummaryItem/SummaryItem.stories.js

@@ -10,14 +10,14 @@ export default {
 export const SummaryItemDemo = (args) => {
     return (_jsx(SummaryItem, { primary: 'This is the primary info', secondary: args.showSecondary ? (_jsx(MetaList, { items: [
                 'email@example.com',
-                _jsx(Status, { variant: 'success', children: "Verified" }, void 0),
-                _jsxs(_Fragment, { children: ["Go to", ' ', _jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "Pega.com" }, void 0)] }, void 0)
-            ] }, void 0)) : undefined, visual: args.showVisual ? (_jsx(Avatar, { size: 'l', name: 'Random Man', imageSrc: 'https://randomuser.me/api/portraits/men/41.jpg' }, void 0)) : undefined, actions: args.showActions ? (_jsx(MenuButton, { text: 'Options', variant: 'simple', icon: 'more', iconOnly: true, menu: {
+                _jsx(Status, { variant: 'success', children: "Verified" }),
+                _jsxs(_Fragment, { children: ["Go to", ' ', _jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "Pega.com" })] })
+            ] })) : undefined, visual: args.showVisual ? (_jsx(Avatar, { size: 'l', name: 'Random Man', imageSrc: 'https://randomuser.me/api/portraits/men/41.jpg' })) : undefined, actions: args.showActions ? (_jsx(MenuButton, { text: 'Options', variant: 'simple', icon: 'more', iconOnly: true, menu: {
                 items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map(name => ({
                     id: name,
                     primary: name
                 }))
-            } }, void 0)) : undefined }, void 0));
+            } })) : undefined }));
 };
 SummaryItemDemo.args = {
     showSecondary: true,

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.stories.js","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,MAAM,EACN,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAC,0BAA0B,EAClC,SAAS,EACP,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,IACP,KAAK,EAAE;gBACL,mBAAmB;gBACnB,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,iCAAkB;gBAC3C,uCACQ,GAAG,EACT,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,iCAE1C,YACN;aACJ,WACD,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,MAAM,EACJ,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAChB,KAAC,MAAM,IACL,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAC,gDAAgD,WACzD,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,OAAO,EACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,UAAU,IACT,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,IAAI,EAAE;gBACJ,KAAK,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC5E,EAAE,EAAE,IAAI;oBACR,OAAO,EAAE,IAAI;iBACd,CAAC,CAAC;aACJ,WACD,CACH,CAAC,CAAC,CAAC,SAAS,WAEf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,aAAa,EAAE,IAAI;IACnB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;CAClB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Avatar,\n  Link,\n  MenuButton,\n  MetaList,\n  Status,\n  SummaryItem,\n  SummaryItemProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/SummaryItem',\n  component: SummaryItem,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\ninterface SummaryItemStoryProps extends SummaryItemProps {\n  showSecondary: boolean;\n  showVisual: boolean;\n  showActions: boolean;\n}\n\nexport const SummaryItemDemo: Story<SummaryItemStoryProps> = (args: SummaryItemStoryProps) => {\n  return (\n    <SummaryItem\n      primary='This is the primary info'\n      secondary={\n        args.showSecondary ? (\n          <MetaList\n            items={[\n              'email@example.com',\n              <Status variant='success'>Verified</Status>,\n              <>\n                Go to{' '}\n                <Link href='https://www.pega.com' target='_blank'>\n                  Pega.com\n                </Link>\n              </>\n            ]}\n          />\n        ) : undefined\n      }\n      visual={\n        args.showVisual ? (\n          <Avatar\n            size='l'\n            name='Random Man'\n            imageSrc='https://randomuser.me/api/portraits/men/41.jpg'\n          />\n        ) : undefined\n      }\n      actions={\n        args.showActions ? (\n          <MenuButton\n            text='Options'\n            variant='simple'\n            icon='more'\n            iconOnly\n            menu={{\n              items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map(name => ({\n                id: name,\n                primary: name\n              }))\n            }}\n          />\n        ) : undefined\n      }\n    />\n  );\n};\n\nSummaryItemDemo.args = {\n  showSecondary: true,\n  showVisual: true,\n  showActions: true\n};\n\nSummaryItemDemo.argTypes = {\n  showSecondary: { control: { type: 'boolean' } },\n  showVisual: { control: { type: 'boolean' } },\n  showActions: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"SummaryItem.stories.js","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,MAAM,EACN,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,MAAM,EACN,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAC,0BAA0B,EAClC,SAAS,EACP,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,IACP,KAAK,EAAE;gBACL,mBAAmB;gBACnB,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,yBAAkB;gBAC3C,uCACQ,GAAG,EACT,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,yBAE1C,IACN;aACJ,GACD,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,MAAM,EACJ,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAChB,KAAC,MAAM,IACL,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,YAAY,EACjB,QAAQ,EAAC,gDAAgD,GACzD,CACH,CAAC,CAAC,CAAC,SAAS,EAEf,OAAO,EACL,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACjB,KAAC,UAAU,IACT,IAAI,EAAC,SAAS,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,IAAI,EAAE;gBACJ,KAAK,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;oBAC5E,EAAE,EAAE,IAAI;oBACR,OAAO,EAAE,IAAI;iBACd,CAAC,CAAC;aACJ,GACD,CACH,CAAC,CAAC,CAAC,SAAS,GAEf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,aAAa,EAAE,IAAI;IACnB,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;CAClB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC/C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Avatar,\n  Link,\n  MenuButton,\n  MetaList,\n  Status,\n  SummaryItem,\n  SummaryItemProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/SummaryItem',\n  component: SummaryItem,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\ntype SummaryItemStoryProps = SummaryItemProps & {\n  showSecondary?: boolean;\n  showVisual?: boolean;\n  showActions?: boolean;\n};\n\nexport const SummaryItemDemo: Story<SummaryItemStoryProps> = (args: SummaryItemStoryProps) => {\n  return (\n    <SummaryItem\n      primary='This is the primary info'\n      secondary={\n        args.showSecondary ? (\n          <MetaList\n            items={[\n              'email@example.com',\n              <Status variant='success'>Verified</Status>,\n              <>\n                Go to{' '}\n                <Link href='https://www.pega.com' target='_blank'>\n                  Pega.com\n                </Link>\n              </>\n            ]}\n          />\n        ) : undefined\n      }\n      visual={\n        args.showVisual ? (\n          <Avatar\n            size='l'\n            name='Random Man'\n            imageSrc='https://randomuser.me/api/portraits/men/41.jpg'\n          />\n        ) : undefined\n      }\n      actions={\n        args.showActions ? (\n          <MenuButton\n            text='Options'\n            variant='simple'\n            icon='more'\n            iconOnly\n            menu={{\n              items: ['Option Number 1', 'Option Number 2', 'Option Number 3'].map(name => ({\n                id: name,\n                primary: name\n              }))\n            }}\n          />\n        ) : undefined\n      }\n    />\n  );\n};\n\nSummaryItemDemo.args = {\n  showSecondary: true,\n  showVisual: true,\n  showActions: true\n};\n\nSummaryItemDemo.argTypes = {\n  showSecondary: { control: { type: 'boolean' } },\n  showVisual: { control: { type: 'boolean' } },\n  showActions: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/SummaryList/SummaryList.mocks.js

@@ -16,8 +16,8 @@ const getMockListItem = ({ name: { first: firstName, last: lastName }, email, pi
         },
         id: email,
         primary: fullName,
-        secondary: (_jsx("div", { children: _jsx(EmailDisplay, { value: email }, void 0) }, void 0)),
-        visual: _jsx(Avatar, { size: 'l', name: fullName, imageSrc: thumbnail }, void 0)
+        secondary: (_jsx("div", { children: _jsx(EmailDisplay, { value: email }) })),
+        visual: _jsx(Avatar, { size: 'l', name: fullName, imageSrc: thumbnail })
     };
 };
 export const useMockListData = (cb, { count } = { count: undefined }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.mocks.js","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AA+BtF,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAC/B,QAAgB,CAAC,EACjB,SAAmB,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,EACjB,EAAE;IAChC,OAAO,KAAK,CAAC,sCAAsC,KAAK,QAAQ,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAC1F,GAAG,CAAC,IAAI,EAAE,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,EAC1C,KAAK,EACL,OAAO,EAAE,EAAE,SAAS,EAAE,EAKvB,EAAgB,EAAE;IACjB,MAAM,QAAQ,GAAG,GAAG,SAAS,IAAI,QAAQ,EAAE,CAAC;IAC5C,OAAO;QACL,IAAI,EAAE;YACJ,EAAE,EAAE,KAAK;YACT,SAAS;YACT,QAAQ;YACR,KAAK;YACL,SAAS;SACV;QACD,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,QAAQ;QACjB,SAAS,EAAE,CACT,wBACE,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,WAAI,WAC1B,CACP;QACD,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,WAAI;KACjE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,EAAc,EACd,EAAE,KAAK,KAAyB,EAAE,KAAK,EAAE,SAAS,EAAE,EACQ,EAAE;IAC9D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,YAAY,CAAC,KAAK,CAAC,CAAC;YAC9C,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC;QACzC,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,qBAAqB,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC,CAAC","sourcesContent":["import { Dispatch, ReactNode, SetStateAction, useEffect, useState } from 'react';\n\nimport { Avatar, EmailDisplay, useAfterInitialEffect } from '@pega/cosmos-react-core';\n\nexport interface MockListItem {\n  id: string;\n  primary: string;\n  secondary: ReactNode;\n  visual: ReactNode;\n  data?: {\n    [key: string]: unknown;\n  };\n  [key: string]: unknown;\n}\n\nexport interface MockUserAPIResponse {\n  results: MockUser[];\n}\n\nexport interface MockUser {\n  name: {\n    title: string;\n    first: string;\n    last: string;\n  };\n  email: string;\n  picture: {\n    large: string;\n    medium: string;\n    thumbnail: string;\n  };\n}\n\nexport const getMockUsers = async (\n  limit: number = 3,\n  fields: string[] = ['name', 'email', 'picture']\n): Promise<MockUserAPIResponse> => {\n  return fetch(`https://randomuser.me/api/?results=${limit}&inc=${fields.join()}`).then(res =>\n    res.json()\n  );\n};\n\nconst getMockListItem = ({\n  name: { first: firstName, last: lastName },\n  email,\n  picture: { thumbnail }\n}: {\n  name: { first: string; last: string };\n  email: string;\n  picture: { thumbnail: string };\n}): MockListItem => {\n  const fullName = `${firstName} ${lastName}`;\n  return {\n    data: {\n      id: email,\n      firstName,\n      lastName,\n      email,\n      thumbnail\n    },\n    id: email,\n    primary: fullName,\n    secondary: (\n      <div>\n        <EmailDisplay value={email} />\n      </div>\n    ),\n    visual: <Avatar size='l' name={fullName} imageSrc={thumbnail} />\n  };\n};\n\nexport const useMockListData = (\n  cb: () => void,\n  { count }: { count?: number } = { count: undefined }\n): [MockListItem[], Dispatch<SetStateAction<MockListItem[]>>] => {\n  const [items, setItems] = useState<MockListItem[]>([]);\n\n  useEffect(() => {\n    (async () => {\n      const { results } = await getMockUsers(count);\n      setItems(results.map(getMockListItem));\n    })();\n  }, [count]);\n\n  useAfterInitialEffect(cb, [items]);\n\n  return [items, setItems];\n};\n"]}
+{"version":3,"file":"SummaryList.mocks.js","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAuC,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjF,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AA+BtF,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAC/B,QAAgB,CAAC,EACjB,SAAmB,CAAC,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,EACjB,EAAE;IAChC,OAAO,KAAK,CAAC,sCAAsC,KAAK,QAAQ,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAC1F,GAAG,CAAC,IAAI,EAAE,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,EAC1C,KAAK,EACL,OAAO,EAAE,EAAE,SAAS,EAAE,EAKvB,EAAgB,EAAE;IACjB,MAAM,QAAQ,GAAG,GAAG,SAAS,IAAI,QAAQ,EAAE,CAAC;IAC5C,OAAO;QACL,IAAI,EAAE;YACJ,EAAE,EAAE,KAAK;YACT,SAAS;YACT,QAAQ;YACR,KAAK;YACL,SAAS;SACV;QACD,EAAE,EAAE,KAAK;QACT,OAAO,EAAE,QAAQ;QACjB,SAAS,EAAE,CACT,wBACE,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,GAAI,GAC1B,CACP;QACD,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAI;KACjE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,EAAc,EACd,EAAE,KAAK,KAAyB,EAAE,KAAK,EAAE,SAAS,EAAE,EACQ,EAAE;IAC9D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAiB,EAAE,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,CAAC,KAAK,IAAI,EAAE;YACV,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,YAAY,CAAC,KAAK,CAAC,CAAC;YAC9C,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC;QACzC,CAAC,CAAC,EAAE,CAAC;IACP,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,qBAAqB,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC,CAAC","sourcesContent":["import { Dispatch, ReactNode, SetStateAction, useEffect, useState } from 'react';\n\nimport { Avatar, EmailDisplay, useAfterInitialEffect } from '@pega/cosmos-react-core';\n\nexport interface MockListItem {\n  id: string;\n  primary: string;\n  secondary: ReactNode;\n  visual: ReactNode;\n  data?: {\n    [key: string]: unknown;\n  };\n  [key: string]: unknown;\n}\n\nexport interface MockUserAPIResponse {\n  results: MockUser[];\n}\n\nexport interface MockUser {\n  name: {\n    title: string;\n    first: string;\n    last: string;\n  };\n  email: string;\n  picture: {\n    large: string;\n    medium: string;\n    thumbnail: string;\n  };\n}\n\nexport const getMockUsers = async (\n  limit: number = 3,\n  fields: string[] = ['name', 'email', 'picture']\n): Promise<MockUserAPIResponse> => {\n  return fetch(`https://randomuser.me/api/?results=${limit}&inc=${fields.join()}`).then(res =>\n    res.json()\n  );\n};\n\nconst getMockListItem = ({\n  name: { first: firstName, last: lastName },\n  email,\n  picture: { thumbnail }\n}: {\n  name: { first: string; last: string };\n  email: string;\n  picture: { thumbnail: string };\n}): MockListItem => {\n  const fullName = `${firstName} ${lastName}`;\n  return {\n    data: {\n      id: email,\n      firstName,\n      lastName,\n      email,\n      thumbnail\n    },\n    id: email,\n    primary: fullName,\n    secondary: (\n      <div>\n        <EmailDisplay value={email} />\n      </div>\n    ),\n    visual: <Avatar size='l' name={fullName} imageSrc={thumbnail} />\n  };\n};\n\nexport const useMockListData = (\n  cb: () => void,\n  { count }: { count?: number } = { count: undefined }\n): [MockListItem[], Dispatch<SetStateAction<MockListItem[]>>] => {\n  const [items, setItems] = useState<MockListItem[]>([]);\n\n  useEffect(() => {\n    (async () => {\n      const { results } = await getMockUsers(count);\n      setItems(results.map(getMockListItem));\n    })();\n  }, [count]);\n\n  useAfterInitialEffect(cb, [items]);\n\n  return [items, setItems];\n};\n"]}

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

@@ -1,8 +1,8 @@
 import { Meta, Story } from '@storybook/react';
-import { SummaryListProps } from '@pega/cosmos-react-core';
+import { OmitStrict, SummaryListProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface SummaryListStoryProps extends SummaryListProps {
+interface SummaryListStoryProps extends OmitStrict<SummaryListProps, 'items'> {
     showSecondary?: boolean;
     showVisual?: boolean;
     showActions?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,gBAAgB,EAGjB,MAAM,yBAAyB,CAAC;;AAIjC,wBA4BU;AAEV,UAAU,qBAAsB,SAAQ,gBAAgB;IACtD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CAmDxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,qBAAqB,CAqG3D,CAAC"}
+{"version":3,"file":"SummaryList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,UAAU,EAGV,gBAAgB,EAIjB,MAAM,yBAAyB,CAAC;;AAIjC,wBA4BU;AAEV,UAAU,qBAAsB,SAAQ,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC3E,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CAmDxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,qBAAqB,CAqG3D,CAAC"}

package/lib/core/SummaryList/SummaryList.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useMemo, useState } from 'react';
-import { icons, Modal, ModalManagerContext, SummaryList, ViewAll, createStringMatcher } from '@pega/cosmos-react-core';
+import { useMemo, useState } from 'react';
+import { icons, Modal, SummaryList, ViewAll, createStringMatcher, useModalManager } from '@pega/cosmos-react-core';
 import { useMockListData } from './SummaryList.mocks';
 export default {
     title: 'Core/SummaryList',
@@ -32,7 +32,7 @@ export default {
     }
 };
 export const SummaryListDemo = (args) => {
-    const { create: createModal } = useContext(ModalManagerContext);
+    const { create: createModal } = useModalManager();
     const [loading, setLoading] = useState(true);
     const [items] = useMockListData(() => {
         setLoading(false);
@@ -57,11 +57,11 @@ export const SummaryListDemo = (args) => {
                 icon: 'plus',
                 onClick() {
                     createModal(() => {
-                        return (_jsx(Modal, { heading: `Add new ${args.name}`, children: `Content for adding new ${args.name} goes here…` }, void 0));
+                        return (_jsx(Modal, { heading: `Add new ${args.name}`, children: `Content for adding new ${args.name} goes here…` }));
                     });
                 }
             }
-        ] }, void 0));
+        ] }));
 };
 export const SummaryListViewAll = (args) => {
     const SummaryListViewAllModal = ({ name, count, loading }) => {
@@ -84,9 +84,9 @@ export const SummaryListViewAll = (args) => {
                         id: 'addNew',
                         text: `Add ${name}`
                     }
-                ], searchInputProps: { onSearchChange: setSearch } }, void 0) }, void 0));
+                ], searchInputProps: { onSearchChange: setSearch } }) }));
     };
-    const { create: createModal } = useContext(ModalManagerContext);
+    const { create: createModal } = useModalManager();
     const [loading, setLoading] = useState(true);
     const [items] = useMockListData(() => {
         setLoading(false);
@@ -111,7 +111,7 @@ export const SummaryListViewAll = (args) => {
                 icon: 'plus',
                 onClick() {
                     createModal(() => {
-                        return (_jsx(Modal, { heading: `Add new ${args.name}`, children: `Content for adding new ${args.name} goes here…` }, void 0));
+                        return (_jsx(Modal, { heading: `Add new ${args.name}`, children: `Content for adding new ${args.name} goes here…` }));
                     });
                 }
             }
@@ -121,6 +121,6 @@ export const SummaryListViewAll = (args) => {
                 count: args.count,
                 loading: args.loading
             });
-        } }, void 0));
+        } }));
 };
 //# sourceMappingURL=SummaryList.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.stories.js","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useMemo, useState } from 'react';\n\nimport {\n  icons,\n  OmitStrict,\n  Modal,\n  ModalManagerContext,\n  SummaryList,\n  SummaryListProps,\n  ViewAll,\n  createStringMatcher\n} from '@pega/cosmos-react-core';\n\nimport { useMockListData } from './SummaryList.mocks';\n\nexport default {\n  title: 'Core/SummaryList',\n  component: SummaryList,\n  parameters: {\n    layout: 'centered'\n  },\n  args: {\n    name: 'People',\n    icon: 'users-solid',\n    count: 5,\n    loading: false,\n    showSecondary: true,\n    showVisual: true,\n    showActions: true,\n    noItems: false,\n    noItemsText: 'No items'\n  },\n  argTypes: {\n    name: { control: { type: 'text' } },\n    icon: { options: icons, control: { type: 'select', icons: true } },\n    count: { control: { type: 'number' } },\n    loading: { control: { type: 'boolean' } },\n    showSecondary: { control: { type: 'boolean' } },\n    showVisual: { control: { type: 'boolean' } },\n    showActions: { control: { type: 'boolean' } },\n    noItems: { control: { type: 'boolean' } },\n    noItemsText: { control: { type: 'text' } }\n  }\n} as Meta;\n\ninterface SummaryListStoryProps extends SummaryListProps {\n  showSecondary?: boolean;\n  showVisual?: boolean;\n  showActions?: boolean;\n  noItems?: boolean;\n}\n\nexport const SummaryListDemo: Story<SummaryListStoryProps> = (args: SummaryListStoryProps) => {\n  const { create: createModal } = useContext(ModalManagerContext);\n  const [loading, setLoading] = useState(true);\n\n  const [items] = useMockListData(\n    () => {\n      setLoading(false);\n    },\n    { count: args.count }\n  );\n\n  const itemsToRender = items.map(item => {\n    return {\n      ...item,\n      secondary: args.showSecondary ? item.secondary : undefined,\n      visual: args.showVisual ? item.visual : undefined,\n      actions: args.showActions\n        ? ['Action 1', 'Action 2', 'Action 3'].map(text => ({\n            text,\n            id: text\n          }))\n        : undefined\n    };\n  });\n\n  return (\n    <SummaryList\n      name={args.name}\n      icon={args.icon}\n      count={args.loading || loading ? undefined : args.count}\n      items={args.noItems ? [] : itemsToRender}\n      loading={args.loading || loading}\n      noItemsText={args.noItemsText}\n      actions={[\n        {\n          text: `Add new ${args.name}`,\n          id: `${args.name}:addNew`,\n          icon: 'plus',\n          onClick() {\n            createModal(() => {\n              return (\n                <Modal heading={`Add new ${args.name}`}>\n                  {`Content for adding new ${args.name} goes here…`}\n                </Modal>\n              );\n            });\n          }\n        }\n      ]}\n    />\n  );\n};\n\nexport const SummaryListViewAll: Story<SummaryListStoryProps> = (args: SummaryListStoryProps) => {\n  const SummaryListViewAllModal = ({\n    name,\n    count,\n    loading\n  }: OmitStrict<SummaryListProps, 'items'>) => {\n    const [search, setSearch] = useState('');\n    const [modalLoading, setModalLoading] = useState(true);\n\n    const [items] = useMockListData(\n      () => {\n        setModalLoading(false);\n      },\n      {\n        count\n      }\n    );\n\n    const itemsToRender = useMemo(() => {\n      if (search.trim()) {\n        const filterRegex = createStringMatcher(search, 'boundary');\n        return items.filter(({ primary }) => filterRegex.test(primary));\n      }\n\n      return items;\n    }, [items, search]);\n\n    return (\n      <Modal heading={args.name}>\n        <ViewAll\n          loading={loading || modalLoading}\n          items={itemsToRender}\n          actions={[\n            {\n              id: 'addNew',\n              text: `Add ${name}`\n            }\n          ]}\n          searchInputProps={{ onSearchChange: setSearch }}\n        />\n      </Modal>\n    );\n  };\n\n  const { create: createModal } = useContext(ModalManagerContext);\n  const [loading, setLoading] = useState(true);\n\n  const [items] = useMockListData(\n    () => {\n      setLoading(false);\n    },\n    { count: 3 }\n  );\n\n  const itemsToRender = items.map(item => {\n    return {\n      ...item,\n      secondary: args.showSecondary ? item.secondary : undefined,\n      visual: args.showVisual ? item.visual : undefined,\n      actions: args.showActions\n        ? ['Action 1', 'Action 2', 'Action 3'].map(text => ({\n            text,\n            id: text\n          }))\n        : undefined\n    };\n  });\n\n  return (\n    <SummaryList\n      name={args.name}\n      icon={args.icon}\n      count={args.loading || loading ? undefined : args.count}\n      items={args.noItems ? [] : itemsToRender}\n      loading={args.loading || loading}\n      noItemsText={args.noItemsText}\n      actions={[\n        {\n          text: `Add new ${args.name}`,\n          id: `${args.name}:addNew`,\n          icon: 'plus',\n          onClick() {\n            createModal(() => {\n              return (\n                <Modal heading={`Add new ${args.name}`}>\n                  {`Content for adding new ${args.name} goes here…`}\n                </Modal>\n              );\n            });\n          }\n        }\n      ]}\n      onViewAll={() => {\n        createModal(SummaryListViewAllModal, {\n          name: args.name,\n          count: args.count,\n          loading: args.loading\n        });\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"SummaryList.stories.js","sourceRoot":"","sources":["../../../src/core/SummaryList/SummaryList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport {\n  icons,\n  OmitStrict,\n  Modal,\n  SummaryList,\n  SummaryListProps,\n  ViewAll,\n  createStringMatcher,\n  useModalManager\n} from '@pega/cosmos-react-core';\n\nimport { useMockListData } from './SummaryList.mocks';\n\nexport default {\n  title: 'Core/SummaryList',\n  component: SummaryList,\n  parameters: {\n    layout: 'centered'\n  },\n  args: {\n    name: 'People',\n    icon: 'users-solid',\n    count: 5,\n    loading: false,\n    showSecondary: true,\n    showVisual: true,\n    showActions: true,\n    noItems: false,\n    noItemsText: 'No items'\n  },\n  argTypes: {\n    name: { control: { type: 'text' } },\n    icon: { options: icons, control: { type: 'select', icons: true } },\n    count: { control: { type: 'number' } },\n    loading: { control: { type: 'boolean' } },\n    showSecondary: { control: { type: 'boolean' } },\n    showVisual: { control: { type: 'boolean' } },\n    showActions: { control: { type: 'boolean' } },\n    noItems: { control: { type: 'boolean' } },\n    noItemsText: { control: { type: 'text' } }\n  }\n} as Meta;\n\ninterface SummaryListStoryProps extends OmitStrict<SummaryListProps, 'items'> {\n  showSecondary?: boolean;\n  showVisual?: boolean;\n  showActions?: boolean;\n  noItems?: boolean;\n}\n\nexport const SummaryListDemo: Story<SummaryListStoryProps> = (args: SummaryListStoryProps) => {\n  const { create: createModal } = useModalManager();\n  const [loading, setLoading] = useState(true);\n\n  const [items] = useMockListData(\n    () => {\n      setLoading(false);\n    },\n    { count: args.count }\n  );\n\n  const itemsToRender = items.map(item => {\n    return {\n      ...item,\n      secondary: args.showSecondary ? item.secondary : undefined,\n      visual: args.showVisual ? item.visual : undefined,\n      actions: args.showActions\n        ? ['Action 1', 'Action 2', 'Action 3'].map(text => ({\n            text,\n            id: text\n          }))\n        : undefined\n    };\n  });\n\n  return (\n    <SummaryList\n      name={args.name}\n      icon={args.icon}\n      count={args.loading || loading ? undefined : args.count}\n      items={args.noItems ? [] : itemsToRender}\n      loading={args.loading || loading}\n      noItemsText={args.noItemsText}\n      actions={[\n        {\n          text: `Add new ${args.name}`,\n          id: `${args.name}:addNew`,\n          icon: 'plus',\n          onClick() {\n            createModal(() => {\n              return (\n                <Modal heading={`Add new ${args.name}`}>\n                  {`Content for adding new ${args.name} goes here…`}\n                </Modal>\n              );\n            });\n          }\n        }\n      ]}\n    />\n  );\n};\n\nexport const SummaryListViewAll: Story<SummaryListStoryProps> = (args: SummaryListStoryProps) => {\n  const SummaryListViewAllModal = ({\n    name,\n    count,\n    loading\n  }: OmitStrict<SummaryListProps, 'items'>) => {\n    const [search, setSearch] = useState('');\n    const [modalLoading, setModalLoading] = useState(true);\n\n    const [items] = useMockListData(\n      () => {\n        setModalLoading(false);\n      },\n      {\n        count\n      }\n    );\n\n    const itemsToRender = useMemo(() => {\n      if (search.trim()) {\n        const filterRegex = createStringMatcher(search, 'boundary');\n        return items.filter(({ primary }) => filterRegex.test(primary));\n      }\n\n      return items;\n    }, [items, search]);\n\n    return (\n      <Modal heading={args.name}>\n        <ViewAll\n          loading={loading || modalLoading}\n          items={itemsToRender}\n          actions={[\n            {\n              id: 'addNew',\n              text: `Add ${name}`\n            }\n          ]}\n          searchInputProps={{ onSearchChange: setSearch }}\n        />\n      </Modal>\n    );\n  };\n\n  const { create: createModal } = useModalManager();\n  const [loading, setLoading] = useState(true);\n\n  const [items] = useMockListData(\n    () => {\n      setLoading(false);\n    },\n    { count: 3 }\n  );\n\n  const itemsToRender = items.map(item => {\n    return {\n      ...item,\n      secondary: args.showSecondary ? item.secondary : undefined,\n      visual: args.showVisual ? item.visual : undefined,\n      actions: args.showActions\n        ? ['Action 1', 'Action 2', 'Action 3'].map(text => ({\n            text,\n            id: text\n          }))\n        : undefined\n    };\n  });\n\n  return (\n    <SummaryList\n      name={args.name}\n      icon={args.icon}\n      count={args.loading || loading ? undefined : args.count}\n      items={args.noItems ? [] : itemsToRender}\n      loading={args.loading || loading}\n      noItemsText={args.noItemsText}\n      actions={[\n        {\n          text: `Add new ${args.name}`,\n          id: `${args.name}:addNew`,\n          icon: 'plus',\n          onClick() {\n            createModal(() => {\n              return (\n                <Modal heading={`Add new ${args.name}`}>\n                  {`Content for adding new ${args.name} goes here…`}\n                </Modal>\n              );\n            });\n          }\n        }\n      ]}\n      onViewAll={() => {\n        createModal(SummaryListViewAllModal, {\n          name: args.name,\n          count: args.count,\n          loading: args.loading\n        });\n      }}\n    />\n  );\n};\n"]}

package/lib/core/Switch/Switch.stories.js

@@ -16,11 +16,11 @@ export default {
 };
 export const SwitchDemo = (args) => {
     const [on, setOn] = useState(false);
-    return (_jsx(Switch, { id: 'switch', on: on, onChange: () => setOn(curr => !curr), label: args.label, disabled: args.disabled }, void 0));
+    return (_jsx(Switch, { id: 'switch', on: on, onChange: () => setOn(curr => !curr), label: args.label, disabled: args.disabled }));
 };
 export const SwitchInCard = (args) => {
     const [on, setOn] = useState(false);
-    return (_jsx(Card, { as: StyledCard, children: _jsx(Switch, { id: 'switch', on: on, onChange: () => setOn(curr => !curr), label: args.label, disabled: args.disabled }, void 0) }, void 0));
+    return (_jsx(Card, { as: StyledCard, children: _jsx(Switch, { id: 'switch', on: on, onChange: () => setOn(curr => !curr), label: args.label, disabled: args.disabled }) }));
 };
 export const ConfigurableSwitch = (args) => {
     const [on, setOn] = useState(false);
@@ -37,7 +37,7 @@ export const ConfigurableSwitch = (args) => {
                     }
                 }
             }
-        }, children: _jsx(Switch, { on: on, onChange: () => setOn(curr => !curr), label: 'Toggle on/off' }, void 0) }, void 0));
+        }, children: _jsx(Switch, { on: on, onChange: () => setOn(curr => !curr), label: 'Toggle on/off' }) }));
 };
 ConfigurableSwitch.args = {
     height: '1.5rem',

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.js","sourceRoot":"","sources":["../../../src/core/Switch/Switch.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Card, Configuration, Switch, SwitchProps } from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Switch.styles';\n\nexport default {\n  title: 'Core/Switch',\n  component: Switch,\n  args: {\n    label: 'Toggle on/off',\n    disabled: false\n  },\n  argTypes: {\n    label: { control: { type: 'text' } },\n    disabled: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const SwitchDemo: Story<SwitchProps> = (args: SwitchProps) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Switch\n      id='switch'\n      on={on}\n      onChange={() => setOn(curr => !curr)}\n      label={args.label}\n      disabled={args.disabled}\n    />\n  );\n};\n\nexport const SwitchInCard: Story<SwitchProps> = (args: SwitchProps) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Card as={StyledCard}>\n      <Switch\n        id='switch'\n        on={on}\n        onChange={() => setOn(curr => !curr)}\n        label={args.label}\n        disabled={args.disabled}\n      />\n    </Card>\n  );\n};\n\ninterface ConfigurableSwitchProps extends SwitchProps {\n  height?: string;\n  width?: string;\n  onColor?: string;\n  offColor?: string;\n}\n\nexport const ConfigurableSwitch: Story<ConfigurableSwitchProps> = (\n  args: ConfigurableSwitchProps\n) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          switch: {\n            height: args.height,\n            width: args.width,\n            on: {\n              color: args.onColor\n            },\n            off: {\n              color: args.offColor\n            }\n          }\n        }\n      }}\n    >\n      <Switch on={on} onChange={() => setOn(curr => !curr)} label='Toggle on/off' />\n    </Configuration>\n  );\n};\n\nConfigurableSwitch.args = {\n  height: '1.5rem',\n  width: '3rem',\n  onColor: '#076bc9',\n  offColor: '#939393'\n};\n\nConfigurableSwitch.argTypes = {\n  height: { control: { type: 'text' } },\n  width: { control: { type: 'text' } },\n  onColor: { control: { type: 'color' } },\n  offColor: { control: { type: 'color' } },\n  label: { table: { disable: true } },\n  disabled: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"Switch.stories.js","sourceRoot":"","sources":["../../../src/core/Switch/Switch.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Card, Configuration, Switch, SwitchProps } from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Switch.styles';\n\nexport default {\n  title: 'Core/Switch',\n  component: Switch,\n  args: {\n    label: 'Toggle on/off',\n    disabled: false\n  },\n  argTypes: {\n    label: { control: { type: 'text' } },\n    disabled: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const SwitchDemo: Story<SwitchProps> = (args: SwitchProps) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Switch\n      id='switch'\n      on={on}\n      onChange={() => setOn(curr => !curr)}\n      label={args.label}\n      disabled={args.disabled}\n    />\n  );\n};\n\nexport const SwitchInCard: Story<SwitchProps> = (args: SwitchProps) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Card as={StyledCard}>\n      <Switch\n        id='switch'\n        on={on}\n        onChange={() => setOn(curr => !curr)}\n        label={args.label}\n        disabled={args.disabled}\n      />\n    </Card>\n  );\n};\n\ninterface ConfigurableSwitchProps extends SwitchProps {\n  height?: string;\n  width?: string;\n  onColor?: string;\n  offColor?: string;\n}\n\nexport const ConfigurableSwitch: Story<ConfigurableSwitchProps> = (\n  args: ConfigurableSwitchProps\n) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          switch: {\n            height: args.height,\n            width: args.width,\n            on: {\n              color: args.onColor\n            },\n            off: {\n              color: args.offColor\n            }\n          }\n        }\n      }}\n    >\n      <Switch on={on} onChange={() => setOn(curr => !curr)} label='Toggle on/off' />\n    </Configuration>\n  );\n};\n\nConfigurableSwitch.args = {\n  height: '1.5rem',\n  width: '3rem',\n  onColor: '#076bc9',\n  offColor: '#939393'\n};\n\nConfigurableSwitch.argTypes = {\n  height: { control: { type: 'text' } },\n  width: { control: { type: 'text' } },\n  onColor: { control: { type: 'color' } },\n  offColor: { control: { type: 'color' } },\n  label: { table: { disable: true } },\n  disabled: { table: { disable: true } }\n};\n"]}

package/lib/core/Table/Table.mocks.js

@@ -22,7 +22,7 @@ export const tableData = [
         id: '0000',
         name: 'Mary Lou',
         dob: '06/15/1985',
-        address: (_jsxs(_Fragment, { children: [_jsx("div", { children: "100 Main St." }, void 0), _jsx("div", { children: "Springfield, USA" }, void 0)] }, void 0)),
+        address: (_jsxs(_Fragment, { children: [_jsx("div", { children: "100 Main St." }), _jsx("div", { children: "Springfield, USA" })] })),
         email: '',
         balance: '-$175'
     }