@cupra/ui-kit 2.0.0-canary.230 → 2.0.0-canary.231

package/dist-react/cjs/components/ds-search/styles/cupra.styles.cjs

@@ -0,0 +1,177 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='cupra']) .container {
+        padding: 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .input-container {
+        gap: 0.5rem;
+        padding: 0.5rem;
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        margin: 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .input-container {
+        border-bottom-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .input-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .success.light .input-container {
+        border-bottom-color: var(--ds-color-dark-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .success.dark .input-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .focused.light .input-container {
+        border-bottom-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .focused.dark .input-container {
+        border-bottom-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .error.light .input-container {
+        border-bottom-color: var(--ds-color-red-120);
+    }
+    :host([data-ui-kit-theme='cupra']) .error.dark .input-container {
+        border-bottom-color: var(--ds-color-red-60);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .input-container {
+        border-bottom-color: var(--ds-color-medium-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .input-container {
+        border-bottom-color: var(--ds-color-dark-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .search-icon {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .search-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .search-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .search-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .search-icon {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .search-icon {
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .position-icon {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .position-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .position-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .position-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .position-icon {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .position-icon {
+        --ui-kit-icon-width: 1rem;
+        --ui-kit-icon-height: 1rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .clear-icon {
+        cursor: pointer;
+        --ui-kit-icon-width: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .clear-icon {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .clear-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .clear-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .clear-icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .input-field {
+        padding: 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .input-field {
+        font: var(--ds-cp-type-bodytight-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .input-field {
+        font: var(--ds-cp-type-smalltight-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .light .input-field {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .input-field {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .success.light .input-field {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .success.dark .input-field {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .focused.light .input-field {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .focused.dark .input-field {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .error.light .input-field {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .error.dark .input-field {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .input-field {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .input-field {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .large .error-text {
+        font: var(--ds-cp-type-tiny-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .error-text {
+        font: var(--ds-cp-type-tiny-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .error-text {
+        margin: 0 0 0.5rem 0;
+        padding: 0 0.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .error-text {
+        color: #b50303;
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .error-text {
+        color: #ec8b8b;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .helper-text {
+        font: var(--ds-cp-type-smalltight-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .small .helper-text {
+        font: var(--ds-cp-type-tiny-regular);
+    }
+    :host([data-ui-kit-theme='cupra']) .helper-text {
+        margin: 0;
+        padding: 0.5rem;
+        gap: 0.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .light .helper-text {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .dark .helper-text {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.light .helper-text {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .disabled.dark .helper-text {
+        color: var(--ds-color-grey);
+    }
+`;exports.cupraStyles=t;

package/dist-react/cjs/components/ds-search-input/ds-search-input.cjs

@@ -1,4 +1,4 @@
-const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),r=require("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/booleanConverter.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const l=require("../../mixins/inputStatesMixin.cjs");require("../ds-loader-spinner/ds-loader-spinner.cjs");const u=require("../../utils/validateMaxLength.cjs"),d=require("./styles/common.styles.cjs");var f=class extends l.inputStatesMixin(r.UiKitElement){constructor(...e){super(...e),this.size=`large`,this.variant=`primary`,this.loading=!1,this.helperText=``,this.forcedError=``,this.invalidError=``,this.dataAriaLabelRemoveButton=``,this.dataAriaLabelPositionButton=``,this.withPositionButton=!0,this.handleRemove=()=>{this.nativeInput.value=``,this.nativeInput.focus(),[`input`,`change`].forEach(e=>this.nativeInput.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))},this.handleClickPositionButton=()=>{this.dispatchEvent(new Event(`ds-search-input:click-position-button`,{bubbles:!0,composed:!0}))}}get classes(){return{container:!0,error:!!this.forcedError,loading:this.loading,[this.size]:!!this.size,[this.variant]:!!this.variant,disabled:this.inputStates.disabled,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible}}render(){return e.html`
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const t=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/property.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),r=require("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const a=require("../../utils/booleanConverter.cjs"),o=require("../../utils/uiKitHtml.cjs"),s=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/class-map.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/class-map.cjs");const c=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/if-defined.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/directives/if-defined.cjs"),require("../ds-icon-button/ds-icon-button.cjs");const l=require("../../mixins/inputStatesMixin.cjs");require("../ds-loader-spinner/ds-loader-spinner.cjs");const u=require("../../utils/validateMaxLength.cjs"),d=require("./styles/common.styles.cjs"),f=require("./styles/cupra-diagonal.styles.cjs"),p=require("./styles/cupra.styles.cjs"),m=require("./styles/seat-legacy.styles.cjs"),h=require("./styles/seat.styles.cjs");var g=class extends l.inputStatesMixin(r.UiKitElement){constructor(...e){super(...e),this.size=`large`,this.variant=`primary`,this.loading=!1,this.helperText=``,this.forcedError=``,this.invalidError=``,this.dataAriaLabelRemoveButton=``,this.dataAriaLabelPositionButton=``,this.withPositionButton=!0,this.handleRemove=()=>{this.nativeInput.value=``,this.nativeInput.focus(),[`input`,`change`].forEach(e=>this.nativeInput.dispatchEvent(new Event(e,{bubbles:!0,composed:!0})))},this.handleClickPositionButton=()=>{this.dispatchEvent(new Event(`ds-search-input:click-position-button`,{bubbles:!0,composed:!0}))}}get classes(){return{container:!0,error:!!this.forcedError,loading:this.loading,[this.size]:!!this.size,[this.variant]:!!this.variant,disabled:this.inputStates.disabled,filled:this.inputStates.filled,invalid:this.inputStates.invalid,focus:this.inputStates.focus,"focus-visible":this.inputStates.focusVisible}}render(){return e.html`
             <div part="container" class=${s.classMap(this.classes)}>
                 <div part="input-container" class="input-container">
                     ${this.searchIconTemplate}
@@ -34,4 +34,4 @@ const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/l
                 ${this.invalidErrorTemplate}
                 ${this.lengthTemplate}
             </div>
-        `}get helperTextTemplate(){var t;return this.forcedError||this.inputStates.invalid&&this.invalidError||!((t=this.helperText)!=null&&t.length)?e.nothing:e.html`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.forcedError?e.html`<span class="support-text error-text forced-error">${this.forcedError}</span>`:e.nothing}get invalidErrorTemplate(){return this.forcedError||!this.inputStates.invalid||!this.invalidError?e.nothing:e.html`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}get lengthTemplate(){var t,n;let r=(t=this.nativeInput)==null||(t=t.maxLength)==null?void 0:t.toString();return u.validateMaxLength(r)?e.html`<span class="char-counter">${((n=this.inputStates.currentValue)==null?void 0:n.length)||0}/${r}</span>`:e.nothing}},p=(f.styles=[d.commonStyles],f);n.default([t.property({type:String})],p.prototype,`size`,void 0),n.default([t.property({type:String})],p.prototype,`variant`,void 0),n.default([t.property({type:Boolean,converter:a.booleanConverter})],p.prototype,`loading`,void 0),n.default([t.property({type:String,attribute:`helper-text`})],p.prototype,`helperText`,void 0),n.default([t.property({type:String,attribute:`forced-error`})],p.prototype,`forcedError`,void 0),n.default([t.property({type:String,attribute:`invalid-error`})],p.prototype,`invalidError`,void 0),n.default([t.property({type:String,attribute:`data-aria-label-remove-button`})],p.prototype,`dataAriaLabelRemoveButton`,void 0),n.default([t.property({type:String,attribute:`data-aria-label-position-button`})],p.prototype,`dataAriaLabelPositionButton`,void 0),n.default([t.property({type:Boolean,converter:a.booleanConverter,attribute:`with-position-button`})],p.prototype,`withPositionButton`,void 0),p=n.default([i.customUiKitElement(`ds-search-input`)],p),Object.defineProperty(exports,"DsSearchInput",{enumerable:!0,get:function(){return p}});
+        `}get helperTextTemplate(){var t;return this.forcedError||this.inputStates.invalid&&this.invalidError||!((t=this.helperText)!=null&&t.length)?e.nothing:e.html`<span class="support-text helper-text">${this.helperText}</span>`}get forcedErrorTemplate(){return this.forcedError?e.html`<span class="support-text error-text forced-error">${this.forcedError}</span>`:e.nothing}get invalidErrorTemplate(){return this.forcedError||!this.inputStates.invalid||!this.invalidError?e.nothing:e.html`<span class="support-text error-text invalid-error">${this.invalidError}</span>`}get lengthTemplate(){var t,n;let r=(t=this.nativeInput)==null||(t=t.maxLength)==null?void 0:t.toString();return u.validateMaxLength(r)?e.html`<span class="char-counter">${((n=this.inputStates.currentValue)==null?void 0:n.length)||0}/${r}</span>`:e.nothing}},_=(g.styles=[d.commonStyles,f.cupraDiagonalStyles,h.seatStyles,p.cupraStyles,m.seatLegacyStyles],g);n.default([t.property({type:String})],_.prototype,`size`,void 0),n.default([t.property({type:String})],_.prototype,`variant`,void 0),n.default([t.property({type:Boolean,converter:a.booleanConverter})],_.prototype,`loading`,void 0),n.default([t.property({type:String,attribute:`helper-text`})],_.prototype,`helperText`,void 0),n.default([t.property({type:String,attribute:`forced-error`})],_.prototype,`forcedError`,void 0),n.default([t.property({type:String,attribute:`invalid-error`})],_.prototype,`invalidError`,void 0),n.default([t.property({type:String,attribute:`data-aria-label-remove-button`})],_.prototype,`dataAriaLabelRemoveButton`,void 0),n.default([t.property({type:String,attribute:`data-aria-label-position-button`})],_.prototype,`dataAriaLabelPositionButton`,void 0),n.default([t.property({type:Boolean,converter:a.booleanConverter,attribute:`with-position-button`})],_.prototype,`withPositionButton`,void 0),_=n.default([i.customUiKitElement(`ds-search-input`)],_),Object.defineProperty(exports,"DsSearchInput",{enumerable:!0,get:function(){return _}});

package/dist-react/cjs/components/ds-search-input/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,255 @@
+const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/css-tag.cjs");require("../../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");var t=e.css`
+    :host([data-ui-kit-theme='cupra-diagonal']):has(.disabled) {
+        pointer-events: none;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        border-radius: var(--ds-border-radius-xxs, 4px);
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: var(--ds-spacing-s-3);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.focus-visible {
+        outline: 0.125rem solid var(--ds-color-border-focus-ring, #6b8494);
+        outline-offset: 0.125rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input) {
+        width: 100%;
+        box-sizing: border-box;
+        flex: 1 0 0;
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 400;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        border: none;
+        outline: none;
+        background: transparent;
+        padding: 0;
+        height: 100%;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large ::slotted(input) {
+        font-size: var(--ds-typography-size-body-l);
+        line-height: var(--ds-typography-height-body-l);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium ::slotted(input) {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input)::-moz-placeholder {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input)::placeholder {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input:focus) {
+        color: var(--ds-field-text-color-input-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .filled ::slotted(input) {
+        color: var(--ds-field-text-color-input-default, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted(input:disabled) {
+        color: var(--ds-field-text-color-placeholder-disabled);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .input-container {
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        gap: var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .input-container {
+        padding: 0 0 0 var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large.loading .input-container {
+        padding: 0 var(--ds-spacing-m-1, 12px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .input-container {
+        padding: 0 0 0 var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium.loading .input-container {
+        padding: 0 var(--ds-spacing-s-5, 8px);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .input-container {
+        height: calc(var(--ds-sizing-48, 48px));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .input-container {
+        height: calc(var(--ds-sizing-40, 40px));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary .input-container {
+        background: var(--ds-field-bg-color-default, rgba(195, 195, 203, 0.05));
+        border-radius: var(--ds-border-radius-xxs) var(--ds-border-radius-xxs) var(--ds-border-radius-none)
+            var(--ds-border-radius-none);
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary .input-container:hover {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover, rgba(195, 195, 203, 0.1));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.focus:not(.focus-visible) .input-container {
+        border-bottom: var(--ds-border-width-l, 2px) solid var(--ds-field-border-color-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.filled .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-filled, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.container.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.container.invalid .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.disabled .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.disabled.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .primary.disabled.invalid .input-container {
+        border-bottom: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary .input-container {
+        border-radius: var(--ds-border-radius-xs, 6px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-default, #aeaeb7);
+        background: var(--ds-field-bg-color-default-inverted, rgba(9, 9, 11, 0.5));
+        -webkit-backdrop-filter: blur(var(--ds-blur-level-05, 60px));
+        backdrop-filter: blur(var(--ds-blur-level-05, 60px));
+        box-shadow: 0 var(--ds-shadow-vertical-level-01, 4px) var(--ds-shadow-blur-level-01, 4px) 0
+            var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary .input-container:hover {
+        background: var(--ds-field-bg-color-hover-inverted, rgba(9, 9, 11, 0.6));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.focus-visible .input-container {
+        background: var(--ds-field-bg-color-hover-inverted, rgba(9, 9, 11, 0.6));
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.focus:not(.focus-visible) .input-container {
+        border: var(--ds-border-width-l, 2px) solid var(--ds-field-border-color-selected, #b2764d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.filled .input-container {
+        border: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-filled, #fafafa);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.container.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.container.invalid .input-container {
+        border: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.disabled .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.disabled.error .input-container,
+    :host([data-ui-kit-theme='cupra-diagonal']) .secondary.disabled.invalid .input-container {
+        border: var(--ds-border-width-m, 1px) solid var(--ds-field-border-color-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .footer {
+        box-sizing: border-box;
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
+        color: var(--ds-color-text-default-subtle);
+        text-overflow: ellipsis;
+        font-family: var(--ds-typography-family-primary);
+        font-style: normal;
+        font-weight: 350;
+        letter-spacing: var(--ds-typography-letter-spacing-m);
+        padding: 0 var(--ds-spacing-s-5);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .footer {
+        font-size: var(--ds-typography-size-body-m);
+        line-height: var(--ds-typography-height-body-m);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .footer {
+        font-size: var(--ds-typography-size-body-s);
+        line-height: var(--ds-typography-height-body-s);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .support-text {
+        flex: 1 1 auto;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .helper-text {
+        color: var(--ds-field-text-color-placeholder-default, #c3c3cb);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .error-text {
+        color: var(--ds-field-text-color-caption-error, #ff403d);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled .support-text,
+    :host([data-ui-kit-theme='cupra-diagonal']) .disabled .char-counter {
+        color: var(--ds-field-text-color-placeholder-disabled, #5a5c67);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .large .icon {
+        --ui-kit-icon-height: 1.5rem;
+        --ui-kit-icon-width: 1.5rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .medium .icon {
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.focus:not(.focus-visible) .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-input-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.filled .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-input-default);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container.disabled .icon {
+        --ui-kit-icon-color: var(--ds-field-icon-color-placeholder-disabled);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .buttons-container {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .remove-icon-button {
+        position: relative;
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .remove-icon-button:after {
+        content: '';
+        display: inline-block;
+        width: 0.0625rem;
+        height: 1.5rem;
+        background: var(--ds-divider-bg-color-primary);
+    }
+`;exports.cupraDiagonalStyles=t;