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

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAmB,MAAM,yBAAyB,CAAC;AAEvE,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;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;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAClF,OAAO,CACL,KAAC,WAAW,IACV,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,WACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC/E,OAAO,CACL,KAAC,WAAW,IACV,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,WACvB,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { RadioButton, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/RadioButton',\n  component: RadioButton,\n  args: {\n    status: undefined,\n    label: 'Choose me',\n    required: false,\n    disabled: false,\n    readOnly: 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  }\n} as Meta;\n\nexport const DefaultRadioButton: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <RadioButton\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nexport const RadioButtonCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <RadioButton\n      variant='card'\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n"]}
+{"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, RadioButton, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/RadioButton',\n  component: RadioButton,\n  args: {\n    status: undefined,\n    label: 'Choose me',\n    required: false,\n    disabled: false,\n    readOnly: 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  }\n} as Meta;\n\nexport const DefaultRadioButton: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <RadioButton\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nexport const RadioButtonCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <RadioButton\n      variant='card'\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\ninterface ConfigurableRadioButtonProps 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 ConfigurableRadioButton: Story<ConfigurableRadioButtonProps> = (\n  args: ConfigurableRadioButtonProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'radio-button': {\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      <RadioButton label='Configurable Radio Button' />\n    </Configuration>\n  );\n};\n\nConfigurableRadioButton.args = {\n  size: '1.25rem',\n  backgroundColor: '#ffffff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: '50%',\n  labelColor: '#939393',\n  labelFontWeight: '400',\n  checkedBackgroundColor: '#076bc9',\n  checkedBorderColor: '#076bc9'\n};\n\nConfigurableRadioButton.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};\n"]}

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

@@ -1,7 +1,7 @@
 import { Meta, Story } from '@storybook/react';
-import { RadioCheckGroupProps } from '@pega/cosmos-react-core';
+import { RadioCheckGroupProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const RadioButtonGroupDemo: Story<RadioCheckGroupProps>;
-export declare const RadioButtonCardGroup: Story<RadioCheckGroupProps>;
+export declare const RadioButtonGroupDemo: Story<OmitStrict<RadioCheckGroupProps, 'children'>>;
+export declare const RadioButtonCardGroup: Story<OmitStrict<RadioCheckGroupProps, 'children'>>;
 //# sourceMappingURL=RadioButtonGroup.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,oBAAoB,EAErB,MAAM,yBAAyB,CAAC;;AAIjC,wBAmBU;AAEV,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,CAkB5D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,CAsE5D,CAAC"}
+{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,oBAAoB,EAEpB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAIjC,wBAmBU;AAEV,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAoBpF,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,UAAU,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAwEpF,CAAC"}

package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.js

@@ -22,13 +22,13 @@ export default {
     }
 };
 export const RadioButtonGroupDemo = (args) => {
-    return (_jsxs(RadioButtonGroup, { label: 'What do you want to eat?', name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true }, void 0), _jsx(RadioButton, { label: 'Apple', id: 'Apple' }, void 0), _jsx(RadioButton, { label: 'Mango', id: 'Mango' }, void 0), _jsx(RadioButton, { label: 'Orange', id: 'Orange' }, void 0)] }, void 0));
+    return (_jsxs(RadioButtonGroup, { label: 'What do you want to eat?', name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true }), _jsx(RadioButton, { label: 'Apple', id: 'Apple' }), _jsx(RadioButton, { label: 'Mango', id: 'Mango' }), _jsx(RadioButton, { label: 'Orange', id: 'Orange' })] }));
 };
 export const RadioButtonCardGroup = (args) => {
-    return (_jsxs(RadioButtonGroup, { variant: 'card', label: 'Which visuals appear satisfying?', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }, void 0), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." }, void 0)] }, void 0), id: 'paragraph', defaultChecked: true }, void 0), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0)] }, void 0), id: 'space-photo' }, void 0), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" }, void 0)] }, void 0)] }, void 0), id: 'cosmos' }, void 0), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
+    return (_jsxs(RadioButtonGroup, { variant: 'card', label: 'Which visuals appear satisfying?', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
                             { id: 'service', name: 'Service length', value: '1 year' },
                             { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
                             { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }
-                        ] }, void 0) }, void 0), id: 'phone-plan' }, void 0)] }, void 0));
+                        ] }) }), id: 'phone-plan' })] }));
 };
 //# sourceMappingURL=RadioButtonGroup.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  FieldGroup,\n  FieldValueList,\n  Flex,\n  RadioButton,\n  RadioButtonGroup,\n  RadioCheckGroupProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n  title: 'Core/RadioButtonGroup',\n  component: RadioButtonGroup,\n  args: {\n    labelHidden: false,\n    inline: false,\n    autoStack: true,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    labelHidden: { control: { type: 'boolean' } },\n    inline: { control: { type: 'boolean' } },\n    autoStack: { control: { type: 'boolean' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const RadioButtonGroupDemo: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n  return (\n    <RadioButtonGroup\n      label='What do you want to eat?'\n      name='Fruit'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton label='Banana' id='Banana' defaultChecked />\n      <RadioButton label='Apple' id='Apple' />\n      <RadioButton label='Mango' id='Mango' />\n      <RadioButton label='Orange' id='Orange' />\n    </RadioButtonGroup>\n  );\n};\n\nexport const RadioButtonCardGroup: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n  return (\n    <RadioButtonGroup\n      variant='card'\n      label='Which visuals appear satisfying?'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>A paragraph</Text>\n            <Paragraph>\n              This is a paragraph of text. It is meant to appear visually satisfying amongst the\n              other options in this group.\n            </Paragraph>\n          </Flex>\n        }\n        id='paragraph'\n        defaultChecked\n      />\n      <RadioButton\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>Space</Text>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n          </Flex>\n        }\n        id='space-photo'\n      />\n      <RadioButton\n        label={\n          <Flex container={{ gap: 1, alignItems: 'start' }}>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n            <Flex container={{ direction: 'column', gap: 1 }}>\n              <Text variant='h4'>Space</Text>\n              <Paragraph>\n                Space is the final frontier. There is so much to discover within Cosmos!\n              </Paragraph>\n            </Flex>\n          </Flex>\n        }\n        id='cosmos'\n      />\n      <RadioButton\n        label={\n          <FieldGroup name='Gold service plan'>\n            <FieldValueList\n              fields={[\n                { id: 'service', name: 'Service length', value: '1 year' },\n                { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n              ]}\n            />\n          </FieldGroup>\n        }\n        id='phone-plan'\n      />\n    </RadioButtonGroup>\n  );\n};\n"]}
+{"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  FieldGroup,\n  FieldValueList,\n  Flex,\n  RadioButton,\n  RadioButtonGroup,\n  RadioCheckGroupProps,\n  Text,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n  title: 'Core/RadioButtonGroup',\n  component: RadioButtonGroup,\n  args: {\n    labelHidden: false,\n    inline: false,\n    autoStack: true,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    labelHidden: { control: { type: 'boolean' } },\n    inline: { control: { type: 'boolean' } },\n    autoStack: { control: { type: 'boolean' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const RadioButtonGroupDemo: Story<OmitStrict<RadioCheckGroupProps, 'children'>> = (\n  args: OmitStrict<RadioCheckGroupProps, 'children'>\n) => {\n  return (\n    <RadioButtonGroup\n      label='What do you want to eat?'\n      name='Fruit'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton label='Banana' id='Banana' defaultChecked />\n      <RadioButton label='Apple' id='Apple' />\n      <RadioButton label='Mango' id='Mango' />\n      <RadioButton label='Orange' id='Orange' />\n    </RadioButtonGroup>\n  );\n};\n\nexport const RadioButtonCardGroup: Story<OmitStrict<RadioCheckGroupProps, 'children'>> = (\n  args: OmitStrict<RadioCheckGroupProps, 'children'>\n) => {\n  return (\n    <RadioButtonGroup\n      variant='card'\n      label='Which visuals appear satisfying?'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>A paragraph</Text>\n            <Paragraph>\n              This is a paragraph of text. It is meant to appear visually satisfying amongst the\n              other options in this group.\n            </Paragraph>\n          </Flex>\n        }\n        id='paragraph'\n        defaultChecked\n      />\n      <RadioButton\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>Space</Text>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n          </Flex>\n        }\n        id='space-photo'\n      />\n      <RadioButton\n        label={\n          <Flex container={{ gap: 1, alignItems: 'start' }}>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n            <Flex container={{ direction: 'column', gap: 1 }}>\n              <Text variant='h4'>Space</Text>\n              <Paragraph>\n                Space is the final frontier. There is so much to discover within Cosmos!\n              </Paragraph>\n            </Flex>\n          </Flex>\n        }\n        id='cosmos'\n      />\n      <RadioButton\n        label={\n          <FieldGroup name='Gold service plan'>\n            <FieldValueList\n              fields={[\n                { id: 'service', name: 'Service length', value: '1 year' },\n                { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n              ]}\n            />\n          </FieldGroup>\n        }\n        id='phone-plan'\n      />\n    </RadioButtonGroup>\n  );\n};\n"]}

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

@@ -6,4 +6,8 @@ interface RatingStoryProps extends RatingProps {
     ariaLabel?: string;
 }
 export declare const RatingDemo: Story<RatingStoryProps>;
+interface ConfigurableRatingProps {
+    color?: string;
+}
+export declare const ConfigurableRating: Story<ConfigurableRatingProps>;
 //# sourceMappingURL=Rating.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE9D,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAU9C,CAAC"}
+{"version":3,"file":"Rating.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAyB,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE7E,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAU9C,CAAC;AAgBF,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAqB7D,CAAC"}

package/lib/core/Rating/Rating.stories.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Rating } from '@pega/cosmos-react-core';
+import { Configuration, Rating } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Rating',
     component: Rating
 };
 export const RatingDemo = (args) => {
-    return (_jsx(Rating, { ...args, maxRating: args.maxRating, value: args.value, metaInfo: args.metaInfo, "aria-label": args.ariaLabel }, void 0));
+    return (_jsx(Rating, { ...args, maxRating: args.maxRating, value: args.value, metaInfo: args.metaInfo, "aria-label": args.ariaLabel }));
 };
 RatingDemo.args = {
     maxRating: 5,
@@ -19,4 +19,19 @@ RatingDemo.argTypes = {
     metaInfo: { control: { type: 'text' } },
     ariaLabel: { control: { type: 'text' } }
 };
+export const ConfigurableRating = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                rating: {
+                    color: args.color
+                }
+            }
+        }, children: _jsx(Rating, { maxRating: 5, value: 3.6, metaInfo: '52 reviews', "aria-label": '3.6 out of 5 stars based on 52 reviews' }) }));
+};
+ConfigurableRating.args = {
+    color: '#939393'
+};
+ConfigurableRating.argTypes = {
+    color: { control: { type: 'color' } }
+};
 //# sourceMappingURL=Rating.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.stories.js","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE9D,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,WAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACzC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Rating, RatingProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Rating',\n  component: Rating\n} as Meta;\n\ninterface RatingStoryProps extends RatingProps {\n  ariaLabel?: string;\n}\n\nexport const RatingDemo: Story<RatingStoryProps> = (args: RatingStoryProps) => {\n  return (\n    <Rating\n      {...args}\n      maxRating={args.maxRating}\n      value={args.value}\n      metaInfo={args.metaInfo}\n      aria-label={args.ariaLabel}\n    />\n  );\n};\n\nRatingDemo.args = {\n  maxRating: 5,\n  value: 3.6,\n  metaInfo: '52 reviews',\n  ariaLabel: '3.6 out of 5 stars based on 52 reviews'\n};\n\nRatingDemo.argTypes = {\n  maxRating: { control: { type: 'number' } },\n  value: { control: { type: 'number' } },\n  metaInfo: { control: { type: 'text' } },\n  ariaLabel: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"Rating.stories.js","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE7E,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,GAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACzC,CAAC;AAMF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF;SACF,YAED,KAAC,MAAM,IACL,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,GAAG,EACV,QAAQ,EAAC,YAAY,gBACV,wCAAwC,GACnD,GACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CACtC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Rating, RatingProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Rating',\n  component: Rating\n} as Meta;\n\ninterface RatingStoryProps extends RatingProps {\n  ariaLabel?: string;\n}\n\nexport const RatingDemo: Story<RatingStoryProps> = (args: RatingStoryProps) => {\n  return (\n    <Rating\n      {...args}\n      maxRating={args.maxRating}\n      value={args.value}\n      metaInfo={args.metaInfo}\n      aria-label={args.ariaLabel}\n    />\n  );\n};\n\nRatingDemo.args = {\n  maxRating: 5,\n  value: 3.6,\n  metaInfo: '52 reviews',\n  ariaLabel: '3.6 out of 5 stars based on 52 reviews'\n};\n\nRatingDemo.argTypes = {\n  maxRating: { control: { type: 'number' } },\n  value: { control: { type: 'number' } },\n  metaInfo: { control: { type: 'text' } },\n  ariaLabel: { control: { type: 'text' } }\n};\n\ninterface ConfigurableRatingProps {\n  color?: string;\n}\n\nexport const ConfigurableRating: Story<ConfigurableRatingProps> = (\n  args: ConfigurableRatingProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          rating: {\n            color: args.color\n          }\n        }\n      }}\n    >\n      <Rating\n        maxRating={5}\n        value={3.6}\n        metaInfo='52 reviews'\n        aria-label='3.6 out of 5 stars based on 52 reviews'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableRating.args = {\n  color: '#939393'\n};\n\nConfigurableRating.argTypes = {\n  color: { control: { type: 'color' } }\n};\n"]}

package/lib/core/SearchInput/SearchInput.mocks.d.ts

@@ -0,0 +1,12 @@
+export declare const searchResults: {
+    primary: string;
+    href: string;
+    secondary: string[];
+    id: string;
+}[];
+export declare const recentSearches: {
+    id: string;
+    primary: string;
+    href: string;
+}[];
+//# sourceMappingURL=SearchInput.mocks.d.ts.map

package/lib/core/SearchInput/SearchInput.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;GAmBzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;GAG1B,CAAC"}

package/lib/core/SearchInput/SearchInput.mocks.js

@@ -0,0 +1,25 @@
+export const searchResults = [
+    {
+        primary: 'Usability fixes',
+        href: '/BUG-90001',
+        secondary: ['BUG-90001', 'Updated on Thursday'],
+        id: 'BUG-90001'
+    },
+    {
+        primary: 'RTE Enhancements',
+        href: '/STORY-92120',
+        secondary: ['STORY-92120', 'Updated on Monday'],
+        id: 'STORY-92120'
+    },
+    {
+        primary: 'Cosmos Svelte Components',
+        href: '/EPIC-84623',
+        secondary: ['EPIC-84623', 'Updated on Tuesday'],
+        id: 'EPIC-84623'
+    }
+];
+export const recentSearches = [
+    { id: '1', primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },
+    { id: '2', primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }
+];
+//# sourceMappingURL=SearchInput.mocks.js.map

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

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

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

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

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

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

package/lib/core/SearchInput/SearchInput.stories.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
 import { SearchInput } from '@pega/cosmos-react-core';
+import { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';
 export default {
     title: 'Core/SearchInput',
     component: SearchInput
 };
 export const SearchInputDemo = (args) => {
-    return _jsx(SearchInput, { ...args, placeholder: args.placeholder }, void 0);
+    const [value, setValue] = useState('');
+    return (_jsx(SearchInput, { ...args, placeholder: args.placeholder, onSearchChange: setValue, value: value }));
 };
 SearchInputDemo.args = {
     placeholder: 'Search…'
@@ -13,4 +16,30 @@ SearchInputDemo.args = {
 SearchInputDemo.argTypes = {
     placeholder: { control: { type: 'text' } }
 };
+export const EnhancedSearchInputDemo = () => {
+    const [value, setValue] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const timeout = useRef(null);
+    const onValueChange = (val) => {
+        setValue(val);
+        setLoading(true);
+        setSearchResults([]);
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = window.setTimeout(() => {
+            if (val) {
+                setSearchResults(mockSearchResults.filter(res => {
+                    return res.primary.toLowerCase().includes(val.toLowerCase());
+                }));
+            }
+            setLoading(false);
+        }, 1000);
+    };
+    return (_jsx(SearchInput, { filters: ['Story', 'Very long filter'], loading: loading, searchResults: searchResults?.map(result => ({
+            ...result,
+            onClick: (id, e) => e.preventDefault()
+        })), value: value, onSearchChange: onValueChange, recentSearches: recentSearches, advancedSearchLink: { href: '/?path=/story/work-searchresults--search-results-demo' } }));
+};
 //# sourceMappingURL=SearchInput.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAExE,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,OAAO,KAAC,WAAW,OAAK,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,WAAI,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/SearchInput',\n  component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n  return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n  placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n  placeholder: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,KAAC,WAAW,OAAK,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACjG,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAU,GAAG,EAAE;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC1F,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,gBAAgB,CAAC,EAAE,CAAC,CAAC;QACrB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC/B;QACD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,GAAG,EAAE;gBACP,gBAAgB,CACd,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;oBAC7B,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;gBAC/D,CAAC,CAAC,CACH,CAAC;aACH;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,EACtC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC3C,GAAG,MAAM;YACT,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;SACvC,CAAC,CAAC,EACH,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,aAAa,EAC7B,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE,EAAE,IAAI,EAAE,uDAAuD,EAAE,GACrF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nimport { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';\n\nexport default {\n  title: 'Core/SearchInput',\n  component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n  const [value, setValue] = useState('');\n  return (\n    <SearchInput {...args} placeholder={args.placeholder} onSearchChange={setValue} value={value} />\n  );\n};\n\nSearchInputDemo.args = {\n  placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n  placeholder: { control: { type: 'text' } }\n};\n\nexport const EnhancedSearchInputDemo: Story = () => {\n  const [value, setValue] = useState('');\n  const [searchResults, setSearchResults] = useState<SearchInputProps['searchResults']>([]);\n  const [loading, setLoading] = useState(false);\n  const timeout = useRef<number | null>(null);\n  const onValueChange = (val: string) => {\n    setValue(val);\n    setLoading(true);\n    setSearchResults([]);\n    if (timeout.current) {\n      clearTimeout(timeout.current);\n    }\n    timeout.current = window.setTimeout(() => {\n      if (val) {\n        setSearchResults(\n          mockSearchResults.filter(res => {\n            return res.primary.toLowerCase().includes(val.toLowerCase());\n          })\n        );\n      }\n      setLoading(false);\n    }, 1000);\n  };\n\n  return (\n    <SearchInput\n      filters={['Story', 'Very long filter']}\n      loading={loading}\n      searchResults={searchResults?.map(result => ({\n        ...result,\n        onClick: (id, e) => e.preventDefault()\n      }))}\n      value={value}\n      onSearchChange={onValueChange}\n      recentSearches={recentSearches}\n      advancedSearchLink={{ href: '/?path=/story/work-searchresults--search-results-demo' }}\n    />\n  );\n};\n"]}

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

@@ -6,4 +6,12 @@ interface SelectStoryProps extends SelectProps {
     showAction: boolean;
 }
 export declare const SelectDemo: Story<SelectStoryProps>;
+interface ConfigurableSelectProps {
+    height?: string;
+    padding?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    borderRadius?: string;
+}
+export declare const ConfigurableSelect: Story<ConfigurableSelectProps>;
 //# sourceMappingURL=Select.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAU,MAAM,yBAAyB,CAAC;;AAEtE,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CA6B9C,CAAC"}
+{"version":3,"file":"Select.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAyB,MAAM,yBAAyB,CAAC;;AAErF,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CA6B9C,CAAC;AAwBF,UAAU,uBAAuB;IAC/B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAyB7D,CAAC"}

package/lib/core/Select/Select.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Select, Option } from '@pega/cosmos-react-core';
+import { Select, Option, Configuration } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Select',
     component: Select
@@ -13,7 +13,7 @@ export const SelectDemo = (args) => {
                     icon: 'gear'
                 }
             ]
-            : undefined, children: [_jsx(Option, { children: "Choose an option\u2026" }, void 0), _jsx(Option, { children: "Option 1" }, void 0), _jsx(Option, { children: "Option 2" }, void 0), _jsx(Option, { children: "Option 3" }, void 0)] }, void 0));
+            : undefined, children: [_jsx(Option, { children: "Choose an option\u2026" }), _jsx(Option, { children: "Option 1" }), _jsx(Option, { children: "Option 2" }), _jsx(Option, { children: "Option 3" })] }));
 };
 SelectDemo.args = {
     showAction: false,
@@ -35,4 +35,31 @@ SelectDemo.argTypes = {
     disabled: { control: { type: 'boolean' } },
     readOnly: { control: { type: 'boolean' } }
 };
+export const ConfigurableSelect = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                select: {
+                    height: args.height,
+                    padding: args.padding,
+                    'border-color': args.borderColor,
+                    'border-width': args.borderWidth,
+                    'border-radius': args.borderRadius
+                }
+            }
+        }, children: _jsxs(Select, { label: 'Select input', info: 'Choose a value', children: [_jsx(Option, { children: "Choose an option\u2026" }), _jsx(Option, { children: "Option 1" }), _jsx(Option, { children: "Option 2" }), _jsx(Option, { children: "Option 3" })] }) }));
+};
+ConfigurableSelect.args = {
+    height: '2rem',
+    padding: '0.5rem',
+    borderColor: '#939393',
+    borderWidth: '0.0625rem',
+    borderRadius: '0.5'
+};
+ConfigurableSelect.argTypes = {
+    height: { control: { type: 'text' } },
+    padding: { control: { type: 'text' } },
+    borderColor: { control: { type: 'color' } },
+    borderWidth: { control: { type: 'text' } },
+    borderRadius: { control: { type: 'text' } }
+};
 //# sourceMappingURL=Select.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAe,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEtE,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,MAAC,MAAM,IACL,EAAE,EAAC,aAAa,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EACL,IAAI,CAAC,UAAU;YACb,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,QAAQ;oBACZ,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,MAAM;iBACb;aACF;YACH,CAAC,CAAC,SAAS,aAGf,KAAC,MAAM,iDAA2B,EAClC,KAAC,MAAM,mCAAkB,EACzB,KAAC,MAAM,mCAAkB,EACzB,KAAC,MAAM,mCAAkB,YAClB,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,UAAU,EAAE,KAAK;IACjB,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,gBAAgB;IACtB,MAAM,EAAE,SAAS;IACjB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Select, SelectProps, Option } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Select',\n  component: Select\n} as Meta;\n\ninterface SelectStoryProps extends SelectProps {\n  showAction: boolean;\n}\n\nexport const SelectDemo: Story<SelectStoryProps> = (args: SelectStoryProps) => {\n  return (\n    <Select\n      id='select-demo'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    >\n      <Option>Choose an option…</Option>\n      <Option>Option 1</Option>\n      <Option>Option 2</Option>\n      <Option>Option 3</Option>\n    </Select>\n  );\n};\n\nSelectDemo.args = {\n  showAction: false,\n  label: 'Select input',\n  labelHidden: false,\n  info: 'Choose a value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nSelectDemo.argTypes = {\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Select.stories.js","sourceRoot":"","sources":["../../../src/core/Select/Select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Select, SelectProps, Option, Configuration } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Select',\n  component: Select\n} as Meta;\n\ninterface SelectStoryProps extends SelectProps {\n  showAction: boolean;\n}\n\nexport const SelectDemo: Story<SelectStoryProps> = (args: SelectStoryProps) => {\n  return (\n    <Select\n      id='select-demo'\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      actions={\n        args.showAction\n          ? [\n              {\n                id: 'config',\n                text: 'Configure',\n                icon: 'gear'\n              }\n            ]\n          : undefined\n      }\n    >\n      <Option>Choose an option…</Option>\n      <Option>Option 1</Option>\n      <Option>Option 2</Option>\n      <Option>Option 3</Option>\n    </Select>\n  );\n};\n\nSelectDemo.args = {\n  showAction: false,\n  label: 'Select input',\n  labelHidden: false,\n  info: 'Choose a value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nSelectDemo.argTypes = {\n  showAction: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableSelectProps {\n  height?: string;\n  padding?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: string;\n}\n\nexport const ConfigurableSelect: Story<ConfigurableSelectProps> = (\n  args: ConfigurableSelectProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          select: {\n            height: args.height,\n            padding: args.padding,\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'border-radius': args.borderRadius\n          }\n        }\n      }}\n    >\n      <Select label='Select input' info='Choose a value'>\n        <Option>Choose an option…</Option>\n        <Option>Option 1</Option>\n        <Option>Option 2</Option>\n        <Option>Option 3</Option>\n      </Select>\n    </Configuration>\n  );\n};\n\nConfigurableSelect.args = {\n  height: '2rem',\n  padding: '0.5rem',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: '0.5'\n};\n\nConfigurableSelect.argTypes = {\n  height: { control: { type: 'text' } },\n  padding: { control: { type: 'text' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'text' } }\n};\n"]}

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

@@ -11,4 +11,10 @@ interface SentimentStoryProps extends SentimentProps {
     negativeIcon: string;
 }
 export declare const SentimentDemo: Story<SentimentStoryProps>;
+interface ConfigurableSentimentProps {
+    positiveColor?: string;
+    negativeColor?: string;
+    neutralColor?: string;
+}
+export declare const ConfigurableSentiment: Story<ConfigurableSentimentProps>;
 //# sourceMappingURL=Sentiment.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sentiment.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAoB,cAAc,EAAE,MAAM,yBAAyB,CAAC;;AAE3E,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAqBpD,CAAC"}
+{"version":3,"file":"Sentiment.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAmC,cAAc,EAAE,MAAM,yBAAyB,CAAC;;AAE1F,wBAGU;AAEV,UAAU,mBAAoB,SAAQ,cAAc;IAClD,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,mBAAmB,CAqBpD,CAAC;AAwBF,UAAU,0BAA0B;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CA0BnE,CAAC"}

package/lib/core/Sentiment/Sentiment.stories.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { icons, Sentiment } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Configuration, icons, Sentiment } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Sentiment',
     component: Sentiment
@@ -15,7 +15,7 @@ export const SentimentDemo = (args) => {
         neutral: args.neutralLabel,
         negative: args.negativeLabel
     };
-    return (_jsx(Sentiment, { variant: args.variant, labelHidden: args.labelHidden, icons: iconNames, labels: labels }, void 0));
+    return (_jsx(Sentiment, { variant: args.variant, labelHidden: args.labelHidden, icons: iconNames, labels: labels }));
 };
 SentimentDemo.args = {
     variant: 'positive',
@@ -37,4 +37,31 @@ SentimentDemo.argTypes = {
     negativeLabel: { control: { type: 'text' } },
     negativeIcon: { options: icons, control: { type: 'select', icons: true } }
 };
+export const ConfigurableSentiment = (args) => {
+    return (_jsxs(Configuration, { theme: {
+            components: {
+                sentiment: {
+                    positive: {
+                        color: args.positiveColor
+                    },
+                    negative: {
+                        color: args.negativeColor
+                    },
+                    neutral: {
+                        color: args.neutralColor
+                    }
+                }
+            }
+        }, children: [_jsx(Sentiment, { variant: 'positive', icons: { positive: 'face-happy-solid' } }), _jsx(Sentiment, { variant: 'negative', icons: { negative: 'face-sad-solid' } }), _jsx(Sentiment, { variant: 'neutral', icons: { neutral: 'face-blank-solid' } })] }));
+};
+ConfigurableSentiment.args = {
+    positiveColor: '#20aa50',
+    negativeColor: '#d91c29',
+    neutralColor: '#939393'
+};
+ConfigurableSentiment.argTypes = {
+    positiveColor: { control: { type: 'color' } },
+    negativeColor: { control: { type: 'color' } },
+    neutralColor: { control: { type: 'color' } }
+};
 //# sourceMappingURL=Sentiment.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Sentiment.stories.js","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAkB,MAAM,yBAAyB,CAAC;AAE3E,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,SAAS;CACb,CAAC;AAWV,MAAM,CAAC,MAAM,aAAa,GAA+B,CAAC,IAAyB,EAAE,EAAE;IACrF,MAAM,SAAS,GAAG;QAChB,QAAQ,EAAE,IAAI,CAAC,YAAY;QAC3B,OAAO,EAAE,IAAI,CAAC,WAAW;QACzB,QAAQ,EAAE,IAAI,CAAC,YAAY;KAC5B,CAAC;IAEF,MAAM,MAAM,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,aAAa;QAC5B,OAAO,EAAE,IAAI,CAAC,YAAY;QAC1B,QAAQ,EAAE,IAAI,CAAC,aAAa;KAC7B,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,WACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,UAAU;IACnB,WAAW,EAAE,KAAK;IAClB,aAAa,EAAE,MAAM;IACrB,YAAY,EAAE,kBAAkB;IAChC,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,kBAAkB;IAC/B,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,gBAAgB;CAC/B,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtF,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAC1E,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACzE,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;CAC3E,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { icons, Sentiment, SentimentProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Sentiment',\n  component: Sentiment\n} as Meta;\n\ninterface SentimentStoryProps extends SentimentProps {\n  positiveLabel: string;\n  neutralLabel: string;\n  negativeLabel: string;\n  positiveIcon: string;\n  neutralIcon: string;\n  negativeIcon: string;\n}\n\nexport const SentimentDemo: Story<SentimentStoryProps> = (args: SentimentStoryProps) => {\n  const iconNames = {\n    positive: args.positiveIcon,\n    neutral: args.neutralIcon,\n    negative: args.negativeIcon\n  };\n\n  const labels = {\n    positive: args.positiveLabel,\n    neutral: args.neutralLabel,\n    negative: args.negativeLabel\n  };\n\n  return (\n    <Sentiment\n      variant={args.variant}\n      labelHidden={args.labelHidden}\n      icons={iconNames}\n      labels={labels}\n    />\n  );\n};\n\nSentimentDemo.args = {\n  variant: 'positive',\n  labelHidden: false,\n  positiveLabel: 'Yay!',\n  positiveIcon: 'face-happy-solid',\n  neutralLabel: 'Hm…',\n  neutralIcon: 'face-blank-solid',\n  negativeLabel: 'Uh-oh!',\n  negativeIcon: 'face-sad-solid'\n};\n\nSentimentDemo.argTypes = {\n  variant: { options: ['positive', 'neutral', 'negative'], control: { type: 'select' } },\n  labelHidden: { control: { type: 'boolean' } },\n  positiveLabel: { control: { type: 'text' } },\n  positiveIcon: { options: icons, control: { type: 'select', icons: true } },\n  neutralLabel: { control: { type: 'text' } },\n  neutralIcon: { options: icons, control: { type: 'select', icons: true } },\n  negativeLabel: { control: { type: 'text' } },\n  negativeIcon: { options: icons, control: { type: 'select', icons: true } }\n};\n"]}
+{"version":3,"file":"Sentiment.stories.js","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,EAAkB,MAAM,yBAAyB,CAAC;AAE1F,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,SAAS;CACb,CAAC;AAWV,MAAM,CAAC,MAAM,aAAa,GAA+B,CAAC,IAAyB,EAAE,EAAE;IACrF,MAAM,SAAS,GAAG;QAChB,QAAQ,EAAE,IAAI,CAAC,YAAY;QAC3B,OAAO,EAAE,IAAI,CAAC,WAAW;QACzB,QAAQ,EAAE,IAAI,CAAC,YAAY;KAC5B,CAAC;IAEF,MAAM,MAAM,GAAG;QACb,QAAQ,EAAE,IAAI,CAAC,aAAa;QAC5B,OAAO,EAAE,IAAI,CAAC,YAAY;QAC1B,QAAQ,EAAE,IAAI,CAAC,aAAa;KAC7B,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,KAAK,EAAE,SAAS,EAChB,MAAM,EAAE,MAAM,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,UAAU;IACnB,WAAW,EAAE,KAAK;IAClB,aAAa,EAAE,MAAM;IACrB,YAAY,EAAE,kBAAkB;IAChC,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,kBAAkB;IAC/B,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,gBAAgB;CAC/B,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtF,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAC1E,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACzE,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC5C,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;CAC3E,CAAC;AAQF,MAAM,CAAC,MAAM,qBAAqB,GAAsC,CACtE,IAAgC,EAChC,EAAE;IACF,OAAO,CACL,MAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,SAAS,EAAE;oBACT,QAAQ,EAAE;wBACR,KAAK,EAAE,IAAI,CAAC,aAAa;qBAC1B;oBACD,QAAQ,EAAE;wBACR,KAAK,EAAE,IAAI,CAAC,aAAa;qBAC1B;oBACD,OAAO,EAAE;wBACP,KAAK,EAAE,IAAI,CAAC,YAAY;qBACzB;iBACF;aACF;SACF,aAED,KAAC,SAAS,IAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,kBAAkB,EAAE,GAAI,EACzE,KAAC,SAAS,IAAC,OAAO,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAI,EACvE,KAAC,SAAS,IAAC,OAAO,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE,GAAI,IACzD,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,aAAa,EAAE,SAAS;IACxB,aAAa,EAAE,SAAS;IACxB,YAAY,EAAE,SAAS;CACxB,CAAC;AAEF,qBAAqB,CAAC,QAAQ,GAAG;IAC/B,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,aAAa,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC7C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, icons, Sentiment, SentimentProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Sentiment',\n  component: Sentiment\n} as Meta;\n\ninterface SentimentStoryProps extends SentimentProps {\n  positiveLabel: string;\n  neutralLabel: string;\n  negativeLabel: string;\n  positiveIcon: string;\n  neutralIcon: string;\n  negativeIcon: string;\n}\n\nexport const SentimentDemo: Story<SentimentStoryProps> = (args: SentimentStoryProps) => {\n  const iconNames = {\n    positive: args.positiveIcon,\n    neutral: args.neutralIcon,\n    negative: args.negativeIcon\n  };\n\n  const labels = {\n    positive: args.positiveLabel,\n    neutral: args.neutralLabel,\n    negative: args.negativeLabel\n  };\n\n  return (\n    <Sentiment\n      variant={args.variant}\n      labelHidden={args.labelHidden}\n      icons={iconNames}\n      labels={labels}\n    />\n  );\n};\n\nSentimentDemo.args = {\n  variant: 'positive',\n  labelHidden: false,\n  positiveLabel: 'Yay!',\n  positiveIcon: 'face-happy-solid',\n  neutralLabel: 'Hm…',\n  neutralIcon: 'face-blank-solid',\n  negativeLabel: 'Uh-oh!',\n  negativeIcon: 'face-sad-solid'\n};\n\nSentimentDemo.argTypes = {\n  variant: { options: ['positive', 'neutral', 'negative'], control: { type: 'select' } },\n  labelHidden: { control: { type: 'boolean' } },\n  positiveLabel: { control: { type: 'text' } },\n  positiveIcon: { options: icons, control: { type: 'select', icons: true } },\n  neutralLabel: { control: { type: 'text' } },\n  neutralIcon: { options: icons, control: { type: 'select', icons: true } },\n  negativeLabel: { control: { type: 'text' } },\n  negativeIcon: { options: icons, control: { type: 'select', icons: true } }\n};\n\ninterface ConfigurableSentimentProps {\n  positiveColor?: string;\n  negativeColor?: string;\n  neutralColor?: string;\n}\n\nexport const ConfigurableSentiment: Story<ConfigurableSentimentProps> = (\n  args: ConfigurableSentimentProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          sentiment: {\n            positive: {\n              color: args.positiveColor\n            },\n            negative: {\n              color: args.negativeColor\n            },\n            neutral: {\n              color: args.neutralColor\n            }\n          }\n        }\n      }}\n    >\n      <Sentiment variant='positive' icons={{ positive: 'face-happy-solid' }} />\n      <Sentiment variant='negative' icons={{ negative: 'face-sad-solid' }} />\n      <Sentiment variant='neutral' icons={{ neutral: 'face-blank-solid' }} />\n    </Configuration>\n  );\n};\n\nConfigurableSentiment.args = {\n  positiveColor: '#20aa50',\n  negativeColor: '#d91c29',\n  neutralColor: '#939393'\n};\n\nConfigurableSentiment.argTypes = {\n  positiveColor: { control: { type: 'color' } },\n  negativeColor: { control: { type: 'color' } },\n  neutralColor: { control: { type: 'color' } }\n};\n"]}

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

@@ -1,11 +1,12 @@
 import { Meta, Story } from '@storybook/react';
-import { SliderProps } from '@pega/cosmos-react-core';
+import { SliderProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface SliderStoryProps extends SliderProps {
+declare type SliderStoryProps = OmitStrict<SliderProps, 'value' | 'onChange'> & {
     min: number;
     max: number;
     step: number;
-}
+    value?: SliderProps['value'];
+};
 export declare const SliderDemo: Story<SliderStoryProps>;
 //# sourceMappingURL=Slider.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAU,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAE9D,wBAGU;AAGV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAoC9C,CAAC"}
+{"version":3,"file":"Slider.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAU,WAAW,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAE1E,wBAGU;AAGV,aAAK,gBAAgB,GAAG,UAAU,CAAC,WAAW,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IACtE,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,gBAAgB,CAoC9C,CAAC"}

package/lib/core/Slider/Slider.stories.js

@@ -6,7 +6,7 @@ export default {
     component: Slider
 };
 export const SliderDemo = (args) => {
-    const [value, setValue] = useState(args.value);
+    const [value, setValue] = useState(args.value || 0);
     let ticksObject = args.ticks;
     if (args.max > args.min && !ticksObject) {
         ticksObject = {};
@@ -18,7 +18,7 @@ export const SliderDemo = (args) => {
             ticksObject[tick] = tick.toString();
         });
     }
-    return (_jsx(Slider, { orientation: args.orientation, step: args.step, min: args.min, max: args.max, ticks: ticksObject, showProgress: args.showProgress, preview: args.preview, showInput: args.showInput, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: (changeValue) => setValue(changeValue) }, void 0));
+    return (_jsx(Slider, { orientation: args.orientation, step: args.step, min: args.min, max: args.max, ticks: ticksObject, showProgress: args.showProgress, preview: args.preview, showInput: args.showInput, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, value: value, onChange: (changeValue) => setValue(changeValue) }));
 };
 SliderDemo.args = {
     orientation: 'vertical',

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

@@ -1 +1 @@
-{"version":3,"file":"Slider.stories.js","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Slider, SliderProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Slider',\n  component: Slider\n} as Meta;\n\n// Necessary to prevent linting undefined errors since these will never be undefined in the demo\ninterface SliderStoryProps extends SliderProps {\n  min: number;\n  max: number;\n  step: number;\n}\n\nexport const SliderDemo: Story<SliderStoryProps> = (args: SliderStoryProps) => {\n  const [value, setValue] = useState(args.value);\n  let ticksObject: SliderProps['ticks'] = args.ticks;\n\n  if (args.max > args.min && !ticksObject) {\n    ticksObject = {};\n    const numTicks = Math.floor((args.max - args.min) / (args.step || 1)) + 1;\n    Array(numTicks)\n      .fill(0)\n      .map((_, index) => args.min + index * args.step)\n      .forEach(tick => {\n        ticksObject![tick] = tick.toString();\n      });\n  }\n\n  return (\n    <Slider\n      orientation={args.orientation}\n      step={args.step}\n      min={args.min}\n      max={args.max}\n      ticks={ticksObject}\n      showProgress={args.showProgress}\n      preview={args.preview}\n      showInput={args.showInput}\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      value={value}\n      onChange={(changeValue: number) => setValue(changeValue)}\n    />\n  );\n};\n\nSliderDemo.args = {\n  orientation: 'vertical',\n  step: 1,\n  min: 0,\n  max: 10,\n  value: 5,\n  ticks: undefined,\n  showProgress: true,\n  preview: false,\n  showInput: true,\n  label: 'Slider input',\n  labelHidden: false,\n  info: 'Pick a value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nSliderDemo.argTypes = {\n  orientation: { options: ['vertical', 'horizontal'], control: { type: 'inline-radio' } },\n  step: { control: { type: 'number' } },\n  min: { control: { type: 'number' } },\n  max: { control: { type: 'number' } },\n  value: { control: { type: 'number' } },\n  ticks: { control: { type: 'object' } },\n  showProgress: { control: { type: 'boolean' } },\n  preview: { control: { type: 'boolean' } },\n  showInput: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Slider.stories.js","sourceRoot":"","sources":["../../../src/core/Slider/Slider.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Slider, SliderProps, OmitStrict } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Slider',\n  component: Slider\n} as Meta;\n\n// Necessary to prevent linting undefined errors since these will never be undefined in the demo\ntype SliderStoryProps = OmitStrict<SliderProps, 'value' | 'onChange'> & {\n  min: number;\n  max: number;\n  step: number;\n  value?: SliderProps['value'];\n};\n\nexport const SliderDemo: Story<SliderStoryProps> = (args: SliderStoryProps) => {\n  const [value, setValue] = useState(args.value || 0);\n  let ticksObject: SliderProps['ticks'] = args.ticks;\n\n  if (args.max > args.min && !ticksObject) {\n    ticksObject = {};\n    const numTicks = Math.floor((args.max - args.min) / (args.step || 1)) + 1;\n    Array(numTicks)\n      .fill(0)\n      .map((_, index) => args.min + index * args.step)\n      .forEach(tick => {\n        ticksObject![tick] = tick.toString();\n      });\n  }\n\n  return (\n    <Slider\n      orientation={args.orientation}\n      step={args.step}\n      min={args.min}\n      max={args.max}\n      ticks={ticksObject}\n      showProgress={args.showProgress}\n      preview={args.preview}\n      showInput={args.showInput}\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      value={value}\n      onChange={(changeValue: number) => setValue(changeValue)}\n    />\n  );\n};\n\nSliderDemo.args = {\n  orientation: 'vertical',\n  step: 1,\n  min: 0,\n  max: 10,\n  value: 5,\n  ticks: undefined,\n  showProgress: true,\n  preview: false,\n  showInput: true,\n  label: 'Slider input',\n  labelHidden: false,\n  info: 'Pick a value',\n  status: undefined,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nSliderDemo.argTypes = {\n  orientation: { options: ['vertical', 'horizontal'], control: { type: 'inline-radio' } },\n  step: { control: { type: 'number' } },\n  min: { control: { type: 'number' } },\n  max: { control: { type: 'number' } },\n  value: { control: { type: 'number' } },\n  ticks: { control: { type: 'object' } },\n  showProgress: { control: { type: 'boolean' } },\n  preview: { control: { type: 'boolean' } },\n  showInput: { control: { type: 'boolean' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -2,10 +2,10 @@ import { Meta, Story } from '@storybook/react';
 import { SummaryItemProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface SummaryItemStoryProps extends SummaryItemProps {
-    showSecondary: boolean;
-    showVisual: boolean;
-    showActions: boolean;
-}
+declare type SummaryItemStoryProps = SummaryItemProps & {
+    showSecondary?: boolean;
+    showVisual?: boolean;
+    showActions?: boolean;
+};
 export declare const SummaryItemDemo: Story<SummaryItemStoryProps>;
 //# sourceMappingURL=SummaryItem.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SummaryItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAOL,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAMU;AAEV,UAAU,qBAAsB,SAAQ,gBAAgB;IACtD,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA+CxD,CAAC"}
+{"version":3,"file":"SummaryItem.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SummaryItem/SummaryItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAOL,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAMU;AAEV,aAAK,qBAAqB,GAAG,gBAAgB,GAAG;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA+CxD,CAAC"}