@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js

@@ -0,0 +1,136 @@
+import { Host, h } from "@stencil/core";
+export class CuraDropdownSearchOption {
+    constructor() {
+        this.handleOptionClick = () => {
+            this.selected = !this.selected;
+            this.optionSelected.emit(this.value);
+            this.updateIconColor();
+        };
+        this.value = undefined;
+        this.selected = false;
+        this.hovered = false;
+        this.styles = {};
+    }
+    connectedCallback() {
+        this.weights = window.CuraAPI.theme.fonts.getWeights();
+        this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);
+        this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);
+        this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+        this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`, 50);
+    }
+    componentDidLoad() {
+        this.updateIconColor();
+    }
+    updateIconColor() {
+        const iconElement = this.hostElement.querySelector('[slot="image"] cura-icon');
+        if (iconElement) {
+            iconElement.setAttribute('color', this.selected ? 'primary' : 'neutral-dark');
+        }
+    }
+    render() {
+        return (h(Host, { key: 'd045683759a6be8de6ba6e1e7c3ffb3c7e64c928', style: this.styles, slot: "dropdown-search-option" }, h("ul", { key: '6fe79f291239629e214bcda850891413c307e120' }, h("li", { key: 'b62dcc68f2c14da18894fbcdd5e68d5a417ce053', onClick: this.handleOptionClick, value: this.value, class: {
+                hovered: this.hovered,
+                selected: this.selected,
+            } }, h("slot", { key: '8883c51c5789d57b8a6b4567f5faeaacd5d52bff', name: "image" }), h("cura-heading", { key: 'f701d19b2e707a78be62d3df5a768bf83959ecaa', size: "xsmall", lineHeight: "16px", marginBlock: "0px", weight: "bold", color: "neutral-black" }, h("slot", { key: 'ffe7d83f45a1757df017061a71b950cc50ce52d5' })), h("slot", { key: '4d0f901f5b5e1b7c8ebe5e1148118a2645c6eddd', name: "action" })))));
+    }
+    static get is() { return "cura-dropdown-search-option"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-dropdown-search-option.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-dropdown-search-option.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the dropdown search option."
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the dropdown search option is selected."
+                },
+                "attribute": "selected",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hovered": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates if the dropdown search option is hovered."
+                },
+                "attribute": "hovered",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "optionSelected",
+                "name": "optionSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the option is selected."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "selected",
+                "methodName": "updateIconColor"
+            }];
+    }
+}
+//# sourceMappingURL=cura-dropdown-search-option.js.map

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-option.js","sourceRoot":"","sources":["../../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOrG,MAAM,OAAO,wBAAwB;;QAmC3B,sBAAiB,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;YAC/B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACrC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC;;wBA9B0D,KAAK;uBAKN,KAAK;sBAE9C,EAAE;;IAWpB,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QACvD,IAAI,CAAC,MAAM,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAC;QAC/F,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC;QACvF,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IACjG,CAAC;IAQD,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGO,eAAe;QACrB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC/E,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;QAChF,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,EAAC,wBAAwB;YACrD;gBACE,2DACE,OAAO,EAAE,IAAI,CAAC,iBAAiB,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE;wBACL,OAAO,EAAE,IAAI,CAAC,OAAO;wBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;qBACxB;oBAED,6DAAM,IAAI,EAAC,OAAO,GAAQ;oBAC1B,qEAAc,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe;wBACjG,8DAAa,CACA;oBACf,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACxB,CACF,CACA,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-option',\n  styleUrl: 'cura-dropdown-search-option.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchOption {\n  /**\n   * The value of the dropdown search option.\n   */\n  @Prop({ reflect: true }) value: string;\n\n  /**\n   * Indicates if the dropdown search option is selected.\n   */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /**\n   * Indicates if the dropdown search option is hovered.\n   */\n  @Prop({ reflect: true, mutable: true }) hovered: boolean = false;\n\n  @State() styles = {};\n\n  /**\n   * Event emitted when the option is selected.\n   */\n  @Event() optionSelected: EventEmitter<string>;\n\n  @Element() hostElement: HTMLElement;\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--neutral-purewhite'] = window.CuraAPI.theme.colors.getColor(`neutral-purewhite`);\n    this.styles['--neutral-light'] = window.CuraAPI.theme.colors.getColor(`neutral-light`);\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--primary-lighter'] = window.CuraAPI.theme.colors.getColor(`primary-lighter`, 50);\n  }\n\n  private handleOptionClick = () => {\n    this.selected = !this.selected;\n    this.optionSelected.emit(this.value);\n    this.updateIconColor();\n  };\n\n  componentDidLoad() {\n    this.updateIconColor();\n  }\n\n  @Watch('selected')\n  private updateIconColor() {\n    const iconElement = this.hostElement.querySelector('[slot=\"image\"] cura-icon');\n    if (iconElement) {\n      iconElement.setAttribute('color', this.selected ? 'primary' : 'neutral-dark');\n    }\n  }\n\n  render() {\n    return (\n      <Host style={this.styles} slot=\"dropdown-search-option\">\n        <ul>\n          <li\n            onClick={this.handleOptionClick}\n            value={this.value}\n            class={{\n              hovered: this.hovered,\n              selected: this.selected,\n            }}\n          >\n            <slot name=\"image\"></slot>\n            <cura-heading size=\"xsmall\" lineHeight=\"16px\" marginBlock=\"0px\" weight=\"bold\" color=\"neutral-black\">\n              <slot></slot>\n            </cura-heading>\n            <slot name=\"action\"></slot>\n          </li>\n        </ul>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.js

@@ -0,0 +1,56 @@
+const renderCuraDropdownSearchOption = (args) => {
+    return `<cura-dropdown-search-option value="${args.value}">
+    ${args.image ? `<div slot="image">${args.image}</div>` : ''}
+    ${args.content}
+    ${args.action ? `<div slot="action">
+      ${args.action}
+    </div>` : ''}
+</cura-dropdown-search-option>
+  `;
+};
+export default {
+    title: 'Componentes/DropdownSearch/DropdownSearchOption',
+    tags: ['autodocs'],
+    render: args => {
+        return renderCuraDropdownSearchOption(args);
+    },
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'Valor da opção.',
+            table: {
+                category: 'Properties',
+            },
+        },
+        image: {
+            control: 'text',
+            description: 'Conteúdo do slot `image`.',
+            table: {
+                category: 'Slots',
+            },
+        },
+        content: {
+            control: 'text',
+            description: 'Conteúdo do slot. É englobado por um `<cura-heading>`',
+            table: {
+                category: 'Slots',
+            },
+        },
+        action: {
+            control: 'text',
+            description: 'Conteúdo do slot `action`.',
+            table: {
+                category: 'Slots',
+            },
+        },
+    },
+};
+export const DropdownSearchOption = {
+    args: {
+        value: 'Clinica Médica Geral',
+        image: '<cura-icon size="24" name="medical"></cura-icon>',
+        content: 'Clinica Médica Geral',
+        action: `<cura-button-transparent font-color="dark" color='primary' icon-name='delete' size='small' icon-only={true}></cura-button-transparent>`,
+    },
+};
+//# sourceMappingURL=cura-dropdown-search-option.stories.js.map

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-option.stories.js","sourceRoot":"","sources":["../../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search-option/cura-dropdown-search-option.stories.tsx"],"names":[],"mappings":"AAAA,MAAM,8BAA8B,GAAG,CAAC,IAAS,EAAE,EAAE;IACnD,OAAO,uCAAuC,IAAI,CAAC,KAAK;MACpD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE;MACzD,IAAI,CAAC,OAAO;MACZ,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QACZ,IAAI,CAAC,MAAM;WACR,CAAC,CAAC,CAAC,EAAE;;GAEb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,iDAAiD;IACxD,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,OAAO,8BAA8B,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iBAAiB;YAC9B,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;QAGD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2BAA2B;YACxC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uDAAuD;YACpE,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,4BAA4B;YACzC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;aAClB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,IAAI,EAAE;QACJ,KAAK,EAAE,sBAAsB;QAC7B,KAAK,EAAE,kDAAkD;QACzD,OAAO,EAAE,sBAAsB;QAC/B,MAAM,EAAE,wIAAwI;KACjJ;CACF,CAAC","sourcesContent":["const renderCuraDropdownSearchOption = (args: any) => {\n  return `<cura-dropdown-search-option value=\"${args.value}\">\n    ${args.image ? `<div slot=\"image\">${args.image}</div>` : ''}\n    ${args.content}\n    ${args.action ? `<div slot=\"action\">\n      ${args.action}\n    </div>` : ''}\n</cura-dropdown-search-option>\n  `;\n};\n\nexport default {\n  title: 'Componentes/DropdownSearch/DropdownSearchOption',\n  tags: ['autodocs'],\n\n  render: args => {\n    return renderCuraDropdownSearchOption(args);\n  },\n  argTypes: {\n    value: {\n      control: 'text',\n      description: 'Valor da opção.',\n      table: {\n        category: 'Properties',\n      },\n    },\n\n\n    image: {\n      control: 'text',\n      description: 'Conteúdo do slot `image`.',\n      table: {\n        category: 'Slots',\n      },\n    },\n    content: {\n      control: 'text',\n      description: 'Conteúdo do slot. É englobado por um `<cura-heading>`',\n      table: {\n        category: 'Slots',\n      },\n    },\n    action: {\n      control: 'text',\n      description: 'Conteúdo do slot `action`.',\n      table: {\n        category: 'Slots',\n      },\n    },\n  },\n};\n\nexport const DropdownSearchOption = {\n  args: {\n    value: 'Clinica Médica Geral',\n    image: '<cura-icon size=\"24\" name=\"medical\"></cura-icon>',\n    content: 'Clinica Médica Geral',\n    action: `<cura-button-transparent font-color=\"dark\" color='primary' icon-name='delete' size='small' icon-only={true}></cura-button-transparent>`,\n  },\n};\n"]}

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.css

@@ -0,0 +1,10 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+cura-label {
+  padding: 12px 0px;
+  border-bottom: 1px solid var(--neutral-light);
+}

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class CuraDropdownSearchOptionTitle {
+    render() {
+        return (h(Host, { key: '6e2312e0bf01db89fe6c85fbe525c02ed2dff7ec', slot: "dropdown-search-option" }, h("cura-label", { key: '551017409617799c76a6119b4e61596a4188f5ad', color: "neutral-dark", size: "xsmall", lineHeight: "16px", marginBlock: "0" }, h("slot", { key: '4e0b3b588dec8603df342358840bc0a2d8ab3c4c' }))));
+    }
+    static get is() { return "cura-dropdown-search-option-title"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-dropdown-search-option-title.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-dropdown-search-option-title.css"]
+        };
+    }
+}
+//# sourceMappingURL=cura-dropdown-search-option-title.js.map

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-dropdown-search-option-title.js","sourceRoot":"","sources":["../../../../../src/components/forms/cura-dropdown-search/cura-dropdown-search-option-title/cura-dropdown-search-option-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAG,CAAC,EAAE,MAAM,eAAe,CAAC;AAOpD,MAAM,OAAO,6BAA6B;IACxC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,wBAAwB;YACjC,mEAAY,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG;gBAC9E,8DAAa,CACF,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host,  h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-dropdown-search-option-title',\n  styleUrl: 'cura-dropdown-search-option-title.scss',\n  shadow: true,\n})\nexport class CuraDropdownSearchOptionTitle {\n  render() {\n    return (\n      <Host slot=\"dropdown-search-option\">\n        <cura-label color=\"neutral-dark\" size=\"xsmall\" lineHeight=\"16px\" marginBlock=\"0\">\n          <slot></slot>\n        </cura-label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/forms/cura-dropdown-search/cura-dropdown-search.css

@@ -0,0 +1,149 @@
+/**
+ * Global Shadow Level Definitions.
+ * Required CSS Properties with respective opacities:
+ * --neutral-black,
+ * --neutral-purewhite,
+ * --accent-base
+ * --primary-base
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-purewhite opacity: 0.2
+ * Use: @include shadow-level1(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level2(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.16
+ * Use: @include shadow-level3(--neutral-black-shadow){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.12
+ * Use: @include shadow-level4(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --neutral-black opacity: 0.8
+ * Use: @include shadow-level5(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --accent-base opacity: 0.2
+ * Use: @include shadow-level5-accent(){ ... }
+ */
+/**
+ * Shadow Level base definitions.
+ * Required CSS Properties: --primary-base opacity: 0.16
+ * Use: @include shadow-level3-primary(){ ... }
+ */
+:host {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.dropdown {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  width: inherit;
+}
+.dropdown-input-search {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: transparent;
+}
+.dropdown-input-search.dropdown-open ::part(cura-input-field) {
+  border-radius: 4px 4px 0px 0px;
+}
+.dropdown-input-search.dropdown-open ::slotted([slot=helperText]) {
+  display: none;
+}
+.dropdown-input-search.dropdown-open cura-input-text ::slotted([slot=helperText]) {
+  display: none;
+}
+.dropdown-search-list {
+  position: absolute;
+  top: calc(100% - 8px);
+  width: 100%;
+  max-height: 630px;
+  padding: 12px 12px;
+  margin: 0;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 8px 0px var(--neutral-black-shadow, rgba(38, 38, 38, 0.16));
+  border-radius: 0px 0px 4px 4px;
+  border-top: 0 var(--neutral-light);
+  border-right: 2px solid var(--neutral-light);
+  border-bottom: 2px solid var(--neutral-light);
+  border-left: 2px solid var(--neutral-light);
+  background-color: var(--neutral-purewhite);
+  list-style: none;
+  overflow-y: auto;
+}
+.dropdown-search-list-input-search {
+  width: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 16px 8px;
+  border-bottom: 2px solid var(--info-base);
+  background-color: var(--neutral-purewhite);
+}
+.dropdown-search-list-input-search cura-input-text {
+  width: inherit;
+}
+.dropdown-search-list-input-search.error {
+  background-color: var(--error-lighter);
+  border-bottom: 2px solid var(--error-dark);
+}
+.dropdown-mobile {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: 10000;
+}
+.dropdown-mobile .dropdown-input-search {
+  display: flex;
+  gap: 4px;
+  padding: 12px 8px;
+  background-color: var(--neutral-purewhite);
+  border-bottom: 2px solid var(--info-base);
+  z-index: 10000;
+}
+.dropdown-mobile .dropdown-input-search cura-button-transparent {
+  display: flex;
+}
+.dropdown-mobile .dropdown-input-search.error {
+  background-color: var(--error-lighter);
+  border-bottom: 2px solid var(--error-dark);
+}
+.dropdown-mobile .dropdown-input-search.dropdown-open {
+  display: flex;
+}
+.dropdown-mobile .dropdown-input-search.dropdown-open ::slotted([slot=helperText]) {
+  display: block;
+}
+.dropdown-mobile .dropdown-search-list {
+  position: static;
+  width: 100%;
+  height: 100%;
+  max-height: none;
+  padding: 12px 12px;
+  margin: 0;
+  box-sizing: border-box;
+  box-shadow: none;
+  border: none;
+  background-color: var(--neutral-purewhite);
+  list-style: none;
+  overflow-y: auto;
+  z-index: 10000;
+}