@servicetitan/anvil2-ext-common 0.4.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @servicetitan/anvil2-ext-common
 
+## 0.5.0
+
+### Minor Changes
+
+- [#2386](https://github.com/servicetitan/hammer/pull/2386) [`efd6121`](https://github.com/servicetitan/hammer/commit/efd6121759713cefb12e51387183bc97c0c3aec6) Thanks [@hbartlett-st](https://github.com/hbartlett-st)! - [Suggestions] Add new render-prop component that coordinates highlighting fields populated by a suggestion until they are edited. Exposes `suggestable` and `suggestor` prop-getters plus imperative `markSuggested`, `clearHighlight`, and `isHighlighted` methods.
+
+### Patch Changes
+
+- [#2417](https://github.com/servicetitan/hammer/pull/2417) [`4c60241`](https://github.com/servicetitan/hammer/commit/4c602418f0fb7da06961e76781b44bac02d0a7d0) Thanks [@hbartlett-st](https://github.com/hbartlett-st)! - [Dependencies] Loosen `@servicetitan/anvil2` dependency to `workspace:^` so consumers resolve a caret range instead of a pinned version
+
+- Updated dependencies [[`efd6121`](https://github.com/servicetitan/hammer/commit/efd6121759713cefb12e51387183bc97c0c3aec6), [`58eb789`](https://github.com/servicetitan/hammer/commit/58eb78970e47ffeabbe57a97c345cdbe8edd4a01), [`1c606c5`](https://github.com/servicetitan/hammer/commit/1c606c5f0bd4d7416cb0f4b6fcb409c4b6377d6b), [`efd6121`](https://github.com/servicetitan/hammer/commit/efd6121759713cefb12e51387183bc97c0c3aec6), [`efd6121`](https://github.com/servicetitan/hammer/commit/efd6121759713cefb12e51387183bc97c0c3aec6)]:
+  - @servicetitan/anvil2@3.2.0
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/Suggestions-ChGGcGuO.js

@@ -0,0 +1,47 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+
+const wrap = (handlers, before) => {
+  if (!handlers) {
+    return {};
+  }
+  const out = {};
+  for (const name of Object.keys(handlers)) {
+    const fn = handlers[name];
+    out[name] = (...args) => {
+      before();
+      fn?.(...args);
+    };
+  }
+  return out;
+};
+function Suggestions({ children }) {
+  const [suggested, setSuggested] = useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const registry = useRef(/* @__PURE__ */ new Set());
+  const markSuggested = (keys) => setSuggested(new Set(keys ?? [...registry.current]));
+  const clearHighlight = (key) => setSuggested((prev) => {
+    if (!prev.has(key)) return prev;
+    const next = new Set(prev);
+    next.delete(key);
+    return next;
+  });
+  const api = {
+    suggestable: (key, handlers) => {
+      registry.current.add(key);
+      return {
+        isHighlighted: suggested.has(key),
+        ...wrap(handlers, () => clearHighlight(key))
+      };
+    },
+    suggestor: (handlers, keys) => wrap(handlers, () => markSuggested(keys)),
+    markSuggested,
+    clearHighlight,
+    isHighlighted: (key) => suggested.has(key)
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: children(api) });
+}
+
+export { Suggestions as S };
+//# sourceMappingURL=Suggestions-ChGGcGuO.js.map

package/dist/Suggestions-ChGGcGuO.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Suggestions-ChGGcGuO.js","sources":["../src/components/Suggestions/Suggestions.tsx"],"sourcesContent":["import { ReactNode, useRef, useState } from \"react\";\n\n/* eslint-disable @typescript-eslint/no-explicit-any -- prop getters are\n * intentionally field-agnostic: they wrap whatever change handlers a given\n * field exposes (onChange, onSelectedOptionChange, ...) without caring about\n * their argument shapes. */\ntype Handler = (...args: any[]) => void;\ntype Handlers = Record<string, Handler | undefined>;\n\nexport interface SuggestionsApi {\n  /**\n   * Props for a field that should be highlighted while it holds a suggested\n   * value. Returns `isHighlighted` plus copies of any handlers you pass, each\n   * wrapped to clear the highlight on the first user edit. Pass the handler\n   * under the field's own prop name (`onChange`, `onSelectedOptionChange`, ...).\n   *\n   * @example <TextField {...suggestable(\"city\", { onChange: setCity })} />\n   */\n  suggestable: <O extends Handlers>(\n    key: string,\n    handlers?: O,\n  ) => { isHighlighted: boolean } & O;\n  /**\n   * Props for the field whose selection populates the others. Returns copies of\n   * the handlers you pass, each wrapped to first mark the suggestable fields as\n   * highlighted. Your handler still does the value population.\n   *\n   * @param keys which fields to highlight; defaults to every registered key.\n   * @example <TypeaheadTextField {...suggestor({ onSelectOption: apply })} />\n   */\n  suggestor: <O extends Handlers>(handlers?: O, keys?: string[]) => O;\n  /** Imperatively highlight fields (defaults to every registered key). */\n  markSuggested: (keys?: string[]) => void;\n  /** Imperatively clear a field's highlight. */\n  clearHighlight: (key: string) => void;\n  /** Whether a field is currently holding a suggested value. */\n  isHighlighted: (key: string) => boolean;\n}\n\nexport interface SuggestionsProps {\n  children: (api: SuggestionsApi) => ReactNode;\n}\n\nconst wrap = <O extends Handlers>(\n  handlers: O | undefined,\n  before: () => void,\n): O => {\n  if (!handlers) {\n    return {} as O;\n  }\n\n  const out: Handlers = {};\n  for (const name of Object.keys(handlers)) {\n    const fn = handlers[name];\n    out[name] = (...args) => {\n      before();\n      fn?.(...args);\n    };\n  }\n  return out as O;\n};\n\n/**\n * Coordinates the \"highlight fields populated by a suggestion until edited\"\n * behavior for a group of fields, without per-field state wiring.\n *\n * Relies on the fact that a controlled field's change handler fires only on\n * user input, never when its `value` prop changes programmatically — so we\n * track provenance per field rather than comparing values. A field stays\n * un-highlighted after an edit even if the suggested value is re-entered,\n * because typing still fires the handler.\n *\n * @example\n * <Suggestions>\n *   {({ suggestor, suggestable }) => (\n *     <>\n *       <TypeaheadTextField\n *         {...suggestor({ onSelectOption: (opt) => applyAddress(opt.value) })}\n *         loadOptions={lookupAddresses}\n *       />\n *       <TextField {...suggestable(\"city\", { onChange: handleCity })} />\n *     </>\n *   )}\n * </Suggestions>\n */\nexport function Suggestions({ children }: SuggestionsProps) {\n  const [suggested, setSuggested] = useState<ReadonlySet<string>>(\n    () => new Set(),\n  );\n  const registry = useRef<Set<string>>(new Set());\n\n  const markSuggested = (keys?: string[]) =>\n    setSuggested(new Set(keys ?? [...registry.current]));\n\n  const clearHighlight = (key: string) =>\n    setSuggested((prev) => {\n      if (!prev.has(key)) return prev; // keep referential stability\n      const next = new Set(prev);\n      next.delete(key);\n      return next;\n    });\n\n  const api: SuggestionsApi = {\n    suggestable: (key, handlers) => {\n      registry.current.add(key); // learn keys so markSuggested() can target all\n      return {\n        isHighlighted: suggested.has(key),\n        ...wrap(handlers, () => clearHighlight(key)),\n      };\n    },\n    suggestor: (handlers, keys) => wrap(handlers, () => markSuggested(keys)),\n    markSuggested,\n    clearHighlight,\n    isHighlighted: (key) => suggested.has(key),\n  };\n\n  return <>{children(api)}</>;\n}\n"],"names":[],"mappings":";;;AA2CA,MAAM,IAAA,GAAO,CACX,QAAA,EACA,MAAA,KACM;AACN,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,MAAM,MAAgB,EAAC;AACvB,EAAA,KAAA,MAAW,IAAA,IAAQ,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAA,EAAG;AACxC,IAAA,MAAM,EAAA,GAAK,SAAS,IAAI,CAAA;AACxB,IAAA,GAAA,CAAI,IAAI,CAAA,GAAI,CAAA,GAAI,IAAA,KAAS;AACvB,MAAA,MAAA,EAAO;AACP,MAAA,EAAA,GAAK,GAAG,IAAI,CAAA;AAAA,IACd,CAAA;AAAA,EACF;AACA,EAAA,OAAO,GAAA;AACT,CAAA;AAyBO,SAAS,WAAA,CAAY,EAAE,QAAA,EAAS,EAAqB;AAC1D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,QAAA;AAAA,IAChC,0BAAU,GAAA;AAAI,GAChB;AACA,EAAA,MAAM,QAAA,GAAW,MAAA,iBAAoB,IAAI,GAAA,EAAK,CAAA;AAE9C,EAAA,MAAM,aAAA,GAAgB,CAAC,IAAA,KACrB,YAAA,CAAa,IAAI,GAAA,CAAI,IAAA,IAAQ,CAAC,GAAG,QAAA,CAAS,OAAO,CAAC,CAAC,CAAA;AAErD,EAAA,MAAM,cAAA,GAAiB,CAAC,GAAA,KACtB,YAAA,CAAa,CAAC,IAAA,KAAS;AACrB,IAAA,IAAI,CAAC,IAAA,CAAK,GAAA,CAAI,GAAG,GAAG,OAAO,IAAA;AAC3B,IAAA,MAAM,IAAA,GAAO,IAAI,GAAA,CAAI,IAAI,CAAA;AACzB,IAAA,IAAA,CAAK,OAAO,GAAG,CAAA;AACf,IAAA,OAAO,IAAA;AAAA,EACT,CAAC,CAAA;AAEH,EAAA,MAAM,GAAA,GAAsB;AAAA,IAC1B,WAAA,EAAa,CAAC,GAAA,EAAK,QAAA,KAAa;AAC9B,MAAA,QAAA,CAAS,OAAA,CAAQ,IAAI,GAAG,CAAA;AACxB,MAAA,OAAO;AAAA,QACL,aAAA,EAAe,SAAA,CAAU,GAAA,CAAI,GAAG,CAAA;AAAA,QAChC,GAAG,IAAA,CAAK,QAAA,EAAU,MAAM,cAAA,CAAe,GAAG,CAAC;AAAA,OAC7C;AAAA,IACF,CAAA;AAAA,IACA,SAAA,EAAW,CAAC,QAAA,EAAU,IAAA,KAAS,KAAK,QAAA,EAAU,MAAM,aAAA,CAAc,IAAI,CAAC,CAAA;AAAA,IACvE,aAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA,EAAe,CAAC,GAAA,KAAQ,SAAA,CAAU,IAAI,GAAG;AAAA,GAC3C;AAEA,EAAA,uBAAO,GAAA,CAAA,QAAA,EAAA,EAAG,QAAA,EAAA,QAAA,CAAS,GAAG,CAAA,EAAE,CAAA;AAC1B;;;;"}

package/dist/Suggestions.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/Suggestions.js

@@ -0,0 +1,2 @@
+export { S as Suggestions, S as default } from './Suggestions-ChGGcGuO.js';
+//# sourceMappingURL=Suggestions.js.map

package/dist/Suggestions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Suggestions.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.css

@@ -2131,7 +2131,7 @@
   color: var(--a2-mod-field-label-foreground-color) !important;
   margin-block-end: var(--a2-size-2, 0.5rem);
 }
-}.anvil2 {._search-field_2e6em_1 {
+}.anvil2 {._search-field_2c5gw_1 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -2145,9 +2145,9 @@
   flex-direction: column;
   font-size: var(--a2-typography-paragraph-size-default, var(--a2-font-size-400, 1rem));
   gap: var(--a2-size-2, 0.5rem);
-}._select_2e6em_17 {
+}._select_2c5gw_17 {
   cursor: pointer;
-}._input-wrapper_2e6em_21 {
+}._input-wrapper_2c5gw_21 {
   --a2-mod-select-trigger-base-height: calc(
     var(--a2-size-10, 2.5rem) - (var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem)) * 2)
   );
@@ -2170,30 +2170,32 @@
   padding-inline-end: 4.5rem;
   padding-inline-start: var(--a2-size-3, 0.75rem);
   position: relative;
-}._input-wrapper_2e6em_21:focus:not([disabled]), ._input-wrapper_2e6em_21:focus-visible, ._input-wrapper_2e6em_21:has(._input_2e6em_21:focus-visible) {
+}._input-wrapper_2c5gw_21:focus:not([disabled]), ._input-wrapper_2c5gw_21:focus-visible, ._input-wrapper_2c5gw_21:has(._input_2c5gw_21:focus-visible) {
   outline-width: var(--a2-size-half, 0.125rem);
-}._input-wrapper_2e6em_21:has(._input_2e6em_21._error_2e6em_48) {
+}._input-wrapper_2c5gw_21:has(._input_2c5gw_21._error_2c5gw_48) {
   border-color: var(--a2-border-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-200, #ffac9e)));
-}._input-wrapper_2e6em_21:focus:has(._input_2e6em_21._error_2e6em_48):not([disabled]), ._input-wrapper_2e6em_21:focus-visible:has(._input_2e6em_21._error_2e6em_48), ._input-wrapper_2e6em_21:has(._input_2e6em_21._error_2e6em_48:focus-visible) {
+}._input-wrapper_2c5gw_21:focus:has(._input_2c5gw_21._error_2c5gw_48):not([disabled]), ._input-wrapper_2c5gw_21:focus-visible:has(._input_2c5gw_21._error_2c5gw_48), ._input-wrapper_2c5gw_21:has(._input_2c5gw_21._error_2c5gw_48:focus-visible) {
   outline-color: var(--a2-focus-ring-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
   outline-width: var(--a2-size-half, 0.125rem);
-}._input-wrapper_2e6em_21._disabled_2e6em_55, ._input-wrapper_2e6em_21[disabled], ._input-wrapper_2e6em_21:has(._input_2e6em_21:disabled) {
+}._input-wrapper_2c5gw_21._disabled_2c5gw_55, ._input-wrapper_2c5gw_21[disabled], ._input-wrapper_2c5gw_21:has(._input_2c5gw_21:disabled) {
   opacity: 0.4;
-}._input-wrapper_2e6em_21._disabled_2e6em_55 *, ._input-wrapper_2e6em_21[disabled] *, ._input-wrapper_2e6em_21:has(._input_2e6em_21:disabled) * {
+}._input-wrapper_2c5gw_21._disabled_2c5gw_55 *, ._input-wrapper_2c5gw_21[disabled] *, ._input-wrapper_2c5gw_21:has(._input_2c5gw_21:disabled) * {
   cursor: not-allowed;
-}._input-wrapper_2e6em_21:has(input._input_2e6em_21:-moz-read-only) {
+}._input-wrapper_2c5gw_21:has(input._input_2c5gw_21:-moz-read-only) {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}._input-wrapper_2e6em_21[disabled], ._input-wrapper_2e6em_21[readonly], ._input-wrapper_2e6em_21._disabled_2e6em_55, ._input-wrapper_2e6em_21:has(input._input_2e6em_21:read-only) {
+}._input-wrapper_2c5gw_21[disabled], ._input-wrapper_2c5gw_21[readonly], ._input-wrapper_2c5gw_21._disabled_2c5gw_55, ._input-wrapper_2c5gw_21:has(input._input_2c5gw_21:read-only) {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}._input-flex_2e6em_65 {
+}._input-wrapper_2c5gw_21._highlight_2c5gw_64 {
+  background-color: var(--a2-background-color-primary-subdued, light-dark(var(--a2-color-blue-50, #e6f1ff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 20%, transparent)));
+}._input-flex_2c5gw_68 {
   flex: 1 1 100px;
   min-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 0;
-}._input_2e6em_21,
-._input_2e6em_21[type] {
+}._input_2c5gw_21,
+._input_2c5gw_21[type] {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -2216,45 +2218,45 @@
   padding-inline: 0;
   transition: outline var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
   width: 100px;
-}._input_2e6em_21::-moz-placeholder, ._input_2e6em_21[type]::-moz-placeholder {
+}._input_2c5gw_21::-moz-placeholder, ._input_2c5gw_21[type]::-moz-placeholder {
   color: var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)));
-}._input_2e6em_21::placeholder,
-._input_2e6em_21[type]::placeholder {
+}._input_2c5gw_21::placeholder,
+._input_2c5gw_21[type]::placeholder {
   color: var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)));
-}._input_2e6em_21:focus,
-._input_2e6em_21[type]:focus {
+}._input_2c5gw_21:focus,
+._input_2c5gw_21[type]:focus {
   box-shadow: none;
   outline: none;
 }@media (prefers-reduced-motion: reduce) {
-  ._input_2e6em_21,
-  ._input_2e6em_21[type] {
+  ._input_2c5gw_21,
+  ._input_2c5gw_21[type] {
     transition-duration: 0.01ms !important;
     transition-property: outline;
   }
-}input._input_2e6em_21:-moz-read-only {
+}input._input_2c5gw_21:-moz-read-only {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}input._input_2e6em_21:read-only {
+}input._input_2c5gw_21:read-only {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}._fake-placeholder_2e6em_120 {
+}._fake-placeholder_2c5gw_123 {
   color: var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)));
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-}._no-clear-button_2e6em_125 {
+}._no-clear-button_2c5gw_128 {
   padding-inline-end: var(--a2-size-8, 2rem);
-}._no-toggle-button_2e6em_129 {
+}._no-toggle-button_2c5gw_132 {
   padding-inline-end: var(--a2-size-8, 2rem);
-}._no-clear-button_2e6em_125._no-toggle-button_2e6em_129 {
+}._no-clear-button_2c5gw_128._no-toggle-button_2c5gw_132 {
   padding-inline-end: var(--a2-size-3, 0.75rem);
-}._small_2e6em_137 {
+}._small_2c5gw_140 {
   --a2-mod-select-trigger-base-height: calc(
     var(--a2-size-8, 2rem) - (var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem)) * 2)
   );
-}._large_2e6em_143 {
+}._large_2c5gw_146 {
   --a2-mod-select-trigger-base-height: calc(
     var(--a2-size-12, 3rem) - (var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem)) * 2)
   );
-}._buttons-wrapper_2e6em_149 {
+}._buttons-wrapper_2c5gw_152 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -2269,7 +2271,7 @@
   inset-block-start: 0;
   inset-inline-end: 0;
   position: absolute;
-}._close-button-wrapper_2e6em_166 {
+}._close-button-wrapper_2c5gw_169 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -2283,11 +2285,11 @@
   align-items: center;
   cursor: pointer;
   display: flex;
-}._close-button_2e6em_166 {
+}._close-button_2c5gw_169 {
   --a2-mod-button-background-color: transparent;
-}._close-button_2e6em_166[data-interactive=hover]::before, ._close-button_2e6em_166:hover::before, ._close-button_2e6em_166:disabled:not(._loading-infinite_2e6em_185, ._loading-progress_2e6em_185), ._close-button_2e6em_166._disabled_2e6em_55:not(._loading-infinite_2e6em_185, ._loading-progress_2e6em_185), ._close-button_2e6em_166[aria-disabled=true]:not(._loading-infinite_2e6em_185, ._loading-progress_2e6em_185) {
+}._close-button_2c5gw_169[data-interactive=hover]::before, ._close-button_2c5gw_169:hover::before, ._close-button_2c5gw_169:disabled:not(._loading-infinite_2c5gw_188, ._loading-progress_2c5gw_188), ._close-button_2c5gw_169._disabled_2c5gw_55:not(._loading-infinite_2c5gw_188, ._loading-progress_2c5gw_188), ._close-button_2c5gw_169[aria-disabled=true]:not(._loading-infinite_2c5gw_188, ._loading-progress_2c5gw_188) {
   --a2-mod-button-background-color: transparent;
-}._toggle-button-wrapper_2e6em_189 {
+}._toggle-button-wrapper_2c5gw_192 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -2301,29 +2303,29 @@
   align-items: center;
   cursor: pointer;
   display: flex;
-}._toggle-button_2e6em_189 {
+}._toggle-button_2c5gw_192 {
   --a2-mod-button-background-color: transparent;
   --a2-mod-button-foreground-color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
   transform: rotate(90deg);
   transition: transform var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
-}._toggle-button_2e6em_189[aria-expanded=true] {
+}._toggle-button_2c5gw_192[aria-expanded=true] {
   transform: rotate(270deg);
-}._toggle-button_2e6em_189[data-interactive=hover]::before, ._toggle-button_2e6em_189:hover::before, ._toggle-button_2e6em_189:disabled:not(._loading-infinite_2e6em_185, ._loading-progress_2e6em_185), ._toggle-button_2e6em_189._disabled_2e6em_55:not(._loading-infinite_2e6em_185, ._loading-progress_2e6em_185), ._toggle-button_2e6em_189[aria-disabled=true]:not(._loading-infinite_2e6em_185, ._loading-progress_2e6em_185) {
+}._toggle-button_2c5gw_192[data-interactive=hover]::before, ._toggle-button_2c5gw_192:hover::before, ._toggle-button_2c5gw_192:disabled:not(._loading-infinite_2c5gw_188, ._loading-progress_2c5gw_188), ._toggle-button_2c5gw_192._disabled_2c5gw_55:not(._loading-infinite_2c5gw_188, ._loading-progress_2c5gw_188), ._toggle-button_2c5gw_192[aria-disabled=true]:not(._loading-infinite_2c5gw_188, ._loading-progress_2c5gw_188) {
   --a2-mod-button-background-color: transparent;
 }@media (prefers-reduced-motion: reduce) {
-  ._toggle-button_2e6em_189 {
+  ._toggle-button_2c5gw_192 {
     transition-duration: 0.01ms !important;
   }
-}[aria-expanded=true] ._toggle-button_2e6em_189 {
+}[aria-expanded=true] ._toggle-button_2c5gw_192 {
   transform: rotate(270deg);
-}._prefix-wrapper_2e6em_227 {
+}._prefix-wrapper_2c5gw_230 {
   align-items: stretch;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   height: var(--a2-mod-select-trigger-base-height);
   pointer-events: none;
-}._rows-wrapper_2e6em_236 {
+}._rows-wrapper_2c5gw_239 {
   align-items: stretch;
   display: flex;
   flex-direction: row;
@@ -2332,16 +2334,16 @@
   gap: 0 var(--a2-size-1, 0.25rem);
   max-width: 100%;
   width: 100%;
-}._chip-wrapper_2e6em_247 {
+}._chip-wrapper_2c5gw_250 {
   align-items: center;
   display: flex;
   height: var(--a2-mod-select-trigger-base-height);
   justify-content: center;
   max-width: 100%;
-}._chip_2e6em_247 {
+}._chip_2c5gw_250 {
   --a2-mod-chip-max-width: 100%;
-}._prefix_2e6em_227,
-._suffix_2e6em_260 {
+}._prefix_2c5gw_230,
+._suffix_2c5gw_263 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
@@ -2357,9 +2359,9 @@
   font-weight: var(--a2-font-weight-semibold, 600);
   justify-content: center;
   min-width: var(--a2-size-8, 2rem);
-}._prefix_2e6em_227 {
+}._prefix_2c5gw_230 {
   padding-inline-end: var(--a2-size-2, 0.5rem);
-}._suffix_2e6em_260 {
+}._suffix_2c5gw_263 {
   padding-inline-start: var(--a2-size-2, 0.5rem);
   padding-inline-end: var(--a2-size-2, 0.5rem);
 }
@@ -2427,23 +2429,23 @@
 }._status-icon_r9ou8_37 {
   padding-top: var(--a2-size-quarter, 0.0625rem);
 }
-}.anvil2 {/* BASE */._combobox_1mlsg_2 {
+}.anvil2 {/* BASE */._combobox_184hn_2 {
   min-width: 8rem;
   position: relative;
-}._search-field_1mlsg_7 {
+}._search-field_184hn_7 {
   flex-direction: column;
   font-size: var(--a2-typography-paragraph-size-default, var(--a2-font-size-400, 1rem));
   gap: var(--a2-size-2, 0.5rem);
-}._search-field_1mlsg_7._select_1mlsg_13 {
+}._search-field_184hn_7._select_184hn_13 {
   cursor: pointer;
-}._popover-content_1mlsg_17 ._search-field_1mlsg_7 {
+}._popover-content_184hn_17 ._search-field_184hn_7 {
   border-block-end: var(--a2-size-quarter, 0.0625rem) solid var(--a2-border-color-default, light-dark(var(--a2-color-neutral-400, #8b8b8b), var(--a2-color-neutral-600, #545454)));
   margin-block-end: var(--a2-size-4, 1rem);
   padding-block-end: var(--a2-size-6, 1.5rem);
   padding-block-start: var(--a2-size-2, 0.5rem);
   padding-inline-end: var(--a2-size-2, 0.5rem);
   padding-inline-start: var(--a2-size-2, 0.5rem);
-}._input-wrapper_1mlsg_26 {
+}._input-wrapper_184hn_26 {
   --a2-mod-multi-select-field-input-height: calc(
     var(--a2-size-10, 2.5rem) - (var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem)) * 2)
   );
@@ -2467,30 +2469,32 @@
   padding-inline-end: var(--a2-mod-multi-select-field-input-padding-inline-end);
   padding-inline-start: var(--a2-size-3, 0.75rem);
   position: relative;
-}._input-wrapper_1mlsg_26:focus:not([disabled]), ._input-wrapper_1mlsg_26:focus-visible, ._input-wrapper_1mlsg_26:has(._input_1mlsg_26:focus-visible) {
+}._input-wrapper_184hn_26:focus:not([disabled]), ._input-wrapper_184hn_26:focus-visible, ._input-wrapper_184hn_26:has(._input_184hn_26:focus-visible) {
   outline-width: var(--a2-size-half, 0.125rem);
-}._input-wrapper_1mlsg_26:has(._input_1mlsg_26._error_1mlsg_54) {
+}._input-wrapper_184hn_26:has(._input_184hn_26._error_184hn_54) {
   border-color: var(--a2-border-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-200, #ffac9e)));
-}._input-wrapper_1mlsg_26:focus:has(._input_1mlsg_26._error_1mlsg_54):not([disabled]), ._input-wrapper_1mlsg_26:focus-visible:has(._input_1mlsg_26._error_1mlsg_54), ._input-wrapper_1mlsg_26:has(._input_1mlsg_26._error_1mlsg_54:focus-visible) {
+}._input-wrapper_184hn_26:focus:has(._input_184hn_26._error_184hn_54):not([disabled]), ._input-wrapper_184hn_26:focus-visible:has(._input_184hn_26._error_184hn_54), ._input-wrapper_184hn_26:has(._input_184hn_26._error_184hn_54:focus-visible) {
   outline-color: var(--a2-focus-ring-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-400, #ff5b3d))));
   outline-width: var(--a2-size-half, 0.125rem);
-}._input-wrapper_1mlsg_26._disabled_1mlsg_61, ._input-wrapper_1mlsg_26[disabled], ._input-wrapper_1mlsg_26:has(._input_1mlsg_26:disabled) {
+}._input-wrapper_184hn_26._disabled_184hn_61, ._input-wrapper_184hn_26[disabled], ._input-wrapper_184hn_26:has(._input_184hn_26:disabled) {
   opacity: 0.4;
-}._input-wrapper_1mlsg_26._disabled_1mlsg_61 *, ._input-wrapper_1mlsg_26[disabled] *, ._input-wrapper_1mlsg_26:has(._input_1mlsg_26:disabled) * {
+}._input-wrapper_184hn_26._disabled_184hn_61 *, ._input-wrapper_184hn_26[disabled] *, ._input-wrapper_184hn_26:has(._input_184hn_26:disabled) * {
   cursor: not-allowed;
-}._input-wrapper_1mlsg_26:has(input._input_1mlsg_26:-moz-read-only) {
+}._input-wrapper_184hn_26:has(input._input_184hn_26:-moz-read-only) {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}._input-wrapper_1mlsg_26[disabled], ._input-wrapper_1mlsg_26[readonly], ._input-wrapper_1mlsg_26._disabled_1mlsg_61, ._input-wrapper_1mlsg_26:has(input._input_1mlsg_26:read-only) {
+}._input-wrapper_184hn_26[disabled], ._input-wrapper_184hn_26[readonly], ._input-wrapper_184hn_26._disabled_184hn_61, ._input-wrapper_184hn_26:has(input._input_184hn_26:read-only) {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}._input-flex_1mlsg_71 {
+}._input-wrapper_184hn_26._highlight_184hn_70 {
+  background-color: var(--a2-background-color-primary-subdued, light-dark(var(--a2-color-blue-50, #e6f1ff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 20%, transparent)));
+}._input-flex_184hn_74 {
   flex: 1 1 100px;
   min-width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 0;
-}._input_1mlsg_26,
-._input_1mlsg_26[type] {
+}._input_184hn_26,
+._input_184hn_26[type] {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -2512,29 +2516,29 @@
   padding-inline: 0;
   transition: outline var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
   width: 100px;
-}._input_1mlsg_26:focus,
-._input_1mlsg_26[type]:focus {
+}._input_184hn_26:focus,
+._input_184hn_26[type]:focus {
   box-shadow: none;
-}._input_1mlsg_26::-moz-placeholder, ._input_1mlsg_26[type]::-moz-placeholder {
+}._input_184hn_26::-moz-placeholder, ._input_184hn_26[type]::-moz-placeholder {
   color: var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)));
-}._input_1mlsg_26::placeholder,
-._input_1mlsg_26[type]::placeholder {
+}._input_184hn_26::placeholder,
+._input_184hn_26[type]::placeholder {
   color: var(--a2-foreground-color-subdued, light-dark(var(--a2-color-neutral-500, #707070), var(--a2-color-neutral-200, #c4c4c4)));
-}._input_1mlsg_26:focus-visible,
-._input_1mlsg_26[type]:focus-visible {
+}._input_184hn_26:focus-visible,
+._input_184hn_26[type]:focus-visible {
   box-shadow: none;
   outline: none;
 }@media (prefers-reduced-motion: reduce) {
-  ._input_1mlsg_26,
-  ._input_1mlsg_26[type] {
+  ._input_184hn_26,
+  ._input_184hn_26[type] {
     transition-duration: 0.01ms !important;
     transition-property: outline;
   }
-}input._input_1mlsg_26:-moz-read-only {
+}input._input_184hn_26:-moz-read-only {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}input._input_1mlsg_26:read-only {
+}input._input_184hn_26:read-only {
   background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
-}._rows-wrapper_1mlsg_129 {
+}._rows-wrapper_184hn_132 {
   align-items: stretch;
   display: flex;
   flex-direction: row;
@@ -2543,15 +2547,15 @@
   gap: 0 var(--a2-size-2, 0.5rem);
   max-width: 100%;
   width: 100%;
-}._chip-wrapper_1mlsg_140 {
+}._chip-wrapper_184hn_143 {
   align-items: center;
   display: flex;
   height: var(--a2-mod-multi-select-field-input-height);
   justify-content: center;
   max-width: 100%;
-}._chip_1mlsg_140 {
+}._chip_184hn_143 {
   --a2-mod-chip-max-width: 100%;
-}._buttons-wrapper_1mlsg_152 {
+}._buttons-wrapper_184hn_155 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -2566,7 +2570,7 @@
   inset-block-start: 0;
   inset-inline-end: 0;
   position: absolute;
-}._close-button-wrapper_1mlsg_169 {
+}._close-button-wrapper_184hn_172 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -2580,11 +2584,11 @@
   align-items: center;
   cursor: pointer;
   display: flex;
-}._close-button_1mlsg_169 {
+}._close-button_184hn_172 {
   --a2-mod-button-background-color: transparent;
-}._close-button_1mlsg_169[data-interactive=hover]::before, ._close-button_1mlsg_169:hover::before, ._close-button_1mlsg_169:disabled:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188), ._close-button_1mlsg_169._disabled_1mlsg_61:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188), ._close-button_1mlsg_169[aria-disabled=true]:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188) {
+}._close-button_184hn_172[data-interactive=hover]::before, ._close-button_184hn_172:hover::before, ._close-button_184hn_172:disabled:not(._loading-infinite_184hn_191, ._loading-progress_184hn_191), ._close-button_184hn_172._disabled_184hn_61:not(._loading-infinite_184hn_191, ._loading-progress_184hn_191), ._close-button_184hn_172[aria-disabled=true]:not(._loading-infinite_184hn_191, ._loading-progress_184hn_191) {
   --a2-mod-button-background-color: transparent;
-}._toggle-button-wrapper_1mlsg_192 {
+}._toggle-button-wrapper_184hn_195 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: inherit;
@@ -2598,23 +2602,23 @@
   align-items: center;
   cursor: pointer;
   display: flex;
-}._toggle-button_1mlsg_192 {
+}._toggle-button_184hn_195 {
   --a2-mod-button-background-color: transparent;
   --a2-mod-button-foreground-color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
   transform: rotate(90deg);
   transition: transform var(--a2-duration-default, 200ms) var(--a2-transition-ease-out, cubic-bezier(0, 0, 0.4, 1));
-}._toggle-button_1mlsg_192[aria-expanded=true] {
+}._toggle-button_184hn_195[aria-expanded=true] {
   transform: rotate(270deg);
-}._toggle-button_1mlsg_192[data-interactive=hover]::before, ._toggle-button_1mlsg_192:hover::before, ._toggle-button_1mlsg_192:disabled:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188), ._toggle-button_1mlsg_192._disabled_1mlsg_61:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188), ._toggle-button_1mlsg_192[aria-disabled=true]:not(._loading-infinite_1mlsg_188, ._loading-progress_1mlsg_188) {
+}._toggle-button_184hn_195[data-interactive=hover]::before, ._toggle-button_184hn_195:hover::before, ._toggle-button_184hn_195:disabled:not(._loading-infinite_184hn_191, ._loading-progress_184hn_191), ._toggle-button_184hn_195._disabled_184hn_61:not(._loading-infinite_184hn_191, ._loading-progress_184hn_191), ._toggle-button_184hn_195[aria-disabled=true]:not(._loading-infinite_184hn_191, ._loading-progress_184hn_191) {
   --a2-mod-button-background-color: transparent;
 }@media (prefers-reduced-motion: reduce) {
-  ._toggle-button_1mlsg_192 {
+  ._toggle-button_184hn_195 {
     transition-duration: 0.01ms !important;
   }
-}[aria-expanded=true] ._toggle-button-wrapper_1mlsg_192 ._toggle-button_1mlsg_192 {
+}[aria-expanded=true] ._toggle-button-wrapper_184hn_195 ._toggle-button_184hn_195 {
   transform: rotate(270deg);
-}._prefix_1mlsg_230,
-._suffix_1mlsg_231 {
+}._prefix_184hn_233,
+._suffix_184hn_234 {
   font-family: var(--a2-font-family-base, "Nunito Sans", sans-serif);
   font-size: 100%;
   color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
@@ -2630,27 +2634,27 @@
   font-weight: var(--a2-font-weight-semibold, 600);
   justify-content: center;
   min-width: var(--a2-size-8, 2rem);
-}._prefix_1mlsg_230 {
+}._prefix_184hn_233 {
   padding-inline-end: var(--a2-size-2, 0.5rem);
-}._suffix_1mlsg_231 {
+}._suffix_184hn_234 {
   padding-inline-end: var(--a2-size-2, 0.5rem);
   padding-inline-start: var(--a2-size-2, 0.5rem);
-}._popover-content_1mlsg_17 {
+}._popover-content_184hn_17 {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-}._listview_1mlsg_264 {
+}._listview_184hn_267 {
   padding-block: var(--a2-size-2, 0.5rem);
   padding-inline: var(--a2-size-2, 0.5rem);
-}._loading-spinner_1mlsg_269 {
+}._loading-spinner_184hn_272 {
   height: var(--a2-size-6, 1.5rem);
   width: var(--a2-size-6, 1.5rem);
-}._empty_1mlsg_274 {
+}._empty_184hn_277 {
   padding-block-end: var(--a2-size-4, 1rem);
   padding-block-start: var(--a2-size-3, 0.75rem);
   padding-inline-end: var(--a2-size-6, 1.5rem);
   padding-inline-start: var(--a2-size-6, 1.5rem);
-}._item_1mlsg_281 {
+}._item_184hn_284 {
   --a2-mod-multi-select-field-item-background-color: transparent;
   --a2-mod-multi-select-field-item-color: var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff)));
   background-color: var(--a2-mod-multi-select-field-item-background-color);
@@ -2664,37 +2668,37 @@
   padding-block: var(--a2-size-2, 0.5rem);
   padding-inline: var(--a2-size-4, 1rem);
   position: relative;
-}/* MODIFIERS */._no-clear-button_1mlsg_298 {
+}/* MODIFIERS */._no-clear-button_184hn_301 {
   --a2-mod-multi-select-field-input-padding-inline-end: var(--a2-size-8, 2rem);
-}._no-toggle-button_1mlsg_302 {
+}._no-toggle-button_184hn_305 {
   --a2-mod-multi-select-field-input-padding-inline-end: var(--a2-size-8, 2rem);
-}._small_1mlsg_306 {
+}._small_184hn_309 {
   --a2-mod-multi-select-field-input-height: calc(
     var(--a2-size-8, 2rem) - (var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem)) * 2)
   );
-}._large_1mlsg_312 {
+}._large_184hn_315 {
   --a2-mod-multi-select-field-input-height: calc(
     var(--a2-size-12, 3rem) - (var(--a2-border-width-default, var(--a2-size-quarter, 0.0625rem)) * 2)
   );
-}._listview-option_1mlsg_318:not([aria-disabled=true]) {
+}._listview-option_184hn_321:not([aria-disabled=true]) {
   cursor: pointer;
-}._listview-option_1mlsg_318[aria-selected=true]:not([aria-disabled=true]) {
+}._listview-option_184hn_321[aria-selected=true]:not([aria-disabled=true]) {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-transparent-default-hover, light-dark(color-mix(in srgb, var(--a2-color-neutral-400, #8b8b8b) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)));
-}._item_1mlsg_281[data-interactive=hover]:not([aria-disabled=true]),
-._item_1mlsg_281:hover:not([aria-disabled=true]),
-._item_1mlsg_281[aria-selected=true]:not([aria-disabled=true]) {
+}._item_184hn_284[data-interactive=hover]:not([aria-disabled=true]),
+._item_184hn_284:hover:not([aria-disabled=true]),
+._item_184hn_284[aria-selected=true]:not([aria-disabled=true]) {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-transparent-default-hover, light-dark(color-mix(in srgb, var(--a2-color-neutral-400, #8b8b8b) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)));
-}._item_1mlsg_281[aria-disabled=true] {
+}._item_184hn_284[aria-disabled=true] {
   cursor: not-allowed;
   opacity: 0.6;
-}._item_1mlsg_281[data-checked=true] {
+}._item_184hn_284[data-checked=true] {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-primary-subdued, light-dark(var(--a2-color-blue-50, #e6f1ff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 20%, transparent)));
   --a2-mod-multi-select-field-item-color: var(--a2-foreground-color-primary, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff)));
-}._item_1mlsg_281[data-checked=true]:hover:not([aria-disabled=true]),
-._item_1mlsg_281[data-checked=true][aria-selected=true]:not([aria-disabled=true]),
-._item_1mlsg_281[data-checked=true][data-interactive=hover]:not([aria-disabled=true]) {
+}._item_184hn_284[data-checked=true]:hover:not([aria-disabled=true]),
+._item_184hn_284[data-checked=true][aria-selected=true]:not([aria-disabled=true]),
+._item_184hn_284[data-checked=true][data-interactive=hover]:not([aria-disabled=true]) {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-primary-subdued-hover, light-dark(var(--a2-color-blue-100, #cce3ff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 30%, transparent)));
-}._item_1mlsg_281[data-checked=true]:active:not([aria-disabled=true]) {
+}._item_184hn_284[data-checked=true]:active:not([aria-disabled=true]) {
   --a2-mod-multi-select-field-item-background-color: var(--a2-background-color-primary-subdued-active, light-dark(var(--a2-color-blue-200, #9ecaff), color-mix(in srgb, var(--a2-color-blue-300, #70b1ff) 40%, transparent)));
 }
 }.anvil2 {/* TREE-SPECIFIC OVERRIDES */._tree-row_r0ti0_2 {