@cupra/ui-kit 2.0.0-canary.24 → 2.0.0-canary.241

package/dist-react/cjs/components/ds-dialog-header/styles/cupra-diagonal.styles.cjs

@@ -0,0 +1,37 @@
+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']) .container {
+        display: flex;
+        flex-direction: row;
+        gap: var(--ds-spacing-layout-xxs);
+        align-items: flex-end;
+        flex-wrap: wrap;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .title-container {
+        display: flex;
+        flex: auto;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--ds-spacing-s-5);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .title {
+        color: var(--ds-color-text-default);
+        font: var(--ds-typography-weight-headline-primary, 300) var(--ds-typography-size-headline-s) /
+            var(--ds-typography-height-headline-s) var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='subtitle']) {
+        display: inline-flex;
+        color: var(--ds-color-text-default);
+        flex: 0 0 auto;
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .icon {
+        --ui-kit-icon-color: var(--ds-color-text-default);
+    }
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) ::slotted([slot='subtitle']) {
+            font: 400 var(--ds-typography-size-headline-xs) / var(--ds-typography-height-headline-xs)
+                var(--ds-typography-family-primary);
+        }
+    }
+`;exports.cupraDiagonalStyles=t;

package/dist-react/cjs/components/ds-dialog-header/styles/seat-legacy.styles.cjs

@@ -0,0 +1,37 @@
+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='seat-legacy']) .container {
+        display: flex;
+        flex-direction: row;
+        gap: var(--ds-spacing-layout-xxs);
+        align-items: flex-end;
+        flex-wrap: wrap;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .title-container {
+        display: flex;
+        flex: auto;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--ds-spacing-s-5);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .title {
+        color: var(--ds-color-text-default);
+        font: 300 var(--ds-typography-size-headline-s) / var(--ds-typography-height-headline-s)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='subtitle']) {
+        display: inline-flex;
+        color: var(--ds-color-text-default);
+        flex: 0 0 auto;
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .icon {
+        --ui-kit-icon-color: var(--ds-color-text-default);
+    }
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat-legacy']) ::slotted([slot='subtitle']) {
+            font: 400 var(--ds-typography-size-headline-xs) / var(--ds-typography-height-headline-xs)
+                var(--ds-typography-family-primary);
+        }
+    }
+`;exports.seatLegacyStyles=t;

package/dist-react/cjs/components/ds-dialog-header/styles/seat.styles.cjs

@@ -0,0 +1,37 @@
+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='seat']) .container {
+        display: flex;
+        flex-direction: row;
+        gap: var(--ds-spacing-layout-xxs);
+        align-items: flex-end;
+        flex-wrap: wrap;
+    }
+    :host([data-ui-kit-theme='seat']) .title-container {
+        display: flex;
+        flex: auto;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--ds-spacing-s-5);
+    }
+    :host([data-ui-kit-theme='seat']) .title {
+        color: var(--ds-color-text-default);
+        font: var(--ds-typography-weight-headline-primary, 300) var(--ds-typography-size-headline-s) /
+            var(--ds-typography-height-headline-s) var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat']) ::slotted([slot='subtitle']) {
+        display: inline-flex;
+        color: var(--ds-color-text-default);
+        flex: 0 0 auto;
+        font: 350 var(--ds-typography-size-body-l) / var(--ds-typography-height-body-l)
+            var(--ds-typography-family-primary);
+    }
+    :host([data-ui-kit-theme='seat']) .icon {
+        --ui-kit-icon-color: var(--ds-color-text-default);
+    }
+    @media (min-width: 1440px) {
+        :host([data-ui-kit-theme='seat']) ::slotted([slot='subtitle']) {
+            font: 400 var(--ds-typography-size-headline-xs) / var(--ds-typography-height-headline-xs)
+                var(--ds-typography-family-primary);
+        }
+    }
+`;exports.seatStyles=t;

package/dist-react/cjs/components/ds-divider/ds-divider.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../base/UiKitElement.cjs"),c=require("../../decorators/customUiKitElement.cjs"),h=require("../../utils/htmlWithTokens.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const a=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),m=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),v=require("./styles/common.styles.cjs");var d=Object.defineProperty,y=Object.getOwnPropertyDescriptor,i=(s,t,o,r)=>{for(var e=r>1?void 0:r?y(t,o):t,n=s.length-1,l;n>=0;n--)(l=s[n])&&(e=(r?l(t,o,e):l(e))||e);return r&&e&&d(t,o,e),e};exports.DsDivider=class extends p.UiKitElement{constructor(){super(...arguments),this.orientation="horizontal",this.variant="primary",this.mode="light"}get classes(){return{divider:!0,[this.orientation]:!!this.orientation,[this.variant]:!!this.variant,[this.mode]:!!this.mode}}get styleTokens(){return h.htmlWithTokens`
+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.152.0/helpers/esm/decorate.cjs"),r=require("../base/UiKitElement.cjs"),i=require("../../decorators/customUiKitElement.cjs"),a=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 o=require("./styles/common.styles.cjs"),s=require("./styles/cupra-diagonal.styles.cjs"),c=require("./styles/cupra.styles.cjs"),l=require("./styles/seat-legacy.styles.cjs"),u=require("./styles/seat.styles.cjs");var d=class extends r.UiKitElement{constructor(...e){super(...e),this.orientation=`horizontal`,this.variant=`primary`,this.mode=`light`}get classes(){return{divider:!0,[this.orientation]:!!this.orientation,[this.variant]:!!this.variant,[this.mode]:!!this.mode}}get styleTokens(){return e.html`
             <style>
                 :host{
                     color-scheme: ${this.mode};
                 }
             </style>
-        `}render(){return u.html`
+        `}render(){return e.html`
             ${this.styleTokens}
-            <hr aria-orientation=${this.orientation} class=${m.classMap(this.classes)} />
-        `}};exports.DsDivider.styles=[v.orientationStyles];i([a.property({type:String})],exports.DsDivider.prototype,"orientation",2);i([a.property({type:String})],exports.DsDivider.prototype,"variant",2);i([a.property({type:String,reflect:!0})],exports.DsDivider.prototype,"mode",2);exports.DsDivider=i([c.customUiKitElement("ds-divider")],exports.DsDivider);
+            <hr aria-orientation=${this.orientation} class=${a.classMap(this.classes)} />
+        `}},f=(d.styles=[o.orientationStyles,s.cupraDiagonalStyles,u.seatStyles,c.cupraStyles,l.seatLegacyStyles],d);n.default([t.property({type:String})],f.prototype,`orientation`,void 0),n.default([t.property({type:String})],f.prototype,`variant`,void 0),n.default([t.property({type:String,reflect:!0})],f.prototype,`mode`,void 0),f=n.default([i.customUiKitElement(`ds-divider`)],f),Object.defineProperty(exports,"DsDivider",{enumerable:!0,get:function(){return f}});

package/dist-react/cjs/components/ds-divider/styles/common.styles.cjs

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");require("../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const e=require("../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.cjs"),r=e.css`
+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`
     .divider {
         border: none;
         margin: 0;
     }
-`;exports.orientationStyles=r;
+`;exports.orientationStyles=t;

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

@@ -0,0 +1,18 @@
+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']) .divider.horizontal {
+        height: 0.0625rem;
+        width: 100%;
+        margin: 0;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .divider.vertical {
+        height: 100%;
+        width: 0.0625rem;
+        margin: 0;
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .divider.primary {
+        background: var(--ds-divider-bg-color-primary);
+    }
+    :host([data-ui-kit-theme='cupra-diagonal']) .divider.secondary {
+        background: var(--ds-divider-bg-color-secondary);
+    }
+`;exports.cupraDiagonalStyles=t;

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

@@ -0,0 +1,30 @@
+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']) .divider.horizontal {
+        height: 0.0625rem;
+        width: 100%;
+        margin: 0.25rem 0;
+    }
+    :host([data-ui-kit-theme='cupra']) .divider.vertical {
+        height: 100%;
+        width: 0.0625rem;
+        margin: 0 0.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .divider.primary.light {
+        background: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .divider.primary.dark {
+        background: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .divider.secondary.light {
+        background: var(--ds-color-grey-40);
+    }
+    :host([data-ui-kit-theme='cupra']) .divider.secondary.dark {
+        background: var(--ds-color-grey-120);
+    }
+    :host([data-ui-kit-theme='cupra']) .divider.tertiary.light {
+        background: var(--ds-color-grey-15);
+    }
+    :host([data-ui-kit-theme='cupra']) .divider.tertiary.dark {
+        background: var(--ds-color-grey-160);
+    }
+`;exports.cupraStyles=t;

package/dist-react/cjs/components/ds-divider/styles/seat-legacy.styles.cjs

@@ -0,0 +1,21 @@
+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='seat-legacy']) .divider.horizontal {
+        height: 0.0625rem;
+        width: 100%;
+        margin: 0.25rem 0;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .divider.vertical {
+        height: 100%;
+        width: 0.0625rem;
+        margin: 0 0.25rem;
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .divider.primary {
+        background: var(--dg-global-color-gray-80);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .divider.secondary {
+        background: var(--ds-divider-bg-color-secondary);
+    }
+    :host([data-ui-kit-theme='seat-legacy']) .divider.tertiary {
+        background: var(--dg-global-color-gray-80);
+    }
+`;exports.seatLegacyStyles=t;

package/dist-react/cjs/components/ds-divider/styles/seat.styles.cjs

@@ -0,0 +1,18 @@
+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='seat']) .divider.horizontal {
+        height: 0.0625rem;
+        width: 100%;
+        margin: 0;
+    }
+    :host([data-ui-kit-theme='seat']) .divider.vertical {
+        height: 100%;
+        width: 0.0625rem;
+        margin: 0;
+    }
+    :host([data-ui-kit-theme='seat']) .divider.primary {
+        background: var(--ds-divider-bg-color-primary);
+    }
+    :host([data-ui-kit-theme='seat']) .divider.secondary {
+        background: var(--ds-divider-bg-color-secondary);
+    }
+`;exports.seatStyles=t;

package/dist-react/cjs/components/ds-drawer/ds-drawer.cjs

@@ -1,7 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../base/UiKitElement.cjs"),u=require("../../decorators/customUiKitElement.cjs"),p=require("../../utils/booleanConverter.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const v=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.cjs");require("../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.cjs");const h=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.cjs"),i=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.cjs"),l=require("./styles/common.styles.cjs"),m=require("./theme-config.cjs");var w=Object.defineProperty,y=Object.getOwnPropertyDescriptor,c=(o,e,t,r)=>{for(var s=r>1?void 0:r?y(e,t):e,n=o.length-1,a;n>=0;n--)(a=o[n])&&(s=(r?a(e,t,s):a(s))||s);return r&&s&&w(e,t,s),s};exports.DsDrawer=class extends d.UiKitElement{constructor(){super(...arguments),this.open=!1,this.handleOverlayClick=()=>{this.dispatchEvent(new Event("ds-drawer:close",{bubbles:!0,composed:!0})),this.open=!1},this.handleKeyDown=e=>{(e.key==="Escape"||e.key==="Esc")&&this.open&&this.handleOverlayClick()}}get classes(){return{container:!0,open:!!this.open}}getIconButtonTemplate(){var t;const e=(t=m.themeConfig[this.theme])==null?void 0:t["icon-button-variant"];return this.componentFactory.createIconButton({class:"close-button visible","data-testid":"close-button","data-aria-label":"close-button","@click":this.handleOverlayClick,size:"medium","icon-name":"cross",variant:e,mode:"dark"})}updated(e){var t;(t=super.updated)==null||t.call(this,e),e.has&&e.has("open")&&window.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){window.removeEventListener("keydown",this.handleKeyDown),super.disconnectedCallback()}render(){return v.html`          
-            <div class=${i.classMap({overlay:!0,open:!!this.open})} @click=${this.handleOverlayClick}></div>
-            <div data-testid="ds-drawer-container" class=${i.classMap(this.classes)}>
-                <div class="scroll-area">
+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"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/booleanConverter.cjs"),s=require("../../utils/uiKitHtml.cjs"),c=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 l=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 u=require("./styles/common.styles.cjs"),d=require("./styles/cupra-diagonal.styles.cjs"),f=require("./styles/seat-legacy.styles.cjs"),p=require("./styles/seat.styles.cjs"),m=require("./theme-config.cjs");var h=class extends i.UiKitElement{constructor(...e){super(...e),this._open=void 0,this._openState=!1,this.handleOverlayClick=()=>{this.dispatchEvent(new Event(`ds-drawer:close`,{bubbles:!0,composed:!0})),this._openState=!1,this._open=void 0},this.handleKeyDown=e=>{(e.key===`Escape`||e.key===`Esc`)&&this.open&&this.handleOverlayClick()}}get open(){return this._open??this._openState}set open(e){this._open=e}get classes(){return{container:!0,open:!!this.open}}getIconButtonTemplate(){var e;let t=(e=m.themeConfig[this.theme])==null?void 0:e[`icon-button-variant`];return s.uiKitHtml`<ds-icon-button
+            class="close-button visible"
+            data-testid="close-button"
+            data-aria-label=${this.dataAriaLabelCloseButton||`close-button`}
+            @click=${this.handleOverlayClick}
+            size="medium"
+            icon-name="cross"
+            variant=${l.ifDefined(t)}
+            mode="dark"
+        ></ds-icon-button>`}updated(e){var t;(t=super.updated)==null||t.call(this,e),e.has&&(e.has(`_open`)||e.has(`_openState`))&&window.addEventListener(`keydown`,this.handleKeyDown)}disconnectedCallback(){window.removeEventListener(`keydown`,this.handleKeyDown),super.disconnectedCallback()}render(){return e.html`          
+            <div class=${c.classMap({overlay:!0,open:!!this.open})} @click=${this.handleOverlayClick}></div>
+            <div data-testid="ds-drawer-container" class=${c.classMap(this.classes)}>
+                <div class="scroll-area" tabindex="0">
                     <div class="drawer-header">
                         <slot name="header"></slot>                        
                         ${this.getIconButtonTemplate()}
@@ -16,4 +25,4 @@
                     <slot name="footer"></slot>
                 </div>
             </div>
-        `}};exports.DsDrawer.styles=[l.commonStyles,l.iconStyles];c([h.property({type:Boolean,converter:p.booleanConverter})],exports.DsDrawer.prototype,"open",2);exports.DsDrawer=c([u.customUiKitElement("ds-drawer")],exports.DsDrawer);
+        `}},g=(h.styles=[u.commonStyles,u.iconStyles,d.cupraDiagonalStyles,p.seatStyles,f.seatLegacyStyles],h);r.default([t.property({type:String,attribute:`data-aria-label-close-button`})],g.prototype,`dataAriaLabelCloseButton`,void 0),r.default([t.property({type:Boolean,attribute:`open`,converter:o.booleanConverter})],g.prototype,`_open`,void 0),r.default([n.state()],g.prototype,`_openState`,void 0),g=r.default([a.customUiKitElement(`ds-drawer`)],g),Object.defineProperty(exports,"DsDrawer",{enumerable:!0,get:function(){return g}});

package/dist-react/cjs/components/ds-drawer/styles/common.styles.cjs

@@ -1,17 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../utils/cssQueries.cjs"),e=require("../../../utils/cssWithTokens.cjs"),r=e.cssWithTokens`
+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");const t=require("../../../utils/cssQueries.cjs");var n=e.css`
+    :host(:dir(rtl)) {
+        --ui-kit-private-dir: -1;
+    }
+
     :host {
         display: block;
     }
 
     .overlay {
         position: fixed;
-        inset: 0;        
+        inset: 0;
         opacity: 0;
         pointer-events: none;
         transition: opacity 300ms ease;
         z-index: 9998;
-        background: var(--dg-global-opacity-black-40);
-        backdrop-filter: var(--dg-elevation-blur-soft);
     }
 
     .overlay.open {
@@ -21,91 +23,67 @@
 
     .container {
         position: fixed;
-        z-index: 9999;        
+        z-index: 9999;
         transition: transform 320ms ease;
         will-change: transform;
         display: flex;
         flex-direction: column;
-        overflow: auto;  
-        border-radius: 0;  
-        height: 100vh; 
+        overflow: auto;
+        border-radius: 0;
+        height: 100vh;
         width: 100%;
-        bottom: 0; 
-        right: 0;
+        bottom: 0;
+        inset-inline-end: 0;
         transform: translateY(100%);
 
-        ${o.cssQueries.m} {
-            border-radius: var(--dg-border-radius-m) 0px 0px var(--dg-border-radius-m);           
-            top: 0;           
-            transform: translateX(100%);
-            width: 491px;         
+        ${t.cssQueries.m} {
+            top: 0;
+            transform: translateX(calc(100% * var(--ui-kit-private-dir, 1)));
+            width: 491px;
         }
 
-        ${o.cssQueries.l} {            
+        ${t.cssQueries.l} {
             width: 579px;
         }
 
-        ${o.cssQueries.xl} {             
+        ${t.cssQueries.xl} {
             width: 588px;
         }
 
-        ${o.cssQueries.xxl} {             
+        ${t.cssQueries.xxl} {
             width: 780px;
         }
-    }     
-      
-    .container.open { 
+    }
+
+    .container.open {
         transform: translateY(0);
-        ${o.cssQueries.m} {
+        ${t.cssQueries.m} {
             transform: translateX(0);
-            box-shadow: 0 -8px 32px 0 var(--ds-opacity-black-60, rgba(9, 9, 11, 0.60));
-        }  
-    }    
-
-    .drawer-header,
-    .drawer-content,
-    .drawer-footer {
-        padding-left: var(--dg-layout-margin); 
-        padding-right: var(--dg-layout-margin);       
-    }  
-
-    .drawer-header {
-        padding-top: var(--dg-spacing-layout-s); 
-        padding-bottom: var(--dg-spacing-m-3);
-        ${o.cssQueries.m} {
-            padding-bottom: var(--dg-spacing-layout-m); 
-        }  
-    }
-    
-    .drawer-footer {
-        padding-top: var(--dg-spacing-layout-m);   
-        padding-bottom: var(--dg-spacing-layout-l);            
+            box-shadow: 0 -8px 32px 0 var(--ds-opacity-black-60, rgba(9, 9, 11, 0.6));
+        }
     }
 
     .drawer-footer ::slotted(*) {
         display: flex;
         flex-direction: column;
-        gap: var(--dg-spacing-m-2);
-        ${o.cssQueries.s} {
+        ${t.cssQueries.s} {
             flex-direction: row;
-        }  
+        }
     }
 
-    .drawer-content {       
-        flex: 0 0 auto;       
+    .drawer-content {
+        flex: 0 0 auto;
     }
-   
+
     .scroll-area {
         display: flex;
         flex-direction: column;
         height: 100%;
         overflow: auto;
-        -webkit-overflow-scrolling: touch;        
-    }    
-`,t=e.cssWithTokens`
-   .close-button {
+        -webkit-overflow-scrolling: touch;
+    }
+`,r=e.css`
+    .close-button {
         position: absolute;
-        top: calc(var(--dg-spacing-layout-s) - 2px);
-        right: var(--dg-spacing-layout-xl);         
     }
-`;exports.commonStyles=r;exports.iconStyles=t;
+`;exports.commonStyles=n,exports.iconStyles=r;

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

@@ -0,0 +1,53 @@
+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']) .overlay {
+        background: var(--ds-opacity-black-40);
+        -webkit-backdrop-filter: var(--ds-elevation-blur-level-01);
+        backdrop-filter: var(--ds-elevation-blur-level-01);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .container {
+        color: var(--ui-kit-private-drawer-container-color, #ffffff);
+        background: var(--ds-color-bg-default);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .container {
+            border-start-start-radius: var(--ds-border-radius-m);
+            border-end-start-radius: var(--ds-border-radius-m);
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+        }
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header,
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-content,
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-footer {
+        padding-inline-start: var(--ds-layout-margin);
+        padding-inline-end: var(--ds-layout-margin);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header {
+        padding-top: var(--ds-spacing-layout-s);
+        padding-bottom: var(--ds-spacing-m-3);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='cupra-diagonal']) .drawer-header {
+            padding-bottom: var(--ds-spacing-layout-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-footer {
+        padding-top: var(--ds-spacing-layout-m);
+        padding-bottom: var(--ds-spacing-layout-l);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .drawer-footer ::slotted(*) {
+        gap: var(--ds-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='cupra-diagonal']) .close-button {
+        top: calc(var(--ds-spacing-layout-s) - 0.125rem);
+        inset-inline-end: var(--ds-spacing-layout-xl);
+    }
+`;exports.cupraDiagonalStyles=t;

package/dist-react/cjs/components/ds-drawer/styles/seat-legacy.styles.cjs

@@ -0,0 +1,50 @@
+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='seat-legacy']) .overlay {
+        background: var(--dg-global-opacity-black-40);
+        -webkit-backdrop-filter: var(--dg-elevation-blur-soft);
+        backdrop-filter: var(--dg-elevation-blur-soft);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .container {
+        background: #fff;
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) .container {
+            border-radius: var(--dg-border-radius-m) 0px 0px var(--dg-border-radius-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-header,
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-content,
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-footer {
+        padding-left: var(--dg-layout-margin);
+        padding-right: var(--dg-layout-margin);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-header {
+        padding-top: var(--dg-spacing-layout-s);
+        padding-bottom: var(--dg-spacing-m-3);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat-legacy']) .drawer-header {
+            padding-bottom: var(--dg-spacing-layout-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-footer {
+        padding-top: var(--dg-spacing-layout-m);
+        padding-bottom: var(--dg-spacing-layout-l);
+        background: #fff;
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .drawer-footer ::slotted(*) {
+        gap: var(--dg-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='seat-legacy']) .close-button {
+        top: calc(var(--dg-spacing-layout-s) - 0.125rem);
+        right: var(--dg-spacing-layout-xl);
+    }
+`;exports.seatLegacyStyles=t;

package/dist-react/cjs/components/ds-drawer/styles/seat.styles.cjs

@@ -0,0 +1,53 @@
+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='seat']) .overlay {
+        background: var(--ds-opacity-black-40);
+        -webkit-backdrop-filter: var(--ds-elevation-blur-level-01);
+        backdrop-filter: var(--ds-elevation-blur-level-01);
+    }
+
+    :host([data-ui-kit-theme='seat']) .container {
+        color: var(--ui-kit-private-drawer-container-color, #ffffff);
+        background: var(--ds-color-bg-default);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) .container {
+            border-start-start-radius: var(--ds-border-radius-m);
+            border-end-start-radius: var(--ds-border-radius-m);
+            border-start-end-radius: 0;
+            border-end-end-radius: 0;
+        }
+    }
+
+    :host([data-ui-kit-theme='seat']) .drawer-header,
+    :host([data-ui-kit-theme='seat']) .drawer-content,
+    :host([data-ui-kit-theme='seat']) .drawer-footer {
+        padding-inline-start: var(--ds-layout-margin);
+        padding-inline-end: var(--ds-layout-margin);
+    }
+
+    :host([data-ui-kit-theme='seat']) .drawer-header {
+        padding-top: var(--ds-spacing-layout-s);
+        padding-bottom: var(--ds-spacing-m-3);
+    }
+
+    @media (min-width: 768px) {
+        :host([data-ui-kit-theme='seat']) .drawer-header {
+            padding-bottom: var(--ds-spacing-layout-m);
+        }
+    }
+
+    :host([data-ui-kit-theme='seat']) .drawer-footer {
+        padding-top: var(--ds-spacing-layout-m);
+        padding-bottom: var(--ds-spacing-layout-l);
+    }
+
+    :host([data-ui-kit-theme='seat']) .drawer-footer ::slotted(*) {
+        gap: var(--ds-spacing-m-2);
+    }
+
+    :host([data-ui-kit-theme='seat']) .close-button {
+        top: calc(var(--ds-spacing-layout-s) - 0.125rem);
+        inset-inline-end: var(--ds-spacing-layout-xl);
+    }
+`;exports.seatStyles=t;

package/dist-react/cjs/components/ds-drawer/theme-config.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t={cupra:{"icon-button-variant":"primary"},"cupra-diagonal":{"icon-button-variant":"tertiary"},seat:{"icon-button-variant":"rounded"}};exports.themeConfig=t;
+var e={cupra:{"icon-button-variant":`primary`},"cupra-diagonal":{"icon-button-variant":`tertiary`},seat:{"icon-button-variant":`tertiary`}};exports.themeConfig=e;

package/dist-react/cjs/components/ds-favourite-action/ds-favourite-action.cjs

@@ -0,0 +1,12 @@
+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"),n=require("../../node_modules/.pnpm/@lit_reactive-element@2.1.2/node_modules/@lit/reactive-element/decorators/state.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/decorators.cjs");const r=require("../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs"),o=require("../../utils/booleanConverter.cjs");require("../ds-icon/ds-icon.cjs");const s=require("../../utils/uiKitHtml.cjs"),c=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 l=require("./styles/common.styles.cjs"),u=require("./styles/cupra-diagonal.styles.cjs"),d=require("./styles/cupra.styles.cjs"),f=require("./styles/seat-legacy.styles.cjs"),p=require("./styles/seat.styles.cjs");var m=class extends i.UiKitElement{constructor(...e){super(...e),this.initialSelected=!1,this.disabled=!1,this._selected=!1,this._initializedFromInitialSelected=!1}willUpdate(e){super.willUpdate(e),!this._initializedFromInitialSelected&&e.has(`initialSelected`)&&(this._selected=this.initialSelected,this._initializedFromInitialSelected=!0)}get currentSelected(){return this.selected??this._selected}handleClick(){if(this.disabled)return;let e=!this.currentSelected;this.selected===void 0&&(this._selected=e),this.dispatchEvent(new CustomEvent(`ds-favourite-action:change`,{bubbles:!0,composed:!0,detail:{selected:e}}))}get iconName(){return this.currentSelected?`heart-filled-color`:`heart-color`}get iconTemplate(){return s.uiKitHtml`<ds-icon class="icon" icon-name=${this.iconName}></ds-icon>`}get classes(){return{button:!0,selected:this.currentSelected,disabled:this.disabled}}render(){return e.html`
+            <button
+                type="button"
+                class=${c.classMap(this.classes)}
+                ?disabled=${this.disabled}
+                aria-pressed=${this.currentSelected}
+                aria-label=${this.dataAriaLabel||(this.currentSelected?`Remove from favourites`:`Add to favourites`)}
+                @click=${this.handleClick}
+            >
+                ${this.iconTemplate}
+            </button>
+        `}},h=(m.styles=[l.commonStyles,u.cupraDiagonalStyles,p.seatStyles,d.cupraStyles,f.seatLegacyStyles],m);r.default([t.property({type:Boolean,converter:o.booleanConverter,attribute:`initial-selected`})],h.prototype,`initialSelected`,void 0),r.default([t.property({type:Boolean,attribute:`selected`})],h.prototype,`selected`,void 0),r.default([t.property({type:Boolean,converter:o.booleanConverter,reflect:!0})],h.prototype,`disabled`,void 0),r.default([t.property({type:String,attribute:`data-aria-label`})],h.prototype,`dataAriaLabel`,void 0),r.default([n.state()],h.prototype,`_selected`,void 0),h=r.default([a.customUiKitElement(`ds-favourite-action`)],h),Object.defineProperty(exports,"DsFavouriteAction",{enumerable:!0,get:function(){return h}});

package/dist-react/cjs/components/ds-favourite-action/styles/common.styles.cjs

@@ -0,0 +1,16 @@
+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 {
+        display: inline-flex;
+    }
+
+    .button {
+        display: inline-flex;
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border: none;
+        padding: 0;
+        background: transparent;
+    }
+`;exports.commonStyles=t;