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

package/lib/core/Button/Button.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';
+import { Button, Configuration, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
 registerIcon(plusIcon);
@@ -61,4 +61,31 @@ BareButtonDemo.argTypes = {
     disabled: { control: { type: 'boolean' } },
     href: { control: { type: 'text' } }
 };
+export const ConfigurableButton = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                button: {
+                    'border-width': args.borderWidth,
+                    'border-radius': args.borderRadius,
+                    color: args.color,
+                    'secondary-color': args.secondaryColor,
+                    padding: args.padding
+                }
+            }
+        }, children: _jsx(Button, { children: "Configurable Button" }, void 0) }, void 0));
+};
+ConfigurableButton.args = {
+    borderWidth: '0.0625rem',
+    borderRadius: 9999,
+    color: '#076bc9',
+    secondaryColor: '#ffffff',
+    padding: '0rem 1rem'
+};
+ConfigurableButton.argTypes = {
+    borderWidth: { control: { type: 'text' } },
+    borderRadius: { control: { type: 'number' } },
+    color: { control: { type: 'color' } },
+    secondaryColor: { control: { type: 'color' } },
+    padding: { control: { type: 'text' } }
+};
 //# sourceMappingURL=Button.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Button, ButtonProps, Flex, Icon, registerIcon } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Button',\n  component: Button,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} compact={args.compact}>\n      Click me\n    </Button>\n  );\n};\n\nButtonVariants.args = {\n  variant: 'primary',\n  compact: false\n};\n\nButtonVariants.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'simple', 'link', 'text'],\n    control: { type: 'select' }\n  },\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n  return (\n    <>\n      <Button variant='primary' disabled>\n        Primary disabled\n      </Button>\n      <Button variant='secondary' disabled>\n        Secondary disabled\n      </Button>\n      <Button variant='simple' disabled>\n        Simple disabled\n      </Button>\n      <Button variant='link' disabled>\n        Link disabled\n      </Button>\n      <Button variant='text' disabled>\n        Text disabled\n      </Button>\n    </>\n  );\n};\n\nexport const IconButtons: Story<ButtonProps> = ({ compact }: ButtonProps) => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Button variant='primary' label='Icon button primary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='secondary' label='Icon button secondary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='simple' label='Icon button simple' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='link' label='Icon button link' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='text' label='Icon button text' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n    </Flex>\n  );\n};\n\nIconButtons.args = {\n  compact: false\n};\n\nIconButtons.argTypes = {\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n      {args.icon ? <Icon name='plus' /> : 'Loading'}\n    </Button>\n  );\n};\n\nLoadingButtons.args = {\n  variant: 'primary',\n  icon: false\n};\n\nLoadingButtons.argTypes = {\n  variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n  icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n  return (\n    <Button variant='primary' href='https://www.pega.com' target='_blank'>\n      Go to pega.com\n    </Button>\n  );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <BareButton disabled={args.disabled} href={args.href || undefined}>\n      Click me\n    </BareButton>\n  );\n};\n\nBareButtonDemo.args = {\n  disabled: false,\n  href: ''\n};\n\nBareButtonDemo.argTypes = {\n  disabled: { control: { type: 'boolean' } },\n  href: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/core/Button/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Button,\n  ButtonProps,\n  Configuration,\n  Flex,\n  Icon,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Button',\n  component: Button,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const ButtonVariants: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} compact={args.compact}>\n      Click me\n    </Button>\n  );\n};\n\nButtonVariants.args = {\n  variant: 'primary',\n  compact: false\n};\n\nButtonVariants.argTypes = {\n  variant: {\n    options: ['primary', 'secondary', 'simple', 'link', 'text'],\n    control: { type: 'select' }\n  },\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const DisabledButtons = () => {\n  return (\n    <>\n      <Button variant='primary' disabled>\n        Primary disabled\n      </Button>\n      <Button variant='secondary' disabled>\n        Secondary disabled\n      </Button>\n      <Button variant='simple' disabled>\n        Simple disabled\n      </Button>\n      <Button variant='link' disabled>\n        Link disabled\n      </Button>\n      <Button variant='text' disabled>\n        Text disabled\n      </Button>\n    </>\n  );\n};\n\nexport const IconButtons: Story<ButtonProps> = ({ compact }: ButtonProps) => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Button variant='primary' label='Icon button primary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='secondary' label='Icon button secondary' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='simple' label='Icon button simple' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='link' label='Icon button link' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n      <Button variant='text' label='Icon button text' icon compact={compact}>\n        <Icon name='plus' />\n      </Button>\n    </Flex>\n  );\n};\n\nIconButtons.args = {\n  compact: false\n};\n\nIconButtons.argTypes = {\n  compact: { control: { type: 'boolean' } }\n};\n\nexport const LoadingButtons: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <Button variant={args.variant} icon={args.icon} label='Loading' loading>\n      {args.icon ? <Icon name='plus' /> : 'Loading'}\n    </Button>\n  );\n};\n\nLoadingButtons.args = {\n  variant: 'primary',\n  icon: false\n};\n\nLoadingButtons.argTypes = {\n  variant: { options: ['primary', 'secondary'], control: { type: 'select' } },\n  icon: { control: { type: 'boolean' } }\n};\n\nexport const ButtonAsLink = () => {\n  return (\n    <Button variant='primary' href='https://www.pega.com' target='_blank'>\n      Go to pega.com\n    </Button>\n  );\n};\n\nexport const BareButtonDemo: Story<ButtonProps> = (args: ButtonProps) => {\n  return (\n    <BareButton disabled={args.disabled} href={args.href || undefined}>\n      Click me\n    </BareButton>\n  );\n};\n\nBareButtonDemo.args = {\n  disabled: false,\n  href: ''\n};\n\nBareButtonDemo.argTypes = {\n  disabled: { control: { type: 'boolean' } },\n  href: { control: { type: 'text' } }\n};\n\ninterface ConfigurableButtonProps {\n  borderWidth?: string;\n  borderRadius?: number;\n  color?: string;\n  secondaryColor?: string;\n  padding?: string;\n}\n\nexport const ConfigurableButton: Story<ConfigurableButtonProps> = (\n  args: ConfigurableButtonProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          button: {\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius,\n            color: args.color,\n            'secondary-color': args.secondaryColor,\n            padding: args.padding\n          }\n        }\n      }}\n    >\n      <Button>Configurable Button</Button>\n    </Configuration>\n  );\n};\n\nConfigurableButton.args = {\n  borderWidth: '0.0625rem',\n  borderRadius: 9999,\n  color: '#076bc9',\n  secondaryColor: '#ffffff',\n  padding: '0rem 1rem'\n};\n\nConfigurableButton.argTypes = {\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'number' } },\n  color: { control: { type: 'color' } },\n  secondaryColor: { control: { type: 'color' } },\n  padding: { control: { type: 'text' } }\n};\n"]}

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

@@ -5,4 +5,9 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const SimpleCard: () => JSX.Element;
 export declare const FullCard: Story<CardFooterProps>;
+interface ConfigurableCardProps {
+    borderRadius?: string;
+    background?: string;
+}
+export declare const ConfigurableCard: Story<ConfigurableCardProps>;
 //# sourceMappingURL=Card.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,eAAe,EAIhB,MAAM,yBAAyB,CAAC;;AAIjC,wBAMU;AAEV,eAAO,MAAM,UAAU,mBAatB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,eAAe,CAwC3C,CAAC"}
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,eAAe,EAKhB,MAAM,yBAAyB,CAAC;;AAIjC,wBAMU;AAEV,eAAO,MAAM,UAAU,mBAatB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,eAAe,CAwC3C,CAAC;AAaF,UAAU,qBAAqB;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,qBAAqB,CAwBzD,CAAC"}

package/lib/core/Card/Card.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, CardHeader, CardMedia, CardContent, CardFooter, Image, MenuButton, Text } from '@pega/cosmos-react-core';
+import { Card, CardHeader, CardMedia, CardContent, CardFooter, Image, MenuButton, Text, Configuration } from '@pega/cosmos-react-core';
 import { StyledCard } from './Card.styles';
 export default {
     title: 'Core/Card',
@@ -29,4 +29,22 @@ FullCard.argTypes = {
         control: { type: 'select' }
     }
 };
+export const ConfigurableCard = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                card: {
+                    'border-radius': args.borderRadius,
+                    background: args.background
+                }
+            }
+        }, children: _jsxs(Card, { as: StyledCard, children: [_jsx(CardHeader, { children: _jsx(Text, { variant: 'h2', children: "Simple Card" }, void 0) }, void 0), _jsx(CardContent, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }, void 0)] }, void 0) }, void 0));
+};
+ConfigurableCard.args = {
+    borderRadius: '0.5rem',
+    background: '#71baff'
+};
+ConfigurableCard.argTypes = {
+    borderRadius: { control: { type: 'text' } },
+    background: { control: { type: 'color' } }
+};
 //# sourceMappingURL=Card.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,SAAS,EACT,WAAW,EACX,UAAU,EAEV,KAAK,EACL,UAAU,EACV,IAAI,EACL,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,aAClB,KAAC,UAAU,cACT,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,oCAAmB,WAC1B,EACb,KAAC,WAAW,kQAIE,YACT,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA2B,CAAC,IAAqB,EAAE,EAAE;IACxE,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,UAAU,aAClB,KAAC,SAAS,cACR,KAAC,KAAK,IACJ,GAAG,EAAC,yDAAyD,EAC7D,MAAM,EAAC,KAAK,EACZ,GAAG,EAAC,OAAO,WACX,WACQ,EACZ,KAAC,UAAU,IACT,OAAO,EACL,KAAC,UAAU,IACT,MAAM,QACN,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,cAAc,EACnB,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,IAAI,EAAE;wBACJ,KAAK,EAAE;4BACL,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;4BAC5C,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;4BAC5C,EAAE,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE;yBAC7C;qBACF,WACD,YAGJ,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,kCAAiB,WACxB,EACb,KAAC,WAAW,kQAIE,EACd,KAAC,UAAU,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAC/B,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,+CAA8B,WAC5C,YACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,QAAQ,CAAC,IAAI,GAAG;IACd,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,QAAQ,CAAC,QAAQ,GAAG;IAClB,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,CAAC;QAClE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Card,\n  CardHeader,\n  CardMedia,\n  CardContent,\n  CardFooter,\n  CardFooterProps,\n  Image,\n  MenuButton,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Card.styles';\n\nexport default {\n  title: 'Core/Card',\n  component: Card,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const SimpleCard = () => {\n  return (\n    <Card as={StyledCard}>\n      <CardHeader>\n        <Text variant='h2'>Simple Card</Text>\n      </CardHeader>\n      <CardContent>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n        laboris nisi ut aliquip ex ea commodo consequat.\n      </CardContent>\n    </Card>\n  );\n};\n\nexport const FullCard: Story<CardFooterProps> = (args: CardFooterProps) => {\n  return (\n    <Card as={StyledCard}>\n      <CardMedia>\n        <Image\n          src='https://www.pega.com/sites/default/files/default-og.jpg'\n          height='100'\n          alt='Media'\n        />\n      </CardMedia>\n      <CardHeader\n        actions={\n          <MenuButton\n            portal\n            variant='simple'\n            text='Card actions'\n            icon='more'\n            iconOnly\n            menu={{\n              items: [\n                { id: 'action-1', primary: 'Card action 1' },\n                { id: 'action-2', primary: 'Card action 2' },\n                { id: 'action-3', primary: 'Card action 3' }\n              ]\n            }}\n          />\n        }\n      >\n        <Text variant='h2'>Full Card</Text>\n      </CardHeader>\n      <CardContent>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n        laboris nisi ut aliquip ex ea commodo consequat.\n      </CardContent>\n      <CardFooter justify={args.justify}>\n        <Text variant='secondary'>This is the CardFooter</Text>\n      </CardFooter>\n    </Card>\n  );\n};\n\nFullCard.args = {\n  justify: 'start'\n};\n\nFullCard.argTypes = {\n  justify: {\n    options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n"]}
+{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/core/Card/Card.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  Card,\n  CardHeader,\n  CardMedia,\n  CardContent,\n  CardFooter,\n  CardFooterProps,\n  Image,\n  MenuButton,\n  Text,\n  Configuration\n} from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Card.styles';\n\nexport default {\n  title: 'Core/Card',\n  component: Card,\n  parameters: {\n    layout: 'centered'\n  }\n} as Meta;\n\nexport const SimpleCard = () => {\n  return (\n    <Card as={StyledCard}>\n      <CardHeader>\n        <Text variant='h2'>Simple Card</Text>\n      </CardHeader>\n      <CardContent>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n        laboris nisi ut aliquip ex ea commodo consequat.\n      </CardContent>\n    </Card>\n  );\n};\n\nexport const FullCard: Story<CardFooterProps> = (args: CardFooterProps) => {\n  return (\n    <Card as={StyledCard}>\n      <CardMedia>\n        <Image\n          src='https://www.pega.com/sites/default/files/default-og.jpg'\n          height='100'\n          alt='Media'\n        />\n      </CardMedia>\n      <CardHeader\n        actions={\n          <MenuButton\n            portal\n            variant='simple'\n            text='Card actions'\n            icon='more'\n            iconOnly\n            menu={{\n              items: [\n                { id: 'action-1', primary: 'Card action 1' },\n                { id: 'action-2', primary: 'Card action 2' },\n                { id: 'action-3', primary: 'Card action 3' }\n              ]\n            }}\n          />\n        }\n      >\n        <Text variant='h2'>Full Card</Text>\n      </CardHeader>\n      <CardContent>\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n        laboris nisi ut aliquip ex ea commodo consequat.\n      </CardContent>\n      <CardFooter justify={args.justify}>\n        <Text variant='secondary'>This is the CardFooter</Text>\n      </CardFooter>\n    </Card>\n  );\n};\n\nFullCard.args = {\n  justify: 'start'\n};\n\nFullCard.argTypes = {\n  justify: {\n    options: ['start', 'end', 'center', 'between', 'around', 'evenly'],\n    control: { type: 'select' }\n  }\n};\n\ninterface ConfigurableCardProps {\n  borderRadius?: string;\n  background?: string;\n}\n\nexport const ConfigurableCard: Story<ConfigurableCardProps> = (args: ConfigurableCardProps) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          card: {\n            'border-radius': args.borderRadius,\n            background: args.background\n          }\n        }\n      }}\n    >\n      <Card as={StyledCard}>\n        <CardHeader>\n          <Text variant='h2'>Simple Card</Text>\n        </CardHeader>\n        <CardContent>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt\n          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n          ullamco laboris nisi ut aliquip ex ea commodo consequat.\n        </CardContent>\n      </Card>\n    </Configuration>\n  );\n};\n\nConfigurableCard.args = {\n  borderRadius: '0.5rem',\n  background: '#71baff'\n};\n\nConfigurableCard.argTypes = {\n  borderRadius: { control: { type: 'text' } },\n  background: { control: { type: 'color' } }\n};\n"]}

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

@@ -4,4 +4,16 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const DefaultCheckbox: Story<RadioCheckProps>;
 export declare const CheckboxCard: Story<RadioCheckProps>;
+interface ConfigurableCheckboxProps extends RadioCheckProps {
+    size?: string;
+    backgroundColor?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderRadius?: string;
+    labelColor?: string;
+    labelFontWeight?: string;
+    checkedBackgroundColor?: string;
+    checkedBorderColor?: string;
+}
+export declare const ConfigurableCheckbox: Story<ConfigurableCheckboxProps>;
 //# sourceMappingURL=Checkbox.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAY,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEpE,wBAmBU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAWlD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,eAAe,CAY/C,CAAC"}
+{"version":3,"file":"Checkbox.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA2B,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEnF,wBAmBU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAWlD,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,eAAe,CAY/C,CAAC;AAEF,UAAU,yBAA0B,SAAQ,eAAe;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CA8BjE,CAAC"}

package/lib/core/Checkbox/Checkbox.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Checkbox } from '@pega/cosmos-react-core';
+import { Checkbox, Configuration } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Checkbox',
     component: Checkbox,
@@ -26,4 +26,55 @@ export const DefaultCheckbox = (args) => {
 export const CheckboxCard = (args) => {
     return (_jsx(Checkbox, { variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly, indeterminate: args.indeterminate }, void 0));
 };
+export const ConfigurableCheckbox = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                checkbox: {
+                    'border-radius': args.borderRadius
+                },
+                'radio-check': {
+                    'border-color': args.borderColor,
+                    'border-width': args.borderWidth,
+                    'background-color': args.backgroundColor,
+                    label: {
+                        color: args.labelColor,
+                        'font-weight': args.labelFontWeight
+                    },
+                    size: args.size,
+                    ':checked': {
+                        'background-color': args.checkedBackgroundColor,
+                        'border-color': args.checkedBorderColor
+                    }
+                }
+            }
+        }, children: _jsx(Checkbox, { label: 'Configurable Checkbox' }, void 0) }, void 0));
+};
+ConfigurableCheckbox.args = {
+    size: '1.25rem',
+    backgroundColor: '#ffffff',
+    borderColor: '#939393',
+    borderWidth: '0.0625rem',
+    borderRadius: '0.5',
+    labelColor: '#939393',
+    labelFontWeight: '400',
+    checkedBackgroundColor: '#076bc9',
+    checkedBorderColor: '#076bc9'
+};
+ConfigurableCheckbox.argTypes = {
+    size: { control: { type: 'text' } },
+    backgroundColor: { control: { type: 'color' } },
+    borderColor: { control: { type: 'color' } },
+    borderWidth: { control: { type: 'text' } },
+    borderRadius: { control: { type: 'text' } },
+    labelColor: { control: { type: 'color' } },
+    labelFontWeight: { control: { type: 'text' } },
+    checkedBackgroundColor: { control: { type: 'color' } },
+    checkedBorderColor: { control: { type: 'color' } },
+    status: { table: { disable: true } },
+    label: { table: { disable: true } },
+    required: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+    readOnly: { table: { disable: true } },
+    indeterminate: { table: { disable: true } }
+};
 //# sourceMappingURL=Checkbox.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,QAAQ,EAAmB,MAAM,yBAAyB,CAAC;AAEpE,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,kBAAkB;QACzB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;KACrB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,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;QAC1C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAChD;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC/E,OAAO,CACL,KAAC,QAAQ,IACP,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,WACjC,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,aAAa,EAAE,IAAI,CAAC,aAAa,WACjC,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Checkbox, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Checkbox',\n  component: Checkbox,\n  args: {\n    status: undefined,\n    label: 'Check me, please',\n    required: false,\n    disabled: false,\n    readOnly: false,\n    indeterminate: false\n  },\n  argTypes: {\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    label: { control: { type: 'text' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } },\n    indeterminate: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const DefaultCheckbox: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <Checkbox\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      indeterminate={args.indeterminate}\n    />\n  );\n};\n\nexport const CheckboxCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <Checkbox\n      variant='card'\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      indeterminate={args.indeterminate}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../src/core/Checkbox/Checkbox.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Checkbox, Configuration, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Checkbox',\n  component: Checkbox,\n  args: {\n    status: undefined,\n    label: 'Check me, please',\n    required: false,\n    disabled: false,\n    readOnly: false,\n    indeterminate: false\n  },\n  argTypes: {\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    label: { control: { type: 'text' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } },\n    indeterminate: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const DefaultCheckbox: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <Checkbox\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      indeterminate={args.indeterminate}\n    />\n  );\n};\n\nexport const CheckboxCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <Checkbox\n      variant='card'\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      indeterminate={args.indeterminate}\n    />\n  );\n};\n\ninterface ConfigurableCheckboxProps extends RadioCheckProps {\n  size?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: string;\n  labelColor?: string;\n  labelFontWeight?: string;\n  checkedBackgroundColor?: string;\n  checkedBorderColor?: string;\n}\n\nexport const ConfigurableCheckbox: Story<ConfigurableCheckboxProps> = (\n  args: ConfigurableCheckboxProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          checkbox: {\n            'border-radius': args.borderRadius\n          },\n          'radio-check': {\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'background-color': args.backgroundColor,\n            label: {\n              color: args.labelColor,\n              'font-weight': args.labelFontWeight\n            },\n            size: args.size,\n            ':checked': {\n              'background-color': args.checkedBackgroundColor,\n              'border-color': args.checkedBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <Checkbox label='Configurable Checkbox' />\n    </Configuration>\n  );\n};\n\nConfigurableCheckbox.args = {\n  size: '1.25rem',\n  backgroundColor: '#ffffff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: '0.5',\n  labelColor: '#939393',\n  labelFontWeight: '400',\n  checkedBackgroundColor: '#076bc9',\n  checkedBorderColor: '#076bc9'\n};\n\nConfigurableCheckbox.argTypes = {\n  size: { control: { type: 'text' } },\n  backgroundColor: { control: { type: 'color' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'text' } },\n  labelColor: { control: { type: 'color' } },\n  labelFontWeight: { control: { type: 'text' } },\n  checkedBackgroundColor: { control: { type: 'color' } },\n  checkedBorderColor: { control: { type: 'color' } },\n  status: { table: { disable: true } },\n  label: { table: { disable: true } },\n  required: { table: { disable: true } },\n  disabled: { table: { disable: true } },\n  readOnly: { table: { disable: true } },\n  indeterminate: { table: { disable: true } }\n};\n"]}

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

@@ -7,4 +7,21 @@ export declare const ThemedForm: Story<{
 }>;
 export declare const ThemingHierarchy: () => JSX.Element;
 export declare const OverridableActionMenu: () => JSX.Element;
+interface ConfigurableBaseThemeProps {
+    interactive?: string;
+}
+export declare const ConfigurableBaseTheme: Story<ConfigurableBaseThemeProps>;
+interface ConfigurableComponentThemeProps {
+    buttonColor?: string;
+    checkedBackgroundColor?: string;
+}
+export declare const ConfigurableComponentTheme: Story<ConfigurableComponentThemeProps>;
+interface ConfigurableLocaleProps {
+    locale?: string;
+}
+export declare const ConfigurableLocale: Story<ConfigurableLocaleProps>;
+interface ConfigurableTranslationsProps {
+    placeholderTranslation?: string;
+}
+export declare const ConfigurableTranslations: Story<ConfigurableTranslationsProps>;
 //# sourceMappingURL=Configuration.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Configuration.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAa/C,wBAGU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAA;CAAE,CA+B7D,CAAC;AA2CF,eAAO,MAAM,gBAAgB,mBAyE5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAWjC,CAAC"}
+{"version":3,"file":"Configuration.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAoB/C,wBAIU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC;IAAE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAA;CAAE,CA+B7D,CAAC;AA2CF,eAAO,MAAM,gBAAgB,mBAyE5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,mBAWjC,CAAC;AAEF,UAAU,0BAA0B;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CAsBnE,CAAC;AAUF,UAAU,+BAA+B;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,0BAA0B,EAAE,KAAK,CAAC,+BAA+B,CA2B7E,CAAC;AAYF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAU7D,CAAC;AAUF,UAAU,6BAA6B;IACrC,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,6BAA6B,CAsBzE,CAAC"}

package/lib/core/Configuration/Configuration.stories.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import styled from 'styled-components';
-import { Button, Configuration, MenuButton, resetToInitial } from '@pega/cosmos-react-core';
-import { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.mocks';
+import { Button, Configuration, MenuButton, resetToInitial, Flex, Checkbox, RadioButton, DateInput, SearchInput, Text } from '@pega/cosmos-react-core';
+import { FormContent } from '../Form/Form.mocks';
 export default {
     title: 'Core/Configuration',
-    component: Configuration
+    component: Configuration,
+    includeStories: ['ThemedForm', 'ThemingHierarchy', 'OverridableActionMenu']
 };
 export const ThemedForm = (args) => {
     const themes = {
@@ -72,4 +73,62 @@ export const OverridableActionMenu = () => {
     const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => { } }];
     return (_jsxs(_Fragment, { children: [_jsx(MenuButton, { text: 'Cosmos MenuButton', menu: { items: sharedActions } }, void 0), _jsx(Configuration, { overrideMap: {}, children: _jsx(MenuButton, { text: 'Mock PIMC MenuButton', menu: { items: sharedActions } }, void 0) }, void 0)] }, void 0));
 };
+export const ConfigurableBaseTheme = (args) => {
+    return (_jsx(Configuration, { theme: {
+            base: {
+                palette: {
+                    interactive: args.interactive
+                }
+            }
+        }, children: _jsxs(Flex, { container: { gap: 2, justify: 'start' }, children: [_jsx(Button, { variant: 'primary', children: "Primary" }, void 0), _jsx(Flex, { item: { shrink: 1, alignSelf: 'center' }, children: _jsx(Checkbox, { id: 'checkbox', label: 'Checkbox Option', defaultChecked: true }, void 0) }, void 0), _jsx(RadioButton, { id: 'radio-button', label: 'Radio Option', defaultChecked: true }, void 0)] }, void 0) }, void 0));
+};
+ConfigurableBaseTheme.args = {
+    interactive: '#681fc3'
+};
+ConfigurableBaseTheme.argTypes = {
+    interactive: { control: { type: 'color' } }
+};
+export const ConfigurableComponentTheme = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                button: {
+                    color: args.buttonColor
+                },
+                'radio-check': {
+                    ':checked': {
+                        'background-color': args.checkedBackgroundColor
+                    }
+                }
+            }
+        }, children: _jsxs(Flex, { container: { gap: 2, justify: 'start' }, children: [_jsx(Button, { variant: 'primary', children: "Primary" }, void 0), _jsx(Flex, { item: { shrink: 1, alignSelf: 'center' }, children: _jsx(Checkbox, { id: 'checkbox', label: 'Checkbox Option', defaultChecked: true }, void 0) }, void 0), _jsx(RadioButton, { id: 'radio-button', label: 'Radio Option', defaultChecked: true }, void 0)] }, void 0) }, void 0));
+};
+ConfigurableComponentTheme.args = {
+    buttonColor: '#681fc3',
+    checkedBackgroundColor: '#20aa50'
+};
+ConfigurableComponentTheme.argTypes = {
+    buttonColor: { control: { type: 'color' } },
+    checkedBackgroundColor: { control: { type: 'color' } }
+};
+export const ConfigurableLocale = (args) => {
+    return (_jsx(Configuration, { locale: args.locale, children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: _jsx(DateInput, { label: 'Date Input with locale support', value: new Date() }, void 0) }, void 0) }, void 0));
+};
+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 (_jsxs(Flex, { container: { gap: 4 }, children: [_jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: "Default" }, void 0), _jsx(SearchInput, {}, void 0)] }, void 0), _jsx(Configuration, { translations: spanishTranslation, children: _jsxs(Flex, { container: { direction: 'column' }, children: [_jsx(Text, { variant: 'h4', children: "Translated" }, void 0), _jsx(SearchInput, {}, void 0)] }, void 0) }, void 0)] }, void 0));
+};
+ConfigurableTranslations.args = {
+    placeholderTranslation: 'Buscar...'
+};
+ConfigurableTranslations.argTypes = {
+    placeholderTranslation: { control: { type: 'text' } }
+};
 //# sourceMappingURL=Configuration.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Configuration.stories.js","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Configuration,\n  MenuButton,\n  resetToInitial,\n  DefaultSettableTheme\n} from '@pega/cosmos-react-core';\nimport { FormContent } from '@pega/cosmos-react-demos/lib/core/Form/Form.mocks';\n\nexport default {\n  title: 'Core/Configuration',\n  component: Configuration\n} as Meta;\n\nexport const ThemedForm: Story<{ 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\nconst buttonStyles = {\n  width: '100%'\n};\n\nconst StyledFieldset = styled.fieldset`\n  padding: 1rem 5%;\n  margin: 1rem 0;\n`;\n\nconst BoldSpan = styled.span`\n  font-weight: bold;\n`;\n\nconst 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\nexport const ThemingHierarchy = () => {\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\nexport const OverridableActionMenu = () => {\n  const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => {} }];\n\n  return (\n    <>\n      <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }} />\n      <Configuration overrideMap={{}}>\n        <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }} />\n      </Configuration>\n    </>\n  );\n};\n"]}
+{"version":3,"file":"Configuration.stories.js","sourceRoot":"","sources":["../../../src/core/Configuration/Configuration.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport styled from 'styled-components';\n\nimport {\n  Button,\n  Configuration,\n  MenuButton,\n  resetToInitial,\n  DefaultSettableTheme,\n  Flex,\n  Checkbox,\n  RadioButton,\n  DateInput,\n  SearchInput,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { FormContent } from '../Form/Form.mocks';\n\nexport default {\n  title: 'Core/Configuration',\n  component: Configuration,\n  includeStories: ['ThemedForm', 'ThemingHierarchy', 'OverridableActionMenu']\n} as Meta;\n\nexport const ThemedForm: Story<{ 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\nconst buttonStyles = {\n  width: '100%'\n};\n\nconst StyledFieldset = styled.fieldset`\n  padding: 1rem 5%;\n  margin: 1rem 0;\n`;\n\nconst BoldSpan = styled.span`\n  font-weight: bold;\n`;\n\nconst 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\nexport const ThemingHierarchy = () => {\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\nexport const OverridableActionMenu = () => {\n  const sharedActions = [{ id: '1', primary: 'Action 1', onClick: () => {} }];\n\n  return (\n    <>\n      <MenuButton text='Cosmos MenuButton' menu={{ items: sharedActions }} />\n      <Configuration overrideMap={{}}>\n        <MenuButton text='Mock PIMC MenuButton' menu={{ items: sharedActions }} />\n      </Configuration>\n    </>\n  );\n};\n\ninterface ConfigurableBaseThemeProps {\n  interactive?: string;\n}\n\nexport const ConfigurableBaseTheme: Story<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: Story<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: Story<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: Story<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/lib/core/Currency/Currency.stories.d.ts

@@ -4,8 +4,11 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const CurrencyInputDemo: Story<CurrencyInputProps>;
 interface CurrencyDisplayStoryProps extends CurrencyDisplayProps {
-    showGroupSeparators: boolean;
-    showDecimal: boolean;
+    groupSeparators: boolean;
+    fractionDigits: number;
+    currency: 'symbol' | 'code' | 'name';
+    negative: 'minus-sign' | 'parentheses';
+    notation: 'standard' | 'compact';
 }
 export declare const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps>;
 //# sourceMappingURL=Currency.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAsBvD,CAAC;AAmCF,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,mBAAmB,EAAE,OAAO,CAAC;IAC7B,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,yBAAyB,CAchE,CAAC"}
+{"version":3,"file":"Currency.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,oBAAoB,EAEpB,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,kBAAkB,CAsBvD,CAAC;AAmCF,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,KAAK,CAAC,yBAAyB,CAgBhE,CAAC"}

package/lib/core/Currency/Currency.stories.js

@@ -41,26 +41,44 @@ CurrencyInputDemo.argTypes = {
     readOnly: { control: { type: 'boolean' } }
 };
 export const CurrencyDisplayDemo = (args) => {
-    return (_jsx(CurrencyDisplay, { value: args.value, currencyISOCode: args.currencyISOCode, alwaysShowISOCode: args.alwaysShowISOCode, formattingOptions: {
-            showGroupSeparators: args.showGroupSeparators,
-            showDecimal: args.showDecimal
+    return (_jsx(CurrencyDisplay, { value: args.value, currencyISOCode: args.currencyISOCode, formattingOptions: {
+            fractionDigits: args.fractionDigits,
+            groupSeparators: args.groupSeparators,
+            currency: args.currency,
+            negative: args.negative,
+            notation: args.notation
         } }, void 0));
 };
 CurrencyDisplayDemo.args = {
-    value: '12345.67',
+    value: undefined,
     currencyISOCode: 'USD',
-    alwaysShowISOCode: false,
-    showGroupSeparators: true,
-    showDecimal: true
+    groupSeparators: true,
+    fractionDigits: undefined,
+    currency: 'symbol',
+    negative: 'minus-sign',
+    notation: 'standard'
 };
 CurrencyDisplayDemo.argTypes = {
-    value: { control: { type: 'text' } },
+    value: { control: { type: 'number' } },
     currencyISOCode: {
-        options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
+        options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],
         control: { type: 'select' }
     },
-    alwaysShowISOCode: { control: { type: 'boolean' } },
-    showGroupSeparators: { control: { type: 'boolean' } },
-    showDecimal: { control: { type: 'boolean' } }
+    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.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Currency.stories.js","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  CurrencyDisplay,\n  CurrencyDisplayProps,\n  CurrencyInput,\n  CurrencyInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Currency',\n  component: CurrencyInput\n} as Meta;\n\nexport const CurrencyInputDemo: Story<CurrencyInputProps> = (args: CurrencyInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <CurrencyInput\n      value={value}\n      onChange={inputValue => setValue(inputValue)}\n      onBlur={inputValue => setValue(inputValue)}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nCurrencyInputDemo.args = {\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  label: 'Currency input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nCurrencyInputDemo.argTypes = {\n  currencyISOCode: {\n    options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n  showGroupSeparators: boolean;\n  showDecimal: boolean;\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n  args: CurrencyDisplayStoryProps\n) => {\n  return (\n    <CurrencyDisplay\n      value={args.value}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      formattingOptions={{\n        showGroupSeparators: args.showGroupSeparators,\n        showDecimal: args.showDecimal\n      }}\n    />\n  );\n};\n\nCurrencyDisplayDemo.args = {\n  value: '12345.67',\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showGroupSeparators: true,\n  showDecimal: true\n};\n\nCurrencyDisplayDemo.argTypes = {\n  value: { control: { type: 'text' } },\n  currencyISOCode: {\n    options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Currency.stories.js","sourceRoot":"","sources":["../../../src/core/Currency/Currency.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  CurrencyDisplay,\n  CurrencyDisplayProps,\n  CurrencyInput,\n  CurrencyInputProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Currency',\n  component: CurrencyInput\n} as Meta;\n\nexport const CurrencyInputDemo: Story<CurrencyInputProps> = (args: CurrencyInputProps) => {\n  const [value, setValue] = useState<string>();\n\n  return (\n    <CurrencyInput\n      value={value}\n      onChange={inputValue => setValue(inputValue)}\n      onBlur={inputValue => setValue(inputValue)}\n      currencyISOCode={args.currencyISOCode}\n      alwaysShowISOCode={args.alwaysShowISOCode}\n      showDecimal={args.showDecimal}\n      showGroupSeparators={args.showGroupSeparators}\n      step={args.step}\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nCurrencyInputDemo.args = {\n  currencyISOCode: 'USD',\n  alwaysShowISOCode: false,\n  showDecimal: true,\n  showGroupSeparators: true,\n  step: 1,\n  label: 'Currency input',\n  labelHidden: false,\n  info: 'Enter a numerical value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nCurrencyInputDemo.argTypes = {\n  currencyISOCode: {\n    options: ['USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  alwaysShowISOCode: { control: { type: 'boolean' } },\n  showDecimal: { control: { type: 'boolean' } },\n  showGroupSeparators: { control: { type: 'boolean' } },\n  step: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface CurrencyDisplayStoryProps extends CurrencyDisplayProps {\n  groupSeparators: boolean;\n  fractionDigits: number;\n  currency: 'symbol' | 'code' | 'name';\n  negative: 'minus-sign' | 'parentheses';\n  notation: 'standard' | 'compact';\n}\n\nexport const CurrencyDisplayDemo: Story<CurrencyDisplayStoryProps> = (\n  args: CurrencyDisplayStoryProps\n) => {\n  return (\n    <CurrencyDisplay\n      value={args.value}\n      currencyISOCode={args.currencyISOCode}\n      formattingOptions={{\n        fractionDigits: args.fractionDigits,\n        groupSeparators: args.groupSeparators,\n        currency: args.currency,\n        negative: args.negative,\n        notation: args.notation\n      }}\n    />\n  );\n};\n\nCurrencyDisplayDemo.args = {\n  value: undefined,\n  currencyISOCode: 'USD',\n  groupSeparators: true,\n  fractionDigits: undefined,\n  currency: 'symbol',\n  negative: 'minus-sign',\n  notation: 'standard'\n};\n\nCurrencyDisplayDemo.argTypes = {\n  value: { control: { type: 'number' } },\n  currencyISOCode: {\n    options: [undefined, 'USD', 'EUR', 'AUD', 'PLN', 'CZK', 'JPY'],\n    control: { type: 'select' }\n  },\n  groupSeparators: { control: { type: 'boolean' } },\n  fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },\n  negative: {\n    control: {\n      type: 'inline-radio'\n    },\n    options: ['minus-sign', 'parentheses']\n  },\n  currency: {\n    control: { type: 'select' },\n    options: ['symbol', 'code', 'name']\n  },\n  notation: {\n    control: { type: 'inline-radio' },\n    options: ['standard', 'compact']\n  }\n};\n"]}

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

@@ -4,8 +4,10 @@ export default _default;
 interface FieldGroupStoryProps {
     firstGroupName: string;
     firstGroupCollapsible: boolean;
+    firstGroupDescription: string;
     secondGroupName: string;
     secondGroupCollapsible: boolean;
+    secondGroupDescription: string;
 }
 export declare const FieldGroupDemo: Story<FieldGroupStoryProps>;
 //# sourceMappingURL=FieldGroup.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,sBAAsB,EAAE,OAAO,CAAC;CACjC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAmCtD,CAAC"}
+{"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAY/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,qBAAqB,EAAE,OAAO,CAAC;IAC/B,qBAAqB,EAAE,MAAM,CAAC;IAC9B,eAAe,EAAE,MAAM,CAAC;IACxB,sBAAsB,EAAE,OAAO,CAAC;IAChC,sBAAsB,EAAE,MAAM,CAAC;CAChC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CA2CtD,CAAC"}