@ebrains/components 2.1.0 → 2.3.0

package/dist/collection/shared-ui/eds-form/eds-form.js

@@ -19,13 +19,17 @@ import { getFormInitData } from "../../utils/eds-form/formUtils";
 export class EdsForm {
     constructor() {
         this.name = 'eds-form';
+        this.title = 'Form Title';
+        this.description = 'Form Description';
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
+        this.buttonIntent = 'primary';
         this.errorMessage = 'Some fields in your form are incorrect.';
         this.fields = [];
         this.groups = [];
         this.initData = {};
+        this.formStyle = 'default';
         this.values = {};
         this.isSubmitting = false;
         this.hasError = false;
@@ -147,6 +151,7 @@ export class EdsForm {
         return formData;
     }
     makeFormData() {
+        var _a;
         const formData = new FormData();
         // Add the form name
         formData.append('form_name', this.name);
@@ -158,6 +163,41 @@ export class EdsForm {
             // Append each key-value pair to the FormData object.
             formData.append(key, this.values[key]);
         });
+        // 2) Only do the (slower) DOM scan if we actually have file fields in the config
+        const hasFileField = (_a = this.parsedFields) === null || _a === void 0 ? void 0 : _a.some((f) => (f === null || f === void 0 ? void 0 : f.type) === 'file');
+        if (hasFileField && this.formEl) {
+            // Find file inputs inside each eds-input-field's shadowRoot
+            const hosts = Array.from(this.formEl.querySelectorAll('eds-input-field'));
+            hosts.forEach((host) => {
+                const root = host.shadowRoot;
+                if (!root)
+                    return;
+                const fileInputs = Array.from(root.querySelectorAll('input[type="file"][name]'));
+                console.log(fileInputs);
+                fileInputs.forEach((fi) => {
+                    const name = fi.name;
+                    const files = fi.files ? Array.from(fi.files) : [];
+                    if (files.length > 0) {
+                        // Append each file under the same field name (backend can use request.files.getlist(name))
+                        files.forEach((file) => formData.append(name, file));
+                    }
+                    else {
+                        // If you need to ensure presence even when empty, uncomment:
+                        // formData.append(name, new Blob([], { type: 'application/octet-stream' }), '');
+                    }
+                });
+            });
+            // (Optional) mark that this payload includes files (handy in logs / policies)
+            // formData.set('_has_files', '1');
+        }
+        formData.forEach((value, key) => {
+            if (value instanceof File) {
+                console.log(`File field: ${key}, File name: ${value.name}, File size: ${value.size}`);
+            }
+            else {
+                console.log(`Field: ${key}, Value: ${value}`);
+            }
+        });
         return formData;
     }
     handleChange(e, field) {
@@ -268,11 +308,11 @@ export class EdsForm {
             message: `${field.name} updated`
         });
     }
-    handleSubmit() {
+    handleSubmit(e) {
         var _a, _b;
-        if (this.isSubmitting) {
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        if (this.isSubmitting)
             return;
-        }
         this.isSubmitting = true;
         this.validateForm();
         if (this.hasError) {
@@ -323,10 +363,15 @@ export class EdsForm {
     }
     get groupedFields() {
         const map = {};
-        // initialize buckets for each group
+        // initialize buckets for each declared group
         this.parsedGroups.forEach((g) => (map[g.id] = []));
+        // always keep an ungrouped bucket
         map['__ungrouped'] = [];
+        // only bucket fields that are currently visible
         this.parsedFields.forEach((f) => {
+            if (!this.isFieldVisible(f)) {
+                return;
+            }
             const gid = f.groupId || '__ungrouped';
             if (!map[gid]) {
                 map[gid] = [];
@@ -347,7 +392,7 @@ export class EdsForm {
             return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
         else if (field.type === 'nps') {
-            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
+            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
         }
         return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, error: !!this.errors[field.name], errorMessage: (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
@@ -358,9 +403,13 @@ export class EdsForm {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
         const buckets = this.groupedFields;
-        return (h("form", { key: 'a66997f39b5be347a4d502f77bcd1da9d1a274ac', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'f8800d2ebe64b3279234ab8ebe20e535dc822872' }, h("slot", { key: 'b4194073b281dec35a79a6cc974fdf7476a67807' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        // build the shadow/bg classes if formStyle="shadow"
+        const styleClasses = this.formStyle === 'shadow'
+            ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
+            : '';
+        return (h("form", { key: 'a2e7de988c60301b92f6b756702bfcc78e9f3d90', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '22172631522aa6094d8b163b0774c57ef4404d60', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '0597bbacbaf5f3d9ec1ab938cf755a10baafdf21', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: '5e636072bc2692071bd0b518af721999cc8b511e', class: "f-body-02 text-light" }, this.description), h("slot", { key: '79d21172208eb77ec6460e817d3c7bc3a680c806' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "container mt-20", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '2fc83ebb6b0a472f6853618602c37ee83adae9ff', class: "flex flex-col mt-20 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f)))), this.formBtn && (h("div", { key: '91b569b1a4513945f3228c374ae45b52ea17f91d', class: "mt-32" }, h("eds-button", { key: '1a8feaecd5a7f292f8aeae3db900700b4f7fb8d4', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: 'b99941e53dec1c8c4e167d8588d6e86793838d1a', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: '27365a4d7d8150ff4e94ffb3d27d011400c8c412', class: "mt-32" }, h("eds-button", { key: '66f89292b95d9549e3718d7e499b0724762127c6', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }
@@ -394,6 +443,42 @@ export class EdsForm {
                 "reflect": false,
                 "defaultValue": "'eds-form'"
             },
+            "title": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The title displayed above the form."
+                },
+                "attribute": "title",
+                "reflect": false,
+                "defaultValue": "'Form Title'"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The description displayed below the title."
+                },
+                "attribute": "description",
+                "reflect": false,
+                "defaultValue": "'Form Description'"
+            },
             "setFormUrl": {
                 "type": "boolean",
                 "mutable": false,
@@ -448,6 +533,24 @@ export class EdsForm {
                 "reflect": false,
                 "defaultValue": "'Submit'"
             },
+            "buttonIntent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost'",
+                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant/style intent for the submit button (e.g., primary, secondary, tertiary, ghost)."
+                },
+                "attribute": "button-intent",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
             "errorMessage": {
                 "type": "string",
                 "mutable": false,
@@ -517,6 +620,24 @@ export class EdsForm {
                     "text": "The init data the form will attempt to populate in the provided fields."
                 },
                 "defaultValue": "{}"
+            },
+            "formStyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'shadow'",
+                    "resolved": "\"default\" | \"shadow\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Choose between default layout or an always-shadow style.\nWhen \"shadow\", the form gets the same effect-shadow + shadow-hover classes"
+                },
+                "attribute": "form-style",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }

package/dist/collection/shared-ui/eds-form/eds-form.stories.js

@@ -4,6 +4,8 @@ export default {
     component: 'eds-form',
     argTypes: {
         name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
+        title: { control: 'text', description: 'Form title displayed above the form' },
+        description: { control: 'text', description: 'Form description displayed below the title' },
         fields: {
             control: 'object',
             description: 'Form fields as JSON array'
@@ -21,23 +23,38 @@ export default {
             control: 'text',
             description: 'Form button Label',
             defaultValue: 'Validate'
+        },
+        buttonIntent: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'tertiary', 'ghost'],
+            description: 'Variant/style intent for the submit button'
+        },
+        formStyle: {
+            control: 'select',
+            options: ['default', 'shadow']
         }
     }
 };
 const Template = (args) => html `
   <eds-form
     name="${args.name}"
+    title="${args.title}"
+    description="${args.description}"
     .fields=${args.fields}
     .groups=${args.groups}
     .initData=${args.initData}
     .setFormUrl=${args.setFormUrl}
     form-btn="${args.formBtn}"
     form-btn-label="${args.formBtnLabel}"
+    button-intent="${args.buttonIntent}"
+    form-style="${args.formStyle}"
   ></eds-form>
 `;
 export const Default = Template.bind({});
 Default.args = {
     name: 'extended-form',
+    title: 'User Details',
+    description: 'Please fill out the form below.',
     fields: [
         { name: 'username', label: 'Username', type: 'text', required: true, maxlength: 10, placeholder: 'Username' },
         { name: 'email', label: 'Email', type: 'email', required: true },
@@ -91,12 +108,17 @@ Default.args = {
             disabled: true
         }
     ],
+    setFormUrl: true,
     formBtn: true,
-    formBtnLabel: 'Validate'
+    formBtnLabel: 'Validate',
+    buttonIntent: 'primary',
+    formStyle: 'default'
 };
 export const WithGroups = Template.bind({});
 WithGroups.args = {
     name: 'grouped-form',
+    title: 'Grouped Form',
+    description: 'Form with grouped fields',
     fields: [
         { name: 'firstName', label: 'First Name', type: 'text', required: true, groupId: 'personal' },
         { name: 'lastName', label: 'Last Name', type: 'text', required: true, groupId: 'personal' },
@@ -106,12 +128,17 @@ WithGroups.args = {
         { id: 'personal', title: 'Personal Info' },
         { id: 'comments', title: 'Comments' }
     ],
+    setFormUrl: true,
     formBtn: true,
-    formBtnLabel: 'Submit'
+    formBtnLabel: 'Submit',
+    buttonIntent: 'secondary',
+    formStyle: 'default'
 };
 export const WithInitData = Template.bind({});
 WithInitData.args = {
     name: 'prefill-form',
+    title: 'Prefilled Form',
+    description: 'Form with initial values',
     fields: [
         { name: 'username', label: 'Username', type: 'text', required: true },
         { name: 'email', label: 'Email', type: 'email', required: true }
@@ -123,5 +150,7 @@ WithInitData.args = {
     },
     setFormUrl: false,
     formBtn: true,
-    formBtnLabel: 'Save'
+    formBtnLabel: 'Save',
+    buttonIntent: 'ghost',
+    formStyle: 'default'
 };

package/dist/collection/shared-ui/eds-frame/eds-frame.js

@@ -84,7 +84,7 @@ export class EdsFrame {
         }
     }
     render() {
-        return (h("div", { key: '9f5b6280292996b66fb3380678fae7748aba8cb3', class: this.articleClasses() }, h("div", { key: '6e4f6e0ce9b44fe94ff4622285258747503d9034', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '36bb5a7b005b4c23a7042e5cf06769efe29b07db', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '9d64e26eaa9e79d68e13d6a0faf67c8ca68d2097', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '7b4f5eb19460a178b98586aa38088e3dc5625671', class: this.articleClasses() }, h("div", { key: '98aefbd4cab33f14c9aa3152c122a11b24df4a02', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'd0cdd2f3354bddc99030ee5215f2bc24b139a261', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '030c560bbd0209160c92bc2d152f8d42484dc86b', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     static get is() { return "eds-frame"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -21,11 +21,16 @@ export class EdsFullscreenMenu {
         this.isMenuOpen = false;
     }
     /**
-     * Listens for the toggleMenu event to open or close the menu.
-     * This event is emitted by the eds-header component.
+     * Listens on `body` for `toggleheadermenu` to open/close the menu.
+     * The event detail should be a boolean (`true` = open, `false` = close).
+     *
+     * @example
+     * ```js
+     * document.body.dispatchEvent(new CustomEvent('toggleheadermenu', { detail: true }));
+     * ```
      */
     handleToggleMenu(event) {
-        this.isMenuOpen = event.detail; // Set isMenuOpen based on the event payload
+        this.isMenuOpen = !!event.detail;
     }
     /** Opens the menu */
     openMenu() {
@@ -89,15 +94,23 @@ export class EdsFullscreenMenu {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | { label: string; url: string; icon?: string; external?: boolean }[]",
-                    "resolved": "string | { label: string; url: string; icon?: string; external?: boolean; }[]",
-                    "references": {}
+                    "original": "string | LinkItem[]",
+                    "resolved": "LinkItem[] | string",
+                    "references": {
+                        "LinkItem": {
+                            "location": "global",
+                            "id": "global::LinkItem"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "JSON string representing the links for primary navigation.\nEach link should include `label`, `url`, and optionally an `icon`."
+                    "tags": [{
+                            "name": "example",
+                            "text": "links='[{\"label\":\"Home\",\"url\":\"/\"},{\"label\":\"Docs\",\"url\":\"/docs\",\"icon\":\"book\"}]'"
+                        }],
+                    "text": "Primary navigation links.\nAccepts a JSON string or array of objects `{ label, url, icon?, external? }`."
                 },
                 "attribute": "links",
                 "reflect": false
@@ -113,8 +126,14 @@ export class EdsFullscreenMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "JSON string representing the extra menu links a user wants for smaill screens navigation.\nEach link should include `label`, `url`."
+                    "tags": [{
+                            "name": "example",
+                            "text": "menu-links='[{\"label\":\"Help\",\"url\":\"/help\"},{\"label\":\"Contact\",\"url\":\"/contact\"}]'"
+                        }, {
+                            "name": "attr",
+                            "text": "menu-links"
+                        }],
+                    "text": "Secondary navigation links (extra menu items for small screens).\nAccepts a JSON string or array of objects `{ label, url }`."
                 },
                 "attribute": "menu-links",
                 "reflect": false
@@ -130,8 +149,14 @@ export class EdsFullscreenMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"/\""
+                        }, {
+                            "name": "attr",
+                            "text": "home-url"
+                        }],
+                    "text": "URL for the logo link in the header."
                 },
                 "attribute": "home-url",
                 "reflect": false,
@@ -148,8 +173,14 @@ export class EdsFullscreenMenu {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": ""
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }, {
+                            "name": "attr",
+                            "text": "inverse-header"
+                        }],
+                    "text": "When true, uses an inverse (dark) header background."
                 },
                 "attribute": "inverse-header",
                 "reflect": false,
@@ -170,8 +201,11 @@ export class EdsFullscreenMenu {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Event to signal menu open/close actions"
+                    "tags": [{
+                            "name": "event",
+                            "text": "menuClose"
+                        }],
+                    "text": "Emitted when the menu is closed (via UI or resize)."
                 },
                 "complexType": {
                     "original": "void",

package/dist/collection/shared-ui/eds-global-search/eds-global-search.css

@@ -0,0 +1,222 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+p {
+  margin: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.search-wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.search-dropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
+  max-height: 500px;
+  overflow: hidden;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+}
+
+/* States */
+.dropdown-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  color: #616161;
+  font-size: 14px;
+}
+
+/* Results List */
+.dropdown-results {
+  list-style: none;
+  margin: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 440px;
+}
+
+.result-item {
+  padding: 10px 14px;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  border-left: 3px solid transparent;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.result-item:hover,
+.result-item--selected {
+  background-color: var(--grey-200);
+  border-left-color: var(--green-600);
+}
+
+.result-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.result-snippet {
+  font-size: 13px;
+  color: #616161;
+  line-height: 1.4;
+  margin: 0;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/* Footer */
+.dropdown-footer {
+  border-top: 1px solid #e0e0e0;
+  padding: 8px 16px;
+  background: #fafafa;
+  flex-shrink: 0;
+}
+
+.footer-hint {
+  font-size: 11px;
+  color: #757575;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+kbd {
+  display: inline-block;
+  padding: 2px 5px;
+  font-size: 10px;
+  font-family: monospace;
+  line-height: 1;
+  color: #424242;
+  background-color: #f5f5f5;
+  border: 1px solid #bdbdbd;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* Scrollbar */
+.dropdown-results::-webkit-scrollbar {
+  width: 8px;
+}
+
+.dropdown-results::-webkit-scrollbar-track {
+  background: #f5f5f5;
+}
+
+.dropdown-results::-webkit-scrollbar-thumb {
+  background: #bdbdbd;
+  border-radius: 4px;
+}
+
+.dropdown-results::-webkit-scrollbar-thumb:hover {
+  background: #9e9e9e;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.text-error {
+  color: var(--red-700);
+}
+
+.text-lighter {
+  color: var(--grey-600);
+}
+
+.text-lightest {
+  color: var(--grey-500);
+}
+
+.ml-4 {
+  margin-left: 0.25rem;
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.ml-16 {
+  margin-left: 1rem;
+}
+
+.p-16 {
+  padding: 1rem;
+}
+
+.p-64 {
+  padding: 4rem;
+}
+
+.f-body-02 {
+  font-family: var(--f-body-02-fontFamily);
+  font-weight: var(--f-body-02-fontWeight);
+  font-size: var(--f-body-02-fontSize);
+  line-height: var(--f-body-02-lineHeight);
+  letter-spacing: var(--f-body-02-letterSpacing);
+}
+
+.f-ui-03 {
+  font-family: var(--f-ui-03-fontFamily);
+  font-weight: var(--f-ui-03-fontWeight);
+  font-size: var(--f-ui-03-fontSize);
+  line-height: var(--f-ui-03-lineHeight);
+  letter-spacing: var(--f-ui-03-letterSpacing);
+}
+
+.f-ui-03-light {
+  font-family: var(--f-ui-03-light-fontFamily);
+  font-weight: var(--f-ui-03-light-fontWeight);
+  font-size: var(--f-ui-03-light-fontSize);
+  line-height: var(--f-ui-03-light-lineHeight);
+  letter-spacing: var(--f-ui-03-light-letterSpacing);
+}
+
+.f-ui-04 {
+  font-family: var(--f-ui-04-fontFamily);
+  font-weight: var(--f-ui-04-fontWeight);
+  font-size: var(--f-ui-04-fontSize);
+  line-height: var(--f-ui-04-lineHeight);
+  letter-spacing: var(--f-ui-04-letterSpacing);
+}