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

package/jsx/core/RadioButton/RadioButton.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.stories.jsx","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,CAAC,WAAW,CACV,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC/E,OAAO,CACL,CAAC,WAAW,CACV,OAAO,CAAC,MAAM,CACd,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,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.jsx","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: '#000000',\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/jsx/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/jsx/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/jsx/core/Rating/Rating.stories.jsx

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

package/jsx/core/Rating/Rating.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Rating.stories.jsx","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,CAAC,MAAM,CACL,IAAI,IAAI,CAAC,CACT,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAC3B,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.jsx","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,CAAC,MAAM,CACL,IAAI,IAAI,CAAC,CACT,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,EAC3B,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,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF;SACF,CAAC,CAEF;MAAA,CAAC,MAAM,CACL,SAAS,CAAC,CAAC,CAAC,CAAC,CACb,KAAK,CAAC,CAAC,GAAG,CAAC,CACX,QAAQ,CAAC,YAAY,CACrB,UAAU,CAAC,wCAAwC,EAEvD;IAAA,EAAE,aAAa,CAAC,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: '#000000'\n};\n\nConfigurableRating.argTypes = {\n  color: { control: { type: 'color' } }\n};\n"]}

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

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

package/jsx/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;AAE/C,OAAO,EAA8B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAEvF,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC;AAUF,UAAU,4BAA4B;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAgBvE,CAAC"}

package/jsx/core/SearchInput/SearchInput.stories.jsx

@@ -1,4 +1,4 @@
-import { SearchInput } from '@pega/cosmos-react-core';
+import { Configuration, SearchInput } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/SearchInput',
     component: SearchInput
@@ -12,4 +12,21 @@ SearchInputDemo.args = {
 SearchInputDemo.argTypes = {
     placeholder: { control: { type: 'text' } }
 };
+export const ConfigurableSearchInput = (args) => {
+    return (<Configuration theme={{
+            components: {
+                'search-input': {
+                    'border-radius': args.borderRadius
+                }
+            }
+        }}>
+      <SearchInput />
+    </Configuration>);
+};
+ConfigurableSearchInput.args = {
+    borderRadius: 9999
+};
+ConfigurableSearchInput.argTypes = {
+    borderRadius: { control: { type: 'number' } }
+};
 //# sourceMappingURL=SearchInput.stories.jsx.map

package/jsx/core/SearchInput/SearchInput.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.stories.jsx","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,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAG,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.jsx","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAEvF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,OAAO,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,EAAG,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;AAMF,MAAM,CAAC,MAAM,uBAAuB,GAAwC,CAC1E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,CAAC,aAAa,CACZ,KAAK,CAAC,CAAC;YACL,UAAU,EAAE;gBACV,cAAc,EAAE;oBACd,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;aACF;SACF,CAAC,CAEF;MAAA,CAAC,WAAW,CAAC,AAAD,EACd;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, 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\ninterface ConfigurableSearchInputProps {\n  borderRadius?: number;\n}\n\nexport const ConfigurableSearchInput: Story<ConfigurableSearchInputProps> = (\n  args: ConfigurableSearchInputProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'search-input': {\n            'border-radius': args.borderRadius\n          }\n        }\n      }}\n    >\n      <SearchInput />\n    </Configuration>\n  );\n};\n\nConfigurableSearchInput.args = {\n  borderRadius: 9999\n};\n\nConfigurableSearchInput.argTypes = {\n  borderRadius: { control: { type: 'number' } }\n};\n"]}

package/jsx/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/jsx/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/jsx/core/Select/Select.stories.jsx

@@ -1,4 +1,4 @@
-import { Select, Option } from '@pega/cosmos-react-core';
+import { Select, Option, Configuration } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Select',
     component: Select
@@ -39,4 +39,38 @@ SelectDemo.argTypes = {
     disabled: { control: { type: 'boolean' } },
     readOnly: { control: { type: 'boolean' } }
 };
+export const ConfigurableSelect = (args) => {
+    return (<Configuration theme={{
+            components: {
+                select: {
+                    height: args.height,
+                    padding: args.padding,
+                    'border-color': args.borderColor,
+                    'border-width': args.borderWidth,
+                    'border-radius': args.borderRadius
+                }
+            }
+        }}>
+      <Select label='Select input' info='Choose a value'>
+        <Option>Choose an option…</Option>
+        <Option>Option 1</Option>
+        <Option>Option 2</Option>
+        <Option>Option 3</Option>
+      </Select>
+    </Configuration>);
+};
+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.jsx.map

package/jsx/core/Select/Select.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Select.stories.jsx","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,CAAC,MAAM,CACL,EAAE,CAAC,aAAa,CAChB,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAChB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CACxB,OAAO,CAAC,CACN,IAAI,CAAC,UAAU;YACb,CAAC,CAAC;gBACE;oBACE,EAAE,EAAE,QAAQ;oBACZ,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,MAAM;iBACb;aACF;YACH,CAAC,CAAC,SAAS,CACd,CAED;MAAA,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CACjC;MAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CACxB;MAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CACxB;MAAA,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAC1B;IAAA,EAAE,MAAM,CAAC,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.jsx","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/jsx/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/jsx/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/jsx/core/Sentiment/Sentiment.stories.jsx

@@ -1,4 +1,4 @@
-import { icons, Sentiment } from '@pega/cosmos-react-core';
+import { Configuration, icons, Sentiment } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Sentiment',
     component: Sentiment
@@ -36,4 +36,35 @@ SentimentDemo.argTypes = {
     negativeLabel: { control: { type: 'text' } },
     negativeIcon: { options: icons, control: { type: 'select', icons: true } }
 };
+export const ConfigurableSentiment = (args) => {
+    return (<Configuration theme={{
+            components: {
+                sentiment: {
+                    positive: {
+                        color: args.positiveColor
+                    },
+                    negative: {
+                        color: args.negativeColor
+                    },
+                    neutral: {
+                        color: args.neutralColor
+                    }
+                }
+            }
+        }}>
+      <Sentiment variant='positive'/>
+      <Sentiment variant='negative'/>
+      <Sentiment variant='neutral'/>
+    </Configuration>);
+};
+ConfigurableSentiment.args = {
+    positiveColor: '#20aa50',
+    negativeColor: '#d91c29',
+    neutralColor: '#000000'
+};
+ConfigurableSentiment.argTypes = {
+    positiveColor: { control: { type: 'color' } },
+    negativeColor: { control: { type: 'color' } },
+    neutralColor: { control: { type: 'color' } }
+};
 //# sourceMappingURL=Sentiment.stories.jsx.map

package/jsx/core/Sentiment/Sentiment.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Sentiment.stories.jsx","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,CAAC,SAAS,CACR,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,WAAW,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAC9B,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,MAAM,CAAC,CAAC,MAAM,CAAC,EACf,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.jsx","sourceRoot":"","sources":["../../../src/core/Sentiment/Sentiment.stories.tsx"],"names":[],"mappings":"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","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' />\n      <Sentiment variant='negative' />\n      <Sentiment variant='neutral' />\n    </Configuration>\n  );\n};\n\nConfigurableSentiment.args = {\n  positiveColor: '#20aa50',\n  negativeColor: '#d91c29',\n  neutralColor: '#000000'\n};\n\nConfigurableSentiment.argTypes = {\n  positiveColor: { control: { type: 'color' } },\n  negativeColor: { control: { type: 'color' } },\n  neutralColor: { control: { type: 'color' } }\n};\n"]}

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

@@ -4,4 +4,11 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const SwitchDemo: Story<SwitchProps>;
 export declare const SwitchInCard: Story<SwitchProps>;
+interface ConfigurableSwitchProps extends SwitchProps {
+    height?: string;
+    width?: string;
+    onColor?: string;
+    offColor?: string;
+}
+export declare const ConfigurableSwitch: Story<ConfigurableSwitchProps>;
 //# sourceMappingURL=Switch.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Switch/Switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAgB,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAIpE,wBAWU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,WAAW,CAYzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAc3C,CAAC"}
+{"version":3,"file":"Switch.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Switch/Switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAA+B,WAAW,EAAE,MAAM,yBAAyB,CAAC;;AAInF,wBAWU;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,WAAW,CAYzC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAc3C,CAAC;AAEF,UAAU,uBAAwB,SAAQ,WAAW;IACnD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAyB7D,CAAC"}

package/jsx/core/Switch/Switch.stories.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Card, Switch } from '@pega/cosmos-react-core';
+import { Card, Configuration, Switch } from '@pega/cosmos-react-core';
 import { StyledCard } from './Switch.styles';
 export default {
     title: 'Core/Switch',
@@ -23,4 +23,37 @@ export const SwitchInCard = (args) => {
       <Switch id='switch' on={on} onChange={() => setOn(curr => !curr)} label={args.label} disabled={args.disabled}/>
     </Card>);
 };
+export const ConfigurableSwitch = (args) => {
+    const [on, setOn] = useState(false);
+    return (<Configuration theme={{
+            components: {
+                switch: {
+                    height: args.height,
+                    width: args.width,
+                    on: {
+                        color: args.onColor
+                    },
+                    off: {
+                        color: args.offColor
+                    }
+                }
+            }
+        }}>
+      <Switch on={on} onChange={() => setOn(curr => !curr)} label='Toggle on/off'/>
+    </Configuration>);
+};
+ConfigurableSwitch.args = {
+    height: '1.5rem',
+    width: '3rem',
+    onColor: '#076bc9',
+    offColor: '#939393'
+};
+ConfigurableSwitch.argTypes = {
+    height: { control: { type: 'text' } },
+    width: { control: { type: 'text' } },
+    onColor: { control: { type: 'color' } },
+    offColor: { control: { type: 'color' } },
+    label: { table: { disable: true } },
+    disabled: { table: { disable: true } }
+};
 //# sourceMappingURL=Switch.stories.jsx.map

package/jsx/core/Switch/Switch.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.stories.jsx","sourceRoot":"","sources":["../../../src/core/Switch/Switch.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAuB,CAAC,IAAiB,EAAE,EAAE;IAClE,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpC,OAAO,CACL,CAAC,MAAM,CACL,EAAE,CAAC,QAAQ,CACX,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CACrC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EACxB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAuB,CAAC,IAAiB,EAAE,EAAE;IACpE,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpC,OAAO,CACL,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,CACnB;MAAA,CAAC,MAAM,CACL,EAAE,CAAC,QAAQ,CACX,EAAE,CAAC,CAAC,EAAE,CAAC,CACP,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CACrC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAClB,QAAQ,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,EAE5B;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Card, Switch, SwitchProps } from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Switch.styles';\n\nexport default {\n  title: 'Core/Switch',\n  component: Switch,\n  args: {\n    label: 'Toggle on/off',\n    disabled: false\n  },\n  argTypes: {\n    label: { control: { type: 'text' } },\n    disabled: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const SwitchDemo: Story<SwitchProps> = (args: SwitchProps) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Switch\n      id='switch'\n      on={on}\n      onChange={() => setOn(curr => !curr)}\n      label={args.label}\n      disabled={args.disabled}\n    />\n  );\n};\n\nexport const SwitchInCard: Story<SwitchProps> = (args: SwitchProps) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Card as={StyledCard}>\n      <Switch\n        id='switch'\n        on={on}\n        onChange={() => setOn(curr => !curr)}\n        label={args.label}\n        disabled={args.disabled}\n      />\n    </Card>\n  );\n};\n"]}
+{"version":3,"file":"Switch.stories.jsx","sourceRoot":"","sources":["../../../src/core/Switch/Switch.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Card, Configuration, Switch, SwitchProps } from '@pega/cosmos-react-core';\n\nimport { StyledCard } from './Switch.styles';\n\nexport default {\n  title: 'Core/Switch',\n  component: Switch,\n  args: {\n    label: 'Toggle on/off',\n    disabled: false\n  },\n  argTypes: {\n    label: { control: { type: 'text' } },\n    disabled: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const SwitchDemo: Story<SwitchProps> = (args: SwitchProps) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Switch\n      id='switch'\n      on={on}\n      onChange={() => setOn(curr => !curr)}\n      label={args.label}\n      disabled={args.disabled}\n    />\n  );\n};\n\nexport const SwitchInCard: Story<SwitchProps> = (args: SwitchProps) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Card as={StyledCard}>\n      <Switch\n        id='switch'\n        on={on}\n        onChange={() => setOn(curr => !curr)}\n        label={args.label}\n        disabled={args.disabled}\n      />\n    </Card>\n  );\n};\n\ninterface ConfigurableSwitchProps extends SwitchProps {\n  height?: string;\n  width?: string;\n  onColor?: string;\n  offColor?: string;\n}\n\nexport const ConfigurableSwitch: Story<ConfigurableSwitchProps> = (\n  args: ConfigurableSwitchProps\n) => {\n  const [on, setOn] = useState(false);\n\n  return (\n    <Configuration\n      theme={{\n        components: {\n          switch: {\n            height: args.height,\n            width: args.width,\n            on: {\n              color: args.onColor\n            },\n            off: {\n              color: args.offColor\n            }\n          }\n        }\n      }}\n    >\n      <Switch on={on} onChange={() => setOn(curr => !curr)} label='Toggle on/off' />\n    </Configuration>\n  );\n};\n\nConfigurableSwitch.args = {\n  height: '1.5rem',\n  width: '3rem',\n  onColor: '#076bc9',\n  offColor: '#939393'\n};\n\nConfigurableSwitch.argTypes = {\n  height: { control: { type: 'text' } },\n  width: { control: { type: 'text' } },\n  onColor: { control: { type: 'color' } },\n  offColor: { control: { type: 'color' } },\n  label: { table: { disable: true } },\n  disabled: { table: { disable: true } }\n};\n"]}

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

@@ -11,4 +11,29 @@ interface TableStoryProps {
 }
 export declare const TableDemo: Story<TableStoryProps>;
 export declare const StyledTableDemo: Story<TableStoryProps>;
+interface ConfigurableTableProps extends TableStoryProps {
+    headerFontSize?: string;
+    headerFontWeight?: string;
+    headerForegroundColor?: string;
+    headerBackgroundColor?: string;
+    headerVerticalSpacing?: number;
+    headerHorizontalSpacing?: number;
+    headerBorderWidth?: string;
+    headerBorderColor?: string;
+    bodyForegroundColor?: string;
+    bodyBackgroundColor?: string;
+    bodyVerticalSpacing?: number;
+    bodyHorizontalSpacing?: number;
+    bodyBorderWidth?: string;
+    bodyBorderColor?: string;
+    borderHorizontalInner?: boolean;
+    borderHorizontalOuter?: boolean;
+    borderVerticalInner?: boolean;
+    borderVerticalOuter?: boolean;
+    spacingHorizontalInner?: boolean;
+    spacingHorizontalOuter?: boolean;
+    spacingVerticalInner?: boolean;
+    spacingVerticalOuter?: boolean;
+}
+export declare const ConfigurableTable: Story<ConfigurableTableProps>;
 //# sourceMappingURL=Table.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAKjF,wBAiBU;AAEV,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CAmB5C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAuClD,CAAC"}
+{"version":3,"file":"Table.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Table/Table.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,UAAU,EAAiB,MAAM,yBAAyB,CAAC;;AAKhG,wBAiBU;AAEV,UAAU,eAAe;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC9C,OAAO,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,eAAe,CAmB5C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAuClD,CAAC;AAEF,UAAU,sBAAuB,SAAQ,eAAe;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,sBAAsB,CAuE3D,CAAC"}

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

@@ -1,4 +1,4 @@
-import { Status, Table } from '@pega/cosmos-react-core';
+import { Status, Table, Configuration } from '@pega/cosmos-react-core';
 import { tableData } from './Table.mocks';
 import { StyledBalance } from './Table.styles';
 export default {
@@ -55,4 +55,123 @@ export const StyledTableDemo = (args) => {
     ];
     return (<Table title={args.title} hoverHighlight={args.hoverHighlight} loading={args.loading} loadingMessage={args.loadingMessage} data={args.emptyTable ? [] : tableData} columns={columns}/>);
 };
+export const ConfigurableTable = (args) => {
+    const columns = [
+        { renderer: data => <b>{data.name}</b>, label: 'Name' },
+        { renderer: 'dob', label: 'Date of Birth' },
+        { renderer: 'address', label: 'Address' },
+        {
+            renderer: data => {
+                return (<>
+            {data.email && data.emailVerified && <Status variant='success'>{data.email}</Status>}
+            {data.email && !data.emailVerified && <Status variant='urgent'>{data.email}</Status>}
+          </>);
+            },
+            label: 'Email'
+        },
+        {
+            renderer: data => {
+                return (<StyledBalance negativeBalance={data.balance.startsWith('-')}>
+            {data.balance}
+          </StyledBalance>);
+            },
+            label: 'Account Balance',
+            align: 'right'
+        }
+    ];
+    return (<Configuration theme={{
+            components: {
+                table: {
+                    header: {
+                        'font-size': args.headerFontSize,
+                        'font-weight': args.headerFontWeight,
+                        'foreground-color': args.headerForegroundColor,
+                        'background-color': args.headerBackgroundColor,
+                        'vertical-spacing': args.headerVerticalSpacing,
+                        'horizontal-spacing': args.headerHorizontalSpacing,
+                        'border-width': args.headerBorderWidth,
+                        'border-color': args.headerBorderColor
+                    },
+                    body: {
+                        'foreground-color': args.bodyForegroundColor,
+                        'background-color': args.bodyBackgroundColor,
+                        'vertical-spacing': args.bodyVerticalSpacing,
+                        'horizontal-spacing': args.bodyHorizontalSpacing,
+                        'border-width': args.bodyBorderWidth,
+                        'border-color': args.bodyBorderColor
+                    },
+                    border: {
+                        'horizontal-inner': args.borderHorizontalInner,
+                        'horizontal-outer': args.borderHorizontalOuter,
+                        'vertical-inner': args.borderVerticalInner,
+                        'vertical-outer': args.borderVerticalOuter
+                    },
+                    spacing: {
+                        'horizontal-inner': args.spacingHorizontalInner,
+                        'horizontal-outer': args.spacingHorizontalOuter,
+                        'vertical-inner': args.spacingVerticalInner,
+                        'vertical-outer': args.spacingVerticalOuter
+                    }
+                }
+            }
+        }}>
+      <Table title='Accounts' data={tableData} columns={columns}/>
+    </Configuration>);
+};
+ConfigurableTable.args = {
+    headerFontSize: 's',
+    headerFontWeight: '600',
+    headerForegroundColor: '#000000',
+    headerBackgroundColor: '#f5f5f5',
+    headerVerticalSpacing: 1,
+    headerHorizontalSpacing: 2,
+    headerBorderWidth: '0.0625rem',
+    headerBorderColor: '#cfcfcf',
+    bodyForegroundColor: '#000000',
+    bodyBackgroundColor: '#ffffff',
+    bodyVerticalSpacing: 1,
+    bodyHorizontalSpacing: 1,
+    bodyBorderWidth: '0.0625rem',
+    bodyBorderColor: '#cfcfcf',
+    borderHorizontalInner: true,
+    borderHorizontalOuter: true,
+    borderVerticalInner: true,
+    borderVerticalOuter: true,
+    spacingHorizontalInner: true,
+    spacingHorizontalOuter: true,
+    spacingVerticalInner: true,
+    spacingVerticalOuter: true
+};
+ConfigurableTable.argTypes = {
+    headerFontSize: {
+        options: ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'],
+        control: { type: 'select' }
+    },
+    headerFontWeight: { control: { type: 'text' } },
+    headerForegroundColor: { control: { type: 'color' } },
+    headerBackgroundColor: { control: { type: 'color' } },
+    headerVerticalSpacing: { control: { type: 'number' } },
+    headerHorizontalSpacing: { control: { type: 'number' } },
+    headerBorderWidth: { control: { type: 'text' } },
+    headerBorderColor: { control: { type: 'color' } },
+    bodyForegroundColor: { control: { type: 'color' } },
+    bodyBackgroundColor: { control: { type: 'color' } },
+    bodyVerticalSpacing: { control: { type: 'number' } },
+    bodyHorizontalSpacing: { control: { type: 'number' } },
+    bodyBorderWidth: { control: { type: 'text' } },
+    bodyBorderColor: { control: { type: 'color' } },
+    borderHorizontalInner: { control: { type: 'boolean' } },
+    borderHorizontalOuter: { control: { type: 'boolean' } },
+    borderVerticalInner: { control: { type: 'boolean' } },
+    borderVerticalOuter: { control: { type: 'boolean' } },
+    spacingHorizontalInner: { control: { type: 'boolean' } },
+    spacingHorizontalOuter: { control: { type: 'boolean' } },
+    spacingVerticalInner: { control: { type: 'boolean' } },
+    spacingVerticalOuter: { control: { type: 'boolean' } },
+    title: { table: { disable: true } },
+    hoverHighlight: { table: { disable: true } },
+    loading: { table: { disable: true } },
+    loadingMessage: { table: { disable: true } },
+    emptyTable: { table: { disable: true } }
+};
 //# sourceMappingURL=Table.stories.jsx.map