@payloadcms/ui 3.0.0-canary.d6053cd → 3.0.0-canary.dc8b1fe

package/dist/elements/ReactSelect/MultiValue/index.scss

@@ -1,15 +1,39 @@
 @import '../../../scss/styles.scss';
 
-.multi-value {
-  &.rs__multi-value {
-    padding: 0;
-    background: var(--theme-input-bg);
-    border: $style-stroke-width-s solid var(--theme-elevation-800);
-    line-height: calc(#{$baseline} - #{$style-stroke-width-s * 2});
-    margin: base(0.25) base(0.5) base(0.25) 0;
+@layer payload-default {
+  .multi-value {
+    &.rs__multi-value {
+      display: flex;
+      padding: 0;
+      border: 1px solid var(--theme-border-color);
+      border-radius: var(--style-radius-s);
+      line-height: calc(#{$baseline} - 2px);
+      margin: base(0.25) base(0.5) base(0.25) 0;
+      transition: border 0.2s cubic-bezier(0.2, 0, 0, 1);
+
+      &:hover {
+        border: 1px solid var(--theme-elevation-250);
+      }
+    }
+
+    &--is-dragging {
+      z-index: 2;
+    }
+  }
+
+  html[data-theme='light'] {
+    .multi-value {
+      &.rs__multi-value {
+        background: var(--theme-elevation-50);
+      }
+    }
   }
 
-  &--is-dragging {
-    z-index: 2;
+  html[data-theme='dark'] {
+    .multi-value {
+      &.rs__multi-value {
+        background: var(--theme-elevation-50);
+      }
+    }
   }
 }

package/dist/elements/ReactSelect/MultiValueLabel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAgB7D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAe7D,CAAA"}

package/dist/elements/ReactSelect/MultiValueLabel/index.js

@@ -1,22 +1,28 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { components as SelectComponents } from 'react-select';
 import './index.scss';
 const baseClass = 'multi-value-label';
-export const MultiValueLabel = (props)=>{
-    // @ts-expect-error-next-line// TODO Fix this - moduleResolution 16 breaks our declare module
-    const { selectProps: { customProps: { draggableProps } = {} } = {} } = props;
-    return /*#__PURE__*/ _jsx("div", {
-        className: baseClass,
-        children: /*#__PURE__*/ _jsx(SelectComponents.MultiValueLabel, {
-            ...props,
-            innerProps: {
-                className: `${baseClass}__text`,
-                ...draggableProps || {}
-            }
-        })
-    });
+export const MultiValueLabel = props => {
+  // @ts-expect-error-next-line// TODO Fix this - moduleResolution 16 breaks our declare module
+  const {
+    selectProps: {
+      customProps: {
+        draggableProps
+      } = {}
+    } = {}
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: /*#__PURE__*/_jsx(SelectComponents.MultiValueLabel, {
+      ...props,
+      innerProps: {
+        className: `${baseClass}__text`,
+        ...(draggableProps || {})
+      }
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/ReactSelect/MultiValueLabel/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nimport './index.scss'\n\nconst baseClass = 'multi-value-label'\n\nexport const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {\n  // @ts-expect-error-next-line// TODO Fix this - moduleResolution 16 breaks our declare module\n  const { selectProps: { customProps: { draggableProps } = {} } = {} } = props\n\n  return (\n    <div className={baseClass}>\n      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}\n      <SelectComponents.MultiValueLabel\n        {...props}\n        innerProps={{\n          className: `${baseClass}__text`,\n          ...(draggableProps || {}),\n        }}\n      />\n    </div>\n  )\n}\n"],"names":["React","components","SelectComponents","baseClass","MultiValueLabel","props","selectProps","customProps","draggableProps","div","className","innerProps"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AACzB,SAASC,cAAcC,gBAAgB,QAAQ,eAAc;AAI7D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,kBAAqD,CAACC;IACjE,6FAA6F;IAC7F,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,cAAc,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAGH;IAEvE,qBACE,KAACI;QAAIC,WAAWP;kBAEd,cAAA,KAACD,iBAAiBE,eAAe;YAC9B,GAAGC,KAAK;YACTM,YAAY;gBACVD,WAAW,CAAC,EAAEP,UAAU,MAAM,CAAC;gBAC/B,GAAIK,kBAAkB,CAAC,CAAC;YAC1B;;;AAIR,EAAC"}
+{"version":3,"file":"index.js","names":["React","components","SelectComponents","baseClass","MultiValueLabel","props","selectProps","customProps","draggableProps","_jsx","className","innerProps"],"sources":["../../../../src/elements/ReactSelect/MultiValueLabel/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nimport './index.scss'\n\nconst baseClass = 'multi-value-label'\n\nexport const MultiValueLabel: React.FC<MultiValueProps<Option>> = (props) => {\n  // @ts-expect-error-next-line// TODO Fix this - moduleResolution 16 breaks our declare module\n  const { selectProps: { customProps: { draggableProps } = {} } = {} } = props\n\n  return (\n    <div className={baseClass}>\n      <SelectComponents.MultiValueLabel\n        {...props}\n        innerProps={{\n          className: `${baseClass}__text`,\n          ...(draggableProps || {}),\n        }}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAClB,SAASC,UAAA,IAAcC,gBAAgB,QAAQ;AAI/C,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,eAAA,GAAsDC,KAAA;EACjE;EACA,MAAM;IAAEC,WAAA,EAAa;MAAEC,WAAA,EAAa;QAAEC;MAAc,CAAE,GAAG,CAAC;IAAC,CAAE,GAAG,CAAC;EAAC,CAAE,GAAGH,KAAA;EAEvE,oBACEI,IAAA,CAAC;IAAIC,SAAA,EAAWP,SAAA;cACd,aAAAM,IAAA,CAACP,gBAAA,CAAiBE,eAAe;MAC9B,GAAGC,KAAK;MACTM,UAAA,EAAY;QACVD,SAAA,EAAW,GAAGP,SAAA,QAAiB;QAC/B,IAAIK,cAAA,IAAkB,CAAC,CAAC;MAC1B;;;AAIR","ignoreList":[]}

package/dist/elements/ReactSelect/MultiValueLabel/index.scss

@@ -1,20 +1,22 @@
 @import '../../../scss/styles.scss';
 
-.multi-value-label {
-  @extend %small;
-  display: flex;
-  align-items: center;
-  padding: 0 base(0.125) 0 base(0.25);
-  max-width: 150px;
-  color: currentColor;
+@layer payload-default {
+  .multi-value-label {
+    @extend %small;
+    display: flex;
+    align-items: center;
+    max-width: 150px;
+    color: currentColor;
+    padding: 0 base(0.4);
 
-  &__text {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
+    &__text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
 
-  &:focus-visible {
-    outline: var(--accessibility-outline);
+    &:focus-visible {
+      outline: var(--accessibility-outline);
+    }
   }
 }

package/dist/elements/ReactSelect/MultiValueRemove/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { XIcon } from '../../../icons/X/index.js';
@@ -6,41 +8,88 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import { Tooltip } from '../../Tooltip/index.js';
 import './index.scss';
 const baseClass = 'multi-value-remove';
-export const MultiValueRemove = (props)=>{
-    const { innerProps: { className, onClick, onTouchEnd } } = props;
-    const [showTooltip, setShowTooltip] = React.useState(false);
-    const { t } = useTranslation();
-    return /*#__PURE__*/ _jsxs("button", {
-        "aria-label": t('general:remove'),
-        className: [
-            baseClass,
-            className
-        ].filter(Boolean).join(' '),
-        onClick: (e)=>{
-            setShowTooltip(false);
-            onClick(e);
-        },
-        onKeyDown: (e)=>{
-            if (e.key === 'Enter') {
-                e.stopPropagation();
-            }
-        },
-        onMouseDown: (e)=>e.stopPropagation(),
-        onMouseEnter: ()=>setShowTooltip(true),
-        onMouseLeave: ()=>setShowTooltip(false),
-        onTouchEnd: onTouchEnd,
-        type: "button",
-        children: [
-            /*#__PURE__*/ _jsx(Tooltip, {
-                className: `${baseClass}__tooltip`,
-                show: showTooltip,
-                children: t('general:remove')
-            }),
-            /*#__PURE__*/ _jsx(XIcon, {
-                className: `${baseClass}__icon`
-            })
-        ]
+export const MultiValueRemove = props => {
+  const $ = _c(12);
+  const {
+    innerProps: t0
+  } = props;
+  const {
+    className,
+    onClick,
+    onTouchEnd
+  } = t0;
+  const [showTooltip, setShowTooltip] = React.useState(false);
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== t || $[1] !== className || $[2] !== onClick || $[3] !== showTooltip || $[4] !== onTouchEnd) {
+    const t2 = t("general:remove");
+    let t3;
+    if ($[6] !== className) {
+      t3 = [baseClass, className].filter(Boolean);
+      $[6] = className;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== onClick) {
+      t4 = e => {
+        setShowTooltip(false);
+        onClick(e);
+      };
+      $[8] = onClick;
+      $[9] = t4;
+    } else {
+      t4 = $[9];
+    }
+    let t5;
+    let t6;
+    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+      t5 = () => setShowTooltip(true);
+      t6 = () => setShowTooltip(false);
+      $[10] = t5;
+      $[11] = t6;
+    } else {
+      t5 = $[10];
+      t6 = $[11];
+    }
+    t1 = _jsxs("button", {
+      "aria-label": t2,
+      className: t3.join(" "),
+      onClick: t4,
+      onKeyDown: _temp,
+      onMouseDown: _temp2,
+      onMouseEnter: t5,
+      onMouseLeave: t6,
+      onTouchEnd,
+      type: "button",
+      children: [_jsx(Tooltip, {
+        className: `${baseClass}__tooltip`,
+        show: showTooltip,
+        children: t("general:remove")
+      }), _jsx(XIcon, {
+        className: `${baseClass}__icon`
+      })]
     });
+    $[0] = t;
+    $[1] = className;
+    $[2] = onClick;
+    $[3] = showTooltip;
+    $[4] = onTouchEnd;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
 };
-
+function _temp(e_0) {
+  if (e_0.key === "Enter") {
+    e_0.stopPropagation();
+  }
+}
+function _temp2(e_1) {
+  return e_1.stopPropagation();
+}
 //# sourceMappingURL=index.js.map

package/dist/elements/ReactSelect/MultiValueRemove/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/ReactSelect/MultiValueRemove/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueRemoveProps } from 'react-select'\n\nimport React, { type JSX } from 'react'\n\nimport type { Option as OptionType } from '../types.js'\n\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'multi-value-remove'\n\nexport const MultiValueRemove: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & MultiValueRemoveProps<OptionType>\n> = (props) => {\n  const {\n    innerProps: { className, onClick, onTouchEnd },\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:remove')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      onClick={(e) => {\n        setShowTooltip(false)\n        onClick(e)\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.stopPropagation()\n        }\n      }}\n      onMouseDown={(e) => e.stopPropagation()}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      onTouchEnd={onTouchEnd}\n      type=\"button\"\n    >\n      <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n        {t('general:remove')}\n      </Tooltip>\n      <XIcon className={`${baseClass}__icon`} />\n    </button>\n  )\n}\n"],"names":["React","XIcon","useTranslation","Tooltip","baseClass","MultiValueRemove","props","innerProps","className","onClick","onTouchEnd","showTooltip","setShowTooltip","useState","t","button","aria-label","filter","Boolean","join","e","onKeyDown","key","stopPropagation","onMouseDown","onMouseEnter","onMouseLeave","type","show"],"mappings":"AAAA;;AAGA,OAAOA,WAAyB,QAAO;AAIvC,SAASC,KAAK,QAAQ,4BAA2B;AACjD,SAASC,cAAc,QAAQ,0CAAyC;AACxE,SAASC,OAAO,QAAQ,yBAAwB;AAChD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,mBAIT,CAACC;IACH,MAAM,EACJC,YAAY,EAAEC,SAAS,EAAEC,OAAO,EAAEC,UAAU,EAAE,EAC/C,GAAGJ;IAEJ,MAAM,CAACK,aAAaC,eAAe,GAAGZ,MAAMa,QAAQ,CAAC;IACrD,MAAM,EAAEC,CAAC,EAAE,GAAGZ;IAEd,qBACE,MAACa;QACCC,cAAYF,EAAE;QACdN,WAAW;YAACJ;YAAWI;SAAU,CAACS,MAAM,CAACC,SAASC,IAAI,CAAC;QACvDV,SAAS,CAACW;YACRR,eAAe;YACfH,QAAQW;QACV;QACAC,WAAW,CAACD;YACV,IAAIA,EAAEE,GAAG,KAAK,SAAS;gBACrBF,EAAEG,eAAe;YACnB;QACF;QACAC,aAAa,CAACJ,IAAMA,EAAEG,eAAe;QACrCE,cAAc,IAAMb,eAAe;QACnCc,cAAc,IAAMd,eAAe;QACnCF,YAAYA;QACZiB,MAAK;;0BAEL,KAACxB;gBAAQK,WAAW,CAAC,EAAEJ,UAAU,SAAS,CAAC;gBAAEwB,MAAMjB;0BAChDG,EAAE;;0BAEL,KAACb;gBAAMO,WAAW,CAAC,EAAEJ,UAAU,MAAM,CAAC;;;;AAG5C,EAAC"}
+{"version":3,"file":"index.js","names":["c","_c","React","XIcon","useTranslation","Tooltip","baseClass","MultiValueRemove","props","$","innerProps","t0","className","onClick","onTouchEnd","showTooltip","setShowTooltip","useState","t","t1","t2","t3","filter","Boolean","t4","e","t5","t6","Symbol","for","_jsxs","join","onKeyDown","_temp","onMouseDown","_temp2","onMouseEnter","onMouseLeave","type","children","_jsx","show","e_0","key","stopPropagation","e_1"],"sources":["../../../../src/elements/ReactSelect/MultiValueRemove/index.tsx"],"sourcesContent":["'use client'\nimport type { MultiValueRemoveProps } from 'react-select'\n\nimport React, { type JSX } from 'react'\n\nimport type { Option as OptionType } from '../types.js'\n\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Tooltip } from '../../Tooltip/index.js'\nimport './index.scss'\n\nconst baseClass = 'multi-value-remove'\n\nexport const MultiValueRemove: React.FC<\n  {\n    innerProps: JSX.IntrinsicElements['button']\n  } & MultiValueRemoveProps<OptionType>\n> = (props) => {\n  const {\n    innerProps: { className, onClick, onTouchEnd },\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n  const { t } = useTranslation()\n\n  return (\n    <button\n      aria-label={t('general:remove')}\n      className={[baseClass, className].filter(Boolean).join(' ')}\n      onClick={(e) => {\n        setShowTooltip(false)\n        onClick(e)\n      }}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.stopPropagation()\n        }\n      }}\n      onMouseDown={(e) => e.stopPropagation()}\n      onMouseEnter={() => setShowTooltip(true)}\n      onMouseLeave={() => setShowTooltip(false)}\n      onTouchEnd={onTouchEnd}\n      type=\"button\"\n    >\n      <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n        {t('general:remove')}\n      </Tooltip>\n      <XIcon className={`${baseClass}__icon`} />\n    </button>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAyB;AAIhC,SAASC,KAAK,QAAQ;AACtB,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,gBAAA,GAITC,KAAA;EAAA,MAAAC,CAAA,GAAAR,EAAA;EACF;IAAAS,UAAA,EAAAC;EAAA,IAEIH,KAAA;EADU;IAAAI,SAAA;IAAAC,OAAA;IAAAC;EAAA,IAAAH,EAAkC;EAGhD,OAAAI,WAAA,EAAAC,cAAA,IAAsCd,KAAA,CAAAe,QAAA,MAAe;EACrD;IAAAC;EAAA,IAAcd,cAAA;EAAA,IAAAe,EAAA;EAAA,IAAAV,CAAA,QAAAS,CAAA,IAAAT,CAAA,QAAAG,SAAA,IAAAH,CAAA,QAAAI,OAAA,IAAAJ,CAAA,QAAAM,WAAA,IAAAN,CAAA,QAAAK,UAAA;IAIE,MAAAM,EAAA,GAAAF,CAAA,CAAE;IAAA,IAAAG,EAAA;IAAA,IAAAZ,CAAA,QAAAG,SAAA;MACHS,EAAA,IAAAf,SAAA,EAAYM,SAAA,EAAAU,MAAA,CAAAC,OAAkB;MAAAd,CAAA,MAAAG,SAAA;MAAAH,CAAA,MAAAY,EAAA;IAAA;MAAAA,EAAA,GAAAZ,CAAA;IAAA;IAAA,IAAAe,EAAA;IAAA,IAAAf,CAAA,QAAAI,OAAA;MAChCW,EAAA,GAAAC,CAAA;QACPT,cAAA,MAAe;QACfH,OAAA,CAAQY,CAAA;MAAA;MACVhB,CAAA,MAAAI,OAAA;MAAAJ,CAAA,MAAAe,EAAA;IAAA;MAAAA,EAAA,GAAAf,CAAA;IAAA;IAAA,IAAAiB,EAAA;IAAA,IAAAC,EAAA;IAAA,IAAAlB,CAAA,SAAAmB,MAAA,CAAAC,GAAA;MAOcH,EAAA,GAAAA,CAAA,KAAMV,cAAA,KAAe;MACrBW,EAAA,GAAAA,CAAA,KAAMX,cAAA,MAAe;MAAAP,CAAA,OAAAiB,EAAA;MAAAjB,CAAA,OAAAkB,EAAA;IAAA;MAAAD,EAAA,GAAAjB,CAAA;MAAAkB,EAAA,GAAAlB,CAAA;IAAA;IAdrCU,EAAA,GAAAW,KAAA,CAAC;MAAA,cACaV,EAAE;MAAAR,SAAA,EACHS,EAA8B,CAAAU,IAAA,CAAc;MAAAlB,OAAA,EAC9CW,EAGT;MAAAQ,SAAA,EAAAC,KAAA;MAAAC,WAAA,EAAAC,MAAA;MAAAC,YAAA,EAOcV,EAAqB;MAAAW,YAAA,EACrBV,EAAqB;MAAAb,UAAA;MAAAwB,IAAA,EAE9B;MAAAC,QAAA,GAELC,IAAA,CAAAnC,OAAA;QAAAO,SAAA,EAAoB,GAAAN,SAAA,WAAuB;QAAAmC,IAAA,EAAQ1B,WAAA;QAAAwB,QAAA,EAChDrB,CAAA,CAAE;MAAA,C,GAELsB,IAAA,CAAArC,KAAA;QAAAS,SAAA,EAAkB,GAAAN,SAAA;MAAoB,C;;;;;;;;;;;SArBxCa,E;CAwBJ;AAjCI,SAAAc,MAAAS,GAAA;EAAA,IAiBQjB,GAAA,CAAAkB,GAAA,KAAU;IACZlB,GAAA,CAAAmB,eAAA,CAAiB;EAAA;AAAA;AAlBvB,SAAAT,OAAAU,GAAA;EAAA,OAqBsBpB,GAAA,CAAAmB,eAAA,CAAiB;AAAA","ignoreList":[]}

package/dist/elements/ReactSelect/MultiValueRemove/index.scss

@@ -1,24 +1,26 @@
 @import '../../../scss/styles.scss';
 
-.multi-value-remove {
-  cursor: pointer;
-  width: base(0.75);
-  height: base(0.75);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  background-color: transparent;
-  border: none;
-  padding: 0;
+@layer payload-default {
+  .multi-value-remove {
+    cursor: pointer;
+    width: base(1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    color: inherit;
 
-  &:hover {
-    color: var(--theme-elevation-800);
-    background: var(--theme-error-150);
-  }
+    &:hover {
+      color: var(--theme-elevation-800);
+      background: var(--theme-elevation-150);
+    }
 
-  &__icon {
-    width: 100%;
-    height: 100%;
+    &__icon {
+      width: 100%;
+      height: 100%;
+    }
   }
 }

package/dist/elements/ReactSelect/SingleValue/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/SingleValue/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAEpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAIzC,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAc1D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/SingleValue/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AAEpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAIzC,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAa1D,CAAA"}

package/dist/elements/ReactSelect/SingleValue/index.js

@@ -1,20 +1,20 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { components as SelectComponents } from 'react-select';
 const baseClass = 'react-select--single-value';
-export const SingleValue = (props)=>{
-    const { children, className } = props;
-    return /*#__PURE__*/ _jsx(React.Fragment, {
-        children: /*#__PURE__*/ _jsx(SelectComponents.SingleValue, {
-            ...props,
-            className: [
-                baseClass,
-                className
-            ].filter(Boolean).join(' '),
-            children: children
-        })
-    });
+export const SingleValue = props => {
+  const {
+    children,
+    className
+  } = props;
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: /*#__PURE__*/_jsx(SelectComponents.SingleValue, {
+      ...props,
+      className: [baseClass, className].filter(Boolean).join(' '),
+      children: children
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/ReactSelect/SingleValue/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/ReactSelect/SingleValue/index.tsx"],"sourcesContent":["'use client'\nimport type { SingleValueProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nconst baseClass = 'react-select--single-value'\n\nexport const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {\n  const { children, className } = props\n\n  return (\n    <React.Fragment>\n      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}\n      <SelectComponents.SingleValue\n        {...props}\n        className={[baseClass, className].filter(Boolean).join(' ')}\n      >\n        {children}\n      </SelectComponents.SingleValue>\n    </React.Fragment>\n  )\n}\n"],"names":["React","components","SelectComponents","baseClass","SingleValue","props","children","className","Fragment","filter","Boolean","join"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AACzB,SAASC,cAAcC,gBAAgB,QAAQ,eAAc;AAI7D,MAAMC,YAAY;AAElB,OAAO,MAAMC,cAAkD,CAACC;IAC9D,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGF;IAEhC,qBACE,KAACL,MAAMQ,QAAQ;kBAEb,cAAA,KAACN,iBAAiBE,WAAW;YAC1B,GAAGC,KAAK;YACTE,WAAW;gBAACJ;gBAAWI;aAAU,CAACE,MAAM,CAACC,SAASC,IAAI,CAAC;sBAEtDL;;;AAIT,EAAC"}
+{"version":3,"file":"index.js","names":["React","components","SelectComponents","baseClass","SingleValue","props","children","className","_jsx","Fragment","filter","Boolean","join"],"sources":["../../../../src/elements/ReactSelect/SingleValue/index.tsx"],"sourcesContent":["'use client'\nimport type { SingleValueProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nconst baseClass = 'react-select--single-value'\n\nexport const SingleValue: React.FC<SingleValueProps<Option>> = (props) => {\n  const { children, className } = props\n\n  return (\n    <React.Fragment>\n      <SelectComponents.SingleValue\n        {...props}\n        className={[baseClass, className].filter(Boolean).join(' ')}\n      >\n        {children}\n      </SelectComponents.SingleValue>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAClB,SAASC,UAAA,IAAcC,gBAAgB,QAAQ;AAI/C,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAAmDC,KAAA;EAC9D,MAAM;IAAEC,QAAQ;IAAEC;EAAS,CAAE,GAAGF,KAAA;EAEhC,oBACEG,IAAA,CAACR,KAAA,CAAMS,QAAQ;cACb,aAAAD,IAAA,CAACN,gBAAA,CAAiBE,WAAW;MAC1B,GAAGC,KAAK;MACTE,SAAA,EAAW,CAACJ,SAAA,EAAWI,SAAA,CAAU,CAACG,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;gBAEtDN;;;AAIT","ignoreList":[]}

package/dist/elements/ReactSelect/ValueContainer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,GAAG,CAAC,CAUrE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAA;AAEvD,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,GAAG,CAAC,CASrE,CAAA"}

package/dist/elements/ReactSelect/ValueContainer/index.js

@@ -1,19 +1,23 @@
 'use client';
+
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { components as SelectComponents } from 'react-select';
 import './index.scss';
 const baseClass = 'value-container';
-export const ValueContainer = (props)=>{
-    // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
-    const { selectProps: { customProps } = {} } = props;
-    return /*#__PURE__*/ _jsx("div", {
-        className: baseClass,
-        ref: customProps?.droppableRef,
-        children: /*#__PURE__*/ _jsx(SelectComponents.ValueContainer, {
-            ...props
-        })
-    });
+export const ValueContainer = props => {
+  // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module
+  const {
+    selectProps: {
+      customProps
+    } = {}
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    ref: customProps?.droppableRef,
+    children: /*#__PURE__*/_jsx(SelectComponents.ValueContainer, {
+      ...props
+    })
+  });
 };
-
 //# sourceMappingURL=index.js.map

package/dist/elements/ReactSelect/ValueContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"sourcesContent":["'use client'\nimport type { ValueContainerProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nimport './index.scss'\n\nconst baseClass = 'value-container'\n\nexport const ValueContainer: React.FC<ValueContainerProps<Option, any>> = (props) => {\n  // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\n  const { selectProps: { customProps } = {} } = props\n\n  return (\n    <div className={baseClass} ref={customProps?.droppableRef}>\n      {/* @ts-expect-error // TODO Fix this - Broke with React 19 types */}\n      <SelectComponents.ValueContainer {...props} />\n    </div>\n  )\n}\n"],"names":["React","components","SelectComponents","baseClass","ValueContainer","props","selectProps","customProps","div","className","ref","droppableRef"],"mappings":"AAAA;;AAGA,OAAOA,WAAW,QAAO;AACzB,SAASC,cAAcC,gBAAgB,QAAQ,eAAc;AAI7D,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,iBAA6D,CAACC;IACzE,8FAA8F;IAC9F,MAAM,EAAEC,aAAa,EAAEC,WAAW,EAAE,GAAG,CAAC,CAAC,EAAE,GAAGF;IAE9C,qBACE,KAACG;QAAIC,WAAWN;QAAWO,KAAKH,aAAaI;kBAE3C,cAAA,KAACT,iBAAiBE,cAAc;YAAE,GAAGC,KAAK;;;AAGhD,EAAC"}
+{"version":3,"file":"index.js","names":["React","components","SelectComponents","baseClass","ValueContainer","props","selectProps","customProps","_jsx","className","ref","droppableRef"],"sources":["../../../../src/elements/ReactSelect/ValueContainer/index.tsx"],"sourcesContent":["'use client'\nimport type { ValueContainerProps } from 'react-select'\n\nimport React from 'react'\nimport { components as SelectComponents } from 'react-select'\n\nimport type { Option } from '../types.js'\n\nimport './index.scss'\n\nconst baseClass = 'value-container'\n\nexport const ValueContainer: React.FC<ValueContainerProps<Option, any>> = (props) => {\n  // @ts-expect-error-next-line // TODO Fix this - moduleResolution 16 breaks our declare module\n  const { selectProps: { customProps } = {} } = props\n\n  return (\n    <div className={baseClass} ref={customProps?.droppableRef}>\n      <SelectComponents.ValueContainer {...props} />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAClB,SAASC,UAAA,IAAcC,gBAAgB,QAAQ;AAI/C,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,cAAA,GAA8DC,KAAA;EACzE;EACA,MAAM;IAAEC,WAAA,EAAa;MAAEC;IAAW,CAAE,GAAG,CAAC;EAAC,CAAE,GAAGF,KAAA;EAE9C,oBACEG,IAAA,CAAC;IAAIC,SAAA,EAAWN,SAAA;IAAWO,GAAA,EAAKH,WAAA,EAAaI,YAAA;cAC3C,aAAAH,IAAA,CAACN,gBAAA,CAAiBE,cAAc;MAAE,GAAGC;;;AAG3C","ignoreList":[]}

package/dist/elements/ReactSelect/ValueContainer/index.scss

@@ -1,38 +1,33 @@
 @import '../../../scss/styles.scss';
 
-.value-container {
-  flex-grow: 1;
-  min-width: 0;
+@layer payload-default {
+  .value-container {
+    flex-grow: 1;
+    min-width: 0;
 
-  .rs__value-container {
-    padding: base(0.25) 0;
-    min-height: base(1.5);
-    overflow: visible;
+    .rs__value-container {
+      overflow: visible;
+      padding: 2px;
+      gap: 2px;
 
-    > * {
-      margin: 0;
-      padding-top: 0;
-      padding-bottom: 0;
-      color: currentColor;
-
-      .field-label {
+      > * {
+        margin: 0;
+        padding-top: 0;
         padding-bottom: 0;
-      }
-    }
+        color: currentColor;
 
-    &--is-multi {
-      margin-left: - base(0.25);
-      width: calc(100% + base(0.5));
-      padding-top: base(0.25);
-      padding-bottom: base(0.25);
-      padding-left: base(0.25);
-
-      .rs__multi-value {
-        margin: calc(#{base(0.125)} - #{$style-stroke-width-s * 2});
+        .field-label {
+          padding-bottom: 0;
+        }
       }
 
-      &.rs__value-container--has-value {
-        padding-left: 0;
+      &--is-multi {
+        width: calc(100% + base(0.25));
+
+        &.rs__value-container--has-value {
+          padding: 0;
+          margin-inline-start: -4px;
+        }
       }
     }
   }

package/dist/elements/ReactSelect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAcxC,OAAO,cAAc,CAAA;AA8LrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ReactSelect/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAI/C,OAAO,KAAK,EAAU,uBAAuB,EAAE,MAAM,YAAY,CAAA;AACjE,YAAY,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAQxC,OAAO,cAAc,CAAA;AAwMrB,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAQzD,CAAA"}