@payloadcms/ui 3.0.0-canary.518fabe → 3.0.0-canary.51be7be

package/dist/elements/Upload/index.scss

@@ -1,155 +1,157 @@
 @import '../../scss/styles.scss';
 
-.file-field {
-  position: relative;
-  margin-bottom: var(--base);
-  background: var(--theme-elevation-50);
-  border-radius: var(--style-radius-s);
-
-  &__upload {
-    display: flex;
-  }
-
-  .tooltip.error-message {
-    z-index: 3;
-    bottom: calc(100% - #{base(0.5)});
-  }
-
-  &__file-selected {
-    display: flex;
-  }
-
-  &__thumbnail-wrap {
+@layer payload-default {
+  .file-field {
     position: relative;
-    width: 150px;
+    margin-bottom: var(--base);
+    background: var(--theme-elevation-50);
+    border-radius: var(--style-radius-s);
 
-    .thumbnail {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      border-radius: var(--style-radius-s) 0 0 var(--style-radius-s);
+    &__upload {
+      display: flex;
     }
-  }
 
-  &__remove {
-    margin: calc($baseline * 1.5) $baseline $baseline 0;
-    place-self: flex-start;
-  }
+    .tooltip.error-message {
+      z-index: 3;
+      bottom: calc(100% - #{base(0.5)});
+    }
 
-  &__file-adjustments,
-  &__remote-file-wrap {
-    padding: $baseline;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--base) / 2);
-  }
+    &__file-selected {
+      display: flex;
+    }
 
-  &__filename,
-  &__remote-file {
-    @include formInput;
-    background-color: var(--theme-bg);
-  }
+    &__thumbnail-wrap {
+      position: relative;
+      width: 150px;
 
-  &__upload-actions,
-  &__add-file-wrap {
-    display: flex;
-    gap: calc(var(--base) / 2);
-    flex-wrap: wrap;
-
-    & button {
-      cursor: pointer;
-      background-color: var(--theme-elevation-150);
-      border: none;
-      border-radius: $style-radius-m;
-      padding: base(0.25) base(0.5);
-      text-wrap: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &:hover {
-        background-color: var(--theme-elevation-100);
+      .thumbnail {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: var(--style-radius-s) 0 0 var(--style-radius-s);
       }
     }
-  }
 
-  &__previewDrawer {
-    & h2 {
-      margin: 0 base(1) 0 0;
-      text-wrap: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: calc(100% - base(2));
+    &__remove {
+      margin: calc($baseline * 1.5) $baseline $baseline 0;
+      place-self: flex-start;
     }
-  }
 
-  .dropzone {
-    background-color: transparent;
-    padding-block: calc(var(--base) * 2.25);
-  }
+    &__file-adjustments,
+    &__remote-file-wrap {
+      padding: $baseline;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--base) / 2);
+    }
 
-  &__dropzoneContent {
-    display: flex;
-    flex-wrap: wrap;
-    gap: base(0.4);
-    justify-content: space-between;
-    width: 100%;
-  }
+    &__filename,
+    &__remote-file {
+      @include formInput;
+      background-color: var(--theme-bg);
+    }
 
-  &__dropzoneButtons {
-    display: flex;
-    gap: calc(var(--base) * 0.5);
-  }
+    &__upload-actions,
+    &__add-file-wrap {
+      display: flex;
+      gap: calc(var(--base) / 2);
+      flex-wrap: wrap;
 
-  &__orText {
-    color: var(--theme-elevation-500);
-    text-transform: lowercase;
-  }
+      & button {
+        cursor: pointer;
+        background-color: var(--theme-elevation-150);
+        border: none;
+        border-radius: $style-radius-m;
+        padding: base(0.25) base(0.5);
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+          background-color: var(--theme-elevation-100);
+        }
+      }
+    }
 
-  &__dragAndDropText {
-    flex-shrink: 0;
-    margin: 0;
-    text-transform: lowercase;
-    align-self: center;
-    color: var(--theme-elevation-500);
-  }
+    &__previewDrawer {
+      & h2 {
+        margin: 0 base(1) 0 0;
+        text-wrap: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: calc(100% - base(2));
+      }
+    }
 
-  @include small-break {
-    &__upload {
+    .dropzone {
+      background-color: transparent;
+      padding-block: calc(var(--base) * 2.25);
+    }
+
+    &__dropzoneContent {
+      display: flex;
       flex-wrap: wrap;
+      gap: base(0.4);
       justify-content: space-between;
+      width: 100%;
     }
 
-    &__remove {
-      margin: $baseline;
-      order: 2;
+    &__dropzoneButtons {
+      display: flex;
+      gap: calc(var(--base) * 0.5);
     }
 
-    &__file-adjustments {
-      order: 3;
-      border-top: 2px solid var(--theme-elevation-0);
-      padding: calc($baseline * 0.5);
-      gap: 0;
+    &__orText {
+      color: var(--theme-elevation-500);
+      text-transform: lowercase;
     }
 
-    &__thumbnail-wrap {
-      order: 1;
-      width: 50%;
+    &__dragAndDropText {
+      flex-shrink: 0;
+      margin: 0;
+      text-transform: lowercase;
+      align-self: center;
+      color: var(--theme-elevation-500);
+    }
 
-      .thumbnail {
-        width: 100%;
+    @include small-break {
+      &__upload {
+        flex-wrap: wrap;
+        justify-content: space-between;
+      }
+
+      &__remove {
+        margin: $baseline;
+        order: 2;
+      }
+
+      &__file-adjustments {
+        order: 3;
+        border-top: 2px solid var(--theme-elevation-0);
+        padding: calc($baseline * 0.5);
+        gap: 0;
       }
-    }
 
-    &__edit {
-      display: none;
+      &__thumbnail-wrap {
+        order: 1;
+        width: 50%;
+
+        .thumbnail {
+          width: 100%;
+        }
+      }
+
+      &__edit {
+        display: none;
+      }
     }
-  }
 
-  @include small-break {
-    &__dropzoneContent {
-      display: none;
+    @include small-break {
+      &__dropzoneContent {
+        display: none;
+      }
     }
   }
 }

package/dist/elements/WhereBuilder/Condition/Number/index.scss

@@ -1,5 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.condition-value-number {
-  @include formInput;
+@layer payload-default {
+  .condition-value-number {
+    @include formInput;
+  }
 }

package/dist/elements/WhereBuilder/Condition/Relationship/index.scss

@@ -1,11 +1,13 @@
 @import '../../../../scss/styles.scss';
 
-.condition-value-relationship {
-  &__error-loading {
-    border: 1px solid var(--theme-error-600);
-    min-height: base(2);
-    padding: base(0.5) base(0.75);
-    background-color: var(--theme-error-100);
-    color: var(--theme-elevation-0);
+@layer payload-default {
+  .condition-value-relationship {
+    &__error-loading {
+      border: 1px solid var(--theme-error-600);
+      min-height: base(2);
+      padding: base(0.5) base(0.75);
+      background-color: var(--theme-error-100);
+      color: var(--theme-elevation-0);
+    }
   }
 }

package/dist/elements/WhereBuilder/Condition/Text/index.scss

@@ -1,5 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.condition-value-text {
-  @include formInput;
+@layer payload-default {
+  .condition-value-text {
+    @include formInput;
+  }
 }

package/dist/elements/WhereBuilder/Condition/index.js

@@ -16,7 +16,7 @@ import { Select } from './Select/index.js';
 import { Text } from './Text/index.js';
 const baseClass = 'condition';
 export const Condition = props => {
-  const $ = _c(64);
+  const $ = _c(66);
   const {
     addCondition,
     andIndex,
@@ -113,7 +113,7 @@ export const Condition = props => {
     t6 = booleanSelect ? {
       type: "client",
       Component: Select
-    } : internalField.Filter || {
+    } : internalField?.Filter || {
       type: "client",
       Component: valueFields?.[internalField?.field?.type] || Text
     };
@@ -201,44 +201,44 @@ export const Condition = props => {
     t8 = $[40];
   }
   let t9;
-  if ($[41] !== t7 || $[42] !== fields || $[43] !== t8 || $[44] !== internalField || $[45] !== internalOperatorOption || $[46] !== internalQueryValue || $[47] !== valueOptions || $[48] !== ValueComponent || $[49] !== removeCondition || $[50] !== andIndex || $[51] !== orIndex || $[52] !== addCondition) {
+  if ($[41] !== t7 || $[42] !== fields || $[43] !== t8 || $[44] !== internalField?.value || $[45] !== internalField?.operators || $[46] !== internalField?.field || $[47] !== internalOperatorOption || $[48] !== internalQueryValue || $[49] !== valueOptions || $[50] !== ValueComponent || $[51] !== removeCondition || $[52] !== andIndex || $[53] !== orIndex || $[54] !== addCondition) {
     let t10;
-    if ($[54] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[56] === Symbol.for("react.memo_cache_sentinel")) {
       t10 = operator_0 => {
         setInternalOperatorOption(operator_0.value);
       };
-      $[54] = t10;
+      $[56] = t10;
     } else {
-      t10 = $[54];
+      t10 = $[56];
     }
     let t11;
-    if ($[55] !== removeCondition || $[56] !== andIndex || $[57] !== orIndex) {
+    if ($[57] !== removeCondition || $[58] !== andIndex || $[59] !== orIndex) {
       t11 = () => removeCondition({
         andIndex,
         orIndex
       });
-      $[55] = removeCondition;
-      $[56] = andIndex;
-      $[57] = orIndex;
-      $[58] = t11;
+      $[57] = removeCondition;
+      $[58] = andIndex;
+      $[59] = orIndex;
+      $[60] = t11;
     } else {
-      t11 = $[58];
+      t11 = $[60];
     }
     let t12;
-    if ($[59] !== addCondition || $[60] !== andIndex || $[61] !== fields || $[62] !== orIndex) {
+    if ($[61] !== addCondition || $[62] !== andIndex || $[63] !== fields || $[64] !== orIndex) {
       t12 = () => addCondition({
         andIndex: andIndex + 1,
         fieldName: fields[0].value,
         orIndex,
         relation: "and"
       });
-      $[59] = addCondition;
-      $[60] = andIndex;
-      $[61] = fields;
-      $[62] = orIndex;
-      $[63] = t12;
+      $[61] = addCondition;
+      $[62] = andIndex;
+      $[63] = fields;
+      $[64] = orIndex;
+      $[65] = t12;
     } else {
-      t12 = $[63];
+      t12 = $[65];
     }
     t9 = _jsx("div", {
       className: baseClass,
@@ -301,18 +301,20 @@ export const Condition = props => {
     $[41] = t7;
     $[42] = fields;
     $[43] = t8;
-    $[44] = internalField;
-    $[45] = internalOperatorOption;
-    $[46] = internalQueryValue;
-    $[47] = valueOptions;
-    $[48] = ValueComponent;
-    $[49] = removeCondition;
-    $[50] = andIndex;
-    $[51] = orIndex;
-    $[52] = addCondition;
-    $[53] = t9;
+    $[44] = internalField?.value;
+    $[45] = internalField?.operators;
+    $[46] = internalField?.field;
+    $[47] = internalOperatorOption;
+    $[48] = internalQueryValue;
+    $[49] = valueOptions;
+    $[50] = ValueComponent;
+    $[51] = removeCondition;
+    $[52] = andIndex;
+    $[53] = orIndex;
+    $[54] = addCondition;
+    $[55] = t9;
   } else {
-    t9 = $[53];
+    t9 = $[55];
   }
   return t9;
 };

package/dist/elements/WhereBuilder/Condition/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useState","useDebounce","RenderComponent","useTranslation","Button","ReactSelect","DateField","NumberField","RelationshipField","Select","Text","baseClass","Condition","props","$","addCondition","andIndex","fieldName","fields","initialValue","operator","orIndex","removeCondition","updateCondition","t0","find","field","value","internalField","setInternalField","t","internalOperatorOption","setInternalOperatorOption","internalQueryValue","setInternalQueryValue","debouncedValue","t1","undefined","includes","t2","t3","t4","type","booleanSelect","t5","Symbol","for","date","number","radio","relationship","select","text","valueFields","t6","Component","Filter","ValueComponent","valueOptions","t7","t8","label","t9","t10","t11","options","field_0","f","field_1","operator_0","t12","relation","_jsx","className","children","_jsxs","isClearable","onChange","disabled","operators","operator_1","clientProps","relationTo","mappedComponent","buttonStyle","icon","iconStyle","onClick","round"],"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useState } from 'react'\n\nimport type { FieldCondition } from '../types.js'\n\nexport type Props = {\n  readonly addCondition: ({\n    andIndex,\n    fieldName,\n    orIndex,\n    relation,\n  }: {\n    andIndex: number\n    fieldName: string\n    orIndex: number\n    relation: 'and' | 'or'\n  }) => void\n  readonly andIndex: number\n  readonly fieldName: string\n  readonly fields: FieldCondition[]\n  readonly initialValue: string\n  readonly operator: Operator\n  readonly orIndex: number\n  readonly removeCondition: ({ andIndex, orIndex }: { andIndex: number; orIndex: number }) => void\n  readonly updateCondition: ({\n    andIndex,\n    fieldName,\n    operator,\n    orIndex,\n    value,\n  }: {\n    andIndex: number\n    fieldName: string\n    operator: string\n    orIndex: number\n    value: string\n  }) => void\n}\n\nimport type { FieldTypes, MappedComponent, Operator } from 'payload'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { RenderComponent } from '../../../providers/Config/RenderComponent.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DateField } from './Date/index.js'\nimport './index.scss'\nimport { NumberField } from './Number/index.js'\nimport { RelationshipField } from './Relationship/index.js'\nimport { Select } from './Select/index.js'\nimport { Text } from './Text/index.js'\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const {\n    addCondition,\n    andIndex,\n    fieldName,\n    fields,\n    initialValue,\n    operator,\n    orIndex,\n    removeCondition,\n    updateCondition,\n  } = props\n  const [internalField, setInternalField] = useState<FieldCondition>(() =>\n    fields.find((field) => fieldName === field.value),\n  )\n  const { t } = useTranslation()\n  const [internalOperatorOption, setInternalOperatorOption] = useState<Operator>(operator)\n  const [internalQueryValue, setInternalQueryValue] = useState<string>(initialValue)\n\n  const debouncedValue = useDebounce(internalQueryValue, 300)\n\n  useEffect(() => {\n    // This is to trigger changes when the debounced value changes\n    if (\n      (internalField?.value || typeof internalField?.value === 'number') &&\n      internalOperatorOption &&\n      ![null, undefined].includes(debouncedValue)\n    ) {\n      updateCondition({\n        andIndex,\n        fieldName: internalField.value,\n        operator: internalOperatorOption,\n        orIndex,\n        value: debouncedValue,\n      })\n    }\n  }, [\n    debouncedValue,\n    andIndex,\n    internalField?.value,\n    internalOperatorOption,\n    orIndex,\n    updateCondition,\n    operator,\n  ])\n\n  const booleanSelect =\n    ['exists'].includes(internalOperatorOption) || internalField?.field?.type === 'checkbox'\n\n  const valueFields: Partial<{\n    [key in FieldTypes]: React.FC\n  }> = {\n    date: DateField,\n    number: NumberField,\n    radio: Select,\n    relationship: RelationshipField,\n    select: Select,\n    text: Text,\n  }\n\n  const ValueComponent: MappedComponent = booleanSelect\n    ? {\n        type: 'client',\n        Component: Select,\n      }\n    : internalField.Filter || {\n        type: 'client',\n        Component: valueFields?.[internalField?.field?.type] || Text,\n      }\n\n  let valueOptions\n  if (booleanSelect) {\n    valueOptions = [\n      { label: t('general:true'), value: 'true' },\n      { label: t('general:false'), value: 'false' },\n    ]\n  } else if (internalField?.field && 'options' in internalField.field) {\n    valueOptions = internalField.field.options\n  }\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__inputs`}>\n          <div className={`${baseClass}__field`}>\n            <ReactSelect\n              isClearable={false}\n              onChange={(field: Option) => {\n                setInternalField(fields.find((f) => f.value === field.value))\n                setInternalOperatorOption(undefined)\n                setInternalQueryValue(undefined)\n              }}\n              options={fields}\n              value={fields.find((field) => internalField?.value === field.value) || fields[0]}\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={!internalField?.value && typeof internalField?.value !== 'number'}\n              isClearable={false}\n              onChange={(operator: Option<Operator>) => {\n                setInternalOperatorOption(operator.value)\n              }}\n              options={internalField?.operators}\n              value={\n                internalField?.operators.find(\n                  (operator) => internalOperatorOption === operator.value,\n                ) || null\n              }\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            <RenderComponent\n              clientProps={{\n                ...internalField?.field,\n                disabled: !internalOperatorOption,\n                onChange: setInternalQueryValue,\n                operator: internalOperatorOption,\n                options: valueOptions,\n                relationTo:\n                  internalField?.field?.type === 'relationship'\n                    ? internalField?.field?.relationTo\n                    : undefined,\n                value: internalQueryValue ?? '',\n              }}\n              mappedComponent={ValueComponent}\n            />\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              addCondition({\n                andIndex: andIndex + 1,\n                fieldName: fields[0].value,\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useState","useDebounce","RenderComponent","useTranslation","Button","ReactSelect","DateField","NumberField","RelationshipField","Select","Text","baseClass","Condition","props","$","addCondition","andIndex","fieldName","fields","initialValue","operator","orIndex","removeCondition","updateCondition","t0","find","field","value","internalField","setInternalField","t","internalOperatorOption","setInternalOperatorOption","internalQueryValue","setInternalQueryValue","debouncedValue","t1","undefined","includes","t2","t3","t4","type","booleanSelect","t5","Symbol","for","date","number","radio","relationship","select","text","valueFields","t6","Component","Filter","ValueComponent","valueOptions","t7","t8","label","t9","t10","t11","options","field_0","f","field_1","operators","operator_0","t12","relation","_jsx","className","children","_jsxs","isClearable","onChange","disabled","operator_1","clientProps","relationTo","mappedComponent","buttonStyle","icon","iconStyle","onClick","round"],"sources":["../../../../src/elements/WhereBuilder/Condition/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useState } from 'react'\n\nimport type { FieldCondition } from '../types.js'\n\nexport type Props = {\n  readonly addCondition: ({\n    andIndex,\n    fieldName,\n    orIndex,\n    relation,\n  }: {\n    andIndex: number\n    fieldName: string\n    orIndex: number\n    relation: 'and' | 'or'\n  }) => void\n  readonly andIndex: number\n  readonly fieldName: string\n  readonly fields: FieldCondition[]\n  readonly initialValue: string\n  readonly operator: Operator\n  readonly orIndex: number\n  readonly removeCondition: ({ andIndex, orIndex }: { andIndex: number; orIndex: number }) => void\n  readonly updateCondition: ({\n    andIndex,\n    fieldName,\n    operator,\n    orIndex,\n    value,\n  }: {\n    andIndex: number\n    fieldName: string\n    operator: string\n    orIndex: number\n    value: string\n  }) => void\n}\n\nimport type { FieldTypes, MappedComponent, Operator } from 'payload'\n\nimport type { Option } from '../../ReactSelect/index.js'\n\nimport { useDebounce } from '../../../hooks/useDebounce.js'\nimport { RenderComponent } from '../../../providers/Config/RenderComponent.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { ReactSelect } from '../../ReactSelect/index.js'\nimport { DateField } from './Date/index.js'\nimport './index.scss'\nimport { NumberField } from './Number/index.js'\nimport { RelationshipField } from './Relationship/index.js'\nimport { Select } from './Select/index.js'\nimport { Text } from './Text/index.js'\n\nconst baseClass = 'condition'\n\nexport const Condition: React.FC<Props> = (props) => {\n  const {\n    addCondition,\n    andIndex,\n    fieldName,\n    fields,\n    initialValue,\n    operator,\n    orIndex,\n    removeCondition,\n    updateCondition,\n  } = props\n  const [internalField, setInternalField] = useState<FieldCondition>(() =>\n    fields.find((field) => fieldName === field.value),\n  )\n  const { t } = useTranslation()\n  const [internalOperatorOption, setInternalOperatorOption] = useState<Operator>(operator)\n  const [internalQueryValue, setInternalQueryValue] = useState<string>(initialValue)\n\n  const debouncedValue = useDebounce(internalQueryValue, 300)\n\n  useEffect(() => {\n    // This is to trigger changes when the debounced value changes\n    if (\n      (internalField?.value || typeof internalField?.value === 'number') &&\n      internalOperatorOption &&\n      ![null, undefined].includes(debouncedValue)\n    ) {\n      updateCondition({\n        andIndex,\n        fieldName: internalField.value,\n        operator: internalOperatorOption,\n        orIndex,\n        value: debouncedValue,\n      })\n    }\n  }, [\n    debouncedValue,\n    andIndex,\n    internalField?.value,\n    internalOperatorOption,\n    orIndex,\n    updateCondition,\n    operator,\n  ])\n\n  const booleanSelect =\n    ['exists'].includes(internalOperatorOption) || internalField?.field?.type === 'checkbox'\n\n  const valueFields: Partial<{\n    [key in FieldTypes]: React.FC\n  }> = {\n    date: DateField,\n    number: NumberField,\n    radio: Select,\n    relationship: RelationshipField,\n    select: Select,\n    text: Text,\n  }\n\n  const ValueComponent: MappedComponent = booleanSelect\n    ? {\n        type: 'client',\n        Component: Select,\n      }\n    : internalField?.Filter || {\n        type: 'client',\n        Component: valueFields?.[internalField?.field?.type] || Text,\n      }\n\n  let valueOptions\n  if (booleanSelect) {\n    valueOptions = [\n      { label: t('general:true'), value: 'true' },\n      { label: t('general:false'), value: 'false' },\n    ]\n  } else if (internalField?.field && 'options' in internalField.field) {\n    valueOptions = internalField.field.options\n  }\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <div className={`${baseClass}__inputs`}>\n          <div className={`${baseClass}__field`}>\n            <ReactSelect\n              isClearable={false}\n              onChange={(field: Option) => {\n                setInternalField(fields.find((f) => f.value === field.value))\n                setInternalOperatorOption(undefined)\n                setInternalQueryValue(undefined)\n              }}\n              options={fields}\n              value={fields.find((field) => internalField?.value === field.value) || fields[0]}\n            />\n          </div>\n          <div className={`${baseClass}__operator`}>\n            <ReactSelect\n              disabled={!internalField?.value && typeof internalField?.value !== 'number'}\n              isClearable={false}\n              onChange={(operator: Option<Operator>) => {\n                setInternalOperatorOption(operator.value)\n              }}\n              options={internalField?.operators}\n              value={\n                internalField?.operators.find(\n                  (operator) => internalOperatorOption === operator.value,\n                ) || null\n              }\n            />\n          </div>\n          <div className={`${baseClass}__value`}>\n            <RenderComponent\n              clientProps={{\n                ...internalField?.field,\n                disabled: !internalOperatorOption,\n                onChange: setInternalQueryValue,\n                operator: internalOperatorOption,\n                options: valueOptions,\n                relationTo:\n                  internalField?.field?.type === 'relationship'\n                    ? internalField?.field?.relationTo\n                    : undefined,\n                value: internalQueryValue ?? '',\n              }}\n              mappedComponent={ValueComponent}\n            />\n          </div>\n        </div>\n        <div className={`${baseClass}__actions`}>\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              removeCondition({\n                andIndex,\n                orIndex,\n              })\n            }\n            round\n          />\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__actions-add`}\n            icon=\"plus\"\n            iconStyle=\"with-border\"\n            onClick={() =>\n              addCondition({\n                andIndex: andIndex + 1,\n                fieldName: fields[0].value,\n                orIndex,\n                relation: 'and',\n              })\n            }\n            round\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/index.scss

@@ -1,57 +1,59 @@
 @import '../../../scss/styles.scss';
 
-.condition {
-  &__wrap {
-    display: flex;
-    align-items: center;
-    gap: var(--base);
-  }
+@layer payload-default {
+  .condition {
+    &__wrap {
+      display: flex;
+      align-items: center;
+      gap: var(--base);
+    }
 
-  &__inputs {
-    display: flex;
-    flex-grow: 1;
-    align-items: center;
-    gap: var(--base);
+    &__inputs {
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      gap: var(--base);
 
-    > div {
-      flex-basis: 100%;
+      > div {
+        flex-basis: 100%;
+      }
     }
-  }
 
-  &__field {
-    .field-label {
-      padding-bottom: 0;
+    &__field {
+      .field-label {
+        padding-bottom: 0;
+      }
     }
-  }
-
-  &__actions {
-    flex-shrink: 0;
-    display: flex;
-    gap: calc(var(--base) / 2);
-    padding: calc(var(--base) / 2) 0;
-  }
 
-  .btn {
-    vertical-align: middle;
-    margin: 0;
-  }
-
-  @include mid-break {
-    &__wrap {
-      align-items: initial;
+    &__actions {
+      flex-shrink: 0;
+      display: flex;
       gap: calc(var(--base) / 2);
+      padding: calc(var(--base) / 2) 0;
     }
 
-    &__inputs {
-      flex-direction: column;
-      gap: calc(var(--base) / 2);
-      align-items: stretch;
+    .btn {
+      vertical-align: middle;
+      margin: 0;
     }
 
-    &__actions {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+    @include mid-break {
+      &__wrap {
+        align-items: initial;
+        gap: calc(var(--base) / 2);
+      }
+
+      &__inputs {
+        flex-direction: column;
+        gap: calc(var(--base) / 2);
+        align-items: stretch;
+      }
+
+      &__actions {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
     }
   }
 }