@warp-ds/elements 1.3.1-next.1 → 1.3.2-next.1

package/dist/packages/textfield/index.d.ts

@@ -66,7 +66,6 @@ export class WarpTextField {
     type: string;
     get _inputStyles(): import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directives/class-map").ClassMapDirective>;
     get _helpTextStyles(): import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directives/class-map").ClassMapDirective>;
-    get _labelStyles(): import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directives/class-map").ClassMapDirective>;
     get _label(): import("lit").TemplateResult<1>;
     get _helpId(): string;
     get _id(): string;

package/dist/packages/textfield/index.js

@@ -9,26 +9,27 @@ var __publicField = (obj, key, value) => {
 import { css, html } from "lit";
 import WarpElement from "@warp-ds/elements-core";
 
-// node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.9.1/node_modules/@warp-ds/css/component-classes/index.js
 var box = {
   box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
   // Relative here enables w-clickable
   bleed: "-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",
   // We target L and R to override the default rounded-8
-  info: "i-bg-$color-box-info-background i-text-$color-box-info-text",
-  neutral: "i-bg-$color-box-neutral-background i-text-$color-box-neutral-text",
-  bordered: "border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text",
-  infoClickable: "hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",
-  neutralClickable: "hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",
-  borderedClickable: "hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"
+  info: "s-bg-info-subtle",
+  neutral: "bg-[--w-s-color-surface-sunken]",
+  bordered: "border-2 s-border s-bg",
+  infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-hover",
+  neutralClickable: "hover:s-bg-subtle-hover active:s-bg-subtle-hover",
+  borderedClickable: "hover:s-bg-hover active:s-bg-hover hover:s-border-hover active:s-border-hover"
 };
 var buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
 var expandable = {
   expandable: "will-change-height",
-  expandableTitle: "font-bold i-text-$color-expandable-title-text",
-  expandableBox: "i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 " + box.box,
+  expandableTitle: "font-bold s-text",
+  expandableBox: "s-bg-subtle hover:s-bg-subtle-hover py-0 px-0 " + box.box,
+  expandableInfo: "s-bg-info-subtle! hover:s-bg-info-subtle-hover!",
   expandableBleed: box.bleed,
-  chevron: "inline-block align-middle i-text-$color-expandable-icon",
+  chevron: "inline-block align-middle s-icon",
   chevronNonBox: "ml-8",
   chevronBox: "",
   chevronTransform: "transform transition-transform transform-gpu ease-in-out",
@@ -48,17 +49,17 @@ var expandable = {
 };
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
-  primary: "i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",
-  secondary: "i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",
-  utility: "i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",
-  destructive: "i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active",
-  pill: "i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active",
-  disabled: "i-text-$color-button-disabled-text i-bg-$color-button-disabled-background",
-  quiet: "i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active",
-  utilityQuiet: "i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover",
-  negativeQuiet: "i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",
-  loading: "i-text-$color-button-loading-text i-bg-$color-button-loading-background",
-  link: "i-text-$color-button-link-text"
+  primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",
+  secondary: "s-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active",
+  utility: "s-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",
+  destructive: "s-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active",
+  pill: "s-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",
+  disabled: "s-text-inverted s-bg-disabled",
+  quiet: "bg-transparent s-text-link hover:s-bg-hover active:s-bg-active",
+  utilityQuiet: "s-text bg-transparent hover:s-bg-hover active:s-bg-active",
+  negativeQuiet: "bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active",
+  loading: "s-text s-bg-subtle",
+  link: "s-text-link"
 };
 var buttonTypes = {
   primary: `border-0 rounded-8 ${buttonDefaultStyling}`,
@@ -162,10 +163,10 @@ var button = {
   contentWidth: "max-w-max"
 };
 var modal = {
-  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop
-  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,
-  backdrop: "fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]",
-  modal: "pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
+  transparentBg: "",
+  //TODO: Remove in v2 - previously used for opacity before changing to a rgba background in backdrop
+  backdrop: "fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]",
+  modal: "pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
   content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
   footer: "flex justify-end shrink-0 px-16 sm:px-32",
   transitionTitle: "transition-all duration-300",
@@ -180,38 +181,98 @@ var modal = {
   titleButtonIconRotated: "transform rotate-90"
 };
 var input = {
-  default: "block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current",
+  default: "block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-selected rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current",
   textArea: "min-h-[42] sm:min-h-[45]",
-  disabled: "i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none",
-  invalid: "i-border-$color-input-border-negative i-text-$color-input-text-negative!",
-  readOnly: "pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only",
-  placeholder: "placeholder:i-text-$color-input-text-placeholder",
+  disabled: "s-bg-disabled-subtle s-border-disabled hover:s-border-disabled! s-text-disabled pointer-events-none",
+  invalid: "s-border-negative s-text-negative! hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!",
+  readOnly: "pl-0 bg-transparent! border-0! pointer-events-none",
+  placeholder: "placeholder:s-text-placeholder",
   wrapper: "relative",
   suffix: "pr-40",
   prefix: "pl-40"
 };
 var label = {
-  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",
-  labelInvalid: "i-text-$color-label-text-negative",
-  optional: "pl-8 font-normal text-s i-text-$color-label-optional-text"
+  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",
+  optional: "pl-8 font-normal text-s s-text-subtle",
+  labelInvalid: "s-text-negative"
+  // TODO: Remove in v2 - kept for backwards compatibility
 };
 var helpText = {
-  helpText: "text-xs mt-4 block i-text-$color-helptext-text",
-  helpTextValid: "i-text-$color-helptext-text-positive",
-  helpTextInvalid: "i-text-$color-helptext-text-negative"
+  helpText: "text-xs mt-4 block",
+  helpTextColor: "s-text-subtle",
+  helpTextColorInvalid: "s-text-negative",
+  // TODO: Remove below properties in v2 - kept for backwards compatibility
+  helpTextValid: "s-text-positive",
+  helpTextInvalid: "s-text-negative"
 };
-var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ";
+var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ";
 var suffix = {
   wrapper: prefixSuffixWrapperBase + "right-0",
   wrapperWithLabel: "w-max pr-12",
   wrapperWithIcon: "w-40",
-  label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
 };
 var prefix = {
   wrapper: prefixSuffixWrapperBase + "left-0",
   wrapperWithLabel: "w-max pl-12",
   wrapperWithIcon: "w-40",
-  label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
+};
+var toggle = {
+  // wrapper classes
+  field: "relative text-m",
+  // true
+  wrapper: "relative py-1",
+  // true
+  wrapperRadioButtons: "inline-flex font-bold rounded-8 focus-within:focusable",
+  // isRadioButton && !isEqualWidth
+  wrapperRadioButtonsJustified: "flex font-bold rounded-8 focus-within:focusable",
+  // isRadioButton && isEqualWidth,
+  // group classes
+  radioButtonsGroup: "group",
+  // isRadioButton
+  radioButtonsGroupJustified: "grow-1 shrink-0 basis-auto",
+  // isRadioButton && isEqualWidth
+  // input classes
+  input: "peer",
+  a11y: "sr-only",
+  // label classes
+  label: "peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2",
+  // !isRadioButton
+  labelBefore: 'before:content-[""] before:block',
+  // !isRadioButton && !isIndeterminate
+  checkbox: "before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover",
+  // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled
+  checkboxInvalid: "before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover",
+  // isCheckbox && !isIndeterminate && isInvalid && !isDisabled
+  checkboxDisabled: "before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled",
+  // isCheckbox && !isIndeterminate && !isInvalid && isDisabled
+  indeterminate: 'before:content-["\u2013"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover',
+  // isCheckbox && isIndeterminate && !isInvalid && !isDisabled
+  indeterminateInvalid: 'before:content-["\u2013"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover',
+  // isCheckbox && isIndeterminate && isInvalid && !isDisabled
+  indeterminateDisabled: 'before:content-["\u2013"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled',
+  // isCheckbox && isIndeterminate && !isInvalid && isDisabled
+  radio: "before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover",
+  // isRadio && !isDisabled && !isInvalid
+  radioInvalid: "before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover",
+  // isRadio && isInvalid && !isDisabled
+  radioDisabled: "before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]",
+  // isRadio && !isInvalid && isDisabled
+  radioButtonsLabel: "peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2",
+  // isRadioButtons
+  radioButtonsRegular: "text-s py-8 pl-12 pr-14",
+  // isRadioButtons && !isSmall
+  radioButtonsSmall: "text-xs py-[5px] px-[8px]"
+  // isRadioButtons && isSmall
+};
+var deadToggle = {
+  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
+  input: `${toggle.input} hidden`,
+  inputVue: "hidden",
+  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
+  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,
+  labelVue: "-mt-2"
 };
 var clickable = {
   toggle: "absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",
@@ -221,19 +282,27 @@ var clickable = {
 };
 var attention = {
   base: "border-2 relative flex items-start",
-  tooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8",
-  callout: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",
-  highlight: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m",
-  popover: "i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",
+  tooltip: "s-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8",
+  callout: "bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8",
+  highlight: "bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0",
+  popover: "bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0",
   arrowBase: "absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",
+  arrowDirectionLeftStart: "-left-[8px]",
   arrowDirectionLeft: "-left-[8px]",
+  arrowDirectionLeftEnd: "-left-[8px]",
+  arrowDirectionRightStart: "-right-[8px]",
   arrowDirectionRight: "-right-[8px]",
+  arrowDirectionRightEnd: "-right-[8px]",
+  arrowDirectionBottomStart: "-bottom-[8px]",
   arrowDirectionBottom: "-bottom-[8px]",
+  arrowDirectionBottomEnd: "-bottom-[8px]",
+  arrowDirectionTopStart: "-top-[8px]",
   arrowDirectionTop: "-top-[8px]",
-  arrowTooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background",
-  arrowCallout: "i-bg-$color-callout-background i-border-$color-callout-border",
-  arrowPopover: "i-bg-$color-popover-background i-border-$color-popover-background",
-  arrowHighlight: "i-bg-$color-callout-background i-border-$color-callout-border",
+  arrowDirectionTopEnd: "-top-[8px]",
+  arrowTooltip: "s-bg-inverted border-[--w-s-color-background-inverted]",
+  arrowCallout: "bg-[--w-color-callout-background] border-[--w-color-callout-border]",
+  arrowPopover: "bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]",
+  arrowHighlight: "bg-[--w-color-callout-background] border-[--w-color-callout-border]",
   content: "last-child:mb-0",
   notCallout: "absolute z-50",
   closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
@@ -275,18 +344,13 @@ var WarpTextField = class extends WarpElement {
   get _helpTextStyles() {
     return fclasses({
       [helpText.helpText]: true,
-      [helpText.helpTextInvalid]: this.invalid
-    });
-  }
-  get _labelStyles() {
-    return fclasses({
-      [label.label]: true,
-      [label.labelInvalid]: this.invalid
+      [helpText.helpTextColor]: !this.invalid,
+      [helpText.helpTextColorInvalid]: this.invalid
     });
   }
   get _label() {
     if (this.label) {
-      return html`<label for="${this._id}" class=${this._labelStyles}>${this.label}</label>`;
+      return html`<label for="${this._id}" class=${label.label}>${this.label}</label>`;
     }
   }
   get _helpId() {

package/dist/packages/textfield/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/textfield/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js", "../../../packages/utils/index.js"],
-  "sourcesContent": ["import { css, html } from 'lit';\nimport WarpElement from '@warp-ds/elements-core';\nimport { input, label as l, helpText as h } from '@warp-ds/css/component-classes';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { fclasses } from '../utils';\n\nclass WarpTextField extends WarpElement {\n  static properties = {\n    disabled: { type: Boolean },\n    invalid: { type: Boolean },\n    id: { type: String },\n    label: { type: String },\n    helpText: { type: String, attribute: 'help-text' },\n    size: { type: String },\n    max: { type: Number },\n    min: { type: Number },\n    minLength: { type: Number, attribute: 'min-length' },\n    maxLength: { type: Number, attribute: 'max-length' },\n    name: { type: String },\n    pattern: { type: String },\n    placeholder: { type: String },\n    readOnly: { type: Boolean, attribute: 'read-only' },\n    required: { type: Boolean },\n    type: { type: String },\n    value: { type: String },\n    _hasPrefix: { state: true },\n    _hasSuffix: { state: true },\n  };\n\n  // Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.\n  // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,\n  // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.\n  // https://stackoverflow.com/a/61631668\n  static styles = [WarpElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n      ::slotted(:last-child) {\n        margin-bottom: 0px !important;\n      }\n      .warp-input-with-prefix {\n        padding-left:var(--w-prefix-width, 40px);\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this.type = 'text';\n  }\n\n  get _inputStyles() {\n    return fclasses({\n      [input.default]: true,\n      [input.invalid]: this.invalid,\n      [input.disabled]: this.disabled,\n      [input.readOnly]: this.readOnly,\n      [input.suffix]: this._hasSuffix,\n      // we style input with prefix here because we cannot use\n      // arbitrary values with commas in UnoCSS like pl-[var(--w-prefix-width, 40px)]\n      'warp-input-with-prefix': this._hasPrefix,\n    });\n  }\n\n  get _helpTextStyles() {\n    return fclasses({\n      [h.helpText]: true,\n      [h.helpTextInvalid]: this.invalid,\n    });\n  }\n\n  get _labelStyles() {\n    return fclasses({\n      [l.label]: true,\n      [l.labelInvalid]: this.invalid,\n    });\n  }\n\n  get _label() {\n    if (this.label) {\n      return html`<label for=\"${this._id}\" class=${this._labelStyles}>${this.label}</label>`;\n    }\n  }\n\n  get _helpId() {\n    if (this.helpText) return `${this._id}__hint`;\n  }\n\n  get _id() {\n    return 'textfield';\n  }\n\n  get _error() {\n    if (this.invalid && this._helpId) return this._helpId;\n  }\n\n  handler(e) {\n    const { name, value } = e.target;\n    const event = new CustomEvent(e.type, {\n      detail: {\n        name,\n        value,\n        target: e.target,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  prefixSlotChange(e) {\n    const el = this.renderRoot.querySelector('slot[name=prefix]');\n    const affixes = el.assignedElements();\n    if (affixes.length) this._hasPrefix = true;\n  }\n\n  suffixSlotChange(e) {\n    const el = this.renderRoot.querySelector('slot[name=suffix]');\n    const affixes = el.assignedElements();\n    if (affixes.length) this._hasSuffix = true;\n  }\n\n  render() {\n    return html`\n      ${this._label}\n      <div class=\"${input.wrapper}\">\n        <slot @slotchange=\"${this.prefixSlotChange}\" name=\"prefix\"></slot>\n        <input\n          class=\"${this._inputStyles}\"\n          type=\"${this.type}\"\n          min=\"${ifDefined(this.min)}\"\n          max=\"${ifDefined(this.max)}\"\n          size=\"${ifDefined(this.size)}\"\n          minlength=\"${ifDefined(this.minLength)}\"\n          maxlength=\"${ifDefined(this.maxLength)}\"\n          name=\"${ifDefined(this.name)}\"\n          pattern=\"${ifDefined(this.pattern)}\"\n          placeholder=\"${ifDefined(this.placeholder)}\"\n          value=\"${ifDefined(this.value)}\"\n          aria-describedby=\"${ifDefined(this._helpId)}\"\n          aria-errormessage=\"${ifDefined(this._error)}\"\n          aria-invalid=\"${ifDefined(this.invalid)}\"\n          id=\"${this._id}\"\n          ?disabled=\"${this.disabled}\"\n          ?readonly=\"${this.readOnly}\"\n          ?required=\"${this.required}\"\n          @blur=\"${this.handler}\"\n          @change=\"${this.handler}\"\n          @focus=\"${this.handler}\"\n        />\n        <slot @slotchange=\"${this.suffixSlotChange}\" name=\"suffix\"></slot>\n      </div>\n      ${this.helpText &&\n      html`<div class=\"${this._helpTextStyles}\" id=\"${this._helpId}\">${this.helpText}</div>`}\n    `;\n  }\n}\n\nif (!customElements.get('w-textfield')) {\n  customElements.define('w-textfield', WarpTextField);\n}\n\nexport { WarpTextField };\n", "export const pageIndicator = {\n  wrapper: 'flex space-x-8 p-8',\n  dot: 'h-8 w-8 rounded-full',\n  inactive: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n  active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n  base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n  info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n  roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n  neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n  positionBase: 'absolute backdrop-blur',\n  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n  wrapper: 'touch-pan-y relative w-full h-44 py-2',\n  track:\n    'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n  trackDisabled:\n    'pointer-events-none i-bg-$color-slider-track-background-disabled',\n  activeTrack:\n    'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n  activeTrackDisabled:\n    'i-bg-$color-slider-track-background-disabled pointer-events-none',\n  thumb:\n    'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n  thumbEnabled:\n    'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n  thumbDisabled:\n    'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n  box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n  info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n  neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n  bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n  infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n  neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n  borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n  pill: 'flex items-center',\n  button: 'inline-flex items-center focusable text-xs transition-all',\n  suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n  filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n  label: 'pl-12 py-8 rounded-l-full',\n  labelWithoutClose: 'pr-12 rounded-r-full',\n  labelWithClose: 'pr-2',\n  close: 'pr-12 pl-4 py-8 rounded-r-full',\n  a11y: 'sr-only',\n};\n\nexport const step = {\n  step: 'group/step',\n  stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n  stepVerticalLeft: 'grid-cols-[20px_1fr]',\n  stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n  stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n  stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n  stepDotVerticalRight: 'col-start-2',\n  stepDotHorizontal: 'row-start-2 justify-self-end',\n  stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n  stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n  stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n  stepLineVertical: 'w-2 h-full justify-self-center',\n  stepLineVerticalRight: 'col-start-2',\n  stepLineHorizontal: 'h-2 w-full row-start-2',\n  stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n  stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n  stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n  stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n  content: 'last:mb-0 group-last/step:last:pb-0',\n  contentVertical: 'row-span-2 pb-32',\n  contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n  steps: 'w-full',\n  stepsHorizontal: 'flex',\n};\n\nexport const card = {\n  card: 'cursor-pointer overflow-hidden relative transition-all',\n  cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n  cardFlat: 'border-2 rounded-4',\n  cardFlatUnselected:\n    'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n  cardFlatSelected:\n    'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n  cardUnselected: 's-bg',\n  cardSelected:\n    'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n  cardOutline:\n    'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n  cardOutlineUnselected: 'i-border-$color-card-border',\n  cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n  switch: 'tap-highlight-transparent',\n  label: 'block relative h-24 w-44 cursor-pointer group',\n  labelDisabled: 'pointer-events-none',\n  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n  trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n  trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n  trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n  handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n  handleSelected: 'translate-x-20',\n  handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n  handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n  a11y: 'sr-only',\n};\n\nexport const toaster = {\n  container:\n    'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n  content: 'w-full',\n  toaster:\n    'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n  wrapper: 'relative overflow-hidden w-full',\n  toast:\n    'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n  positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n  warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n  negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n  icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n  iconPositive: 'i-text-$color-toast-positive-icon',\n  iconWarning: 'i-text-$color-toast-warning-icon',\n  iconNegative: 'i-text-$color-toast-negative-icon',\n  iconLoading: 'animate-bounce',\n  content: 'self-center mr-8 py-4 last-child:mb-0',\n  close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n  tabContainer: 'inline-grid relative',\n  wunderbar:\n    'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n  wrapperUnderlined:\n    'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n  tabActive: 'i-text-$color-tabs-text-selected',\n  icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n  iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n  content: 'flex items-center justify-center gap-8',\n  contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n  contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n  cols1: 'grid-cols-1',\n  cols2: 'grid-cols-2',\n  cols3: 'grid-cols-3',\n  cols4: 'grid-cols-4',\n  cols5: 'grid-cols-5',\n  cols6: 'grid-cols-6',\n  cols7: 'grid-cols-7',\n  cols8: 'grid-cols-8',\n  cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n  'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n  expandable: 'will-change-height',\n  expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n  expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n  expandableBleed: box.bleed,\n  chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n  chevronNonBox: 'ml-8',\n  chevronBox: '',\n  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n  chevronExpand: '-rotate-180',\n  chevronCollapse: 'rotate-180',\n  elementsTransformChevronDownPart: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n  elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n  elementsTransformChevronUpPart: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n  elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n  expansion: 'overflow-hidden',\n  expansionNotExpanded: 'h-0 invisible',\n  button: buttonReset + ' hover:underline focus-visible:underline',\n  buttonBox: 'w-full text-left relative inline-flex items-center justify-between ' + box.box,\n  paddingTop: 'pt-0',\n  title: 'flex w-full justify-between items-center',\n  titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n  primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n  secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n  utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n  destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n  pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n  disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n  quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n  utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n  negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n  loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n  link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n  utility: `border rounded-4 ${buttonDefaultStyling}`,\n  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  pill:\n  `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n  xsmall: 'py-6 px-16',\n  small: 'py-8 px-16',\n  medium: 'py-10 px-14',\n  large: 'py-12 px-16',\n  utility: 'py-[11px] px-[15px]',\n  smallUtility: 'py-[7px] px-[15px]',\n  pill: 'min-h-[44px] min-w-[44px]',\n  pillSmall: 'min-h-32 min-w-32',\n  link: 'p-0',\n};\n\nconst buttonTextSizes = {\n  medium: 'text-m leading-[24]',\n  xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n  inProgress:\n    `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n  quiet:\n    `border-0 rounded-8 ${buttonDefaultStyling}`,\n  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  isDisabled:\n    `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n  // Buttontypes\n  secondary:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n  secondaryHref:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondaryDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondaryQuiet:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondaryQuietDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondaryLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n  secondaryQuietLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n  linkAsButton: 'inline-block hover:no-underline text-center',\n  a11y: 'sr-only',\n  fullWidth: \"w-full max-w-full\",\n  contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n  wrapper: 'inline-flex rounded-4 overflow-hidden',\n  raised: 'i-shadow-$shadow-buttongroup',\n  vertical: 'flex-col',\n  nonOutlinedVertical: 'divide-y',\n  nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n  wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n  outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n  outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n  outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n  outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n  outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n  outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n  selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n  backdrop:\n    'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n  modal:\n    'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n  content:\n    'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n  transitionTitle: 'transition-all duration-300',\n  transitionTitleCenter: 'justify-self-center self-center',\n  transitionTitleColSpan: 'col-span-2',\n  title:\n    'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n  titleText: 'mb-0 h4 sm:h3',\n  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,\n  titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n  titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n  titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n  titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n  alert: \"flex p-16 border border-l-4 rounded-4\",\n  willChangeHeight: \"will-change-height\",\n  textWrapper: \"last-child:mb-0 text-s\",\n  title: \"text-s\",\n  icon: \"w-16 mr-8 min-w-16\",\n  negative:  \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n  negativeIcon: \"i-text-$color-alert-negative-icon\",\n  positive:  \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n  positiveIcon: \"i-text-$color-alert-positive-icon\",\n  warning:  \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n  warningIcon: \"i-text-$color-alert-warning-icon\",\n  info:  \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n  infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n  default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n  textArea: 'min-h-[42] sm:min-h-[45]',\n  disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n  placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n  wrapper: 'relative',\n  suffix: 'pr-40',\n  prefix: 'pl-40',\n};\n\nexport const select = {\n  default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n  disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-select-border-negative',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n  wrapper: 'relative',\n  selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n  chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n  label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n  labelInvalid: 'i-text-$color-label-text-negative',\n  optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n  helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n  helpTextValid: 'i-text-$color-helptext-text-positive',\n  helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n  'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n  wrapper: prefixSuffixWrapperBase + 'right-0',\n  wrapperWithLabel: 'w-max pr-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n  wrapper: prefixSuffixWrapperBase + 'left-0',\n  wrapperWithLabel: 'w-max pl-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n  wrapper: 'flex space-x-8',\n  text: 'i-text-$color-breadcrumbs-text',\n  link: 'i-text-$color-breadcrumbs-link-text',\n  separator: 'select-none i-text-$color-breadcrumbs-icon',\n  a11y: 'sr-only',\n};\n\nexport const toggle = {\n  field: 'relative text-m',\n  wrapper: 'relative py-1',\n  deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n  input: 'peer',\n  deadToggleInput: 'hidden',\n  inputDisabled: 'pointer-events-none',\n  focusable: 'peer-focus:focusable',\n  focusableWithin: 'focus-within:focusable',\n  label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n  deadToggleLabel: '-mt-2',\n  noContent: `before:content-[\"\"]`,\n  indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n  labelDisabled: 'pointer-events-none',\n  checkbox: 'before:s-bg before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n  checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n  checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-hover',\n  checkboxDisabled: 'peer-disabled:before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n  labelCheckboxBorder: 'i-border-$color-checkbox-border',\n  radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n  radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n  radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover ',\n  radioDisabled: 'peer-disabled:before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled',\n  labelRadioBorder: 'i-border-$color-radio-border',\n  radioButtons: 'inline-flex relative font-bold rounded-8',\n  radioButtonsGroup: 'group',\n  radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n  radioButtonsJustified: 'flex!',\n  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n  radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n  icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n  a11y: 'sr-only',\n};\n\nexport const clickable = {\n  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n  buttonOrLink: 'bg-transparent focusable',\n  buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n  wrapper: 'relative',\n  combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n  textMatch: 'font-bold',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n  optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const attention = {\n  base: 'border-2 relative flex items-start',\n  tooltip:\n    'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n  callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n  highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n  popover:\n    'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n  arrowBase:\n    'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n  arrowDirectionLeft: '-left-[8px]',\n  arrowDirectionRight: '-right-[8px]',\n  arrowDirectionBottom: '-bottom-[8px]',\n  arrowDirectionTop: '-top-[8px]',\n  arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n  arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n  arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  content: 'last-child:mb-0',\n  notCallout: 'absolute z-50',\n  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,\n};\n\nexport const backwardsCompatibleClasses = {\n  modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0\n  chevronBox: 'right-16', //removed in v1.4.0\n  chevronNonBox: 'left-8', //removed in v1.4.0\n  checkboxInvalid: 'peer-checked:before:i-border-$color-checkbox-negative-border-selected peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover', //replaced in v1.5.0\n  radioInvalid: 'peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ', //replaced in v1.5.0\n  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-bg-$color-checkbox-background-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled', //replaced in v1.5.0\n  modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start\n  pillClose: 'pt-4 pb-6 text-m!' //replaced by py-8\n};\n\nexport const pagination = {\n  currentPage: 'block md:hidden p-8 font-bold',\n  icon: 'flex w-16 h-16 s-icon',\n  containerNav: 'flex items-center justify-center space-x-8 p-8',\n  heading: 'sr-only',\n  pages: 'hidden md:block s-text-link',\n  nextPage: 'flex items-center',\n  firstPageButton: 'md:hidden',\n  firstPageLabel: 'font-bold',\n  active: 's-bg-primary s-text-inverted',\n  defaultPage: 'hover:s-bg-primary-subtle-hover'\n};", "import { classMap } from 'lit/directives/class-map.js';\n\nconst camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// Source: https://medium.com/@dayton-bobbitt/generating-attributes-for-litelement-properties-f972ef658137\nexport function kebabCaseAttributes(constructor) {\n  return class extends constructor {\n    static createProperty(name, options) {\n      let customOptions = options;\n\n      // derive the attribute name if not already defined or disabled\n      if (typeof options?.attribute === 'undefined' || options?.attribute === true) {\n        customOptions = Object.assign({}, options, {\n          attribute: camelCaseToKebabCase(name.toString()),\n        });\n      }\n\n      super.createProperty(name, customOptions);\n    }\n  };\n}\n\nexport function classes(defn) {\n  const classes = [];\n  for (const [key, value] of Object.entries(defn)) {\n    if (value) classes.push(key);\n  }\n  return classes.join(' ');\n}\n\nexport function fclasses(definition) {\n  const defn = {};\n  for (const [key, value] of Object.entries(definition)) {\n    for (const className of key.split(' ')) {\n      defn[className] = value;\n    }\n  }\n  return classMap(defn);\n}\n\nexport function generateRandomId() {\n  return `m${Math.random().toString(36).slice(2)}`;\n}\n"],
-  "mappings": "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",
+  "sources": ["../../../packages/textfield/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.9.1/node_modules/@warp-ds/css/component-classes/index.js", "../../../packages/utils/index.js"],
+  "sourcesContent": ["import { css, html } from 'lit';\nimport WarpElement from '@warp-ds/elements-core';\nimport { input, label as l, helpText as h } from '@warp-ds/css/component-classes';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { fclasses } from '../utils';\n\nclass WarpTextField extends WarpElement {\n  static properties = {\n    disabled: { type: Boolean },\n    invalid: { type: Boolean },\n    id: { type: String },\n    label: { type: String },\n    helpText: { type: String, attribute: 'help-text' },\n    size: { type: String },\n    max: { type: Number },\n    min: { type: Number },\n    minLength: { type: Number, attribute: 'min-length' },\n    maxLength: { type: Number, attribute: 'max-length' },\n    name: { type: String },\n    pattern: { type: String },\n    placeholder: { type: String },\n    readOnly: { type: Boolean, attribute: 'read-only' },\n    required: { type: Boolean },\n    type: { type: String },\n    value: { type: String },\n    _hasPrefix: { state: true },\n    _hasSuffix: { state: true },\n  };\n\n  // Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.\n  // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,\n  // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.\n  // https://stackoverflow.com/a/61631668\n  static styles = [WarpElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n      ::slotted(:last-child) {\n        margin-bottom: 0px !important;\n      }\n      .warp-input-with-prefix {\n        padding-left:var(--w-prefix-width, 40px);\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this.type = 'text';\n  }\n\n  get _inputStyles() {\n    return fclasses({\n      [input.default]: true,\n      [input.invalid]: this.invalid,\n      [input.disabled]: this.disabled,\n      [input.readOnly]: this.readOnly,\n      [input.suffix]: this._hasSuffix,\n      // we style input with prefix here because we cannot use\n      // arbitrary values with commas in UnoCSS like pl-[var(--w-prefix-width, 40px)]\n      'warp-input-with-prefix': this._hasPrefix,\n    });\n  }\n\n  get _helpTextStyles() {\n    return fclasses({\n      [h.helpText]: true,\n      [h.helpTextColor]: !this.invalid,\n      [h.helpTextColorInvalid]: this.invalid,\n    });\n  }\n\n  get _label() {\n    if (this.label) {\n      return html`<label for=\"${this._id}\" class=${l.label}>${this.label}</label>`;\n    }\n  }\n\n  get _helpId() {\n    if (this.helpText) return `${this._id}__hint`;\n  }\n\n  get _id() {\n    return 'textfield';\n  }\n\n  get _error() {\n    if (this.invalid && this._helpId) return this._helpId;\n  }\n\n  handler(e) {\n    const { name, value } = e.target;\n    const event = new CustomEvent(e.type, {\n      detail: {\n        name,\n        value,\n        target: e.target,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  prefixSlotChange(e) {\n    const el = this.renderRoot.querySelector('slot[name=prefix]');\n    const affixes = el.assignedElements();\n    if (affixes.length) this._hasPrefix = true;\n  }\n\n  suffixSlotChange(e) {\n    const el = this.renderRoot.querySelector('slot[name=suffix]');\n    const affixes = el.assignedElements();\n    if (affixes.length) this._hasSuffix = true;\n  }\n\n  render() {\n    return html`\n      ${this._label}\n      <div class=\"${input.wrapper}\">\n        <slot @slotchange=\"${this.prefixSlotChange}\" name=\"prefix\"></slot>\n        <input\n          class=\"${this._inputStyles}\"\n          type=\"${this.type}\"\n          min=\"${ifDefined(this.min)}\"\n          max=\"${ifDefined(this.max)}\"\n          size=\"${ifDefined(this.size)}\"\n          minlength=\"${ifDefined(this.minLength)}\"\n          maxlength=\"${ifDefined(this.maxLength)}\"\n          name=\"${ifDefined(this.name)}\"\n          pattern=\"${ifDefined(this.pattern)}\"\n          placeholder=\"${ifDefined(this.placeholder)}\"\n          value=\"${ifDefined(this.value)}\"\n          aria-describedby=\"${ifDefined(this._helpId)}\"\n          aria-errormessage=\"${ifDefined(this._error)}\"\n          aria-invalid=\"${ifDefined(this.invalid)}\"\n          id=\"${this._id}\"\n          ?disabled=\"${this.disabled}\"\n          ?readonly=\"${this.readOnly}\"\n          ?required=\"${this.required}\"\n          @blur=\"${this.handler}\"\n          @change=\"${this.handler}\"\n          @focus=\"${this.handler}\"\n        />\n        <slot @slotchange=\"${this.suffixSlotChange}\" name=\"suffix\"></slot>\n      </div>\n      ${this.helpText &&\n      html`<div class=\"${this._helpTextStyles}\" id=\"${this._helpId}\">${this.helpText}</div>`}\n    `;\n  }\n}\n\nif (!customElements.get('w-textfield')) {\n  customElements.define('w-textfield', WarpTextField);\n}\n\nexport { WarpTextField };\n", "export const pageIndicator = {\n  wrapper: 'flex space-x-8 p-8',\n  dot: 'h-8 w-8 rounded-full',\n  inactive: 's-bg-disabled-subtle hover:bg-[--w-s-icon-subtle]',\n  active: 'bg-[--w-s-icon-selected]',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n  base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n  info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n  roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n  neutral: 'bg-[--w-color-badge-neutral-background] s-text',\n  info: 'bg-[--w-color-badge-info-background] s-text',\n  positive: 'bg-[--w-color-badge-positive-background] s-text',\n  warning: 'bg-[--w-color-badge-warning-background] s-text',\n  negative: 'bg-[--w-color-badge-negative-background] s-text',\n  disabled: 's-bg-disabled s-text',\n  price: 'bg-[--w-black/70] s-text-inverted-static',\n  sponsored: 'bg-[--w-color-badge-sponsored-background] s-text',\n  // Notification badge is deprecated: Do not use! TODO: Remove in v2\n  notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n  positionBase: 'absolute backdrop-blur',\n  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n  wrapper: 'touch-pan-y relative w-full h-44 py-2',\n  track: 'absolute s-bg-disabled-subtle h-4 top-20 rounded-4 w-full ',\n  trackDisabled: 'pointer-events-none',\n  activeTrack: 'absolute s-bg-primary h-6 top-[19px] rounded-4',\n  activeTrackDisabled: 'absolute s-bg-disabled h-6 top-[19px] rounded-4 pointer-events-none',\n  thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n  thumbEnabled: 'border-2 shadow-[--w-shadow-slider] cursor-pointer s-bg-primary s-border-primary hover:s-bg-primary-hover hover:s-border-primary-hover hover:shadow-[--w-shadow-slider-handle-hover] active:s-bg-primary-active active:s-border-primary-active active:shadow-[--w-shadow-slider-handle-active] focus:shadow-[--w-shadow-slider-handle-hover] focus:s-border-primary-hover focus:s-bg-primary-hover',\n  thumbDisabled: 's-bg-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n  box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n  info: 's-bg-info-subtle',\n  neutral: 'bg-[--w-s-color-surface-sunken]',\n  bordered: 'border-2 s-border s-bg',\n  infoClickable: 'hover:s-bg-info-subtle-hover active:s-bg-info-subtle-hover',\n  neutralClickable: 'hover:s-bg-subtle-hover active:s-bg-subtle-hover',\n  borderedClickable: 'hover:s-bg-hover active:s-bg-hover hover:s-border-hover active:s-border-hover',\n};\n\nexport const pill = {\n  pill: 'flex items-center',\n  button: 'inline-flex items-center focusable text-xs transition-all',\n  suggestion: 'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold',\n  filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted',\n  label: 'pl-12 py-8 rounded-l-full',\n  labelWithoutClose: 'pr-12 rounded-r-full',\n  labelWithClose: 'pr-2',\n  close: 'pr-12 pl-4 py-8 rounded-r-full',\n  a11y: 'sr-only',\n};\n\nexport const step = {\n  step: 'group/step',\n  stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n  stepVerticalLeft: 'grid-cols-[20px_1fr]',\n  stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n  stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n  stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',\n  stepDotVerticalRight: 'col-start-2',\n  stepDotHorizontal: 'row-start-2 justify-self-end',\n  stepDotActive: 's-border-primary s-bg-primary',\n  stepDotIncomplete: 's-border s-bg',\n\n  stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n  stepLineVertical: 'w-2 h-full justify-self-center',\n  stepLineVerticalRight: 'col-start-2',\n  stepLineHorizontal: 'h-2 w-full row-start-2',\n  stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n  stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n  stepLineIncomplete: 's-bg-disabled',\n  stepLineComplete: 's-bg-primary',\n\n  content: 'last:mb-0 group-last/step:last:pb-0',\n  contentVertical: 'row-span-2 pb-32',\n  contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n  steps: 'w-full',\n  stepsHorizontal: 'flex',\n};\n\nexport const card = {\n  card: 'cursor-pointer overflow-hidden relative transition-all',\n  cardShadow: 'rounded-8 shadow-s hover:shadow-m hover:s-bg-subtle-hover tap-highlight-transparent',\n  cardFlat: 'border-2 rounded-4',\n  cardFlatUnselected: 's-bg s-border hover:s-bg-hover hover:s-border-hover active:s-bg-active active:s-border-active',\n  cardFlatSelected: 's-border-selected s-bg-selected hover:s-bg-selected-hover hover:s-border-selected-hover active:s-border-selected-active active:s-bg-selected-active',\n  cardUnselected: 's-bg',\n  cardSelected: 's-border-selected s-bg-selected hover:s-border-selected-hover hover:s-bg-selected-hover active:s-border-selected-active active:s-bg-selected-active',\n  cardOutline: 'active:s-border absolute rounded-8 inset-0 transition-all border-2',\n  cardOutlineUnselected: 'border-transparent',\n  cardOutlineSelected: 's-border-selected hover:s-border-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n  switch: 'tap-highlight-transparent',\n  label: 'block relative h-24 w-44 cursor-pointer group',\n  labelDisabled: 'pointer-events-none',\n  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n  trackActive: 's-bg-primary group-hover:s-bg-primary-hover',\n  trackInactive: 'bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]',\n  trackDisabled: 's-bg-disabled-subtle',\n  handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n  handleSelected: 'translate-x-20',\n  handleNotDisabled: 's-bg shadow-s',\n  handleDisabled: 's-bg-disabled',\n  a11y: 'sr-only',\n};\n\nexport const toaster = {\n  container: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n  content: 'w-full',\n  toaster: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n  wrapper: 'relative overflow-hidden w-full',\n  toast: 'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n  positive: 's-bg-positive-subtle s-border-positive-subtle s-text',\n  warning: 's-bg-warning-subtle s-border-warning-subtle s-text',\n  negative: 's-bg-negative-subtle s-border-negative-subtle s-text',\n  icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n  iconPositive: 's-icon-positive',\n  iconWarning: 's-icon-warning',\n  iconNegative: 's-icon-negative',\n  iconLoading: 'animate-bounce',\n  content: 'self-center mr-8 py-4 last-child:mb-0',\n  close: 'bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active',\n};\n\nexport const tabs = {\n  tabContainer: 'inline-grid relative',\n  wunderbar: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',\n  wrapperUnderlined: 'border-b border-transparent -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent s-text-subtle border-transparent hover:s-text-link hover:s-border-primary',\n  tabActive: 's-text-link',\n  icon: 'mx-auto hover:s-text-link',\n  iconUnderlinedActive: 's-text-link',\n  content: 'flex items-center justify-center gap-8',\n  contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n  contentUnderlinedActive: 's-text-link',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n  cols1: 'grid-cols-1',\n  cols2: 'grid-cols-2',\n  cols3: 'grid-cols-3',\n  cols4: 'grid-cols-4',\n  cols5: 'grid-cols-5',\n  cols6: 'grid-cols-6',\n  cols7: 'grid-cols-7',\n  cols8: 'grid-cols-8',\n  cols9: 'grid-cols-9',\n};\n\nexport const buttonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n  expandable: 'will-change-height',\n  expandableTitle: 'font-bold s-text',\n  expandableBox: 's-bg-subtle hover:s-bg-subtle-hover py-0 px-0 ' + box.box,\n  expandableInfo: 's-bg-info-subtle! hover:s-bg-info-subtle-hover!',\n  expandableBleed: box.bleed,\n  chevron: 'inline-block align-middle s-icon',\n  chevronNonBox: 'ml-8',\n  chevronBox: '',\n  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n  chevronExpand: '-rotate-180',\n  chevronCollapse: 'rotate-180',\n  elementsTransformChevronDownPart: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n  elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n  elementsTransformChevronUpPart: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n  elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n  expansion: 'overflow-hidden',\n  expansionNotExpanded: 'h-0 invisible',\n  button: buttonReset + ' hover:underline focus-visible:underline',\n  buttonBox: 'w-full text-left relative inline-flex items-center justify-between ' + box.box,\n  paddingTop: 'pt-0',\n  title: 'flex w-full justify-between items-center',\n  titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n  primary: 's-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]',\n  secondary: 's-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active',\n  utility: 's-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n  destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',\n  pill: 's-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  disabled: 's-text-inverted s-bg-disabled',\n  quiet: 'bg-transparent s-text-link hover:s-bg-hover active:s-bg-active',\n  utilityQuiet: 's-text bg-transparent hover:s-bg-hover active:s-bg-active',\n  negativeQuiet: 'bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active',\n  loading: 's-text s-bg-subtle',\n  link: 's-text-link',\n};\n\nconst buttonTypes = {\n  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n  utility: `border rounded-4 ${buttonDefaultStyling}`,\n  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n  xsmall: 'py-6 px-16',\n  small: 'py-8 px-16',\n  medium: 'py-10 px-14',\n  large: 'py-12 px-16',\n  utility: 'py-[11px] px-[15px]',\n  smallUtility: 'py-[7px] px-[15px]',\n  pill: 'min-h-[44px] min-w-[44px]',\n  pillSmall: 'min-h-32 min-w-32',\n  link: 'p-0',\n};\n\nconst buttonTextSizes = {\n  medium: 'text-m leading-[24]',\n  xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n  inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n  quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n  // Buttontypes\n  secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n  secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n  secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n  linkAsButton: 'inline-block hover:no-underline text-center',\n  a11y: 'sr-only',\n  fullWidth: 'w-full max-w-full',\n  contentWidth: 'max-w-max',\n};\n\nexport const buttonGroup = {\n  wrapper: 'inline-flex rounded-4 overflow-hidden',\n  raised: 'shadow-s',\n  vertical: 'flex-col',\n  nonOutlinedVertical: 'divide-y',\n  nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n  wrapper: 'relative s-text s-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',\n  outlined: 'border hover:z-30 border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',\n  outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n  outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n  outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n  outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n  outlinedSelected: 'border-[--w-color-buttongroup-utility-border-selected]',\n  selected: 'z-30 s-text! bg-[--w-color-buttongroup-utility-background-selected]!',\n};\n\nexport const modal = {\n  transparentBg: '', //TODO: Remove in v2 - previously used for opacity before changing to a rgba background in backdrop\n  backdrop: 'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]',\n  modal: 'pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n  content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n  transitionTitle: 'transition-all duration-300',\n  transitionTitleCenter: 'justify-self-center self-center',\n  transitionTitleColSpan: 'col-span-2',\n  title: 'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n  titleText: 'mb-0 h4 sm:h3',\n  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,\n  titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n  titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n  titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n  titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n  alert: 'flex p-16 border border-l-4 rounded-4 s-text',\n  willChangeHeight: 'will-change-height',\n  textWrapper: 'last-child:mb-0 text-s',\n  title: 'text-s',\n  icon: 'w-16 mr-8 min-w-16',\n  negative: 's-border-negative-subtle s-border-l-negative s-bg-negative-subtle',\n  negativeIcon: 's-icon-negative',\n  positive: 's-border-positive-subtle s-border-l-positive s-bg-positive-subtle',\n  positiveIcon: 's-icon-positive',\n  warning: 's-border-warning-subtle s-border-l-warning s-bg-warning-subtle',\n  warningIcon: 's-icon-warning',\n  info: 's-border-info-subtle s-border-l-info s-bg-info-subtle',\n  infoIcon: 's-icon-info',\n};\n\nexport const input = {\n  default: 'block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-selected rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n  textArea: 'min-h-[42] sm:min-h-[45]',\n  disabled: 's-bg-disabled-subtle s-border-disabled hover:s-border-disabled! s-text-disabled pointer-events-none',\n  invalid: 's-border-negative s-text-negative! hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!',\n  readOnly: 'pl-0 bg-transparent! border-0! pointer-events-none',\n  placeholder: 'placeholder:s-text-placeholder',\n  wrapper: 'relative',\n  suffix: 'pr-40',\n  prefix: 'pl-40',\n};\n\nexport const select = {\n  default: 'block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n  disabled: 's-bg-disabled-subtle s-border-disabled hover:s-border-disabled! active:s-border-disabled! s-text-disabled pointer-events-none',\n  invalid: 's-border-negative hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n  wrapper: 'relative',\n  selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',\n  chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n  label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',\n  optional: 'pl-8 font-normal text-s s-text-subtle',\n  labelInvalid: 's-text-negative', // TODO: Remove in v2 - kept for backwards compatibility\n};\n\nexport const helpText = {\n  helpText: 'text-xs mt-4 block',\n  helpTextColor: 's-text-subtle',\n  helpTextColorInvalid: 's-text-negative',\n  // TODO: Remove below properties in v2 - kept for backwards compatibility\n  helpTextValid: 's-text-positive',\n  helpTextInvalid: 's-text-negative',\n};\n\nconst prefixSuffixWrapperBase = 'absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n  wrapper: prefixSuffixWrapperBase + 'right-0',\n  wrapperWithLabel: 'w-max pr-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',\n};\n\nexport const prefix = {\n  wrapper: prefixSuffixWrapperBase + 'left-0',\n  wrapperWithLabel: 'w-max pl-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',\n};\n\nexport const breadcrumbs = {\n  wrapper: 'flex space-x-8',\n  text: 's-text',\n  link: 's-text-link',\n  separator: 'select-none s-icon',\n  a11y: 'sr-only',\n};\n\nexport const toggle = {\n  // wrapper classes\n  field: 'relative text-m', // true\n  wrapper: 'relative py-1', // true\n  wrapperRadioButtons: 'inline-flex font-bold rounded-8 focus-within:focusable', // isRadioButton && !isEqualWidth\n  wrapperRadioButtonsJustified: 'flex font-bold rounded-8 focus-within:focusable', // isRadioButton && isEqualWidth,\n\n  // group classes\n  radioButtonsGroup: 'group', // isRadioButton\n  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto', // isRadioButton && isEqualWidth\n\n  // input classes\n  input: 'peer',\n  a11y: 'sr-only',\n\n  // label classes\n  label: 'peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2', // !isRadioButton\n  labelBefore: 'before:content-[\"\"] before:block', // !isRadioButton && !isIndeterminate\n  checkbox: 'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover', // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled\n  checkboxInvalid: 'before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover', // isCheckbox && !isIndeterminate && isInvalid && !isDisabled\n  checkboxDisabled: 'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled', // isCheckbox && !isIndeterminate && !isInvalid && isDisabled\n  indeterminate: 'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover', // isCheckbox && isIndeterminate && !isInvalid && !isDisabled\n  indeterminateInvalid: 'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover', // isCheckbox && isIndeterminate && isInvalid && !isDisabled\n  indeterminateDisabled: 'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled', // isCheckbox && isIndeterminate && !isInvalid && isDisabled\n  radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover', // isRadio && !isDisabled && !isInvalid\n  radioInvalid: 'before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover', // isRadio && isInvalid && !isDisabled\n  radioDisabled: 'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]', // isRadio && !isInvalid && isDisabled\n  radioButtonsLabel: 'peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2', // isRadioButtons\n  radioButtonsRegular: 'text-s py-8 pl-12 pr-14', // isRadioButtons && !isSmall\n  radioButtonsSmall: 'text-xs py-[5px] px-[8px]', // isRadioButtons && isSmall\n};\n\nexport const deadToggle = {\n  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,\n  input: `${toggle.input} hidden`,\n  inputVue: 'hidden',\n  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,\n  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,\n  labelVue: '-mt-2',\n};\n\nexport const clickable = {\n  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n  buttonOrLink: 'bg-transparent focusable',\n  buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n  wrapper: 'relative',\n  combobox: 'absolute left-0 right-0 pb-8 rounded-8 s-bg shadow-m',\n  textMatch: 'font-bold',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8 hover:s-bg-hover',\n  optionSelected: 's-bg-selected hover:s-bg-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const attention = {\n  base: 'border-2 relative flex items-start',\n  tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8',\n  callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',\n  highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0',\n  popover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0',\n  arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n  arrowDirectionLeftStart: '-left-[8px]',\n  arrowDirectionLeft: '-left-[8px]',\n  arrowDirectionLeftEnd: '-left-[8px]',\n  arrowDirectionRightStart: '-right-[8px]',\n  arrowDirectionRight: '-right-[8px]',\n  arrowDirectionRightEnd: '-right-[8px]',\n  arrowDirectionBottomStart: '-bottom-[8px]',\n  arrowDirectionBottom: '-bottom-[8px]',\n  arrowDirectionBottomEnd: '-bottom-[8px]',\n  arrowDirectionTopStart: '-top-[8px]',\n  arrowDirectionTop: '-top-[8px]',\n  arrowDirectionTopEnd: '-top-[8px]',\n  arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]',\n  arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n  arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]',\n  arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n  content: 'last-child:mb-0',\n  notCallout: 'absolute z-50',\n  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,\n};\n\nexport const backwardsCompatibleClasses = {\n  modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0\n  chevronBox: 'right-16', //removed in v1.4.0\n  chevronNonBox: 'left-8', //removed in v1.4.0\n  checkboxInvalid: 'peer-checked:before:i-border-$color-checkbox-negative-border-selected peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover', //replaced in v1.5.0\n  radioInvalid: 'peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ', //replaced in v1.5.0\n  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-bg-$color-checkbox-background-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled', //replaced in v1.5.0\n  modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start\n  pillClose: 'pt-4 pb-6 text-m!', //replaced by py-8\n  toggle: 'peer-disabled:before:s-bg-disabled-subtle before:bg-[url(var(--w-form-check-mark))] peer-hover:before:s-bg-primary-subtle',\n  radioButton: 'flex! py-[5px]! px-[8px]!',\n  toggleIndeterminate: 'before:content-[\"-\"] before:flex! before:items-center before:justify-center peer-indeterminate:hover:before:s-border-primary',\n  removedAlertTokens: 'i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border i-text-$color-alert-negative-icon i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border i-text-$color-alert-positive-icon i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border i-text-$color-alert-warning-icon i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border i-text-$color-alert-info-icon',\n  removedBadgeTokens: 'i-bg-$color-badge-price-background i-bg-$color-badge-negative-background i-bg-$color-badge-warning-background i-bg-$color-badge-positive-background i-bg-$color-badge-info-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text i-text-$color-badge-negative-text i-text-$color-badge-warning-text i-text-$color-badge-positive-text i-text-$color-badge-info-text i-text-$color-badge-disabled-text i-bg-$color-badge-disabled-background i-text-$color-badge-price-text',\n  removedBoxTokens: 'i-bg-$color-box-info-background i-text-$color-box-info-text i-bg-$color-box-neutral-background i-text-$color-box-neutral-text i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n  removedBreadcrumbsTokens: 'i-text-$color-breadcrumbs-text i-text-$color-breadcrumbs-link-text i-text-$color-breadcrumbs-icon',\n  removedButtonTokens:\n    'hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active i-text-$color-button-disabled-text i-bg-$color-button-disabled-background i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active i-text-$color-button-loading-text i-bg-$color-button-loading-background i-text-$color-button-link-text',\n  removedButtonGroupTokens:\n    'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected i-text-$color-buttongroup-primary-text i-bg-$color-buttongroup-primary-background i-border-$color-buttongroup-primary-border i-bg-$color-buttongroup-utility-background-selected! i-border-$color-buttongroup-utility-border-selected i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected active:i-bg-$color-buttongroup-utility-background-selected hover:i-bg-$color-buttongroup-utility-background-hover i-text-$color-buttongroup-utility-text-selected! i-shadow-$shadow-buttongroup i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n  removedCalloutTokens: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text',\n  removedCardTokens:\n    'i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active active:i-border-$color-card-flat-border i-border-$color-card-border i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n  removedCheckboxTokens:\n    'hover:before:s-bg-subtle i-border-$color-checkbox-border peer-indeterminate:before:i-border-$color-checkbox-border-selected before:i-text-$color-checkbox-icon peer-checked:before:i-border-$color-checkbox-negative-border hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:peer-hover:before:i-border-$ before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover before:i-border-$color-checkbox-border-disabled hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:before:i-bg-$color-checkbox-background-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover peer-checked:before:i-bg-$color-checkbox-background-selected-disabled hover:before:i-bg-$color-checkbox-background-hover peer-disabled:before:i-bg-$color-checkbox-background-disabled',\n  removedComboboxTokens: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover hover:i-bg-$color-combobox-option-background-hover i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n  removedExpandableTokens: 'i-text-$color-expandable-icon i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover i-text-$color-expandable-title-text',\n  removedHelpTextTokens: 'i-text-$color-helptext-text i-text-$color-helptext-text-positive i-text-$color-helptext-text-negative',\n  removedInputTokens: 'placeholder:i-text-$color-input-text-placeholder i-text-$color-input-text-read-only i-text-$color-input-text-negative! i-border-$color-input-border-negative i-text-$color-input-text-disabled hover:i-border-$color-input-border-disabled! i-border-$color-input-border-disabled i-bg-$color-input-background-disabled active:i-border-$color-input-border-active hover:i-border-$color-input-border-hover i-border-$color-input-border i-bg-$color-input-background i-text-$color-input-text-filled',\n  removedLabelTokens: 'i-text-$color-label-text-negative i-text-$color-label-optional-text i-text-$color-label-text',\n  removedModalTokens: 'i-bg-$color-modal-background i-shadow-$shadow-modal before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25',\n  removedPageIndicatorTokens: 'bg-[--w-s-icon-disabled] i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover i-bg-$color-pageindicator-background-selected',\n  removedPillTokens: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active s-text font-bold i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text i-text-$color-pill-suggestion-text',\n  removedPopoverTokens: 'border-[--w-s-color-background] i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text',\n  removedRadioTokens: 'before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover i-border-$color-radio-border peer-hover:before:i-border-$color-radio-border-hover before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-selected peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-disabled:before:i-bg-$color-radio-background-disabled  peer-hover:before:i-bg-$color-radio-background-hover',\n  removedSelectTokens: 'i-border-$color-select-border-negative i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active i-text-$color-select-icon i-bg-$color-select-background-disabled i-bg-$color-select-background i-text-$color-select-text-disabled i-text-$color-select-text',\n  removedSliderTokens: 'i-bg-$color-slider-track-background-active i-bg-$color-slider-track-background-disabled i-bg-$color-slider-track-background focus:i-border-$color-slider-handle-border-hover active:i-border-$color-slider-handle-border-active hover:i-border-$color-slider-handle-border-hover i-border-$color-slider-handle-border i-bg-$color-slider-handle-background-disabled focus:i-bg-$color-slider-handle-background-hover active:i-bg-$color-slider-handle-background-active hover:i-bg-$color-slider-handle-background-hover i-bg-$color-slider-handle-background i-shadow-$shadow-slider active:slider-handle-shadow-active focus:slider-handle-shadow-hover hover:slider-handle-shadow-hover',\n  removedStepindicatorTokens: 'i-bg-$color-stepindicator-track-background-active i-bg-$color-stepindicator-track-background i-text-$color-stepindicator-handle-icon i-border-$color-stepindicator-handle-border i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background i-bg-$color-stepindicator-handle-background-active',\n  removedSwitchTokens: 'i-bg-$color-switch-handle-background-disabled i-bg-$color-switch-handle-background i-bg-$color-switch-track-background-disabled i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover group-hover:i-bg-$color-switch-track-background-hover i-bg-$color-switch-track-background i-shadow-$shadow-switch-handle',\n  removedTabsTokens: 'i-text-$color-tabs-text-selected hover:i-text-$color-tabs-text-hover i-text-$color-tabs-text hover:i-border-$color-tabs-border-hover i-border-$color-tabs-border-selected i-border-$color-tabs-border',\n  removedToastTokens: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text i-text-$color-toast-negative-icon i-text-$color-toast-warning-icon i-text-$color-toast-positive-icon i-border-$color-toast-positive-subtle-border i-bg-$color-toast-positive-background i-text-$color-toast-positive-text i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n  removedTooltipTokens: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background shadow-m i-text-$color-tooltip-text i-shadow-$shadow-tooltip',\n  removedAlphaTokens: 'bg-[--w-color-badge-price-background] bg-[--w-black-alpha25]',\n};\n\nexport const pagination = {\n  link: 'hover:no-underline focus:no-underline focusable inline-flex justify-center items-center transition-colors ease-in-out min-h-[44px] min-w-[44px] p-4 rounded-full border-0 hover:bg-clip-padding',\n  currentPage: 'block md:hidden p-8 font-bold',\n  icon: 's-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  containerNav: 'flex items-center justify-center p-8',\n  a11y: 'sr-only',\n  pages: 'hidden md:block s-text-link',\n  active: 's-bg-primary s-text-inverted',\n  notActive: 'hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n};\n", "import { classMap } from 'lit/directives/class-map.js';\n\nconst camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// Source: https://medium.com/@dayton-bobbitt/generating-attributes-for-litelement-properties-f972ef658137\nexport function kebabCaseAttributes(constructor) {\n  return class extends constructor {\n    static createProperty(name, options) {\n      let customOptions = options;\n\n      // derive the attribute name if not already defined or disabled\n      if (typeof options?.attribute === 'undefined' || options?.attribute === true) {\n        customOptions = Object.assign({}, options, {\n          attribute: camelCaseToKebabCase(name.toString()),\n        });\n      }\n\n      super.createProperty(name, customOptions);\n    }\n  };\n}\n\nexport function classes(defn) {\n  const classes = [];\n  for (const [key, value] of Object.entries(defn)) {\n    if (value) classes.push(key);\n  }\n  return classes.join(' ');\n}\n\nexport function fclasses(definition) {\n  const defn = {};\n  for (const [key, value] of Object.entries(definition)) {\n    for (const className of key.split(' ')) {\n      defn[className] = value;\n    }\n  }\n  return classMap(defn);\n}\n\nexport function generateRandomId() {\n  return `m${Math.random().toString(36).slice(2)}`;\n}\n"],
+  "mappings": "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",
   "names": []
 }