@pega/cosmos-react-build 9.0.0-build.1.0 → 9.0.0-build.10.0

package/lib/components/DynamicInput/DynamicInput.styles.d.ts

@@ -1,4 +1,3 @@
-export declare const StyledExpressionBuilderButton: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledExpressionControl: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDynamicInput: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 //# sourceMappingURL=DynamicInput.styles.d.ts.map

package/lib/components/DynamicInput/DynamicInput.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,6BAA6B,oNAAmB,CAAC;AAC9D,eAAO,MAAM,uBAAuB,kNAAiB,CAAC;AAEtD,eAAO,MAAM,kBAAkB,yGAoD7B,CAAC"}
+{"version":3,"file":"DynamicInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,uBAAuB,kNAAiB,CAAC;AAEtD,eAAO,MAAM,kBAAkB,yGAsE9B,CAAC"}

package/lib/components/DynamicInput/DynamicInput.styles.js

@@ -1,60 +1,67 @@
 import styled, { css } from 'styled-components';
-import { Button, Flex, StyledFormControl, defaultThemeProp } from '@pega/cosmos-react-core';
+import { Flex, StyledFormControl, StyledGrid, defaultThemeProp } from '@pega/cosmos-react-core';
 import { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';
-export const StyledExpressionBuilderButton = styled(Button) ``;
+import { StyledContentWrapper, StyledInputTree } from '../ObjectSelect/InputTree/InputTree.styles';
+import { StyledFieldReferenceInput, StyledFieldReferencePicker } from '../FieldReference/FieldReference.styles';
 export const StyledExpressionControl = styled(Flex) ``;
-export const StyledDynamicInput = styled.div(({ theme }) => {
+export const StyledDynamicInput = styled.div(({ theme: { base: { palette: { 'foreground-color': foregroundColor }, 'content-width': contentWidth }, components: { 'form-control': { 'border-color': formControlBorderColor } } } }) => {
     return css `
-    display: flex;
+      display: flex;
 
-    ${StyledFormControl} {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-      width: 100%;
-    }
+      ${StyledInputTree} {
+        margin-inline-start: -2.5rem;
+      }
 
-    ${StyledExpressionControl} {
-      position: relative;
-      z-index: 1;
+      ${StyledFieldReferencePicker} > ${StyledFieldReferenceInput} > ${StyledGrid} {
+        padding: 0;
+      }
 
-      .react-codemirror2 {
-        min-height: 0;
+      ${StyledContentWrapper} {
+        padding-block-start: 0;
       }
 
-      .CodeMirror,
-      .CodeMirror-wrap {
-        border-color: ${theme.components['form-control']['border-color']};
+      ${StyledFormControl} {
         border-start-start-radius: 0;
         border-end-start-radius: 0;
+        width: 100%;
       }
 
-      ${StyledExpressionBuilderButton} {
-        position: absolute;
-        z-index: 2;
-        inset-block-start: 0.0625rem;
-        inset-inline-end: 0.0625rem;
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
+      ${StyledExpressionControl} {
+        position: relative;
+        z-index: 1;
+
+        .react-codemirror2 {
+          min-height: 0;
+        }
+
+        .CodeMirror,
+        .CodeMirror-wrap {
+          border-color: ${formControlBorderColor};
+          border-start-start-radius: 0;
+          border-end-start-radius: 0;
+        }
       }
-    }
-
-    ${StyledMenuButton} {
-      z-index: 0;
-      border-inline-end: 0;
-      border-color: ${theme.components['form-control']['border-color']};
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-      color: ${theme.base.palette['foreground-color']};
-      &:focus {
-        z-index: 2;
+
+      ${StyledMenuButton} {
+        z-index: 0;
+        border-inline-end: 0;
+        border-color: ${formControlBorderColor};
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+        align-self: flex-start;
+        color: ${foregroundColor};
+        &:focus {
+          z-index: 2;
+        }
       }
-    }
 
-    ${StyledMenuButton} + * {
-      flex-grow: 1;
-      z-index: 1;
-    }
-  `;
+      ${StyledMenuButton} + * {
+        flex-grow: 1;
+        z-index: 1;
+        width: 100%;
+        min-width: ${contentWidth.xs};
+      }
+    `;
 });
 StyledDynamicInput.defaultProps = defaultThemeProp;
 //# sourceMappingURL=DynamicInput.styles.js.map

package/lib/components/DynamicInput/DynamicInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.styles.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAEhG,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA,EAAE,CAAC;AAC9D,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACzD,OAAO,GAAG,CAAA;;;MAGN,iBAAiB;;;;;;MAMjB,uBAAuB;;;;;;;;;;wBAUL,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;;;QAKhE,6BAA6B;;;;;;;;;;MAU/B,gBAAgB;;;sBAGA,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,cAAc,CAAC;;;eAGvD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;;;;;;MAM/C,gBAAgB;;;;GAInB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Button, Flex, StyledFormControl, defaultThemeProp } from '@pega/cosmos-react-core';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\n\nexport const StyledExpressionBuilderButton = styled(Button)``;\nexport const StyledExpressionControl = styled(Flex)``;\n\nexport const StyledDynamicInput = styled.div(({ theme }) => {\n  return css`\n    display: flex;\n\n    ${StyledFormControl} {\n      border-start-start-radius: 0;\n      border-end-start-radius: 0;\n      width: 100%;\n    }\n\n    ${StyledExpressionControl} {\n      position: relative;\n      z-index: 1;\n\n      .react-codemirror2 {\n        min-height: 0;\n      }\n\n      .CodeMirror,\n      .CodeMirror-wrap {\n        border-color: ${theme.components['form-control']['border-color']};\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n\n      ${StyledExpressionBuilderButton} {\n        position: absolute;\n        z-index: 2;\n        inset-block-start: 0.0625rem;\n        inset-inline-end: 0.0625rem;\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n      }\n    }\n\n    ${StyledMenuButton} {\n      z-index: 0;\n      border-inline-end: 0;\n      border-color: ${theme.components['form-control']['border-color']};\n      border-start-end-radius: 0;\n      border-end-end-radius: 0;\n      color: ${theme.base.palette['foreground-color']};\n      &:focus {\n        z-index: 2;\n      }\n    }\n\n    ${StyledMenuButton} + * {\n      flex-grow: 1;\n      z-index: 1;\n    }\n  `;\n});\n\nStyledDynamicInput.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"DynamicInput.styles.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,iBAAiB,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChG,OAAO,EAAE,gBAAgB,EAAE,MAAM,8DAA8D,CAAC;AAEhG,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AACnG,OAAO,EACL,yBAAyB,EACzB,0BAA0B,EAC3B,MAAM,yCAAyC,CAAC;AAEjD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAEtD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAChD,eAAe,EAAE,YAAY,EAC9B,EACD,UAAU,EAAE,EACV,cAAc,EAAE,EAAE,cAAc,EAAE,sBAAsB,EAAE,EAC3D,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;QAGN,eAAe;;;;QAIf,0BAA0B,MAAM,yBAAyB,MAAM,UAAU;;;;QAIzE,oBAAoB;;;;QAIpB,iBAAiB;;;;;;QAMjB,uBAAuB;;;;;;;;;;0BAUL,sBAAsB;;;;;;QAMxC,gBAAgB;;;wBAGA,sBAAsB;;;;iBAI7B,eAAe;;;;;;QAMxB,gBAAgB;;;;qBAIH,YAAY,CAAC,EAAE;;KAE/B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Flex, StyledFormControl, StyledGrid, defaultThemeProp } from '@pega/cosmos-react-core';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\n\nimport { StyledContentWrapper, StyledInputTree } from '../ObjectSelect/InputTree/InputTree.styles';\nimport {\n  StyledFieldReferenceInput,\n  StyledFieldReferencePicker\n} from '../FieldReference/FieldReference.styles';\n\nexport const StyledExpressionControl = styled(Flex)``;\n\nexport const StyledDynamicInput = styled.div(\n  ({\n    theme: {\n      base: {\n        palette: { 'foreground-color': foregroundColor },\n        'content-width': contentWidth\n      },\n      components: {\n        'form-control': { 'border-color': formControlBorderColor }\n      }\n    }\n  }) => {\n    return css`\n      display: flex;\n\n      ${StyledInputTree} {\n        margin-inline-start: -2.5rem;\n      }\n\n      ${StyledFieldReferencePicker} > ${StyledFieldReferenceInput} > ${StyledGrid} {\n        padding: 0;\n      }\n\n      ${StyledContentWrapper} {\n        padding-block-start: 0;\n      }\n\n      ${StyledFormControl} {\n        border-start-start-radius: 0;\n        border-end-start-radius: 0;\n        width: 100%;\n      }\n\n      ${StyledExpressionControl} {\n        position: relative;\n        z-index: 1;\n\n        .react-codemirror2 {\n          min-height: 0;\n        }\n\n        .CodeMirror,\n        .CodeMirror-wrap {\n          border-color: ${formControlBorderColor};\n          border-start-start-radius: 0;\n          border-end-start-radius: 0;\n        }\n      }\n\n      ${StyledMenuButton} {\n        z-index: 0;\n        border-inline-end: 0;\n        border-color: ${formControlBorderColor};\n        border-start-end-radius: 0;\n        border-end-end-radius: 0;\n        align-self: flex-start;\n        color: ${foregroundColor};\n        &:focus {\n          z-index: 2;\n        }\n      }\n\n      ${StyledMenuButton} + * {\n        flex-grow: 1;\n        z-index: 1;\n        width: 100%;\n        min-width: ${contentWidth.xs};\n      }\n    `;\n  }\n);\n\nStyledDynamicInput.defaultProps = defaultThemeProp;\n"]}

package/lib/components/DynamicInput/DynamicInput.types.d.ts

@@ -1,6 +1,15 @@
 import type { ComponentType, Ref } from 'react';
 import type { FormFieldProps, InputProps, TextAreaProps, CurrencyInputProps, NumberInputProps, PhoneInputProps, DateTimeInputProps, DateInputProps, TimeInputProps, TestIdProp, OmitStrict, FormControlProps, DeferInfer } from '@pega/cosmos-react-core';
-export type Source = 'Constant' | 'Rule' | 'FieldReference' | 'Expression';
+export type ConstantSourceType = 'Constant';
+export type RuleSourceType = 'Rule';
+export type FieldReferenceSourceType = 'FieldReference';
+export type ExpressionSourceType = 'Expression';
+export type VariableSourceType = 'Variable';
+export type Source = ConstantSourceType | RuleSourceType | FieldReferenceSourceType | ExpressionSourceType;
+export type SourceConfig = {
+    type: Source;
+    selected?: boolean;
+}[];
 export type ConstantValueTypeMap = {
     Text: InputProps['value'];
     'Text (paragraph)': TextAreaProps['value'];
@@ -15,10 +24,6 @@ export type ConstantValueTypeMap = {
     Time: TimeInputProps['value'];
 };
 export type ConstantFormat = keyof ConstantValueTypeMap;
-export type SourceConfig = {
-    type: Source;
-    selected?: boolean;
-};
 export type FormControlPropsToOmit = Pick<FormControlProps, 'label' | 'labelHidden' | 'additionalInfo' | 'info' | 'required' | 'status' | 'readOnly' | 'disabled' | 'value' | 'defaultValue'>;
 export type ConstantComponentProps<T> = OmitStrict<FormControlProps, keyof FormControlPropsToOmit> & {
     format?: ConstantFormat;
@@ -47,7 +52,7 @@ export interface DynamicInputProps<T extends object = object, ConstantProps exte
     /**
      * Methods to source a value from.
      */
-    sources: SourceConfig[];
+    sources: SourceConfig;
     /**
      * Called when the source method changes.
      */

package/lib/components/DynamicInput/DynamicInput.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"DynamicInput.types.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.types.ts"],"names":[],"mappings":"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"}

package/lib/components/DynamicInput/DynamicInput.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicInput.types.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType, Ref } from 'react';\n\nimport type {\n  FormFieldProps,\n  InputProps,\n  TextAreaProps,\n  CurrencyInputProps,\n  NumberInputProps,\n  PhoneInputProps,\n  DateTimeInputProps,\n  DateInputProps,\n  TimeInputProps,\n  TestIdProp,\n  OmitStrict,\n  FormControlProps,\n  DeferInfer\n} from '@pega/cosmos-react-core';\n\nexport type Source = 'Constant' | 'Rule' | 'FieldReference' | 'Expression'; // Input type options\n\nexport type ConstantValueTypeMap = {\n  Text: InputProps['value'];\n  'Text (paragraph)': TextAreaProps['value'];\n  Boolean: boolean;\n  Currency: CurrencyInputProps['value'];\n  Percentage: NumberInputProps['value'];\n  Integer: NumberInputProps['value'];\n  Decimal: NumberInputProps['value'];\n  Phone: PhoneInputProps['value'];\n  DateTime: DateTimeInputProps['value'];\n  Date: DateInputProps['value'];\n  Time: TimeInputProps['value'];\n};\n\nexport type ConstantFormat = keyof ConstantValueTypeMap;\n\nexport type SourceConfig = { type: Source; selected?: boolean };\n\nexport type FormControlPropsToOmit = Pick<\n  FormControlProps,\n  | 'label'\n  | 'labelHidden'\n  | 'additionalInfo'\n  | 'info'\n  | 'required'\n  | 'status'\n  | 'readOnly'\n  | 'disabled'\n  | 'value'\n  | 'defaultValue'\n>;\n\nexport type ConstantComponentProps<T> = OmitStrict<\n  FormControlProps,\n  keyof FormControlPropsToOmit\n> & {\n  format?: ConstantFormat;\n} & T;\n\ntype ComponentConfig<P> = {\n  component: ComponentType<P>;\n  props: DeferInfer<P>;\n};\n\n// ## (DynamicInput) Top level props for the component.\nexport interface DynamicInputProps<\n  T extends object = object,\n  ConstantProps extends ConstantComponentProps<T> = ConstantComponentProps<T>,\n  RuleProps extends object = object,\n  FieldReferenceProps extends object = object,\n  ExpressionProps extends object = object\n> extends TestIdProp,\n    Pick<FormFieldProps, 'labelHidden' | 'required' | 'status' | 'id' | 'info'> {\n  /**\n   * The accessible  and visual field label.\n   * When used as an independent control label should represent the data field.\n   * When used in combination with another LHS element the default \"Value\" may be sufficient.\n   * @default \"Value\"\n   */\n  label?: string;\n\n  /**\n   * The form control displayed on the RHS\n   */\n  controls: {\n    constant?: ComponentConfig<ConstantProps>;\n    rule?: ComponentConfig<RuleProps>;\n    fieldReference?: ComponentConfig<FieldReferenceProps>;\n    expression?: ComponentConfig<ExpressionProps>;\n  };\n\n  /**\n   * Methods to source a value from.\n   */\n  sources: SourceConfig[];\n\n  /**\n   * Called when the source method changes.\n   */\n  onSourceChange: (source: Source) => void;\n\n  /**\n   * Ref to the component's root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n\n  /**\n   * Hides source button.\n   */\n  hideSourceButton?: boolean;\n}\n"]}
+{"version":3,"file":"DynamicInput.types.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/DynamicInput.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentType, Ref } from 'react';\n\nimport type {\n  FormFieldProps,\n  InputProps,\n  TextAreaProps,\n  CurrencyInputProps,\n  NumberInputProps,\n  PhoneInputProps,\n  DateTimeInputProps,\n  DateInputProps,\n  TimeInputProps,\n  TestIdProp,\n  OmitStrict,\n  FormControlProps,\n  DeferInfer\n} from '@pega/cosmos-react-core';\n\nexport type ConstantSourceType = 'Constant';\nexport type RuleSourceType = 'Rule';\nexport type FieldReferenceSourceType = 'FieldReference';\nexport type ExpressionSourceType = 'Expression';\nexport type VariableSourceType = 'Variable';\n\n// Input type options\nexport type Source =\n  | ConstantSourceType\n  | RuleSourceType\n  | FieldReferenceSourceType\n  | ExpressionSourceType;\n\nexport type SourceConfig = { type: Source; selected?: boolean }[];\n\nexport type ConstantValueTypeMap = {\n  Text: InputProps['value'];\n  'Text (paragraph)': TextAreaProps['value'];\n  Boolean: boolean;\n  Currency: CurrencyInputProps['value'];\n  Percentage: NumberInputProps['value'];\n  Integer: NumberInputProps['value'];\n  Decimal: NumberInputProps['value'];\n  Phone: PhoneInputProps['value'];\n  DateTime: DateTimeInputProps['value'];\n  Date: DateInputProps['value'];\n  Time: TimeInputProps['value'];\n};\n\nexport type ConstantFormat = keyof ConstantValueTypeMap;\n\nexport type FormControlPropsToOmit = Pick<\n  FormControlProps,\n  | 'label'\n  | 'labelHidden'\n  | 'additionalInfo'\n  | 'info'\n  | 'required'\n  | 'status'\n  | 'readOnly'\n  | 'disabled'\n  | 'value'\n  | 'defaultValue'\n>;\n\nexport type ConstantComponentProps<T> = OmitStrict<\n  FormControlProps,\n  keyof FormControlPropsToOmit\n> & {\n  format?: ConstantFormat;\n} & T;\n\ntype ComponentConfig<P> = {\n  component: ComponentType<P>;\n  props: DeferInfer<P>;\n};\n\n// ## (DynamicInput) Top level props for the component.\nexport interface DynamicInputProps<\n  T extends object = object,\n  ConstantProps extends ConstantComponentProps<T> = ConstantComponentProps<T>,\n  RuleProps extends object = object,\n  FieldReferenceProps extends object = object,\n  ExpressionProps extends object = object\n> extends TestIdProp,\n    Pick<FormFieldProps, 'labelHidden' | 'required' | 'status' | 'id' | 'info'> {\n  /**\n   * The accessible  and visual field label.\n   * When used as an independent control label should represent the data field.\n   * When used in combination with another LHS element the default \"Value\" may be sufficient.\n   * @default \"Value\"\n   */\n  label?: string;\n\n  /**\n   * The form control displayed on the RHS\n   */\n  controls: {\n    constant?: ComponentConfig<ConstantProps>;\n    rule?: ComponentConfig<RuleProps>;\n    fieldReference?: ComponentConfig<FieldReferenceProps>;\n    expression?: ComponentConfig<ExpressionProps>;\n  };\n\n  /**\n   * Methods to source a value from.\n   */\n  sources: SourceConfig;\n\n  /**\n   * Called when the source method changes.\n   */\n  onSourceChange: (source: Source) => void;\n\n  /**\n   * Ref to the component's root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n\n  /**\n   * Hides source button.\n   */\n  hideSourceButton?: boolean;\n}\n"]}

package/lib/components/DynamicInput/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAuBtF,eAAO,MAAM,aAAa,GAAI,oBAG3B;IACD,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB,KAAG,MAoBH,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS,iBAAiB,CAAC,SAAS,CAAC,KAAG,MAAM,GAAG,SAIjF,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/DynamicInput/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAyBtF,eAAO,MAAM,aAAa,GAAI,oBAG3B;IACD,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB,KAAG,MAoBH,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,SAAS,iBAAiB,CAAC,SAAS,CAAC,KAAG,MAAM,GAAG,SAIjF,CAAC"}

package/lib/components/DynamicInput/utils.js

@@ -12,7 +12,8 @@ const iconMap = {
     Time: 'clock',
     Rule: 'rule-library',
     FieldReference: 'field-cursor',
-    Advanced: 'function'
+    Advanced: 'function',
+    Expression: 'expression'
 };
 export const getSourceIcon = ({ source, format }) => {
     let iconName;
@@ -26,7 +27,7 @@ export const getSourceIcon = ({ source, format }) => {
         iconName = iconMap.FieldReference;
     }
     if (source === 'Expression') {
-        iconName = iconMap.Advanced;
+        iconName = iconMap.Expression;
     }
     return iconName ?? iconMap.Text;
 };

package/lib/components/DynamicInput/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/utils.ts"],"names":[],"mappings":"AAIA,MAAM,OAAO,GAIT;IACF,IAAI,EAAE,sBAAsB;IAC5B,kBAAkB,EAAE,sBAAsB;IAC1C,OAAO,EAAE,mBAAmB;IAC5B,UAAU,EAAE,YAAY;IACxB,OAAO,EAAE,uBAAuB;IAChC,OAAO,EAAE,gBAAgB;IACzB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,wBAAwB;IAClC,IAAI,EAAE,gBAAgB;IACtB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,cAAc;IACpB,cAAc,EAAE,cAAc;IAC9B,QAAQ,EAAE,UAAU;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,MAAM,EACN,MAAM,EAIP,EAAU,EAAE;IACX,IAAI,QAAQ,CAAC;IAEb,IAAI,MAAM,KAAK,UAAU,EAAE,CAAC;QAC1B,QAAQ,GAAG,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC;IACvC,CAAC;IAED,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM,KAAK,gBAAgB,EAAE,CAAC;QAChC,QAAQ,GAAG,OAAO,CAAC,cAAc,CAAC;IACpC,CAAC;IAED,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;QAC5B,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;IAC9B,CAAC;IAED,OAAO,QAAQ,IAAK,OAAO,CAAC,IAAe,CAAC;AAC9C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAqC,EAAsB,EAAE;IAC5F,IAAI,CAAC,OAAO,CAAC,MAAM;QAAE,OAAO;IAE5B,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAC3E,CAAC,CAAC","sourcesContent":["import type { StreamlineIconName } from '@pega/cosmos-react-core';\n\nimport type { ConstantFormat, DynamicInputProps, Source } from './DynamicInput.types';\n\nconst iconMap: Partial<Record<ConstantFormat, StreamlineIconName>> & {\n  Rule: 'rule-library';\n  FieldReference: 'field-cursor';\n  Advanced: 'function';\n} = {\n  Text: 'dataviz-string-field',\n  'Text (paragraph)': 'dataviz-string-field',\n  Boolean: 'circle-mixed-left',\n  Percentage: 'percentage',\n  Integer: 'dataviz-numeric-field',\n  Decimal: 'number-decimal',\n  Currency: 'currency',\n  Phone: 'phone-call',\n  DateTime: 'dataviz-datetime-field',\n  Date: 'calendar-range',\n  Time: 'clock',\n  Rule: 'rule-library',\n  FieldReference: 'field-cursor',\n  Advanced: 'function'\n};\n\nexport const getSourceIcon = ({\n  source,\n  format\n}: {\n  source: Source;\n  format?: ConstantFormat;\n}): string => {\n  let iconName;\n\n  if (source === 'Constant') {\n    iconName = iconMap[format ?? 'Text'];\n  }\n\n  if (source === 'Rule') {\n    iconName = iconMap.Rule;\n  }\n\n  if (source === 'FieldReference') {\n    iconName = iconMap.FieldReference;\n  }\n\n  if (source === 'Expression') {\n    iconName = iconMap.Advanced;\n  }\n\n  return iconName ?? (iconMap.Text as string);\n};\n\nexport const getCurrentSource = (sources: DynamicInputProps['sources']): Source | undefined => {\n  if (!sources.length) return;\n\n  return sources.find(({ selected }) => selected)?.type || sources[0].type;\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/DynamicInput/utils.ts"],"names":[],"mappings":"AAIA,MAAM,OAAO,GAKT;IACF,IAAI,EAAE,sBAAsB;IAC5B,kBAAkB,EAAE,sBAAsB;IAC1C,OAAO,EAAE,mBAAmB;IAC5B,UAAU,EAAE,YAAY;IACxB,OAAO,EAAE,uBAAuB;IAChC,OAAO,EAAE,gBAAgB;IACzB,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,wBAAwB;IAClC,IAAI,EAAE,gBAAgB;IACtB,IAAI,EAAE,OAAO;IACb,IAAI,EAAE,cAAc;IACpB,cAAc,EAAE,cAAc;IAC9B,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,YAAY;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,MAAM,EACN,MAAM,EAIP,EAAU,EAAE;IACX,IAAI,QAAQ,CAAC;IAEb,IAAI,MAAM,KAAK,UAAU,EAAE,CAAC;QAC1B,QAAQ,GAAG,OAAO,CAAC,MAAM,IAAI,MAAM,CAAC,CAAC;IACvC,CAAC;IAED,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;QACtB,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC;IAC1B,CAAC;IAED,IAAI,MAAM,KAAK,gBAAgB,EAAE,CAAC;QAChC,QAAQ,GAAG,OAAO,CAAC,cAAc,CAAC;IACpC,CAAC;IAED,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;QAC5B,QAAQ,GAAG,OAAO,CAAC,UAAU,CAAC;IAChC,CAAC;IAED,OAAO,QAAQ,IAAK,OAAO,CAAC,IAAe,CAAC;AAC9C,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAqC,EAAsB,EAAE;IAC5F,IAAI,CAAC,OAAO,CAAC,MAAM;QAAE,OAAO;IAE5B,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,IAAI,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;AAC3E,CAAC,CAAC","sourcesContent":["import type { StreamlineIconName } from '@pega/cosmos-react-core';\n\nimport type { ConstantFormat, DynamicInputProps, Source } from './DynamicInput.types';\n\nconst iconMap: Partial<Record<ConstantFormat, StreamlineIconName>> & {\n  Rule: 'rule-library';\n  FieldReference: 'field-cursor';\n  Advanced: 'function';\n  Expression: 'expression';\n} = {\n  Text: 'dataviz-string-field',\n  'Text (paragraph)': 'dataviz-string-field',\n  Boolean: 'circle-mixed-left',\n  Percentage: 'percentage',\n  Integer: 'dataviz-numeric-field',\n  Decimal: 'number-decimal',\n  Currency: 'currency',\n  Phone: 'phone-call',\n  DateTime: 'dataviz-datetime-field',\n  Date: 'calendar-range',\n  Time: 'clock',\n  Rule: 'rule-library',\n  FieldReference: 'field-cursor',\n  Advanced: 'function',\n  Expression: 'expression'\n};\n\nexport const getSourceIcon = ({\n  source,\n  format\n}: {\n  source: Source;\n  format?: ConstantFormat;\n}): string => {\n  let iconName;\n\n  if (source === 'Constant') {\n    iconName = iconMap[format ?? 'Text'];\n  }\n\n  if (source === 'Rule') {\n    iconName = iconMap.Rule;\n  }\n\n  if (source === 'FieldReference') {\n    iconName = iconMap.FieldReference;\n  }\n\n  if (source === 'Expression') {\n    iconName = iconMap.Expression;\n  }\n\n  return iconName ?? (iconMap.Text as string);\n};\n\nexport const getCurrentSource = (sources: DynamicInputProps['sources']): Source | undefined => {\n  if (!sources.length) return;\n\n  return sources.find(({ selected }) => selected)?.type || sources[0].type;\n};\n"]}

package/lib/components/EmptyRuleTemplate/EmptyRuleTemplate.d.ts

@@ -0,0 +1,34 @@
+import type { Ref } from 'react';
+import type { ImageProps, LinkProps, MenuButtonProps, Action, TestIdProp, BaseProps, NoChildrenProp, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';
+export interface EmptyRuleTemplateProps extends BaseProps, NoChildrenProp, TestIdProp {
+    /** The heading of the template */
+    title: string;
+    /** description of the template */
+    description?: string;
+    /** Image of the template */
+    image?: ImageProps;
+    /** Link pointing to external resource for more information */
+    moreInfo?: {
+        label: string;
+        href: LinkProps['href'];
+    };
+    /** Call to action in the template */
+    primaryAction?: Pick<Action, 'text' | 'onClick' | 'disabled'>;
+    /** Select menu to choose the first action to proceed further */
+    actionsMenu?: Pick<MenuButtonProps, 'text' | 'onClick' | 'onKeyDown' | 'menu'> & {
+        disabled?: boolean;
+    };
+    /** Ref to the template. */
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const StyledEmptyRuleContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledEmptyRuleContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledImageContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    isStacked: boolean;
+}, never>;
+declare const _default: ForwardRefForwardPropsComponent<EmptyRuleTemplateProps> & {
+    getTestIds: (testIdProp?: TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["title", "description", "image", "more-info", "action", "actions-menu"]>;
+};
+export default _default;
+//# sourceMappingURL=EmptyRuleTemplate.d.ts.map

package/lib/components/EmptyRuleTemplate/EmptyRuleTemplate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyRuleTemplate.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyRuleTemplate/EmptyRuleTemplate.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAiBlD,OAAO,KAAK,EACV,UAAU,EACV,SAAS,EACT,eAAe,EACf,MAAM,EACN,UAAU,EACV,SAAS,EACT,cAAc,EACd,+BAA+B,EAChC,MAAM,yBAAyB,CAAC;AAKjC,MAAM,WAAW,sBAAuB,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IACnF,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE;QACT,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;KACzB,CAAC;IACF,qCAAqC;IACrC,aAAa,CAAC,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,CAAC;IAC9D,gEAAgE;IAChE,WAAW,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC,GAAG;QAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;IACF,2BAA2B;IAC3B,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAED,eAAO,MAAM,wBAAwB,yGAcpC,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAYlC,CAAC;AAIF,eAAO,MAAM,oBAAoB,yGAS/B,CAAC;AAIH,eAAO,MAAM,qBAAqB;eAA2C,OAAO;SASlF,CAAC;;;;AA8FH,wBAA2E"}

package/lib/components/EmptyRuleTemplate/EmptyRuleTemplate.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { Flex, Text, Image, Link, Button, MenuButton, ShowMoreLess, useTestIds, useBreakpoint, useConsolidatedRef, withTestIds, defaultThemeProp } from '@pega/cosmos-react-core';
+import { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';
+import { getEmptyRuleTemplateTestIds } from './EmptyRuleTemplate.test-ids';
+export const StyledEmptyRuleContainer = styled.div(({ theme: { base: { 'content-width': { sm } } } }) => {
+    return css `
+      min-width: ${sm};
+      height: 100%;
+      text-align: center;
+    `;
+});
+StyledEmptyRuleContainer.defaultProps = defaultThemeProp;
+export const StyledEmptyRuleContent = styled.div(({ theme: { base: { 'content-width': { xl } } } }) => {
+    return css `
+      max-width: ${xl};
+    `;
+});
+StyledEmptyRuleContent.defaultProps = defaultThemeProp;
+export const StyledImageContainer = styled.div(({ theme }) => {
+    return css `
+    width: calc(30 * ${theme.base.spacing});
+
+    img {
+      object-fit: contain;
+      min-width: 100%;
+    }
+  `;
+});
+StyledImageContainer.defaultProps = defaultThemeProp;
+export const StyledButtonContainer = styled.div(({ isStacked }) => {
+    return (isStacked &&
+        css `
+      ${StyledMenuButton} {
+        margin-inline-start: 0;
+      }
+    `);
+});
+const EmptyRuleTemplate = forwardRef(function EmptyRuleTemplate({ testId, title, image, description, moreInfo, primaryAction, actionsMenu }, ref) {
+    const testIds = useTestIds(testId, getEmptyRuleTemplateTestIds);
+    const templateRef = useConsolidatedRef(ref);
+    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: templateRef });
+    return (_jsx(Flex, { as: StyledEmptyRuleContainer, container: { justify: 'center', alignItems: 'center' }, ref: templateRef, children: _jsxs(Flex, { as: StyledEmptyRuleContent, container: {
+                direction: 'column',
+                alignItems: 'center',
+                rowGap: 2,
+                pad: [4, 2]
+            }, children: [image && (_jsx(StyledImageContainer, { children: _jsx(Image, { ...image, "data-testId": testIds.image }) })), _jsxs(Flex, { container: { direction: 'column', alignItems: 'center', rowGap: 1 }, children: [_jsx(Text, { "data-testId": testIds.title, variant: 'h2', children: title }), description && (_jsx(ShowMoreLess, { lines: 2, children: _jsx(Text, { "data-testId": testIds.description, variant: 'secondary', children: description }) })), moreInfo && (_jsx(Link, { testId: testIds.moreInfo, href: moreInfo.href, children: moreInfo.label })), (primaryAction || actionsMenu) && (_jsxs(Flex, { as: StyledButtonContainer, isStacked: !isSmallOrAbove, container: {
+                                direction: isSmallOrAbove ? 'row' : 'column',
+                                gap: isSmallOrAbove ? 0 : 1
+                            }, children: [primaryAction && (_jsx(Button, { "data-testid": testIds.action, onClick: primaryAction.onClick, disabled: primaryAction.disabled, children: primaryAction.text })), actionsMenu && (_jsx(MenuButton, { testId: testIds.actionsMenu, ...actionsMenu, disabled: actionsMenu.disabled }))] }))] })] }) }));
+});
+export default withTestIds(EmptyRuleTemplate, getEmptyRuleTemplateTestIds);
+//# sourceMappingURL=EmptyRuleTemplate.js.map

package/lib/components/EmptyRuleTemplate/EmptyRuleTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyRuleTemplate.js","sourceRoot":"","sources":["../../../src/components/EmptyRuleTemplate/EmptyRuleTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport {\n  Flex,\n  Text,\n  Image,\n  Link,\n  Button,\n  MenuButton,\n  ShowMoreLess,\n  useTestIds,\n  useBreakpoint,\n  useConsolidatedRef,\n  withTestIds,\n  defaultThemeProp\n} from '@pega/cosmos-react-core';\nimport type {\n  ImageProps,\n  LinkProps,\n  MenuButtonProps,\n  Action,\n  TestIdProp,\n  BaseProps,\n  NoChildrenProp,\n  ForwardRefForwardPropsComponent\n} from '@pega/cosmos-react-core';\nimport { StyledMenuButton } from '@pega/cosmos-react-core/lib/components/MenuButton/MenuButton';\n\nimport { getEmptyRuleTemplateTestIds } from './EmptyRuleTemplate.test-ids';\n\nexport interface EmptyRuleTemplateProps extends BaseProps, NoChildrenProp, TestIdProp {\n  /** The heading of the template */\n  title: string;\n  /** description of the template */\n  description?: string;\n  /** Image of the template */\n  image?: ImageProps;\n  /** Link pointing to external resource for more information */\n  moreInfo?: {\n    label: string;\n    href: LinkProps['href'];\n  };\n  /** Call to action in the template */\n  primaryAction?: Pick<Action, 'text' | 'onClick' | 'disabled'>;\n  /** Select menu to choose the first action to proceed further */\n  actionsMenu?: Pick<MenuButtonProps, 'text' | 'onClick' | 'onKeyDown' | 'menu'> & {\n    disabled?: boolean;\n  };\n  /** Ref to the template. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport const StyledEmptyRuleContainer = styled.div(\n  ({\n    theme: {\n      base: {\n        'content-width': { sm }\n      }\n    }\n  }) => {\n    return css`\n      min-width: ${sm};\n      height: 100%;\n      text-align: center;\n    `;\n  }\n);\n\nStyledEmptyRuleContainer.defaultProps = defaultThemeProp;\n\nexport const StyledEmptyRuleContent = styled.div(\n  ({\n    theme: {\n      base: {\n        'content-width': { xl }\n      }\n    }\n  }) => {\n    return css`\n      max-width: ${xl};\n    `;\n  }\n);\n\nStyledEmptyRuleContent.defaultProps = defaultThemeProp;\n\nexport const StyledImageContainer = styled.div(({ theme }) => {\n  return css`\n    width: calc(30 * ${theme.base.spacing});\n\n    img {\n      object-fit: contain;\n      min-width: 100%;\n    }\n  `;\n});\n\nStyledImageContainer.defaultProps = defaultThemeProp;\n\nexport const StyledButtonContainer = styled.div(({ isStacked }: { isStacked: boolean }) => {\n  return (\n    isStacked &&\n    css`\n      ${StyledMenuButton} {\n        margin-inline-start: 0;\n      }\n    `\n  );\n});\n\nconst EmptyRuleTemplate: ForwardRefForwardPropsComponent<EmptyRuleTemplateProps> = forwardRef(\n  function EmptyRuleTemplate(\n    {\n      testId,\n      title,\n      image,\n      description,\n      moreInfo,\n      primaryAction,\n      actionsMenu\n    }: PropsWithoutRef<EmptyRuleTemplateProps>,\n    ref: EmptyRuleTemplateProps['ref']\n  ) {\n    const testIds = useTestIds(testId, getEmptyRuleTemplateTestIds);\n    const templateRef = useConsolidatedRef<HTMLDivElement>(ref);\n    const isSmallOrAbove = useBreakpoint('sm', { breakpointRef: templateRef });\n\n    return (\n      <Flex\n        as={StyledEmptyRuleContainer}\n        container={{ justify: 'center', alignItems: 'center' }}\n        ref={templateRef}\n      >\n        <Flex\n          as={StyledEmptyRuleContent}\n          container={{\n            direction: 'column',\n            alignItems: 'center',\n            rowGap: 2,\n            pad: [4, 2]\n          }}\n        >\n          {image && (\n            <StyledImageContainer>\n              <Image {...image} data-testId={testIds.image} />\n            </StyledImageContainer>\n          )}\n\n          <Flex container={{ direction: 'column', alignItems: 'center', rowGap: 1 }}>\n            <Text data-testId={testIds.title} variant='h2'>\n              {title}\n            </Text>\n\n            {description && (\n              <ShowMoreLess lines={2}>\n                <Text data-testId={testIds.description} variant='secondary'>\n                  {description}\n                </Text>\n              </ShowMoreLess>\n            )}\n\n            {moreInfo && (\n              <Link testId={testIds.moreInfo} href={moreInfo.href}>\n                {moreInfo.label}\n              </Link>\n            )}\n\n            {(primaryAction || actionsMenu) && (\n              <Flex\n                as={StyledButtonContainer}\n                isStacked={!isSmallOrAbove}\n                container={{\n                  direction: isSmallOrAbove ? 'row' : 'column',\n                  gap: isSmallOrAbove ? 0 : 1\n                }}\n              >\n                {primaryAction && (\n                  <Button\n                    data-testid={testIds.action}\n                    onClick={primaryAction.onClick}\n                    disabled={primaryAction.disabled}\n                  >\n                    {primaryAction.text}\n                  </Button>\n                )}\n\n                {actionsMenu && (\n                  <MenuButton\n                    testId={testIds.actionsMenu}\n                    {...actionsMenu}\n                    disabled={actionsMenu.disabled}\n                  />\n                )}\n              </Flex>\n            )}\n          </Flex>\n        </Flex>\n      </Flex>\n    );\n  }\n);\n\nexport default withTestIds(EmptyRuleTemplate, getEmptyRuleTemplateTestIds);\n"]}

package/lib/components/EmptyRuleTemplate/EmptyRuleTemplate.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getEmptyRuleTemplateTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["title", "description", "image", "more-info", "action", "actions-menu"]>;
+//# sourceMappingURL=EmptyRuleTemplate.test-ids.d.ts.map

package/lib/components/EmptyRuleTemplate/EmptyRuleTemplate.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyRuleTemplate.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyRuleTemplate/EmptyRuleTemplate.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,6MAO7B,CAAC"}

package/lib/components/EmptyRuleTemplate/EmptyRuleTemplate.test-ids.js

@@ -0,0 +1,10 @@
+import { createTestIds } from '@pega/cosmos-react-core';
+export const getEmptyRuleTemplateTestIds = createTestIds('empty-rule-template', [
+    'title',
+    'description',
+    'image',
+    'more-info',
+    'action',
+    'actions-menu'
+]);
+//# sourceMappingURL=EmptyRuleTemplate.test-ids.js.map

package/lib/components/EmptyRuleTemplate/EmptyRuleTemplate.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyRuleTemplate.test-ids.js","sourceRoot":"","sources":["../../../src/components/EmptyRuleTemplate/EmptyRuleTemplate.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,2BAA2B,GAAG,aAAa,CAAC,qBAAqB,EAAE;IAC9E,OAAO;IACP,aAAa;IACb,OAAO;IACP,WAAW;IACX,QAAQ;IACR,cAAc;CACN,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getEmptyRuleTemplateTestIds = createTestIds('empty-rule-template', [\n  'title',\n  'description',\n  'image',\n  'more-info',\n  'action',\n  'actions-menu'\n] as const);\n"]}

package/lib/components/EmptyRuleTemplate/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './EmptyRuleTemplate';
+export type { EmptyRuleTemplateProps } from './EmptyRuleTemplate';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/EmptyRuleTemplate/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EmptyRuleTemplate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC"}

package/lib/components/EmptyRuleTemplate/index.js

@@ -0,0 +1,2 @@
+export { default } from './EmptyRuleTemplate';
+//# sourceMappingURL=index.js.map

package/lib/components/EmptyRuleTemplate/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/EmptyRuleTemplate/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC","sourcesContent":["export { default } from './EmptyRuleTemplate';\nexport type { EmptyRuleTemplateProps } from './EmptyRuleTemplate';\n"]}

package/lib/components/Expression/Expression.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Expression.d.ts","sourceRoot":"","sources":["../../../src/components/Expression/Expression.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;;;;AAwH1D,wBAA6D"}
+{"version":3,"file":"Expression.d.ts","sourceRoot":"","sources":["../../../src/components/Expression/Expression.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;;;;AAwI1D,wBAA6D"}

package/lib/components/Expression/Expression.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useImperativeHandle, forwardRef } from 'react';
 import { useTestIds, withTestIds, FormField, StyledFormControl, useI18n } from '@pega/cosmos-react-core';
 import { getExpressionTestIds } from './Expression.test-ids';
 import { StyledCodeEditor, StyledFlex } from './Expression.styles';
-const Expression = forwardRef(({ testId, label, labelHidden, readOnly, required, value, status, info, placeholder, additionalInfo, disabled, hideFormField = false, editorInput: { fetchSuggestions, handle, loading, onChange, onBlur, inLineErrors }, id, ...restProps }, ref) => {
+import ExpressionBuilderModal from './ExpressionBuilderModal';
+const Expression = forwardRef(({ testId, label, labelHidden, readOnly, required, value, status, info, placeholder, additionalInfo, disabled, showExpBuilderIcon, onExpBuilderShowHandler, showExpressionBuilder, expressionBuilder, hideFormField = false, editorInput: { fetchSuggestions, handle, loading, onChange, onBlur, inLineErrors }, id, ...restProps }, ref) => {
     const textElRef = useRef(null);
     const popOverReference = useRef(null);
     const codeEditorHandle = useRef(null);
@@ -25,11 +26,11 @@ const Expression = forwardRef(({ testId, label, labelHidden, readOnly, required,
         getPopOverRef: () => popOverReference.current,
         getExpressionRef: () => expressionRef.current
     }), []);
-    const Comp = (_jsx(StyledFormControl, { container: true, as: StyledFlex, status: status, readOnly: readOnly, disabled: disabled, ref: expressionRef, "data-testid": testIds.root, children: _jsx(StyledCodeEditor, { testId: testIds.expressionInput, isSingleLine: true, fetchSuggestions: fetchSuggestions, codeEditorHandle: codeEditorHandle, defaultValue: value, loading: loading, readOnly: readOnly, onChange: onChange, onBlur: onBlur, inLineErrors: inLineErrors, autoCompleteTriggers: ['.', '@', '#', ':', '(', ')'], editorConfigProps: {
-                mode: 'expression',
-                readOnly,
-                placeholder
-            }, "aria-label": t('expression_input') }) }));
+    const Comp = (_jsxs(StyledFormControl, { container: true, inline: true, as: StyledFlex, status: status, readOnly: readOnly, disabled: disabled, ref: expressionRef, "data-testid": testIds.root, children: [_jsx(StyledCodeEditor, { testId: testIds.expressionInput, isSingleLine: true, fetchSuggestions: fetchSuggestions, codeEditorHandle: codeEditorHandle, defaultValue: value, loading: loading, readOnly: readOnly, onChange: onChange, onBlur: onBlur, inLineErrors: inLineErrors, autoCompleteTriggers: ['.', '@', '#', ':', '(', ')'], editorConfigProps: {
+                    mode: 'expression',
+                    readOnly,
+                    placeholder
+                }, "aria-label": t('expression_input') }), showExpBuilderIcon && (_jsx(ExpressionBuilderModal, { testId: testId, expressionBuilder: expressionBuilder, showExpressionBuilder: showExpressionBuilder, readOnly: readOnly, disabled: disabled, onExpBuilderShowHandler: onExpBuilderShowHandler }))] }));
     return !hideFormField ? (_jsx(FormField, { ...restProps, label: label, labelHidden: labelHidden, required: required, readOnly: readOnly, status: status, info: info, disabled: disabled, additionalInfo: additionalInfo, id: id, children: Comp })) : (Comp);
 });
 export default withTestIds(Expression, getExpressionTestIds);

package/lib/components/Expression/Expression.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expression.js","sourceRoot":"","sources":["../../../src/components/Expression/Expression.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useImperativeHandle, forwardRef, type PropsWithoutRef } from 'react';\n\nimport {\n  useTestIds,\n  withTestIds,\n  FormField,\n  StyledFormControl,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport type { EditorState, CustomPositionProps } from '../ExpressionBuilder';\n\nimport { getExpressionTestIds } from './Expression.test-ids';\nimport type { ExpressionProps } from './Expression.types';\nimport { StyledCodeEditor, StyledFlex } from './Expression.styles';\n\nconst Expression = forwardRef(\n  (\n    {\n      testId,\n      label,\n      labelHidden,\n      readOnly,\n      required,\n      value,\n      status,\n      info,\n      placeholder,\n      additionalInfo,\n      disabled,\n      hideFormField = false,\n      editorInput: { fetchSuggestions, handle, loading, onChange, onBlur, inLineErrors },\n      id,\n      ...restProps\n    }: PropsWithoutRef<ExpressionProps>,\n    ref: ExpressionProps['ref']\n  ) => {\n    const textElRef = useRef<HTMLInputElement>(null);\n    const popOverReference = useRef<HTMLDivElement>(null);\n    const codeEditorHandle = useRef<EditorState>(null);\n    const expressionRef = useRef<HTMLDivElement>(null);\n    const t = useI18n();\n\n    const testIds = useTestIds(testId, getExpressionTestIds);\n\n    const getExpression = () => {\n      return codeEditorHandle.current?.getValue() || '';\n    };\n\n    const insertExpression = (\n      expression: string,\n      replaceContent?: boolean,\n      customCursorPosition?: CustomPositionProps\n    ) => {\n      return codeEditorHandle.current?.insertText(\n        expression ?? '',\n        replaceContent ?? true,\n        customCursorPosition\n      );\n    };\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        getExpression,\n        insertExpression\n      }),\n      [getExpression]\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        getTextElRef: () => textElRef.current,\n        getPopOverRef: () => popOverReference.current,\n        getExpressionRef: () => expressionRef.current\n      }),\n      []\n    );\n\n    const Comp = (\n      <StyledFormControl\n        container\n        as={StyledFlex}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        ref={expressionRef}\n        data-testid={testIds.root}\n      >\n        <StyledCodeEditor\n          testId={testIds.expressionInput}\n          isSingleLine\n          fetchSuggestions={fetchSuggestions}\n          codeEditorHandle={codeEditorHandle}\n          defaultValue={value}\n          loading={loading}\n          readOnly={readOnly}\n          onChange={onChange}\n          onBlur={onBlur}\n          inLineErrors={inLineErrors}\n          autoCompleteTriggers={['.', '@', '#', ':', '(', ')']}\n          editorConfigProps={{\n            mode: 'expression',\n            readOnly,\n            placeholder\n          }}\n          aria-label={t('expression_input')}\n        />\n      </StyledFormControl>\n    );\n\n    return !hideFormField ? (\n      <FormField\n        {...restProps}\n        label={label}\n        labelHidden={labelHidden}\n        required={required}\n        readOnly={readOnly}\n        status={status}\n        info={info}\n        disabled={disabled}\n        additionalInfo={additionalInfo}\n        id={id}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(Expression, getExpressionTestIds);\n"]}
+{"version":3,"file":"Expression.js","sourceRoot":"","sources":["../../../src/components/Expression/Expression.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useImperativeHandle, forwardRef, type PropsWithoutRef } from 'react';\n\nimport {\n  useTestIds,\n  withTestIds,\n  FormField,\n  StyledFormControl,\n  useI18n\n} from '@pega/cosmos-react-core';\n\nimport type { EditorState, CustomPositionProps } from '../ExpressionBuilder';\n\nimport { getExpressionTestIds } from './Expression.test-ids';\nimport type { ExpressionProps } from './Expression.types';\nimport { StyledCodeEditor, StyledFlex } from './Expression.styles';\nimport ExpressionBuilderModal from './ExpressionBuilderModal';\n\nconst Expression = forwardRef(\n  (\n    {\n      testId,\n      label,\n      labelHidden,\n      readOnly,\n      required,\n      value,\n      status,\n      info,\n      placeholder,\n      additionalInfo,\n      disabled,\n      showExpBuilderIcon,\n      onExpBuilderShowHandler,\n      showExpressionBuilder,\n      expressionBuilder,\n      hideFormField = false,\n      editorInput: { fetchSuggestions, handle, loading, onChange, onBlur, inLineErrors },\n      id,\n      ...restProps\n    }: PropsWithoutRef<ExpressionProps>,\n    ref: ExpressionProps['ref']\n  ) => {\n    const textElRef = useRef<HTMLInputElement>(null);\n    const popOverReference = useRef<HTMLDivElement>(null);\n    const codeEditorHandle = useRef<EditorState>(null);\n    const expressionRef = useRef<HTMLDivElement>(null);\n    const t = useI18n();\n\n    const testIds = useTestIds(testId, getExpressionTestIds);\n\n    const getExpression = () => {\n      return codeEditorHandle.current?.getValue() || '';\n    };\n\n    const insertExpression = (\n      expression: string,\n      replaceContent?: boolean,\n      customCursorPosition?: CustomPositionProps\n    ) => {\n      return codeEditorHandle.current?.insertText(\n        expression ?? '',\n        replaceContent ?? true,\n        customCursorPosition\n      );\n    };\n\n    useImperativeHandle(\n      handle,\n      () => ({\n        getExpression,\n        insertExpression\n      }),\n      [getExpression]\n    );\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        getTextElRef: () => textElRef.current,\n        getPopOverRef: () => popOverReference.current,\n        getExpressionRef: () => expressionRef.current\n      }),\n      []\n    );\n\n    const Comp = (\n      <StyledFormControl\n        container\n        inline\n        as={StyledFlex}\n        status={status}\n        readOnly={readOnly}\n        disabled={disabled}\n        ref={expressionRef}\n        data-testid={testIds.root}\n      >\n        <StyledCodeEditor\n          testId={testIds.expressionInput}\n          isSingleLine\n          fetchSuggestions={fetchSuggestions}\n          codeEditorHandle={codeEditorHandle}\n          defaultValue={value}\n          loading={loading}\n          readOnly={readOnly}\n          onChange={onChange}\n          onBlur={onBlur}\n          inLineErrors={inLineErrors}\n          autoCompleteTriggers={['.', '@', '#', ':', '(', ')']}\n          editorConfigProps={{\n            mode: 'expression',\n            readOnly,\n            placeholder\n          }}\n          aria-label={t('expression_input')}\n        />\n        {showExpBuilderIcon && (\n          <ExpressionBuilderModal\n            testId={testId}\n            expressionBuilder={expressionBuilder}\n            showExpressionBuilder={showExpressionBuilder}\n            readOnly={readOnly}\n            disabled={disabled}\n            onExpBuilderShowHandler={onExpBuilderShowHandler}\n          />\n        )}\n      </StyledFormControl>\n    );\n\n    return !hideFormField ? (\n      <FormField\n        {...restProps}\n        label={label}\n        labelHidden={labelHidden}\n        required={required}\n        readOnly={readOnly}\n        status={status}\n        info={info}\n        disabled={disabled}\n        additionalInfo={additionalInfo}\n        id={id}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default withTestIds(Expression, getExpressionTestIds);\n"]}

package/lib/components/Expression/Expression.styles.d.ts

@@ -1,4 +1,8 @@
-export declare const StyledFlex: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFlex: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledModalContainer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").FlexProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledExpressionBuilder: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("../ExpressionBuilder").ExpressionBuilderProps> & {
+    getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["search", "explanation", "explain", "clear", "insert", "generate", "generated-expression", "describe-expression"]>;
+}, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledCodeEditor: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("../ExpressionBuilder").CodeEditorProps> & {
     getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["error-popover", "error-message"]>;
 }, import("styled-components").DefaultTheme, {

package/lib/components/Expression/Expression.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Expression.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Expression/Expression.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,UAAU,yGA8BrB,CAAC;AAIH,eAAO,MAAM,gBAAgB;;;mBAAuC,OAAO;SAqBzE,CAAC"}
+{"version":3,"file":"Expression.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Expression/Expression.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,UAAU,kNA8BrB,CAAC;AAIH,eAAO,MAAM,oBAAoB,kNAQ/B,CAAC;AAEH,eAAO,MAAM,uBAAuB;;uDAEnC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;mBAAuC,OAAO;SAqBzE,CAAC"}

package/lib/components/Expression/Expression.styles.js

@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components';
-import { defaultThemeProp } from '@pega/cosmos-react-core';
-import { CodeEditor } from '../ExpressionBuilder';
+import { defaultThemeProp, Flex } from '@pega/cosmos-react-core';
+import ExpressionBuilder, { CodeEditor } from '../ExpressionBuilder';
 const iconWidth = '3.75';
 const height = '3.75';
-export const StyledFlex = styled('div')(({ theme: { components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } }, base: { spacing } } }) => {
+export const StyledFlex = styled(Flex)(({ theme: { components: { 'form-control': { ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow } } }, base: { spacing } } }) => {
     return css `
     &:focus-within {
       border-color: ${focusBorderColor};
@@ -26,6 +26,18 @@ export const StyledFlex = styled('div')(({ theme: { components: { 'form-control'
   `;
 });
 StyledFlex.defaultProps = defaultThemeProp;
+export const StyledModalContainer = styled(Flex)(({ showEditorOnly }) => {
+    return css `
+    height: 30rem;
+    ${!showEditorOnly &&
+        css `
+      width: 72.5rem;
+    `}
+  `;
+});
+export const StyledExpressionBuilder = styled(ExpressionBuilder) `
+  padding-inline: 0;
+`;
 export const StyledCodeEditor = styled(CodeEditor)(({ theme: { base: { spacing } }, isSingleLine }) => {
     return css `
     ${isSingleLine &&

package/lib/components/Expression/Expression.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expression.styles.js","sourceRoot":"","sources":["../../../src/components/Expression/Expression.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,MAAM,SAAS,GAAG,MAAM,CAAC;AACzB,MAAM,MAAM,GAAG,MAAM,CAAC;AACtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EACvC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACD,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;;;qBAIL,OAAO,MAAM,MAAM;yBACf,OAAO,MAAM,MAAM;;;oBAGxB,OAAO,MAAM,SAAS;wBAClB,OAAO,MAAM,SAAS;;;;;;;GAO3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAA6B,CAAC,EAC9E,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACD,YAAY,EACb,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;MACN,YAAY;QACd,GAAG,CAAA;;;;;;2BAMoB,OAAO,MAAM,MAAM;;;uBAGvB,OAAO,MAAM,MAAM;;KAErC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core';\n\nimport { CodeEditor } from '../ExpressionBuilder';\n\nconst iconWidth = '3.75';\nconst height = '3.75';\nexport const StyledFlex = styled('div')(({\n  theme: {\n    components: {\n      'form-control': {\n        ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n      }\n    },\n    base: { spacing }\n  }\n}) => {\n  return css`\n    &:focus-within {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    & > input,\n    & > button {\n      height: calc(${spacing} * ${height});\n      min-height: calc(${spacing} * ${height});\n    }\n    & > button {\n      width: calc(${spacing} * ${iconWidth});\n      min-width: calc(${spacing} * ${iconWidth});\n    }\n    & > input,\n    & > input:focus:not([disabled]) {\n      border: none;\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledFlex.defaultProps = defaultThemeProp;\n\nexport const StyledCodeEditor = styled(CodeEditor)<{ isSingleLine?: boolean }>(({\n  theme: {\n    base: { spacing }\n  },\n  isSingleLine\n}) => {\n  return css`\n    ${isSingleLine &&\n    css`\n      .CodeMirror {\n        border: none;\n      }\n      .react-codemirror2,\n      .CodeMirror-lines {\n        min-height: calc(${spacing} * ${height});\n      }\n      .CodeMirror-lines {\n        height: calc(${spacing} * ${height});\n      }\n    `}\n  `;\n});\n\nStyledCodeEditor.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Expression.styles.js","sourceRoot":"","sources":["../../../src/components/Expression/Expression.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEjE,OAAO,iBAAiB,EAAE,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAErE,MAAM,SAAS,GAAG,MAAM,CAAC;AACzB,MAAM,MAAM,GAAG,MAAM,CAAC;AACtB,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,KAAK,EAAE,EACL,UAAU,EAAE,EACV,cAAc,EAAE,EACd,QAAQ,EAAE,EAAE,cAAc,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,EAAE,EACrE,EACF,EACD,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;sBAEU,gBAAgB;oBAClB,MAAM;;;;qBAIL,OAAO,MAAM,MAAM;yBACf,OAAO,MAAM,MAAM;;;oBAGxB,OAAO,MAAM,SAAS;wBAClB,OAAO,MAAM,SAAS;;;;;;;GAO3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE;IACtE,OAAO,GAAG,CAAA;;MAEN,CAAC,cAAc;QACjB,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;;CAE/D,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAA6B,CAAC,EAC9E,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACD,YAAY,EACb,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;MACN,YAAY;QACd,GAAG,CAAA;;;;;;2BAMoB,OAAO,MAAM,MAAM;;;uBAGvB,OAAO,MAAM,MAAM;;KAErC;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Flex } from '@pega/cosmos-react-core';\n\nimport ExpressionBuilder, { CodeEditor } from '../ExpressionBuilder';\n\nconst iconWidth = '3.75';\nconst height = '3.75';\nexport const StyledFlex = styled(Flex)(({\n  theme: {\n    components: {\n      'form-control': {\n        ':focus': { 'border-color': focusBorderColor, 'box-shadow': shadow }\n      }\n    },\n    base: { spacing }\n  }\n}) => {\n  return css`\n    &:focus-within {\n      border-color: ${focusBorderColor};\n      box-shadow: ${shadow};\n    }\n    & > input,\n    & > button {\n      height: calc(${spacing} * ${height});\n      min-height: calc(${spacing} * ${height});\n    }\n    & > button {\n      width: calc(${spacing} * ${iconWidth});\n      min-width: calc(${spacing} * ${iconWidth});\n    }\n    & > input,\n    & > input:focus:not([disabled]) {\n      border: none;\n      box-shadow: none;\n    }\n  `;\n});\n\nStyledFlex.defaultProps = defaultThemeProp;\n\nexport const StyledModalContainer = styled(Flex)(({ showEditorOnly }) => {\n  return css`\n    height: 30rem;\n    ${!showEditorOnly &&\n    css`\n      width: 72.5rem;\n    `}\n  `;\n});\n\nexport const StyledExpressionBuilder = styled(ExpressionBuilder)`\n  padding-inline: 0;\n`;\n\nexport const StyledCodeEditor = styled(CodeEditor)<{ isSingleLine?: boolean }>(({\n  theme: {\n    base: { spacing }\n  },\n  isSingleLine\n}) => {\n  return css`\n    ${isSingleLine &&\n    css`\n      .CodeMirror {\n        border: none;\n      }\n      .react-codemirror2,\n      .CodeMirror-lines {\n        min-height: calc(${spacing} * ${height});\n      }\n      .CodeMirror-lines {\n        height: calc(${spacing} * ${height});\n      }\n    `}\n  `;\n});\n\nStyledCodeEditor.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Expression/Expression.test-ids.d.ts

@@ -1,2 +1,3 @@
 export declare const getExpressionTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["expression-input", "expression-menu-popover", "expression-builder-error-banner", "progress-builder"]>;
+export declare const getExpressionBuilderGearTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly ["expression-builder-modal", "open-expression-builder", "expression-modal-cancel", "expression-modal-submit"]>;
 //# sourceMappingURL=Expression.test-ids.d.ts.map

package/lib/components/Expression/Expression.test-ids.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Expression.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Expression/Expression.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,2OAKtB,CAAC"}
+{"version":3,"file":"Expression.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/Expression/Expression.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,2OAKtB,CAAC;AAEZ,eAAO,MAAM,+BAA+B,kPAKjC,CAAC"}

package/lib/components/Expression/Expression.test-ids.js

@@ -5,4 +5,10 @@ export const getExpressionTestIds = createTestIds('expression', [
     'expression-builder-error-banner',
     'progress-builder'
 ]);
+export const getExpressionBuilderGearTestIds = createTestIds('expression-builder-gear', [
+    'expression-builder-modal',
+    'open-expression-builder',
+    'expression-modal-cancel',
+    'expression-modal-submit'
+]);
 //# sourceMappingURL=Expression.test-ids.js.map

package/lib/components/Expression/Expression.test-ids.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expression.test-ids.js","sourceRoot":"","sources":["../../../src/components/Expression/Expression.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAC,YAAY,EAAE;IAC9D,kBAAkB;IAClB,yBAAyB;IACzB,iCAAiC;IACjC,kBAAkB;CACV,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getExpressionTestIds = createTestIds('expression', [\n  'expression-input',\n  'expression-menu-popover',\n  'expression-builder-error-banner',\n  'progress-builder'\n] as const);\n"]}
+{"version":3,"file":"Expression.test-ids.js","sourceRoot":"","sources":["../../../src/components/Expression/Expression.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAAC,YAAY,EAAE;IAC9D,kBAAkB;IAClB,yBAAyB;IACzB,iCAAiC;IACjC,kBAAkB;CACV,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,+BAA+B,GAAG,aAAa,CAAC,yBAAyB,EAAE;IACtF,0BAA0B;IAC1B,yBAAyB;IACzB,yBAAyB;IACzB,yBAAyB;CACjB,CAAC,CAAC","sourcesContent":["import { createTestIds } from '@pega/cosmos-react-core';\n\nexport const getExpressionTestIds = createTestIds('expression', [\n  'expression-input',\n  'expression-menu-popover',\n  'expression-builder-error-banner',\n  'progress-builder'\n] as const);\n\nexport const getExpressionBuilderGearTestIds = createTestIds('expression-builder-gear', [\n  'expression-builder-modal',\n  'open-expression-builder',\n  'expression-modal-cancel',\n  'expression-modal-submit'\n] as const);\n"]}