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

package/dist-react/cjs/components/ds-icon-button/styles/seat.styles.cjs

@@ -0,0 +1,534 @@
+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']) .button.custom {
+        --ui-kit-private-button-custom-bg-hover: color-mix(in srgb, var(--ui-kit-private-button-custom-bg) 80%, black);
+        --ui-kit-private-button-custom-bg-pressed: color-mix(
+            in srgb,
+            var(--ui-kit-private-button-custom-bg) 65%,
+            black
+        );
+        --ui-kit-private-button-custom-bg-disabled: color-mix(
+            in srgb,
+            var(--ui-kit-private-button-custom-bg) 40%,
+            transparent
+        );
+        --ui-kit-private-button-custom-color-hover: var(--ui-kit-private-button-custom-color);
+        --ui-kit-private-button-custom-color-pressed: var(--ui-kit-private-button-custom-color);
+        --ui-kit-private-button-custom-color-disabled: color-mix(
+            in srgb,
+            var(--ui-kit-private-button-custom-color) 40%,
+            transparent
+        );
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom) {
+        border-width: var(--ds-icon-button-border-width-base, 1px);
+        border-style: solid;
+        outline-color: transparent;
+        border-radius: var(--ds-icon-button-border-radius-base, 6px);
+        background: var(--ui-kit-private-button-custom-bg, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+        --ui-kit-icon-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-color));
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).xlarge {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).large {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).medium {
+        height: var(--ds-sizing-40, 40px);
+        width: var(--ds-sizing-40, 40px);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).small {
+        height: var(--ds-sizing-36, 36px);
+        width: var(--ds-sizing-36, 36px);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-primary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-default,
+            linear-gradient(47deg, #fafafa 0%, #fafafa 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-default, #09090b);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-secondary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-default,
+            linear-gradient(179deg, #fafafa26 0%, #c3c3cb0d 85%, #c3c3cb1a 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-default, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-tertiary {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-quaternary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-default,
+            linear-gradient(47deg, #b2764d 0%, #885a3b 65%, #6c472f 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-default, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-naked {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-rounded {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-default, #fafafa);
+        border-radius: var(--ds-border-radius-full, 100000px);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-primary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-hover,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-hover, #0e0e10);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-secondary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-hover,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-hover, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-tertiary:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-quaternary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-hover,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-hover, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-naked:hover {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-hover, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-rounded:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom):hover {
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-primary:focus-visible {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-focus,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-focus, #0e0e10);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-secondary:focus-visible {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-focus,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-focus, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-tertiary:focus-visible {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-quaternary:focus-visible {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-focus,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-focus, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-naked:focus-visible {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-focus, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-rounded:focus-visible {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom):focus-visible {
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-icon-button-outline-color-focus, #6b8494);
+        outline-width: var(--ds-border-width-l, 2px);
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-primary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-pressed,
+            linear-gradient(47deg, #aeaeb7 0%, #aeaeb7 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-pressed, #18181b);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-secondary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-pressed,
+            linear-gradient(179deg, #fafafa4d 0%, #c3c3cb26 95%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-pressed, #aeaeb7);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-tertiary:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-quaternary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-pressed,
+            linear-gradient(47deg, #6c472f 0%, #4e3322 45%, #392619 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-pressed, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-naked:active {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-rounded:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom):active {
+        background: var(--ui-kit-private-button-custom-bg-pressed, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-primary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-primary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-secondary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-secondary-disabled, #09090b4d);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-tertiary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-quaternary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-quaternary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-naked.disabled {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).variant-rounded.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .button:not(.tag-custom).disabled {
+        background: var(--ui-kit-private-button-custom-bg-disabled, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='seat']) .button.tag-custom {
+        display: contents;
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom ::slotted(*) {
+        cursor: pointer;
+        justify-content: center;
+        outline-style: solid;
+        display: inline-flex;
+        text-decoration: none;
+        align-items: center;
+        box-sizing: border-box;
+        border-width: var(--ds-icon-button-border-width-base, 1px);
+        border-style: solid;
+        outline-color: transparent;
+        border-radius: var(--ds-icon-button-border-radius-base, 6px);
+        background: var(--ui-kit-private-button-custom-bg, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+        --ui-kit-icon-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-color));
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-primary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-default,
+            linear-gradient(47deg, #fafafa 0%, #fafafa 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-default, #09090b);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-secondary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-default,
+            linear-gradient(179deg, #fafafa26 0%, #c3c3cb0d 85%, #c3c3cb1a 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-default, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-tertiary {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-quaternary {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-default,
+            linear-gradient(47deg, #b2764d 0%, #885a3b 65%, #6c472f 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-default, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-naked {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-rounded {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-default, #474852);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-default, #fafafa);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-primary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-hover,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-hover, #0e0e10);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-secondary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-hover,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-hover, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-tertiary:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-quaternary:hover {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-hover,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-hover, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-naked:hover {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-hover, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-rounded:hover {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-hover, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-hover, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom:hover ::slotted(*) {
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-primary:focus-within {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-focus,
+            linear-gradient(47deg, #d3d6d9 0%, #d3d6d9 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-focus, #0e0e10);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-secondary:focus-within {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-focus,
+            linear-gradient(179deg, #fafafa33 0%, #c3c3cb1a 90%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-focus, #989aa4);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-tertiary:focus-within {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-quaternary:focus-within {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-focus,
+            linear-gradient(47deg, #885a3b 0%, #6c472f 55%, #4e3322 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-focus, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-naked:focus-within {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-focus, #c3c3cb);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-rounded:focus-within {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-focus, #5a5c67);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-focus, #f3f3f7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom ::slotted(*:focus-visible) {
+        outline-offset: 0.125rem;
+        outline-color: var(--ds-icon-button-outline-color-focus, #6b8494);
+        outline-width: var(--ds-border-width-l, 2px);
+        background: var(--ui-kit-private-button-custom-bg-hover, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-primary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-primary-pressed,
+            linear-gradient(47deg, #aeaeb7 0%, #aeaeb7 100%)
+        );
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-pressed, #18181b);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-secondary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-secondary-pressed,
+            linear-gradient(179deg, #fafafa4d 0%, #c3c3cb26 95%, #c3c3cb26 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-pressed, #aeaeb7);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-tertiary:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-quaternary:active {
+        --ui-kit-icon-button-bg: var(
+            --ds-icon-button-bg-color-quaternary-pressed,
+            linear-gradient(47deg, #6c472f 0%, #4e3322 45%, #392619 100%)
+        );
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-pressed, #c49678);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-naked:active {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-rounded:active {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-pressed, #777788);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-pressed, #e4e4e7);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom:active ::slotted(*) {
+        background: var(--ui-kit-private-button-custom-bg-pressed, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-primary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-primary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-primary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-secondary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-secondary-disabled, #09090b4d);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-secondary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-secondary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-tertiary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-tertiary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-tertiary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-quaternary.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-quaternary-disabled, #34353c);
+        --ui-kit-icon-button-border-color: var(--ds-icon-button-border-color-quaternary-disabled, #5a5c67);
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-quaternary-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-naked.disabled {
+        --ui-kit-icon-button-bg: transparent;
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-naked-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.variant-rounded.disabled {
+        --ui-kit-icon-button-bg: var(--ds-icon-button-bg-color-rounded-disabled, #34353c);
+        --ui-kit-icon-button-border-color: transparent;
+        --ui-kit-icon-button-color: var(--ds-icon-button-icon-color-rounded-disabled, #5a5c67);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom ::slotted(*:disabled),
+    :host([data-ui-kit-theme='seat']) .tag-custom.disabled ::slotted(*) {
+        background: var(--ui-kit-private-button-custom-bg-disabled, var(--ui-kit-icon-button-bg));
+        border-color: var(--ui-kit-private-button-custom-color, var(--ui-kit-icon-button-border-color));
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.xlarge ::slotted(*) {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.large ::slotted(*) {
+        height: var(--ds-sizing-48, 48px);
+        width: var(--ds-sizing-48, 48px);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.medium ::slotted(*) {
+        height: var(--ds-sizing-40, 40px);
+        width: var(--ds-sizing-40, 40px);
+    }
+    :host([data-ui-kit-theme='seat']) .tag-custom.small ::slotted(*) {
+        height: var(--ds-sizing-36, 36px);
+        width: var(--ds-sizing-36, 36px);
+    }
+    :host([data-ui-kit-theme='seat']) .xlarge ::slotted(*) {
+        height: 2rem;
+        --ui-kit-icon-height: 2rem;
+        width: 2rem;
+        --ui-kit-icon-width: 2rem;
+    }
+    :host([data-ui-kit-theme='seat']) .large ::slotted(*) {
+        height: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        width: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+    }
+    :host([data-ui-kit-theme='seat']) .medium ::slotted(*) {
+        height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        width: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='seat']) .small ::slotted(*) {
+        height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        width: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='seat']) .xlarge .icon {
+        --ui-kit-icon-height: 2rem;
+        --ui-kit-icon-width: 2rem;
+    }
+    :host([data-ui-kit-theme='seat']) .large .icon {
+        --ui-kit-icon-height: var(--ds-sizing-24, 24px);
+        --ui-kit-icon-width: var(--ds-sizing-24, 24px);
+    }
+    :host([data-ui-kit-theme='seat']) .medium .icon {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+    :host([data-ui-kit-theme='seat']) .small .icon {
+        --ui-kit-icon-height: var(--ds-sizing-20, 20px);
+        --ui-kit-icon-width: var(--ds-sizing-20, 20px);
+    }
+`;exports.seatStyles=t;

package/dist-react/cjs/components/ds-icon-button-group/ds-icon-button-group.cjs

@@ -0,0 +1,5 @@
+const e=require("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/lit-html.cjs"),t=require("../../node_modules/.pnpm/lit-element@4.2.2/node_modules/lit-element/lit-element.cjs");require("../../node_modules/.pnpm/lit@3.3.3/node_modules/lit/index.cjs");const n=require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs"),r=require("../../decorators/customUiKitElement.cjs"),i=require("./styles/common.styles.cjs");var a=class extends t.LitElement{render(){return e.html`
+            <div part="container" class="container">
+                <slot></slot>
+            </div>
+        `}},o=(a.styles=[i.commonStyles],a);o=n.default([r.customUiKitElement(`ds-icon-button-group`)],o),Object.defineProperty(exports,"DsIconButtonGroup",{enumerable:!0,get:function(){return o}});

package/dist-react/cjs/components/ds-icon-button-group/styles/common.styles.cjs

@@ -0,0 +1,23 @@
+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;
+    }
+
+    .container {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--ds-spacing-s-1, 0px);
+        border: var(--ds-border-width-m, 1px) solid var(--ds-icon-button-border-color-secondary-default, #5a5c67);
+        border-radius: var(--ds-border-radius-interaction-default);
+        overflow: hidden;
+    }
+
+    .container {
+        background-image: linear-gradient(
+            179.78deg,
+            var(--ds-color-interaction-subtle-alternative-bg-default-start) 0.73%,
+            var(--ds-color-interaction-subtle-alternative-bg-default-mid) 84.63%,
+            var(--ds-color-interaction-subtle-alternative-bg-default-end) 99.44%
+        );
+    }
+`;exports.commonStyles=t;

package/dist-react/cjs/components/ds-inline-alert/ds-inline-alert.cjs

@@ -1,13 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("../base/UiKitElement.cjs"),p=require("../../decorators/customUiKitElement.cjs");require("../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.cjs");const i=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 l=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"),u=require("../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/when.cjs"),d=require("./styles/common.styles.cjs");var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(t,s,o,n)=>{for(var e=n>1?void 0:n?y(s,o):s,c=t.length-1,a;c>=0;c--)(a=t[c])&&(e=(n?a(s,o,e):a(e))||e);return n&&e&&v(s,o,e),e};exports.DsInlineAlert=class extends h.UiKitElement{constructor(){super(...arguments),this.status="default",this.title="",this.text="",this.show=!0}getIconName(){switch(this.status){case"success":return"check-mark-circle";case"error":return"cross-circle";case"warning":return"exclamation-mark-circle";case"info":return"info-circle";default:return"chat-bubble"}}handleClickCloseButton(){const s=new CustomEvent("inline-alert:close",{bubbles:!0,composed:!0});this.dispatchEvent(s),this.show=!1}get inlineAlertClasses(){return{container:!0,[this.status||"default"]:!0,show:this.show}}get iconTemplate(){return this.componentFactory.createIcon({class:"icon","icon-name":this.getIconName(),size:24})}get closeButtonTemplate(){return this.componentFactory.createIconButton({"data-aria-label":"close-button","@click":this.handleClickCloseButton,"icon-name":"cross",variant:"naked",size:"medium"})}render(){return this.show?i.html`
-            <div class=${m.classMap(this.inlineAlertClasses)} part="container">
+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.148.0/helpers/esm/decorate.cjs"),i=require("../base/UiKitElement.cjs"),a=require("../../decorators/customUiKitElement.cjs");require("../ds-icon/ds-icon.cjs");const 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("../../node_modules/.pnpm/lit-html@3.3.3/node_modules/lit-html/directives/when.cjs"),d=require("./styles/common.styles.cjs"),f=require("./styles/cupra-diagonal.styles.cjs"),p=require("./styles/seat-legacy.styles.cjs"),m=require("./styles/seat.styles.cjs");var h=class extends i.UiKitElement{constructor(...e){super(...e),this.status=`default`,this.title=``,this.text=``,this.showClose=!0,this._show=void 0,this._showState=!0}get show(){return this._show??this._showState}set show(e){this._show=e}getIconName(){switch(this.status){case`success`:return`check-mark-circle`;case`error`:return`cross-circle`;case`warning`:return`exclamation-mark-circle`;case`info`:return`info-circle`;default:return`chat-bubble`}}handleClickCloseButton(){let e=new CustomEvent(`inline-alert:close`,{bubbles:!0,composed:!0});this.dispatchEvent(e),this._showState=!1}get inlineAlertClasses(){return{container:!0,[this.status||`default`]:!0,show:this.show}}get iconTemplate(){return s.uiKitHtml`<ds-icon class="icon" icon-name=${l.ifDefined(this.getIconName())} size="24"></ds-icon>`}get closeButtonTemplate(){return this.showClose?s.uiKitHtml`<ds-icon-button
+            data-aria-label="close-button"
+            @click=${this.handleClickCloseButton}
+            icon-name="cross"
+            variant="naked"
+            size="medium"
+        ></ds-icon-button>`:e.nothing}render(){return this.show?e.html`
+            <div class=${c.classMap(this.inlineAlertClasses)} part="container">
                 ${this.iconTemplate}
                 <div class="content">
                     <div class="header">
-                        ${u.when(this.title,()=>i.html`<div class="title">${this.title}</div>`)}
-                        ${u.when(this.text,()=>i.html`<div class="message">${this.text}</div>`)}
+                        ${u.when(this.title,()=>e.html`<div class="title">${this.title}</div>`)}
+                        ${u.when(this.text,()=>e.html`<div class="message">${this.text}</div>`)}
                     </div>
                     <slot></slot>
                 </div>
                 ${this.closeButtonTemplate}
             </div>
-        `:i.nothing}};exports.DsInlineAlert.styles=[d.inlineAlertStyles];r([l.property({type:String})],exports.DsInlineAlert.prototype,"status",2);r([l.property({type:String})],exports.DsInlineAlert.prototype,"title",2);r([l.property({type:String})],exports.DsInlineAlert.prototype,"text",2);r([l.property({type:Boolean,converter:t=>t!==null&&t!=="false",reflect:!0})],exports.DsInlineAlert.prototype,"show",2);exports.DsInlineAlert=r([p.customUiKitElement("ds-inline-alert")],exports.DsInlineAlert);
+        `:e.nothing}},g=(h.styles=[d.inlineAlertStyles,f.cupraDiagonalStyles,m.seatStyles,p.seatLegacyStyles],h);r.default([t.property({type:String})],g.prototype,`status`,void 0),r.default([t.property({type:String})],g.prototype,`title`,void 0),r.default([t.property({type:String})],g.prototype,`text`,void 0),r.default([t.property({attribute:`show-close`,type:Boolean,converter:o.booleanConverter,reflect:!0})],g.prototype,`showClose`,void 0),r.default([t.property({type:Boolean,attribute:`show`,converter:o.booleanConverter})],g.prototype,`_show`,void 0),r.default([n.state()],g.prototype,`_showState`,void 0),g=r.default([a.customUiKitElement(`ds-inline-alert`)],g),Object.defineProperty(exports,"DsInlineAlert",{enumerable:!0,get:function(){return g}});

package/dist-react/cjs/components/ds-inline-alert/styles/common.styles.cjs

@@ -1,4 +1,4 @@
-"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"),a=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`
     :host {
         display: contents;
     }
@@ -6,9 +6,9 @@
     .container {
         display: none;
         align-items: flex-start;
-        gap: var(--ds-spacing-m-1, 12px);
-        padding: var(--ds-spacing-m-3, 20px) var(--ds-spacing-m-2, 16px);
-        border-radius: var(--ds-button-border-radius-base, 6px);
+        gap: var(--ds-spacing-s-5, 8px);
+        padding: var(--ds-spacing-s-5, 8px);
+        border-radius: var(--ds-border-radius-s, 8px);
         background: var(--ds-color-surface-container-default, rgba(250, 250, 250, 0.05));
         box-shadow: 0 4px 4px 0 var(--ds-opacity-black-20, rgba(9, 9, 11, 0.2));
         width: 100%;
@@ -34,4 +34,4 @@
         flex-direction: column;
         gap: 4px;
     }
-`;exports.inlineAlertStyles=a;
+`;exports.inlineAlertStyles=t;