@pega/cosmos-react-demos 2.1.4 → 3.0.0-dev.10.0

package/jsx/core/Icon/Icon.stories.jsx

@@ -1,8 +1,8 @@
 import { useMemo, useState, useCallback, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { defaultThemeProp, EmptyState, StyledEmptyState, Flex, Icon, icons, registerIcon, Progress, SearchInput, Text, useItemIntersection, useTheme } from '@pega/cosmos-react-core';
+import { EmptyState, Flex, Icon, icons, registerIcon, Progress, SearchInput, Text, useItemIntersection, useTheme } from '@pega/cosmos-react-core';
 import * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';
 import { createCustomIcon } from './Icon.mocks';
+import { StyledIconList, StyledIconListItem, StyledProgressContainer } from './Icon.styles';
 export default {
     title: 'Core/Icon',
     component: Icon
@@ -19,30 +19,8 @@ export const CustomIcon = () => {
 export const DynamicIcon = () => {
     return <Icon style={{ height: '5rem', width: '5rem' }} name='pega'/>;
 };
-const PAGE_SIZE = 50;
-const StyledIconList = styled.ul `
-  overflow-x: hidden;
-  overflow-y: auto;
-  list-style: none;
-  height: 100%;
-
-  ${StyledEmptyState} {
-    width: 100%;
-    height: 100%;
-  }
-`;
-const StyledIconListItem = styled.li(({ theme }) => css `
-      padding: calc(2 * ${theme.base.spacing});
-      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
-      width: 20%;
-    `);
-StyledIconListItem.defaultProps = defaultThemeProp;
-const StyledProgressContainer = styled.li `
-  position: relative;
-  height: 2.8rem;
-  width: 100%;
-`;
 export const IconList = () => {
+    const pageSize = 50;
     const [search, setSearch] = useState('');
     const totalMatches = useRef(0);
     const [currentPageIndex, setCurrentPageIndex] = useState(0);
@@ -51,7 +29,7 @@ export const IconList = () => {
         const matches = search
             ? icons.filter(icon => icon.includes(search))
             : icons;
-        const totalItemsToRender = (1 + currentPageIndex) * PAGE_SIZE;
+        const totalItemsToRender = (1 + currentPageIndex) * pageSize;
         totalMatches.current = matches.length;
         if (matches.length === 0) {
             return <EmptyState forwardedAs='li'/>;
@@ -66,7 +44,7 @@ export const IconList = () => {
         <p style={{ textAlign: 'center' }}>{icon}</p>
       </Flex>));
     }, [search, currentPageIndex]);
-    const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * PAGE_SIZE);
+    const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * pageSize);
     const itemsToLoadMore = totalMatches.current - itemsShown;
     useItemIntersection(ulRef, itemsShown, () => {
         setCurrentPageIndex(prev => 1 + prev);

package/jsx/core/Icon/Icon.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.stories.jsx","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useMemo, useState, useCallback, useRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  defaultThemeProp,\n  EmptyState,\n  StyledEmptyState,\n  Flex,\n  Icon,\n  icons,\n  IconNames,\n  registerIcon,\n  Progress,\n  SearchInput,\n  Text,\n  useItemIntersection,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';\n\nimport { createCustomIcon } from './Icon.mocks';\n\nexport default {\n  title: 'Core/Icon',\n  component: Icon\n} as Meta;\n\nregisterIcon(pegasusIcon);\n\nexport const StaticIcon = () => {\n  return (\n    <Icon style={{ height: '5rem', width: '5rem' }} name='pegasus' aria-label='Informative label' />\n  );\n};\n\nexport const CustomIcon = () => {\n  const theme = useTheme();\n\n  createCustomIcon(theme);\n\n  return (\n    <Icon style={{ height: '5rem', width: '5rem' }} name='custom-pega' aria-label='Custom icon' />\n  );\n};\n\nexport const DynamicIcon = () => {\n  return <Icon style={{ height: '5rem', width: '5rem' }} name='pega' />;\n};\n\n// Default # of icons to display in a page\nconst PAGE_SIZE = 50;\n\nconst StyledIconList = styled.ul`\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  height: 100%;\n\n  ${StyledEmptyState} {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nconst StyledIconListItem = styled.li(\n  ({ theme }) =>\n    css`\n      padding: calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      width: 20%;\n    `\n);\n\nStyledIconListItem.defaultProps = defaultThemeProp;\n\nconst StyledProgressContainer = styled.li`\n  position: relative;\n  height: 2.8rem;\n  width: 100%;\n`;\n\nexport const IconList = () => {\n  const [search, setSearch] = useState('');\n  const totalMatches = useRef(0);\n  const [currentPageIndex, setCurrentPageIndex] = useState(0);\n  const ulRef = useRef<HTMLUListElement>(null);\n\n  const listContent = useMemo(() => {\n    const matches: readonly IconNames[] = search\n      ? icons.filter(icon => icon.includes(search))\n      : icons;\n    const totalItemsToRender = (1 + currentPageIndex) * PAGE_SIZE;\n    totalMatches.current = matches.length;\n\n    if (matches.length === 0) {\n      return <EmptyState forwardedAs='li' />;\n    }\n\n    return matches.slice(0, totalItemsToRender).map(icon => (\n      <Flex\n        key={icon}\n        container={{\n          direction: 'column',\n          justify: 'center',\n          alignItems: 'center',\n          alignContent: 'center'\n        }}\n        as={StyledIconListItem}\n      >\n        <Icon style={{ height: '3rem', width: '3rem' }} name={icon} />\n        <p style={{ textAlign: 'center' }}>{icon}</p>\n      </Flex>\n    ));\n  }, [search, currentPageIndex]);\n\n  const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * PAGE_SIZE);\n  const itemsToLoadMore = totalMatches.current - itemsShown;\n\n  // When reaches to the bottom of the results, loads next PAGE_SIZE items\n  useItemIntersection(\n    ulRef,\n    itemsShown,\n    () => {\n      setCurrentPageIndex(prev => 1 + prev);\n    },\n    ':scope > li'\n  );\n\n  // on search, reset to first page and scroll to top\n  const onSearchChange = useCallback((value: string) => {\n    setSearch(value);\n    setCurrentPageIndex(0);\n    ulRef?.current?.scrollIntoView();\n  }, []);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }} style={{ height: '90vh' }}>\n      <SearchInput value={search} onSearchChange={onSearchChange} />\n      {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}\n      <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>\n        {listContent}\n        {itemsToLoadMore > 0 && (\n          <StyledProgressContainer>\n            <Progress placement='local' />\n          </StyledProgressContainer>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"Icon.stories.jsx","sourceRoot":"","sources":["../../../src/core/Icon/Icon.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState, useCallback, useRef } from 'react';\n\nimport {\n  EmptyState,\n  Flex,\n  Icon,\n  icons,\n  IconNames,\n  registerIcon,\n  Progress,\n  SearchInput,\n  Text,\n  useItemIntersection,\n  useTheme\n} from '@pega/cosmos-react-core';\nimport * as pegasusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pegasus.icon';\n\nimport { createCustomIcon } from './Icon.mocks';\nimport { StyledIconList, StyledIconListItem, StyledProgressContainer } from './Icon.styles';\n\nexport default {\n  title: 'Core/Icon',\n  component: Icon\n} as Meta;\n\nregisterIcon(pegasusIcon);\n\nexport const StaticIcon: Story = () => {\n  return (\n    <Icon style={{ height: '5rem', width: '5rem' }} name='pegasus' aria-label='Informative label' />\n  );\n};\n\nexport const CustomIcon: Story = () => {\n  const theme = useTheme();\n\n  createCustomIcon(theme);\n\n  return (\n    <Icon style={{ height: '5rem', width: '5rem' }} name='custom-pega' aria-label='Custom icon' />\n  );\n};\n\nexport const DynamicIcon: Story = () => {\n  return <Icon style={{ height: '5rem', width: '5rem' }} name='pega' />;\n};\n\nexport const IconList: Story = () => {\n  const pageSize = 50;\n\n  const [search, setSearch] = useState('');\n  const totalMatches = useRef(0);\n  const [currentPageIndex, setCurrentPageIndex] = useState(0);\n  const ulRef = useRef<HTMLUListElement>(null);\n\n  const listContent = useMemo(() => {\n    const matches: readonly IconNames[] = search\n      ? icons.filter(icon => icon.includes(search))\n      : icons;\n    const totalItemsToRender = (1 + currentPageIndex) * pageSize;\n    totalMatches.current = matches.length;\n\n    if (matches.length === 0) {\n      return <EmptyState forwardedAs='li' />;\n    }\n\n    return matches.slice(0, totalItemsToRender).map(icon => (\n      <Flex\n        key={icon}\n        container={{\n          direction: 'column',\n          justify: 'center',\n          alignItems: 'center',\n          alignContent: 'center'\n        }}\n        as={StyledIconListItem}\n      >\n        <Icon style={{ height: '3rem', width: '3rem' }} name={icon} />\n        <p style={{ textAlign: 'center' }}>{icon}</p>\n      </Flex>\n    ));\n  }, [search, currentPageIndex]);\n\n  const itemsShown = Math.min(totalMatches.current, (1 + currentPageIndex) * pageSize);\n  const itemsToLoadMore = totalMatches.current - itemsShown;\n\n  // When reaches to the bottom of the results, loads next pageSize items\n  useItemIntersection(\n    ulRef,\n    itemsShown,\n    () => {\n      setCurrentPageIndex(prev => 1 + prev);\n    },\n    ':scope > li'\n  );\n\n  // on search, reset to first page and scroll to top\n  const onSearchChange = useCallback((value: string) => {\n    setSearch(value);\n    setCurrentPageIndex(0);\n    ulRef?.current?.scrollIntoView();\n  }, []);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 1 }} style={{ height: '90vh' }}>\n      <SearchInput value={search} onSearchChange={onSearchChange} />\n      {itemsShown > 0 && <Text variant='secondary'>{totalMatches.current} results</Text>}\n      <Flex container={{ wrap: 'wrap', alignContent: 'start' }} as={StyledIconList} ref={ulRef}>\n        {listContent}\n        {itemsToLoadMore > 0 && (\n          <StyledProgressContainer>\n            <Progress placement='local' />\n          </StyledProgressContainer>\n        )}\n      </Flex>\n    </Flex>\n  );\n};\n"]}

package/jsx/core/Icon/Icon.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledIconList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledIconListItem: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledProgressContainer: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Icon.styles.d.ts.map

package/jsx/core/Icon/Icon.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Icon/Icon.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,wGAU1B,CAAC;AAEF,eAAO,MAAM,kBAAkB,wGAO9B,CAAC;AAIF,eAAO,MAAM,uBAAuB,wGAInC,CAAC"}

package/jsx/core/Icon/Icon.styles.js

@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components';
+import { defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';
+export const StyledIconList = styled.ul `
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style: none;
+  height: 100%;
+
+  ${StyledEmptyState} {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export const StyledIconListItem = styled.li(({ theme }) => css `
+      padding: calc(2 * ${theme.base.spacing});
+      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};
+      width: 20%;
+    `);
+StyledIconListItem.defaultProps = defaultThemeProp;
+export const StyledProgressContainer = styled.li `
+  position: relative;
+  height: 2.8rem;
+  width: 100%;
+`;
+//# sourceMappingURL=Icon.styles.js.map

package/jsx/core/Icon/Icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.styles.js","sourceRoot":"","sources":["../../../src/core/Icon/Icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE7E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAA;;;;;;IAMnC,gBAAgB;;;;CAInB,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,EAAE,CACzC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACZ,GAAG,CAAA;0BACmB,KAAK,CAAC,IAAI,CAAC,OAAO;uCACL,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;KAEnE,CACJ,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,EAAE,CAAA;;;;CAI/C,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, StyledEmptyState } from '@pega/cosmos-react-core';\n\nexport const StyledIconList = styled.ul`\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n  height: 100%;\n\n  ${StyledEmptyState} {\n    width: 100%;\n    height: 100%;\n  }\n`;\n\nexport const StyledIconListItem = styled.li(\n  ({ theme }) =>\n    css`\n      padding: calc(2 * ${theme.base.spacing});\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      width: 20%;\n    `\n);\n\nStyledIconListItem.defaultProps = defaultThemeProp;\n\nexport const StyledProgressContainer = styled.li`\n  position: relative;\n  height: 2.8rem;\n  width: 100%;\n`;\n"]}

package/jsx/core/IconPicker/IconPicker.stories.jsx

@@ -26,7 +26,7 @@ export default {
         readOnly: { control: { type: 'boolean' } }
     }
 };
-export const IconPickerDemo = args => {
+export const IconPickerDemo = (args) => {
     const [value, setValue] = useState(args.defaultSelection);
     useEffect(() => {
         setValue(args.defaultSelection);

package/jsx/core/IconPicker/IconPicker.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE;QACJ,gBAAgB,EAAE,SAAS;QAC3B,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,wCAAwC;QAC9C,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC/C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACnC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,IAAI,CAAC,EAAE;IAC3D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,UAAU,CACT,gBAAgB,CAAC,CAAC,KAAK,CAAC,CACxB,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,CACxB,QAAQ,CAAC,CAAC,CAAC,IAAY,EAAE,EAAE;YACzB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjB,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { IconPicker, IconPickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/IconPicker',\n  component: IconPicker,\n  args: {\n    defaultSelection: 'pegasus',\n    label: 'IconPicker input',\n    labelHidden: false,\n    info: 'Type in or click to expand the Popover',\n    placeholder: '',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    defaultSelection: { control: { type: 'text' } },\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} as Meta;\n\nexport const IconPickerDemo: Story<IconPickerProps> = args => {\n  const [value, setValue] = useState(args.defaultSelection);\n\n  useEffect(() => {\n    setValue(args.defaultSelection);\n  }, [args.defaultSelection]);\n\n  return (\n    <IconPicker\n      defaultSelection={value}\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      onSelect={(icon: string) => {\n        setValue(icon);\n      }}\n    />\n  );\n};\n"]}
+{"version":3,"file":"IconPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/IconPicker/IconPicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAmB,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE;QACJ,gBAAgB,EAAE,SAAS;QAC3B,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,wCAAwC;QAC9C,WAAW,EAAE,EAAE;QACf,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC/C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACnC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QAC1C,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,cAAc,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC9E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,CAAC,UAAU,CACT,gBAAgB,CAAC,CAAC,KAAK,CAAC,CACxB,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,CACxB,QAAQ,CAAC,CAAC,CAAC,IAAY,EAAE,EAAE;YACzB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjB,CAAC,CAAC,EACF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport { IconPicker, IconPickerProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/IconPicker',\n  component: IconPicker,\n  args: {\n    defaultSelection: 'pegasus',\n    label: 'IconPicker input',\n    labelHidden: false,\n    info: 'Type in or click to expand the Popover',\n    placeholder: '',\n    status: undefined,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    defaultSelection: { control: { type: 'text' } },\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} as Meta;\n\nexport const IconPickerDemo: Story<IconPickerProps> = (args: IconPickerProps) => {\n  const [value, setValue] = useState(args.defaultSelection);\n\n  useEffect(() => {\n    setValue(args.defaultSelection);\n  }, [args.defaultSelection]);\n\n  return (\n    <IconPicker\n      defaultSelection={value}\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      onSelect={(icon: string) => {\n        setValue(icon);\n      }}\n    />\n  );\n};\n"]}

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

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ImageDemo: () => JSX.Element;
+export declare const ImageDemo: Story;
 //# sourceMappingURL=Image.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAIxC,wBAGU;AAEV,eAAO,MAAM,SAAS,mBAIrB,CAAC"}
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAI/C,wBAGU;AAEV,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC"}

package/jsx/core/Image/Image.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Image.stories.jsx","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,uEAAuE,CAAC,GAAG,CAAC,MAAM,EAAG,CACjG,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\n\nimport { Image } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Image',\n  component: Image\n} as Meta;\n\nexport const ImageDemo = () => {\n  return (\n    <Image src='https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg' alt='Pega' />\n  );\n};\n"]}
+{"version":3,"file":"Image.stories.jsx","sourceRoot":"","sources":["../../../src/core/Image/Image.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAU,GAAG,EAAE;IACnC,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,uEAAuE,CAAC,GAAG,CAAC,MAAM,EAAG,CACjG,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Image } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Image',\n  component: Image\n} as Meta;\n\nexport const ImageDemo: Story = () => {\n  return (\n    <Image src='https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg' alt='Pega' />\n  );\n};\n"]}

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

@@ -6,4 +6,13 @@ interface InputStoryProps extends InputProps {
     showAction: boolean;
 }
 export declare const InputDemo: Story<InputStoryProps>;
+interface ConfigurableInputProps {
+    height?: string;
+    padding?: string;
+    errorStatusColor?: string;
+    successStatusColor?: string;
+    warningStatusColor?: string;
+    status?: InputProps['status'];
+}
+export declare const ConfigurableInput: Story<ConfigurableInputProps>;
 //# sourceMappingURL=Input.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAS,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE5D,wBAGU;AAEV,UAAU,eAAgB,SAAQ,UAAU;IAC1C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CA0B5C,CAAC"}
+{"version":3,"file":"Input.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAwB,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE3E,wBAGU;AAEV,UAAU,eAAgB,SAAQ,UAAU;IAC1C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CA0B5C,CAAC;AA+BF,UAAU,sBAAsB;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;CAC/B;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CA+B3D,CAAC"}

package/jsx/core/Input/Input.stories.jsx

@@ -1,4 +1,4 @@
-import { Input } from '@pega/cosmos-react-core';
+import { Configuration, Input } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Input',
     component: Input
@@ -41,4 +41,43 @@ InputDemo.argTypes = {
     disabled: { control: { type: 'boolean' } },
     readOnly: { control: { type: 'boolean' } }
 };
+export const ConfigurableInput = (args) => {
+    return (<Configuration theme={{
+            components: {
+                input: {
+                    height: args.height,
+                    padding: args.padding
+                },
+                'form-field': {
+                    error: {
+                        'status-color': args.errorStatusColor
+                    },
+                    success: {
+                        'status-color': args.successStatusColor
+                    },
+                    warning: {
+                        'status-color': args.warningStatusColor
+                    }
+                }
+            }
+        }}>
+      <Input status={args.status} label='Input' placeholder='Enter your input' info='Enter some value'/>
+    </Configuration>);
+};
+ConfigurableInput.args = {
+    height: '2rem',
+    padding: '0.5rem',
+    errorStatusColor: '#d91c29',
+    successStatusColor: '#20aa50',
+    warningStatusColor: '#fd6000',
+    status: undefined
+};
+ConfigurableInput.argTypes = {
+    height: { control: { type: 'text' } },
+    padding: { control: { type: 'text' } },
+    errorStatusColor: { control: { type: 'color' } },
+    successStatusColor: { control: { type: 'color' } },
+    warningStatusColor: { control: { type: 'color' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }
+};
 //# sourceMappingURL=Input.stories.jsx.map

package/jsx/core/Input/Input.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.jsx","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAMV,MAAM,CAAC,MAAM,SAAS,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACzE,OAAO,CACL,CAAC,KAAK,CACJ,EAAE,CAAC,YAAY,CACf,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,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,CACxB,OAAO,CAAC,CACN,IAAI,CAAC,UAAU;YACb,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,QAAQ;oBACZ,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,MAAM;iBACb;aACF;YACH,CAAC,CAAC,SAAS,CACd,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,IAAI,EAAE,MAAM;IACZ,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,kBAAkB;IACxB,WAAW,EAAE,kBAAkB;IAC/B,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,CAAC;QAC7C,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Input, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Input',\n  component: Input\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n  showAction: boolean;\n}\n\nexport const InputDemo: Story<InputStoryProps> = (args: InputStoryProps) => {\n  return (\n    <Input\n      id='input-demo'\n      type={args.type}\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      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    />\n  );\n};\n\nInputDemo.args = {\n  type: 'text',\n  showAction: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputDemo.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAction: { 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":"Input.stories.jsx","sourceRoot":"","sources":["../../../src/core/Input/Input.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Input, InputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Input',\n  component: Input\n} as Meta;\n\ninterface InputStoryProps extends InputProps {\n  showAction: boolean;\n}\n\nexport const InputDemo: Story<InputStoryProps> = (args: InputStoryProps) => {\n  return (\n    <Input\n      id='input-demo'\n      type={args.type}\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      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    />\n  );\n};\n\nInputDemo.args = {\n  type: 'text',\n  showAction: false,\n  label: 'Input',\n  labelHidden: false,\n  info: 'Enter some value',\n  placeholder: 'Enter your input',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nInputDemo.argTypes = {\n  type: {\n    options: ['text', 'password', 'email', 'url'],\n    control: { type: 'select' }\n  },\n  showAction: { 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 ConfigurableInputProps {\n  height?: string;\n  padding?: string;\n  errorStatusColor?: string;\n  successStatusColor?: string;\n  warningStatusColor?: string;\n  status?: InputProps['status'];\n}\n\nexport const ConfigurableInput: Story<ConfigurableInputProps> = (args: ConfigurableInputProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          input: {\n            height: args.height,\n            padding: args.padding\n          },\n          'form-field': {\n            error: {\n              'status-color': args.errorStatusColor\n            },\n            success: {\n              'status-color': args.successStatusColor\n            },\n            warning: {\n              'status-color': args.warningStatusColor\n            }\n          }\n        }\n      }}\n    >\n      <Input\n        status={args.status}\n        label='Input'\n        placeholder='Enter your input'\n        info='Enter some value'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableInput.args = {\n  height: '2rem',\n  padding: '0.5rem',\n  errorStatusColor: '#d91c29',\n  successStatusColor: '#20aa50',\n  warningStatusColor: '#fd6000',\n  status: undefined\n};\n\nConfigurableInput.argTypes = {\n  height: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } },\n  errorStatusColor: { control: { type: 'color' } },\n  successStatusColor: { control: { type: 'color' } },\n  warningStatusColor: { control: { type: 'color' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } }\n};\n"]}

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

@@ -3,4 +3,8 @@ import { LabelProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const LabelDemo: Story<LabelProps>;
+interface ConfigurableLabelProps {
+    fontSize?: string;
+}
+export declare const ConfigurableLabel: Story<ConfigurableLabelProps>;
 //# sourceMappingURL=Label.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAS,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE5D,wBAGU;AAEV,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,UAAU,CAEvC,CAAC"}
+{"version":3,"file":"Label.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAwB,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE3E,wBAGU;AAEV,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,UAAU,CAEvC,CAAC;AAUF,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAc3D,CAAC"}

package/jsx/core/Label/Label.stories.jsx

@@ -1,4 +1,4 @@
-import { Label } from '@pega/cosmos-react-core';
+import { Configuration, Label } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Label',
     component: Label
@@ -12,4 +12,21 @@ LabelDemo.args = {
 LabelDemo.argTypes = {
     labelHidden: { control: { type: 'boolean' } }
 };
+export const ConfigurableLabel = (args) => {
+    return (<Configuration theme={{
+            components: {
+                label: {
+                    'font-size': args.fontSize
+                }
+            }
+        }}>
+      <Label>Label</Label>
+    </Configuration>);
+};
+ConfigurableLabel.args = {
+    fontSize: 'xs'
+};
+ConfigurableLabel.argTypes = {
+    fontSize: { options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'], control: { type: 'select' } }
+};
 //# sourceMappingURL=Label.stories.jsx.map

package/jsx/core/Label/Label.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Label.stories.jsx","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAC/D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Label, LabelProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Label',\n  component: Label\n} as Meta;\n\nexport const LabelDemo: Story<LabelProps> = (args: LabelProps) => {\n  return <Label labelHidden={args.labelHidden}>Label</Label>;\n};\n\nLabelDemo.args = {\n  labelHidden: false\n};\n\nLabelDemo.argTypes = {\n  labelHidden: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Label.stories.jsx","sourceRoot":"","sources":["../../../src/core/Label/Label.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE3E,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,SAAS,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAC/D,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,SAAS,CAAC,IAAI,GAAG;IACf,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,SAAS,CAAC,QAAQ,GAAG;IACnB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAMF,MAAM,CAAC,MAAM,iBAAiB,GAAkC,CAAC,IAA4B,EAAE,EAAE;IAC/F,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,KAAK,EAAE;oBACL,WAAW,EAAE,IAAI,CAAC,QAAQ;iBAC3B;aACF;SACF,CAAC,CAEF;MAAA,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CACrB;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,IAAI,GAAG;IACvB,QAAQ,EAAE,IAAI;CACf,CAAC;AAEF,iBAAiB,CAAC,QAAQ,GAAG;IAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9F,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Label, LabelProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Label',\n  component: Label\n} as Meta;\n\nexport const LabelDemo: Story<LabelProps> = (args: LabelProps) => {\n  return <Label labelHidden={args.labelHidden}>Label</Label>;\n};\n\nLabelDemo.args = {\n  labelHidden: false\n};\n\nLabelDemo.argTypes = {\n  labelHidden: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableLabelProps {\n  fontSize?: string;\n}\n\nexport const ConfigurableLabel: Story<ConfigurableLabelProps> = (args: ConfigurableLabelProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          label: {\n            'font-size': args.fontSize\n          }\n        }\n      }}\n    >\n      <Label>Label</Label>\n    </Configuration>\n  );\n};\n\nConfigurableLabel.args = {\n  fontSize: 'xs'\n};\n\nConfigurableLabel.argTypes = {\n  fontSize: { options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'], control: { type: 'select' } }\n};\n"]}

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

@@ -1,18 +1,8 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { LinkProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const LinkDemo: Story<LinkProps>;
-export declare const LinkWithIconDemo: {
-    (): JSX.Element;
-    argTypes: {
-        variant: {
-            table: {
-                disable: boolean;
-            };
-        };
-    };
-};
+export declare const LinkWithIconDemo: Story;
 export declare const PreviewableLink: Story<LinkProps>;
 //# sourceMappingURL=Link.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAkC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAKpF,wBAYU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;CAoB5B,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,SAAS,CAM5C,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAkC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAKpF,wBAYU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,SAAS,CAM5C,CAAC"}

package/jsx/core/Link/Link.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.jsx","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,CACrE;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IACnC,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CACxC;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACrE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACvE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACpE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAClE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAClE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CACjF;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const LinkWithIconDemo = () => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Link href='http://www.pega.com' variant='primary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='simple' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='link' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='text' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n    </Flex>\n  );\n};\n\nLinkWithIconDemo.argTypes = {\n  variant: { table: { disable: true } }\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n"]}
+{"version":3,"file":"Link.stories.jsx","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,QAAQ,CACrE;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU,GAAG,EAAE;IAC1C,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CACxC;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACrE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACvE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CACpE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAClE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAClE;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,EACnB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,CAAC,IAAI,CAAC,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CACjF;;IACF,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const LinkWithIconDemo: Story = () => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Link href='http://www.pega.com' variant='primary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='simple' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='link' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='text' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n    </Flex>\n  );\n};\n\nLinkWithIconDemo.argTypes = {\n  variant: { table: { disable: true } }\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n"]}

package/jsx/core/List/CommaSeparatedList.stories.d.ts

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

package/jsx/core/List/CommaSeparatedList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommaSeparatedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAsB,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;;AAEtF,wBAGU;AAEV,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,uBAAuB,CAqBjE,CAAC"}
+{"version":3,"file":"CommaSeparatedList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAsB,uBAAuB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAElG,wBAGU;AAEV,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,UAAU,CAAC,uBAAuB,EAAE,OAAO,CAAC,CAqBtF,CAAC"}

package/jsx/core/List/CommaSeparatedList.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"CommaSeparatedList.stories.jsx","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAA2B,MAAM,yBAAyB,CAAC;AAEtF,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,kBAAkB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,sBAAsB,GAAmC,CACpE,IAA6B,EAC7B,EAAE;IACF,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,OAAO,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;AACrE,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF,sBAAsB,CAAC,QAAQ,GAAG;IAChC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { CommaSeparatedList, CommaSeparatedListProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: CommaSeparatedList\n} as Meta;\n\nexport const CommaSeparatedListDemo: Story<CommaSeparatedListProps> = (\n  args: CommaSeparatedListProps\n) => {\n  const items = [\n    'Value 1',\n    'Value 2',\n    'Value 3',\n    'Value 4',\n    'Value 5',\n    'Value 6',\n    'Value 7',\n    'Value 8',\n    'Value 9',\n    'Value 10',\n    'Value 11',\n    'Value 12',\n    'Value 13',\n    'Value 14'\n  ];\n\n  return <CommaSeparatedList heading={args.heading} items={items} />;\n};\n\nCommaSeparatedListDemo.args = {\n  heading: 'List Heading'\n};\n\nCommaSeparatedListDemo.argTypes = {\n  heading: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"CommaSeparatedList.stories.jsx","sourceRoot":"","sources":["../../../src/core/List/CommaSeparatedList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAuC,MAAM,yBAAyB,CAAC;AAElG,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,kBAAkB;CACtB,CAAC;AAEV,MAAM,CAAC,MAAM,sBAAsB,GAAwD,CACzF,IAAkD,EAClD,EAAE;IACF,MAAM,KAAK,GAAG;QACZ,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,SAAS;QACT,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;QACV,UAAU;KACX,CAAC;IAEF,OAAO,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;AACrE,CAAC,CAAC;AAEF,sBAAsB,CAAC,IAAI,GAAG;IAC5B,OAAO,EAAE,cAAc;CACxB,CAAC;AAEF,sBAAsB,CAAC,QAAQ,GAAG;IAChC,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { CommaSeparatedList, CommaSeparatedListProps, OmitStrict } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/List',\n  component: CommaSeparatedList\n} as Meta;\n\nexport const CommaSeparatedListDemo: Story<OmitStrict<CommaSeparatedListProps, 'items'>> = (\n  args: OmitStrict<CommaSeparatedListProps, 'items'>\n) => {\n  const items = [\n    'Value 1',\n    'Value 2',\n    'Value 3',\n    'Value 4',\n    'Value 5',\n    'Value 6',\n    'Value 7',\n    'Value 8',\n    'Value 9',\n    'Value 10',\n    'Value 11',\n    'Value 12',\n    'Value 13',\n    'Value 14'\n  ];\n\n  return <CommaSeparatedList heading={args.heading} items={items} />;\n};\n\nCommaSeparatedListDemo.args = {\n  heading: 'List Heading'\n};\n\nCommaSeparatedListDemo.argTypes = {\n  heading: { control: { type: 'text' } }\n};\n"]}

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

@@ -0,0 +1,9 @@
+import { Dispatch } from 'react';
+import { Action } from '@pega/cosmos-react-core';
+import { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';
+export declare const actions: Action[];
+export declare const mockViews: ViewSelectorProps['views'];
+export declare const StagedStateDispatchContext: import("react").Context<Dispatch<object>>;
+export declare const FilterRenderer: () => JSX.Element;
+export declare const GroupRenderer: () => JSX.Element;
+//# sourceMappingURL=ListToolbar.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,QAAQ,EAAwB,MAAM,OAAO,CAAC;AAEnF,OAAO,EAGL,MAAM,EAQP,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sEAAsE,CAAC;AAEzG,eAAO,MAAM,OAAO,EAAE,MAAM,EAIzB,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,OAAO,CAIhD,CAAC;AAEF,eAAO,MAAM,0BAA0B,2CAA4C,CAAC;AA6DpF,eAAO,MAAM,cAAc,mBAoB1B,CAAC;AAEF,eAAO,MAAM,aAAa,mBAEzB,CAAC"}

package/jsx/core/ListToolbar/ListToolbar.mocks.jsx

@@ -0,0 +1,71 @@
+import { createContext, useContext, useState } from 'react';
+import { useAfterInitialEffect, useUID, Input, Select, Option, Flex, Button, Icon, Grid } from '@pega/cosmos-react-core';
+export const actions = ['Action 1', 'Action 2', 'Action 3'].map(text => ({
+    text,
+    id: text,
+    icon: 'filter'
+}));
+export const mockViews = [
+    { id: '1', text: 'Data view 1', selected: true },
+    { id: '2', text: 'Data view 2', selected: false },
+    { id: '3', text: 'Data view 3', selected: false }
+];
+export const StagedStateDispatchContext = createContext(() => { });
+const mockFields = Array.from({ length: 10 }, (_, i) => `Field ${i + 1}`);
+const MockCondition = () => {
+    const setStagedState = useContext(StagedStateDispatchContext);
+    const conditionId = useUID();
+    const [localState, setLocalState] = useState({
+        lhs: 'Field 1',
+        comparator: 'Equals',
+        rhs: ''
+    });
+    useAfterInitialEffect(() => {
+        setStagedState({
+            [conditionId]: localState
+        });
+    }, [conditionId, localState, setStagedState]);
+    return (<Grid container={{ gap: 2, cols: 'repeat(3, minmax(0, 1fr))' }}>
+      <Select label='Field' onChange={(e) => {
+            setLocalState(cur => ({ ...cur, lhs: e.target.value }));
+        }}>
+        {mockFields.map(field => {
+            return (<Option value={field} key={field}>
+              {field}
+            </Option>);
+        })}
+      </Select>
+      <Select label='Comparator' onChange={(e) => {
+            setLocalState(cur => ({ ...cur, comparator: e.target.value }));
+        }}>
+        {['Equals', 'Contains', 'Starts with'].map(comparator => {
+            return (<Option value={comparator} key={comparator}>
+              {comparator}
+            </Option>);
+        })}
+      </Select>
+      <Input label='Value' value={localState.rhs} onChange={(e) => {
+            setLocalState(cur => ({ ...cur, rhs: e.target.value }));
+        }}/>
+    </Grid>);
+};
+export const FilterRenderer = () => {
+    const [conditions, setConditions] = useState(() => [<MockCondition key={1}/>]);
+    return (<Flex container={{ direction: 'column', gap: 2 }}>
+      {conditions}
+      <div>
+        <Button variant='link' onClick={() => {
+            setConditions(cur => [...cur, <MockCondition key={cur.length + 1}/>]);
+        }}>
+          <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>
+            <Icon name='plus'/>
+            <span>Add condition</span>
+          </Flex>
+        </Button>
+      </div>
+    </Flex>);
+};
+export const GroupRenderer = () => {
+    return <>GroupBy content goes here...</>;
+};
+//# sourceMappingURL=ListToolbar.mocks.jsx.map

package/jsx/core/ListToolbar/ListToolbar.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.mocks.jsx","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, createContext, Dispatch, useContext, useState } from 'react';\n\nimport {\n  useAfterInitialEffect,\n  useUID,\n  Action,\n  Input,\n  Select,\n  Option,\n  Flex,\n  Button,\n  Icon,\n  Grid\n} from '@pega/cosmos-react-core';\nimport { ViewSelectorProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nexport const actions: Action[] = ['Action 1', 'Action 2', 'Action 3'].map(text => ({\n  text,\n  id: text,\n  icon: 'filter'\n}));\n\nexport const mockViews: ViewSelectorProps['views'] = [\n  { id: '1', text: 'Data view 1', selected: true },\n  { id: '2', text: 'Data view 2', selected: false },\n  { id: '3', text: 'Data view 3', selected: false }\n];\n\nexport const StagedStateDispatchContext = createContext<Dispatch<object>>(() => {});\n\nconst mockFields = Array.from({ length: 10 }, (_, i) => `Field ${i + 1}`);\n\nconst MockCondition = () => {\n  const setStagedState = useContext(StagedStateDispatchContext);\n  const conditionId = useUID();\n\n  const [localState, setLocalState] = useState({\n    lhs: 'Field 1',\n    comparator: 'Equals',\n    rhs: ''\n  });\n\n  useAfterInitialEffect(() => {\n    setStagedState({\n      [conditionId]: localState\n    });\n  }, [conditionId, localState, setStagedState]);\n\n  return (\n    <Grid container={{ gap: 2, cols: 'repeat(3, minmax(0, 1fr))' }}>\n      <Select\n        label='Field'\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          setLocalState(cur => ({ ...cur, lhs: e.target.value }));\n        }}\n      >\n        {mockFields.map(field => {\n          return (\n            <Option value={field} key={field}>\n              {field}\n            </Option>\n          );\n        })}\n      </Select>\n      <Select\n        label='Comparator'\n        onChange={(e: ChangeEvent<HTMLSelectElement>) => {\n          setLocalState(cur => ({ ...cur, comparator: e.target.value }));\n        }}\n      >\n        {['Equals', 'Contains', 'Starts with'].map(comparator => {\n          return (\n            <Option value={comparator} key={comparator}>\n              {comparator}\n            </Option>\n          );\n        })}\n      </Select>\n      <Input\n        label='Value'\n        value={localState.rhs}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          setLocalState(cur => ({ ...cur, rhs: e.target.value }));\n        }}\n      />\n    </Grid>\n  );\n};\n\nexport const FilterRenderer = () => {\n  const [conditions, setConditions] = useState<JSX.Element[]>(() => [<MockCondition key={1} />]);\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      {conditions}\n      <div>\n        <Button\n          variant='link'\n          onClick={() => {\n            setConditions(cur => [...cur, <MockCondition key={cur.length + 1} />]);\n          }}\n        >\n          <Flex container={{ inline: true, alignItems: 'start', gap: 1 }} as='span'>\n            <Icon name='plus' />\n            <span>Add condition</span>\n          </Flex>\n        </Button>\n      </div>\n    </Flex>\n  );\n};\n\nexport const GroupRenderer = () => {\n  return <>GroupBy content goes here...</>;\n};\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAe/C,wBAGU;AAIV,eAAO,MAAM,eAAe,EAAE,KAsF7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC"}