@warp-ds/elements 1.2.3-next.2 → 1.3.0-next.1

package/dist/packages/badge/index.js

@@ -20,7 +20,7 @@ function classes(defn) {
   return classes2.join(" ");
 }
 
-// node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js
 var badge = {
   base: "py-4 px-8 border-0 rounded-4 text-xs inline-flex",
   neutral: "i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text",
@@ -196,9 +196,9 @@ var modal = {
   content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
   footer: "flex justify-end shrink-0 px-16 sm:px-32",
   transitionTitle: "transition-all duration-300",
-  transitionTitleCenter: "justify-self-center",
+  transitionTitleCenter: "justify-self-center self-center",
   transitionTitleColSpan: "col-span-2",
-  title: "-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
+  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",
   titleText: "mb-0 h4 sm:h3",
   titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
   titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/badge/index.js", "../../../packages/utils/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js"],
-  "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:\n        \"neutral\" |\n        \"info\" |\n        \"positive\" |\n        \"warning\" |\n        \"negative\" |\n        \"disabled\" |\n        \"notification\" |\n        \"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: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n  active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n  base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n  info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n  roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n  neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n  positionBase: 'absolute backdrop-blur',\n  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n  wrapper: 'touch-pan-y relative w-full h-44 py-2',\n  track:\n    'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n  trackDisabled:\n    'pointer-events-none i-bg-$color-slider-track-background-disabled',\n  activeTrack:\n    'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n  activeTrackDisabled:\n    'i-bg-$color-slider-track-background-disabled pointer-events-none',\n  thumb:\n    'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n  thumbEnabled:\n    'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n  thumbDisabled:\n    'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n  box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n  info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n  neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n  bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n  infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n  neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n  borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n  pill: 'flex items-center',\n  button: 'inline-flex items-center focusable text-xs transition-all',\n  suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n  filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n  label: 'pl-12 py-8 rounded-l-full',\n  labelWithoutClose: 'pr-12 rounded-r-full',\n  labelWithClose: 'pr-2',\n  close: 'pr-12 pl-4 pt-4 pb-6 rounded-r-full text-m!',\n  a11y: 'sr-only',\n};\n\nexport const step = {\n  step: 'group/step',\n  stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n  stepVerticalLeft: 'grid-cols-[20px_1fr]',\n  stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n  stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n  stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n  stepDotVerticalRight: 'col-start-2',\n  stepDotHorizontal: 'row-start-2 justify-self-end',\n  stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n  stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n  stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n  stepLineVertical: 'w-2 h-full justify-self-center',\n  stepLineVerticalRight: 'col-start-2',\n  stepLineHorizontal: 'h-2 w-full row-start-2',\n  stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n  stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n  stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n  stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n  content: 'last:mb-0 group-last/step:last:pb-0',\n  contentVertical: 'row-span-2 pb-32',\n  contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n  steps: 'w-full',\n  stepsHorizontal: 'flex',\n};\n\nexport const card = {\n  card: 'cursor-pointer overflow-hidden relative transition-all',\n  cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n  cardFlat: 'border-2 rounded-4',\n  cardFlatUnselected:\n    'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n  cardFlatSelected:\n    'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n  cardUnselected: 's-bg',\n  cardSelected:\n    'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n  cardOutline:\n    'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n  cardOutlineUnselected: 'i-border-$color-card-border',\n  cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n  switch: 'tap-highlight-transparent',\n  label: 'block relative h-24 w-44 cursor-pointer group',\n  labelDisabled: 'pointer-events-none',\n  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n  trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n  trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n  trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n  handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n  handleSelected: 'translate-x-20',\n  handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n  handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n  a11y: 'sr-only',\n};\n\nexport const toaster = {\n  container:\n    'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n  content: 'w-full',\n  toaster:\n    'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n  wrapper: 'relative overflow-hidden w-full',\n  toast:\n    'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n  positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n  warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n  negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n  icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n  iconPositive: 'i-text-$color-toast-positive-icon',\n  iconWarning: 'i-text-$color-toast-warning-icon',\n  iconNegative: 'i-text-$color-toast-negative-icon',\n  iconLoading: 'animate-bounce',\n  content: 'self-center mr-8 py-4 last-child:mb-0',\n  close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n  tabContainer: 'inline-grid relative',\n  wunderbar:\n    'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n  wrapperUnderlined:\n    'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n  tabActive: 'i-text-$color-tabs-text-selected',\n  icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n  iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n  content: 'flex items-center justify-center gap-8',\n  contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n  contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n  cols1: 'grid-cols-1',\n  cols2: 'grid-cols-2',\n  cols3: 'grid-cols-3',\n  cols4: 'grid-cols-4',\n  cols5: 'grid-cols-5',\n  cols6: 'grid-cols-6',\n  cols7: 'grid-cols-7',\n  cols8: 'grid-cols-8',\n  cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n  'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n  expandable: 'will-change-height',\n  expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n  expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n  expandableBleed: box.bleed,\n  chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n  chevronNonBox: 'ml-8',\n  chevronBox: '',\n  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n  chevronExpand: '-rotate-180',\n  chevronCollapse: 'rotate-180',\n  elementsTransformChevronDownPart: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n  elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n  elementsTransformChevronUpPart: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n  elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n  expansion: 'overflow-hidden',\n  expansionNotExpanded: 'h-0 invisible',\n  button: buttonReset + ' hover:underline focus-visible:underline',\n  buttonBox: 'w-full text-left relative inline-flex items-center justify-between ' + box.box,\n  paddingTop: 'pt-0',\n  title: 'flex w-full justify-between items-center',\n  titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n  primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n  secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n  utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n  destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n  pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n  disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n  quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n  utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n  negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n  loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n  link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n  utility: `border rounded-4 ${buttonDefaultStyling}`,\n  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  pill:\n  `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n  xsmall: 'py-6 px-16',\n  small: 'py-8 px-16',\n  medium: 'py-10 px-14',\n  large: 'py-12 px-16',\n  utility: 'py-[11px] px-[15px]',\n  smallUtility: 'py-[7px] px-[15px]',\n  pill: 'min-h-[44px] min-w-[44px]',\n  pillSmall: 'min-h-32 min-w-32',\n  link: 'p-0',\n};\n\nconst buttonTextSizes = {\n  medium: 'text-m leading-[24]',\n  xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n  inProgress:\n    `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n  quiet:\n    `border-0 rounded-8 ${buttonDefaultStyling}`,\n  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  isDisabled:\n    `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n  // Buttontypes\n  secondary:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n  secondaryHref:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondaryDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondaryQuiet:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondaryQuietDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondaryLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n  secondaryQuietLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n  linkAsButton: 'inline-block hover:no-underline text-center',\n  a11y: 'sr-only',\n  fullWidth: \"w-full max-w-full\",\n  contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n  wrapper: 'inline-flex rounded-4 overflow-hidden',\n  raised: 'i-shadow-$shadow-buttongroup',\n  vertical: 'flex-col',\n  nonOutlinedVertical: 'divide-y',\n  nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n  wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n  outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n  outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n  outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n  outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n  outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n  outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n  selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n  backdrop:\n    'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n  modal:\n    'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n  content:\n    'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n  transitionTitle: 'transition-all duration-300',\n  transitionTitleCenter: 'justify-self-center',\n  transitionTitleColSpan: 'col-span-2',\n  title:\n    '-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n  titleText: 'mb-0 h4 sm:h3',\n  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,\n  titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n  titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n  titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n  titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n  alert: \"flex p-16 border border-l-4 rounded-4\",\n  willChangeHeight: \"will-change-height\",\n  textWrapper: \"last-child:mb-0 text-s\",\n  title: \"text-s\",\n  icon: \"w-16 mr-8 min-w-16\",\n  negative:  \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n  negativeIcon: \"i-text-$color-alert-negative-icon\",\n  positive:  \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n  positiveIcon: \"i-text-$color-alert-positive-icon\",\n  warning:  \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n  warningIcon: \"i-text-$color-alert-warning-icon\",\n  info:  \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n  infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n  default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n  textArea: 'min-h-[42] sm:min-h-[45]',\n  disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n  placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n  wrapper: 'relative',\n  suffix: 'pr-40',\n  prefix: 'pl-40',\n};\n\nexport const select = {\n  default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n  disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-select-border-negative',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n  wrapper: 'relative',\n  selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n  chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n  label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n  labelInvalid: 'i-text-$color-label-text-negative',\n  optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n  helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n  helpTextValid: 'i-text-$color-helptext-text-positive',\n  helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n  'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n  wrapper: prefixSuffixWrapperBase + 'right-0',\n  wrapperWithLabel: 'w-max pr-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n  wrapper: prefixSuffixWrapperBase + 'left-0',\n  wrapperWithLabel: 'w-max pl-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n  wrapper: 'flex space-x-8',\n  text: 'i-text-$color-breadcrumbs-text',\n  link: 'i-text-$color-breadcrumbs-link-text',\n  separator: 'select-none i-text-$color-breadcrumbs-icon',\n  a11y: 'sr-only',\n};\n\nexport const toggle = {\n  field: 'relative text-m',\n  wrapper: 'relative py-1',\n  deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n  input: 'peer',\n  deadToggleInput: 'hidden',\n  inputDisabled: 'pointer-events-none',\n  focusable: 'peer-focus:focusable',\n  focusableWithin: 'focus-within:focusable',\n  label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n  deadToggleLabel: '-mt-2',\n  noContent: `before:content-[\"\"]`,\n  indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n  labelDisabled: 'pointer-events-none',\n  checkbox: 'before:s-bg before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n  checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n  checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-hover',\n  checkboxDisabled: 'peer-disabled:before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n  labelCheckboxBorder: 'i-border-$color-checkbox-border',\n  radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n  radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n  radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover ',\n  radioDisabled: 'peer-disabled:before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled',\n  labelRadioBorder: 'i-border-$color-radio-border',\n  radioButtons: 'inline-flex relative font-bold rounded-8',\n  radioButtonsGroup: 'group',\n  radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n  radioButtonsJustified: 'flex!',\n  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n  radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n  icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n  a11y: 'sr-only',\n};\n\nexport const clickable = {\n  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n  buttonOrLink: 'bg-transparent focusable',\n  buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n  wrapper: 'relative',\n  combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n  textMatch: 'font-bold',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n  optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const attention = {\n  base: 'border-2 relative flex items-start',\n  tooltip:\n    'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n  callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n  highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n  popover:\n    'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n  arrowBase:\n    'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n  arrowDirectionLeft: '-left-[8px]',\n  arrowDirectionRight: '-right-[8px]',\n  arrowDirectionBottom: '-bottom-[8px]',\n  arrowDirectionTop: '-top-[8px]',\n  arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n  arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n  arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  content: 'last-child:mb-0',\n  notCallout: 'absolute z-50',\n  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,\n};\n\nexport const backwardsCompatibleClasses = {\n  modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0\n  chevronBox: 'right-16', //removed in v1.4.0\n  chevronNonBox: 'left-8', //removed in v1.4.0\n  checkboxInvalid: 'peer-checked:before:i-border-$color-checkbox-negative-border-selected peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover', //replaced in v1.5.0\n  radioInvalid: 'peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ', //replaced in v1.5.0\n  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-bg-$color-checkbox-background-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled', //replaced in v1.5.0\n};"],
+  "sources": ["../../../packages/badge/index.js", "../../../packages/utils/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js"],
+  "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:\n        \"neutral\" |\n        \"info\" |\n        \"positive\" |\n        \"warning\" |\n        \"negative\" |\n        \"disabled\" |\n        \"notification\" |\n        \"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: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n  active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n  base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n  info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n  roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n  neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n  positionBase: 'absolute backdrop-blur',\n  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n  wrapper: 'touch-pan-y relative w-full h-44 py-2',\n  track:\n    'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n  trackDisabled:\n    'pointer-events-none i-bg-$color-slider-track-background-disabled',\n  activeTrack:\n    'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n  activeTrackDisabled:\n    'i-bg-$color-slider-track-background-disabled pointer-events-none',\n  thumb:\n    'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n  thumbEnabled:\n    'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n  thumbDisabled:\n    'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n  box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n  info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n  neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n  bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n  infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n  neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n  borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n  pill: 'flex items-center',\n  button: 'inline-flex items-center focusable text-xs transition-all',\n  suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n  filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n  label: 'pl-12 py-8 rounded-l-full',\n  labelWithoutClose: 'pr-12 rounded-r-full',\n  labelWithClose: 'pr-2',\n  close: 'pr-12 pl-4 py-8 rounded-r-full',\n  a11y: 'sr-only',\n};\n\nexport const step = {\n  step: 'group/step',\n  stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n  stepVerticalLeft: 'grid-cols-[20px_1fr]',\n  stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n  stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n  stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n  stepDotVerticalRight: 'col-start-2',\n  stepDotHorizontal: 'row-start-2 justify-self-end',\n  stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n  stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n  stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n  stepLineVertical: 'w-2 h-full justify-self-center',\n  stepLineVerticalRight: 'col-start-2',\n  stepLineHorizontal: 'h-2 w-full row-start-2',\n  stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n  stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n  stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n  stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n  content: 'last:mb-0 group-last/step:last:pb-0',\n  contentVertical: 'row-span-2 pb-32',\n  contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n  steps: 'w-full',\n  stepsHorizontal: 'flex',\n};\n\nexport const card = {\n  card: 'cursor-pointer overflow-hidden relative transition-all',\n  cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n  cardFlat: 'border-2 rounded-4',\n  cardFlatUnselected:\n    'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n  cardFlatSelected:\n    'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n  cardUnselected: 's-bg',\n  cardSelected:\n    'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n  cardOutline:\n    'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n  cardOutlineUnselected: 'i-border-$color-card-border',\n  cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n  switch: 'tap-highlight-transparent',\n  label: 'block relative h-24 w-44 cursor-pointer group',\n  labelDisabled: 'pointer-events-none',\n  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n  trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n  trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n  trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n  handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n  handleSelected: 'translate-x-20',\n  handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n  handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n  a11y: 'sr-only',\n};\n\nexport const toaster = {\n  container:\n    'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n  content: 'w-full',\n  toaster:\n    'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n  wrapper: 'relative overflow-hidden w-full',\n  toast:\n    'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n  positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n  warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n  negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n  icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n  iconPositive: 'i-text-$color-toast-positive-icon',\n  iconWarning: 'i-text-$color-toast-warning-icon',\n  iconNegative: 'i-text-$color-toast-negative-icon',\n  iconLoading: 'animate-bounce',\n  content: 'self-center mr-8 py-4 last-child:mb-0',\n  close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n  tabContainer: 'inline-grid relative',\n  wunderbar:\n    'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n  wrapperUnderlined:\n    'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n  tabActive: 'i-text-$color-tabs-text-selected',\n  icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n  iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n  content: 'flex items-center justify-center gap-8',\n  contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n  contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n  cols1: 'grid-cols-1',\n  cols2: 'grid-cols-2',\n  cols3: 'grid-cols-3',\n  cols4: 'grid-cols-4',\n  cols5: 'grid-cols-5',\n  cols6: 'grid-cols-6',\n  cols7: 'grid-cols-7',\n  cols8: 'grid-cols-8',\n  cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n  'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n  expandable: 'will-change-height',\n  expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n  expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n  expandableBleed: box.bleed,\n  chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n  chevronNonBox: 'ml-8',\n  chevronBox: '',\n  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n  chevronExpand: '-rotate-180',\n  chevronCollapse: 'rotate-180',\n  elementsTransformChevronDownPart: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n  elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n  elementsTransformChevronUpPart: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n  elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n  expansion: 'overflow-hidden',\n  expansionNotExpanded: 'h-0 invisible',\n  button: buttonReset + ' hover:underline focus-visible:underline',\n  buttonBox: 'w-full text-left relative inline-flex items-center justify-between ' + box.box,\n  paddingTop: 'pt-0',\n  title: 'flex w-full justify-between items-center',\n  titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n  primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n  secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n  utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n  destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n  pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n  disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n  quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n  utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n  negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n  loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n  link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n  utility: `border rounded-4 ${buttonDefaultStyling}`,\n  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  pill:\n  `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n  xsmall: 'py-6 px-16',\n  small: 'py-8 px-16',\n  medium: 'py-10 px-14',\n  large: 'py-12 px-16',\n  utility: 'py-[11px] px-[15px]',\n  smallUtility: 'py-[7px] px-[15px]',\n  pill: 'min-h-[44px] min-w-[44px]',\n  pillSmall: 'min-h-32 min-w-32',\n  link: 'p-0',\n};\n\nconst buttonTextSizes = {\n  medium: 'text-m leading-[24]',\n  xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n  inProgress:\n    `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n  quiet:\n    `border-0 rounded-8 ${buttonDefaultStyling}`,\n  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  isDisabled:\n    `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n  // Buttontypes\n  secondary:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n  secondaryHref:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondaryDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondaryQuiet:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondaryQuietDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondaryLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n  secondaryQuietLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n  linkAsButton: 'inline-block hover:no-underline text-center',\n  a11y: 'sr-only',\n  fullWidth: \"w-full max-w-full\",\n  contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n  wrapper: 'inline-flex rounded-4 overflow-hidden',\n  raised: 'i-shadow-$shadow-buttongroup',\n  vertical: 'flex-col',\n  nonOutlinedVertical: 'divide-y',\n  nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n  wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n  outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n  outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n  outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n  outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n  outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n  outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n  selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n  backdrop:\n    'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n  modal:\n    'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n  content:\n    'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n  transitionTitle: 'transition-all duration-300',\n  transitionTitleCenter: 'justify-self-center self-center',\n  transitionTitleColSpan: 'col-span-2',\n  title:\n    'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n  titleText: 'mb-0 h4 sm:h3',\n  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,\n  titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n  titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n  titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n  titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n  alert: \"flex p-16 border border-l-4 rounded-4\",\n  willChangeHeight: \"will-change-height\",\n  textWrapper: \"last-child:mb-0 text-s\",\n  title: \"text-s\",\n  icon: \"w-16 mr-8 min-w-16\",\n  negative:  \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n  negativeIcon: \"i-text-$color-alert-negative-icon\",\n  positive:  \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n  positiveIcon: \"i-text-$color-alert-positive-icon\",\n  warning:  \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n  warningIcon: \"i-text-$color-alert-warning-icon\",\n  info:  \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n  infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n  default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n  textArea: 'min-h-[42] sm:min-h-[45]',\n  disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n  placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n  wrapper: 'relative',\n  suffix: 'pr-40',\n  prefix: 'pl-40',\n};\n\nexport const select = {\n  default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n  disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-select-border-negative',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n  wrapper: 'relative',\n  selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n  chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n  label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n  labelInvalid: 'i-text-$color-label-text-negative',\n  optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n  helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n  helpTextValid: 'i-text-$color-helptext-text-positive',\n  helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n  'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n  wrapper: prefixSuffixWrapperBase + 'right-0',\n  wrapperWithLabel: 'w-max pr-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n  wrapper: prefixSuffixWrapperBase + 'left-0',\n  wrapperWithLabel: 'w-max pl-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n  wrapper: 'flex space-x-8',\n  text: 'i-text-$color-breadcrumbs-text',\n  link: 'i-text-$color-breadcrumbs-link-text',\n  separator: 'select-none i-text-$color-breadcrumbs-icon',\n  a11y: 'sr-only',\n};\n\nexport const toggle = {\n  field: 'relative text-m',\n  wrapper: 'relative py-1',\n  deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n  input: 'peer',\n  deadToggleInput: 'hidden',\n  inputDisabled: 'pointer-events-none',\n  focusable: 'peer-focus:focusable',\n  focusableWithin: 'focus-within:focusable',\n  label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n  deadToggleLabel: '-mt-2',\n  noContent: `before:content-[\"\"]`,\n  indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n  labelDisabled: 'pointer-events-none',\n  checkbox: 'before:s-bg before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n  checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n  checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-hover',\n  checkboxDisabled: 'peer-disabled:before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n  labelCheckboxBorder: 'i-border-$color-checkbox-border',\n  radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n  radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n  radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover ',\n  radioDisabled: 'peer-disabled:before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled',\n  labelRadioBorder: 'i-border-$color-radio-border',\n  radioButtons: 'inline-flex relative font-bold rounded-8',\n  radioButtonsGroup: 'group',\n  radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n  radioButtonsJustified: 'flex!',\n  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n  radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n  icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n  a11y: 'sr-only',\n};\n\nexport const clickable = {\n  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n  buttonOrLink: 'bg-transparent focusable',\n  buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n  wrapper: 'relative',\n  combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n  textMatch: 'font-bold',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n  optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const attention = {\n  base: 'border-2 relative flex items-start',\n  tooltip:\n    'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n  callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n  highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n  popover:\n    'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n  arrowBase:\n    'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n  arrowDirectionLeft: '-left-[8px]',\n  arrowDirectionRight: '-right-[8px]',\n  arrowDirectionBottom: '-bottom-[8px]',\n  arrowDirectionTop: '-top-[8px]',\n  arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n  arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n  arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  content: 'last-child:mb-0',\n  notCallout: 'absolute z-50',\n  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,\n};\n\nexport const backwardsCompatibleClasses = {\n  modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0\n  chevronBox: 'right-16', //removed in v1.4.0\n  chevronNonBox: 'left-8', //removed in v1.4.0\n  checkboxInvalid: 'peer-checked:before:i-border-$color-checkbox-negative-border-selected peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover', //replaced in v1.5.0\n  radioInvalid: 'peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ', //replaced in v1.5.0\n  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-bg-$color-checkbox-background-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled', //replaced in v1.5.0\n  modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start\n  pillClose: 'pt-4 pb-6 text-m!' //replaced by py-8\n};\n\nexport const pagination = {\n  currentPage: 'block md:hidden p-8 font-bold',\n  icon: 'flex w-16 h-16 s-icon',\n  containerNav: 'flex items-center justify-center space-x-8 p-8',\n  heading: 'sr-only',\n  pages: 'hidden md:block s-text-link',\n  nextPage: 'flex items-center',\n  firstPageButton: 'md:hidden',\n  firstPageLabel: 'font-bold',\n  active: 's-bg-primary s-text-inverted',\n  defaultPage: 'hover:s-bg-primary-subtle-hover'\n};"],
   "mappings": "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",
   "names": ["classes"]
 }

package/dist/packages/box/index.js

@@ -21,7 +21,7 @@ function fclasses(definition) {
   return classMap(defn);
 }
 
-// node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js
 var box = {
   box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
   // Relative here enables w-clickable
@@ -181,9 +181,9 @@ var modal = {
   content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
   footer: "flex justify-end shrink-0 px-16 sm:px-32",
   transitionTitle: "transition-all duration-300",
-  transitionTitleCenter: "justify-self-center",
+  transitionTitleCenter: "justify-self-center self-center",
   transitionTitleColSpan: "col-span-2",
-  title: "-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
+  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",
   titleText: "mb-0 h4 sm:h3",
   titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
   titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/box/index.js", "../../../packages/utils/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js"],
-  "sourcesContent": ["import { css, html, nothing } from 'lit';\nimport WarpElement from \"@warp-ds/elements-core\";\nimport { fclasses } from '../utils';\nimport { box as ccBox } from '@warp-ds/css/component-classes';\n\nclass WarpBox extends WarpElement {\n  static properties = {\n    bleed: { type: Boolean },\n    bordered: { type: Boolean },\n    info: { type: Boolean },\n    neutral: { type: Boolean },\n    role: { type: String },\n  };\n\n  // Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.\n  // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,\n  // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.\n  // https://stackoverflow.com/a/61631668\n  static styles = [\n    WarpElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n      ::slotted(:last-child) {\n        margin-bottom: 0 !important;\n      }\n    `,\n  ];\n\n  get _class() {\n    return fclasses({\n      [ccBox.box]: true,\n      [ccBox.bleed]: this.bleed,\n      [ccBox.info]: this.info,\n      [ccBox.neutral]: this.neutral,\n      [ccBox.bordered]: this.bordered,\n    });\n  }\n\n  get _optOutRoleWithDefault() {\n    return this.role === '' ? nothing : this.role ?? 'region'\n  }\n\n  render() {\n    return html`\n      <div role=\"${this._optOutRoleWithDefault}\" class=\"${this._class}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get('w-box')) {\n  customElements.define('w-box', WarpBox);\n}\n\nexport { WarpBox };\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: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n  active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n  base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n  info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n  roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n  neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n  positionBase: 'absolute backdrop-blur',\n  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n  wrapper: 'touch-pan-y relative w-full h-44 py-2',\n  track:\n    'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n  trackDisabled:\n    'pointer-events-none i-bg-$color-slider-track-background-disabled',\n  activeTrack:\n    'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n  activeTrackDisabled:\n    'i-bg-$color-slider-track-background-disabled pointer-events-none',\n  thumb:\n    'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n  thumbEnabled:\n    'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n  thumbDisabled:\n    'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n  box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n  info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n  neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n  bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n  infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n  neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n  borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n  pill: 'flex items-center',\n  button: 'inline-flex items-center focusable text-xs transition-all',\n  suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n  filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n  label: 'pl-12 py-8 rounded-l-full',\n  labelWithoutClose: 'pr-12 rounded-r-full',\n  labelWithClose: 'pr-2',\n  close: 'pr-12 pl-4 pt-4 pb-6 rounded-r-full text-m!',\n  a11y: 'sr-only',\n};\n\nexport const step = {\n  step: 'group/step',\n  stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n  stepVerticalLeft: 'grid-cols-[20px_1fr]',\n  stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n  stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n  stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n  stepDotVerticalRight: 'col-start-2',\n  stepDotHorizontal: 'row-start-2 justify-self-end',\n  stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n  stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n  stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n  stepLineVertical: 'w-2 h-full justify-self-center',\n  stepLineVerticalRight: 'col-start-2',\n  stepLineHorizontal: 'h-2 w-full row-start-2',\n  stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n  stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n  stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n  stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n  content: 'last:mb-0 group-last/step:last:pb-0',\n  contentVertical: 'row-span-2 pb-32',\n  contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n  steps: 'w-full',\n  stepsHorizontal: 'flex',\n};\n\nexport const card = {\n  card: 'cursor-pointer overflow-hidden relative transition-all',\n  cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n  cardFlat: 'border-2 rounded-4',\n  cardFlatUnselected:\n    'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n  cardFlatSelected:\n    'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n  cardUnselected: 's-bg',\n  cardSelected:\n    'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n  cardOutline:\n    'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n  cardOutlineUnselected: 'i-border-$color-card-border',\n  cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n  switch: 'tap-highlight-transparent',\n  label: 'block relative h-24 w-44 cursor-pointer group',\n  labelDisabled: 'pointer-events-none',\n  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n  trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n  trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n  trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n  handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n  handleSelected: 'translate-x-20',\n  handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n  handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n  a11y: 'sr-only',\n};\n\nexport const toaster = {\n  container:\n    'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n  content: 'w-full',\n  toaster:\n    'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n  wrapper: 'relative overflow-hidden w-full',\n  toast:\n    'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n  positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n  warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n  negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n  icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n  iconPositive: 'i-text-$color-toast-positive-icon',\n  iconWarning: 'i-text-$color-toast-warning-icon',\n  iconNegative: 'i-text-$color-toast-negative-icon',\n  iconLoading: 'animate-bounce',\n  content: 'self-center mr-8 py-4 last-child:mb-0',\n  close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n  tabContainer: 'inline-grid relative',\n  wunderbar:\n    'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n  wrapperUnderlined:\n    'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n  tabActive: 'i-text-$color-tabs-text-selected',\n  icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n  iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n  content: 'flex items-center justify-center gap-8',\n  contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n  contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n  cols1: 'grid-cols-1',\n  cols2: 'grid-cols-2',\n  cols3: 'grid-cols-3',\n  cols4: 'grid-cols-4',\n  cols5: 'grid-cols-5',\n  cols6: 'grid-cols-6',\n  cols7: 'grid-cols-7',\n  cols8: 'grid-cols-8',\n  cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n  'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n  expandable: 'will-change-height',\n  expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n  expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n  expandableBleed: box.bleed,\n  chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n  chevronNonBox: 'ml-8',\n  chevronBox: '',\n  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n  chevronExpand: '-rotate-180',\n  chevronCollapse: 'rotate-180',\n  elementsTransformChevronDownPart: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n  elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n  elementsTransformChevronUpPart: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n  elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n  expansion: 'overflow-hidden',\n  expansionNotExpanded: 'h-0 invisible',\n  button: buttonReset + ' hover:underline focus-visible:underline',\n  buttonBox: 'w-full text-left relative inline-flex items-center justify-between ' + box.box,\n  paddingTop: 'pt-0',\n  title: 'flex w-full justify-between items-center',\n  titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n  primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n  secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n  utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n  destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n  pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n  disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n  quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n  utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n  negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n  loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n  link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n  utility: `border rounded-4 ${buttonDefaultStyling}`,\n  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  pill:\n  `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n  xsmall: 'py-6 px-16',\n  small: 'py-8 px-16',\n  medium: 'py-10 px-14',\n  large: 'py-12 px-16',\n  utility: 'py-[11px] px-[15px]',\n  smallUtility: 'py-[7px] px-[15px]',\n  pill: 'min-h-[44px] min-w-[44px]',\n  pillSmall: 'min-h-32 min-w-32',\n  link: 'p-0',\n};\n\nconst buttonTextSizes = {\n  medium: 'text-m leading-[24]',\n  xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n  inProgress:\n    `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n  quiet:\n    `border-0 rounded-8 ${buttonDefaultStyling}`,\n  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  isDisabled:\n    `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n  // Buttontypes\n  secondary:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n  secondaryHref:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondaryDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondaryQuiet:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondaryQuietDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondaryLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n  secondaryQuietLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n  linkAsButton: 'inline-block hover:no-underline text-center',\n  a11y: 'sr-only',\n  fullWidth: \"w-full max-w-full\",\n  contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n  wrapper: 'inline-flex rounded-4 overflow-hidden',\n  raised: 'i-shadow-$shadow-buttongroup',\n  vertical: 'flex-col',\n  nonOutlinedVertical: 'divide-y',\n  nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n  wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n  outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n  outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n  outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n  outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n  outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n  outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n  selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n  backdrop:\n    'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n  modal:\n    'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n  content:\n    'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n  transitionTitle: 'transition-all duration-300',\n  transitionTitleCenter: 'justify-self-center',\n  transitionTitleColSpan: 'col-span-2',\n  title:\n    '-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n  titleText: 'mb-0 h4 sm:h3',\n  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,\n  titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n  titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n  titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n  titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n  alert: \"flex p-16 border border-l-4 rounded-4\",\n  willChangeHeight: \"will-change-height\",\n  textWrapper: \"last-child:mb-0 text-s\",\n  title: \"text-s\",\n  icon: \"w-16 mr-8 min-w-16\",\n  negative:  \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n  negativeIcon: \"i-text-$color-alert-negative-icon\",\n  positive:  \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n  positiveIcon: \"i-text-$color-alert-positive-icon\",\n  warning:  \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n  warningIcon: \"i-text-$color-alert-warning-icon\",\n  info:  \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n  infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n  default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n  textArea: 'min-h-[42] sm:min-h-[45]',\n  disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n  placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n  wrapper: 'relative',\n  suffix: 'pr-40',\n  prefix: 'pl-40',\n};\n\nexport const select = {\n  default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n  disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-select-border-negative',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n  wrapper: 'relative',\n  selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n  chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n  label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n  labelInvalid: 'i-text-$color-label-text-negative',\n  optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n  helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n  helpTextValid: 'i-text-$color-helptext-text-positive',\n  helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n  'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n  wrapper: prefixSuffixWrapperBase + 'right-0',\n  wrapperWithLabel: 'w-max pr-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n  wrapper: prefixSuffixWrapperBase + 'left-0',\n  wrapperWithLabel: 'w-max pl-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n  wrapper: 'flex space-x-8',\n  text: 'i-text-$color-breadcrumbs-text',\n  link: 'i-text-$color-breadcrumbs-link-text',\n  separator: 'select-none i-text-$color-breadcrumbs-icon',\n  a11y: 'sr-only',\n};\n\nexport const toggle = {\n  field: 'relative text-m',\n  wrapper: 'relative py-1',\n  deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n  input: 'peer',\n  deadToggleInput: 'hidden',\n  inputDisabled: 'pointer-events-none',\n  focusable: 'peer-focus:focusable',\n  focusableWithin: 'focus-within:focusable',\n  label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n  deadToggleLabel: '-mt-2',\n  noContent: `before:content-[\"\"]`,\n  indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n  labelDisabled: 'pointer-events-none',\n  checkbox: 'before:s-bg before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n  checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n  checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-hover',\n  checkboxDisabled: 'peer-disabled:before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n  labelCheckboxBorder: 'i-border-$color-checkbox-border',\n  radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n  radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n  radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover ',\n  radioDisabled: 'peer-disabled:before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled',\n  labelRadioBorder: 'i-border-$color-radio-border',\n  radioButtons: 'inline-flex relative font-bold rounded-8',\n  radioButtonsGroup: 'group',\n  radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n  radioButtonsJustified: 'flex!',\n  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n  radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n  icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n  a11y: 'sr-only',\n};\n\nexport const clickable = {\n  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n  buttonOrLink: 'bg-transparent focusable',\n  buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n  wrapper: 'relative',\n  combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n  textMatch: 'font-bold',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n  optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const attention = {\n  base: 'border-2 relative flex items-start',\n  tooltip:\n    'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n  callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n  highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n  popover:\n    'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n  arrowBase:\n    'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n  arrowDirectionLeft: '-left-[8px]',\n  arrowDirectionRight: '-right-[8px]',\n  arrowDirectionBottom: '-bottom-[8px]',\n  arrowDirectionTop: '-top-[8px]',\n  arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n  arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n  arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  content: 'last-child:mb-0',\n  notCallout: 'absolute z-50',\n  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,\n};\n\nexport const backwardsCompatibleClasses = {\n  modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0\n  chevronBox: 'right-16', //removed in v1.4.0\n  chevronNonBox: 'left-8', //removed in v1.4.0\n  checkboxInvalid: 'peer-checked:before:i-border-$color-checkbox-negative-border-selected peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover', //replaced in v1.5.0\n  radioInvalid: 'peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ', //replaced in v1.5.0\n  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-bg-$color-checkbox-background-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled', //replaced in v1.5.0\n};"],
+  "sources": ["../../../packages/box/index.js", "../../../packages/utils/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js"],
+  "sourcesContent": ["import { css, html, nothing } from 'lit';\nimport WarpElement from \"@warp-ds/elements-core\";\nimport { fclasses } from '../utils';\nimport { box as ccBox } from '@warp-ds/css/component-classes';\n\nclass WarpBox extends WarpElement {\n  static properties = {\n    bleed: { type: Boolean },\n    bordered: { type: Boolean },\n    info: { type: Boolean },\n    neutral: { type: Boolean },\n    role: { type: String },\n  };\n\n  // Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.\n  // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,\n  // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.\n  // https://stackoverflow.com/a/61631668\n  static styles = [\n    WarpElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n      ::slotted(:last-child) {\n        margin-bottom: 0 !important;\n      }\n    `,\n  ];\n\n  get _class() {\n    return fclasses({\n      [ccBox.box]: true,\n      [ccBox.bleed]: this.bleed,\n      [ccBox.info]: this.info,\n      [ccBox.neutral]: this.neutral,\n      [ccBox.bordered]: this.bordered,\n    });\n  }\n\n  get _optOutRoleWithDefault() {\n    return this.role === '' ? nothing : this.role ?? 'region'\n  }\n\n  render() {\n    return html`\n      <div role=\"${this._optOutRoleWithDefault}\" class=\"${this._class}\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\nif (!customElements.get('w-box')) {\n  customElements.define('w-box', WarpBox);\n}\n\nexport { WarpBox };\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: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n  active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n  base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n  info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n  roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n  neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n  positionBase: 'absolute backdrop-blur',\n  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n  wrapper: 'touch-pan-y relative w-full h-44 py-2',\n  track:\n    'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n  trackDisabled:\n    'pointer-events-none i-bg-$color-slider-track-background-disabled',\n  activeTrack:\n    'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n  activeTrackDisabled:\n    'i-bg-$color-slider-track-background-disabled pointer-events-none',\n  thumb:\n    'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n  thumbEnabled:\n    'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n  thumbDisabled:\n    'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n  box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n  info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n  neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n  bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n  infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n  neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n  borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n  pill: 'flex items-center',\n  button: 'inline-flex items-center focusable text-xs transition-all',\n  suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n  filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n  label: 'pl-12 py-8 rounded-l-full',\n  labelWithoutClose: 'pr-12 rounded-r-full',\n  labelWithClose: 'pr-2',\n  close: 'pr-12 pl-4 py-8 rounded-r-full',\n  a11y: 'sr-only',\n};\n\nexport const step = {\n  step: 'group/step',\n  stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n  stepVerticalLeft: 'grid-cols-[20px_1fr]',\n  stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n  stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n  stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n  stepDotVerticalRight: 'col-start-2',\n  stepDotHorizontal: 'row-start-2 justify-self-end',\n  stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n  stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n  stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n  stepLineVertical: 'w-2 h-full justify-self-center',\n  stepLineVerticalRight: 'col-start-2',\n  stepLineHorizontal: 'h-2 w-full row-start-2',\n  stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n  stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n  stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n  stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n  content: 'last:mb-0 group-last/step:last:pb-0',\n  contentVertical: 'row-span-2 pb-32',\n  contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n  steps: 'w-full',\n  stepsHorizontal: 'flex',\n};\n\nexport const card = {\n  card: 'cursor-pointer overflow-hidden relative transition-all',\n  cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n  cardFlat: 'border-2 rounded-4',\n  cardFlatUnselected:\n    'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n  cardFlatSelected:\n    'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n  cardUnselected: 's-bg',\n  cardSelected:\n    'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n  cardOutline:\n    'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n  cardOutlineUnselected: 'i-border-$color-card-border',\n  cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n  switch: 'tap-highlight-transparent',\n  label: 'block relative h-24 w-44 cursor-pointer group',\n  labelDisabled: 'pointer-events-none',\n  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n  trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n  trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n  trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n  handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n  handleSelected: 'translate-x-20',\n  handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n  handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n  a11y: 'sr-only',\n};\n\nexport const toaster = {\n  container:\n    'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n  content: 'w-full',\n  toaster:\n    'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n  wrapper: 'relative overflow-hidden w-full',\n  toast:\n    'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n  positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n  warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n  negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n  icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n  iconPositive: 'i-text-$color-toast-positive-icon',\n  iconWarning: 'i-text-$color-toast-warning-icon',\n  iconNegative: 'i-text-$color-toast-negative-icon',\n  iconLoading: 'animate-bounce',\n  content: 'self-center mr-8 py-4 last-child:mb-0',\n  close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n  tabContainer: 'inline-grid relative',\n  wunderbar:\n    'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n  wrapperUnderlined:\n    'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n  tabActive: 'i-text-$color-tabs-text-selected',\n  icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n  iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n  content: 'flex items-center justify-center gap-8',\n  contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n  contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n  cols1: 'grid-cols-1',\n  cols2: 'grid-cols-2',\n  cols3: 'grid-cols-3',\n  cols4: 'grid-cols-4',\n  cols5: 'grid-cols-5',\n  cols6: 'grid-cols-6',\n  cols7: 'grid-cols-7',\n  cols8: 'grid-cols-8',\n  cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n  'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n  expandable: 'will-change-height',\n  expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n  expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n  expandableBleed: box.bleed,\n  chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n  chevronNonBox: 'ml-8',\n  chevronBox: '',\n  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n  chevronExpand: '-rotate-180',\n  chevronCollapse: 'rotate-180',\n  elementsTransformChevronDownPart: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n  elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n  elementsTransformChevronUpPart: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n  elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n  expansion: 'overflow-hidden',\n  expansionNotExpanded: 'h-0 invisible',\n  button: buttonReset + ' hover:underline focus-visible:underline',\n  buttonBox: 'w-full text-left relative inline-flex items-center justify-between ' + box.box,\n  paddingTop: 'pt-0',\n  title: 'flex w-full justify-between items-center',\n  titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n  primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n  secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n  utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n  destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n  pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n  disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n  quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n  utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n  negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n  loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n  link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n  utility: `border rounded-4 ${buttonDefaultStyling}`,\n  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  pill:\n  `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n  xsmall: 'py-6 px-16',\n  small: 'py-8 px-16',\n  medium: 'py-10 px-14',\n  large: 'py-12 px-16',\n  utility: 'py-[11px] px-[15px]',\n  smallUtility: 'py-[7px] px-[15px]',\n  pill: 'min-h-[44px] min-w-[44px]',\n  pillSmall: 'min-h-32 min-w-32',\n  link: 'p-0',\n};\n\nconst buttonTextSizes = {\n  medium: 'text-m leading-[24]',\n  xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n  inProgress:\n    `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n  quiet:\n    `border-0 rounded-8 ${buttonDefaultStyling}`,\n  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  isDisabled:\n    `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n  // Buttontypes\n  secondary:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n  secondaryHref:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondaryDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondaryQuiet:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondaryQuietDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondaryLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n  secondaryQuietLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n  linkAsButton: 'inline-block hover:no-underline text-center',\n  a11y: 'sr-only',\n  fullWidth: \"w-full max-w-full\",\n  contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n  wrapper: 'inline-flex rounded-4 overflow-hidden',\n  raised: 'i-shadow-$shadow-buttongroup',\n  vertical: 'flex-col',\n  nonOutlinedVertical: 'divide-y',\n  nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n  wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n  outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n  outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n  outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n  outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n  outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n  outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n  selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n  backdrop:\n    'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n  modal:\n    'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n  content:\n    'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n  transitionTitle: 'transition-all duration-300',\n  transitionTitleCenter: 'justify-self-center self-center',\n  transitionTitleColSpan: 'col-span-2',\n  title:\n    'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n  titleText: 'mb-0 h4 sm:h3',\n  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,\n  titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n  titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n  titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n  titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n  alert: \"flex p-16 border border-l-4 rounded-4\",\n  willChangeHeight: \"will-change-height\",\n  textWrapper: \"last-child:mb-0 text-s\",\n  title: \"text-s\",\n  icon: \"w-16 mr-8 min-w-16\",\n  negative:  \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n  negativeIcon: \"i-text-$color-alert-negative-icon\",\n  positive:  \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n  positiveIcon: \"i-text-$color-alert-positive-icon\",\n  warning:  \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n  warningIcon: \"i-text-$color-alert-warning-icon\",\n  info:  \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n  infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n  default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n  textArea: 'min-h-[42] sm:min-h-[45]',\n  disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n  placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n  wrapper: 'relative',\n  suffix: 'pr-40',\n  prefix: 'pl-40',\n};\n\nexport const select = {\n  default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n  disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-select-border-negative',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n  wrapper: 'relative',\n  selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n  chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n  label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n  labelInvalid: 'i-text-$color-label-text-negative',\n  optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n  helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n  helpTextValid: 'i-text-$color-helptext-text-positive',\n  helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n  'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n  wrapper: prefixSuffixWrapperBase + 'right-0',\n  wrapperWithLabel: 'w-max pr-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n  wrapper: prefixSuffixWrapperBase + 'left-0',\n  wrapperWithLabel: 'w-max pl-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n  wrapper: 'flex space-x-8',\n  text: 'i-text-$color-breadcrumbs-text',\n  link: 'i-text-$color-breadcrumbs-link-text',\n  separator: 'select-none i-text-$color-breadcrumbs-icon',\n  a11y: 'sr-only',\n};\n\nexport const toggle = {\n  field: 'relative text-m',\n  wrapper: 'relative py-1',\n  deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n  input: 'peer',\n  deadToggleInput: 'hidden',\n  inputDisabled: 'pointer-events-none',\n  focusable: 'peer-focus:focusable',\n  focusableWithin: 'focus-within:focusable',\n  label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n  deadToggleLabel: '-mt-2',\n  noContent: `before:content-[\"\"]`,\n  indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n  labelDisabled: 'pointer-events-none',\n  checkbox: 'before:s-bg before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n  checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n  checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-hover',\n  checkboxDisabled: 'peer-disabled:before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n  labelCheckboxBorder: 'i-border-$color-checkbox-border',\n  radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n  radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n  radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover ',\n  radioDisabled: 'peer-disabled:before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled',\n  labelRadioBorder: 'i-border-$color-radio-border',\n  radioButtons: 'inline-flex relative font-bold rounded-8',\n  radioButtonsGroup: 'group',\n  radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n  radioButtonsJustified: 'flex!',\n  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n  radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n  icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n  a11y: 'sr-only',\n};\n\nexport const clickable = {\n  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n  buttonOrLink: 'bg-transparent focusable',\n  buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n  wrapper: 'relative',\n  combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n  textMatch: 'font-bold',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n  optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const attention = {\n  base: 'border-2 relative flex items-start',\n  tooltip:\n    'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n  callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n  highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n  popover:\n    'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n  arrowBase:\n    'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n  arrowDirectionLeft: '-left-[8px]',\n  arrowDirectionRight: '-right-[8px]',\n  arrowDirectionBottom: '-bottom-[8px]',\n  arrowDirectionTop: '-top-[8px]',\n  arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n  arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n  arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  content: 'last-child:mb-0',\n  notCallout: 'absolute z-50',\n  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,\n};\n\nexport const backwardsCompatibleClasses = {\n  modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0\n  chevronBox: 'right-16', //removed in v1.4.0\n  chevronNonBox: 'left-8', //removed in v1.4.0\n  checkboxInvalid: 'peer-checked:before:i-border-$color-checkbox-negative-border-selected peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover', //replaced in v1.5.0\n  radioInvalid: 'peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ', //replaced in v1.5.0\n  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-bg-$color-checkbox-background-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled', //replaced in v1.5.0\n  modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start\n  pillClose: 'pt-4 pb-6 text-m!' //replaced by py-8\n};\n\nexport const pagination = {\n  currentPage: 'block md:hidden p-8 font-bold',\n  icon: 'flex w-16 h-16 s-icon',\n  containerNav: 'flex items-center justify-center space-x-8 p-8',\n  heading: 'sr-only',\n  pages: 'hidden md:block s-text-link',\n  nextPage: 'flex items-center',\n  firstPageButton: 'md:hidden',\n  firstPageLabel: 'font-bold',\n  active: 's-bg-primary s-text-inverted',\n  defaultPage: 'hover:s-bg-primary-subtle-hover'\n};"],
   "mappings": "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",
   "names": []
 }