@pega/cosmos-react-demos 3.0.0-dev.9.0 → 3.0.0-rc.2

package/jsx/core/SearchInput/SearchInput.mocks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.mocks.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;QACE,OAAO,EAAE,iBAAiB;QAC1B,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,CAAC,WAAW,EAAE,qBAAqB,CAAC;QAC/C,EAAE,EAAE,WAAW;KAChB;IACD;QACE,OAAO,EAAE,kBAAkB;QAC3B,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,CAAC,aAAa,EAAE,mBAAmB,CAAC;QAC/C,EAAE,EAAE,aAAa;KAClB;IACD;QACE,OAAO,EAAE,0BAA0B;QACnC,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,CAAC,YAAY,EAAE,oBAAoB,CAAC;QAC/C,EAAE,EAAE,YAAY;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,wCAAwC,EAAE;IACxF,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,8BAA8B,EAAE;CAC7E,CAAC","sourcesContent":["export const searchResults = [\n  {\n    primary: 'Usability fixes',\n    href: '/BUG-90001',\n    secondary: ['BUG-90001', 'Updated on Thursday'],\n    id: 'BUG-90001'\n  },\n  {\n    primary: 'RTE Enhancements',\n    href: '/STORY-92120',\n    secondary: ['STORY-92120', 'Updated on Monday'],\n    id: 'STORY-92120'\n  },\n  {\n    primary: 'Cosmos Svelte Components',\n    href: '/EPIC-84623',\n    secondary: ['EPIC-84623', 'Updated on Tuesday'],\n    id: 'EPIC-84623'\n  }\n];\n\nexport const recentSearches = [\n  { id: '1', primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },\n  { id: '2', primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }\n];\n"]}

package/jsx/core/SearchInput/SearchInput.stories.d.ts

@@ -3,8 +3,5 @@ import { SearchInputProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const SearchInputDemo: Story<SearchInputProps>;
-interface ConfigurableSearchInputProps {
-    borderRadius?: number;
-}
-export declare const ConfigurableSearchInput: Story<ConfigurableSearchInputProps>;
+export declare const EnhancedSearchInputDemo: Story;
 //# sourceMappingURL=SearchInput.stories.d.ts.map

package/jsx/core/SearchInput/SearchInput.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAEvF,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC;AAUF,UAAU,4BAA4B;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAgBvE,CAAC"}
+{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAe,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAIxE,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAKnD,CAAC;AAUF,eAAO,MAAM,uBAAuB,EAAE,KAsCrC,CAAC"}

package/jsx/core/SearchInput/SearchInput.stories.jsx

@@ -1,10 +1,13 @@
-import { Configuration, SearchInput } from '@pega/cosmos-react-core';
+import { useRef, useState } from 'react';
+import { SearchInput } from '@pega/cosmos-react-core';
+import { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';
 export default {
     title: 'Core/SearchInput',
     component: SearchInput
 };
 export const SearchInputDemo = (args) => {
-    return <SearchInput {...args} placeholder={args.placeholder}/>;
+    const [value, setValue] = useState('');
+    return (<SearchInput {...args} placeholder={args.placeholder} onSearchChange={setValue} value={value}/>);
 };
 SearchInputDemo.args = {
     placeholder: 'Search…'
@@ -12,21 +15,30 @@ SearchInputDemo.args = {
 SearchInputDemo.argTypes = {
     placeholder: { control: { type: 'text' } }
 };
-export const ConfigurableSearchInput = (args) => {
-    return (<Configuration theme={{
-            components: {
-                'search-input': {
-                    'border-radius': args.borderRadius
-                }
+export const EnhancedSearchInputDemo = () => {
+    const [value, setValue] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const timeout = useRef(null);
+    const onValueChange = (val) => {
+        setValue(val);
+        setLoading(true);
+        setSearchResults([]);
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = window.setTimeout(() => {
+            if (val) {
+                setSearchResults(mockSearchResults.filter(res => {
+                    return res.primary.toLowerCase().includes(val.toLowerCase());
+                }));
             }
-        }}>
-      <SearchInput />
-    </Configuration>);
-};
-ConfigurableSearchInput.args = {
-    borderRadius: 9999
-};
-ConfigurableSearchInput.argTypes = {
-    borderRadius: { control: { type: 'number' } }
+            setLoading(false);
+        }, 1000);
+    };
+    return (<SearchInput filters={['Story', 'Very long filter']} loading={loading} searchResults={searchResults?.map(result => ({
+            ...result,
+            onClick: (id, e) => e.preventDefault()
+        }))} value={value} onSearchChange={onValueChange} recentSearches={recentSearches} advancedSearchLink={{ href: '/?path=/story/work-searchresults--search-results-demo' }}/>);
 };
 //# sourceMappingURL=SearchInput.stories.jsx.map

package/jsx/core/SearchInput/SearchInput.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.stories.jsx","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAEvF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,OAAO,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAG,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAMF,MAAM,CAAC,MAAM,uBAAuB,GAAwC,CAC1E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,cAAc,EAAE;oBACd,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,WAAW,CAAC,AAAD,EACd;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/SearchInput',\n  component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n  return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n  placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n  placeholder: { control: { type: 'text' } }\n};\n\ninterface ConfigurableSearchInputProps {\n  borderRadius?: number;\n}\n\nexport const ConfigurableSearchInput: Story<ConfigurableSearchInputProps> = (\n  args: ConfigurableSearchInputProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'search-input': {\n            'border-radius': args.borderRadius\n          }\n        }\n      }}\n    >\n      <SearchInput />\n    </Configuration>\n  );\n};\n\nConfigurableSearchInput.args = {\n  borderRadius: 9999\n};\n\nConfigurableSearchInput.argTypes = {\n  borderRadius: { control: { type: 'number' } }\n};\n"]}
+{"version":3,"file":"SearchInput.stories.jsx","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CACjG,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAU,GAAG,EAAE;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC1F,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,gBAAgB,CAAC,EAAE,CAAC,CAAC;QACrB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC/B;QACD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,GAAG,EAAE;gBACP,gBAAgB,CACd,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;oBAC7B,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;gBAC/D,CAAC,CAAC,CACH,CAAC;aACH;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC,CACvC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,aAAa,CAAC,CAAC,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC3C,GAAG,MAAM;YACT,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;SACvC,CAAC,CAAC,CAAC,CACJ,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,cAAc,CAAC,CAAC,aAAa,CAAC,CAC9B,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,kBAAkB,CAAC,CAAC,EAAE,IAAI,EAAE,uDAAuD,EAAE,CAAC,EACtF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nimport { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';\n\nexport default {\n  title: 'Core/SearchInput',\n  component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n  const [value, setValue] = useState('');\n  return (\n    <SearchInput {...args} placeholder={args.placeholder} onSearchChange={setValue} value={value} />\n  );\n};\n\nSearchInputDemo.args = {\n  placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n  placeholder: { control: { type: 'text' } }\n};\n\nexport const EnhancedSearchInputDemo: Story = () => {\n  const [value, setValue] = useState('');\n  const [searchResults, setSearchResults] = useState<SearchInputProps['searchResults']>([]);\n  const [loading, setLoading] = useState(false);\n  const timeout = useRef<number | null>(null);\n  const onValueChange = (val: string) => {\n    setValue(val);\n    setLoading(true);\n    setSearchResults([]);\n    if (timeout.current) {\n      clearTimeout(timeout.current);\n    }\n    timeout.current = window.setTimeout(() => {\n      if (val) {\n        setSearchResults(\n          mockSearchResults.filter(res => {\n            return res.primary.toLowerCase().includes(val.toLowerCase());\n          })\n        );\n      }\n      setLoading(false);\n    }, 1000);\n  };\n\n  return (\n    <SearchInput\n      filters={['Story', 'Very long filter']}\n      loading={loading}\n      searchResults={searchResults?.map(result => ({\n        ...result,\n        onClick: (id, e) => e.preventDefault()\n      }))}\n      value={value}\n      onSearchChange={onValueChange}\n      recentSearches={recentSearches}\n      advancedSearchLink={{ href: '/?path=/story/work-searchresults--search-results-demo' }}\n    />\n  );\n};\n"]}

package/jsx/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/jsx/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/jsx/core/Select/Select.stories.jsx

@@ -4,7 +4,12 @@ export default {
     component: Select
 };
 export const SelectDemo = (args) => {
-    return (<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 (<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',
@@ -27,7 +32,8 @@ SelectDemo.args = {
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 SelectDemo.argTypes = {
     showAction: { control: { type: 'boolean' } },
@@ -37,7 +43,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 (<Configuration theme={{

package/jsx/core/Select/Select.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.jsx","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.jsx","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/jsx/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/jsx/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/jsx/core/SkipLinks/SkipLinks.stories.jsx

@@ -0,0 +1,29 @@
+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 (<StyledSkipLinksWrapper>
+      <SkipLinks items={items}/>
+    </StyledSkipLinksWrapper>);
+};
+//# sourceMappingURL=SkipLinks.stories.jsx.map

package/jsx/core/SkipLinks/SkipLinks.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinks.stories.jsx","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,CAAC,sBAAsB,CACrB;MAAA,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAC1B;IAAA,EAAE,sBAAsB,CAAC,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/jsx/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/jsx/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/jsx/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/jsx/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/jsx/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,EAEL,UAAU,EAIV,gBAAgB,EAGjB,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"}
+{"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/jsx/core/SummaryList/SummaryList.stories.jsx

@@ -1,5 +1,5 @@
-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',
@@ -31,7 +31,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);
@@ -89,7 +89,7 @@ export const SummaryListViewAll = (args) => {
             ]} searchInputProps={{ onSearchChange: setSearch }}/>
       </Modal>);
     };
-    const { create: createModal } = useContext(ModalManagerContext);
+    const { create: createModal } = useModalManager();
     const [loading, setLoading] = useState(true);
     const [items] = useMockListData(() => {
         setLoading(false);

package/jsx/core/SummaryList/SummaryList.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryList.stories.jsx","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 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 } = 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.jsx","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/jsx/core/Tabs/Tabs.stories.jsx

@@ -28,7 +28,7 @@ export const TabsDemo = (args) => {
       </Flex>
       <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>
         {tabs.map(tab => (<TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>
-            <div>{tab.name} content</div>
+            <div>{tab.name}</div>
           </TabPanel>))}
       </Flex>
     </Flex>);

package/jsx/core/Tabs/Tabs.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Configuration, Flex, TabPanel, Tabs, TabsProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Tabs',\n  component: Tabs,\n  args: {\n    type: 'horizontal'\n  },\n  argTypes: {\n    type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n  }\n} as Meta;\n\ninterface TabDemoProps {\n  type: 'horizontal' | 'vertical';\n}\n\nexport const TabsDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1' },\n    { name: 'Tab 2', id: '2' },\n    { name: 'Tab 3', id: '3' },\n    { name: 'Tab 4', id: '4', disabled: true },\n    { name: 'Tab 5', id: '5' }\n  ];\n\n  return (\n    <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const TabsCountDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1', count: 5 },\n    { name: 'Tab 2', id: '2', count: 14 },\n    { name: 'Tab 3', id: '3', count: 0 },\n    { name: 'Tab 4', id: '4', count: 56, disabled: true },\n    { name: 'Tab 5', id: '5', count: 150 }\n  ];\n\n  return (\n    <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n};\n\ninterface ConfigurableTabsProps {\n  foreground?: string;\n  type?: TabsProps['type'];\n}\n\nexport const ConfigurableTabs: Story<ConfigurableTabsProps> = (args: ConfigurableTabsProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1' },\n    { name: 'Tab 2', id: '2' },\n    { name: 'Tab 3', id: '3' },\n    { name: 'Tab 4', id: '4', disabled: true },\n    { name: 'Tab 5', id: '5' }\n  ];\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          tabs: {\n            base: {\n              foreground: args.foreground\n            }\n          }\n        }\n      }}\n    >\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableTabs.args = {\n  foreground: '#076bc9'\n};\n\nConfigurableTabs.argTypes = {\n  foreground: { control: { type: 'color' } },\n  type: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"Tabs.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,IAAI,EAAE,YAAY;KACnB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,EAAE,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC3E;CACM,CAAC;AAMV,MAAM,CAAC,MAAM,QAAQ,GAAwB,CAAC,IAAkB,EAAE,EAAE;IAClE,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC1C,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;KAC3B,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAC5E;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACtB;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,EAC3F;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAClD;QAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAC7D;YAAA,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,CACtB;UAAA,EAAE,QAAQ,CAAC,CACZ,CAAC,CACJ;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAwB,CAAC,IAAkB,EAAE,EAAE;IACvE,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;QACrC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,EAAE;QACpC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;QACrD,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE;KACvC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAC5E;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACtB;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,EAC3F;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAClD;QAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAC7D;YAAA,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAE,QAAO,EAAE,GAAG,CAC9B;UAAA,EAAE,QAAQ,CAAC,CACZ,CAAC,CACJ;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,gBAAgB,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC5F,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAEhD,MAAM,eAAe,GAAG,CAAC,EAAU,EAAE,EAAE;QACrC,WAAW,CAAC,EAAE,CAAC,CAAC;IAClB,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG;QACX,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;QAC1B,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE;QAC1C,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE;KAC3B,CAAC;IAEF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,IAAI,EAAE;oBACJ,IAAI,EAAE;wBACJ,UAAU,EAAE,IAAI,CAAC,UAAU;qBAC5B;iBACF;aACF;SACF,CAAC,CAEF;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACtB;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,EAC1E;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CAClD;QAAA,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAC7D;YAAA,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,IAAI,CAAE,QAAO,EAAE,GAAG,CAC9B;UAAA,EAAE,QAAQ,CAAC,CACZ,CAAC,CACJ;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,UAAU,EAAE,SAAS;CACtB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Configuration, Flex, TabPanel, Tabs, TabsProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Tabs',\n  component: Tabs,\n  args: {\n    type: 'horizontal'\n  },\n  argTypes: {\n    type: { options: ['horizontal', 'vertical'], control: { type: 'select' } }\n  }\n} as Meta;\n\ninterface TabDemoProps {\n  type: 'horizontal' | 'vertical';\n}\n\nexport const TabsDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1' },\n    { name: 'Tab 2', id: '2' },\n    { name: 'Tab 3', id: '3' },\n    { name: 'Tab 4', id: '4', disabled: true },\n    { name: 'Tab 5', id: '5' }\n  ];\n\n  return (\n    <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name}</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n};\n\nexport const TabsCountDemo: Story<TabDemoProps> = (args: TabDemoProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1', count: 5 },\n    { name: 'Tab 2', id: '2', count: 14 },\n    { name: 'Tab 3', id: '3', count: 0 },\n    { name: 'Tab 4', id: '4', count: 56, disabled: true },\n    { name: 'Tab 5', id: '5', count: 150 }\n  ];\n\n  return (\n    <Flex container={{ direction: args.type === 'horizontal' ? 'column' : 'row' }}>\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} type={args.type} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Flex>\n  );\n};\n\ninterface ConfigurableTabsProps {\n  foreground?: string;\n  type?: TabsProps['type'];\n}\n\nexport const ConfigurableTabs: Story<ConfigurableTabsProps> = (args: ConfigurableTabsProps) => {\n  const [panelShown, changePanel] = useState('1');\n\n  const handleTabChange = (id: string) => {\n    changePanel(id);\n  };\n\n  const tabs = [\n    { name: 'Tab 1', id: '1' },\n    { name: 'Tab 2', id: '2' },\n    { name: 'Tab 3', id: '3' },\n    { name: 'Tab 4', id: '4', disabled: true },\n    { name: 'Tab 5', id: '5' }\n  ];\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          tabs: {\n            base: {\n              foreground: args.foreground\n            }\n          }\n        }\n      }}\n    >\n      <Flex item={{ grow: 1 }}>\n        <Tabs tabs={tabs} onTabClick={handleTabChange} currentTabId={panelShown} />\n      </Flex>\n      <Flex container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n        {tabs.map(tab => (\n          <TabPanel tabId={tab.id} currentTabId={panelShown} key={tab.id}>\n            <div>{tab.name} content</div>\n          </TabPanel>\n        ))}\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableTabs.args = {\n  foreground: '#076bc9'\n};\n\nConfigurableTabs.argTypes = {\n  foreground: { control: { type: 'color' } },\n  type: { table: { disable: true } }\n};\n"]}

package/jsx/core/TextArea/TextArea.stories.d.ts

@@ -2,7 +2,10 @@ import { Meta, Story } from '@storybook/react';
 import { TextAreaProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const TextAreaDemo: Story<TextAreaProps>;
+interface TextAreaStoryProps extends TextAreaProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const TextAreaDemo: Story<TextAreaStoryProps>;
 interface ConfigurableTextAreaProps {
     minHeight?: string;
     padding?: string;

package/jsx/core/TextArea/TextArea.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA2B,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAEjF,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,aAAa,CAwB7C,CAAC;AAoCF,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CA2BjE,CAAC"}
+{"version":3,"file":"TextArea.stories.d.ts","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA2B,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAEjF,wBAGU;AAEV,UAAU,kBAAmB,SAAQ,aAAa;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAgClD,CAAC;AAsCF,UAAU,yBAAyB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CA2BjE,CAAC"}

package/jsx/core/TextArea/TextArea.stories.jsx

@@ -6,7 +6,12 @@ export default {
 };
 export const TextAreaDemo = (args) => {
     const [value, setValue] = useState('');
-    return (<TextArea id='text-area' value={value} onChange={(e) => setValue(e.target.value)} minLength={args.minLength} maxLength={args.maxLength} displayCharCount={args.displayCharCount} hardStop={args.hardStop} resizable={args.resizable} autoResize={args.autoResize} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+    return (<TextArea additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined} id='text-area' value={value} onChange={(e) => setValue(e.target.value)} minLength={args.minLength} maxLength={args.maxLength} displayCharCount={args.displayCharCount} hardStop={args.hardStop} resizable={args.resizable} autoResize={args.autoResize} label={args.label} labelHidden={args.labelHidden} info={args.info} placeholder={args.placeholder} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
 };
 TextAreaDemo.args = {
     minLength: 0,
@@ -22,7 +27,8 @@ TextAreaDemo.args = {
     status: undefined,
     required: false,
     disabled: false,
-    readOnly: false
+    readOnly: false,
+    showAdditionalInfo: true
 };
 TextAreaDemo.argTypes = {
     minLength: { control: { type: 'number' } },
@@ -38,7 +44,8 @@ TextAreaDemo.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 ConfigurableTextArea = (args) => {
     const [value, setValue] = useState('');

package/jsx/core/TextArea/TextArea.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.stories.jsx","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAe,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAEjF,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;CACZ,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACxE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,CAAC,QAAQ,CACP,EAAE,CAAC,WAAW,CACd,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,CAAC,CAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAC5E,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CACxC,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,SAAS,EAAE,CAAC;IACZ,SAAS,EAAE,GAAG;IACd,gBAAgB,EAAE,KAAK;IACvB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,WAAW;IAClB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,8BAA8B;IACpC,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAClD,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,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,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,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;AAOF,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEvC,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,WAAW,EAAE;oBACX,YAAY,EAAE,IAAI,CAAC,SAAS;oBAC5B,OAAO,EAAE,IAAI,CAAC,OAAO;iBACtB;aACF;SACF,CAAC,CAEF;MAAA,CAAC,QAAQ,CACP,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,CAAC,CAAmC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAC5E,SAAS,CACT,UAAU,CACV,KAAK,CAAC,wBAAwB,CAC9B,IAAI,CAAC,8BAA8B,CACnC,WAAW,CAAC,kBAAkB,EAElC;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,QAAQ;CAClB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACxC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, ChangeEvent } from 'react';\n\nimport { Configuration, TextArea, TextAreaProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Textarea',\n  component: TextArea\n} as Meta;\n\nexport const TextAreaDemo: Story<TextAreaProps> = (args: TextAreaProps) => {\n  const [value, setValue] = useState('');\n\n  return (\n    <TextArea\n      id='text-area'\n      value={value}\n      onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n      minLength={args.minLength}\n      maxLength={args.maxLength}\n      displayCharCount={args.displayCharCount}\n      hardStop={args.hardStop}\n      resizable={args.resizable}\n      autoResize={args.autoResize}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nTextAreaDemo.args = {\n  minLength: 0,\n  maxLength: 300,\n  displayCharCount: false,\n  hardStop: true,\n  resizable: false,\n  autoResize: false,\n  label: 'Text Area',\n  labelHidden: false,\n  info: 'Enter a large amount of text',\n  placeholder: 'Tell us a story…',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nTextAreaDemo.argTypes = {\n  minLength: { control: { type: 'number' } },\n  maxLength: { control: { type: 'number' } },\n  displayCharCount: { control: { type: 'boolean' } },\n  hardStop: { control: { type: 'boolean' } },\n  resizable: { control: { type: 'boolean' } },\n  autoResize: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { 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 ConfigurableTextAreaProps {\n  minHeight?: string;\n  padding?: string;\n}\n\nexport const ConfigurableTextArea: Story<ConfigurableTextAreaProps> = (\n  args: ConfigurableTextAreaProps\n) => {\n  const [value, setValue] = useState('');\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'text-area': {\n            'min-height': args.minHeight,\n            padding: args.padding\n          }\n        }\n      }}\n    >\n      <TextArea\n        value={value}\n        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n        resizable\n        autoResize\n        label='Configurable Text Area'\n        info='Enter a large amount of text'\n        placeholder='Tell us a story…'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableTextArea.args = {\n  minHeight: '3.75rem',\n  padding: '0.5rem'\n};\n\nConfigurableTextArea.argTypes = {\n  minHeight: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"TextArea.stories.jsx","sourceRoot":"","sources":["../../../src/core/TextArea/TextArea.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, ChangeEvent } from 'react';\n\nimport { Configuration, TextArea, TextAreaProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Textarea',\n  component: TextArea\n} as Meta;\n\ninterface TextAreaStoryProps extends TextAreaProps {\n  showAdditionalInfo?: boolean;\n}\n\nexport const TextAreaDemo: Story<TextAreaStoryProps> = (args: TextAreaStoryProps) => {\n  const [value, setValue] = useState('');\n\n  return (\n    <TextArea\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      id='text-area'\n      value={value}\n      onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n      minLength={args.minLength}\n      maxLength={args.maxLength}\n      displayCharCount={args.displayCharCount}\n      hardStop={args.hardStop}\n      resizable={args.resizable}\n      autoResize={args.autoResize}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      placeholder={args.placeholder}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nTextAreaDemo.args = {\n  minLength: 0,\n  maxLength: 300,\n  displayCharCount: false,\n  hardStop: true,\n  resizable: false,\n  autoResize: false,\n  label: 'Text Area',\n  labelHidden: false,\n  info: 'Enter a large amount of text',\n  placeholder: 'Tell us a story…',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  showAdditionalInfo: true\n};\n\nTextAreaDemo.argTypes = {\n  minLength: { control: { type: 'number' } },\n  maxLength: { control: { type: 'number' } },\n  displayCharCount: { control: { type: 'boolean' } },\n  hardStop: { control: { type: 'boolean' } },\n  resizable: { control: { type: 'boolean' } },\n  autoResize: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  placeholder: { 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 ConfigurableTextAreaProps {\n  minHeight?: string;\n  padding?: string;\n}\n\nexport const ConfigurableTextArea: Story<ConfigurableTextAreaProps> = (\n  args: ConfigurableTextAreaProps\n) => {\n  const [value, setValue] = useState('');\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'text-area': {\n            'min-height': args.minHeight,\n            padding: args.padding\n          }\n        }\n      }}\n    >\n      <TextArea\n        value={value}\n        onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setValue(e.target.value)}\n        resizable\n        autoResize\n        label='Configurable Text Area'\n        info='Enter a large amount of text'\n        placeholder='Tell us a story…'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableTextArea.args = {\n  minHeight: '3.75rem',\n  padding: '0.5rem'\n};\n\nConfigurableTextArea.argTypes = {\n  minHeight: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } }\n};\n"]}

package/jsx/core/Toaster/Toaster.stories.jsx

@@ -1,12 +1,12 @@
-import { useContext, useState } from 'react';
-import { Button, Toaster, ToasterContext } from '@pega/cosmos-react-core';
+import { useState } from 'react';
+import { Button, Toaster, useToaster } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Toaster',
     component: Toaster
 };
 export const ToasterDemo = () => {
     const MakeToastButton = () => {
-        const { push } = useContext(ToasterContext);
+        const { push } = useToaster();
         const [count, setCount] = useState(0);
         const messages = [
             'This is a short toast message!',

package/jsx/core/Toaster/Toaster.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.stories.jsx","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;QAC5C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEtC,MAAM,QAAQ,GAAG;YACf,gCAAgC;YAChC,sIAAsI;SACvI,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC;gBACH,OAAO,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;aAC7B,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAC1B;MAAA,CAAC,eAAe,CAAC,AAAD,EAClB;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport { Button, Toaster, ToasterContext } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Toaster',\n  component: Toaster\n} as Meta;\n\nexport const ToasterDemo: Story = () => {\n  const MakeToastButton = () => {\n    const { push } = useContext(ToasterContext);\n    const [count, setCount] = useState(0);\n\n    const messages = [\n      'This is a short toast message!',\n      'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'\n    ];\n\n    const pushToaster = () => {\n      setCount(curr => curr + 1);\n      push({\n        content: messages[count % 2]\n      });\n    };\n\n    return <Button onClick={pushToaster}>Make some Toast</Button>;\n  };\n\n  return (\n    <Toaster dismissAfter={5000}>\n      <MakeToastButton />\n    </Toaster>\n  );\n};\n"]}
+{"version":3,"file":"Toaster.stories.jsx","sourceRoot":"","sources":["../../../src/core/Toaster/Toaster.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;QAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QAEtC,MAAM,QAAQ,GAAG;YACf,gCAAgC;YAChC,sIAAsI;SACvI,CAAC;QAEF,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YAC3B,IAAI,CAAC;gBACH,OAAO,EAAE,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC;aAC7B,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAC1B;MAAA,CAAC,eAAe,CAAC,AAAD,EAClB;IAAA,EAAE,OAAO,CAAC,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Button, Toaster, useToaster } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Toaster',\n  component: Toaster\n} as Meta;\n\nexport const ToasterDemo: Story = () => {\n  const MakeToastButton = () => {\n    const { push } = useToaster();\n    const [count, setCount] = useState(0);\n\n    const messages = [\n      'This is a short toast message!',\n      'This toast message is much longer and will need to be trimmed with an ellipsis in order to fit within the confines of the component.'\n    ];\n\n    const pushToaster = () => {\n      setCount(curr => curr + 1);\n      push({\n        content: messages[count % 2]\n      });\n    };\n\n    return <Button onClick={pushToaster}>Make some Toast</Button>;\n  };\n\n  return (\n    <Toaster dismissAfter={5000}>\n      <MakeToastButton />\n    </Toaster>\n  );\n};\n"]}

package/jsx/core/Tree/Tree.mocks.d.ts

@@ -1,2 +1,2 @@
-export declare const themeToTree: (themeNode: object, parentPath?: string | undefined) => import("@pega/cosmos-react-core").TreeNode[];
+export declare const themeToTree: (themeNode: object, parentPath?: string) => import("@pega/cosmos-react-core").TreeNode[];
 //# sourceMappingURL=Tree.mocks.d.ts.map

package/jsx/core/Tree/Tree.mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.mocks.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,cAAe,MAAM,kFAsB5C,CAAC"}
+{"version":3,"file":"Tree.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.mocks.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,cAAe,MAAM,eAAe,MAAM,iDAsBjE,CAAC"}

package/jsx/core/Tree/Tree.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAMlB,MAAM,yBAAyB,CAAC;;AAKjC,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAqFpE,CAAC"}
+{"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAMlB,MAAM,yBAAyB,CAAC;;AAKjC,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAyGpE,CAAC"}

package/jsx/core/Tree/Tree.stories.jsx

@@ -24,6 +24,7 @@ export const StandardTreeDemo = (args) => {
                 id,
                 label: isParent ? 'Parent' : 'Leaf',
                 icon: isParent ? 'folder-solid' : 'document-solid',
+                secondary: 'This is secondary text',
                 nodes: isParent ? [] : undefined,
                 actions: [
                     { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },
@@ -63,6 +64,19 @@ export const StandardTreeDemo = (args) => {
       <StandardTree lined={args.lined} currentNodeId={currentNodeId} nodes={allNodes} onNodeClick={id => {
             const clickedNode = treeHelpers.getNode(allNodes, id);
             setCurrentNodeId(id);
+            if (!clickedNode?.nodes)
+                return;
+            setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
+                return {
+                    ...node,
+                    loading: node.nodes?.length === 0
+                };
+            }));
+            if (clickedNode?.nodes?.length > 0)
+                return;
+            loadChildNodes(id);
+        }} onNodeToggle={id => {
+            const clickedNode = treeHelpers.getNode(allNodes, id);
             if (!clickedNode?.nodes)
                 return;
             setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {