@pega/cosmos-react-demos 5.0.0-dev.4.9 → 5.0.0-dev.6.0

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

@@ -0,0 +1,9 @@
+import type { StoryFn } from '@storybook/react';
+import type { CompositeInputProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface CompositeStoryProps extends CompositeInputProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const CompositeInputDemo: StoryFn<CompositeStoryProps>;
+//# sourceMappingURL=CompositeInput.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAInE,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,mBAAmB;IACvD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,mBAAmB,CAoC3D,CAAC"}

package/jsx/core/CompositeInput/CompositeInput.stories.jsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { CompositeInput } from '@pega/cosmos-react-core';
+import { FormRenderer } from './CompositeInput.mocks';
+export default {
+    title: 'Core/CompositeInput',
+    component: CompositeInput
+};
+export const CompositeInputDemo = (args) => {
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const [value, setValue] = useState('');
+    return (<CompositeInput {...args} value={value} additionalInfo={args.showAdditionalInfo
+            ? { heading: 'Additional Info', content: 'Please enter your full name.' }
+            : undefined} dialog={{
+            renderer: FormRenderer,
+            rendererProps: {
+                firstName,
+                onFirstNameChange: setFirstName,
+                lastName,
+                onLastNameChange: setLastName
+            },
+            onApply: ({ close }) => {
+                setValue([firstName, lastName].join(' '));
+                close();
+            },
+            onCancel: ({ close }) => {
+                const [first, last] = value.split(' ');
+                setFirstName(first);
+                setLastName(last);
+                close();
+            }
+        }} onClear={() => setValue('')}/>);
+};
+CompositeInputDemo.args = {
+    label: 'Full name',
+    labelHidden: false,
+    info: 'Put your full name',
+    status: undefined,
+    required: false,
+    disabled: false,
+    placeholder: '',
+    showAdditionalInfo: false
+};
+CompositeInputDemo.argTypes = {
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    placeholder: { control: { type: 'text' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=CompositeInput.stories.jsx.map

package/jsx/core/CompositeInput/CompositeInput.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInput.stories.jsx","sourceRoot":"","sources":["../../../src/core/CompositeInput/CompositeInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { CompositeInput } from '@pega/cosmos-react-core';\nimport type { CompositeInputProps } from '@pega/cosmos-react-core';\n\nimport { FormRenderer } from './CompositeInput.mocks';\n\nexport default {\n  title: 'Core/CompositeInput',\n  component: CompositeInput\n} as Meta;\n\ninterface CompositeStoryProps extends CompositeInputProps {\n  showAdditionalInfo?: boolean;\n}\n\nexport const CompositeInputDemo: StoryFn<CompositeStoryProps> = (args: CompositeStoryProps) => {\n  const [firstName, setFirstName] = useState('');\n  const [lastName, setLastName] = useState('');\n  const [value, setValue] = useState('');\n\n  return (\n    <CompositeInput\n      {...args}\n      value={value}\n      additionalInfo={\n        args.showAdditionalInfo\n          ? { heading: 'Additional Info', content: 'Please enter your full name.' }\n          : undefined\n      }\n      dialog={{\n        renderer: FormRenderer,\n        rendererProps: {\n          firstName,\n          onFirstNameChange: setFirstName,\n          lastName,\n          onLastNameChange: setLastName\n        },\n        onApply: ({ close }) => {\n          setValue([firstName, lastName].join(' '));\n          close();\n        },\n        onCancel: ({ close }) => {\n          const [first, last] = value.split(' ');\n          setFirstName(first);\n          setLastName(last);\n          close();\n        }\n      }}\n      onClear={() => setValue('')}\n    />\n  );\n};\n\nCompositeInputDemo.args = {\n  label: 'Full name',\n  labelHidden: false,\n  info: 'Put your full name',\n  status: undefined,\n  required: false,\n  disabled: false,\n  placeholder: '',\n  showAdditionalInfo: false\n};\n\nCompositeInputDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  placeholder: { control: { type: 'text' } },\n  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const FlipFlop: ({ flipFlop, first, second }: {
+    flipFlop: boolean;
+    first: string;
+    second: string;
+}) => import("react").JSX.Element;
+//# sourceMappingURL=Configuration.mocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.mocks.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,QAAQ;cAKT,OAAO;WACV,MAAM;YACL,MAAM;iCAWf,CAAC"}

package/jsx/core/Configuration/Configuration.mocks.jsx

@@ -0,0 +1,9 @@
+import { BoldSpan } from './Configuration.styles';
+export const FlipFlop = ({ flipFlop, first, second }) => {
+    return flipFlop ? (<>
+      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}
+    </>) : (<>
+      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>
+    </>);
+};
+//# sourceMappingURL=Configuration.mocks.jsx.map

package/jsx/core/Configuration/Configuration.mocks.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,EACL,MAAM,EAKP,EAAE,EAAE;IACH,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,EACE;MAAA,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAC7C;IAAA,GAAG,CACJ,CAAC,CAAC,CAAC,CACF,EACE;MAAA,CAAC,KAAK,CAAE,QAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,CAC7C;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { BoldSpan } from './Configuration.styles';\n\nexport const FlipFlop = ({\n  flipFlop,\n  first,\n  second\n}: {\n  flipFlop: boolean;\n  first: string;\n  second: string;\n}) => {\n  return flipFlop ? (\n    <>\n      <BoldSpan>{first}</BoldSpan>&nbsp;→ {second}\n    </>\n  ) : (\n    <>\n      {first} ←&nbsp;<BoldSpan>{second}</BoldSpan>\n    </>\n  );\n};\n"]}

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

@@ -0,0 +1,25 @@
+import type { StoryFn } from '@storybook/react';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const ThemedForm: StoryFn<{
+    theme: 'default' | 'theme1';
+}>;
+export declare const ThemingHierarchy: StoryFn;
+interface ConfigurableBaseThemeProps {
+    interactive?: string;
+}
+export declare const ConfigurableBaseTheme: StoryFn<ConfigurableBaseThemeProps>;
+interface ConfigurableComponentThemeProps {
+    buttonColor?: string;
+    checkedBackgroundColor?: string;
+}
+export declare const ConfigurableComponentTheme: StoryFn<ConfigurableComponentThemeProps>;
+interface ConfigurableLocaleProps {
+    locale?: string;
+}
+export declare const ConfigurableLocale: StoryFn<ConfigurableLocaleProps>;
+interface ConfigurableTranslationsProps {
+    placeholderTranslation?: string;
+}
+export declare const ConfigurableTranslations: StoryFn<ConfigurableTranslationsProps>;
+//# sourceMappingURL=Configuration.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;AAqBtD,wBASU;AAEV,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC;IAAE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAA;CAAE,CA+B/D,CAAC;AAUF,eAAO,MAAM,gBAAgB,EAAE,OAyE9B,CAAC;AAEF,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,0BAA0B,CAsBrE,CAAC;AAUF,UAAU,+BAA+B;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,0BAA0B,EAAE,OAAO,CAAC,+BAA+B,CA2B/E,CAAC;AAYF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,uBAAuB,CAU/D,CAAC;AAUF,UAAU,6BAA6B;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB,EAAE,OAAO,CAAC,6BAA6B,CAsB3E,CAAC"}

package/jsx/core/Configuration/Configuration.stories.jsx

@@ -0,0 +1,196 @@
+import { useState } from 'react';
+import { Button, Configuration, resetToInitial, Flex, Checkbox, RadioButton, DateInput, SearchInput, Text } from '@pega/cosmos-react-core';
+import { FormContent } from '../Form/Form.mocks';
+import { buttonStyles, StyledFieldset } from './Configuration.styles';
+import { FlipFlop } from './Configuration.mocks';
+export default {
+    title: 'Core/Configuration',
+    component: Configuration,
+    excludeStories: [
+        'ConfigurableBaseTheme',
+        'ConfigurableComponentTheme',
+        'ConfigurableLocale',
+        'ConfigurableTranslations'
+    ]
+};
+export const ThemedForm = (args) => {
+    const themes = {
+        default: {},
+        theme1: {
+            base: {
+                palette: {
+                    interactive: '#AC75F0'
+                }
+            },
+            components: {
+                button: {
+                    'border-radius': 1
+                },
+                'form-control': {
+                    'background-color': '#80008033',
+                    'border-color': 'purple'
+                },
+                input: {
+                    height: '50px'
+                }
+            }
+        }
+    };
+    return (<Configuration theme={themes[args.theme]}>
+      <FormContent cols={1} showActions={false}/>
+    </Configuration>);
+};
+ThemedForm.args = {
+    theme: 'default'
+};
+ThemedForm.argTypes = {
+    theme: { options: ['default', 'theme1'], control: { type: 'select' } }
+};
+export const ThemingHierarchy = () => {
+    const [redOrOrange, setRedOrOrange] = useState(true);
+    const [greenOrPurple, setGreenOrPurple] = useState(true);
+    return (<StyledFieldset style={{ margin: 0, textAlign: 'center' }}>
+      <legend>Initial Theme</legend>
+      <Button style={buttonStyles} variant='primary'>
+        Base interactive
+      </Button>
+      <StyledFieldset>
+        <legend>Override Interactive to</legend>
+        <Configuration theme={{
+            base: {
+                palette: {
+                    interactive: redOrOrange ? 'red' : 'darkorange'
+                }
+            }
+        }}>
+          <Button style={buttonStyles} variant='primary' onClick={() => setRedOrOrange(val => !val)}>
+            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange'/>
+          </Button>
+          <StyledFieldset>
+            <legend>Override Button Primary BG to</legend>
+            <Configuration theme={{
+            components: {
+                button: { color: greenOrPurple ? 'green' : 'purple' }
+            }
+        }}>
+              <Button style={buttonStyles} variant='primary' onClick={() => setGreenOrPurple(val => !val)}>
+                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple'/>
+              </Button>
+              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>
+                Secondary still inherits interactive
+              </Button>
+              <StyledFieldset>
+                <legend>Reset Button BG</legend>
+                <Configuration theme={{
+            components: { button: { color: resetToInitial } }
+        }}>
+                  <Button style={buttonStyles} variant='primary'>
+                    Inherited from interactive
+                  </Button>
+                  <StyledFieldset>
+                    <legend>Reset Interactive</legend>
+                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>
+                      <Button style={buttonStyles} variant='primary'>
+                        Inherited from base
+                      </Button>
+                    </Configuration>
+                  </StyledFieldset>
+                </Configuration>
+              </StyledFieldset>
+            </Configuration>
+          </StyledFieldset>
+        </Configuration>
+      </StyledFieldset>
+    </StyledFieldset>);
+};
+export const ConfigurableBaseTheme = (args) => {
+    return (<Configuration theme={{
+            base: {
+                palette: {
+                    interactive: args.interactive
+                }
+            }
+        }}>
+      <Flex container={{ gap: 2, justify: 'start' }}>
+        <Button variant='primary'>Primary</Button>
+        <Flex item={{ shrink: 1, alignSelf: 'center' }}>
+          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked/>
+        </Flex>
+        <RadioButton id='radio-button' label='Radio Option' defaultChecked/>
+      </Flex>
+    </Configuration>);
+};
+ConfigurableBaseTheme.args = {
+    interactive: '#681fc3'
+};
+ConfigurableBaseTheme.argTypes = {
+    interactive: { control: { type: 'color' } }
+};
+export const ConfigurableComponentTheme = (args) => {
+    return (<Configuration theme={{
+            components: {
+                button: {
+                    color: args.buttonColor
+                },
+                'radio-check': {
+                    ':checked': {
+                        'background-color': args.checkedBackgroundColor
+                    }
+                }
+            }
+        }}>
+      <Flex container={{ gap: 2, justify: 'start' }}>
+        <Button variant='primary'>Primary</Button>
+        <Flex item={{ shrink: 1, alignSelf: 'center' }}>
+          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked/>
+        </Flex>
+        <RadioButton id='radio-button' label='Radio Option' defaultChecked/>
+      </Flex>
+    </Configuration>);
+};
+ConfigurableComponentTheme.args = {
+    buttonColor: '#681fc3',
+    checkedBackgroundColor: '#20aa50'
+};
+ConfigurableComponentTheme.argTypes = {
+    buttonColor: { control: { type: 'color' } },
+    checkedBackgroundColor: { control: { type: 'color' } }
+};
+export const ConfigurableLocale = (args) => {
+    return (<Configuration locale={args.locale}>
+      <Flex container={{ direction: 'column', gap: 2 }}>
+        <DateInput label='Date Input with locale support' value={new Date()}/>
+      </Flex>
+    </Configuration>);
+};
+ConfigurableLocale.args = {
+    locale: 'en-US'
+};
+ConfigurableLocale.argTypes = {
+    locale: { options: ['en-US', 'pl', 'fr', 'hu', 'de-DE'], control: { type: 'select' } }
+};
+export const ConfigurableTranslations = (args) => {
+    const spanishTranslation = {
+        search_placeholder_default: args.placeholderTranslation
+    };
+    return (<Flex container={{ gap: 4 }}>
+      <Flex container={{ direction: 'column' }}>
+        <Text variant='h4'>Default</Text>
+        <SearchInput />
+      </Flex>
+
+      <Configuration translations={spanishTranslation}>
+        <Flex container={{ direction: 'column' }}>
+          <Text variant='h4'>Translated</Text>
+          <SearchInput />
+        </Flex>
+      </Configuration>
+    </Flex>);
+};
+ConfigurableTranslations.args = {
+    placeholderTranslation: 'Buscar...'
+};
+ConfigurableTranslations.argTypes = {
+    placeholderTranslation: { control: { type: 'text' } }
+};
+//# sourceMappingURL=Configuration.stories.jsx.map

package/jsx/core/Configuration/Configuration.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.stories.jsx","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  Configuration,\n  resetToInitial,\n  Flex,\n  Checkbox,\n  RadioButton,\n  DateInput,\n  SearchInput,\n  Text\n} from '@pega/cosmos-react-core';\nimport type { DefaultSettableTheme } from '@pega/cosmos-react-core';\n\nimport { FormContent } from '../Form/Form.mocks';\n\nimport { buttonStyles, StyledFieldset } from './Configuration.styles';\nimport { FlipFlop } from './Configuration.mocks';\n\nexport default {\n  title: 'Core/Configuration',\n  component: Configuration,\n  excludeStories: [\n    'ConfigurableBaseTheme',\n    'ConfigurableComponentTheme',\n    'ConfigurableLocale',\n    'ConfigurableTranslations'\n  ]\n} as Meta;\n\nexport const ThemedForm: StoryFn<{ theme: 'default' | 'theme1' }> = (args: {\n  theme: 'default' | 'theme1';\n}) => {\n  const themes: Record<string, DefaultSettableTheme> = {\n    default: {},\n    theme1: {\n      base: {\n        palette: {\n          interactive: '#AC75F0'\n        }\n      },\n      components: {\n        button: {\n          'border-radius': 1\n        },\n        'form-control': {\n          'background-color': '#80008033',\n          'border-color': 'purple'\n        },\n        input: {\n          height: '50px'\n        }\n      }\n    }\n  };\n\n  return (\n    <Configuration theme={themes[args.theme]}>\n      <FormContent cols={1} showActions={false} />\n    </Configuration>\n  );\n};\n\nThemedForm.args = {\n  theme: 'default'\n};\n\nThemedForm.argTypes = {\n  theme: { options: ['default', 'theme1'], control: { type: 'select' } }\n};\n\nexport const ThemingHierarchy: StoryFn = () => {\n  const [redOrOrange, setRedOrOrange] = useState(true);\n  const [greenOrPurple, setGreenOrPurple] = useState(true);\n\n  return (\n    <StyledFieldset style={{ margin: 0, textAlign: 'center' }}>\n      <legend>Initial Theme</legend>\n      <Button style={buttonStyles} variant='primary'>\n        Base interactive\n      </Button>\n      <StyledFieldset>\n        <legend>Override Interactive to</legend>\n        <Configuration\n          theme={{\n            base: {\n              palette: {\n                interactive: redOrOrange ? 'red' : 'darkorange'\n              }\n            }\n          }}\n        >\n          <Button\n            style={buttonStyles}\n            variant='primary'\n            onClick={() => setRedOrOrange(val => !val)}\n          >\n            <FlipFlop flipFlop={redOrOrange} first='Red' second='Orange' />\n          </Button>\n          <StyledFieldset>\n            <legend>Override Button Primary BG to</legend>\n            <Configuration\n              theme={{\n                components: {\n                  button: { color: greenOrPurple ? 'green' : 'purple' }\n                }\n              }}\n            >\n              <Button\n                style={buttonStyles}\n                variant='primary'\n                onClick={() => setGreenOrPurple(val => !val)}\n              >\n                <FlipFlop flipFlop={greenOrPurple} first='Green' second='Purple' />\n              </Button>\n              <Button style={{ ...buttonStyles, marginTop: '1rem' }} variant='secondary'>\n                Secondary still inherits interactive\n              </Button>\n              <StyledFieldset>\n                <legend>Reset Button BG</legend>\n                <Configuration\n                  theme={{\n                    components: { button: { color: resetToInitial } }\n                  }}\n                >\n                  <Button style={buttonStyles} variant='primary'>\n                    Inherited from interactive\n                  </Button>\n                  <StyledFieldset>\n                    <legend>Reset Interactive</legend>\n                    <Configuration theme={{ base: { palette: { interactive: resetToInitial } } }}>\n                      <Button style={buttonStyles} variant='primary'>\n                        Inherited from base\n                      </Button>\n                    </Configuration>\n                  </StyledFieldset>\n                </Configuration>\n              </StyledFieldset>\n            </Configuration>\n          </StyledFieldset>\n        </Configuration>\n      </StyledFieldset>\n    </StyledFieldset>\n  );\n};\n\ninterface ConfigurableBaseThemeProps {\n  interactive?: string;\n}\n\nexport const ConfigurableBaseTheme: StoryFn<ConfigurableBaseThemeProps> = (\n  args: ConfigurableBaseThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        base: {\n          palette: {\n            interactive: args.interactive\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableBaseTheme.args = {\n  interactive: '#681fc3'\n};\n\nConfigurableBaseTheme.argTypes = {\n  interactive: { control: { type: 'color' } }\n};\n\ninterface ConfigurableComponentThemeProps {\n  buttonColor?: string;\n  checkedBackgroundColor?: string;\n}\n\nexport const ConfigurableComponentTheme: StoryFn<ConfigurableComponentThemeProps> = (\n  args: ConfigurableComponentThemeProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            color: args.buttonColor\n          },\n          'radio-check': {\n            ':checked': {\n              'background-color': args.checkedBackgroundColor\n            }\n          }\n        }\n      }}\n    >\n      <Flex container={{ gap: 2, justify: 'start' }}>\n        <Button variant='primary'>Primary</Button>\n        <Flex item={{ shrink: 1, alignSelf: 'center' }}>\n          <Checkbox id='checkbox' label='Checkbox Option' defaultChecked />\n        </Flex>\n        <RadioButton id='radio-button' label='Radio Option' defaultChecked />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableComponentTheme.args = {\n  buttonColor: '#681fc3',\n  checkedBackgroundColor: '#20aa50'\n};\n\nConfigurableComponentTheme.argTypes = {\n  buttonColor: { control: { type: 'color' } },\n  checkedBackgroundColor: { control: { type: 'color' } }\n};\n\ninterface ConfigurableLocaleProps {\n  locale?: string;\n}\n\nexport const ConfigurableLocale: StoryFn<ConfigurableLocaleProps> = (\n  args: ConfigurableLocaleProps\n) => {\n  return (\n    <Configuration locale={args.locale}>\n      <Flex container={{ direction: 'column', gap: 2 }}>\n        <DateInput label='Date Input with locale support' value={new Date()} />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableLocale.args = {\n  locale: 'en-US'\n};\n\nConfigurableLocale.argTypes = {\n  locale: { options: ['en-US', 'pl', 'fr', 'hu', 'de-DE'], control: { type: 'select' } }\n};\n\ninterface ConfigurableTranslationsProps {\n  placeholderTranslation?: string;\n}\n\nexport const ConfigurableTranslations: StoryFn<ConfigurableTranslationsProps> = (\n  args: ConfigurableTranslationsProps\n) => {\n  const spanishTranslation = {\n    search_placeholder_default: args.placeholderTranslation\n  };\n\n  return (\n    <Flex container={{ gap: 4 }}>\n      <Flex container={{ direction: 'column' }}>\n        <Text variant='h4'>Default</Text>\n        <SearchInput />\n      </Flex>\n\n      <Configuration translations={spanishTranslation}>\n        <Flex container={{ direction: 'column' }}>\n          <Text variant='h4'>Translated</Text>\n          <SearchInput />\n        </Flex>\n      </Configuration>\n    </Flex>\n  );\n};\n\nConfigurableTranslations.args = {\n  placeholderTranslation: 'Buscar...'\n};\n\nConfigurableTranslations.argTypes = {\n  placeholderTranslation: { control: { type: 'text' } }\n};\n"]}

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

@@ -0,0 +1,6 @@
+export declare const buttonStyles: {
+    width: string;
+};
+export declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", import("styled-components").DefaultTheme, {}, never>;
+export declare const BoldSpan: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=Configuration.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;CAExB,CAAC;AAEF,eAAO,MAAM,cAAc,8GAG1B,CAAC;AAEF,eAAO,MAAM,QAAQ,0GAEpB,CAAC"}

package/jsx/core/Configuration/Configuration.styles.js

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+export const buttonStyles = {
+    width: '100%'
+};
+export const StyledFieldset = styled.fieldset `
+  padding: 1rem 5%;
+  margin: 1rem 0;
+`;
+export const BoldSpan = styled.span `
+  font-weight: bold;
+`;
+//# sourceMappingURL=Configuration.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Configuration.styles.js","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,MAAM;CACd,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAA;;;CAG5C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;CAElC,CAAC","sourcesContent":["import styled from 'styled-components';\n\nexport const buttonStyles = {\n  width: '100%'\n};\n\nexport const StyledFieldset = styled.fieldset`\n  padding: 1rem 5%;\n  margin: 1rem 0;\n`;\n\nexport const BoldSpan = styled.span`\n  font-weight: bold;\n`;\n"]}

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

@@ -0,0 +1,14 @@
+import type { StoryFn } from '@storybook/react';
+import type { ObfuscationMode, CreditCardDisplayProps, CreditCardInputProps } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+interface CreditCardDemoProps {
+    value?: CreditCardDisplayProps['value'];
+    obfuscation?: ObfuscationMode;
+}
+export declare const CreditCardDisplayDemo: StoryFn<CreditCardDemoProps>;
+interface CreditCardStoryProps extends CreditCardInputProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const CreditCardInputDemo: StoryFn<CreditCardStoryProps>;
+//# sourceMappingURL=CreditCard.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCard.stories.d.ts","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;;AAEjC,wBAEU;AAEV,UAAU,mBAAmB;IAC3B,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B;AAED,eAAO,MAAM,qBAAqB,EAAE,OAAO,CAAC,mBAAmB,CAE9D,CAAC;AAYF,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,oBAAoB,CAuB7D,CAAC"}

package/jsx/core/CreditCard/CreditCard.stories.jsx

@@ -0,0 +1,51 @@
+import { useState, useEffect } from 'react';
+import { CreditCardDisplay, CreditCardInput, usePrevious } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/CreditCard'
+};
+export const CreditCardDisplayDemo = (args) => (<CreditCardDisplay value={args.value} formattingOptions={{ obfuscation: args.obfuscation }}/>);
+CreditCardDisplayDemo.args = {
+    value: undefined,
+    obfuscation: 'none'
+};
+CreditCardDisplayDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }
+};
+export const CreditCardInputDemo = (args) => {
+    const [value, setValue] = useState(args.value);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value);
+    }, [prev, args.value]);
+    return (<CreditCardInput {...args} value={value} onChange={setValue} additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Input your 15-16 digit credit card number'
+            }
+            : undefined}/>);
+};
+CreditCardInputDemo.args = {
+    value: undefined,
+    label: 'Credit card number',
+    labelHidden: false,
+    info: 'Enter your credit card number',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    showAdditionalInfo: false
+};
+CreditCardInputDemo.argTypes = {
+    value: { control: { type: 'text' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
+};
+//# sourceMappingURL=CreditCard.stories.jsx.map

package/jsx/core/CreditCard/CreditCard.stories.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreditCard.stories.jsx","sourceRoot":"","sources":["../../../src/core/CreditCard/CreditCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAO1F,eAAe;IACb,KAAK,EAAE,iBAAiB;CACjB,CAAC;AAOV,MAAM,CAAC,MAAM,qBAAqB,GAAiC,CAAC,IAAyB,EAAE,EAAE,CAAC,CAChG,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAG,CAC/F,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,MAAM;CACpB,CAAC;AAEF,qBAAqB,CAAC,QAAQ,GAAG;IAC/B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,EAAE;CACzF,CAAC;AAMF,MAAM,CAAC,MAAM,mBAAmB,GAAkC,CAAC,IAA0B,EAAE,EAAE;IAC/F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,IAAI,CAAC,KAAK,CAAC,CAAC;IAEnE,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,IAAI,CAAC,KAAK;YAAE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,CAAC,eAAe,CACd,IAAI,IAAI,CAAC,CACT,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,cAAc,CAAC,CACb,IAAI,CAAC,kBAAkB;YACrB,CAAC,CAAC;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,OAAO,EAAE,2CAA2C;aACrD;YACH,CAAC,CAAC,SAAS,CACd,EACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,oBAAoB;IAC3B,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,+BAA+B;IACrC,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,kBAAkB,EAAE,KAAK;CAC1B,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACrD,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useEffect } from 'react';\n\nimport { CreditCardDisplay, CreditCardInput, usePrevious } from '@pega/cosmos-react-core';\nimport type {\n  ObfuscationMode,\n  CreditCardDisplayProps,\n  CreditCardInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/CreditCard'\n} as Meta;\n\ninterface CreditCardDemoProps {\n  value?: CreditCardDisplayProps['value'];\n  obfuscation?: ObfuscationMode;\n}\n\nexport const CreditCardDisplayDemo: StoryFn<CreditCardDemoProps> = (args: CreditCardDemoProps) => (\n  <CreditCardDisplay value={args.value} formattingOptions={{ obfuscation: args.obfuscation }} />\n);\n\nCreditCardDisplayDemo.args = {\n  value: undefined,\n  obfuscation: 'none'\n};\n\nCreditCardDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  obfuscation: { control: { type: 'inline-radio' }, options: ['none', 'partial', 'full'] }\n};\n\ninterface CreditCardStoryProps extends CreditCardInputProps {\n  showAdditionalInfo?: boolean;\n}\n\nexport const CreditCardInputDemo: StoryFn<CreditCardStoryProps> = (args: CreditCardStoryProps) => {\n  const [value, setValue] = useState<string | undefined>(args.value);\n\n  const prev = usePrevious(args.value);\n  useEffect(() => {\n    if (prev !== args.value) setValue(args.value);\n  }, [prev, args.value]);\n\n  return (\n    <CreditCardInput\n      {...args}\n      value={value}\n      onChange={setValue}\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Input your 15-16 digit credit card number'\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nCreditCardInputDemo.args = {\n  value: undefined,\n  label: 'Credit card number',\n  labelHidden: false,\n  info: 'Enter your credit card number',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false,\n  showAdditionalInfo: false\n};\n\nCreditCardInputDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } },\n  showAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -0,0 +1,19 @@
+import type { StoryFn } from '@storybook/react';
+import type { CurrencyDisplayProps, CurrencyInputProps, OmitStrict } from '@pega/cosmos-react-core';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+type CurrencyStoryProps = OmitStrict<CurrencyInputProps, 'value' | 'onChange'> & {
+    value?: number;
+    onChange?: (value: string) => void;
+    showAdditionalInfo?: boolean;
+};
+export declare const CurrencyInputDemo: StoryFn<Partial<CurrencyStoryProps>>;
+interface CurrencyDisplayStoryProps extends CurrencyDisplayProps {
+    groupSeparators: boolean;
+    fractionDigits: number;
+    currency: 'symbol' | 'code' | 'name';
+    negative: 'minus-sign' | 'parentheses';
+    notation: 'standard' | 'compact';
+}
+export declare const CurrencyDisplayDemo: StoryFn<CurrencyDisplayStoryProps>;
+//# sourceMappingURL=Currency.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAItD,OAAO,KAAK,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAEpG,wBAGU;AAEV,KAAK,kBAAkB,GAAG,UAAU,CAAC,kBAAkB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAiDlE,CAAC;AAyCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,QAAQ,EAAE,YAAY,GAAG,aAAa,CAAC;IACvC,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,mBAAmB,EAAE,OAAO,CAAC,yBAAyB,CAgBlE,CAAC"}

package/jsx/core/Currency/Currency.stories.jsx

@@ -0,0 +1,106 @@
+import { useEffect, useState } from 'react';
+import { CurrencyDisplay, CurrencyInput, usePrevious } from '@pega/cosmos-react-core';
+export default {
+    title: 'Core/Currency',
+    component: CurrencyInput
+};
+export const CurrencyInputDemo = (args) => {
+    const [value, setValue] = useState(args.value === undefined ? undefined : `${args.value}`);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value === undefined ? undefined : `${args.value}`);
+    }, [prev, args.value]);
+    return (<CurrencyInput {...args} value={value} onChange={inputValue => {
+            setValue(inputValue);
+            args.onChange?.(inputValue);
+        }} onBlur={inputValue => {
+            args.onBlur?.(inputValue);
+        }} onFocus={inputValue => {
+            args.onFocus?.(inputValue);
+        }} currencyISOCode={args.currencyISOCode} alwaysShowISOCode={args.alwaysShowISOCode} showDecimal={args.showDecimal} maximumFractionDigits={args.maximumFractionDigits} showGroupSeparators={args.showGroupSeparators} step={args.step} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly} additionalInfo={args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Input a number that will represent a monetary value.'
+            }
+            : undefined}/>);
+};
+CurrencyInputDemo.args = {
+    value: undefined,
+    currencyISOCode: 'USD',
+    alwaysShowISOCode: false,
+    showDecimal: true,
+    maximumFractionDigits: 0,
+    showGroupSeparators: true,
+    step: 1,
+    label: 'Currency input',
+    labelHidden: false,
+    info: 'Enter a numerical value',
+    status: undefined,
+    required: false,
+    disabled: false,
+    readOnly: false,
+    showAdditionalInfo: false
+};
+CurrencyInputDemo.argTypes = {
+    value: { control: { type: 'number' } },
+    currencyISOCode: {
+        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        control: { type: 'select' }
+    },
+    alwaysShowISOCode: { control: { type: 'boolean' } },
+    showDecimal: { control: { type: 'boolean' } },
+    maximumFractionDigits: { control: { type: 'number' } },
+    showGroupSeparators: { control: { type: 'boolean' } },
+    step: { control: { type: 'number' } },
+    label: { control: { type: 'text' } },
+    labelHidden: { control: { type: 'boolean' } },
+    info: { control: { type: 'text', label: 'Helper text' } },
+    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
+    required: { control: { type: 'boolean' } },
+    disabled: { control: { type: 'boolean' } },
+    readOnly: { control: { type: 'boolean' } },
+    showAdditionalInfo: { control: { type: 'boolean' } }
+};
+export const CurrencyDisplayDemo = (args) => {
+    return (<CurrencyDisplay value={args.value} currencyISOCode={args.currencyISOCode} formattingOptions={{
+            fractionDigits: args.fractionDigits,
+            groupSeparators: args.groupSeparators,
+            currency: args.currency,
+            negative: args.negative,
+            notation: args.notation
+        }}/>);
+};
+CurrencyDisplayDemo.args = {
+    value: undefined,
+    currencyISOCode: 'USD',
+    groupSeparators: true,
+    fractionDigits: undefined,
+    currency: 'symbol',
+    negative: 'minus-sign',
+    notation: 'standard'
+};
+CurrencyDisplayDemo.argTypes = {
+    value: { control: { type: 'number' } },
+    currencyISOCode: {
+        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        control: { type: 'select' }
+    },
+    groupSeparators: { control: { type: 'boolean' } },
+    fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },
+    negative: {
+        control: {
+            type: 'inline-radio'
+        },
+        options: ['minus-sign', 'parentheses']
+    },
+    currency: {
+        control: { type: 'select' },
+        options: ['symbol', 'code', 'name']
+    },
+    notation: {
+        control: { type: 'inline-radio' },
+        options: ['standard', 'compact']
+    }
+};
+//# sourceMappingURL=Currency.stories.jsx.map