@pega/cosmos-react-demos 3.0.0-dev.4.1 → 3.0.0-dev.4.2

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js

@@ -1,28 +1,16 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/no-unescaped-entities */
 import { useRef, useState } from 'react';
-import styled from 'styled-components';
-import { boolean, select } from '@storybook/addon-knobs';
-import { Card, CardContent, Text, Grid, Button, defaultThemeProp, Popover, useElement, useOuterEvent, Flex, useI18n } from '@pega/cosmos-react-core';
+import { Card, CardContent, Text, Button, Popover, useElement, useOuterEvent, Flex, useI18n } from '@pega/cosmos-react-core';
 import { ConditionBuilder, FieldCondition, AtomicCondition, getInitConditionForLhs, isValidCondition, formatCondition } from '@pega/cosmos-react-condition-builder';
 import { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';
-const StyledGrid = styled(Grid) `
-  max-width: 60rem;
-`;
-const StyledCodeBlock = styled.pre `
-  padding: ${props => props.theme.base.spacing};
-  margin-bottom: ${props => props.theme.base.spacing};
-`;
-StyledCodeBlock.defaultProps = defaultThemeProp;
-const StyledList = styled.ul `
-  padding-left: calc(4 * ${props => props.theme.base.spacing});
-`;
-StyledList.defaultProps = defaultThemeProp;
+import { StyledCodeBlock, StyledGrid, StyledList } from './ConditionBuilder.styles';
+import { convertRhsTypes } from './ConditionBuilder.mocks';
 export default {
     title: 'Condition Builder/ConditionBuilder',
     component: ConditionBuilder
 };
-export const DefaultBuilder = () => {
+export const DefaultBuilder = (args) => {
     const translate = useI18n();
     const [condition, setCondition] = useState(() => {
         // If a previous condition exists on the session, use it
@@ -36,10 +24,6 @@ export const DefaultBuilder = () => {
         }
         return demoCondition;
     });
-    const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;
-    const disallowNOT = boolean('Disallow NOT operator', false);
-    const renderInPopover = boolean('Render inside Popover', false);
-    const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;
     // Set up content for rendering inside a Popover
     const buttonRef = useRef(null); // Ref for the opener button
     const [isOpen, setIsOpen] = useState(false);
@@ -54,7 +38,7 @@ export const DefaultBuilder = () => {
         if (e.key === 'Escape')
             hidePopover(); // Call the method when Escape key is pressed
     };
-    const builderJsx = (_jsx(ConditionBuilder, { fields: demoFields, condition: condition, validComparators: validComparators, validRhsTypes: new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE']), dateFunctions: dateFunctions, disallowNOT: disallowNOT, onConditionSubmit: (c) => {
+    const builderJsx = (_jsx(ConditionBuilder, { fields: demoFields, condition: condition, validComparators: args.validComparators ? demoComparators : undefined, validRhsTypes: new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE']), dateFunctions: args.dateFunctions ? demoDateFunctions : undefined, disallowNOT: args.disallowNOT, onConditionSubmit: (c) => {
             setCondition(c);
             hidePopover();
             sessionStorage.setItem('CBDemoCondition', JSON.stringify(c)); // Persist on sessionStorage for the next time
@@ -62,14 +46,23 @@ export const DefaultBuilder = () => {
     return (_jsxs(StyledGrid, { container: {
             cols: '1fr',
             rowGap: 3
-        }, children: [!renderInPopover && builderJsx, renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }, void 0) }, void 0)] }, void 0)), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }, void 0)] }, void 0), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? formatCondition(condition, demoFields, translate) : '(No condition)' }, void 0)] }, void 0)] }, void 0));
+        }, children: [!args.renderInPopover && builderJsx, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }, void 0) }, void 0)] }, void 0)), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }, void 0)] }, void 0), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? formatCondition(condition, demoFields, translate) : '(No condition)' }, void 0)] }, void 0)] }, void 0));
 };
-export const FieldConditionDemo = () => {
+DefaultBuilder.args = {
+    validComparators: false,
+    disallowNOT: false,
+    renderInPopover: false,
+    dateFunctions: true
+};
+DefaultBuilder.argTypes = {
+    validComparators: { control: { type: 'boolean' } },
+    disallowNOT: { control: { type: 'boolean' } },
+    renderInPopover: { control: { type: 'boolean' } },
+    dateFunctions: { control: { type: 'boolean' } }
+};
+export const FieldConditionDemo = (args) => {
     const translate = useI18n();
     const [condition, setCondition] = useState(undefined);
-    const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;
-    const renderInPopover = boolean('Render inside Popover', false);
-    const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;
     // Set up content for rendering inside a Popover
     const buttonRef = useRef(null); // Ref for the opener button
     const [isOpen, setIsOpen] = useState(false);
@@ -84,7 +77,7 @@ export const FieldConditionDemo = () => {
         if (e.key === 'Escape')
             hidePopover(); // Call the method when Escape key is pressed
     };
-    const builderJsx = (_jsx(FieldCondition, { targetField: 'lastActivityAt', fields: demoFields, condition: condition, validComparators: validComparators, validRhsTypes: new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE']), dateFunctions: dateFunctions, onSubmit: c => {
+    const builderJsx = (_jsx(FieldCondition, { targetField: 'lastActivityAt', fields: demoFields, condition: condition, validComparators: args.validComparators ? demoComparators : undefined, validRhsTypes: new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE']), dateFunctions: args.dateFunctions ? demoDateFunctions : undefined, onSubmit: c => {
             hidePopover();
             setCondition(c);
         } }, void 0));
@@ -93,32 +86,21 @@ export const FieldConditionDemo = () => {
             justifyItems: 'stretch',
             alignItems: 'start',
             colGap: 4
-        }, children: [!renderInPopover && builderJsx, renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }, void 0) }, void 0)] }, void 0)), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }, void 0), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)' }, void 0)] }, void 0)] }, void 0));
+        }, children: [!args.renderInPopover && builderJsx, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: "Open Condition builder" }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: builderJsx }, void 0) }, void 0)] }, void 0)), _jsxs("div", { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? JSON.stringify(condition, null, 2) : '(No condition)' }, void 0), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)' }, void 0)] }, void 0)] }, void 0));
+};
+FieldConditionDemo.args = {
+    validComparators: false,
+    renderInPopover: false,
+    dateFunctions: true
 };
-const convertRhsTypes = (useLiteralRHSType, useFieldRHSType, useRelativeDatesType, dateFunctions) => {
-    const setRhsTypes = new Set();
-    if (useLiteralRHSType)
-        setRhsTypes.add('LITERAL');
-    if (useFieldRHSType)
-        setRhsTypes.add('FIELD');
-    if (dateFunctions)
-        setRhsTypes.add('DATE_FUNCTION');
-    if (useRelativeDatesType)
-        setRhsTypes.add('RELATIVE_DATE');
-    return setRhsTypes;
+FieldConditionDemo.argTypes = {
+    validComparators: { control: { type: 'boolean' } },
+    renderInPopover: { control: { type: 'boolean' } },
+    dateFunctions: { control: { type: 'boolean' } }
 };
-export const AtomicConditionDemo = () => {
+export const AtomicConditionDemo = (args) => {
     const translate = useI18n();
-    // Storybook knobs for configuration
-    const renderInPopover = boolean('Render inside Popover', false);
-    const itemDirection = select('Item Direction', { Column: 'column', Row: 'row' }, 'column');
-    const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;
-    const useLiteralRHSType = boolean('Enable Literal RHS Type', true);
-    const useFieldRHSType = boolean('Enable Field RHS Type', true);
-    const useRelativeDatesRHSType = boolean('Enable Relative Dates RHS Type', true);
-    const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;
-    const validRHSTypes = convertRhsTypes(useLiteralRHSType, useFieldRHSType, useRelativeDatesRHSType, dateFunctions);
-    const showLhsAsLabel = boolean('Show LHS as Label', false);
+    const validRHSTypes = convertRhsTypes(!!args.useLiteralRHSType, !!args.useFieldRHSType, !!args.useRelativeDatesRHSType, args.dateFunctions ? demoDateFunctions : undefined);
     // Story State object to simulate "submitting"
     const [submitCondition, setSubmitCondition] = useState(undefined);
     // State needed to use Popover in Story
@@ -140,12 +122,12 @@ export const AtomicConditionDemo = () => {
     const [condition, setCondition] = useState(
     // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField
     () => submitCondition ||
-        getInitConditionForLhs({ field: 'age' }, demoFields, validRHSTypes, validComparators, dateFunctions));
+        getInitConditionForLhs({ field: 'age' }, demoFields, validRHSTypes, args.validComparators ? demoComparators : undefined, args.dateFunctions ? demoDateFunctions : undefined));
     const handleSubmission = () => {
         setShowErrorIndicators(false);
         if (isValidCondition(condition, demoFields, true)) {
             // Insert all "submit" logic to use the valid condition that you've created.
-            if (renderInPopover)
+            if (args.renderInPopover)
                 setIsOpen(false);
             setSubmitCondition(condition);
         }
@@ -153,14 +135,34 @@ export const AtomicConditionDemo = () => {
             setShowErrorIndicators(true);
         }
     };
-    const atomicConditionJSX = (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(AtomicCondition, { condition: condition, fields: demoFields, indicateErrors: showErrorIndicators, validComparators: validComparators, dateFunctions: dateFunctions, onChange: c => setCondition(c), itemDirection: itemDirection, showLhsAsLabel: showLhsAsLabel, validRhsTypes: validRHSTypes }, void 0), _jsx(Button, { variant: 'primary', onClick: handleSubmission, children: "Submit Condition" }, void 0)] }, void 0));
+    const atomicConditionJSX = (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(AtomicCondition, { condition: condition, fields: demoFields, indicateErrors: showErrorIndicators, validComparators: args.validComparators ? demoComparators : undefined, dateFunctions: args.dateFunctions ? demoDateFunctions : undefined, onChange: c => setCondition(c), itemDirection: args.itemDirection, showLhsAsLabel: args.showLhsAsLabel, validRhsTypes: validRHSTypes }, void 0), _jsx(Button, { variant: 'primary', onClick: handleSubmission, children: "Submit Condition" }, void 0)] }, void 0));
     return (_jsxs(StyledGrid, { container: {
             cols: 'repeat(2, minmax(0, 1fr))',
             justifyItems: 'stretch',
             alignItems: 'start',
             colGap: 4
-        }, children: [!renderInPopover && atomicConditionJSX, renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: `${isOpen ? 'Close' : 'Open'} Atomic Condition` }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: atomicConditionJSX }, void 0) }, void 0)] }, void 0)), _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)' }, void 0), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: submitCondition
+        }, children: [!args.renderInPopover && atomicConditionJSX, args.renderInPopover && (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, "aria-haspopup": true, "aria-expanded": isOpen, onClick: () => setIsOpen(!isOpen), onKeyDown: hideOnEscape, children: `${isOpen ? 'Close' : 'Open'} Atomic Condition` }, void 0), _jsx(Popover, { show: isOpen, ref: setPopoverEl, target: buttonRef.current, placement: 'bottom-start', children: _jsx(Flex, { container: { pad: 1 }, children: atomicConditionJSX }, void 0) }, void 0)] }, void 0)), _jsx(Card, { children: _jsxs(CardContent, { children: [_jsx(Text, { variant: 'h4', children: "Output:" }, void 0), _jsx(StyledCodeBlock, { children: submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)' }, void 0), _jsx(Text, { variant: 'h4', children: "Formatted Output:" }, void 0), _jsx(StyledCodeBlock, { children: submitCondition
                                 ? formatCondition({ condition: submitCondition }, demoFields, translate)
                                 : '(No condition)' }, void 0), _jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsxs(Flex, { container: { gap: 1, direction: 'column' }, children: [_jsx(Text, { variant: 'h2', status: 'error', children: "validRhsTypes Prop Warning" }, void 0), _jsxs(Text, { children: ["There are LHS(Left Hand Side Field)/Comparator pairings that ", _jsx("u", { children: "require" }, void 0), " specific RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when limiting RHS value types using this prop. We ", _jsx("b", { children: "do not" }, void 0), " support limiting RHS field types to incompatible types and it will result in a validation error if you do so. The pairings referred to here are as follows:"] }, void 0)] }, void 0), _jsxs(StyledList, { children: [_jsxs("li", { children: ["BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will ", _jsx("u", { children: "always yield" }, void 0), ' ', "a Field RHS"] }, void 0), _jsxs("li", { children: ["Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will ", _jsx("u", { children: "always yield" }, void 0), " a Literal RHS (Comma separated list)"] }, void 0)] }, void 0), _jsx(Flex, { container: { direction: 'column' }, children: _jsxs(Text, { children: ["If you would like to limit RHS value types and avoid these incompatibilities, you will need to exclude these comparators using the ", _jsx("b", { children: "validComparators" }, void 0), " prop."] }, void 0) }, void 0)] }, void 0)] }, void 0) }, void 0)] }, void 0));
 };
+AtomicConditionDemo.args = {
+    validComparators: false,
+    renderInPopover: false,
+    dateFunctions: true,
+    itemDirection: 'column',
+    useLiteralRHSType: true,
+    useFieldRHSType: true,
+    useRelativeDatesRHSType: true,
+    showLhsAsLabel: false
+};
+AtomicConditionDemo.argTypes = {
+    validComparators: { control: { type: 'boolean' } },
+    renderInPopover: { control: { type: 'boolean' } },
+    dateFunctions: { control: { type: 'boolean' } },
+    itemDirection: { options: ['column', 'row'], control: { type: 'select' } },
+    useLiteralRHSType: { control: { type: 'boolean' } },
+    useFieldRHSType: { control: { type: 'boolean' } },
+    useRelativeDatesRHSType: { control: { type: 'boolean' } },
+    showLhsAsLabel: { control: { type: 'boolean' } }
+};
 //# sourceMappingURL=ConditionBuilder.stories.js.map

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.stories.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport { useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { boolean, select } from '@storybook/addon-knobs';\n\nimport {\n  Card,\n  CardContent,\n  Text,\n  Grid,\n  Button,\n  defaultThemeProp,\n  Popover,\n  useElement,\n  useOuterEvent,\n  Flex,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport {\n  ConditionBuilder,\n  FieldCondition,\n  AtomicCondition,\n  getInitConditionForLhs,\n  isValidCondition,\n  Condition,\n  DateFunctionsByType,\n  LeafCondition,\n  formatCondition,\n  RHSType\n} from '@pega/cosmos-react-condition-builder';\n\nimport { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';\n\nconst StyledGrid = styled(Grid)`\n  max-width: 60rem;\n`;\n\nconst StyledCodeBlock = styled.pre`\n  padding: ${props => props.theme.base.spacing};\n  margin-bottom: ${props => props.theme.base.spacing};\n`;\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nconst StyledList = styled.ul`\n  padding-left: calc(4 * ${props => props.theme.base.spacing});\n`;\nStyledList.defaultProps = defaultThemeProp;\n\nexport default {\n  title: 'Condition Builder/ConditionBuilder',\n  component: ConditionBuilder\n};\n\nexport const DefaultBuilder = () => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<Condition | undefined>(() => {\n    // If a previous condition exists on the session, use it\n    const prevCondition = sessionStorage.getItem('CBDemoCondition');\n    if (prevCondition !== null) {\n      // If an empty condition was submitted previously, start with an empty one\n      if (prevCondition === 'undefined') {\n        return undefined;\n      }\n      return JSON.parse(prevCondition);\n    }\n    return demoCondition;\n  });\n\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const disallowNOT = boolean('Disallow NOT operator', false);\n  const renderInPopover = boolean('Render inside Popover', false);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <ConditionBuilder\n      fields={demoFields}\n      condition={condition}\n      validComparators={validComparators}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={dateFunctions}\n      disallowNOT={disallowNOT}\n      onConditionSubmit={(c: Condition | undefined) => {\n        setCondition(c);\n        hidePopover();\n        sessionStorage.setItem('CBDemoCondition', JSON.stringify(c)); // Persist on sessionStorage for the next time\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: '1fr',\n        rowGap: 3\n      }}\n    >\n      {!renderInPopover && builderJsx}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n\n      <div>\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition(condition, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nexport const FieldConditionDemo = () => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<LeafCondition | undefined>(undefined);\n\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const renderInPopover = boolean('Render inside Popover', false);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <FieldCondition\n      targetField='lastActivityAt'\n      fields={demoFields}\n      condition={condition}\n      validComparators={validComparators}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={dateFunctions}\n      onSubmit={c => {\n        hidePopover();\n        setCondition(c);\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!renderInPopover && builderJsx}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nconst convertRhsTypes = (\n  useLiteralRHSType: boolean,\n  useFieldRHSType: boolean,\n  useRelativeDatesType: boolean,\n  dateFunctions?: DateFunctionsByType\n) => {\n  const setRhsTypes: Set<RHSType> = new Set<RHSType>();\n  if (useLiteralRHSType) setRhsTypes.add('LITERAL');\n  if (useFieldRHSType) setRhsTypes.add('FIELD');\n  if (dateFunctions) setRhsTypes.add('DATE_FUNCTION');\n  if (useRelativeDatesType) setRhsTypes.add('RELATIVE_DATE');\n  return setRhsTypes;\n};\n\nexport const AtomicConditionDemo = () => {\n  const translate = useI18n();\n  // Storybook knobs for configuration\n  const renderInPopover = boolean('Render inside Popover', false);\n  const itemDirection = select('Item Direction', { Column: 'column', Row: 'row' }, 'column');\n  const validComparators = boolean('Limit Comparators', false) ? demoComparators : undefined;\n  const useLiteralRHSType = boolean('Enable Literal RHS Type', true);\n  const useFieldRHSType = boolean('Enable Field RHS Type', true);\n  const useRelativeDatesRHSType = boolean('Enable Relative Dates RHS Type', true);\n  const dateFunctions = boolean('Enable Date functions', true) ? demoDateFunctions : undefined;\n  const validRHSTypes: Set<RHSType> = convertRhsTypes(\n    useLiteralRHSType,\n    useFieldRHSType,\n    useRelativeDatesRHSType,\n    dateFunctions\n  );\n  const showLhsAsLabel = boolean('Show LHS as Label', false);\n\n  // Story State object to simulate \"submitting\"\n  const [submitCondition, setSubmitCondition] = useState<LeafCondition | undefined>(undefined);\n  // State needed to use Popover in Story\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  // State handling needed to manage/use the AtomicCondition component\n  const [showErrorIndicators, setShowErrorIndicators] = useState(false);\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      submitCondition ||\n      getInitConditionForLhs(\n        { field: 'age' },\n        demoFields,\n        validRHSTypes,\n        validComparators,\n        dateFunctions\n      )\n  );\n\n  const handleSubmission = () => {\n    setShowErrorIndicators(false);\n    if (isValidCondition(condition, demoFields, true)) {\n      // Insert all \"submit\" logic to use the valid condition that you've created.\n      if (renderInPopover) setIsOpen(false);\n      setSubmitCondition(condition);\n    } else {\n      setShowErrorIndicators(true);\n    }\n  };\n\n  const atomicConditionJSX = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <AtomicCondition\n        condition={condition}\n        fields={demoFields}\n        indicateErrors={showErrorIndicators}\n        validComparators={validComparators}\n        dateFunctions={dateFunctions}\n        onChange={c => setCondition(c)}\n        itemDirection={itemDirection}\n        showLhsAsLabel={showLhsAsLabel}\n        validRhsTypes={validRHSTypes}\n      />\n      <Button variant='primary' onClick={handleSubmission}>\n        Submit Condition\n      </Button>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!renderInPopover && atomicConditionJSX}\n\n      {renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            {`${isOpen ? 'Close' : 'Open'} Atomic Condition`}\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{atomicConditionJSX}</Flex>\n          </Popover>\n        </>\n      )}\n      <Card>\n        <CardContent>\n          <Text variant='h4'>Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}\n          </StyledCodeBlock>\n\n          <Text variant='h4'>Formatted Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition\n              ? formatCondition({ condition: submitCondition }, demoFields, translate)\n              : '(No condition)'}\n          </StyledCodeBlock>\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h2' status='error'>\n                validRhsTypes Prop Warning\n              </Text>\n              <Text>\n                There are LHS(Left Hand Side Field)/Comparator pairings that <u>require</u> specific\n                RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when\n                limiting RHS value types using this prop. We <b>do not</b> support limiting RHS\n                field types to incompatible types and it will result in a validation error if you do\n                so. The pairings referred to here are as follows:\n              </Text>\n            </Flex>\n            <StyledList>\n              <li>\n                BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will <u>always yield</u>{' '}\n                a Field RHS\n              </li>\n              <li>\n                Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will <u>always yield</u> a\n                Literal RHS (Comma separated list)\n              </li>\n            </StyledList>\n            <Flex container={{ direction: 'column' }}>\n              <Text>\n                If you would like to limit RHS value types and avoid these incompatibilities, you\n                will need to exclude these comparators using the <b>validComparators</b> prop.\n              </Text>\n            </Flex>\n          </Flex>\n        </CardContent>\n      </Card>\n    </StyledGrid>\n  );\n};\n"]}
+{"version":3,"file":"ConditionBuilder.stories.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable react/no-unescaped-entities */\nimport { useRef, useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n  Card,\n  CardContent,\n  Text,\n  Button,\n  Popover,\n  useElement,\n  useOuterEvent,\n  Flex,\n  useI18n\n} from '@pega/cosmos-react-core';\nimport {\n  ConditionBuilder,\n  FieldCondition,\n  AtomicCondition,\n  getInitConditionForLhs,\n  isValidCondition,\n  Condition,\n  LeafCondition,\n  formatCondition,\n  RHSType\n} from '@pega/cosmos-react-condition-builder';\n\nimport { demoFields, demoCondition, demoComparators, demoDateFunctions } from './props.mock';\nimport { StyledCodeBlock, StyledGrid, StyledList } from './ConditionBuilder.styles';\nimport { convertRhsTypes } from './ConditionBuilder.mocks';\n\nexport default {\n  title: 'Condition Builder/ConditionBuilder',\n  component: ConditionBuilder\n} as Meta;\n\ninterface ConditionBuilderStoryProps {\n  validComparators?: boolean;\n  disallowNOT?: boolean;\n  renderInPopover?: boolean;\n  dateFunctions?: boolean;\n  itemDirection?: 'column' | 'row';\n  useLiteralRHSType?: boolean;\n  useFieldRHSType?: boolean;\n  useRelativeDatesRHSType?: boolean;\n  showLhsAsLabel?: boolean;\n}\n\nexport const DefaultBuilder: Story<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<Condition | undefined>(() => {\n    // If a previous condition exists on the session, use it\n    const prevCondition = sessionStorage.getItem('CBDemoCondition');\n    if (prevCondition !== null) {\n      // If an empty condition was submitted previously, start with an empty one\n      if (prevCondition === 'undefined') {\n        return undefined;\n      }\n      return JSON.parse(prevCondition);\n    }\n    return demoCondition;\n  });\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <ConditionBuilder\n      fields={demoFields}\n      condition={condition}\n      validComparators={args.validComparators ? demoComparators : undefined}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n      disallowNOT={args.disallowNOT}\n      onConditionSubmit={(c: Condition | undefined) => {\n        setCondition(c);\n        hidePopover();\n        sessionStorage.setItem('CBDemoCondition', JSON.stringify(c)); // Persist on sessionStorage for the next time\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: '1fr',\n        rowGap: 3\n      }}\n    >\n      {!args.renderInPopover && builderJsx}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n\n      <div>\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition(condition, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nDefaultBuilder.args = {\n  validComparators: false,\n  disallowNOT: false,\n  renderInPopover: false,\n  dateFunctions: true\n};\n\nDefaultBuilder.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  disallowNOT: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } }\n};\n\nexport const FieldConditionDemo: Story<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n  const [condition, setCondition] = useState<LeafCondition | undefined>(undefined);\n\n  // Set up content for rendering inside a Popover\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  const builderJsx = (\n    <FieldCondition\n      targetField='lastActivityAt'\n      fields={demoFields}\n      condition={condition}\n      validComparators={args.validComparators ? demoComparators : undefined}\n      validRhsTypes={new Set(['LITERAL', 'FIELD', 'DATE_FUNCTION', 'RELATIVE_DATE'])}\n      dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n      onSubmit={c => {\n        hidePopover();\n        setCondition(c);\n      }}\n    />\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!args.renderInPopover && builderJsx}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            Open Condition builder\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{builderJsx}</Flex>\n          </Popover>\n        </>\n      )}\n\n      <div>\n        <Text variant='h4'>Output:</Text>\n        <StyledCodeBlock>\n          {condition ? JSON.stringify(condition, null, 2) : '(No condition)'}\n        </StyledCodeBlock>\n\n        <Text variant='h4'>Formatted Output:</Text>\n        <StyledCodeBlock>\n          {condition ? formatCondition({ condition }, demoFields, translate) : '(No condition)'}\n        </StyledCodeBlock>\n      </div>\n    </StyledGrid>\n  );\n};\n\nFieldConditionDemo.args = {\n  validComparators: false,\n  renderInPopover: false,\n  dateFunctions: true\n};\n\nFieldConditionDemo.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } }\n};\n\nexport const AtomicConditionDemo: Story<ConditionBuilderStoryProps> = (\n  args: ConditionBuilderStoryProps\n) => {\n  const translate = useI18n();\n\n  const validRHSTypes: Set<RHSType> = convertRhsTypes(\n    !!args.useLiteralRHSType,\n    !!args.useFieldRHSType,\n    !!args.useRelativeDatesRHSType,\n    args.dateFunctions ? demoDateFunctions : undefined\n  );\n\n  // Story State object to simulate \"submitting\"\n  const [submitCondition, setSubmitCondition] = useState<LeafCondition | undefined>(undefined);\n  // State needed to use Popover in Story\n  const buttonRef = useRef(null); // Ref for the opener button\n  const [isOpen, setIsOpen] = useState(false);\n  const [popoverEl, setPopoverEl] = useElement<HTMLElement>(null);\n  const hidePopover = () => {\n    if (isOpen) {\n      setIsOpen(false);\n    }\n  };\n  useOuterEvent('mousedown', [popoverEl, buttonRef.current], hidePopover); // Call the method on clicking outside these elements\n  const hideOnEscape = (e: KeyboardEvent) => {\n    if (e.key === 'Escape') hidePopover(); // Call the method when Escape key is pressed\n  };\n\n  // State handling needed to manage/use the AtomicCondition component\n  const [showErrorIndicators, setShowErrorIndicators] = useState(false);\n  const [condition, setCondition] = useState(\n    // If editing use the seedCondition, otherwise, determine an initial condition based on the targetField\n    () =>\n      submitCondition ||\n      getInitConditionForLhs(\n        { field: 'age' },\n        demoFields,\n        validRHSTypes,\n        args.validComparators ? demoComparators : undefined,\n        args.dateFunctions ? demoDateFunctions : undefined\n      )\n  );\n\n  const handleSubmission = () => {\n    setShowErrorIndicators(false);\n    if (isValidCondition(condition, demoFields, true)) {\n      // Insert all \"submit\" logic to use the valid condition that you've created.\n      if (args.renderInPopover) setIsOpen(false);\n      setSubmitCondition(condition);\n    } else {\n      setShowErrorIndicators(true);\n    }\n  };\n\n  const atomicConditionJSX = (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <AtomicCondition\n        condition={condition}\n        fields={demoFields}\n        indicateErrors={showErrorIndicators}\n        validComparators={args.validComparators ? demoComparators : undefined}\n        dateFunctions={args.dateFunctions ? demoDateFunctions : undefined}\n        onChange={c => setCondition(c)}\n        itemDirection={args.itemDirection}\n        showLhsAsLabel={args.showLhsAsLabel}\n        validRhsTypes={validRHSTypes}\n      />\n      <Button variant='primary' onClick={handleSubmission}>\n        Submit Condition\n      </Button>\n    </Flex>\n  );\n\n  return (\n    <StyledGrid\n      container={{\n        cols: 'repeat(2, minmax(0, 1fr))',\n        justifyItems: 'stretch',\n        alignItems: 'start',\n        colGap: 4\n      }}\n    >\n      {!args.renderInPopover && atomicConditionJSX}\n\n      {args.renderInPopover && (\n        <>\n          <Button\n            ref={buttonRef}\n            aria-haspopup\n            aria-expanded={isOpen}\n            onClick={() => setIsOpen(!isOpen)}\n            onKeyDown={hideOnEscape}\n          >\n            {`${isOpen ? 'Close' : 'Open'} Atomic Condition`}\n          </Button>\n\n          <Popover\n            show={isOpen}\n            ref={setPopoverEl}\n            target={buttonRef.current}\n            placement='bottom-start'\n          >\n            <Flex container={{ pad: 1 }}>{atomicConditionJSX}</Flex>\n          </Popover>\n        </>\n      )}\n      <Card>\n        <CardContent>\n          <Text variant='h4'>Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition ? JSON.stringify(submitCondition, null, 2) : '(No condition)'}\n          </StyledCodeBlock>\n\n          <Text variant='h4'>Formatted Output:</Text>\n          <StyledCodeBlock>\n            {submitCondition\n              ? formatCondition({ condition: submitCondition }, demoFields, translate)\n              : '(No condition)'}\n          </StyledCodeBlock>\n          <Flex container={{ gap: 1, direction: 'column' }}>\n            <Flex container={{ gap: 1, direction: 'column' }}>\n              <Text variant='h2' status='error'>\n                validRhsTypes Prop Warning\n              </Text>\n              <Text>\n                There are LHS(Left Hand Side Field)/Comparator pairings that <u>require</u> specific\n                RHS(Right Hand Side Value) types. Please be mindful of these incompatibilities when\n                limiting RHS value types using this prop. We <b>do not</b> support limiting RHS\n                field types to incompatible types and it will result in a validation error if you do\n                so. The pairings referred to here are as follows:\n              </Text>\n            </Flex>\n            <StyledList>\n              <li>\n                BOOLEAN LHS Fields coupled with \"EQ\" or \"NEQ\" comparators, will <u>always yield</u>{' '}\n                a Field RHS\n              </li>\n              <li>\n                Any LHS Fields coupled with \"IN\" or \"NOT_IN\" comparators, will <u>always yield</u> a\n                Literal RHS (Comma separated list)\n              </li>\n            </StyledList>\n            <Flex container={{ direction: 'column' }}>\n              <Text>\n                If you would like to limit RHS value types and avoid these incompatibilities, you\n                will need to exclude these comparators using the <b>validComparators</b> prop.\n              </Text>\n            </Flex>\n          </Flex>\n        </CardContent>\n      </Card>\n    </StyledGrid>\n  );\n};\n\nAtomicConditionDemo.args = {\n  validComparators: false,\n  renderInPopover: false,\n  dateFunctions: true,\n  itemDirection: 'column',\n  useLiteralRHSType: true,\n  useFieldRHSType: true,\n  useRelativeDatesRHSType: true,\n  showLhsAsLabel: false\n};\n\nAtomicConditionDemo.argTypes = {\n  validComparators: { control: { type: 'boolean' } },\n  renderInPopover: { control: { type: 'boolean' } },\n  dateFunctions: { control: { type: 'boolean' } },\n  itemDirection: { options: ['column', 'row'], control: { type: 'select' } },\n  useLiteralRHSType: { control: { type: 'boolean' } },\n  useFieldRHSType: { control: { type: 'boolean' } },\n  useRelativeDatesRHSType: { control: { type: 'boolean' } },\n  showLhsAsLabel: { control: { type: 'boolean' } }\n};\n"]}

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledGrid: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").GridProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCodeBlock: import("styled-components").StyledComponent<"pre", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=ConditionBuilder.styles.d.ts.map

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.styles.d.ts","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,UAAU,mOAEtB,CAAC;AAEF,eAAO,MAAM,eAAe,yGAG3B,CAAC;AAGF,eAAO,MAAM,UAAU,wGAEtB,CAAC"}

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Grid, defaultThemeProp } from '@pega/cosmos-react-core';
+export const StyledGrid = styled(Grid) `
+  max-width: 60rem;
+`;
+export const StyledCodeBlock = styled.pre `
+  padding: ${props => props.theme.base.spacing};
+  margin-bottom: ${props => props.theme.base.spacing};
+`;
+StyledCodeBlock.defaultProps = defaultThemeProp;
+export const StyledList = styled.ul `
+  padding-left: calc(4 * ${props => props.theme.base.spacing});
+`;
+StyledList.defaultProps = defaultThemeProp;
+//# sourceMappingURL=ConditionBuilder.styles.js.map

package/lib/condition-builder/ConditionBuilder/ConditionBuilder.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConditionBuilder.styles.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/ConditionBuilder.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAErC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;aAC5B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;mBAC3B,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CACnD,CAAC;AACF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;2BACR,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO;CAC3D,CAAC;AACF,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled from 'styled-components';\n\nimport { Grid, defaultThemeProp } from '@pega/cosmos-react-core';\n\nexport const StyledGrid = styled(Grid)`\n  max-width: 60rem;\n`;\n\nexport const StyledCodeBlock = styled.pre`\n  padding: ${props => props.theme.base.spacing};\n  margin-bottom: ${props => props.theme.base.spacing};\n`;\nStyledCodeBlock.defaultProps = defaultThemeProp;\n\nexport const StyledList = styled.ul`\n  padding-left: calc(4 * ${props => props.theme.base.spacing});\n`;\nStyledList.defaultProps = defaultThemeProp;\n"]}

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

@@ -27,8 +27,8 @@ ButtonVariants.argTypes = {
 export const DisabledButtons = () => {
     return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'primary', disabled: true, children: "Primary disabled" }, void 0), _jsx(Button, { variant: 'secondary', disabled: true, children: "Secondary disabled" }, void 0), _jsx(Button, { variant: 'simple', disabled: true, children: "Simple disabled" }, void 0), _jsx(Button, { variant: 'link', disabled: true, children: "Link disabled" }, void 0), _jsx(Button, { variant: 'text', disabled: true, children: "Text disabled" }, void 0)] }, void 0));
 };
-export const IconButtons = ({ compact }) => {
-    return (_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Button, { variant: 'primary', label: 'Icon button primary', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'secondary', label: 'Icon button secondary', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'simple', label: 'Icon button simple', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'link', label: 'Icon button link', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'text', label: 'Icon button text', icon: true, compact: compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0));
+export const IconButtons = (args) => {
+    return (_jsxs(Flex, { container: { alignItems: 'center' }, children: [_jsx(Button, { variant: 'primary', label: 'Icon button primary', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'secondary', label: 'Icon button secondary', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'simple', label: 'Icon button simple', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'link', label: 'Icon button link', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0), _jsx(Button, { variant: 'text', label: 'Icon button text', icon: true, compact: args.compact, children: _jsx(Icon, { name: 'plus' }, void 0) }, void 0)] }, void 0));
 };
 IconButtons.args = {
     compact: false

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAK/C,OAAO,EAEL,gBAAgB,EAMjB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAoBnD,CAAC;AA0BF,eAAO,MAAM,UAAU,mBAmFtB,CAAC"}
+{"version":3,"file":"ColorPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAe,gBAAgB,EAA8B,MAAM,yBAAyB,CAAC;;AAIpG,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAoBnD,CAAC;AA0BF,eAAO,MAAM,UAAU,mBA2EtB,CAAC"}

package/lib/core/ColorPicker/ColorPicker.stories.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { readableColor } from 'polished';
-import { ColorPicker, Flex, Grid, Text, tryCatch, useTheme } from '@pega/cosmos-react-core';
+import { ColorPicker, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';
+import { StyledColorPane } from './ColorPicker.styles';
 export default {
     title: 'Core/ColorPicker',
     component: ColorPicker
@@ -36,13 +35,6 @@ ColorPickerDemo.argTypes = {
     readOnly: { control: { type: 'boolean' } }
 };
 export const MultiColor = () => {
-    const StyledColorPane = styled.div(({ color }) => {
-        const c = tryCatch(() => readableColor(color));
-        return css `
-      color: ${c};
-      background: ${color};
-    `;
-    });
     const { base: { palette } } = useTheme();
     const opaqueColors = useMemo(() => Object.entries(palette).filter(([, color]) => {
         return /^#[0-9A-F]{6}$/i.test(color);

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n  ColorPicker,\n  ColorPickerProps,\n  Flex,\n  Grid,\n  Text,\n  tryCatch,\n  useTheme\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/ColorPicker',\n  component: ColorPicker\n} as Meta;\n\nexport const ColorPickerDemo: Story<ColorPickerProps> = (args: ColorPickerProps) => {\n  const [value, setValue] = useState('#10a5ac');\n\n  return (\n    <ColorPicker\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      swatchOnly={args.swatchOnly}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={e => {\n        setValue(e.hex);\n      }}\n    />\n  );\n};\n\nColorPickerDemo.args = {\n  label: 'ColorPicker label',\n  labelHidden: false,\n  info: 'Pick a color',\n  status: undefined,\n  swatchOnly: false,\n  inline: false,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nColorPickerDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  swatchOnly: { control: { type: 'boolean' } },\n  inline: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor = () => {\n  const StyledColorPane = styled.div<{ color: string }>(({ color }) => {\n    const c = tryCatch(() => readableColor(color));\n    return css`\n      color: ${c};\n      background: ${color};\n    `;\n  });\n\n  const {\n    base: { palette }\n  } = useTheme();\n\n  const opaqueColors = useMemo(\n    () =>\n      Object.entries(palette).filter(([, color]) => {\n        return /^#[0-9A-F]{6}$/i.test(color);\n      }),\n    [palette]\n  );\n\n  const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n  return (\n    <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          alignItems: 'center',\n          colGap: 4,\n          rowGap: 1\n        }}\n        style={{ padding: '1rem' }}\n      >\n        <>\n          {values.map((color, i) => {\n            const key = `color-${i}`;\n            return (\n              <div key={key}>\n                <ColorPicker\n                  inline\n                  label={opaqueColors[i][0]}\n                  value={color}\n                  onChange={e => {\n                    const newColor = e.hex;\n                    setValues(cur => {\n                      return cur.map((c, j) => {\n                        if (i === j) return newColor;\n                        return c;\n                      });\n                    });\n                  }}\n                />\n              </div>\n            );\n          })}\n        </>\n      </Grid>\n\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          gap: 0.125\n        }}\n      >\n        {values.map((color, i) => {\n          const key = `color-${i}`;\n          return (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledColorPane}\n              color={color}\n              key={key}\n            >\n              <Text variant='h1' as='span'>\n                {color}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Grid>\n    </Grid>\n  );\n};\n"]}
+{"version":3,"file":"ColorPicker.stories.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,WAAW,EAAoB,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEpG,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,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,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,KAAC,WAAW,IACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE;YACZ,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC,WACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,mBAAmB;IAC1B,WAAW,EAAE,KAAK;IAClB,IAAI,EAAE,cAAc;IACpB,MAAM,EAAE,SAAS;IACjB,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,KAAK;IACb,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,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,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACxC,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;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE;IAC7B,MAAM,EACJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CACH,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE;QAC3C,OAAO,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,EACJ,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEnF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,aAC9D,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,iBAAiB;oBACvB,UAAU,EAAE,QAAQ;oBACpB,MAAM,EAAE,CAAC;oBACT,MAAM,EAAE,CAAC;iBACV,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAE1B,4BACG,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;wBACvB,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,CAAC;wBACzB,OAAO,CACL,wBACE,KAAC,WAAW,IACV,MAAM,QACN,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE;oCACZ,MAAM,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC;oCACvB,SAAS,CAAC,GAAG,CAAC,EAAE;wCACd,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;4CACtB,IAAI,CAAC,KAAK,CAAC;gDAAE,OAAO,QAAQ,CAAC;4CAC7B,OAAO,CAAC,CAAC;wCACX,CAAC,CAAC,CAAC;oCACL,CAAC,CAAC,CAAC;gCACL,CAAC,WACD,IAdM,GAAG,CAeP,CACP,CAAC;oBACJ,CAAC,CAAC,WACD,WACE,EAEP,KAAC,IAAI,IACH,SAAS,EAAE;oBACT,IAAI,EAAE,iBAAiB;oBACvB,GAAG,EAAE,KAAK;iBACX,YAEA,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;oBACvB,MAAM,GAAG,GAAG,SAAS,CAAC,EAAE,CAAC;oBACzB,OAAO,CACL,KAAC,IAAI,IACH,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EACtD,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,KAAK,YAGZ,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,YACzB,KAAK,WACD,IAJF,GAAG,CAKH,CACR,CAAC;gBACJ,CAAC,CAAC,WACG,YACF,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\n\nimport { ColorPicker, ColorPickerProps, Flex, Grid, Text, useTheme } from '@pega/cosmos-react-core';\n\nimport { StyledColorPane } from './ColorPicker.styles';\n\nexport default {\n  title: 'Core/ColorPicker',\n  component: ColorPicker\n} as Meta;\n\nexport const ColorPickerDemo: Story<ColorPickerProps> = (args: ColorPickerProps) => {\n  const [value, setValue] = useState('#10a5ac');\n\n  return (\n    <ColorPicker\n      label={args.label}\n      labelHidden={args.labelHidden}\n      info={args.info}\n      status={args.status}\n      swatchOnly={args.swatchOnly}\n      inline={args.inline}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n      value={value}\n      onChange={e => {\n        setValue(e.hex);\n      }}\n    />\n  );\n};\n\nColorPickerDemo.args = {\n  label: 'ColorPicker label',\n  labelHidden: false,\n  info: 'Pick a color',\n  status: undefined,\n  swatchOnly: false,\n  inline: false,\n  required: false,\n  disabled: false,\n  readOnly: false\n};\n\nColorPickerDemo.argTypes = {\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  info: { control: { type: 'text' } },\n  status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n  swatchOnly: { control: { type: 'boolean' } },\n  inline: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } },\n  readOnly: { control: { type: 'boolean' } }\n};\n\nexport const MultiColor = () => {\n  const {\n    base: { palette }\n  } = useTheme();\n\n  const opaqueColors = useMemo(\n    () =>\n      Object.entries(palette).filter(([, color]) => {\n        return /^#[0-9A-F]{6}$/i.test(color);\n      }),\n    [palette]\n  );\n\n  const [values, setValues] = useState(() => opaqueColors.map(([, color]) => color));\n\n  return (\n    <Grid container={{ rows: '1fr 2fr' }} style={{ height: '100vh' }}>\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          alignItems: 'center',\n          colGap: 4,\n          rowGap: 1\n        }}\n        style={{ padding: '1rem' }}\n      >\n        <>\n          {values.map((color, i) => {\n            const key = `color-${i}`;\n            return (\n              <div key={key}>\n                <ColorPicker\n                  inline\n                  label={opaqueColors[i][0]}\n                  value={color}\n                  onChange={e => {\n                    const newColor = e.hex;\n                    setValues(cur => {\n                      return cur.map((c, j) => {\n                        if (i === j) return newColor;\n                        return c;\n                      });\n                    });\n                  }}\n                />\n              </div>\n            );\n          })}\n        </>\n      </Grid>\n\n      <Grid\n        container={{\n          cols: '1fr 1fr 1fr 1fr',\n          gap: 0.125\n        }}\n      >\n        {values.map((color, i) => {\n          const key = `color-${i}`;\n          return (\n            <Flex\n              container={{ justify: 'center', alignItems: 'center' }}\n              as={StyledColorPane}\n              color={color}\n              key={key}\n            >\n              <Text variant='h1' as='span'>\n                {color}\n              </Text>\n            </Flex>\n          );\n        })}\n      </Grid>\n    </Grid>\n  );\n};\n"]}

package/lib/core/ColorPicker/ColorPicker.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledColorPane: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    color: string;
+}, never>;
+//# sourceMappingURL=ColorPicker.styles.d.ts.map

package/lib/core/ColorPicker/ColorPicker.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.d.ts","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe;WAAuB,MAAM;SAMvD,CAAC"}

package/lib/core/ColorPicker/ColorPicker.styles.js

@@ -0,0 +1,11 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import { tryCatch } from '@pega/cosmos-react-core';
+export const StyledColorPane = styled.div(({ color }) => {
+    const c = tryCatch(() => readableColor(color));
+    return css `
+    color: ${c};
+    background: ${color};
+  `;
+});
+//# sourceMappingURL=ColorPicker.styles.js.map

package/lib/core/ColorPicker/ColorPicker.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.styles.js","sourceRoot":"","sources":["../../../src/core/ColorPicker/ColorPicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAoB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzE,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;IAC/C,OAAO,GAAG,CAAA;aACC,CAAC;kBACI,KAAK;GACpB,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport { tryCatch } from '@pega/cosmos-react-core';\n\nexport const StyledColorPane = styled.div<{ color: string }>(({ color }) => {\n  const c = tryCatch(() => readableColor(color));\n  return css`\n    color: ${c};\n    background: ${color};\n  `;\n});\n"]}

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

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

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

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

package/lib/core/Configuration/Configuration.mocks.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { BoldSpan } from './Configuration.styles';
+export const FlipFlop = ({ flipFlop, first, second }) => {
+    return flipFlop ? (_jsxs(_Fragment, { children: [_jsx(BoldSpan, { children: first }, void 0), "\u00A0\u2192 ", second] }, void 0)) : (_jsxs(_Fragment, { children: [first, " \u2190\u00A0", _jsx(BoldSpan, { children: second }, void 0)] }, void 0));
+};
+//# sourceMappingURL=Configuration.mocks.js.map

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

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

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

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

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

@@ -1,8 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
-import styled from 'styled-components';
 import { Button, Configuration, MenuButton, resetToInitial, Flex, Checkbox, RadioButton, DateInput, SearchInput, Text } from '@pega/cosmos-react-core';
 import { FormContent } from '../Form/Form.mocks';
+import { buttonStyles, StyledFieldset } from './Configuration.styles';
+import { FlipFlop } from './Configuration.mocks';
 export default {
     title: 'Core/Configuration',
     component: Configuration,
@@ -39,19 +40,6 @@ ThemedForm.args = {
 ThemedForm.argTypes = {
     theme: { options: ['default', 'theme1'], control: { type: 'select' } }
 };
-const buttonStyles = {
-    width: '100%'
-};
-const StyledFieldset = styled.fieldset `
-  padding: 1rem 5%;
-  margin: 1rem 0;
-`;
-const BoldSpan = styled.span `
-  font-weight: bold;
-`;
-const FlipFlop = ({ flipFlop, first, second }) => {
-    return flipFlop ? (_jsxs(_Fragment, { children: [_jsx(BoldSpan, { children: first }, void 0), "\u00A0\u2192 ", second] }, void 0)) : (_jsxs(_Fragment, { children: [first, " \u2190\u00A0", _jsx(BoldSpan, { children: second }, void 0)] }, void 0));
-};
 export const ThemingHierarchy = () => {
     const [redOrOrange, setRedOrOrange] = useState(true);
     const [greenOrPurple, setGreenOrPurple] = useState(true);