@vertexvis/ui 0.1.0-testing.7 → 0.1.0-testing.8

package/dist/cjs/index.cjs.js

@@ -32,7 +32,7 @@ const radio = require('./radio-bff991d2.js');
 const radioGroup = require('./radio-group-d628f631.js');
 const resizable = require('./resizable-e4248256.js');
 const resultList = require('./result-list-241ffe8d.js');
-const searchBar = require('./search-bar-1edc045f.js');
+const searchBar = require('./search-bar-91cbcd07.js');
 const select = require('./select-5f8aecfe.js');
 const slider = require('./slider-13594e49.js');
 const spinner = require('./spinner-bb990a42.js');

package/dist/cjs/{search-bar-1edc045f.js → search-bar-91cbcd07.js}

@@ -59,7 +59,7 @@ const createDocumentRange = () => {
   return document.createRange();
 };
 const createTextNode = (text) => {
-  return new Text(text != null && text !== '' ? text : ' ');
+  return new Text(text);
 };
 
 const createResultUri = (result) => {
@@ -81,6 +81,18 @@ const getNodesForSearchResultReplacement = (replacement) => {
     .map((key) => replacement[key])
     .filter((node) => node != null);
 };
+/**
+ * We leverage a couple unique spaces to represent mentions, allowing for
+ * correct cursor movement when using arrow keys. As these characters are
+ * purely for functional behavior of the input, `trimNonstandardSpaces`
+ * will remove them so the input is suitable for emitting.
+ *
+ * U+200A is a "Hair Space" which acts as a space, but is not visually
+ * represented as one.
+ *
+ * U+00A0 is a "No-Break Space" which is commonly added by browsers
+ * when interacting with a contenteditable element.
+ */
 const trimNonstandardSpaces = (text) => {
   return text.replace(/[\u200A]/g, '').replace(/[\u00A0]/g, ' ');
 };
@@ -91,7 +103,7 @@ const createNoBreakSpace = () => {
   return String.fromCharCode(160);
 };
 
-const searchBarCss = ".wrapper.sc-vertex-search-bar{display:flex;border:1px solid var(--vertex-ui-neutral-600);border-radius:0.5rem}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";
+const searchBarCss = ".wrapper.sc-vertex-search-bar{display:flex;align-items:center;width:100%;box-sizing:border-box;background:none;border:1px solid transparent;border-radius:4px;font-family:var(--vertex-ui-font-family);font-size:0.875rem;line-height:1.4}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.content-input.sc-vertex-search-bar:focus{outline:none}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";
 
 const SearchBar = class {
   constructor(hostRef) {
@@ -113,31 +125,41 @@ const SearchBar = class {
       }
       return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
     };
+    /**
+     * Inspects the cursor position for the following conditions:
+     *
+     * 1. The cursor has moved to text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event and display the results.
+     *
+     * 2. The cursor has moved within text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event to update the currently displayed results.
+     *
+     * 3. The cursor has moved to text that does not contain a valid
+     * string and trigger character, indicating we need to hide any
+     * displayed search results.
+     */
     this.handleCursorPositionUpdate = () => {
-      var _a, _b, _c;
+      var _a, _b;
       const windowRange = (_a = getWindowSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
       if (windowRange != null) {
-        if (!this.hasTriggered) {
-          const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
-          if (triggerText != null) {
-            this.hasTriggered = true;
-            this.triggeredRange = windowRange;
-            this.triggeredElement = windowRange.commonAncestorContainer;
-            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
-          }
+        const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
+        if (!this.hasTriggered && triggerText != null) {
+          this.hasTriggered = true;
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
         }
-        else if (this.hasTriggered) {
-          const triggerText = this.readTriggerValue((_c = windowRange.commonAncestorContainer.textContent) !== null && _c !== void 0 ? _c : '', windowRange.startOffset);
-          if (triggerText != null) {
-            this.triggeredRange = windowRange;
-            this.triggeredElement = windowRange.commonAncestorContainer;
-            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
-          }
-          else {
-            this.hasTriggered = false;
-            this.triggeredRange = undefined;
-            this.triggeredElement = undefined;
-          }
+        else if (this.hasTriggered && triggerText != null) {
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
+        }
+        else {
+          this.hasTriggered = false;
+          this.triggeredRange = undefined;
+          this.triggeredElement = undefined;
         }
       }
       this.cursorPosition = this.getCursorPosition();
@@ -220,7 +242,7 @@ const SearchBar = class {
     this.placeholder = undefined;
     this.replacements = [];
     this.replacementUriType = 'user';
-    this.cursorPosition = { x: 0, y: 0 };
+    this.cursorPosition = undefined;
     this.displayedElements = [];
     this.hasTriggered = false;
     this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -280,7 +302,6 @@ const SearchBar = class {
       this.displayedElements = this.rawElements.map((el) => {
         const raw = el instanceof HTMLElement ? el.innerText : el.textContent;
         const replacement = this.replacements.find((r) => raw === null || raw === void 0 ? void 0 : raw.includes(createResultUri(r)));
-        console.log(raw);
         if (raw != null && replacement != null) {
           const replacementElement = this.createReplacedElement(raw, replacement);
           return replacementElement;
@@ -359,7 +380,6 @@ const SearchBar = class {
       const replacement = createSearchResultReplacement(event.detail, before, after);
       this.lastReplacedSpace = replacement.afterSpace;
       this.rawElements = Array.from(this.contentEl.childNodes).reduce((re, e) => {
-        // TODO: see if we can do anything about the collapse to single line in safari
         if (this.isIdenticalElement(e, triggeredElement)) {
           return [...re, ...getNodesForSearchResultReplacement(replacement)];
         }
@@ -368,11 +388,11 @@ const SearchBar = class {
         }
       }, []);
       this.hasTriggered = false;
+      this.resultReplaced.emit(event.detail);
       this.replacements = [
         ...this.replacements.filter((r) => r.id !== event.detail.id),
         event.detail,
       ];
-      this.resultReplaced.emit(event.detail);
     }
   }
   getCursorPosition() {

package/dist/cjs/vertex-search-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const searchBar = require('./search-bar-1edc045f.js');
+const searchBar = require('./search-bar-91cbcd07.js');
 require('./index-6a92256c.js');
 require('./index-e1b40fa6.js');
 require('./templates-e7b3ffbb.js');

package/dist/collection/collection-manifest.json

@@ -12,7 +12,6 @@
     "./components/icon-button/icon-button.js",
     "./components/radio/radio.js",
     "./components/resizable/resizable.js",
-    "./components/result-list/result-list.js",
     "./components/search-bar/search-bar.js",
     "./components/slider/slider.js",
     "./components/spinner/spinner.js",
@@ -36,6 +35,7 @@
     "./components/menu-divider/menu-divider.js",
     "./components/menu-item/menu-item.js",
     "./components/radio-group/radio-group.js",
+    "./components/result-list/result-list.js",
     "./components/select/select.js",
     "./components/tooltip/tooltip.js"
   ],

package/dist/collection/components/result-list/result-list.js

@@ -213,7 +213,8 @@ export class ResultList {
           "resolved": "Result[]",
           "references": {
             "Result": {
-              "location": "local"
+              "location": "import",
+              "path": "./types"
             }
           }
         },
@@ -405,7 +406,8 @@ export class ResultList {
           "resolved": "{ id: string; type: string; } & Record<string, unknown>",
           "references": {
             "Result": {
-              "location": "local"
+              "location": "import",
+              "path": "./types"
             }
           }
         }
@@ -424,7 +426,8 @@ export class ResultList {
           "resolved": "{ id: string; type: string; } & Record<string, unknown>",
           "references": {
             "Result": {
-              "location": "local"
+              "location": "import",
+              "path": "./types"
             }
           }
         }

package/dist/collection/components/result-list/types.js

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

package/dist/collection/components/search-bar/dom.js

@@ -8,5 +8,5 @@ export const createDocumentRange = () => {
   return document.createRange();
 };
 export const createTextNode = (text) => {
-  return new Text(text != null && text !== '' ? text : ' ');
+  return new Text(text);
 };

package/dist/collection/components/search-bar/lib.js

@@ -18,6 +18,18 @@ export const getNodesForSearchResultReplacement = (replacement) => {
     .map((key) => replacement[key])
     .filter((node) => node != null);
 };
+/**
+ * We leverage a couple unique spaces to represent mentions, allowing for
+ * correct cursor movement when using arrow keys. As these characters are
+ * purely for functional behavior of the input, `trimNonstandardSpaces`
+ * will remove them so the input is suitable for emitting.
+ *
+ * U+200A is a "Hair Space" which acts as a space, but is not visually
+ * represented as one.
+ *
+ * U+00A0 is a "No-Break Space" which is commonly added by browsers
+ * when interacting with a contenteditable element.
+ */
 export const trimNonstandardSpaces = (text) => {
   return text.replace(/[\u200A]/g, '').replace(/[\u00A0]/g, ' ');
 };

package/dist/collection/components/search-bar/search-bar.css

@@ -1,7 +1,14 @@
 .wrapper {
   display: flex;
-  border: 1px solid var(--vertex-ui-neutral-600);
-  border-radius: 0.5rem;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  font-family: var(--vertex-ui-font-family);
+  font-size: 0.875rem;
+  line-height: 1.4;
 }
 
 .content-input {
@@ -17,6 +24,10 @@
   white-space: pre-line;
 }
 
+.content-input:focus {
+  outline: none;
+}
+
 /* standard */
 .standard {
   border-color: var(--vertex-ui-neutral-400);

package/dist/collection/components/search-bar/search-bar.js

@@ -18,31 +18,41 @@ export class SearchBar {
       }
       return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
     };
+    /**
+     * Inspects the cursor position for the following conditions:
+     *
+     * 1. The cursor has moved to text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event and display the results.
+     *
+     * 2. The cursor has moved within text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event to update the currently displayed results.
+     *
+     * 3. The cursor has moved to text that does not contain a valid
+     * string and trigger character, indicating we need to hide any
+     * displayed search results.
+     */
     this.handleCursorPositionUpdate = () => {
-      var _a, _b, _c;
+      var _a, _b;
       const windowRange = (_a = getWindowSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
       if (windowRange != null) {
-        if (!this.hasTriggered) {
-          const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
-          if (triggerText != null) {
-            this.hasTriggered = true;
-            this.triggeredRange = windowRange;
-            this.triggeredElement = windowRange.commonAncestorContainer;
-            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
-          }
+        const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
+        if (!this.hasTriggered && triggerText != null) {
+          this.hasTriggered = true;
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
         }
-        else if (this.hasTriggered) {
-          const triggerText = this.readTriggerValue((_c = windowRange.commonAncestorContainer.textContent) !== null && _c !== void 0 ? _c : '', windowRange.startOffset);
-          if (triggerText != null) {
-            this.triggeredRange = windowRange;
-            this.triggeredElement = windowRange.commonAncestorContainer;
-            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
-          }
-          else {
-            this.hasTriggered = false;
-            this.triggeredRange = undefined;
-            this.triggeredElement = undefined;
-          }
+        else if (this.hasTriggered && triggerText != null) {
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
+        }
+        else {
+          this.hasTriggered = false;
+          this.triggeredRange = undefined;
+          this.triggeredElement = undefined;
         }
       }
       this.cursorPosition = this.getCursorPosition();
@@ -125,7 +135,7 @@ export class SearchBar {
     this.placeholder = undefined;
     this.replacements = [];
     this.replacementUriType = 'user';
-    this.cursorPosition = { x: 0, y: 0 };
+    this.cursorPosition = undefined;
     this.displayedElements = [];
     this.hasTriggered = false;
     this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -185,7 +195,6 @@ export class SearchBar {
       this.displayedElements = this.rawElements.map((el) => {
         const raw = el instanceof HTMLElement ? el.innerText : el.textContent;
         const replacement = this.replacements.find((r) => raw === null || raw === void 0 ? void 0 : raw.includes(createResultUri(r)));
-        console.log(raw);
         if (raw != null && replacement != null) {
           const replacementElement = this.createReplacedElement(raw, replacement);
           return replacementElement;
@@ -264,7 +273,6 @@ export class SearchBar {
       const replacement = createSearchResultReplacement(event.detail, before, after);
       this.lastReplacedSpace = replacement.afterSpace;
       this.rawElements = Array.from(this.contentEl.childNodes).reduce((re, e) => {
-        // TODO: see if we can do anything about the collapse to single line in safari
         if (this.isIdenticalElement(e, triggeredElement)) {
           return [...re, ...getNodesForSearchResultReplacement(replacement)];
         }
@@ -273,11 +281,11 @@ export class SearchBar {
         }
       }, []);
       this.hasTriggered = false;
+      this.resultReplaced.emit(event.detail);
       this.replacements = [
         ...this.replacements.filter((r) => r.id !== event.detail.id),
         event.detail,
       ];
-      this.resultReplaced.emit(event.detail);
     }
   }
   getCursorPosition() {
@@ -392,7 +400,7 @@ export class SearchBar {
           "references": {
             "Result": {
               "location": "import",
-              "path": "../result-list/result-list"
+              "path": "../result-list/types"
             }
           }
         },
@@ -472,7 +480,7 @@ export class SearchBar {
           "references": {
             "Result": {
               "location": "import",
-              "path": "../result-list/result-list"
+              "path": "../result-list/types"
             }
           }
         },
@@ -558,7 +566,7 @@ export class SearchBar {
           "references": {
             "Result": {
               "location": "import",
-              "path": "../result-list/result-list"
+              "path": "../result-list/types"
             }
           }
         }

package/dist/components/components.esm.js

@@ -1 +1 @@
-import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[6,"vertex-click-to-edit-textfield",{placeholder:[1],fontSize:[1,"font-size"],disabled:[516],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],value:[1032],autoFocus:[4,"auto-focus"],editing:[1540],hasError:[4,"has-error"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-0f8b9ede",[[1,"vertex-dialog",{open:[1540],fullscreen:[4],resizable:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],maxWidth:[32],maxHeight:[32],isResizing:[32]},[[4,"keydown","keyDownListener"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-7f42b27b",[[6,"vertex-search-bar",{variant:[1],disabled:[4],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],resultItems:[16],placement:[1],value:[1],placeholder:[1],replacements:[1040],replacementUriType:[1,"replacement-uri-type"],cursorPosition:[32],displayedElements:[32],hasTriggered:[32]}]]],["p-7cfb3736",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],hideSelected:[4,"hide-selected"],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-16719272",[[1,"vertex-slider",{min:[2],max:[2],valueLabelDisplay:[1,"value-label-display"],step:[8],size:[1],value:[1026],disabled:[4]}]]],["p-756c9977",[[1,"vertex-toast",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-7f64b251",[[1,"vertex-color-circle-picker",{colors:[1],supplementalColors:[1,"supplemental-colors"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],selected:[1537],direction:[1]}]]],["p-35e7ab78",[[1,"vertex-color-picker",{value:[1537],disabled:[4]}]]],["p-53515813",[[1,"vertex-toggle",{variant:[1],disabled:[4],checked:[1540]}]]],["p-bca6275a",[[1,"vertex-avatar",{firstName:[1,"first-name"],lastName:[1,"last-name"],value:[1],active:[4],variant:[1]}]]],["p-91123ff6",[[1,"vertex-avatar-group"]]],["p-0b4406fa",[[1,"vertex-badge",{badgeText:[1,"badge-text"],badgeColor:[1,"badge-color"]}]]],["p-fca52578",[[1,"vertex-button",{type:[1],color:[1],variant:[1],size:[1],expand:[1],href:[1],target:[1],disabled:[516]}]]],["p-6d4f055b",[[1,"vertex-card",{mode:[1]}]]],["p-211c1186",[[1,"vertex-card-group",{selected:[516],hovered:[516],expanded:[516]}]]],["p-d7c0c287",[[1,"vertex-chip",{variant:[1],color:[1]}]]],["p-a2018217",[[1,"vertex-logo-loading"]]],["p-cc2e3192",[[1,"vertex-menu-divider"]]],["p-573b8ec6",[[1,"vertex-menu-item",{disabled:[516]}]]],["p-33400eed",[[2,"vertex-radio",{disabled:[516],value:[513],label:[513],name:[513],checked:[516]}]]],["p-8b85ea4a",[[1,"vertex-radio-group",{name:[513],value:[1537]}]]],["p-ea4a2f74",[[1,"vertex-resizable",{horizontalDirection:[1,"horizontal-direction"],verticalDirection:[1,"vertical-direction"],initialHorizontalScale:[2,"initial-horizontal-scale"],initialVerticalScale:[2,"initial-vertical-scale"],initializeWithOffset:[4,"initialize-with-offset"],parentSelector:[1,"parent-selector"],verticalSiblingSelector:[1,"vertical-sibling-selector"],horizontalSiblingSelector:[1,"horizontal-sibling-selector"],contentSelector:[1,"content-selector"],position:[1],dimensionsComputed:[1540,"dimensions-computed"],width:[32],minWidth:[32],maxWidth:[32],height:[32],minHeight:[32],maxHeight:[32],left:[32],top:[32],hoveredLocation:[32],dragStartLocation:[32],updateDimensions:[64]}]]],["p-69375605",[[1,"vertex-spinner",{color:[1],size:[1]}]]],["p-80c989fa",[[1,"vertex-expandable",{expanded:[1540],expanding:[1540],collapsing:[1540],controlled:[516],expandType:[513,"expand-type"],animated:[4],contentScrollHeight:[32]}]]],["p-ee496965",[[1,"vertex-result-list",{items:[16],itemsJson:[1,"items"],viewportStartIndex:[1026,"viewport-start-index"],viewportEndIndex:[1026,"viewport-end-index"],resultHeight:[1026,"result-height"],overScanCount:[2,"over-scan-count"],placement:[1],position:[1],open:[4],listHeight:[32],parsedResults:[32],scrollTop:[32],lastStartIndex:[32],lastFocusedIndex:[32],stateMap:[32]}]]],["p-406e73da",[[6,"vertex-textfield",{type:[1],name:[1],variant:[1],fontSize:[1,"font-size"],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],placeholder:[1],autoFocus:[4,"auto-focus"],autoComplete:[1,"auto-complete"],autoCorrect:[1,"auto-correct"],value:[1032],disabled:[516],hasError:[4,"has-error"],updateInput:[64],blurInput:[64],getInputValue:[64],selectAll:[64]}]]],["p-0b1cdc8a",[[1,"vertex-tooltip",{content:[1],disabled:[4],placement:[1],delay:[2],animated:[4],open:[32]}]]],["p-20a74d5d",[[1,"vertex-color-circle",{color:[513],supplementalColor:[513,"supplemental-color"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],lightened:[1537],darkened:[1537]}]]],["p-9c384f6c",[[1,"vertex-auto-resize-textarea",{textareaSelector:[1,"textarea-selector"],initialValue:[1,"initial-value"],minRows:[514,"min-rows"],maxRows:[514,"max-rows"],textValue:[32]}]]],["p-0517ca62",[[1,"vertex-menu",{animated:[4],open:[1540],placement:[1],fallbackPlacements:[16],backdrop:[4],position:[1040],popoverProps:[16]}]]],["p-f71fc166",[[1,"vertex-icon-button",{iconName:[1,"icon-name"],disabled:[516],variant:[1],iconColor:[1,"icon-color"],iconSize:[1,"icon-size"]}]]],["p-7dba2574",[[1,"vertex-icon",{name:[1],size:[1]}]]],["p-606596de",[[1,"vertex-popover",{open:[1540],placement:[1],position:[1025],anchorBounds:[16],backdrop:[4],animated:[4],anchorSelector:[1,"anchor-selector"],boundarySelector:[1,"boundary-selector"],resizeBehavior:[1,"resize-behavior"],overflowBehavior:[16],flipBehavior:[16],offsetBehavior:[2,"offset-behavior"],updateOnResize:[4,"update-on-resize"],resizeObserverFactory:[16],opened:[32],computedPlacement:[32]}]]]],e)));
+import{d as e,N as t,w as a,p as o,a as r,b as i}from"./p-6834631c.js";export{s as setNonce}from"./p-6834631c.js";(()=>{const i=Array.from(e.querySelectorAll("script")).find((e=>new RegExp(`/${t}(\\.esm)?\\.js($|\\?|#)`).test(e.src)||e.getAttribute("data-stencil-namespace")===t)),n={};return n.resourcesUrl=new URL(".",new URL(i.getAttribute("data-resources-url")||i.src,a.location.href)).href,((o,i)=>{const n=`__sc_import_${t.replace(/\s|-/g,"_")}`;try{a[n]=new Function("w",`return import(w);//${Math.random()}`)}catch(t){const l=new Map;a[n]=t=>{var c;const s=new URL(t,o).href;let p=l.get(s);if(!p){const t=e.createElement("script");t.type="module",t.crossOrigin=i.crossOrigin,t.src=URL.createObjectURL(new Blob([`import * as m from '${s}'; window.${n}.m = m;`],{type:"application/javascript"}));const o=null!==(c=r.t)&&void 0!==c?c:function(e){var t,a,o;return null!==(o=null===(a=null===(t=e.head)||void 0===t?void 0:t.querySelector('meta[name="csp-nonce"]'))||void 0===a?void 0:a.getAttribute("content"))&&void 0!==o?o:void 0}(e);null!=o&&t.setAttribute("nonce",o),p=new Promise((e=>{t.onload=()=>{e(a[n].m),t.remove()}})),l.set(s,p),e.head.appendChild(t)}return p}}})(n.resourcesUrl,i),a.customElements?o(n):__sc_import_components("./p-c3ec6642.js").then((()=>n))})().then((e=>i([["p-24c72960",[[6,"vertex-click-to-edit-textfield",{placeholder:[1],fontSize:[1,"font-size"],disabled:[516],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],value:[1032],autoFocus:[4,"auto-focus"],editing:[1540],hasError:[4,"has-error"]}]]],["p-226e83a6",[[1,"vertex-collapsible",{label:[1],open:[1540]}]]],["p-41ced35c",[[1,"vertex-context-menu",{targetSelector:[1,"target-selector"],animated:[4],position:[32],open:[32]}]]],["p-0f8b9ede",[[1,"vertex-dialog",{open:[1540],fullscreen:[4],resizable:[4],width:[32],height:[32],minWidth:[32],minHeight:[32],maxWidth:[32],maxHeight:[32],isResizing:[32]},[[4,"keydown","keyDownListener"]]]]],["p-e7336466",[[1,"vertex-draggable-popover",{position:[1],boundarySelector:[1,"boundary-selector"],boundaryPadding:[2,"boundary-padding"],anchorPosition:[32],lastPosition:[32],dragging:[32]}]]],["p-e3d0c2d1",[[1,"vertex-dropdown-menu",{animated:[4],placement:[1],open:[32]}]]],["p-fe7e7a74",[[1,"vertex-help-tooltip",{animated:[4],placement:[1],open:[32]}]]],["p-cfe369bf",[[6,"vertex-search-bar",{variant:[1],disabled:[4],triggerCharacter:[1,"trigger-character"],breakCharacters:[16],resultItems:[16],placement:[1],value:[1],placeholder:[1],replacements:[1040],replacementUriType:[1,"replacement-uri-type"],cursorPosition:[32],displayedElements:[32],hasTriggered:[32]}]]],["p-7cfb3736",[[1,"vertex-select",{value:[513],placeholder:[513],disabled:[516],animated:[4],hideSelected:[4,"hide-selected"],resizeObserverFactory:[16],open:[32],position:[32],displayValue:[32]}]]],["p-16719272",[[1,"vertex-slider",{min:[2],max:[2],valueLabelDisplay:[1,"value-label-display"],step:[8],size:[1],value:[1026],disabled:[4]}]]],["p-756c9977",[[1,"vertex-toast",{content:[1],placement:[1],duration:[2],animated:[4],open:[4],type:[1],isOpen:[32]}]]],["p-7f64b251",[[1,"vertex-color-circle-picker",{colors:[1],supplementalColors:[1,"supplemental-colors"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],selected:[1537],direction:[1]}]]],["p-35e7ab78",[[1,"vertex-color-picker",{value:[1537],disabled:[4]}]]],["p-53515813",[[1,"vertex-toggle",{variant:[1],disabled:[4],checked:[1540]}]]],["p-bca6275a",[[1,"vertex-avatar",{firstName:[1,"first-name"],lastName:[1,"last-name"],value:[1],active:[4],variant:[1]}]]],["p-91123ff6",[[1,"vertex-avatar-group"]]],["p-0b4406fa",[[1,"vertex-badge",{badgeText:[1,"badge-text"],badgeColor:[1,"badge-color"]}]]],["p-fca52578",[[1,"vertex-button",{type:[1],color:[1],variant:[1],size:[1],expand:[1],href:[1],target:[1],disabled:[516]}]]],["p-6d4f055b",[[1,"vertex-card",{mode:[1]}]]],["p-211c1186",[[1,"vertex-card-group",{selected:[516],hovered:[516],expanded:[516]}]]],["p-d7c0c287",[[1,"vertex-chip",{variant:[1],color:[1]}]]],["p-a2018217",[[1,"vertex-logo-loading"]]],["p-cc2e3192",[[1,"vertex-menu-divider"]]],["p-573b8ec6",[[1,"vertex-menu-item",{disabled:[516]}]]],["p-33400eed",[[2,"vertex-radio",{disabled:[516],value:[513],label:[513],name:[513],checked:[516]}]]],["p-8b85ea4a",[[1,"vertex-radio-group",{name:[513],value:[1537]}]]],["p-ea4a2f74",[[1,"vertex-resizable",{horizontalDirection:[1,"horizontal-direction"],verticalDirection:[1,"vertical-direction"],initialHorizontalScale:[2,"initial-horizontal-scale"],initialVerticalScale:[2,"initial-vertical-scale"],initializeWithOffset:[4,"initialize-with-offset"],parentSelector:[1,"parent-selector"],verticalSiblingSelector:[1,"vertical-sibling-selector"],horizontalSiblingSelector:[1,"horizontal-sibling-selector"],contentSelector:[1,"content-selector"],position:[1],dimensionsComputed:[1540,"dimensions-computed"],width:[32],minWidth:[32],maxWidth:[32],height:[32],minHeight:[32],maxHeight:[32],left:[32],top:[32],hoveredLocation:[32],dragStartLocation:[32],updateDimensions:[64]}]]],["p-69375605",[[1,"vertex-spinner",{color:[1],size:[1]}]]],["p-80c989fa",[[1,"vertex-expandable",{expanded:[1540],expanding:[1540],collapsing:[1540],controlled:[516],expandType:[513,"expand-type"],animated:[4],contentScrollHeight:[32]}]]],["p-ee496965",[[1,"vertex-result-list",{items:[16],itemsJson:[1,"items"],viewportStartIndex:[1026,"viewport-start-index"],viewportEndIndex:[1026,"viewport-end-index"],resultHeight:[1026,"result-height"],overScanCount:[2,"over-scan-count"],placement:[1],position:[1],open:[4],listHeight:[32],parsedResults:[32],scrollTop:[32],lastStartIndex:[32],lastFocusedIndex:[32],stateMap:[32]}]]],["p-406e73da",[[6,"vertex-textfield",{type:[1],name:[1],variant:[1],fontSize:[1,"font-size"],multiline:[4],minRows:[2,"min-rows"],maxRows:[2,"max-rows"],placeholder:[1],autoFocus:[4,"auto-focus"],autoComplete:[1,"auto-complete"],autoCorrect:[1,"auto-correct"],value:[1032],disabled:[516],hasError:[4,"has-error"],updateInput:[64],blurInput:[64],getInputValue:[64],selectAll:[64]}]]],["p-0b1cdc8a",[[1,"vertex-tooltip",{content:[1],disabled:[4],placement:[1],delay:[2],animated:[4],open:[32]}]]],["p-20a74d5d",[[1,"vertex-color-circle",{color:[513],supplementalColor:[513,"supplemental-color"],theme:[513],lightenPercentage:[2,"lighten-percentage"],darkenPercentage:[2,"darken-percentage"],lightened:[1537],darkened:[1537]}]]],["p-9c384f6c",[[1,"vertex-auto-resize-textarea",{textareaSelector:[1,"textarea-selector"],initialValue:[1,"initial-value"],minRows:[514,"min-rows"],maxRows:[514,"max-rows"],textValue:[32]}]]],["p-0517ca62",[[1,"vertex-menu",{animated:[4],open:[1540],placement:[1],fallbackPlacements:[16],backdrop:[4],position:[1040],popoverProps:[16]}]]],["p-f71fc166",[[1,"vertex-icon-button",{iconName:[1,"icon-name"],disabled:[516],variant:[1],iconColor:[1,"icon-color"],iconSize:[1,"icon-size"]}]]],["p-7dba2574",[[1,"vertex-icon",{name:[1],size:[1]}]]],["p-606596de",[[1,"vertex-popover",{open:[1540],placement:[1],position:[1025],anchorBounds:[16],backdrop:[4],animated:[4],anchorSelector:[1,"anchor-selector"],boundarySelector:[1,"boundary-selector"],resizeBehavior:[1,"resize-behavior"],overflowBehavior:[16],flipBehavior:[16],offsetBehavior:[2,"offset-behavior"],updateOnResize:[4,"update-on-resize"],resizeObserverFactory:[16],opened:[32],computedPlacement:[32]}]]]],e)));

package/dist/components/index.esm.js

@@ -1 +1 @@
-export{A as AutoResizeTextArea}from"./p-bec53c3a.js";export{A as Avatar}from"./p-c2c076f1.js";export{A as AvatarGroup}from"./p-81cb4da4.js";export{B as Badge}from"./p-29d7697f.js";export{B as Button}from"./p-64e8b92c.js";export{C as Card}from"./p-a3c04bbd.js";export{C as CardGroup}from"./p-ff4a1c3a.js";export{C as Chip}from"./p-a6614625.js";export{C as ClickToEditTextField}from"./p-0e628c05.js";export{C as Collapsible}from"./p-8fe0084d.js";export{C as ColorCircle}from"./p-d9b9aebe.js";export{C as ColorCirclePicker}from"./p-9374ef6c.js";export{C as ColorPicker}from"./p-8434602f.js";export{C as ContextMenu}from"./p-f2bc7ec5.js";export{D as Dialog}from"./p-165aed7d.js";export{D as DraggablePopover}from"./p-41a7564c.js";export{D as DropdownMenu}from"./p-39133bc7.js";export{E as Expandable}from"./p-6a640a2c.js";export{H as HelpTooltip}from"./p-2cff3285.js";export{I as Icon}from"./p-ca52a423.js";export{I as IconButton}from"./p-103249b4.js";export{L as LogoLoading}from"./p-817bf6ff.js";export{M as Menu}from"./p-7b75e004.js";export{M as MenuDivider}from"./p-c939fa4e.js";export{M as MenuItem}from"./p-988058f9.js";export{P as Popover}from"./p-c2706288.js";export{R as Radio}from"./p-36c853c4.js";export{R as RadioGroup}from"./p-f693e6f8.js";export{R as Resizable}from"./p-6ec189d2.js";export{R as ResultList}from"./p-6b862967.js";export{S as SearchBar}from"./p-759f1655.js";export{S as Select}from"./p-912f6e24.js";export{S as Slider}from"./p-cd6ddb10.js";export{S as Spinner}from"./p-09ba50c3.js";export{T as TextField}from"./p-43b1b3f9.js";export{T as Toast}from"./p-3dd08a0f.js";export{T as Toggle}from"./p-59fb829f.js";export{T as Tooltip}from"./p-92930f2a.js";import"./p-6834631c.js";import"./p-b2c7b113.js";import"./p-fe062eb0.js";import"./p-03dbb28c.js";import"./p-1356f525.js";import"./p-59032668.js";
+export{A as AutoResizeTextArea}from"./p-bec53c3a.js";export{A as Avatar}from"./p-c2c076f1.js";export{A as AvatarGroup}from"./p-81cb4da4.js";export{B as Badge}from"./p-29d7697f.js";export{B as Button}from"./p-64e8b92c.js";export{C as Card}from"./p-a3c04bbd.js";export{C as CardGroup}from"./p-ff4a1c3a.js";export{C as Chip}from"./p-a6614625.js";export{C as ClickToEditTextField}from"./p-0e628c05.js";export{C as Collapsible}from"./p-8fe0084d.js";export{C as ColorCircle}from"./p-d9b9aebe.js";export{C as ColorCirclePicker}from"./p-9374ef6c.js";export{C as ColorPicker}from"./p-8434602f.js";export{C as ContextMenu}from"./p-f2bc7ec5.js";export{D as Dialog}from"./p-165aed7d.js";export{D as DraggablePopover}from"./p-41a7564c.js";export{D as DropdownMenu}from"./p-39133bc7.js";export{E as Expandable}from"./p-6a640a2c.js";export{H as HelpTooltip}from"./p-2cff3285.js";export{I as Icon}from"./p-ca52a423.js";export{I as IconButton}from"./p-103249b4.js";export{L as LogoLoading}from"./p-817bf6ff.js";export{M as Menu}from"./p-7b75e004.js";export{M as MenuDivider}from"./p-c939fa4e.js";export{M as MenuItem}from"./p-988058f9.js";export{P as Popover}from"./p-c2706288.js";export{R as Radio}from"./p-36c853c4.js";export{R as RadioGroup}from"./p-f693e6f8.js";export{R as Resizable}from"./p-6ec189d2.js";export{R as ResultList}from"./p-6b862967.js";export{S as SearchBar}from"./p-db34f10c.js";export{S as Select}from"./p-912f6e24.js";export{S as Slider}from"./p-cd6ddb10.js";export{S as Spinner}from"./p-09ba50c3.js";export{T as TextField}from"./p-43b1b3f9.js";export{T as Toast}from"./p-3dd08a0f.js";export{T as Toggle}from"./p-59fb829f.js";export{T as Tooltip}from"./p-92930f2a.js";import"./p-6834631c.js";import"./p-b2c7b113.js";import"./p-fe062eb0.js";import"./p-03dbb28c.js";import"./p-1356f525.js";import"./p-59032668.js";

package/dist/components/p-cfe369bf.entry.js

@@ -0,0 +1 @@
+export{S as vertex_search_bar}from"./p-db34f10c.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-1356f525.js";import"./p-59032668.js";

package/dist/components/p-db34f10c.js

@@ -0,0 +1 @@
+import{r as e,e as t,h as r,H as i,g as s}from"./p-6834631c.js";import{c as a}from"./p-fe062eb0.js";import{g as n}from"./p-1356f525.js";var l=function e(t,r){if(t===r)return!0;if(t&&r&&"object"==typeof t&&"object"==typeof r){if(t.constructor!==r.constructor)return!1;var i,s,a;if(Array.isArray(t)){if((i=t.length)!=r.length)return!1;for(s=i;0!=s--;)if(!e(t[s],r[s]))return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if((i=(a=Object.keys(t)).length)!==Object.keys(r).length)return!1;for(s=i;0!=s--;)if(!Object.prototype.hasOwnProperty.call(r,a[s]))return!1;for(s=i;0!=s--;){var n=a[s];if(!e(t[n],r[n]))return!1}return!0}return t!=t&&r!=r};const o=()=>{if("undefined"!=typeof window)return window.getSelection()},h=e=>new Text(e),c=e=>`${e.type}:${e.id}`,d=(e,t,r)=>{const i=c(e);return{before:h(t),beforeSpace:h(v()),result:h(i),afterSpace:null!=r?h(b()):void 0,after:null!=r?h(r):void 0}},u=e=>Object.keys(e).map((t=>e[t])).filter((e=>null!=e)),v=()=>String.fromCharCode(8202),b=()=>String.fromCharCode(160),x=class{constructor(r){e(this,r),this.searchChanged=t(this,"searchChanged",7),this.inputChanged=t(this,"inputChanged",7),this.resultReplaced=t(this,"resultReplaced",7),this.inputFocus=t(this,"inputFocus",7),this.inputBlur=t(this,"inputBlur",7),this.rawElements=[],this.isIdenticalElement=(e,t)=>e===this.triggeredElement||this.getTextContent(e)===this.getTextContent(t),this.getTextContent=e=>{var t;return e instanceof HTMLElement?e.innerText:null!==(t=e.textContent)&&void 0!==t?t:""},this.handleCursorPositionUpdate=()=>{var e,t;const r=null===(e=o())||void 0===e?void 0:e.getRangeAt(0);if(null!=r){const e=this.readTriggerValue(null!==(t=r.commonAncestorContainer.textContent)&&void 0!==t?t:"",r.startOffset);this.hasTriggered||null==e?this.hasTriggered&&null!=e?(this.triggeredRange=r,this.triggeredElement=r.commonAncestorContainer,this.searchChanged.emit(e.replace(this.triggerCharacter,""))):(this.hasTriggered=!1,this.triggeredRange=void 0,this.triggeredElement=void 0):(this.hasTriggered=!0,this.triggeredRange=r,this.triggeredElement=r.commonAncestorContainer,this.searchChanged.emit(e.replace(this.triggerCharacter,"")))}this.cursorPosition=this.getCursorPosition()},this.readTriggerValue=(e,t)=>{const r=e.replace(String.fromCharCode(160)," "),i=r.substring(0,t),s=r.substring(t),a=`${i.includes(this.triggerCharacter)?i.substring(i.lastIndexOf(this.triggerCharacter)):""}${s.substring(0,this.firstIndexOfBreakCharacter(s))}`;return a.includes(this.triggerCharacter)&&!this.includesBreakCharacter(a)?a:void 0},this.includesBreakCharacter=e=>this.breakCharacters.some((t=>e.includes(t))),this.firstIndexOfBreakCharacter=e=>{const t=this.breakCharacters.map((t=>e.indexOf(t))).filter((e=>e>=0));return t.length>0?Math.min(...t):e.length},this.moveCursorToNodeEnd=(e,t=!1)=>{const r=o();if(null!=r){const i=document.createRange();i.selectNodeContents(e),i.collapse(t),r.removeAllRanges(),r.addRange(i)}},this.getContentAsString=()=>null!=this.contentEl?Array.from(this.contentEl.childNodes).reduce(((e,t)=>{var r;return t instanceof HTMLElement&&"true"===t.getAttribute("data-replaced")?`${e}${t.getAttribute("data-original")}`:t instanceof HTMLElement?`${e}${t.innerText}`:`${e}${null!==(r=t.textContent)&&void 0!==r?r:""}`}),"").replace(/[\u200A]/g,"").replace(/[\u00A0]/g," "):"",this.createReplacedElement=(e,t)=>{const r=this.hostEl.querySelector('template[slot="replaced"]');if(null!=r){const i=n(r);return i.bindings.bind(t),i.element.id=t.id,i.element.style.display="inline-block",i.element.contentEditable="false",i.element.tabIndex=-1,i.element.setAttribute("data-replaced","true"),i.element.setAttribute("data-original",e),i.element}throw new Error("Replaced template not defined.")},this.variant="standard",this.disabled=!1,this.triggerCharacter="@",this.breakCharacters=[" ","\n"],this.resultItems=void 0,this.placement="bottom-start",this.value=void 0,this.placeholder=void 0,this.replacements=[],this.replacementUriType="user",this.cursorPosition=void 0,this.displayedElements=[],this.hasTriggered=!1,this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this),this.handleResultClick=this.handleResultClick.bind(this),this.handleClick=this.handleClick.bind(this),this.handleWindowClick=this.handleWindowClick.bind(this),this.handleInput=this.handleInput.bind(this),this.handleBlur=this.handleBlur.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleCursorPositionUpdate=this.handleCursorPositionUpdate.bind(this),this.updateContent=this.updateContent.bind(this),this.replaceContent=this.replaceContent.bind(this)}componentDidLoad(){this.replaceContent(this.value)}connectedCallback(){window.addEventListener("click",this.handleWindowClick)}disconnectedCallback(){window.removeEventListener("click",this.handleWindowClick)}replaceContent(e,t){if(null!=e&&e!==t){const t=e.match(new RegExp(`${this.replacementUriType}:[0-9a-z-]{36}`,"g")),r=this.replacements.reduce(((e,t)=>Object.assign(Object.assign({},e),{[c(t)]:t})),{});let i=e;const s=null!=t?null==t?void 0:t.reduce(((e,t)=>{if(null!=r[t]){const s=c(r[t]),a=i.indexOf(s),n=i.substring(0,a),l=i.substring(a+s.length),o=d(r[t],n);return i=l,[...e,o.before,o.beforeSpace,o.result]}return e}),[]):[];this.rawElements=[...s,h(i)],this.updateContent(this.replacements)}}updateContent(e,t){null==this.contentEl||l(e,t)||(this.contentEl.innerHTML="",this.displayedElements=this.rawElements.map((e=>{const t=e instanceof HTMLElement?e.innerText:e.textContent,r=this.replacements.find((e=>null==t?void 0:t.includes(c(e))));return null!=t&&null!=r?this.createReplacedElement(t,r):e})),this.displayedElements.forEach((e=>{var t;null===(t=this.contentEl)||void 0===t||t.appendChild("string"==typeof e?h(e):e)})),null!=this.lastReplacedSpace&&this.moveCursorToNodeEnd(this.lastReplacedSpace),this.inputChanged.emit(this.getContentAsString()))}render(){var e;const t=a("wrapper",{standard:"standard"===this.variant,filled:"filled"===this.variant,underlined:"underlined"===this.variant,blank:"blank"===this.variant,disabled:this.disabled});return r(i,null,r("div",{class:t},r("span",{class:"content-input",role:"textbox",contentEditable:"true","aria-multiline":"true","data-placeholder":this.placeholder,ref:e=>this.contentEl=e,onKeyDown:this.handleKeyDown,onKeyUp:this.handleCursorPositionUpdate,onClick:this.handleCursorPositionUpdate,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})),r("vertex-result-list",{position:this.cursorPosition,placement:this.placement,open:this.hasTriggered&&null!=this.resultItems&&this.resultItems.length>0,items:null!==(e=this.resultItems)&&void 0!==e?e:[],onEnterPressed:this.handleResultClick,onResultClick:this.handleResultClick},r("slot",{name:"results"})),r("slot",{name:"replaced"}))}handleKeyDown(e){this.hasTriggered&&this.breakCharacters.includes(e.key)&&(this.hasTriggered=!1,this.triggeredRange=void 0,this.triggeredElement=void 0)}handleKeyUp(e){this.handleCursorPositionUpdate(),this.cursorPosition=this.getCursorPosition()}async handleInput(){this.inputChanged.emit(this.getContentAsString())}handleClick(){this.handleCursorPositionUpdate()}handleWindowClick(e){e.target instanceof HTMLElement&&"true"===e.target.getAttribute("data-replaced")&&null!=e.target.nextSibling&&this.moveCursorToNodeEnd(e.target.nextSibling,!0)}handleFocus(e){this.inputFocus.emit(e)}handleBlur(e){this.hasTriggered=!1,this.inputBlur.emit(e)}handleResultClick(e){var t;const r=this.triggeredRange,i=this.triggeredElement,s=i instanceof HTMLElement?i.innerText:null==i?void 0:i.textContent;if(null!=this.contentEl&&null!=r&&null!=i&&null!=s){const a=null!==(t=this.readTriggerValue(s,r.startOffset))&&void 0!==t?t:"",n=s.split(a),l=d(e.detail,n[0],n[1]);this.lastReplacedSpace=l.afterSpace,this.rawElements=Array.from(this.contentEl.childNodes).reduce(((e,t)=>this.isIdenticalElement(t,i)?[...e,...u(l)]:[...e,t]),[]),this.hasTriggered=!1,this.resultReplaced.emit(e.detail),this.replacements=[...this.replacements.filter((t=>t.id!==e.detail.id)),e.detail]}}getCursorPosition(){var e;const t=o();if(null!=t&&t.rangeCount>0){const r=t.getRangeAt(0).getBoundingClientRect(),i=null===(e=this.contentEl)||void 0===e?void 0:e.getBoundingClientRect(),s=r.bottom||(null==i?void 0:i.bottom)||0,a=r.top||(null==i?void 0:i.top)||0;return{x:r.left||(null==i?void 0:i.left)||0,y:this.placement.includes("top")?a:s}}throw new Error("Unable to retrieve window selection.")}get hostEl(){return s(this)}static get watchers(){return{value:["replaceContent"],replacements:["updateContent"]}}};x.style=".wrapper.sc-vertex-search-bar{display:flex;align-items:center;width:100%;box-sizing:border-box;background:none;border:1px solid transparent;border-radius:4px;font-family:var(--vertex-ui-font-family);font-size:0.875rem;line-height:1.4}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.content-input.sc-vertex-search-bar:focus{outline:none}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";export{x as S}

package/dist/esm/index.js

@@ -28,7 +28,7 @@ export { R as Radio } from './radio-39c11ba4.js';
 export { R as RadioGroup } from './radio-group-7c35d2f0.js';
 export { R as Resizable } from './resizable-a147709b.js';
 export { R as ResultList } from './result-list-16c6afbd.js';
-export { S as SearchBar } from './search-bar-cb59da12.js';
+export { S as SearchBar } from './search-bar-f12a3599.js';
 export { S as Select } from './select-d4e135b7.js';
 export { S as Slider } from './slider-dcdb388f.js';
 export { S as Spinner } from './spinner-afccea51.js';

package/dist/esm/{search-bar-cb59da12.js → search-bar-f12a3599.js}

@@ -57,7 +57,7 @@ const createDocumentRange = () => {
   return document.createRange();
 };
 const createTextNode = (text) => {
-  return new Text(text != null && text !== '' ? text : ' ');
+  return new Text(text);
 };
 
 const createResultUri = (result) => {
@@ -79,6 +79,18 @@ const getNodesForSearchResultReplacement = (replacement) => {
     .map((key) => replacement[key])
     .filter((node) => node != null);
 };
+/**
+ * We leverage a couple unique spaces to represent mentions, allowing for
+ * correct cursor movement when using arrow keys. As these characters are
+ * purely for functional behavior of the input, `trimNonstandardSpaces`
+ * will remove them so the input is suitable for emitting.
+ *
+ * U+200A is a "Hair Space" which acts as a space, but is not visually
+ * represented as one.
+ *
+ * U+00A0 is a "No-Break Space" which is commonly added by browsers
+ * when interacting with a contenteditable element.
+ */
 const trimNonstandardSpaces = (text) => {
   return text.replace(/[\u200A]/g, '').replace(/[\u00A0]/g, ' ');
 };
@@ -89,7 +101,7 @@ const createNoBreakSpace = () => {
   return String.fromCharCode(160);
 };
 
-const searchBarCss = ".wrapper.sc-vertex-search-bar{display:flex;border:1px solid var(--vertex-ui-neutral-600);border-radius:0.5rem}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";
+const searchBarCss = ".wrapper.sc-vertex-search-bar{display:flex;align-items:center;width:100%;box-sizing:border-box;background:none;border:1px solid transparent;border-radius:4px;font-family:var(--vertex-ui-font-family);font-size:0.875rem;line-height:1.4}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.content-input.sc-vertex-search-bar:focus{outline:none}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";
 
 const SearchBar = class {
   constructor(hostRef) {
@@ -111,31 +123,41 @@ const SearchBar = class {
       }
       return (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
     };
+    /**
+     * Inspects the cursor position for the following conditions:
+     *
+     * 1. The cursor has moved to text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event and display the results.
+     *
+     * 2. The cursor has moved within text that contains a valid string
+     * and trigger character, indicating we need to dispatch a
+     * `searchChanged` event to update the currently displayed results.
+     *
+     * 3. The cursor has moved to text that does not contain a valid
+     * string and trigger character, indicating we need to hide any
+     * displayed search results.
+     */
     this.handleCursorPositionUpdate = () => {
-      var _a, _b, _c;
+      var _a, _b;
       const windowRange = (_a = getWindowSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
       if (windowRange != null) {
-        if (!this.hasTriggered) {
-          const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
-          if (triggerText != null) {
-            this.hasTriggered = true;
-            this.triggeredRange = windowRange;
-            this.triggeredElement = windowRange.commonAncestorContainer;
-            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
-          }
+        const triggerText = this.readTriggerValue((_b = windowRange.commonAncestorContainer.textContent) !== null && _b !== void 0 ? _b : '', windowRange.startOffset);
+        if (!this.hasTriggered && triggerText != null) {
+          this.hasTriggered = true;
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
         }
-        else if (this.hasTriggered) {
-          const triggerText = this.readTriggerValue((_c = windowRange.commonAncestorContainer.textContent) !== null && _c !== void 0 ? _c : '', windowRange.startOffset);
-          if (triggerText != null) {
-            this.triggeredRange = windowRange;
-            this.triggeredElement = windowRange.commonAncestorContainer;
-            this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
-          }
-          else {
-            this.hasTriggered = false;
-            this.triggeredRange = undefined;
-            this.triggeredElement = undefined;
-          }
+        else if (this.hasTriggered && triggerText != null) {
+          this.triggeredRange = windowRange;
+          this.triggeredElement = windowRange.commonAncestorContainer;
+          this.searchChanged.emit(triggerText.replace(this.triggerCharacter, ''));
+        }
+        else {
+          this.hasTriggered = false;
+          this.triggeredRange = undefined;
+          this.triggeredElement = undefined;
         }
       }
       this.cursorPosition = this.getCursorPosition();
@@ -218,7 +240,7 @@ const SearchBar = class {
     this.placeholder = undefined;
     this.replacements = [];
     this.replacementUriType = 'user';
-    this.cursorPosition = { x: 0, y: 0 };
+    this.cursorPosition = undefined;
     this.displayedElements = [];
     this.hasTriggered = false;
     this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -278,7 +300,6 @@ const SearchBar = class {
       this.displayedElements = this.rawElements.map((el) => {
         const raw = el instanceof HTMLElement ? el.innerText : el.textContent;
         const replacement = this.replacements.find((r) => raw === null || raw === void 0 ? void 0 : raw.includes(createResultUri(r)));
-        console.log(raw);
         if (raw != null && replacement != null) {
           const replacementElement = this.createReplacedElement(raw, replacement);
           return replacementElement;
@@ -357,7 +378,6 @@ const SearchBar = class {
       const replacement = createSearchResultReplacement(event.detail, before, after);
       this.lastReplacedSpace = replacement.afterSpace;
       this.rawElements = Array.from(this.contentEl.childNodes).reduce((re, e) => {
-        // TODO: see if we can do anything about the collapse to single line in safari
         if (this.isIdenticalElement(e, triggeredElement)) {
           return [...re, ...getNodesForSearchResultReplacement(replacement)];
         }
@@ -366,11 +386,11 @@ const SearchBar = class {
         }
       }, []);
       this.hasTriggered = false;
+      this.resultReplaced.emit(event.detail);
       this.replacements = [
         ...this.replacements.filter((r) => r.id !== event.detail.id),
         event.detail,
       ];
-      this.resultReplaced.emit(event.detail);
     }
   }
   getCursorPosition() {

package/dist/esm/vertex-search-bar.entry.js

@@ -1,4 +1,4 @@
-export { S as vertex_search_bar } from './search-bar-cb59da12.js';
+export { S as vertex_search_bar } from './search-bar-f12a3599.js';
 import './index-72f28b71.js';
 import './index-9c609209.js';
 import './templates-797420bf.js';

package/dist/types/components/result-list/result-list.d.ts

@@ -1,10 +1,7 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { Point } from '../../types/point';
 import { PopoverPlacement } from '../popover/popover';
-export type Result = {
-  id: string;
-  type: string;
-} & Record<string, unknown>;
+import { Result } from './types';
 export declare class ResultList {
   items: Result[];
   itemsJson?: string;

package/dist/types/components/result-list/types.d.ts

@@ -0,0 +1,4 @@
+export type Result = {
+  id: string;
+  type: string;
+} & Record<string, unknown>;

package/dist/types/components/search-bar/dom.d.ts

@@ -1,3 +1,3 @@
 export declare const getWindowSelection: () => Selection | undefined | null;
 export declare const createDocumentRange: () => Range;
-export declare const createTextNode: (text?: string) => Text;
+export declare const createTextNode: (text: string) => Text;

package/dist/types/components/search-bar/lib.d.ts

@@ -1,4 +1,4 @@
-import { Result } from '../result-list/result-list';
+import { Result } from '../result-list/types';
 export interface SearchResultReplacement {
   before: Text;
   beforeSpace: Text;
@@ -9,4 +9,16 @@ export interface SearchResultReplacement {
 export declare const createResultUri: (result: Result) => string;
 export declare const createSearchResultReplacement: (result: Result, before: string, after?: string) => SearchResultReplacement;
 export declare const getNodesForSearchResultReplacement: (replacement: SearchResultReplacement) => Text[];
+/**
+ * We leverage a couple unique spaces to represent mentions, allowing for
+ * correct cursor movement when using arrow keys. As these characters are
+ * purely for functional behavior of the input, `trimNonstandardSpaces`
+ * will remove them so the input is suitable for emitting.
+ *
+ * U+200A is a "Hair Space" which acts as a space, but is not visually
+ * represented as one.
+ *
+ * U+00A0 is a "No-Break Space" which is commonly added by browsers
+ * when interacting with a contenteditable element.
+ */
 export declare const trimNonstandardSpaces: (text: string) => string;

package/dist/types/components/search-bar/search-bar.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, h } from '../../stencil-public-runtime';
 import { PopoverPlacement } from '../popover/popover';
-import { Result } from '../result-list/result-list';
+import { Result } from '../result-list/types';
 export type SearchBarVariant = 'standard' | 'filled' | 'underlined' | 'blank';
 export declare class SearchBar {
   /**
@@ -98,7 +98,7 @@ export declare class SearchBar {
    */
   inputBlur: EventEmitter<FocusEvent>;
   private hostEl;
-  private cursorPosition;
+  private cursorPosition?;
   private displayedElements;
   private hasTriggered;
   private contentEl?;
@@ -124,6 +124,21 @@ export declare class SearchBar {
   private isIdenticalElement;
   private getTextContent;
   private getCursorPosition;
+  /**
+   * Inspects the cursor position for the following conditions:
+   *
+   * 1. The cursor has moved to text that contains a valid string
+   * and trigger character, indicating we need to dispatch a
+   * `searchChanged` event and display the results.
+   *
+   * 2. The cursor has moved within text that contains a valid string
+   * and trigger character, indicating we need to dispatch a
+   * `searchChanged` event to update the currently displayed results.
+   *
+   * 3. The cursor has moved to text that does not contain a valid
+   * string and trigger character, indicating we need to hide any
+   * displayed search results.
+   */
   private handleCursorPositionUpdate;
   private readTriggerValue;
   private includesBreakCharacter;

package/dist/types/components.d.ts

@@ -21,9 +21,8 @@ import { PopoverPlacement as PopoverPlacement1, PopoverResizeBehavior } from "./
 import { DetectOverflowOptions, FlipOptions, OffsetOptions } from "@floating-ui/dom";
 import { RadioChangeEventDetail } from "./components/radio/radio";
 import { HorizontalDragDirection, ResizableBoundsUpdate, ResizeEventDetails, VerticalDragDirection } from "./components/resizable/resizable";
-import { Result } from "./components/result-list/result-list";
+import { Result } from "./components/result-list/types";
 import { SearchBarVariant } from "./components/search-bar/search-bar";
-import { Result as Result1 } from "./components/result-list/result-list";
 import { LabelDisplay, SliderChangeEventDetails, SliderSize } from "./components/slider/slider";
 import { SpinnerColor, SpinnerSize } from "./components/spinner/spinner";
 import { InputChangeEventDetail as InputChangeEventDetail1, TextFieldAutocomplete, TextFieldType, TextFieldVariant, TextSize as TextSize1 } from "./components/text-field/text-field";
@@ -596,11 +595,11 @@ export namespace Components {
         /**
           * Replaced result values. This will be used in combination with the value of `value` to display existing replaced values.  This value will be automatically updated as `Result`s are clicked within this search bar's `<vertex-result-list>`.
          */
-        "replacements": Result1[];
+        "replacements": Result[];
         /**
           * The items to display in this search bar's `<vertex-result-list>`.  This can be used alongside the `searchChanged` event to query for results to display.
          */
-        "resultItems"?: Result1[];
+        "resultItems"?: Result[];
         /**
           * The character indicating that we should trigger a search.  When this character is encountered, the text following it (omitting `breakCharacters`) will be emitted as a `searchChanged` event.
          */
@@ -1828,7 +1827,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when a result has been selected to replace the trigger text.  Includes the ID of the `Result` selected.
          */
-        "onResultReplaced"?: (event: VertexSearchBarCustomEvent<Result1>) => void;
+        "onResultReplaced"?: (event: VertexSearchBarCustomEvent<Result>) => void;
         /**
           * Emitted when the value of the current search triggered by the specified `triggerCharacter` has changed.
          */
@@ -1849,11 +1848,11 @@ declare namespace LocalJSX {
         /**
           * Replaced result values. This will be used in combination with the value of `value` to display existing replaced values.  This value will be automatically updated as `Result`s are clicked within this search bar's `<vertex-result-list>`.
          */
-        "replacements"?: Result1[];
+        "replacements"?: Result[];
         /**
           * The items to display in this search bar's `<vertex-result-list>`.  This can be used alongside the `searchChanged` event to query for results to display.
          */
-        "resultItems"?: Result1[];
+        "resultItems"?: Result[];
         /**
           * The character indicating that we should trigger a search.  When this character is encountered, the text following it (omitting `breakCharacters`) will be emitted as a `searchChanged` event.
          */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertexvis/ui",
-  "version": "0.1.0-testing.7",
+  "version": "0.1.0-testing.8",
   "description": "The Vertex UI component library.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -87,5 +87,5 @@
     "@vertexvis/utils": "^0.21.0",
     "fast-deep-equal": "^3.1.3"
   },
-  "gitHead": "72b8c589035ef4955b205c744e4ff46a2a8976bb"
+  "gitHead": "70ed9ad971675b703df592cab5794568512ff4f8"
 }

package/dist/components/p-759f1655.js

@@ -1 +0,0 @@
-import{r as e,e as t,h as r,H as i,g as s}from"./p-6834631c.js";import{c as a}from"./p-fe062eb0.js";import{g as n}from"./p-1356f525.js";var l=function e(t,r){if(t===r)return!0;if(t&&r&&"object"==typeof t&&"object"==typeof r){if(t.constructor!==r.constructor)return!1;var i,s,a;if(Array.isArray(t)){if((i=t.length)!=r.length)return!1;for(s=i;0!=s--;)if(!e(t[s],r[s]))return!1;return!0}if(t.constructor===RegExp)return t.source===r.source&&t.flags===r.flags;if(t.valueOf!==Object.prototype.valueOf)return t.valueOf()===r.valueOf();if(t.toString!==Object.prototype.toString)return t.toString()===r.toString();if((i=(a=Object.keys(t)).length)!==Object.keys(r).length)return!1;for(s=i;0!=s--;)if(!Object.prototype.hasOwnProperty.call(r,a[s]))return!1;for(s=i;0!=s--;){var n=a[s];if(!e(t[n],r[n]))return!1}return!0}return t!=t&&r!=r};const o=()=>{if("undefined"!=typeof window)return window.getSelection()},h=e=>new Text(null!=e&&""!==e?e:" "),c=e=>`${e.type}:${e.id}`,d=(e,t,r)=>{const i=c(e);return{before:h(t),beforeSpace:h(v()),result:h(i),afterSpace:null!=r?h(b()):void 0,after:null!=r?h(r):void 0}},u=e=>Object.keys(e).map((t=>e[t])).filter((e=>null!=e)),v=()=>String.fromCharCode(8202),b=()=>String.fromCharCode(160),x=class{constructor(r){e(this,r),this.searchChanged=t(this,"searchChanged",7),this.inputChanged=t(this,"inputChanged",7),this.resultReplaced=t(this,"resultReplaced",7),this.inputFocus=t(this,"inputFocus",7),this.inputBlur=t(this,"inputBlur",7),this.rawElements=[],this.isIdenticalElement=(e,t)=>e===this.triggeredElement||this.getTextContent(e)===this.getTextContent(t),this.getTextContent=e=>{var t;return e instanceof HTMLElement?e.innerText:null!==(t=e.textContent)&&void 0!==t?t:""},this.handleCursorPositionUpdate=()=>{var e,t,r;const i=null===(e=o())||void 0===e?void 0:e.getRangeAt(0);if(null!=i)if(this.hasTriggered){if(this.hasTriggered){const e=this.readTriggerValue(null!==(r=i.commonAncestorContainer.textContent)&&void 0!==r?r:"",i.startOffset);null!=e?(this.triggeredRange=i,this.triggeredElement=i.commonAncestorContainer,this.searchChanged.emit(e.replace(this.triggerCharacter,""))):(this.hasTriggered=!1,this.triggeredRange=void 0,this.triggeredElement=void 0)}}else{const e=this.readTriggerValue(null!==(t=i.commonAncestorContainer.textContent)&&void 0!==t?t:"",i.startOffset);null!=e&&(this.hasTriggered=!0,this.triggeredRange=i,this.triggeredElement=i.commonAncestorContainer,this.searchChanged.emit(e.replace(this.triggerCharacter,"")))}this.cursorPosition=this.getCursorPosition()},this.readTriggerValue=(e,t)=>{const r=e.replace(String.fromCharCode(160)," "),i=r.substring(0,t),s=r.substring(t),a=`${i.includes(this.triggerCharacter)?i.substring(i.lastIndexOf(this.triggerCharacter)):""}${s.substring(0,this.firstIndexOfBreakCharacter(s))}`;return a.includes(this.triggerCharacter)&&!this.includesBreakCharacter(a)?a:void 0},this.includesBreakCharacter=e=>this.breakCharacters.some((t=>e.includes(t))),this.firstIndexOfBreakCharacter=e=>{const t=this.breakCharacters.map((t=>e.indexOf(t))).filter((e=>e>=0));return t.length>0?Math.min(...t):e.length},this.moveCursorToNodeEnd=(e,t=!1)=>{const r=o();if(null!=r){const i=document.createRange();i.selectNodeContents(e),i.collapse(t),r.removeAllRanges(),r.addRange(i)}},this.getContentAsString=()=>null!=this.contentEl?Array.from(this.contentEl.childNodes).reduce(((e,t)=>{var r;return t instanceof HTMLElement&&"true"===t.getAttribute("data-replaced")?`${e}${t.getAttribute("data-original")}`:t instanceof HTMLElement?`${e}${t.innerText}`:`${e}${null!==(r=t.textContent)&&void 0!==r?r:""}`}),"").replace(/[\u200A]/g,"").replace(/[\u00A0]/g," "):"",this.createReplacedElement=(e,t)=>{const r=this.hostEl.querySelector('template[slot="replaced"]');if(null!=r){const i=n(r);return i.bindings.bind(t),i.element.id=t.id,i.element.style.display="inline-block",i.element.contentEditable="false",i.element.tabIndex=-1,i.element.setAttribute("data-replaced","true"),i.element.setAttribute("data-original",e),i.element}throw new Error("Replaced template not defined.")},this.variant="standard",this.disabled=!1,this.triggerCharacter="@",this.breakCharacters=[" ","\n"],this.resultItems=void 0,this.placement="bottom-start",this.value=void 0,this.placeholder=void 0,this.replacements=[],this.replacementUriType="user",this.cursorPosition={x:0,y:0},this.displayedElements=[],this.hasTriggered=!1,this.handleKeyDown=this.handleKeyDown.bind(this),this.handleKeyUp=this.handleKeyUp.bind(this),this.handleResultClick=this.handleResultClick.bind(this),this.handleClick=this.handleClick.bind(this),this.handleWindowClick=this.handleWindowClick.bind(this),this.handleInput=this.handleInput.bind(this),this.handleBlur=this.handleBlur.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleCursorPositionUpdate=this.handleCursorPositionUpdate.bind(this),this.updateContent=this.updateContent.bind(this),this.replaceContent=this.replaceContent.bind(this)}componentDidLoad(){this.replaceContent(this.value)}connectedCallback(){window.addEventListener("click",this.handleWindowClick)}disconnectedCallback(){window.removeEventListener("click",this.handleWindowClick)}replaceContent(e,t){if(null!=e&&e!==t){const t=e.match(new RegExp(`${this.replacementUriType}:[0-9a-z-]{36}`,"g")),r=this.replacements.reduce(((e,t)=>Object.assign(Object.assign({},e),{[c(t)]:t})),{});let i=e;const s=null!=t?null==t?void 0:t.reduce(((e,t)=>{if(null!=r[t]){const s=c(r[t]),a=i.indexOf(s),n=i.substring(0,a),l=i.substring(a+s.length),o=d(r[t],n);return i=l,[...e,o.before,o.beforeSpace,o.result]}return e}),[]):[];this.rawElements=[...s,h(i)],this.updateContent(this.replacements)}}updateContent(e,t){null==this.contentEl||l(e,t)||(this.contentEl.innerHTML="",this.displayedElements=this.rawElements.map((e=>{const t=e instanceof HTMLElement?e.innerText:e.textContent,r=this.replacements.find((e=>null==t?void 0:t.includes(c(e))));return console.log(t),null!=t&&null!=r?this.createReplacedElement(t,r):e})),this.displayedElements.forEach((e=>{var t;null===(t=this.contentEl)||void 0===t||t.appendChild("string"==typeof e?h(e):e)})),null!=this.lastReplacedSpace&&this.moveCursorToNodeEnd(this.lastReplacedSpace),this.inputChanged.emit(this.getContentAsString()))}render(){var e;const t=a("wrapper",{standard:"standard"===this.variant,filled:"filled"===this.variant,underlined:"underlined"===this.variant,blank:"blank"===this.variant,disabled:this.disabled});return r(i,null,r("div",{class:t},r("span",{class:"content-input",role:"textbox",contentEditable:"true","aria-multiline":"true","data-placeholder":this.placeholder,ref:e=>this.contentEl=e,onKeyDown:this.handleKeyDown,onKeyUp:this.handleCursorPositionUpdate,onClick:this.handleCursorPositionUpdate,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur})),r("vertex-result-list",{position:this.cursorPosition,placement:this.placement,open:this.hasTriggered&&null!=this.resultItems&&this.resultItems.length>0,items:null!==(e=this.resultItems)&&void 0!==e?e:[],onEnterPressed:this.handleResultClick,onResultClick:this.handleResultClick},r("slot",{name:"results"})),r("slot",{name:"replaced"}))}handleKeyDown(e){this.hasTriggered&&this.breakCharacters.includes(e.key)&&(this.hasTriggered=!1,this.triggeredRange=void 0,this.triggeredElement=void 0)}handleKeyUp(e){this.handleCursorPositionUpdate(),this.cursorPosition=this.getCursorPosition()}async handleInput(){this.inputChanged.emit(this.getContentAsString())}handleClick(){this.handleCursorPositionUpdate()}handleWindowClick(e){e.target instanceof HTMLElement&&"true"===e.target.getAttribute("data-replaced")&&null!=e.target.nextSibling&&this.moveCursorToNodeEnd(e.target.nextSibling,!0)}handleFocus(e){this.inputFocus.emit(e)}handleBlur(e){this.hasTriggered=!1,this.inputBlur.emit(e)}handleResultClick(e){var t;const r=this.triggeredRange,i=this.triggeredElement,s=i instanceof HTMLElement?i.innerText:null==i?void 0:i.textContent;if(null!=this.contentEl&&null!=r&&null!=i&&null!=s){const a=null!==(t=this.readTriggerValue(s,r.startOffset))&&void 0!==t?t:"",n=s.split(a),l=d(e.detail,n[0],n[1]);this.lastReplacedSpace=l.afterSpace,this.rawElements=Array.from(this.contentEl.childNodes).reduce(((e,t)=>this.isIdenticalElement(t,i)?[...e,...u(l)]:[...e,t]),[]),this.hasTriggered=!1,this.replacements=[...this.replacements.filter((t=>t.id!==e.detail.id)),e.detail],this.resultReplaced.emit(e.detail)}}getCursorPosition(){var e;const t=o();if(null!=t&&t.rangeCount>0){const r=t.getRangeAt(0).getBoundingClientRect(),i=null===(e=this.contentEl)||void 0===e?void 0:e.getBoundingClientRect(),s=r.bottom||(null==i?void 0:i.bottom)||0,a=r.top||(null==i?void 0:i.top)||0;return{x:r.left||(null==i?void 0:i.left)||0,y:this.placement.includes("top")?a:s}}throw new Error("Unable to retrieve window selection.")}get hostEl(){return s(this)}static get watchers(){return{value:["replaceContent"],replacements:["updateContent"]}}};x.style=".wrapper.sc-vertex-search-bar{display:flex;border:1px solid var(--vertex-ui-neutral-600);border-radius:0.5rem}.content-input.sc-vertex-search-bar{width:100%;box-sizing:border-box;padding:6px 0.5em 7px;border:1px solid transparent;background:none;font-family:var(--vertex-ui-font-family);font-weight:var(--vertex-ui-font-weight-base);font-size:0.875rem;line-height:1.4;white-space:pre-line}.standard.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);color:var(--vertex-ui-neutral-800)}.standard.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.standard.sc-vertex-search-bar:hover:not(.disabled),.standard.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-500)}.standard.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.standard.disabled.sc-vertex-search-bar,.standard.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.blank.sc-vertex-search-bar{color:var(--vertex-ui-neutral-800)}.blank.sc-vertex-search-bar:not(:hover) .content-input.sc-vertex-search-bar:focus{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-500)}.blank.sc-vertex-search-bar:hover:not(.disabled) .content-input.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-400);border-radius:4px}.blank.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-200)}.blank.disabled.sc-vertex-search-bar,.blank.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);color:var(--vertex-ui-neutral-800)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.filled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.filled.sc-vertex-search-bar:hover:not(.disabled),.filled.sc-vertex-search-bar:focus{border-bottom-color:var(--vertex-ui-blue-600)}.filled.disabled.sc-vertex-search-bar{border-color:var(--vertex-ui-neutral-100)}.filled.disabled.sc-vertex-search-bar,.filled.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar{background-color:var(--vertex-ui-white);border-color:var(--vertex-ui-white) var(--vertex-ui-white) var(--vertex-ui-neutral-400) var(--vertex-ui-white);color:var(--vertex-ui-neutral-800)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-700)}.underlined.sc-vertex-search-bar:hover:not(.disabled),.underlined.sc-vertex-search-bar:focus{background-color:var(--vertex-ui-neutral-200);border-color:var(--vertex-ui-neutral-200);border-bottom-color:var(--vertex-ui-blue-600)}.underlined.disabled.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-neutral-200)}.underlined.disabled.sc-vertex-search-bar,.underlined.disabled.sc-vertex-search-bar .content-input.sc-vertex-search-bar:empty::before{content:attr(data-placeholder);color:var(--vertex-ui-neutral-400)}.underlined.has-error.sc-vertex-search-bar{border-bottom-color:var(--vertex-ui-red-600)}";export{x as S}

package/dist/components/p-7f42b27b.entry.js

@@ -1 +0,0 @@
-export{S as vertex_search_bar}from"./p-759f1655.js";import"./p-6834631c.js";import"./p-fe062eb0.js";import"./p-1356f525.js";import"./p-59032668.js";