@pega/cosmos-react-demos 3.0.0-dev.1.0 → 3.0.0-dev.2.0

package/jsx/core/Table/Table.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.jsx","sourceRoot":"","sources":["../../../src/core/Table/Table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Status, Table, ColumnProps, TableProps } from '@pega/cosmos-react-core';\n\nimport { tableData } from './Table.mocks';\nimport { StyledBalance } from './Table.styles';\n\nexport default {\n  title: 'Core/Table',\n  component: Table,\n  args: {\n    title: 'Accounts',\n    hoverHighlight: false,\n    loading: false,\n    loadingMessage: 'Loading data',\n    emptyTable: false\n  },\n  argTypes: {\n    title: { control: { type: 'text' } },\n    hoverHighlight: { control: { type: 'boolean' } },\n    loading: { control: { type: 'boolean' } },\n    loadingMessage: { control: { type: 'text' } },\n    emptyTable: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface TableStoryProps {\n  title?: TableProps['title'];\n  hoverHighlight?: TableProps['hoverHighlight'];\n  loading?: TableProps['loading'];\n  loadingMessage?: TableProps['loadingMessage'];\n  emptyTable?: boolean;\n}\n\nexport const TableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n  const columns: ColumnProps<typeof tableData[number]>[] = [\n    { renderer: 'name', label: 'Name' },\n    { renderer: 'dob', label: 'Date of Birth' },\n    { renderer: 'address', label: 'Address' },\n    { renderer: 'email', label: 'Email' },\n    { renderer: 'balance', label: 'Account Balance', align: 'right' }\n  ];\n\n  return (\n    <Table\n      title={args.title}\n      hoverHighlight={args.hoverHighlight}\n      loading={args.loading}\n      loadingMessage={args.loadingMessage}\n      data={args.emptyTable ? [] : tableData}\n      columns={columns}\n    />\n  );\n};\n\nexport const StyledTableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n  const columns: ColumnProps<typeof tableData[number]>[] = [\n    { renderer: data => <b>{data.name}</b>, label: 'Name' },\n    { renderer: 'dob', label: 'Date of Birth' },\n    { renderer: 'address', label: 'Address' },\n    {\n      renderer: data => {\n        return (\n          <>\n            {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n            {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n          </>\n        );\n      },\n      label: 'Email'\n    },\n    {\n      renderer: data => {\n        return (\n          <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n            {data.balance}\n          </StyledBalance>\n        );\n      },\n      label: 'Account Balance',\n      align: 'right'\n    }\n  ];\n\n  return (\n    <Table\n      title={args.title}\n      hoverHighlight={args.hoverHighlight}\n      loading={args.loading}\n      loadingMessage={args.loadingMessage}\n      data={args.emptyTable ? [] : tableData}\n      columns={columns}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Table.stories.jsx","sourceRoot":"","sources":["../../../src/core/Table/Table.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Status, Table, ColumnProps, TableProps, Configuration } from '@pega/cosmos-react-core';\n\nimport { tableData } from './Table.mocks';\nimport { StyledBalance } from './Table.styles';\n\nexport default {\n  title: 'Core/Table',\n  component: Table,\n  args: {\n    title: 'Accounts',\n    hoverHighlight: false,\n    loading: false,\n    loadingMessage: 'Loading data',\n    emptyTable: false\n  },\n  argTypes: {\n    title: { control: { type: 'text' } },\n    hoverHighlight: { control: { type: 'boolean' } },\n    loading: { control: { type: 'boolean' } },\n    loadingMessage: { control: { type: 'text' } },\n    emptyTable: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface TableStoryProps {\n  title?: TableProps['title'];\n  hoverHighlight?: TableProps['hoverHighlight'];\n  loading?: TableProps['loading'];\n  loadingMessage?: TableProps['loadingMessage'];\n  emptyTable?: boolean;\n}\n\nexport const TableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n  const columns: ColumnProps<typeof tableData[number]>[] = [\n    { renderer: 'name', label: 'Name' },\n    { renderer: 'dob', label: 'Date of Birth' },\n    { renderer: 'address', label: 'Address' },\n    { renderer: 'email', label: 'Email' },\n    { renderer: 'balance', label: 'Account Balance', align: 'right' }\n  ];\n\n  return (\n    <Table\n      title={args.title}\n      hoverHighlight={args.hoverHighlight}\n      loading={args.loading}\n      loadingMessage={args.loadingMessage}\n      data={args.emptyTable ? [] : tableData}\n      columns={columns}\n    />\n  );\n};\n\nexport const StyledTableDemo: Story<TableStoryProps> = (args: TableStoryProps) => {\n  const columns: ColumnProps<typeof tableData[number]>[] = [\n    { renderer: data => <b>{data.name}</b>, label: 'Name' },\n    { renderer: 'dob', label: 'Date of Birth' },\n    { renderer: 'address', label: 'Address' },\n    {\n      renderer: data => {\n        return (\n          <>\n            {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n            {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n          </>\n        );\n      },\n      label: 'Email'\n    },\n    {\n      renderer: data => {\n        return (\n          <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n            {data.balance}\n          </StyledBalance>\n        );\n      },\n      label: 'Account Balance',\n      align: 'right'\n    }\n  ];\n\n  return (\n    <Table\n      title={args.title}\n      hoverHighlight={args.hoverHighlight}\n      loading={args.loading}\n      loadingMessage={args.loadingMessage}\n      data={args.emptyTable ? [] : tableData}\n      columns={columns}\n    />\n  );\n};\n\ninterface ConfigurableTableProps extends TableStoryProps {\n  headerFontSize?: string;\n  headerFontWeight?: string;\n  headerForegroundColor?: string;\n  headerBackgroundColor?: string;\n  headerVerticalSpacing?: number;\n  headerHorizontalSpacing?: number;\n  headerBorderWidth?: string;\n  headerBorderColor?: string;\n  bodyForegroundColor?: string;\n  bodyBackgroundColor?: string;\n  bodyVerticalSpacing?: number;\n  bodyHorizontalSpacing?: number;\n  bodyBorderWidth?: string;\n  bodyBorderColor?: string;\n  borderHorizontalInner?: boolean;\n  borderHorizontalOuter?: boolean;\n  borderVerticalInner?: boolean;\n  borderVerticalOuter?: boolean;\n  spacingHorizontalInner?: boolean;\n  spacingHorizontalOuter?: boolean;\n  spacingVerticalInner?: boolean;\n  spacingVerticalOuter?: boolean;\n}\n\nexport const ConfigurableTable: Story<ConfigurableTableProps> = (args: ConfigurableTableProps) => {\n  const columns: ColumnProps<typeof tableData[number]>[] = [\n    { renderer: data => <b>{data.name}</b>, label: 'Name' },\n    { renderer: 'dob', label: 'Date of Birth' },\n    { renderer: 'address', label: 'Address' },\n    {\n      renderer: data => {\n        return (\n          <>\n            {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}\n            {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}\n          </>\n        );\n      },\n      label: 'Email'\n    },\n    {\n      renderer: data => {\n        return (\n          <StyledBalance negativeBalance={data.balance.startsWith('-')}>\n            {data.balance}\n          </StyledBalance>\n        );\n      },\n      label: 'Account Balance',\n      align: 'right'\n    }\n  ];\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          table: {\n            header: {\n              'font-size': args.headerFontSize,\n              'font-weight': args.headerFontWeight,\n              'foreground-color': args.headerForegroundColor,\n              'background-color': args.headerBackgroundColor,\n              'vertical-spacing': args.headerVerticalSpacing,\n              'horizontal-spacing': args.headerHorizontalSpacing,\n              'border-width': args.headerBorderWidth,\n              'border-color': args.headerBorderColor\n            },\n            body: {\n              'foreground-color': args.bodyForegroundColor,\n              'background-color': args.bodyBackgroundColor,\n              'vertical-spacing': args.bodyVerticalSpacing,\n              'horizontal-spacing': args.bodyHorizontalSpacing,\n              'border-width': args.bodyBorderWidth,\n              'border-color': args.bodyBorderColor\n            },\n            border: {\n              'horizontal-inner': args.borderHorizontalInner,\n              'horizontal-outer': args.borderHorizontalOuter,\n              'vertical-inner': args.borderVerticalInner,\n              'vertical-outer': args.borderVerticalOuter\n            },\n            spacing: {\n              'horizontal-inner': args.spacingHorizontalInner,\n              'horizontal-outer': args.spacingHorizontalOuter,\n              'vertical-inner': args.spacingVerticalInner,\n              'vertical-outer': args.spacingVerticalOuter\n            }\n          }\n        }\n      }}\n    >\n      <Table title='Accounts' data={tableData} columns={columns} />\n    </Configuration>\n  );\n};\n\nConfigurableTable.args = {\n  headerFontSize: 's',\n  headerFontWeight: '600',\n  headerForegroundColor: '#000000',\n  headerBackgroundColor: '#f5f5f5',\n  headerVerticalSpacing: 1,\n  headerHorizontalSpacing: 2,\n  headerBorderWidth: '0.0625rem',\n  headerBorderColor: '#cfcfcf',\n  bodyForegroundColor: '#000000',\n  bodyBackgroundColor: '#ffffff',\n  bodyVerticalSpacing: 1,\n  bodyHorizontalSpacing: 1,\n  bodyBorderWidth: '0.0625rem',\n  bodyBorderColor: '#cfcfcf',\n  borderHorizontalInner: true,\n  borderHorizontalOuter: true,\n  borderVerticalInner: true,\n  borderVerticalOuter: true,\n  spacingHorizontalInner: true,\n  spacingHorizontalOuter: true,\n  spacingVerticalInner: true,\n  spacingVerticalOuter: true\n};\n\nConfigurableTable.argTypes = {\n  headerFontSize: {\n    options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n    control: { type: 'select' }\n  },\n  headerFontWeight: { control: { type: 'text' } },\n  headerForegroundColor: { control: { type: 'color' } },\n  headerBackgroundColor: { control: { type: 'color' } },\n  headerVerticalSpacing: { control: { type: 'number' } },\n  headerHorizontalSpacing: { control: { type: 'number' } },\n  headerBorderWidth: { control: { type: 'text' } },\n  headerBorderColor: { control: { type: 'color' } },\n  bodyForegroundColor: { control: { type: 'color' } },\n  bodyBackgroundColor: { control: { type: 'color' } },\n  bodyVerticalSpacing: { control: { type: 'number' } },\n  bodyHorizontalSpacing: { control: { type: 'number' } },\n  bodyBorderWidth: { control: { type: 'text' } },\n  bodyBorderColor: { control: { type: 'color' } },\n  borderHorizontalInner: { control: { type: 'boolean' } },\n  borderHorizontalOuter: { control: { type: 'boolean' } },\n  borderVerticalInner: { control: { type: 'boolean' } },\n  borderVerticalOuter: { control: { type: 'boolean' } },\n  spacingHorizontalInner: { control: { type: 'boolean' } },\n  spacingHorizontalOuter: { control: { type: 'boolean' } },\n  spacingVerticalInner: { control: { type: 'boolean' } },\n  spacingVerticalOuter: { control: { type: 'boolean' } },\n  title: { table: { disable: true } },\n  hoverHighlight: { table: { disable: true } },\n  loading: { table: { disable: true } },\n  loadingMessage: { table: { disable: true } },\n  emptyTable: { table: { disable: true } }\n};\n"]}

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

@@ -4,4 +4,9 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const TabsDemo: Story<TabsProps>;
 export declare const TabsCountDemo: Story<TabsProps>;
+interface ConfigurableTabsProps {
+    foreground?: string;
+    type?: TabsProps['type'];
+}
+export declare const ConfigurableTabs: Story<ConfigurableTabsProps>;
 //# sourceMappingURL=Tabs.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAwB,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAE1E,wBASU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CA6BrC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,SAAS,CA6B1C,CAAC"}
+{"version":3,"file":"Tabs.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tabs/Tabs.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAuC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAEzF,wBASU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CA6BrC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,SAAS,CA6B1C,CAAC;AAEF,UAAU,qBAAqB;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAuCzD,CAAC"}

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
+import { Configuration, Flex, TabPanel, Tabs } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Tabs',
     component: Tabs,
@@ -56,4 +56,42 @@ export const TabsCountDemo = (args) => {
       </Flex>
     </Flex>);
 };
+export const ConfigurableTabs = (args) => {
+    const [panelShown, changePanel] = useState('1');
+    const handleTabChange = (id) => {
+        changePanel(id);
+    };
+    const tabs = [
+        { name: 'Tab 1', id: '1' },
+        { name: 'Tab 2', id: '2' },
+        { name: 'Tab 3', id: '3' },
+        { name: 'Tab 4', id: '4', disabled: true },
+        { name: 'Tab 5', id: '5' }
+    ];
+    return (<Configuration theme={{
+            components: {
+                tabs: {
+                    base: {
+                        foreground: args.foreground
+                    }
+                }
+            }
+        }}>
+      <Flex item={{ grow: 1 }}>
+        <Tabs tabs={tabs} onTabClick={handleTabChange} currentTabId={panelShown}/>
+      </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>
+          </TabPanel>))}
+      </Flex>
+    </Configuration>);
+};
+ConfigurableTabs.args = {
+    foreground: '#076bc9'
+};
+ConfigurableTabs.argTypes = {
+    foreground: { control: { type: 'color' } },
+    type: { table: { disable: true } }
+};
 //# sourceMappingURL=Tabs.stories.jsx.map

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 { 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\nexport const TabsDemo: Story<TabsProps> = (args: TabsProps) => {\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<TabsProps> = (args: TabsProps) => {\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"]}
+{"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\nexport const TabsDemo: Story<TabsProps> = (args: TabsProps) => {\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<TabsProps> = (args: TabsProps) => {\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/Text/Text.stories.d.ts

@@ -3,4 +3,23 @@ import { TextProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const TextDemo: Story<TextProps>;
+interface ConfigurableTextProps {
+    primaryFontSize?: string;
+    primaryFontWeight?: string;
+    secondaryFontSize?: string;
+    secondaryFontWeight?: string;
+    h1FontSize?: string;
+    h1FontWeight?: string;
+    h2FontSize?: string;
+    h2FontWeight?: string;
+    h3FontSize?: string;
+    h3FontWeight?: string;
+    h4FontSize?: string;
+    h4FontWeight?: string;
+    h5FontSize?: string;
+    h5FontWeight?: string;
+    h6FontSize?: string;
+    h6FontWeight?: string;
+}
+export declare const ConfigurableText: Story<ConfigurableTextProps>;
 //# sourceMappingURL=Text.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAQ,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAE1D,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC"}
+{"version":3,"file":"Text.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Text/Text.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA6B,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAE/E,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAeF,UAAU,qBAAqB;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAsDzD,CAAC"}

package/jsx/core/Text/Text.stories.jsx

@@ -1,4 +1,4 @@
-import { Text } from '@pega/cosmos-react-core';
+import { Configuration, Flex, Text } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Text',
     component: Text
@@ -19,4 +19,115 @@ TextDemo.argTypes = {
     },
     status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
 };
+export const ConfigurableText = (args) => {
+    return (<Configuration theme={{
+            components: {
+                text: {
+                    primary: {
+                        'font-size': args.primaryFontSize,
+                        'font-weight': args.primaryFontWeight
+                    },
+                    secondary: {
+                        'font-size': args.secondaryFontSize,
+                        'font-weight': args.secondaryFontWeight
+                    },
+                    h1: {
+                        'font-size': args.h1FontSize,
+                        'font-weight': args.h1FontWeight
+                    },
+                    h2: {
+                        'font-size': args.h2FontSize,
+                        'font-weight': args.h2FontWeight
+                    },
+                    h3: {
+                        'font-size': args.h3FontSize,
+                        'font-weight': args.h3FontWeight
+                    },
+                    h4: {
+                        'font-size': args.h4FontSize,
+                        'font-weight': args.h4FontWeight
+                    },
+                    h5: {
+                        'font-size': args.h5FontSize,
+                        'font-weight': args.h5FontWeight
+                    },
+                    h6: {
+                        'font-size': args.h6FontSize,
+                        'font-weight': args.h6FontWeight
+                    }
+                }
+            }
+        }}>
+      <Flex container={{ gap: 2, alignItems: 'end' }}>
+        <Text variant='primary'>Primary</Text>
+        <Text variant='secondary'>Secondary</Text>
+        <Text variant='h1'>h1</Text>
+        <Text variant='h2'>h2</Text>
+        <Text variant='h3'>h3</Text>
+        <Text variant='h4'>h4</Text>
+        <Text variant='h5'>h5</Text>
+        <Text variant='h6'>h6</Text>
+      </Flex>
+    </Configuration>);
+};
+ConfigurableText.args = {
+    primaryFontSize: 's',
+    primaryFontWeight: '400',
+    secondaryFontSize: 'xs',
+    secondaryFontWeight: '400',
+    h1FontSize: 'xl',
+    h1FontWeight: '600',
+    h2FontSize: 'l',
+    h2FontWeight: '600',
+    h3FontSize: 'm',
+    h3FontWeight: '600',
+    h4FontSize: 's',
+    h4FontWeight: '600',
+    h5FontSize: 'xs',
+    h5FontWeight: '600',
+    h6FontSize: 'xxs',
+    h6FontWeight: '600'
+};
+ConfigurableText.argTypes = {
+    primaryFontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    primaryFontWeight: { control: { type: 'text' } },
+    secondaryFontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    secondaryFontWeight: { control: { type: 'text' } },
+    h1FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h1FontWeight: { control: { type: 'text' } },
+    h2FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h2FontWeight: { control: { type: 'text' } },
+    h3FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h3FontWeight: { control: { type: 'text' } },
+    h4FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h4FontWeight: { control: { type: 'text' } },
+    h5FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h5FontWeight: { control: { type: 'text' } },
+    h6FontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    h6FontWeight: { control: { type: 'text' } }
+};
 //# sourceMappingURL=Text.stories.jsx.map

package/jsx/core/Text/Text.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Text.stories.jsx","sourceRoot":"","sources":["../../../src/core/Text/Text.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AAE1D,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;CACR,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAC/C;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;QACrE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC7F,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Text, TextProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Text',\n  component: Text\n} as Meta;\n\nexport const TextDemo: Story<TextProps> = (args: TextProps) => {\n  return (\n    <Text variant={args.variant} status={args.status}>\n      Pega Cosmos\n    </Text>\n  );\n};\n\nTextDemo.args = {\n  variant: 'primary',\n  status: undefined\n};\n\nTextDemo.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n    control: { type: 'select' }\n  },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n"]}
+{"version":3,"file":"Text.stories.jsx","sourceRoot":"","sources":["../../../src/core/Text/Text.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Flex, Text, TextProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Text',\n  component: Text\n} as Meta;\n\nexport const TextDemo: Story<TextProps> = (args: TextProps) => {\n  return (\n    <Text variant={args.variant} status={args.status}>\n      Pega Cosmos\n    </Text>\n  );\n};\n\nTextDemo.args = {\n  variant: 'primary',\n  status: undefined\n};\n\nTextDemo.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n    control: { type: 'select' }\n  },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n\ninterface ConfigurableTextProps {\n  primaryFontSize?: string;\n  primaryFontWeight?: string;\n  secondaryFontSize?: string;\n  secondaryFontWeight?: string;\n  h1FontSize?: string;\n  h1FontWeight?: string;\n  h2FontSize?: string;\n  h2FontWeight?: string;\n  h3FontSize?: string;\n  h3FontWeight?: string;\n  h4FontSize?: string;\n  h4FontWeight?: string;\n  h5FontSize?: string;\n  h5FontWeight?: string;\n  h6FontSize?: string;\n  h6FontWeight?: string;\n}\n\nexport const ConfigurableText: Story<ConfigurableTextProps> = (args: ConfigurableTextProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          text: {\n            primary: {\n              'font-size': args.primaryFontSize,\n              'font-weight': args.primaryFontWeight\n            },\n            secondary: {\n              'font-size': args.secondaryFontSize,\n              'font-weight': args.secondaryFontWeight\n            },\n            h1: {\n              'font-size': args.h1FontSize,\n              'font-weight': args.h1FontWeight\n            },\n            h2: {\n              'font-size': args.h2FontSize,\n              'font-weight': args.h2FontWeight\n            },\n            h3: {\n              'font-size': args.h3FontSize,\n              'font-weight': args.h3FontWeight\n            },\n            h4: {\n              'font-size': args.h4FontSize,\n              'font-weight': args.h4FontWeight\n            },\n            h5: {\n              'font-size': args.h5FontSize,\n              'font-weight': args.h5FontWeight\n            },\n            h6: {\n              'font-size': args.h6FontSize,\n              'font-weight': args.h6FontWeight\n            }\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, alignItems: 'end' }}>\n        <Text variant='primary'>Primary</Text>\n        <Text variant='secondary'>Secondary</Text>\n        <Text variant='h1'>h1</Text>\n        <Text variant='h2'>h2</Text>\n        <Text variant='h3'>h3</Text>\n        <Text variant='h4'>h4</Text>\n        <Text variant='h5'>h5</Text>\n        <Text variant='h6'>h6</Text>\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableText.args = {\n  primaryFontSize: 's',\n  primaryFontWeight: '400',\n  secondaryFontSize: 'xs',\n  secondaryFontWeight: '400',\n  h1FontSize: 'xl',\n  h1FontWeight: '600',\n  h2FontSize: 'l',\n  h2FontWeight: '600',\n  h3FontSize: 'm',\n  h3FontWeight: '600',\n  h4FontSize: 's',\n  h4FontWeight: '600',\n  h5FontSize: 'xs',\n  h5FontWeight: '600',\n  h6FontSize: 'xxs',\n  h6FontWeight: '600'\n};\n\nConfigurableText.argTypes = {\n  primaryFontSize: {\n    options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n    control: { type: 'select' }\n  },\n  primaryFontWeight: { control: { type: 'text' } },\n  secondaryFontSize: {\n    options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n    control: { type: 'select' }\n  },\n  secondaryFontWeight: { control: { type: 'text' } },\n  h1FontSize: {\n    options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n    control: { type: 'select' }\n  },\n  h1FontWeight: { control: { type: 'text' } },\n  h2FontSize: {\n    options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n    control: { type: 'select' }\n  },\n  h2FontWeight: { control: { type: 'text' } },\n  h3FontSize: {\n    options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n    control: { type: 'select' }\n  },\n  h3FontWeight: { control: { type: 'text' } },\n  h4FontSize: {\n    options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n    control: { type: 'select' }\n  },\n  h4FontWeight: { control: { type: 'text' } },\n  h5FontSize: {\n    options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n    control: { type: 'select' }\n  },\n  h5FontWeight: { control: { type: 'text' } },\n  h6FontSize: {\n    options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],\n    control: { type: 'select' }\n  },\n  h6FontWeight: { control: { type: 'text' } }\n};\n"]}

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

@@ -3,4 +3,9 @@ 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 ConfigurableTextAreaProps {
+    minHeight?: string;
+    padding?: string;
+}
+export declare const ConfigurableTextArea: Story<ConfigurableTextAreaProps>;
 //# sourceMappingURL=TextArea.stories.d.ts.map

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,EAAY,aAAa,EAAE,MAAM,yBAAyB,CAAC;;AAElE,wBAGU;AAEV,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,aAAa,CAwB7C,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,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"}

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

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { TextArea } from '@pega/cosmos-react-core';
+import { Configuration, TextArea } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Textarea',
     component: TextArea
@@ -40,4 +40,25 @@ TextAreaDemo.argTypes = {
     disabled: { control: { type: 'boolean' } },
     readOnly: { control: { type: 'boolean' } }
 };
+export const ConfigurableTextArea = (args) => {
+    const [value, setValue] = useState('');
+    return (<Configuration theme={{
+            components: {
+                'text-area': {
+                    'min-height': args.minHeight,
+                    padding: args.padding
+                }
+            }
+        }}>
+      <TextArea value={value} onChange={(e) => setValue(e.target.value)} resizable autoResize label='Configurable Text Area' info='Enter a large amount of text' placeholder='Tell us a story…'/>
+    </Configuration>);
+};
+ConfigurableTextArea.args = {
+    minHeight: '3.75rem',
+    padding: '0.5rem'
+};
+ConfigurableTextArea.argTypes = {
+    minHeight: { control: { type: 'text' } },
+    padding: { control: { type: 'text' } }
+};
 //# sourceMappingURL=TextArea.stories.jsx.map

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":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, ChangeEvent } from 'react';\n\nimport { 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"]}
+{"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\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"]}

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

@@ -1,8 +1,14 @@
 /// <reference types="react" />
+import { Story } from '@storybook/react';
 declare const _default: {
     title: string;
     component: import("react").FunctionComponent<import("@pega/cosmos-react-core").TooltipProps & import("@pega/cosmos-react-core").ForwardProps>;
 };
 export default _default;
 export declare const TooltipDemo: () => JSX.Element;
+interface ConfigurableTooltipProps {
+    foregroundColor?: string;
+    backgroundColor?: string;
+}
+export declare const ConfigurableTooltip: Story<ConfigurableTooltipProps>;
 //# sourceMappingURL=Tooltip.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";;;;;AAEA,wBAGE;AAEF,eAAO,MAAM,WAAW,mBAgBvB,CAAC"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;;;;AAIzC,wBAGE;AAEF,eAAO,MAAM,WAAW,mBAgBvB,CAAC;AAEF,UAAU,wBAAwB;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,wBAAwB,CA2B/D,CAAC"}

package/jsx/core/Tooltip/Tooltip.stories.jsx

@@ -1,4 +1,4 @@
-import { Button, Tooltip, useElement } from '@pega/cosmos-react-core';
+import { Button, Configuration, Tooltip, useElement } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Tooltip',
     component: Tooltip
@@ -15,4 +15,31 @@ export const TooltipDemo = () => {
         </Tooltip>)}
     </>);
 };
+export const ConfigurableTooltip = (args) => {
+    const [el, setEl] = useElement();
+    return (<Configuration theme={{
+            components: {
+                tooltip: {
+                    'foreground-color': args.foregroundColor,
+                    'background-color': args.backgroundColor
+                }
+            }
+        }}>
+      <Button ref={setEl}>Hover me</Button>
+
+      {el && (<Tooltip target={el}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque
+          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non
+          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.
+        </Tooltip>)}
+    </Configuration>);
+};
+ConfigurableTooltip.args = {
+    foregroundColor: '#f5f5f5',
+    backgroundColor: '#3f3f3f'
+};
+ConfigurableTooltip.argTypes = {
+    foregroundColor: { control: { type: 'color' } },
+    backgroundColor: { control: { type: 'color' } }
+};
 //# sourceMappingURL=Tooltip.stories.jsx.map

package/jsx/core/Tooltip/Tooltip.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,MAAM,CAEpC;;MAAA,CAAC,EAAE,IAAI,CACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAClB;;;;QAGF,EAAE,OAAO,CAAC,CACX,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Button, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Tooltip',\n  component: Tooltip\n};\n\nexport const TooltipDemo = () => {\n  const [el, setEl] = useElement();\n\n  return (\n    <>\n      <Button ref={setEl}>Hover me</Button>\n\n      {el && (\n        <Tooltip target={el}>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n        </Tooltip>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"Tooltip.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErF,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,EACE;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,MAAM,CAEpC;;MAAA,CAAC,EAAE,IAAI,CACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAClB;;;;QAGF,EAAE,OAAO,CAAC,CACX,CACH;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,mBAAmB,GAAoC,CAClE,IAA8B,EAC9B,EAAE;IACF,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,kBAAkB,EAAE,IAAI,CAAC,eAAe;iBACzC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,MAAM,CAEpC;;MAAA,CAAC,EAAE,IAAI,CACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAClB;;;;QAGF,EAAE,OAAO,CAAC,CACX,CACH;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAChD,CAAC","sourcesContent":["import { Story } from '@storybook/react';\n\nimport { Button, Configuration, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Tooltip',\n  component: Tooltip\n};\n\nexport const TooltipDemo = () => {\n  const [el, setEl] = useElement();\n\n  return (\n    <>\n      <Button ref={setEl}>Hover me</Button>\n\n      {el && (\n        <Tooltip target={el}>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n        </Tooltip>\n      )}\n    </>\n  );\n};\n\ninterface ConfigurableTooltipProps {\n  foregroundColor?: string;\n  backgroundColor?: string;\n}\n\nexport const ConfigurableTooltip: Story<ConfigurableTooltipProps> = (\n  args: ConfigurableTooltipProps\n) => {\n  const [el, setEl] = useElement();\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          tooltip: {\n            'foreground-color': args.foregroundColor,\n            'background-color': args.backgroundColor\n          }\n        }\n      }}\n    >\n      <Button ref={setEl}>Hover me</Button>\n\n      {el && (\n        <Tooltip target={el}>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n          viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n          convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n        </Tooltip>\n      )}\n    </Configuration>\n  );\n};\n\nConfigurableTooltip.args = {\n  foregroundColor: '#f5f5f5',\n  backgroundColor: '#3f3f3f'\n};\n\nConfigurableTooltip.argTypes = {\n  foregroundColor: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } }\n};\n"]}

package/jsx/work/Details/Details.stories.jsx

@@ -9,17 +9,17 @@ export const DetailsDemo = () => {
             {
                 id: '1',
                 name: 'Statement balance',
-                value: <CurrencyDisplay value='1,289.00' currencyISOCode='USD'/>
+                value: <CurrencyDisplay value='1289.00' currencyISOCode='USD'/>
             },
             {
                 id: '2',
                 name: 'Total balance',
-                value: <CurrencyDisplay value='35,667.00' currencyISOCode='USD'/>
+                value: <CurrencyDisplay value='35667.00' currencyISOCode='USD'/>
             },
             {
                 id: '3',
                 name: 'Available credit',
-                value: <CurrencyDisplay value='5,813.00' currencyISOCode='USD'/>
+                value: <CurrencyDisplay value='5813.00' currencyISOCode='USD'/>
             },
             {
                 id: '4',

package/jsx/work/Details/Details.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Details.stories.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,eAAe,EACf,UAAU,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,OAAO,CACL,CAAC,OAAO,CACN,iBAAiB,CAAC,CAAC;YACjB;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,EAAG;aAClE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,WAAW,CAAC,eAAe,CAAC,KAAK,EAAG;aACnE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,EAAG;aAClE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAG;aAC/E;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,CACL,CAAC,UAAU,CACT,KAAK,CAAC,yBAAyB,CAC/B,WAAW,CAAC,eAAe,CAC3B,OAAO,CAAC,MAAM,EACd,CACH;aACF;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,CAAC,cAAc,CAAC,KAAK,EAAG;aAChC;SACF,CAAC,CACF,OAAO,CAAC,CAAC;YACP,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CACzB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,2CAA2C,EAAE;oBAC5E,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAClD;wBACE,IAAI,EAAE,eAAe;wBACrB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,8BAA8B,CAAC,qBAAqB,EAAE,IAAI,CAAC;qBAC9E;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;YACb,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CACrB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN;wBACE,IAAI,EAAE,cAAc;wBACpB,KAAK,EAAE,kDAAkD;qBAC1D;oBACD,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAC/C;wBACE,IAAI,EAAE,YAAY;wBAClB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,sBAAsB,EAAE,IAAI,CAAC;qBAChF;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;SACd,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  CurrencyDisplay,\n  DateTimeDisplay,\n  URLDisplay,\n  BooleanDisplay,\n  FieldGroup,\n  FieldValueList,\n  Link\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  return (\n    <Details\n      highlightedFields={[\n        {\n          id: '1',\n          name: 'Statement balance',\n          value: <CurrencyDisplay value='1,289.00' currencyISOCode='USD' />\n        },\n        {\n          id: '2',\n          name: 'Total balance',\n          value: <CurrencyDisplay value='35,667.00' currencyISOCode='USD' />\n        },\n        {\n          id: '3',\n          name: 'Available credit',\n          value: <CurrencyDisplay value='5,813.00' currencyISOCode='USD' />\n        },\n        {\n          id: '4',\n          name: 'Payment due date',\n          value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n        },\n        {\n          id: '5',\n          name: 'Available benefits',\n          value: (\n            <URLDisplay\n              value='https://www.google.com/'\n              displayText='View benefits'\n              variant='link'\n            />\n          )\n        },\n        {\n          id: '6',\n          name: 'Platinum member',\n          value: <BooleanDisplay value />\n        }\n      ]}\n      regions={[\n        <FieldGroup name='Personal'>\n          <FieldValueList\n            fields={[\n              { name: 'Home address', value: '12 Higgins Bottom Way, Carnell, NH, 02133' },\n              { name: 'Primary phone', value: '(617) 374-9637' },\n              {\n                name: 'Primary email',\n                value: <Link href='mailto:joe.smith@example.com'>joe.smith@example.com</Link>\n              }\n            ]}\n          />\n        </FieldGroup>,\n        <FieldGroup name='Work'>\n          <FieldValueList\n            fields={[\n              {\n                name: 'Work address',\n                value: '1 Monolith Business Parkway, Milltown, NH, 02333'\n              },\n              { name: 'Work phone', value: '(800) 374-2200' },\n              {\n                name: 'Work email',\n                value: <Link href='mailto:jane.smith@example.com'>jane.smith@example.com</Link>\n              }\n            ]}\n          />\n        </FieldGroup>\n      ]}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Details.stories.jsx","sourceRoot":"","sources":["../../../src/work/Details/Details.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,eAAe,EACf,UAAU,EACV,cAAc,EACd,UAAU,EACV,cAAc,EACd,IAAI,EACL,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;CACX,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,OAAO,CACL,CAAC,OAAO,CACN,iBAAiB,CAAC,CAAC;YACjB;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,mBAAmB;gBACzB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,EAAG;aACjE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,eAAe;gBACrB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,EAAG;aAClE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,KAAK,EAAG;aACjE;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,KAAK,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,EAAG;aAC/E;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,CACL,CAAC,UAAU,CACT,KAAK,CAAC,yBAAyB,CAC/B,WAAW,CAAC,eAAe,CAC3B,OAAO,CAAC,MAAM,EACd,CACH;aACF;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,iBAAiB;gBACvB,KAAK,EAAE,CAAC,cAAc,CAAC,KAAK,EAAG;aAChC;SACF,CAAC,CACF,OAAO,CAAC,CAAC;YACP,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CACzB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,2CAA2C,EAAE;oBAC5E,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAClD;wBACE,IAAI,EAAE,eAAe;wBACrB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,8BAA8B,CAAC,qBAAqB,EAAE,IAAI,CAAC;qBAC9E;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;YACb,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,CACrB;UAAA,CAAC,cAAc,CACb,MAAM,CAAC,CAAC;oBACN;wBACE,IAAI,EAAE,cAAc;wBACpB,KAAK,EAAE,kDAAkD;qBAC1D;oBACD,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,gBAAgB,EAAE;oBAC/C;wBACE,IAAI,EAAE,YAAY;wBAClB,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,+BAA+B,CAAC,sBAAsB,EAAE,IAAI,CAAC;qBAChF;iBACF,CAAC,EAEN;QAAA,EAAE,UAAU,CAAC;SACd,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  CurrencyDisplay,\n  DateTimeDisplay,\n  URLDisplay,\n  BooleanDisplay,\n  FieldGroup,\n  FieldValueList,\n  Link\n} from '@pega/cosmos-react-core';\nimport { Details } from '@pega/cosmos-react-work';\n\nexport default {\n  title: 'Work/Details',\n  component: Details\n} as Meta;\n\nexport const DetailsDemo: Story = () => {\n  return (\n    <Details\n      highlightedFields={[\n        {\n          id: '1',\n          name: 'Statement balance',\n          value: <CurrencyDisplay value='1289.00' currencyISOCode='USD' />\n        },\n        {\n          id: '2',\n          name: 'Total balance',\n          value: <CurrencyDisplay value='35667.00' currencyISOCode='USD' />\n        },\n        {\n          id: '3',\n          name: 'Available credit',\n          value: <CurrencyDisplay value='5813.00' currencyISOCode='USD' />\n        },\n        {\n          id: '4',\n          name: 'Payment due date',\n          value: <DateTimeDisplay value={Date.now()} variant='datetime' format='long' />\n        },\n        {\n          id: '5',\n          name: 'Available benefits',\n          value: (\n            <URLDisplay\n              value='https://www.google.com/'\n              displayText='View benefits'\n              variant='link'\n            />\n          )\n        },\n        {\n          id: '6',\n          name: 'Platinum member',\n          value: <BooleanDisplay value />\n        }\n      ]}\n      regions={[\n        <FieldGroup name='Personal'>\n          <FieldValueList\n            fields={[\n              { name: 'Home address', value: '12 Higgins Bottom Way, Carnell, NH, 02133' },\n              { name: 'Primary phone', value: '(617) 374-9637' },\n              {\n                name: 'Primary email',\n                value: <Link href='mailto:joe.smith@example.com'>joe.smith@example.com</Link>\n              }\n            ]}\n          />\n        </FieldGroup>,\n        <FieldGroup name='Work'>\n          <FieldValueList\n            fields={[\n              {\n                name: 'Work address',\n                value: '1 Monolith Business Parkway, Milltown, NH, 02333'\n              },\n              { name: 'Work phone', value: '(800) 374-2200' },\n              {\n                name: 'Work email',\n                value: <Link href='mailto:jane.smith@example.com'>jane.smith@example.com</Link>\n              }\n            ]}\n          />\n        </FieldGroup>\n      ]}\n    />\n  );\n};\n"]}

package/lib/build/PageTemplates/PageTemplates.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EASL,UAAU,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAwBL,WAAW,EACX,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,aAAa,EAA6B,MAAM,0BAA0B,CAAC;;AAW9F,wBAKU;AAEV,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,QAAQ,EACJ,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACrD;AAQD,UAAU,aAAa;IACrB,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAkVD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG,aAAa,CA2L5E,CAAC"}
+{"version":3,"file":"PageTemplates.stories.d.ts","sourceRoot":"","sources":["../../../src/build/PageTemplates/PageTemplates.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EASL,UAAU,EACX,MAAM,OAAO,CAAC;AAGf,OAAO,EAwBL,WAAW,EACX,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAY,aAAa,EAA6B,MAAM,0BAA0B,CAAC;;AAW9F,wBAKU;AAEV,MAAM,WAAW,uBAAwB,SAAQ,iBAAiB;IAChE,QAAQ,EACJ,YAAY,GACZ,YAAY,GACZ,cAAc,GACd,aAAa,GACb,aAAa,GACb,aAAa,GACb,kBAAkB,GAClB,kBAAkB,GAClB,oBAAoB,GACpB,QAAQ,CAAC;IACb,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACrD;AAQD,UAAU,aAAa;IACrB,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAkVD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,GAAG,aAAa,CAkL5E,CAAC"}

package/lib/build/PageTemplates/PageTemplates.stories.js

@@ -245,7 +245,7 @@ export const PageTemplatesDemo = (args) => {
                     }
                 ] }, void 0)] }, void 0)) : undefined;
     const banners = args.showBanners ? (_jsx(Banner, { id: 'warning-banner', variant: 'warning', messages: ['This is a warning banner. You have been warned!'] }, void 0)) : undefined;
-    const mainContent = (_jsx(Flex, { container: true, children: _jsx(OneColumnForm, {}, void 0) }, void 0));
+    const mainContent = _jsx(OneColumnForm, {}, void 0);
     const modal = () => (_jsx(Configuration, { theme: BuildTheme, children: _jsx(Modal, { heading: 'This is the Modal heading', autoWidth: false, center: true, stretch: false, children: _jsx(Text, { children: "This is the content of the Modal." }, void 0) }, void 0) }, void 0));
     const pageTemplateProps = useMemo(() => {
         const branchName = args.showBranch ? args.branchName : '';
@@ -331,7 +331,7 @@ export const PageTemplatesDemo = (args) => {
                         // eslint-disable-next-line sonarjs/no-nested-switch
                         switch (id) {
                             case 'form':
-                                setContent(_jsx(Flex, { container: true, children: _jsx(OneColumnForm, {}, void 0) }, void 0));
+                                setContent(_jsx(OneColumnForm, {}, void 0));
                                 break;
                             case 'accounts':
                                 setContent(_jsx(TableDemo, {}, void 0));