@luscii-healthtech/web-ui 55.0.1 → 55.2.0

package/dist/index.development.js

@@ -551,6 +551,9 @@ var CrossInCircleIcon = IconWrapper(SvgCrossInCircleIcon);
 const SvgCrossInFilledCircleIcon = (props) => jsxRuntime.jsxs("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: [jsxRuntime.jsx("path", { fill: "currentColor", fillOpacity: 0.2, d: "M0 8a8 8 0 0 1 8-8h8a8 8 0 0 1 8 8v8a8 8 0 0 1-8 8H8a8 8 0 0 1-8-8z" }), jsxRuntime.jsx("path", { fill: "currentColor", d: "m12 13.054-5.073 5.073a.72.72 0 0 1-.522.212.7.7 0 0 1-.532-.212.72.72 0 0 1-.217-.527q0-.31.217-.527L10.946 12 5.873 6.927a.73.73 0 0 1-.212-.522.7.7 0 0 1 .212-.532.72.72 0 0 1 .527-.217q.31 0 .527.217L12 10.946l5.073-5.073a.72.72 0 0 1 .522-.212.7.7 0 0 1 .532.212q.217.217.217.527a.72.72 0 0 1-.217.527L13.054 12l5.073 5.073q.208.208.212.522a.7.7 0 0 1-.212.532.72.72 0 0 1-.527.217.72.72 0 0 1-.527-.217z" })] }));
 var CrossInFilledCircleIcon = IconWrapper(SvgCrossInFilledCircleIcon);
 
+const SvgDashboardIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M13.25 8.092V4.409q0-.392.26-.65a.88.88 0 0 1 .647-.259h5.44q.386 0 .644.259a.88.88 0 0 1 .259.65v3.683q0 .39-.26.65a.88.88 0 0 1-.647.258h-5.44a.88.88 0 0 1-.903-.909M3.5 11.6V4.4q0-.383.26-.641a.88.88 0 0 1 .647-.259h5.44q.386 0 .644.259a.87.87 0 0 1 .259.641v7.2a.87.87 0 0 1-.26.641.88.88 0 0 1-.647.259h-5.44a.87.87 0 0 1-.644-.259.87.87 0 0 1-.259-.641m9.75 8v-7.2q0-.383.26-.641a.88.88 0 0 1 .647-.259h5.44q.386 0 .644.259a.87.87 0 0 1 .259.641v7.2a.87.87 0 0 1-.26.641.88.88 0 0 1-.647.259h-5.44a.87.87 0 0 1-.644-.259.87.87 0 0 1-.259-.641m-9.75-.009v-3.683q0-.39.26-.65A.88.88 0 0 1 4.408 15h5.44q.386 0 .644.259a.88.88 0 0 1 .259.65v3.682a.88.88 0 0 1-.26.65.88.88 0 0 1-.647.259h-5.44a.88.88 0 0 1-.903-.909M5 11h4.25V5H5zm9.75 8H19v-6h-4.25zm0-11.5H19V5h-4.25zM5 19h4.25v-2.5H5z" }) }));
+var DashboardIcon = IconWrapper(SvgDashboardIcon);
+
 const SvgDatabaseIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M12 20.5q-3.64 0-6.07-1.028-2.43-1.027-2.43-2.568V7q0-1.448 2.488-2.474Q8.478 3.5 12 3.5q3.523 0 6.012 1.026T20.5 7v9.904q0 1.54-2.43 2.568T12 20.5m0-11.542q2.187 0 4.403-.619 2.216-.618 2.568-1.333-.342-.735-2.541-1.37a15.9 15.9 0 0 0-8.844-.018q-2.188.618-2.576 1.35.378.75 2.556 1.37t4.434.62m0 5.003q1.041 0 2.025-.1a17 17 0 0 0 1.882-.292 13 13 0 0 0 1.68-.477q.782-.284 1.413-.644V8.9q-.63.36-1.413.644t-1.68.477q-.898.193-1.882.292-.984.1-2.025.1-1.06 0-2.064-.104-1.005-.106-1.898-.297a13 13 0 0 1-1.662-.473A8 8 0 0 1 5 8.9v3.55q.606.358 1.376.639.77.279 1.662.472.893.192 1.898.297T12 13.96M12 19a18 18 0 0 0 2.39-.16 15 15 0 0 0 2.135-.439q.962-.277 1.622-.645.66-.367.853-.771v-3.037q-.63.36-1.413.644t-1.68.477q-.898.193-1.882.292-.984.1-2.025.1-1.06 0-2.064-.104-1.005-.106-1.898-.297a13 13 0 0 1-1.662-.473A8 8 0 0 1 5 13.948V17q.192.414.845.768t1.615.633a15 15 0 0 0 2.142.438q1.18.162 2.398.161" }) }));
 var DatabaseIcon = IconWrapper(SvgDatabaseIcon);
 
@@ -659,7 +662,7 @@ var LinkIcon = IconWrapper(SvgLinkIcon);
 const SvgListDescIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M4.25 17.5a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.25 16h3.875q.319 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535a.73.73 0 0 1-.534.215zm0-4.75a.73.73 0 0 1-.534-.216A.73.73 0 0 1 3.5 12q0-.32.216-.534a.73.73 0 0 1 .534-.216h9.683q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.534a.73.73 0 0 1-.534.216zm0-4.75a.73.73 0 0 1-.534-.216.73.73 0 0 1-.216-.534q0-.32.216-.535A.73.73 0 0 1 4.25 6.5h15.5q.318 0 .534.216a.73.73 0 0 1 .216.534q0 .32-.216.535A.73.73 0 0 1 19.75 8z" }) }));
 var ListDescIcon = IconWrapper(SvgListDescIcon);
 
-const SvgListIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "currentColor", viewBox: "0 -960 960 960" }, props, { children: jsxRuntime.jsx("path", { d: "M322.33-289.23q15.05 0 25.21-10.18 10.15-10.18 10.15-25.23t-10.18-25.21Q337.33-360 322.28-360t-25.2 10.18q-10.16 10.18-10.16 25.23t10.18 25.2q10.19 10.16 25.23 10.16m0-155.39q15.05 0 25.21-10.18 10.15-10.18 10.15-25.23t-10.18-25.2-25.23-10.15-25.2 10.18q-10.16 10.18-10.16 25.23t10.18 25.2q10.19 10.15 25.23 10.15m0-155.38q15.05 0 25.21-10.18 10.15-10.18 10.15-25.23t-10.18-25.2q-10.18-10.16-25.23-10.16t-25.2 10.18q-10.16 10.18-10.16 25.23t10.18 25.21Q307.29-600 322.33-600m151.52 305.38h167.69q12.75 0 21.37-8.63 8.63-8.62 8.63-21.38 0-12.75-8.63-21.37-8.62-8.61-21.37-8.61H473.85q-12.75 0-21.38 8.62-8.62 8.63-8.62 21.39 0 12.75 8.62 21.37 8.63 8.61 21.38 8.61m0-155.38h167.69q12.75 0 21.37-8.63 8.63-8.63 8.63-21.38 0-12.76-8.63-21.37-8.62-8.62-21.37-8.62H473.85q-12.75 0-21.38 8.63-8.62 8.63-8.62 21.38 0 12.76 8.62 21.37 8.63 8.62 21.38 8.62m0-155.39h167.69q12.75 0 21.37-8.62 8.63-8.63 8.63-21.39 0-12.75-8.63-21.37-8.62-8.61-21.37-8.61H473.85q-12.75 0-21.38 8.63-8.62 8.62-8.62 21.38 0 12.75 8.62 21.37 8.63 8.61 21.38 8.61M212.31-140Q182-140 161-161t-21-51.31v-535.38Q140-778 161-799t51.31-21h535.38Q778-820 799-799t21 51.31v535.38Q820-182 799-161t-51.31 21zm0-60h535.38q4.62 0 8.46-3.85 3.85-3.84 3.85-8.46v-535.38q0-4.62-3.85-8.46-3.84-3.85-8.46-3.85H212.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v535.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85M200-760v560z" }) }));
+const SvgListIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M9.308 18.75v-1.5H20.5v1.5zm0-6v-1.5H20.5v1.5zm0-6v-1.5H20.5v1.5zM5.164 19.664q-.687 0-1.175-.489A1.6 1.6 0 0 1 3.5 18q0-.686.489-1.175a1.6 1.6 0 0 1 1.175-.488q.686 0 1.174.488.489.49.489 1.175 0 .687-.489 1.175a1.6 1.6 0 0 1-1.174.489m0-6q-.687 0-1.175-.489A1.6 1.6 0 0 1 3.5 12q0-.686.489-1.174a1.6 1.6 0 0 1 1.175-.49q.686 0 1.174.49.489.488.489 1.174 0 .687-.489 1.175a1.6 1.6 0 0 1-1.174.489m0-6q-.687 0-1.175-.489A1.6 1.6 0 0 1 3.5 6q0-.686.489-1.174a1.6 1.6 0 0 1 1.175-.49q.686 0 1.174.49.489.488.489 1.174 0 .687-.489 1.175a1.6 1.6 0 0 1-1.174.489" }) }));
 var ListIcon = IconWrapper(SvgListIcon);
 
 const SvgLockIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M6.308 21.5q-.749 0-1.278-.53a1.74 1.74 0 0 1-.53-1.278v-9.384q0-.748.53-1.278t1.278-.53H7.5v-2q0-1.873 1.313-3.186Q10.127 2 12 2t3.187 1.314T16.5 6.5v2h1.192q.749 0 1.278.53.53.53.53 1.278v9.384q0 .749-.53 1.278-.53.53-1.278.53zm0-1.5h11.384a.3.3 0 0 0 .221-.087.3.3 0 0 0 .087-.22v-9.385a.3.3 0 0 0-.087-.221.3.3 0 0 0-.22-.087H6.307a.3.3 0 0 0-.221.087.3.3 0 0 0-.087.22v9.385a.3.3 0 0 0 .087.221.3.3 0 0 0 .22.087M12 16.75q.729 0 1.24-.51.51-.51.51-1.24 0-.729-.51-1.24-.511-.51-1.24-.51-.73 0-1.24.51-.51.511-.51 1.24 0 .73.51 1.24t1.24.51M9 8.5h6v-2q0-1.25-.875-2.125A2.9 2.9 0 0 0 12 3.5q-1.25 0-2.125.875A2.9 2.9 0 0 0 9 6.5z" }) }));
@@ -779,6 +782,9 @@ var StopwatchIcon = IconWrapper(SvgStopwatchIcon);
 const SvgSummaryIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M8 8.904a.87.87 0 0 0 .64-.264.87.87 0 0 0 .264-.64.87.87 0 0 0-.264-.64.87.87 0 0 0-.64-.264.87.87 0 0 0-.64.263.87.87 0 0 0-.264.641q0 .377.263.64.264.264.641.264m0 4a.87.87 0 0 0 .64-.264.87.87 0 0 0 .264-.64.87.87 0 0 0-.264-.64.87.87 0 0 0-.64-.264.87.87 0 0 0-.64.264.87.87 0 0 0-.264.64q0 .377.263.64.264.264.641.264m0 4a.87.87 0 0 0 .64-.264.87.87 0 0 0 .264-.64.87.87 0 0 0-.264-.64.87.87 0 0 0-.64-.264.87.87 0 0 0-.64.264.87.87 0 0 0-.264.64q0 .377.263.64.264.264.641.264M5.308 20.5q-.758 0-1.283-.525a1.75 1.75 0 0 1-.525-1.283V5.308q0-.758.525-1.283T5.308 3.5h9.732q.362 0 .696.14t.58.387l3.657 3.658q.246.246.387.58.14.333.14.695v9.732q0 .758-.525 1.283t-1.283.525zm0-1.5h13.384a.3.3 0 0 0 .221-.087.3.3 0 0 0 .087-.22V9h-3.096a.88.88 0 0 1-.645-.259.88.88 0 0 1-.259-.645V5H5.308a.3.3 0 0 0-.221.087.3.3 0 0 0-.087.22v13.385a.3.3 0 0 0 .087.221.3.3 0 0 0 .22.087" }) }));
 var SummaryIcon = IconWrapper(SvgSummaryIcon);
 
+const SvgSwapIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "m6.387 18.597 1.293 1.292a.7.7 0 0 1 .22.522.77.77 0 0 1-.22.532.76.76 0 0 1-.535.24.7.7 0 0 1-.534-.225L4.13 18.48a.83.83 0 0 1-.255-.632q0-.18.058-.337a.8.8 0 0 1 .198-.296l2.479-2.479a.7.7 0 0 1 .53-.22q.306.003.539.236.217.232.225.526a.7.7 0 0 1-.225.527l-1.293 1.293h10.458a.3.3 0 0 0 .221-.087.3.3 0 0 0 .087-.221v-2.942q0-.32.215-.535a.73.73 0 0 1 .535-.215q.319 0 .535.215a.73.73 0 0 1 .215.535v2.942q0 .749-.53 1.278-.53.53-1.278.53zM17.611 6.904H7.153a.3.3 0 0 0-.221.087.3.3 0 0 0-.087.221v2.942a.73.73 0 0 1-.215.535.73.73 0 0 1-.535.215.73.73 0 0 1-.534-.215.73.73 0 0 1-.216-.535V7.212q0-.748.53-1.278t1.278-.53H17.61l-1.293-1.292a.7.7 0 0 1-.22-.522.77.77 0 0 1 .22-.532.76.76 0 0 1 .535-.24q.302-.007.534.225l2.48 2.479a.83.83 0 0 1 .255.632.83.83 0 0 1-.256.633l-2.479 2.479a.7.7 0 0 1-.53.22.75.75 0 0 1-.539-.235.78.78 0 0 1-.225-.527.7.7 0 0 1 .225-.527z" }) }));
+var SwapIcon = IconWrapper(SvgSwapIcon);
+
 const SvgTadaIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "m5.271 18.7 7.05-2.5-4.55-4.55zM22.342 7.275a.55.55 0 0 1-.414.187.57.57 0 0 1-.415-.177l-.065-.066a1.35 1.35 0 0 0-.99-.407q-.583 0-.99.407l-5.066 5.066a.6.6 0 0 1-.414.181.57.57 0 0 1-.425-.181.58.58 0 0 1-.186-.42.58.58 0 0 1 .186-.419l5.066-5.065a2.48 2.48 0 0 1 1.819-.752q1.068 0 1.82.752l.074.075a.56.56 0 0 1 0 .819M9.88 4.4a.58.58 0 0 1 .42-.187.58.58 0 0 1 .418.187l.212.212q.8.8.8 1.919 0 1.12-.8 1.919l-.18.18a.6.6 0 0 1-.415.183.57.57 0 0 1-.424-.182.58.58 0 0 1-.187-.42.58.58 0 0 1 .187-.419l.18-.18q.447-.447.447-1.081 0-.635-.447-1.081l-.211-.212a.6.6 0 0 1-.182-.414.57.57 0 0 1 .182-.424m3.858-1.73a.58.58 0 0 1 .419-.187.58.58 0 0 1 .419.186l1.065 1.066q.762.761.762 1.828t-.762 1.83l-3.065 3.065a.6.6 0 0 1-.414.181.57.57 0 0 1-.425-.181.58.58 0 0 1-.186-.42.58.58 0 0 1 .186-.419l3.066-3.065q.408-.408.408-.99 0-.584-.408-.99l-1.065-1.066a.6.6 0 0 1-.182-.415.57.57 0 0 1 .181-.424m7.115 11.441a.58.58 0 0 1-.42.187.58.58 0 0 1-.419-.187l-.777-.776a1.52 1.52 0 0 0-1.115-.456q-.66 0-1.115.456l-.777.776a.6.6 0 0 1-.415.182.57.57 0 0 1-.424-.181.58.58 0 0 1-.186-.42.58.58 0 0 1 .186-.419l.777-.777q.81-.81 1.954-.81t1.954.81l.777.777a.6.6 0 0 1 .182.415.57.57 0 0 1-.182.423M3.43 19.365l3.275-9.105a.93.93 0 0 1 .349-.452.92.92 0 0 1 .841-.095q.156.06.296.2l5.866 5.866q.14.14.2.296a.92.92 0 0 1-.095.841.93.93 0 0 1-.452.35L4.606 20.54a.8.8 0 0 1-.522.033.99.99 0 0 1-.686-.686.8.8 0 0 1 .033-.522" }) }));
 var TadaIcon = IconWrapper(SvgTadaIcon);
 
@@ -858,6 +864,7 @@ var Icons = /*#__PURE__*/Object.freeze({
     CrossIcon: CrossIcon,
     CrossInCircleIcon: CrossInCircleIcon,
     CrossInFilledCircleIcon: CrossInFilledCircleIcon,
+    DashboardIcon: DashboardIcon,
     DatabaseIcon: DatabaseIcon,
     DeleteIcon: TrashBinIcon,
     DownArrowIcon: ChevronDownIcon,
@@ -964,6 +971,7 @@ var Icons = /*#__PURE__*/Object.freeze({
     StatusStoppedColoredIcon: StatusStoppedColoredIcon,
     StopwatchIcon: StopwatchIcon,
     SummaryIcon: SummaryIcon,
+    SwapIcon: SwapIcon,
     TadaIcon: TadaIcon,
     TaskIcon: TaskIcon,
     ThresholdIcon: ThresholdIcon,
@@ -4463,16 +4471,50 @@ function SectionItemWithContent(props) {
 var css_248z$2 = ".customized-select [class*=MenuList] [class*=option]::after {\n  position: absolute;\n  content: \"\";\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E    %3Cg transform%3D%22translate(1.5%2C 0.5)%22%3E        %3Cpath fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22%230074DD%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22 d%3D%22M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  right: 12px;\n  height: 1rem;\n  width: 1rem;\n}";
 styleInject(css_248z$2);
 
-const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(ChevronDownIcon, {}) }));
+const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: props.isMulti ? jsxRuntime.jsx(ChevronDoubleIcon, {}) : jsxRuntime.jsx(ChevronDownIcon, {}) }));
 
 const SelectLoadingIndicator = (props) => jsxRuntime.jsx(LoadingIndicator, Object.assign({ asSpinner: true, spinnerColor: "gray" }, props.innerProps, { style: props.getStyles("loadingIndicator", props) }));
 
+const SelectOptionAvatar = ({ avatar }) => {
+  var _a, _b;
+  return jsxRuntime.jsx(Avatar, {
+    size: "xsmall",
+    color: avatar.isSelf ? "primary" : "slate",
+    // First code point + combining marks, so a decomposed "Ángela" keeps its accent.
+    initials: (_b = (_a = avatar.initials.trim().match(/^.\p{M}*/u)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "",
+    src: avatar.src,
+    alt: avatar.alt,
+    className: "ui:shrink-0 ui:border ui:border-solid ui:border-border-neutral-secondary-default"
+  });
+};
+
+const SelectMultiValueLabel = (props) => {
+  var _a;
+  const avatar = (_a = props.data) === null || _a === void 0 ? void 0 : _a.avatar;
+  return jsxRuntime.jsx(ReactSelect.components.MultiValueLabel, Object.assign({}, props, { children: avatar ? jsxRuntime.jsxs("span", { className: "ui:flex ui:items-center ui:gap-f_base", children: [jsxRuntime.jsx(SelectOptionAvatar, { avatar }), props.children] }) : props.children }));
+};
+
+const SelectOption = (props) => {
+  var _a;
+  const avatar = (_a = props.data) === null || _a === void 0 ? void 0 : _a.avatar;
+  return jsxRuntime.jsx(ReactSelect.components.Option, Object.assign({}, props, { children: props.isMulti && avatar ? jsxRuntime.jsxs("span", { className: "ui:flex ui:items-center ui:gap-f_base", children: [jsxRuntime.jsx(SelectOptionAvatar, { avatar }), props.children] }) : props.children }));
+};
+
+const MULTI_FONT_SIZE = "14px";
+const MULTI_LINE_HEIGHT = "var(--ui-semantic-size-m, 20px)";
+const MULTI_MIN_HEIGHT = "44px";
+const RADIUS_S = "var(--ui-semantic-radius-s, 4px)";
+const SPACING_XS = "var(--ui-semantic-spacing-xs, 2px)";
+const SPACING_S = "var(--ui-semantic-spacing-s, 4px)";
+const SPACING_BASE = "var(--ui-semantic-spacing-base, 8px)";
+const SPACING_M = "var(--ui-semantic-spacing-m, 12px)";
 function generateCustomStyles(hasError) {
   return {
     option: (baseStyles, state) => {
       return Object.assign(Object.assign({}, baseStyles), {
         fontWeight: state.isSelected ? "bold" : "normal",
-        fontSize: "14px",
+        fontSize: state.isMulti ? MULTI_FONT_SIZE : "14px",
+        lineHeight: state.isMulti ? MULTI_LINE_HEIGHT : void 0,
         // tailwind blue-50
         backgroundColor: state.isFocused ? "#F2FAFD" : "none",
         color: "inherit",
@@ -4496,30 +4538,55 @@ function generateCustomStyles(hasError) {
     input: (baseStyles) => {
       return Object.assign(Object.assign({}, baseStyles), { padding: 0, margin: 0 });
     },
-    multiValue: (baseStyles) => {
+    multiValue: (baseStyles, state) => {
+      var _a;
+      const hasAvatar = Boolean((_a = state.data) === null || _a === void 0 ? void 0 : _a.avatar);
       return Object.assign(Object.assign({}, baseStyles), {
-        // background-info-primary-default (blue-300)
-        backgroundColor: "#d7e3fb",
-        borderRadius: "4px",
-        lineHeight: "1rem"
+        backgroundColor: hasAvatar ? "var(--ui-color-background-neutral-secondary-default, #ffffff)" : "var(--ui-color-background-info-primary-default, #d7e3fb)",
+        border: hasAvatar ? "1px solid var(--ui-color-border-neutral-secondary-default, #cbd5e1)" : "none",
+        borderRadius: RADIUS_S,
+        // Clip the children so their backgrounds respect the corner radius.
+        overflow: "hidden",
+        margin: 0
       });
     },
-    multiValueLabel: (baseStyles) => {
+    multiValueLabel: (baseStyles, state) => {
+      var _a;
+      const hasAvatar = Boolean((_a = state.data) === null || _a === void 0 ? void 0 : _a.avatar);
       return Object.assign(Object.assign({}, baseStyles), {
-        // text-info-primary-default (brand-900)
-        color: "#112d9c",
-        fontSize: "14px"
+        color: hasAvatar ? "var(--ui-color-text-neutral-primary-default, #162130)" : "var(--ui-color-text-info-primary-default, #112d9c)",
+        fontSize: MULTI_FONT_SIZE,
+        lineHeight: MULTI_LINE_HEIGHT,
+        // Shorthand resets react-select's narrower `paddingLeft` default.
+        // No avatar → more leading space, nothing holds the label off the edge.
+        padding: `${SPACING_S} ${SPACING_S} ${SPACING_S} ${hasAvatar ? SPACING_BASE : SPACING_M}`
       });
     },
-    multiValueRemove: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { color: "#112d9c", borderRadius: "0 4px 4px 0", "&:hover": {
-        // background-info-primary-hovered (blue-500)
-        backgroundColor: "#b3cafc",
-        color: "#112d9c"
-      } });
+    multiValueRemove: (baseStyles, state) => {
+      var _a;
+      const hasAvatar = Boolean((_a = state.data) === null || _a === void 0 ? void 0 : _a.avatar);
+      const color = hasAvatar ? "var(--ui-color-icon-brand-primary-default, #1e40af)" : "var(--ui-color-text-info-primary-default, #112d9c)";
+      return Object.assign(Object.assign({}, baseStyles), {
+        color,
+        // react-select hardcodes a 14px cross here (its ClearIndicator gets 20).
+        // Resize to the design's 20px via the SVG, and drop the vertical padding
+        // so the button's 24px content box stays under the 28px label and the
+        // tag height — and so the control height — is unchanged. The button is a
+        // stretched flex child, so the hit area is still the full 28px.
+        padding: `${SPACING_XS} ${SPACING_S}`,
+        "& svg": { width: "20px", height: "20px" },
+        borderRadius: 0,
+        "&:hover": {
+          backgroundColor: hasAvatar ? "var(--ui-color-background-neutral-primary-default, #f5f7fa)" : "var(--ui-color-background-info-primary-hovered, #b3cafc)",
+          color
+        }
+      });
     },
-    valueContainer: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { padding: ".5rem", margin: 0 });
+    valueContainer: (baseStyles, state) => {
+      return Object.assign(Object.assign(Object.assign({}, baseStyles), { margin: 0 }), state.isMulti ? {
+        gap: SPACING_BASE,
+        padding: `${SPACING_BASE} ${SPACING_BASE} ${SPACING_BASE} ${SPACING_M}`
+      } : { padding: ".5rem" });
     },
     control: (baseStyles, state) => {
       const navyBlue = "rgb(30 64 175)";
@@ -4533,19 +4600,20 @@ function generateCustomStyles(hasError) {
       const validatedBorderColor = hasError ? red : defaultBorderColor;
       const defaultOutline = hasError ? lightRedTransparent : darkBlue;
       const validatedOutline = `2px solid ${state.isFocused ? defaultOutline : "transparent"}`;
+      const multiOnly = state.isMulti;
       return Object.assign(Object.assign({}, baseStyles), {
-        fontSize: "14px",
+        fontSize: multiOnly ? MULTI_FONT_SIZE : "14px",
         transition: "border 0.3s ease-in-out",
         // primary outline
-        outline: validatedOutline,
-        outlineOffset: "-2px",
-        borderColor: validatedBorderColor,
+        outline: multiOnly ? void 0 : validatedOutline,
+        outlineOffset: multiOnly ? void 0 : "-2px",
+        borderColor: multiOnly ? hasError ? red : state.isFocused || state.menuIsOpen ? "var(--ui-color-border-neutral-primary-selected, #1e40af)" : "var(--ui-color-border-neutral-secondary-default, #cbd5e1)" : validatedBorderColor,
         borderWidth: "1px !important",
         borderStyle: "solid",
-        borderRadius: "4px",
-        minHeight: state.isMulti ? "44px" : void 0,
-        height: state.isMulti ? void 0 : "44px",
-        boxShadow: `0px 1px 2px ${lightShadow}`,
+        borderRadius: multiOnly ? RADIUS_S : "4px",
+        minHeight: multiOnly ? MULTI_MIN_HEIGHT : void 0,
+        height: multiOnly ? void 0 : "44px",
+        boxShadow: multiOnly ? "none" : `0px 1px 2px ${lightShadow}`,
         "&:hover": {
           borderColor: mediumGray,
           // selector for the chevron
@@ -4557,7 +4625,7 @@ function generateCustomStyles(hasError) {
     },
     // The placeholder has the following css prop: grid-area: 1/1/2/3;
     // And grid-area doesn't work on IE11, so we need to style it slightly different.
-    placeholder: (baseStyles) => Object.assign(Object.assign({}, baseStyles), { fontWeight: 100, color: "#6B7280", margin: 0 }),
+    placeholder: (baseStyles, state) => Object.assign(Object.assign(Object.assign({}, baseStyles), { fontWeight: 100, color: "#6B7280", margin: 0 }), state.isMulti ? { fontSize: MULTI_FONT_SIZE, lineHeight: MULTI_LINE_HEIGHT } : {}),
     singleValue: (baseStyles) => {
       return Object.assign(Object.assign({}, baseStyles), { fontSize: "14px" });
     },
@@ -4631,7 +4699,9 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
     components: {
       SelectContainer: CustomContainer,
       DropdownIndicator: SelectDropdownIndicator,
-      LoadingIndicator: SelectLoadingIndicator
+      LoadingIndicator: SelectLoadingIndicator,
+      MultiValueLabel: SelectMultiValueLabel,
+      Option: SelectOption
     }
   });
   if (isCreatable) {
@@ -7158,6 +7228,7 @@ exports.CopyToClipboardIcon = CopyToClipboardIcon;
 exports.CrossIcon = CrossIcon;
 exports.CrossInCircleIcon = CrossInCircleIcon;
 exports.CrossInFilledCircleIcon = CrossInFilledCircleIcon;
+exports.DashboardIcon = DashboardIcon;
 exports.DatabaseIcon = DatabaseIcon;
 exports.DatePicker = DatePicker;
 exports.DatePickerV2 = DatePicker;
@@ -7345,6 +7416,7 @@ exports.StyledRadio = StyledRadio;
 exports.StyledSelect = StyledSelect;
 exports.StyledUnorderedList = StyledUnorderedList;
 exports.SummaryIcon = SummaryIcon;
+exports.SwapIcon = SwapIcon;
 exports.Switch = Switch;
 exports.Switcher = Switcher;
 exports.TOASTER_TYPE_OPTIONS = TOASTER_TYPE_OPTIONS;