@warp-ds/elements 1.3.3-next.1 → 1.3.4-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/index.js +25 -21
  2. package/dist/index.js.map +3 -3
  3. package/dist/packages/affix/index.js +11 -8
  4. package/dist/packages/affix/index.js.map +3 -3
  5. package/dist/packages/alert/index.js +11 -8
  6. package/dist/packages/alert/index.js.map +3 -3
  7. package/dist/packages/attention/index.js +11 -8
  8. package/dist/packages/attention/index.js.map +3 -3
  9. package/dist/packages/badge/index.js +11 -8
  10. package/dist/packages/badge/index.js.map +3 -3
  11. package/dist/packages/box/index.js +11 -8
  12. package/dist/packages/box/index.js.map +3 -3
  13. package/dist/packages/breadcrumbs/index.js +11 -8
  14. package/dist/packages/breadcrumbs/index.js.map +3 -3
  15. package/dist/packages/button/index.js +11 -8
  16. package/dist/packages/button/index.js.map +3 -3
  17. package/dist/packages/card/index.d.ts +2 -2
  18. package/dist/packages/card/index.js +25 -21
  19. package/dist/packages/card/index.js.map +3 -3
  20. package/dist/packages/expandable/index.js +11 -8
  21. package/dist/packages/expandable/index.js.map +3 -3
  22. package/dist/packages/pill/index.js +11 -8
  23. package/dist/packages/pill/index.js.map +3 -3
  24. package/dist/packages/select/index.js +11 -8
  25. package/dist/packages/select/index.js.map +3 -3
  26. package/dist/packages/textfield/index.js +11 -8
  27. package/dist/packages/textfield/index.js.map +3 -3
  28. package/dist/packages/toast/index.js +11 -8
  29. package/dist/packages/toast/index.js.map +3 -3
  30. package/package.json +5 -9
package/dist/packages/badge/index.js CHANGED
@@ -20,7 +20,7 @@ function classes(defn) {
20
20
  return classes2.join(" ");
21
21
  }
22
22
 
23
- // node_modules/.pnpm/@warp-ds+css@1.9.1/node_modules/@warp-ds/css/component-classes/index.js
23
+ // node_modules/.pnpm/@warp-ds+css@1.9.3/node_modules/@warp-ds/css/component-classes/index.js
24
24
  var badge = {
25
25
  base: "py-4 px-8 border-0 rounded-4 text-xs inline-flex",
26
26
  neutral: "bg-[--w-color-badge-neutral-background] s-text",
@@ -45,17 +45,20 @@ var box = {
45
45
  bleed: "-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",
46
46
  // We target L and R to override the default rounded-8
47
47
  info: "s-bg-info-subtle",
48
- neutral: "bg-[--w-s-color-surface-sunken]",
48
+ neutral: "s-surface-sunken",
49
49
  bordered: "border-2 s-border s-bg",
50
- infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-hover",
51
- neutralClickable: "hover:s-bg-subtle-hover active:s-bg-subtle-hover",
52
- borderedClickable: "hover:s-bg-hover active:s-bg-hover hover:s-border-hover active:s-border-hover"
50
+ infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-active",
51
+ // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
52
+ neutralClickable: "hover:s-bg-hover active:s-bg-active",
53
+ // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
54
+ borderedClickable: "hover:s-bg-hover active:s-bg-active hover:s-border-hover active:s-border-active"
55
+ // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
53
56
  };
54
57
  var buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
55
58
  var expandable = {
56
59
  expandable: "will-change-height",
57
60
  expandableTitle: "font-bold s-text",
58
- expandableBox: "s-bg-subtle hover:s-bg-subtle-hover py-0 px-0 " + box.box,
61
+ expandableBox: "s-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 " + box.box,
59
62
  expandableInfo: "s-bg-info-subtle! hover:s-bg-info-subtle-hover!",
60
63
  expandableBleed: box.bleed,
61
64
  chevron: "inline-block align-middle s-icon",
@@ -96,7 +99,7 @@ var buttonTypes = {
96
99
  utility: `border rounded-4 ${buttonDefaultStyling}`,
97
100
  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
98
101
  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
99
- link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`
102
+ link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`
100
103
  };
101
104
  var buttonSizes = {
102
105
  xsmall: "py-6 px-16",
@@ -186,7 +189,7 @@ var button = {
186
189
  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
187
190
  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
188
191
  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
189
- linkAsButton: "inline-block hover:no-underline text-center",
192
+ linkAsButton: "inline-block active:no-underline hover:no-underline focus:no-underline text-center",
190
193
  a11y: "sr-only",
191
194
  fullWidth: "w-full max-w-full",
192
195
  contentWidth: "max-w-max"
package/dist/packages/badge/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../packages/badge/index.js", "../../../packages/utils/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.9.1/node_modules/@warp-ds/css/component-classes/index.js"],
4
- "sourcesContent": ["import { html } from 'lit';\nimport WarpElement from '@warp-ds/elements-core';\nimport { classes } from '../utils';\nimport { badge as ccBadge } from '@warp-ds/css/component-classes';\n\nclass WarpBadge extends WarpElement {\n static properties = {\n variant: {\n type: 'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'notification' | 'price',\n },\n position: {\n type: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left',\n },\n };\n\n static styles = [WarpElement.styles];\n\n constructor() {\n super();\n\n this.variant = 'neutral';\n }\n\n get _class() {\n return classes({\n [ccBadge.base]: true,\n [ccBadge[this.variant]]: true,\n [ccBadge.positionBase]: !!this.position,\n [ccBadge.positionTL]: this.position === 'top-left',\n [ccBadge.positionTR]: this.position === 'top-right',\n [ccBadge.positionBR]: this.position === 'bottom-right',\n [ccBadge.positionBL]: this.position === 'bottom-left',\n });\n }\n\n render() {\n return html`\n <div class=\"${this._class}\">\n <slot></slot>\n </div>\n `;\n }\n}\n\nif (!customElements.get('w-badge')) {\n customElements.define('w-badge', WarpBadge);\n}\n\nexport { WarpBadge };\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", "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"],
5
- "mappings": "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",
3
+ "sources": ["../../../packages/badge/index.js", "../../../packages/utils/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.9.3/node_modules/@warp-ds/css/component-classes/index.js"],
4
+ "sourcesContent": ["import { html } from 'lit';\nimport WarpElement from '@warp-ds/elements-core';\nimport { classes } from '../utils';\nimport { badge as ccBadge } from '@warp-ds/css/component-classes';\n\nclass WarpBadge extends WarpElement {\n static properties = {\n variant: {\n type: 'neutral' | 'info' | 'positive' | 'warning' | 'negative' | 'disabled' | 'notification' | 'price',\n },\n position: {\n type: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left',\n },\n };\n\n static styles = [WarpElement.styles];\n\n constructor() {\n super();\n\n this.variant = 'neutral';\n }\n\n get _class() {\n return classes({\n [ccBadge.base]: true,\n [ccBadge[this.variant]]: true,\n [ccBadge.positionBase]: !!this.position,\n [ccBadge.positionTL]: this.position === 'top-left',\n [ccBadge.positionTR]: this.position === 'top-right',\n [ccBadge.positionBR]: this.position === 'bottom-right',\n [ccBadge.positionBL]: this.position === 'bottom-left',\n });\n }\n\n render() {\n return html`\n <div class=\"${this._class}\">\n <slot></slot>\n </div>\n `;\n }\n}\n\nif (!customElements.get('w-badge')) {\n customElements.define('w-badge', WarpBadge);\n}\n\nexport { WarpBadge };\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", "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: 's-surface-sunken',\n bordered: 'border-2 s-border s-bg',\n infoClickable: 'hover:s-bg-info-subtle-hover active:s-bg-info-subtle-active', // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)\n neutralClickable: 'hover:s-bg-hover active:s-bg-active', // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)\n borderedClickable: 'hover:s-bg-hover active:s-bg-active hover:s-border-hover active:s-border-active', // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)\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: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',\n cardUnselected: '', // TODO: Remove in v2 - Not used after introducing surface\n cardSelected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',\n cardOutline: 'absolute border-2 rounded-8 inset-0 transition-all',\n cardOutlineUnselected: 'border-transparent group-active:s-border-active',\n cardOutlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',\n cardFlat: 'border-2 rounded-4',\n cardFlatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n cardFlatSelected: 's-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active',\n a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n switch: '', // TODO: Remove this in v2\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-surface-sunken hover:s-bg-hover active:s-bg-active 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 focus: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 active:no-underline hover:no-underline focus: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 surfaceUpdates: 'hover:s-bg-subtle-hover hover:shadow-m bg-[--w-s-color-surface-sunken] active:s-bg-hover active:s-bg-subtle-hover active:s-border-hover active:s-bg-info-subtle-hover',\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"],
5
+ "mappings": "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",
6
6
  "names": ["classes"]
7
7
  }
package/dist/packages/box/index.js CHANGED
@@ -21,24 +21,27 @@ function fclasses(definition) {
21
21
  return classMap(defn);
22
22
  }
23
23
 
24
- // node_modules/.pnpm/@warp-ds+css@1.9.1/node_modules/@warp-ds/css/component-classes/index.js
24
+ // node_modules/.pnpm/@warp-ds+css@1.9.3/node_modules/@warp-ds/css/component-classes/index.js
25
25
  var box = {
26
26
  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
27
27
  // Relative here enables w-clickable
28
28
  bleed: "-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",
29
29
  // We target L and R to override the default rounded-8
30
30
  info: "s-bg-info-subtle",
31
- neutral: "bg-[--w-s-color-surface-sunken]",
31
+ neutral: "s-surface-sunken",
32
32
  bordered: "border-2 s-border s-bg",
33
- infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-hover",
34
- neutralClickable: "hover:s-bg-subtle-hover active:s-bg-subtle-hover",
35
- borderedClickable: "hover:s-bg-hover active:s-bg-hover hover:s-border-hover active:s-border-hover"
33
+ infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-active",
34
+ // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
35
+ neutralClickable: "hover:s-bg-hover active:s-bg-active",
36
+ // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
37
+ borderedClickable: "hover:s-bg-hover active:s-bg-active hover:s-border-hover active:s-border-active"
38
+ // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
36
39
  };
37
40
  var buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
38
41
  var expandable = {
39
42
  expandable: "will-change-height",
40
43
  expandableTitle: "font-bold s-text",
41
- expandableBox: "s-bg-subtle hover:s-bg-subtle-hover py-0 px-0 " + box.box,
44
+ expandableBox: "s-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 " + box.box,
42
45
  expandableInfo: "s-bg-info-subtle! hover:s-bg-info-subtle-hover!",
43
46
  expandableBleed: box.bleed,
44
47
  chevron: "inline-block align-middle s-icon",
@@ -79,7 +82,7 @@ var buttonTypes = {
79
82
  utility: `border rounded-4 ${buttonDefaultStyling}`,
80
83
  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
81
84
  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
82
- link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`
85
+ link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`
83
86
  };
84
87
  var buttonSizes = {
85
88
  xsmall: "py-6 px-16",
@@ -169,7 +172,7 @@ var button = {
169
172
  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
170
173
  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
171
174
  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
172
- linkAsButton: "inline-block hover:no-underline text-center",
175
+ linkAsButton: "inline-block active:no-underline hover:no-underline focus:no-underline text-center",
173
176
  a11y: "sr-only",
174
177
  fullWidth: "w-full max-w-full",
175
178
  contentWidth: "max-w-max"