npm - @cupra/ui-kit - Versions diffs - 2.0.0-canary.230 → 2.0.0-canary.232 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1329) hide show

package/dist-react/cjs/components/ds-icon-button/styles/cupra.styles.cjs ADDED Viewed

@@ -0,0 +1,585 @@
+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']) .button.variant-primary.light {
+        border-color: var(--ds-color-black);
+        background: var(--ds-color-black);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-primary.dark {
+        border-color: var(--ds-color-desert-sand-100);
+        background: var(--ds-color-desert-sand-100);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-secondary.light {
+        border-color: var(--ds-color-black);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-secondary.dark {
+        border-color: var(--ds-color-white);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-tertiary {
+        border-color: transparent;
+        background: transparent;
+        outline-color: transparent;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.destructive.light {
+        border-color: #b50303;
+        background: #b50303;
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.destructive.dark {
+        border-color: #ec8b8b;
+        background: #ec8b8b;
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-primary:hover.light {
+        border-color: var(--ds-color-dark-grey);
+        background: var(--ds-color-dark-grey);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-primary:hover.dark {
+        border-color: var(--ds-color-white);
+        background: var(--ds-color-white);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-secondary:hover.light {
+        border-color: var(--ds-color-black);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-secondary:hover.dark {
+        border-color: var(--ds-color-white);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.destructive:hover.light {
+        border-color: #cc4f4f;
+        background: #cc4f4f;
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.destructive:hover.dark {
+        border-color: #b86f6f;
+        background: #b86f6f;
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-primary:focus-visible.light {
+        border-color: var(--ds-color-black);
+        background: var(--ds-color-black);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-primary:focus-visible.dark {
+        border-color: var(--ds-color-desert-sand-100);
+        background: var(--ds-color-desert-sand-100);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-primary:focus-visible {
+        border-color: var(--ds-color-green-80);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-secondary:focus-visible {
+        border-color: var(--ds-color-green-80);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-tertiary:focus-visible {
+        border-color: var(--ds-color-green-80);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.destructive:focus-visible {
+        border-color: var(--ds-color-green-80);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-primary.disabled.light {
+        border-color: var(--ds-color-medium-grey);
+        background: var(--ds-color-medium-grey);
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-primary.disabled.dark {
+        border-color: var(--ds-color-dark-grey);
+        background: var(--ds-color-dark-grey);
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-secondary.disabled.light {
+        border-color: var(--ds-color-off-white);
+        background: var(--ds-color-white);
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-secondary.disabled.dark {
+        border-color: var(--ds-color-off-white);
+        background: var(--ds-color-black);
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.destructive.disabled.light {
+        border-color: #f4d9d9;
+        background: #f4d9d9;
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.destructive.disabled.dark {
+        border-color: #5a3d3d;
+        background: #5a3d3d;
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button {
+        border-width: 1px;
+        border-style: solid;
+        border-radius: 100%;
+        outline-color: transparent;
+        outline-width: 0.0625rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-secondary {
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-secondary:hover {
+        background: transparent;
+        outline-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-tertiary.light {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-tertiary.dark {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-tertiary:hover.light {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-tertiary:hover.dark {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-tertiary.disabled.light {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-tertiary.disabled.dark {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .button:focus-visible {
+        outline-color: var(--ds-color-green-80);
+        outline-width: 0.1875rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.xlarge {
+        height: 3.5rem;
+        width: 3.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.large {
+        height: 3rem;
+        width: 3rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.medium {
+        height: 2.5rem;
+        width: 2.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.small {
+        height: 2rem;
+        width: 2rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.xsmall {
+        height: 1.25rem;
+        width: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.custom {
+        display: contents;
+    }
+    :host([data-ui-kit-theme='cupra']) .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: 1px;
+        border-style: solid;
+        border-radius: 100%;
+        outline-color: transparent;
+        outline-width: 0.0625rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-primary.light ::slotted(*) {
+        border-color: var(--ds-color-black);
+        background: var(--ds-color-black);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-primary.dark ::slotted(*) {
+        border-color: var(--ds-color-desert-sand-100);
+        background: var(--ds-color-desert-sand-100);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-secondary.light ::slotted(*) {
+        border-color: var(--ds-color-black);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-secondary.dark ::slotted(*) {
+        border-color: var(--ds-color-white);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-tertiary ::slotted(*) {
+        border-color: transparent;
+        background: transparent;
+        outline-color: transparent;
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.destructive.light ::slotted(*) {
+        border-color: #b50303;
+        background: #b50303;
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.destructive.dark ::slotted(*) {
+        border-color: #ec8b8b;
+        background: #ec8b8b;
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-primary:hover.light ::slotted(*) {
+        border-color: var(--ds-color-dark-grey);
+        background: var(--ds-color-dark-grey);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-primary:hover.dark ::slotted(*) {
+        border-color: var(--ds-color-white);
+        background: var(--ds-color-white);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-secondary:hover.light ::slotted(*) {
+        border-color: var(--ds-color-black);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-secondary:hover.dark ::slotted(*) {
+        border-color: var(--ds-color-white);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.destructive:hover.light ::slotted(*) {
+        border-color: #cc4f4f;
+        background: #cc4f4f;
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.destructive:hover.dark ::slotted(*) {
+        border-color: #b86f6f;
+        background: #b86f6f;
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-primary.light ::slotted(*:focus-visible) {
+        border-color: var(--ds-color-black);
+        background: var(--ds-color-black);
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-primary.dark ::slotted(*:focus-visible) {
+        border-color: var(--ds-color-desert-sand-100);
+        background: var(--ds-color-desert-sand-100);
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-primary ::slotted(*:focus-visible) {
+        border-color: var(--ds-color-green-80);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-secondary ::slotted(*:focus-visible) {
+        border-color: var(--ds-color-green-80);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-tertiary ::slotted(*:focus-visible) {
+        border-color: var(--ds-color-green-80);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.destructive ::slotted(*:focus-visible) {
+        border-color: var(--ds-color-green-80);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-primary.disabled.light ::slotted(*) {
+        border-color: var(--ds-color-medium-grey);
+        background: var(--ds-color-medium-grey);
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-primary.disabled.dark ::slotted(*) {
+        border-color: var(--ds-color-dark-grey);
+        background: var(--ds-color-dark-grey);
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-secondary.disabled.light ::slotted(*) {
+        border-color: var(--ds-color-off-white);
+        background: var(--ds-color-white);
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-secondary.disabled.dark ::slotted(*) {
+        border-color: var(--ds-color-off-white);
+        background: var(--ds-color-black);
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.destructive.disabled.light ::slotted(*) {
+        border-color: #f4d9d9;
+        background: #f4d9d9;
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.destructive.disabled.dark ::slotted(*) {
+        border-color: #5a3d3d;
+        background: #5a3d3d;
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-secondary ::slotted(*) {
+        background: transparent;
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-secondary:hover ::slotted(*) {
+        background: transparent;
+        outline-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-tertiary.light ::slotted(*) {
+        color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-tertiary.dark ::slotted(*) {
+        color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-tertiary:hover.light ::slotted(*) {
+        color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-tertiary:hover.dark ::slotted(*) {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-tertiary.disabled.light ::slotted(*) {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.variant-tertiary.disabled.dark ::slotted(*) {
+        color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .custom ::slotted(*:focus-visible) {
+        outline-color: var(--ds-color-green-80);
+        outline-width: 0.1875rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.xlarge ::slotted(*) {
+        height: 3.5rem;
+        width: 3.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.large ::slotted(*) {
+        height: 3rem;
+        width: 3rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.medium ::slotted(*) {
+        height: 2.5rem;
+        width: 2.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.small ::slotted(*) {
+        height: 2rem;
+        width: 2rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .custom.xsmall ::slotted(*) {
+        height: 1.25rem;
+        width: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary:hover.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary:hover.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary:hover.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary:hover.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary:hover.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary:hover.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive:hover.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive:hover.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary:focus-visible.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary:focus-visible.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary.disabled.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary.disabled.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary.disabled.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary.disabled.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary.disabled.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary.disabled.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive.disabled.light ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive.disabled.dark ::slotted(*) {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .xlarge ::slotted(*) {
+        height: 2.75rem;
+        --ui-kit-icon-height: 2.75rem;
+        width: 2.75rem;
+        --ui-kit-icon-width: 2.75rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .large ::slotted(*) {
+        height: 2.5rem;
+        --ui-kit-icon-height: 2.5rem;
+        width: 2.5rem;
+        --ui-kit-icon-width: 2.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .medium ::slotted(*) {
+        height: 2rem;
+        --ui-kit-icon-height: 2rem;
+        width: 2rem;
+        --ui-kit-icon-width: 2rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .small ::slotted(*) {
+        height: 1.5625rem;
+        --ui-kit-icon-height: 1.5625rem;
+        width: 1.5625rem;
+        --ui-kit-icon-width: 1.5625rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .xsmall ::slotted(*) {
+        height: 1.25rem;
+        --ui-kit-icon-height: 1.25rem;
+        width: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary.light .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary.light .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary.light .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive.light .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary:hover.light .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary:hover.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary:hover.light .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary:hover.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary:hover.light .icon {
+        --ui-kit-icon-color: var(--ds-color-grey);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary:hover.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive:hover.light .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive:hover.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary:focus-visible.light .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary:focus-visible.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary.disabled.light .icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-primary.disabled.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary.disabled.light .icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-secondary.disabled.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary.disabled.light .icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .variant-tertiary.disabled.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive.disabled.light .icon {
+        --ui-kit-icon-color: var(--ds-color-white);
+    }
+    :host([data-ui-kit-theme='cupra']) .destructive.disabled.dark .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .xlarge .icon {
+        --ui-kit-icon-height: 2.75rem;
+        --ui-kit-icon-width: 2.75rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .large .icon {
+        --ui-kit-icon-height: 2.5rem;
+        --ui-kit-icon-width: 2.5rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .medium .icon {
+        --ui-kit-icon-height: 2rem;
+        --ui-kit-icon-width: 2rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .small .icon {
+        --ui-kit-icon-height: 1.5625rem;
+        --ui-kit-icon-width: 1.5625rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .xsmall .icon {
+        --ui-kit-icon-height: 1.25rem;
+        --ui-kit-icon-width: 1.25rem;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-naked {
+        border-color: transparent;
+        border-radius: none;
+        background: none;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-naked:hover {
+        background: none;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-naked:focus-visible {
+        background: none;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-naked:active {
+        background: none;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-naked.disabled {
+        background: none;
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-naked:hover .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-naked:focus-visible .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-naked:active .icon {
+        --ui-kit-icon-color: var(--ds-color-black);
+    }
+    :host([data-ui-kit-theme='cupra']) .button.variant-naked.disabled .icon {
+        --ui-kit-icon-color: var(--ds-color-off-white);
+    }
+`;exports.cupraStyles=t;