@warp-ds/elements 2.1.0 → 2.1.1-next.1

package/dist/packages/textfield/index.js

@@ -15,7 +15,7 @@ var r = function() {
   }, []).join(" ");
 };
 
-// node_modules/.pnpm/@warp-ds+css@2.0.0_@warp-ds+uno@2.0.0_unocss@0.62.0_postcss@8.4.41_rollup@4.20.0_vite@5.3.3_@_vyiy5vwpqfzwy5hpmfkwp3zmle/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@2.0.1_@warp-ds+uno@2.0.2_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_2s4pctzvx7cgxzqlrreqkg4h34/node_modules/@warp-ds/css/component-classes/index.js
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
   primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../packages/textfield/index.js", "../../../node_modules/.pnpm/@chbphone55+classnames@2.0.0/node_modules/@chbphone55/classnames/dist/index.m.js", "../../../node_modules/.pnpm/@warp-ds+css@2.0.0_@warp-ds+uno@2.0.0_unocss@0.62.0_postcss@8.4.41_rollup@4.20.0_vite@5.3.3_@_vyiy5vwpqfzwy5hpmfkwp3zmle/node_modules/@warp-ds/css/component-classes/index.js", "../../../packages/utils/index.js"],
-  "sourcesContent": ["import { css, html } from 'lit';\n\nimport { classNames } from '@chbphone55/classnames';\nimport { input as ccInput, label as ccLabel, helpText as ccHelpText } from '@warp-ds/css/component-classes';\nimport WarpElement from '@warp-ds/elements-core';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { kebabCaseAttributes } from '../utils';\n\nclass WarpTextField extends kebabCaseAttributes(WarpElement) {\n  static properties = {\n    disabled: { type: Boolean },\n    invalid: { type: Boolean },\n    id: { type: String },\n    label: { type: String },\n    helpText: { type: String },\n    size: { type: String },\n    max: { type: Number },\n    min: { type: Number },\n    minLength: { type: Number },\n    maxLength: { type: Number },\n    name: { type: String },\n    pattern: { type: String },\n    placeholder: { type: String },\n    readOnly: { type: Boolean },\n    required: { type: Boolean },\n    type: { type: String },\n    value: { type: String },\n    _hasPrefix: { state: true },\n    _hasSuffix: { state: true },\n  };\n\n  // Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.\n  // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,\n  // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.\n  // https://stackoverflow.com/a/61631668\n  static styles = [\n    WarpElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n      ::slotted(:last-child) {\n        margin-bottom: 0px !important;\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this.type = 'text';\n  }\n\n  get _inputStyles() {\n    return classNames([\n      ccInput.base,\n      this._hasSuffix && ccInput.suffix,\n      this._hasPrefix && ccInput.prefix,\n      !this.invalid && !this.disabled && !this.readOnly && ccInput.default,\n      this.invalid && !this.disabled && !this.readOnly && ccInput.invalid,\n      !this.invalid && this.disabled && !this.readOnly && ccInput.disabled,\n      !this.invalid && !this.disabled && this.readOnly && ccInput.readOnly,\n    ]);\n  }\n\n  get _helpTextStyles() {\n    return classNames([ccHelpText.base, this.invalid ? ccHelpText.colorInvalid : ccHelpText.color]);\n  }\n\n  get _label() {\n    if (this.label) {\n      return html`<label for=\"${this._id}\" class=${ccLabel.base}>${this.label}</label>`;\n    }\n  }\n\n  get _helpId() {\n    if (this.helpText) return `${this._id}__hint`;\n  }\n\n  get _id() {\n    return 'textfield';\n  }\n\n  get _error() {\n    if (this.invalid && this._helpId) return this._helpId;\n  }\n\n  handler(e) {\n    const { name, value } = e.target;\n    const event = new CustomEvent(e.type, {\n      detail: {\n        name,\n        value,\n        target: e.target,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  prefixSlotChange(e) {\n    const el = this.renderRoot.querySelector('slot[name=prefix]');\n    const affixes = el.assignedElements();\n    if (affixes.length) this._hasPrefix = true;\n  }\n\n  suffixSlotChange(e) {\n    const el = this.renderRoot.querySelector('slot[name=suffix]');\n    const affixes = el.assignedElements();\n    if (affixes.length) this._hasSuffix = true;\n  }\n\n  render() {\n    return html`\n      ${this._label}\n      <div class=\"${ccInput.wrapper}\">\n        <slot @slotchange=\"${this.prefixSlotChange}\" name=\"prefix\"></slot>\n        <input\n          class=\"${this._inputStyles}\"\n          type=\"${this.type}\"\n          min=\"${ifDefined(this.min)}\"\n          max=\"${ifDefined(this.max)}\"\n          size=\"${ifDefined(this.size)}\"\n          minlength=\"${ifDefined(this.minLength)}\"\n          maxlength=\"${ifDefined(this.maxLength)}\"\n          name=\"${ifDefined(this.name)}\"\n          pattern=\"${ifDefined(this.pattern)}\"\n          placeholder=\"${ifDefined(this.placeholder)}\"\n          value=\"${ifDefined(this.value)}\"\n          aria-describedby=\"${ifDefined(this._helpId)}\"\n          aria-errormessage=\"${ifDefined(this._error)}\"\n          aria-invalid=\"${ifDefined(this.invalid)}\"\n          id=\"${this._id}\"\n          ?disabled=\"${this.disabled}\"\n          ?readonly=\"${this.readOnly}\"\n          ?required=\"${this.required}\"\n          @blur=\"${this.handler}\"\n          @change=\"${this.handler}\"\n          @focus=\"${this.handler}\" />\n        <slot @slotchange=\"${this.suffixSlotChange}\" name=\"suffix\"></slot>\n      </div>\n      ${this.helpText && html`<div class=\"${this._helpTextStyles}\" id=\"${this._helpId}\">${this.helpText}</div>`}\n    `;\n  }\n}\n\nif (!customElements.get('w-textfield')) {\n  customElements.define('w-textfield', WarpTextField);\n}\n\nexport { WarpTextField };\n", "var r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return t.reduce(function(t,n){return t.concat(\"string\"==typeof n?n:Array.isArray(n)?r.apply(void 0,n):\"object\"==typeof n&&n?Object.keys(n).map(function(r){return n[r]?r:\"\"}):\"\")},[]).join(\" \")};export{r as classNames};\n", "export const pageIndicator = {\n  wrapper: 'flex space-x-8 p-8',\n  dot: 'h-8 w-8 rounded-full',\n  inactive: 's-bg-disabled-subtle hover:bg-[--w-s-icon-subtle]',\n  active: 'bg-[--w-s-icon-selected]',\n};\n\nexport const badge = {\n  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n  neutral: 'bg-[--w-color-badge-neutral-background] s-text',\n  info: 'bg-[--w-color-badge-info-background] s-text',\n  positive: 'bg-[--w-color-badge-positive-background] s-text',\n  warning: 'bg-[--w-color-badge-warning-background] s-text',\n  negative: 'bg-[--w-color-badge-negative-background] s-text',\n  disabled: 's-bg-disabled s-text',\n  price: 'bg-[--w-black/70] s-text-inverted-static',\n  sponsored: 'bg-[--w-color-badge-sponsored-background] s-text',\n  positionBase: 'absolute backdrop-blur',\n  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n  wrapper: 'touch-pan-y relative w-full h-44 py-2',\n  track: 'absolute s-bg-disabled-subtle h-4 top-20 rounded-4 w-full',\n  trackDisabled: 'pointer-events-none',\n  activeTrack: 'absolute h-6 top-[19px] rounded-4',\n  activeTrackEnabled: 's-bg-primary',\n  activeTrackDisabled: 's-bg-disabled pointer-events-none',\n  thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n  thumbEnabled:\n    'border-2 shadow-[--w-shadow-slider] cursor-pointer s-bg-primary s-border-primary hover:s-bg-primary-hover hover:s-border-primary-hover hover:shadow-[--w-shadow-slider-handle-hover] active:s-bg-primary-active active:s-border-primary-active active:shadow-[--w-shadow-slider-handle-active] focus:shadow-[--w-shadow-slider-handle-hover] focus:s-border-primary-hover focus:s-bg-primary-hover',\n  thumbDisabled: 's-bg-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n  base: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n  info: 's-bg-info-subtle',\n  neutral: 's-surface-sunken',\n  bordered: 'border-2 s-border s-bg',\n};\n\nexport const pill = {\n  wrapper: 'flex items-center',\n  button: 'inline-flex items-center focusable text-xs transition-all',\n  suggestion:\n    'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold',\n  filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted',\n  label: 'pl-12 py-8 rounded-l-full',\n  labelWithoutClose: 'pr-12 rounded-r-full',\n  labelWithClose: 'pr-2',\n  close: 'pr-12 pl-4 py-8 rounded-r-full',\n  a11y: 'sr-only',\n};\n\nexport const step = {\n  base: 'group/step',\n  vertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n  horizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n  alignLeft: 'grid-cols-[20px_1fr]',\n  alignRight: 'grid-cols-[1fr_20px] text-right',\n\n  dot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',\n  dotAlignRight: 'col-start-2',\n  dotHorizontal: 'row-start-2 justify-self-end',\n  dotActive: 's-border-primary s-bg-primary',\n  dotIncomplete: 's-border s-bg',\n\n  line: 'group-last/stepv:hidden transition-colors duration-300',\n  lineVertical: 'w-2 h-full justify-self-center',\n  lineAlignRight: 'col-start-2',\n  lineHorizontal: 'h-2 w-full row-start-2',\n  lineHorizontalAlignRight: 'group-last/steph:bg-transparent',\n  lineHorizontalAlignLeft: 'group-first/steph:bg-transparent',\n\n  lineIncomplete: 's-bg-disabled',\n  lineComplete: 's-bg-primary',\n\n  content: 'last:mb-0 group-last/step:last:pb-0',\n  contentVertical: 'row-span-2 pb-32',\n  contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n  wrapper: 'w-full',\n  horizontal: 'flex',\n};\n\nexport const card = {\n  base: 'cursor-pointer overflow-hidden relative transition-all',\n  shadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',\n  selected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',\n  outline: 'absolute border-2 rounded-8 inset-0 transition-all',\n  outlineUnselected: 'border-transparent group-active:s-border-active',\n  outlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',\n  flat: 'border-2 rounded-4',\n  flatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n  flatSelected:\n    's-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active',\n  a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n  base: 'block relative h-24 w-44 cursor-pointer group focusable rounded-full',\n  disabled: 'pointer-events-none',\n  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n  trackActive: 's-bg-primary group-hover:s-bg-primary-hover',\n  trackInactive: 'bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]',\n  trackDisabled: 's-bg-disabled-subtle',\n  handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n  handleSelected: 'translate-x-20',\n  handleNotDisabled: 's-bg shadow-s',\n  handleDisabled: 's-bg-disabled',\n  a11y: 'sr-only',\n};\n\nexport const toaster = {\n  wrapper: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n  base: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n  content: 'w-full',\n};\n\nexport const toast = {\n  wrapper: 'relative overflow-hidden w-full',\n  base: 'flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all',\n  positive: 's-bg-positive-subtle s-border-positive-subtle s-text',\n  warning: 's-bg-warning-subtle s-border-warning-subtle s-text',\n  negative: 's-bg-negative-subtle s-border-negative-subtle s-text',\n  iconBase: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n  iconPositive: 's-icon-positive',\n  iconWarning: 's-icon-warning',\n  iconNegative: 's-icon-negative',\n  iconLoading: 'animate-bounce',\n  content: 'self-center mr-8 py-4 last-child:mb-0',\n  close: 'bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active',\n};\n\nexport const tabs = {\n  wrapper: 'inline-block border-b s-border mb-32',\n  base: 'inline-grid relative -mb-1',\n  selectionIndicator: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',\n};\n\nexport const tab = {\n  base: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary',\n  inactive: 's-text-subtle',\n  active: 's-text-link',\n  icon: 'mx-auto',\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};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n  cols1: 'grid-cols-1',\n  cols2: 'grid-cols-2',\n  cols3: 'grid-cols-3',\n  cols4: 'grid-cols-4',\n  cols5: 'grid-cols-5',\n  cols6: 'grid-cols-6',\n  cols7: 'grid-cols-7',\n  cols8: 'grid-cols-8',\n  cols9: 'grid-cols-9',\n};\n\nexport const buttonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n  wrapper: 'will-change-height s-text',\n  box: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8',\n  bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8',\n  chevron: 'inline-block align-middle s-icon',\n  chevronNonBox: 'ml-8',\n  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n  chevronExpand: '-rotate-180',\n  chevronCollapse: 'rotate-180',\n\n  // These are web component specific classes, using the ::part-selector:\n  elementsChevronDownTransform:\n    '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  elementsChevronUpTransform:\n    '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  elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n  elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n\n  expansion: 'overflow-hidden',\n  expansionNotExpanded: 'h-0 invisible',\n  button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline',\n  buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8',\n  contentWithTitle: 'pt-0',\n  title: 'flex w-full justify-between items-center',\n  titleType: 't4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n  primary:\n    's-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]',\n  secondary: 's-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active',\n  utility: 's-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n  destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',\n  pill: 's-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  disabled: 's-text-inverted s-bg-disabled',\n  quiet: 'bg-transparent s-text-link hover:s-bg-hover active:s-bg-active',\n  utilityQuiet: 's-text bg-transparent hover:s-bg-hover active:s-bg-active',\n  negativeQuiet: 'bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active',\n  loading: 's-text s-bg-subtle',\n  link: 's-text-link',\n};\n\nconst buttonTypes = {\n  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n  utility: `border rounded-4 ${buttonDefaultStyling}`,\n  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n  xsmall: 'py-6 px-16',\n  small: 'py-8 px-16',\n  medium: 'py-10 px-14',\n  large: 'py-12 px-16',\n  utility: 'py-[11px] px-[15px]',\n  smallUtility: 'py-[7px] px-[15px]',\n  pill: 'min-h-[44px] min-w-[44px]',\n  pillSmall: 'min-h-32 min-w-32',\n  link: 'p-0',\n};\n\nconst buttonTextSizes = {\n  medium: 'text-m leading-[24]',\n  xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n  inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n  quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n  // Buttontypes\n  secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n  secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n  secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n  linkAsButton: 'inline-block active:no-underline hover:no-underline focus:no-underline text-center',\n  a11y: 'sr-only',\n  fullWidth: 'w-full max-w-full',\n  contentWidth: 'max-w-max',\n};\n\nexport const buttonGroup = {\n  wrapper: 'inline-flex rounded-4 overflow-hidden',\n  raised: 'shadow-s',\n  vertical: 'flex-col',\n  nonOutlinedVertical: 'divide-y',\n  nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n  wrapper: 'relative s-text',\n  outlined: 'border hover:z-30',\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  outlinedUnselected: 'border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',\n  outlinedSelected: 'active:border-[--w-color-buttongroup-utility-border-selected]',\n  unselected:\n    's-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',\n  selected: 'z-30 bg-[--w-color-buttongroup-utility-background-selected]',\n};\n\nexport const modal = {\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] bg-[--w-black/25]',\n  base: 'pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n  content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n  transitionTitle: 'transition-all duration-300',\n  transitionTitleCenter: 'justify-self-center self-center',\n  transitionTitleColSpan: 'col-span-2',\n  title:\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 modalElement = {\n  // several items in here are 'resets' for the <dialog> element\n  dialogEl:\n    'bg-transparent backface-hidden w-unset h-unset max-w-unset max-h-unset p-0 m-auto border-0 inset-0 open:flex open:fixed sm:place-content-center sm:place-items-center items-end [--w-modal-max-height:80%] [--w-modal-width:640px]',\n  dialogInner:\n    'transition-all relative pb-safe-[32] sm:pb-32 shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] ease-in-out backface-hidden will-change-height rounded-8 sm:mx-16 s-bg flex flex-col overflow-hidden lt-sm:rounded-b-0',\n  contentSlot: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  header: 'relative pb-8',\n  headerTitleBar: 'pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!',\n  headerButton:\n    'sm:min-h-[32px] sm:min-w-[32px] min-h-[40px] min-w-[40px] text-m leading-[24] p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding font-bold focusable transition-colors ease-in-out',\n  headerButtonLeft:\n    '-ml-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  headerCloseButton:\n    '-mr-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  headerCloseButtonOnImage: `absolute right-8 top-8 z-10 s-color-inverted bg-[var(--w-black)/70] hover:bg-[var(--w-black)/85] active:bg-[var(--w-black)] s-text-inverted`,\n  headerTitle: 'mb-0 t3 self-center',\n  headerTitleWithBackButton: 'justify-self-center',\n  headerTitleWithoutBackButton: 'col-span-2',\n  headerTitleWithTopArea: 'pt-16 px-16 sm:px-32',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32 pt-24',\n};\n\nexport const alert = {\n  wrapper: 'flex p-16 border border-l-4 rounded-4 s-text',\n  willChangeHeight: 'will-change-height',\n  textWrapper: 'last-child:mb-0 text-s',\n  title: 'text-s',\n  icon: 'w-16 mr-8 min-w-16',\n  negative: 's-border-negative-subtle s-border-l-negative s-bg-negative-subtle',\n  negativeIcon: 's-icon-negative',\n  positive: 's-border-positive-subtle s-border-l-positive s-bg-positive-subtle',\n  positiveIcon: 's-icon-positive',\n  warning: 's-border-warning-subtle s-border-l-warning s-bg-warning-subtle',\n  warningIcon: 's-icon-warning',\n  info: 's-border-info-subtle s-border-l-info s-bg-info-subtle',\n  infoIcon: 's-icon-info',\n};\n\nexport const input = {\n  // wrapper classes\n  wrapper: 'relative',\n  // input classes\n  base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true\n  default: 'border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly\n  disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly\n  invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly\n  readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly\n  placeholder: 'placeholder:s-text-placeholder',\n  suffix: 'pr-40',\n  prefix: 'pl-[var(--w-prefix-width,_40px)]',\n  // textarea classes\n  textArea: 'min-h-[42] sm:min-h-[45]',\n};\n\nexport const select = {\n  base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current',\n  default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active',\n  disabled:\n    's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none',\n  invalid:\n    's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!',\n  readOnly: 's-text bg-transparent pl-0 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: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',\n  chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n  base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',\n  optional: 'pl-8 font-normal text-s s-text-subtle',\n};\n\nexport const helpText = {\n  base: 'text-xs mt-4 block',\n  color: 's-text-subtle',\n  colorInvalid: 's-text-negative',\n};\n\nconst prefixSuffixWrapper =\n  'absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n  wrapper: prefixSuffixWrapper + 'right-0',\n  wrapperWithLabel: 'w-max pr-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',\n};\n\nexport const prefix = {\n  wrapper: prefixSuffixWrapper + 'left-0',\n  wrapperWithLabel: 'w-max pl-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',\n};\n\nexport const breadcrumbs = {\n  wrapper: 'flex space-x-8',\n  text: 's-text',\n  link: 's-text-link',\n  separator: 'select-none s-icon',\n  a11y: 'sr-only',\n};\n\nexport const toggle = {\n  // wrapper classes\n  field: 'relative text-m', // true\n  wrapper: 'relative py-1', // true\n  wrapperRadioButtons: 'inline-flex font-bold rounded-8 focus-within:focusable', // isRadioButton && !isEqualWidth\n  wrapperRadioButtonsJustified: 'flex font-bold rounded-8 focus-within:focusable', // isRadioButton && isEqualWidth,\n\n  // group classes\n  radioButtonsGroup: 'group', // isRadioButton\n  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto', // isRadioButton && isEqualWidth\n\n  // input classes\n  input: 'peer',\n  a11y: 'sr-only',\n\n  // label classes\n  label:\n    'peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2', // !isRadioButton\n  labelBefore: 'before:content-[\"\"] before:block', // !isRadioButton && !isIndeterminate\n  checkbox:\n    'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover', // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled\n  checkboxInvalid:\n    'before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover', // isCheckbox && !isIndeterminate && isInvalid && !isDisabled\n  checkboxDisabled:\n    'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled', // isCheckbox && !isIndeterminate && !isInvalid && isDisabled\n  indeterminate:\n    'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover', // isCheckbox && isIndeterminate && !isInvalid && !isDisabled\n  indeterminateInvalid:\n    'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover', // isCheckbox && isIndeterminate && isInvalid && !isDisabled\n  indeterminateDisabled:\n    'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled', // isCheckbox && isIndeterminate && !isInvalid && isDisabled\n  radio:\n    'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover', // isRadio && !isDisabled && !isInvalid\n  radioInvalid:\n    'before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover', // isRadio && isInvalid && !isDisabled\n  radioDisabled:\n    'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]', // isRadio && !isInvalid && isDisabled\n  radioButtonsLabel:\n    'peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2', // isRadioButtons\n  radioButtonsRegular: 'text-s py-8 pl-12 pr-14', // isRadioButtons && !isSmall\n  radioButtonsSmall: 'text-xs py-[5px] px-[8px]', // isRadioButtons && isSmall\n};\n\nexport const deadToggle = {\n  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,\n  input: `${toggle.input} hidden`,\n  inputVue: 'hidden',\n  labelVue: '-mt-2',\n  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,\n  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,\n};\n\nexport const clickable = {\n  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n  label: 'antialiased block relative text-s font-bold s-text px-12 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  base: 'absolute left-0 right-0 pb-8 rounded-8 shadow-m',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8',\n  optionUnselected: 's-bg hover:s-bg-hover',\n  optionSelected: 's-bg-selected hover:s-bg-selected-hover',\n  textMatch: 'font-bold',\n  a11y: 'sr-only',\n};\n\nexport const attention = {\n  base: 'border-2 relative flex items-start',\n  tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8',\n  callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',\n  highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0',\n  popover:\n    'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0',\n\n  arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n  arrowDirectionLeftStart: '-left-[8px]',\n  arrowDirectionLeft: '-left-[8px]',\n  arrowDirectionLeftEnd: '-left-[8px]',\n  arrowDirectionRightStart: '-right-[8px]',\n  arrowDirectionRight: '-right-[8px]',\n  arrowDirectionRightEnd: '-right-[8px]',\n  arrowDirectionBottomStart: '-bottom-[8px]',\n  arrowDirectionBottom: '-bottom-[8px]',\n  arrowDirectionBottomEnd: '-bottom-[8px]',\n  arrowDirectionTopStart: '-top-[8px]',\n  arrowDirectionTop: '-top-[8px]',\n  arrowDirectionTopEnd: '-top-[8px]',\n  arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]',\n  arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n  arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]',\n  arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n\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 pagination = {\n  link: 'hover:no-underline focus:no-underline focusable inline-flex justify-center items-center transition-colors ease-in-out min-h-[44px] min-w-[44px] p-4 rounded-full border-0 hover:bg-clip-padding',\n  currentPage: 'block md:hidden p-8 font-bold',\n  icon: 's-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  containerNav: 'flex items-center justify-center p-8',\n  a11y: 'sr-only',\n  pages: 'hidden md:block s-text-link',\n  active: 's-bg-primary s-text-inverted',\n  notActive: 'hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n};\n", "import { classMap } from 'lit/directives/class-map.js';\n\nconst camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// Source: https://medium.com/@dayton-bobbitt/generating-attributes-for-litelement-properties-f972ef658137\nexport function kebabCaseAttributes(constructor) {\n  return class extends constructor {\n    static createProperty(name, options) {\n      let customOptions = options;\n\n      // derive the attribute name if not already defined or disabled\n      if (typeof options?.attribute === 'undefined' || options?.attribute === true) {\n        customOptions = Object.assign({}, options, {\n          attribute: camelCaseToKebabCase(name.toString()),\n        });\n      }\n\n      super.createProperty(name, customOptions);\n    }\n  };\n}\n\nexport function classes(defn) {\n  const classes = [];\n  for (const [key, value] of Object.entries(defn)) {\n    if (value) classes.push(key);\n  }\n  return classes.join(' ');\n}\n\nexport function fclasses(definition) {\n  const defn = {};\n  for (const [key, value] of Object.entries(definition)) {\n    for (const className of key.split(' ')) {\n      defn[className] = value;\n    }\n  }\n  return classMap(defn);\n}\n\nexport function generateRandomId() {\n  return `m${Math.random().toString(36).slice(2)}`;\n}\n"],
+  "sources": ["../../../packages/textfield/index.js", "../../../node_modules/.pnpm/@chbphone55+classnames@2.0.0/node_modules/@chbphone55/classnames/dist/index.m.js", "../../../node_modules/.pnpm/@warp-ds+css@2.0.1_@warp-ds+uno@2.0.2_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_2s4pctzvx7cgxzqlrreqkg4h34/node_modules/@warp-ds/css/component-classes/index.js", "../../../packages/utils/index.js"],
+  "sourcesContent": ["import { css, html } from 'lit';\n\nimport { classNames } from '@chbphone55/classnames';\nimport { input as ccInput, label as ccLabel, helpText as ccHelpText } from '@warp-ds/css/component-classes';\nimport WarpElement from '@warp-ds/elements-core';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { kebabCaseAttributes } from '../utils';\n\nclass WarpTextField extends kebabCaseAttributes(WarpElement) {\n  static properties = {\n    disabled: { type: Boolean },\n    invalid: { type: Boolean },\n    id: { type: String },\n    label: { type: String },\n    helpText: { type: String },\n    size: { type: String },\n    max: { type: Number },\n    min: { type: Number },\n    minLength: { type: Number },\n    maxLength: { type: Number },\n    name: { type: String },\n    pattern: { type: String },\n    placeholder: { type: String },\n    readOnly: { type: Boolean },\n    required: { type: Boolean },\n    type: { type: String },\n    value: { type: String },\n    _hasPrefix: { state: true },\n    _hasSuffix: { state: true },\n  };\n\n  // Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.\n  // ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,\n  // so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.\n  // https://stackoverflow.com/a/61631668\n  static styles = [\n    WarpElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n      ::slotted(:last-child) {\n        margin-bottom: 0px !important;\n      }\n    `,\n  ];\n\n  constructor() {\n    super();\n    this.type = 'text';\n  }\n\n  get _inputStyles() {\n    return classNames([\n      ccInput.base,\n      this._hasSuffix && ccInput.suffix,\n      this._hasPrefix && ccInput.prefix,\n      !this.invalid && !this.disabled && !this.readOnly && ccInput.default,\n      this.invalid && !this.disabled && !this.readOnly && ccInput.invalid,\n      !this.invalid && this.disabled && !this.readOnly && ccInput.disabled,\n      !this.invalid && !this.disabled && this.readOnly && ccInput.readOnly,\n    ]);\n  }\n\n  get _helpTextStyles() {\n    return classNames([ccHelpText.base, this.invalid ? ccHelpText.colorInvalid : ccHelpText.color]);\n  }\n\n  get _label() {\n    if (this.label) {\n      return html`<label for=\"${this._id}\" class=${ccLabel.base}>${this.label}</label>`;\n    }\n  }\n\n  get _helpId() {\n    if (this.helpText) return `${this._id}__hint`;\n  }\n\n  get _id() {\n    return 'textfield';\n  }\n\n  get _error() {\n    if (this.invalid && this._helpId) return this._helpId;\n  }\n\n  handler(e) {\n    const { name, value } = e.target;\n    const event = new CustomEvent(e.type, {\n      detail: {\n        name,\n        value,\n        target: e.target,\n      },\n    });\n    this.dispatchEvent(event);\n  }\n\n  prefixSlotChange(e) {\n    const el = this.renderRoot.querySelector('slot[name=prefix]');\n    const affixes = el.assignedElements();\n    if (affixes.length) this._hasPrefix = true;\n  }\n\n  suffixSlotChange(e) {\n    const el = this.renderRoot.querySelector('slot[name=suffix]');\n    const affixes = el.assignedElements();\n    if (affixes.length) this._hasSuffix = true;\n  }\n\n  render() {\n    return html`\n      ${this._label}\n      <div class=\"${ccInput.wrapper}\">\n        <slot @slotchange=\"${this.prefixSlotChange}\" name=\"prefix\"></slot>\n        <input\n          class=\"${this._inputStyles}\"\n          type=\"${this.type}\"\n          min=\"${ifDefined(this.min)}\"\n          max=\"${ifDefined(this.max)}\"\n          size=\"${ifDefined(this.size)}\"\n          minlength=\"${ifDefined(this.minLength)}\"\n          maxlength=\"${ifDefined(this.maxLength)}\"\n          name=\"${ifDefined(this.name)}\"\n          pattern=\"${ifDefined(this.pattern)}\"\n          placeholder=\"${ifDefined(this.placeholder)}\"\n          value=\"${ifDefined(this.value)}\"\n          aria-describedby=\"${ifDefined(this._helpId)}\"\n          aria-errormessage=\"${ifDefined(this._error)}\"\n          aria-invalid=\"${ifDefined(this.invalid)}\"\n          id=\"${this._id}\"\n          ?disabled=\"${this.disabled}\"\n          ?readonly=\"${this.readOnly}\"\n          ?required=\"${this.required}\"\n          @blur=\"${this.handler}\"\n          @change=\"${this.handler}\"\n          @focus=\"${this.handler}\" />\n        <slot @slotchange=\"${this.suffixSlotChange}\" name=\"suffix\"></slot>\n      </div>\n      ${this.helpText && html`<div class=\"${this._helpTextStyles}\" id=\"${this._helpId}\">${this.helpText}</div>`}\n    `;\n  }\n}\n\nif (!customElements.get('w-textfield')) {\n  customElements.define('w-textfield', WarpTextField);\n}\n\nexport { WarpTextField };\n", "var r=function(){for(var t=[],n=arguments.length;n--;)t[n]=arguments[n];return t.reduce(function(t,n){return t.concat(\"string\"==typeof n?n:Array.isArray(n)?r.apply(void 0,n):\"object\"==typeof n&&n?Object.keys(n).map(function(r){return n[r]?r:\"\"}):\"\")},[]).join(\" \")};export{r as classNames};\n", "export const pageIndicator = {\n  wrapper: 'flex space-x-8 p-8',\n  dot: 'h-8 w-8 rounded-full',\n  inactive: 's-bg-disabled-subtle hover:bg-[--w-s-icon-subtle]',\n  active: 'bg-[--w-s-icon-selected]',\n};\n\nexport const badge = {\n  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n  neutral: 'bg-[--w-color-badge-neutral-background] s-text',\n  info: 'bg-[--w-color-badge-info-background] s-text',\n  positive: 'bg-[--w-color-badge-positive-background] s-text',\n  warning: 'bg-[--w-color-badge-warning-background] s-text',\n  negative: 'bg-[--w-color-badge-negative-background] s-text',\n  disabled: 's-bg-disabled s-text',\n  price: 'bg-[--w-black/70] s-text-inverted-static',\n  sponsored: 'bg-[--w-color-badge-sponsored-background] s-text',\n  positionBase: 'absolute backdrop-blur',\n  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n  wrapper: 'touch-pan-y relative w-full h-44 py-2',\n  track: 'absolute s-bg-disabled-subtle h-4 top-20 rounded-4 w-full',\n  trackDisabled: 'pointer-events-none',\n  activeTrack: 'absolute h-6 top-[19px] rounded-4',\n  activeTrackEnabled: 's-bg-primary',\n  activeTrackDisabled: 's-bg-disabled pointer-events-none',\n  thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n  thumbEnabled:\n    'border-2 shadow-[--w-shadow-slider] cursor-pointer s-bg-primary s-border-primary hover:s-bg-primary-hover hover:s-border-primary-hover hover:shadow-[--w-shadow-slider-handle-hover] active:s-bg-primary-active active:s-border-primary-active active:shadow-[--w-shadow-slider-handle-active] focus:shadow-[--w-shadow-slider-handle-hover] focus:s-border-primary-hover focus:s-bg-primary-hover',\n  thumbDisabled: 's-bg-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n  base: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n  info: 's-bg-info-subtle',\n  neutral: 's-surface-sunken',\n  bordered: 'border-2 s-border s-bg',\n};\n\nexport const pill = {\n  wrapper: 'flex items-center',\n  button: 'inline-flex items-center focusable text-xs transition-all',\n  suggestion:\n    'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold',\n  filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted',\n  label: 'pl-12 py-8 rounded-l-full',\n  labelWithoutClose: 'pr-12 rounded-r-full',\n  labelWithClose: 'pr-2',\n  close: 'pr-12 pl-4 py-8 rounded-r-full',\n  a11y: 'sr-only',\n};\n\nexport const step = {\n  base: 'group/step',\n  vertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n  horizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n  alignLeft: 'grid-cols-[20px_1fr]',\n  alignRight: 'grid-cols-[1fr_20px] text-right',\n\n  dot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',\n  dotAlignRight: 'col-start-2',\n  dotHorizontal: 'row-start-2 justify-self-end',\n  dotActive: 's-border-primary s-bg-primary',\n  dotIncomplete: 's-border s-bg',\n\n  line: 'group-last/stepv:hidden transition-colors duration-300',\n  lineVertical: 'w-2 h-full justify-self-center',\n  lineAlignRight: 'col-start-2',\n  lineHorizontal: 'h-2 w-full row-start-2',\n  lineHorizontalAlignRight: 'group-last/steph:bg-transparent',\n  lineHorizontalAlignLeft: 'group-first/steph:bg-transparent',\n\n  lineIncomplete: 's-bg-disabled',\n  lineComplete: 's-bg-primary',\n\n  content: 'last:mb-0 group-last/step:last:pb-0',\n  contentVertical: 'row-span-2 pb-32',\n  contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n  wrapper: 'w-full',\n  horizontal: 'flex',\n};\n\nexport const card = {\n  base: 'cursor-pointer overflow-hidden relative transition-all',\n  shadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',\n  selected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',\n  outline: 'absolute border-2 rounded-8 inset-0 transition-all',\n  outlineUnselected: 'border-transparent group-active:s-border-active',\n  outlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',\n  flat: 'border-2 rounded-4',\n  flatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n  flatSelected:\n    's-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active',\n  a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n  base: 'block relative h-24 w-44 cursor-pointer group focusable rounded-full',\n  disabled: 'pointer-events-none',\n  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n  trackActive: 's-bg-primary group-hover:s-bg-primary-hover',\n  trackInactive: 'bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]',\n  trackDisabled: 's-bg-disabled-subtle',\n  handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n  handleSelected: 'translate-x-20',\n  handleNotDisabled: 's-bg shadow-s',\n  handleDisabled: 's-bg-disabled',\n  a11y: 'sr-only',\n};\n\nexport const toaster = {\n  wrapper: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n  base: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n  content: 'w-full',\n};\n\nexport const toast = {\n  wrapper: 'relative overflow-hidden w-full',\n  base: 'flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all',\n  positive: 's-bg-positive-subtle s-border-positive-subtle s-text',\n  warning: 's-bg-warning-subtle s-border-warning-subtle s-text',\n  negative: 's-bg-negative-subtle s-border-negative-subtle s-text',\n  iconBase: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n  iconPositive: 's-icon-positive',\n  iconWarning: 's-icon-warning',\n  iconNegative: 's-icon-negative',\n  iconLoading: 'animate-bounce',\n  content: 'self-center mr-8 py-4 last-child:mb-0',\n  close: 'bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active',\n};\n\nexport const tabs = {\n  wrapper: 'inline-block border-b s-border mb-32',\n  base: 'inline-grid relative -mb-1',\n  selectionIndicator: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',\n};\n\nexport const tab = {\n  base: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary',\n  inactive: 's-text-subtle',\n  active: 's-text-link s-border-selected',\n  icon: 'mx-auto',\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};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n  cols1: 'grid-cols-1',\n  cols2: 'grid-cols-2',\n  cols3: 'grid-cols-3',\n  cols4: 'grid-cols-4',\n  cols5: 'grid-cols-5',\n  cols6: 'grid-cols-6',\n  cols7: 'grid-cols-7',\n  cols8: 'grid-cols-8',\n  cols9: 'grid-cols-9',\n};\n\nexport const buttonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n  wrapper: 'will-change-height s-text',\n  box: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8',\n  bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8',\n  chevron: 'inline-block align-middle s-icon',\n  chevronNonBox: 'ml-8',\n  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n  chevronExpand: '-rotate-180',\n  chevronCollapse: 'rotate-180',\n\n  // These are web component specific classes, using the ::part-selector:\n  elementsChevronDownTransform:\n    '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  elementsChevronUpTransform:\n    '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  elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n  elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n\n  expansion: 'overflow-hidden',\n  expansionNotExpanded: 'h-0 invisible',\n  button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline',\n  buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8',\n  contentWithTitle: 'pt-0',\n  title: 'flex w-full justify-between items-center',\n  titleType: 't4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n  primary:\n    's-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]',\n  secondary: 's-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active',\n  utility: 's-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',\n  destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',\n  pill: 's-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  disabled: 's-text-inverted s-bg-disabled',\n  quiet: 'bg-transparent s-text-link hover:s-bg-hover active:s-bg-active',\n  utilityQuiet: 's-text bg-transparent hover:s-bg-hover active:s-bg-active',\n  negativeQuiet: 'bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active',\n  loading: 's-text s-bg-subtle',\n  link: 's-text-link',\n};\n\nconst buttonTypes = {\n  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n  utility: `border rounded-4 ${buttonDefaultStyling}`,\n  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n  xsmall: 'py-6 px-16',\n  small: 'py-8 px-16',\n  medium: 'py-10 px-14',\n  large: 'py-12 px-16',\n  utility: 'py-[11px] px-[15px]',\n  smallUtility: 'py-[7px] px-[15px]',\n  pill: 'min-h-[44px] min-w-[44px]',\n  pillSmall: 'min-h-32 min-w-32',\n  link: 'p-0',\n};\n\nconst buttonTextSizes = {\n  medium: 'text-m leading-[24]',\n  xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n  inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n  quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n  // Buttontypes\n  secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n  secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n  secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n  linkAsButton: 'inline-block active:no-underline hover:no-underline focus:no-underline text-center',\n  a11y: 'sr-only',\n  fullWidth: 'w-full max-w-full',\n  contentWidth: 'max-w-max',\n};\n\nexport const buttonGroup = {\n  wrapper: 'inline-flex rounded-4 overflow-hidden',\n  raised: 'shadow-s',\n  vertical: 'flex-col',\n  nonOutlinedVertical: 'divide-y',\n  nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n  wrapper: 'relative s-text',\n  outlined: 'border hover:z-30',\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  outlinedUnselected: 'border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',\n  outlinedSelected: 'active:border-[--w-color-buttongroup-utility-border-selected]',\n  unselected:\n    's-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',\n  selected: 'z-30 bg-[--w-color-buttongroup-utility-background-selected]',\n};\n\nexport const modal = {\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] bg-[--w-black/25]',\n  base: 'pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n  content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n  transitionTitle: 'transition-all duration-300',\n  transitionTitleCenter: 'justify-self-center self-center',\n  transitionTitleColSpan: 'col-span-2',\n  title:\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 modalElement = {\n  // several items in here are 'resets' for the <dialog> element\n  dialogEl:\n    'bg-transparent backface-hidden w-unset h-unset max-w-unset max-h-unset p-0 m-auto border-0 inset-0 open:flex open:fixed sm:place-content-center sm:place-items-center items-end [--w-modal-max-height:80%] [--w-modal-width:640px]',\n  dialogInner:\n    'transition-all relative pb-safe-[32] sm:pb-32 shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] ease-in-out backface-hidden will-change-height rounded-8 sm:mx-16 s-bg flex flex-col overflow-hidden lt-sm:rounded-b-0',\n  contentSlot: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  header: 'relative pb-8',\n  headerTitleBar: 'pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!',\n  headerButton:\n    'sm:min-h-[32px] sm:min-w-[32px] min-h-[40px] min-w-[40px] text-m leading-[24] p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding font-bold focusable transition-colors ease-in-out',\n  headerButtonLeft:\n    '-ml-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  headerCloseButton:\n    '-mr-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  headerCloseButtonOnImage: `absolute right-8 top-8 z-10 s-color-inverted bg-[var(--w-black)/70] hover:bg-[var(--w-black)/85] active:bg-[var(--w-black)] s-text-inverted`,\n  headerTitle: 'mb-0 t3 self-center',\n  headerTitleWithBackButton: 'justify-self-center',\n  headerTitleWithoutBackButton: 'col-span-2',\n  headerTitleWithTopArea: 'pt-16 px-16 sm:px-32',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32 pt-24',\n};\n\nexport const alert = {\n  wrapper: 'flex p-16 border border-l-4 rounded-4 s-text',\n  willChangeHeight: 'will-change-height',\n  textWrapper: 'last-child:mb-0 text-s',\n  title: 'text-s',\n  icon: 'w-16 mr-8 min-w-16',\n  negative: 's-border-negative-subtle s-border-l-negative s-bg-negative-subtle',\n  negativeIcon: 's-icon-negative',\n  positive: 's-border-positive-subtle s-border-l-positive s-bg-positive-subtle',\n  positiveIcon: 's-icon-positive',\n  warning: 's-border-warning-subtle s-border-l-warning s-bg-warning-subtle',\n  warningIcon: 's-icon-warning',\n  info: 's-border-info-subtle s-border-l-info s-bg-info-subtle',\n  infoIcon: 's-icon-info',\n};\n\nexport const input = {\n  // wrapper classes\n  wrapper: 'relative',\n  // input classes\n  base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true\n  default: 'border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly\n  disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly\n  invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly\n  readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly\n  placeholder: 'placeholder:s-text-placeholder',\n  suffix: 'pr-40',\n  prefix: 'pl-[var(--w-prefix-width,_40px)]',\n  // textarea classes\n  textArea: 'min-h-[42] sm:min-h-[45]',\n};\n\nexport const select = {\n  base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current',\n  default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active',\n  disabled:\n    's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none',\n  invalid:\n    's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!',\n  readOnly: 's-text bg-transparent pl-0 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: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',\n  chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n  base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',\n  optional: 'pl-8 font-normal text-s s-text-subtle',\n};\n\nexport const helpText = {\n  base: 'text-xs mt-4 block',\n  color: 's-text-subtle',\n  colorInvalid: 's-text-negative',\n};\n\nconst prefixSuffixWrapper =\n  'absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n  wrapper: prefixSuffixWrapper + 'right-0',\n  wrapperWithLabel: 'w-max pr-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',\n};\n\nexport const prefix = {\n  wrapper: prefixSuffixWrapper + 'left-0',\n  wrapperWithLabel: 'w-max pl-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',\n};\n\nexport const breadcrumbs = {\n  wrapper: 'flex space-x-8',\n  text: 's-text',\n  link: 's-text-link',\n  separator: 'select-none s-icon',\n  a11y: 'sr-only',\n};\n\nexport const toggle = {\n  // wrapper classes\n  field: 'relative text-m', // true\n  wrapper: 'relative py-1', // true\n  wrapperRadioButtons: 'inline-flex font-bold rounded-8 focus-within:focusable', // isRadioButton && !isEqualWidth\n  wrapperRadioButtonsJustified: 'flex font-bold rounded-8 focus-within:focusable', // isRadioButton && isEqualWidth,\n\n  // group classes\n  radioButtonsGroup: 'group', // isRadioButton\n  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto', // isRadioButton && isEqualWidth\n\n  // input classes\n  input: 'peer',\n  a11y: 'sr-only',\n\n  // label classes\n  label:\n    'peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2', // !isRadioButton\n  labelBefore: 'before:content-[\"\"] before:block', // !isRadioButton && !isIndeterminate\n  checkbox:\n    'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover', // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled\n  checkboxInvalid:\n    'before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover', // isCheckbox && !isIndeterminate && isInvalid && !isDisabled\n  checkboxDisabled:\n    'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-icon-toggle-checked))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled', // isCheckbox && !isIndeterminate && !isInvalid && isDisabled\n  indeterminate:\n    'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover', // isCheckbox && isIndeterminate && !isInvalid && !isDisabled\n  indeterminateInvalid:\n    'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover', // isCheckbox && isIndeterminate && isInvalid && !isDisabled\n  indeterminateDisabled:\n    'before:content-[\"\u2013\"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled', // isCheckbox && isIndeterminate && !isInvalid && isDisabled\n  radio:\n    'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover', // isRadio && !isDisabled && !isInvalid\n  radioInvalid:\n    'before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover', // isRadio && isInvalid && !isDisabled\n  radioDisabled:\n    'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]', // isRadio && !isInvalid && isDisabled\n  radioButtonsLabel:\n    'peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2', // isRadioButtons\n  radioButtonsRegular: 'text-s py-8 pl-12 pr-14', // isRadioButtons && !isSmall\n  radioButtonsSmall: 'text-xs py-[5px] px-[8px]', // isRadioButtons && isSmall\n};\n\nexport const deadToggle = {\n  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,\n  input: `${toggle.input} hidden`,\n  inputVue: 'hidden',\n  labelVue: '-mt-2',\n  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,\n  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,\n};\n\nexport const clickable = {\n  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n  label: 'antialiased block relative text-s font-bold s-text px-12 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  base: 'absolute left-0 right-0 s-bg pb-4 rounded-8 overflow-hidden shadow-m',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8',\n  optionUnselected: 'hover:s-bg-hover',\n  optionSelected: 's-bg-selected hover:s-bg-selected-hover',\n  textMatch: 'font-bold',\n  a11y: 'sr-only',\n};\n\nexport const attention = {\n  base: 'border-2 relative flex items-start',\n  tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8',\n  callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',\n  highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0',\n  popover:\n    'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0',\n\n  arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n  arrowDirectionLeftStart: '-left-[8px]',\n  arrowDirectionLeft: '-left-[8px]',\n  arrowDirectionLeftEnd: '-left-[8px]',\n  arrowDirectionRightStart: '-right-[8px]',\n  arrowDirectionRight: '-right-[8px]',\n  arrowDirectionRightEnd: '-right-[8px]',\n  arrowDirectionBottomStart: '-bottom-[8px]',\n  arrowDirectionBottom: '-bottom-[8px]',\n  arrowDirectionBottomEnd: '-bottom-[8px]',\n  arrowDirectionTopStart: '-top-[8px]',\n  arrowDirectionTop: '-top-[8px]',\n  arrowDirectionTopEnd: '-top-[8px]',\n  arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]',\n  arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n  arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]',\n  arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',\n\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 pagination = {\n  link: 'hover:no-underline focus:no-underline focusable inline-flex justify-center items-center transition-colors ease-in-out min-h-[44px] min-w-[44px] p-4 rounded-full border-0 hover:bg-clip-padding',\n  currentPage: 'block md:hidden p-8 font-bold',\n  icon: 's-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n  containerNav: 'flex items-center justify-center p-8',\n  a11y: 'sr-only',\n  pages: 'hidden md:block s-text-link',\n  active: 's-bg-primary s-text-inverted',\n  notActive: 'hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',\n};\n", "import { classMap } from 'lit/directives/class-map.js';\n\nconst camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// Source: https://medium.com/@dayton-bobbitt/generating-attributes-for-litelement-properties-f972ef658137\nexport function kebabCaseAttributes(constructor) {\n  return class extends constructor {\n    static createProperty(name, options) {\n      let customOptions = options;\n\n      // derive the attribute name if not already defined or disabled\n      if (typeof options?.attribute === 'undefined' || options?.attribute === true) {\n        customOptions = Object.assign({}, options, {\n          attribute: camelCaseToKebabCase(name.toString()),\n        });\n      }\n\n      super.createProperty(name, customOptions);\n    }\n  };\n}\n\nexport function classes(defn) {\n  const classes = [];\n  for (const [key, value] of Object.entries(defn)) {\n    if (value) classes.push(key);\n  }\n  return classes.join(' ');\n}\n\nexport function fclasses(definition) {\n  const defn = {};\n  for (const [key, value] of Object.entries(definition)) {\n    for (const className of key.split(' ')) {\n      defn[className] = value;\n    }\n  }\n  return classMap(defn);\n}\n\nexport function generateRandomId() {\n  return `m${Math.random().toString(36).slice(2)}`;\n}\n"],
   "mappings": "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",
   "names": ["t", "n", "r"]
 }

package/dist/packages/toast/index.js

@@ -732,9 +732,9 @@ var require_moo = __commonJS({
   }
 });
 
-// node_modules/.pnpm/@messageformat+parser@5.1.0/node_modules/@messageformat/parser/lib/lexer.js
+// node_modules/.pnpm/@messageformat+parser@5.1.1/node_modules/@messageformat/parser/lib/lexer.js
 var require_lexer = __commonJS({
-  "node_modules/.pnpm/@messageformat+parser@5.1.0/node_modules/@messageformat/parser/lib/lexer.js"(exports) {
+  "node_modules/.pnpm/@messageformat+parser@5.1.1/node_modules/@messageformat/parser/lib/lexer.js"(exports) {
     "use strict";
     var __importDefault = exports && exports.__importDefault || function(mod) {
       return mod && mod.__esModule ? mod : { "default": mod };
@@ -747,7 +747,7 @@ var require_lexer = __commonJS({
         doubleapos: { match: "''", value: () => "'" },
         quoted: {
           lineBreaks: true,
-          match: /'[{}#](?:[^]*?[^'])?'(?!')/u,
+          match: /'[{}#](?:[^']|'')*'(?!')/u,
           value: (src) => src.slice(1, -1).replace(/''/g, "'")
         },
         argument: {
@@ -799,12 +799,13 @@ var require_lexer = __commonJS({
   }
 });
 
-// node_modules/.pnpm/@messageformat+parser@5.1.0/node_modules/@messageformat/parser/lib/parser.js
+// node_modules/.pnpm/@messageformat+parser@5.1.1/node_modules/@messageformat/parser/lib/parser.js
 var require_parser = __commonJS({
-  "node_modules/.pnpm/@messageformat+parser@5.1.0/node_modules/@messageformat/parser/lib/parser.js"(exports) {
+  "node_modules/.pnpm/@messageformat+parser@5.1.1/node_modules/@messageformat/parser/lib/parser.js"(exports) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.parse = exports.ParseError = void 0;
+    exports.ParseError = void 0;
+    exports.parse = parse2;
     var lexer_js_1 = require_lexer();
     var getContext = (lt) => ({
       offset: lt.offset,
@@ -870,8 +871,9 @@ var require_parser = __commonJS({
       }
       checkSelectKey(lt, type, key) {
         if (key[0] === "=") {
-          if (type === "select")
+          if (type === "select") {
             throw new ParseError(lt, `The case ${key} is not valid with select`);
+          }
         } else if (type !== "select") {
           const keys = type === "plural" ? this.cardinalKeys : this.ordinalKeys;
           if (this.strictPluralKeys && keys.length > 0 && !keys.includes(key)) {
@@ -889,10 +891,12 @@ var require_parser = __commonJS({
         for (const lt of this.lexer) {
           switch (lt.type) {
             case "offset":
-              if (type === "select")
+              if (type === "select") {
                 throw new ParseError(lt, "Unexpected plural offset for select");
-              if (sel.cases.length > 0)
+              }
+              if (sel.cases.length > 0) {
                 throw new ParseError(lt, "Plural offset must be set before cases");
+              }
               sel.pluralOffset = Number(lt.value);
               ctx.text += lt.text;
               ctx.lineBreaks += lt.lineBreaks;
@@ -932,11 +936,13 @@ var require_parser = __commonJS({
             const end = this.lexer.next();
             if (!end)
               throw new ParseError(null, "Unexpected message end");
-            if (end.type !== "end")
+            if (end.type !== "end") {
               throw new ParseError(end, `Unexpected lexer token: ${end.type}`);
+            }
             ctx.text += end.text;
-            if (isSelectType(argType.value.toLowerCase()))
+            if (isSelectType(argType.value.toLowerCase())) {
               throw new ParseError(argType, `Invalid type identifier: ${argType.value}`);
+            }
             return {
               type: "function",
               arg: lt.value,
@@ -950,8 +956,9 @@ var require_parser = __commonJS({
               throw new ParseError(argType, msg);
             }
             let param = this.parseBody(this.strict ? false : inPlural);
-            if (this.strict && param.length > 0)
+            if (this.strict && param.length > 0) {
               param = strictArgStyleParam(lt, param);
+            }
             return {
               type: "function",
               arg: lt.value,
@@ -961,10 +968,11 @@ var require_parser = __commonJS({
             };
           }
           case "select":
-            if (isSelectType(argType.value))
+            if (isSelectType(argType.value)) {
               return this.parseSelect(lt, inPlural, ctx, argType.value);
-            else
+            } else {
               throw new ParseError(argType, `Unexpected select type ${argType.value}`);
+            }
           default:
             throw new ParseError(argType, `Unexpected lexer token: ${argType.type}`);
         }
@@ -1011,7 +1019,6 @@ var require_parser = __commonJS({
       const parser = new Parser(src, options);
       return parser.parse();
     }
-    exports.parse = parse2;
   }
 });
 
@@ -1028,14 +1035,14 @@ var r = function() {
   }, []).join(" ");
 };
 
-// node_modules/.pnpm/@lingui+core@4.11.2/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@5.1.2_@lingui+babel-plugin-lingui-macro@5.1.2_babel-plugin-macros@3.1.0_typescri_g2ngrxg2kfutsfck3yn2icllca/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
-// node_modules/.pnpm/@lingui+message-utils@4.11.2/node_modules/@lingui/message-utils/dist/compileMessage.mjs
+// node_modules/.pnpm/@lingui+message-utils@5.1.2/node_modules/@lingui/message-utils/dist/compileMessage.mjs
 var import_parser = __toESM(require_parser(), 1);
 function processTokens(tokens, mapText) {
   if (!tokens.filter((token) => token.type !== "content").length) {
-    return tokens.map((token) => mapText(token.value)).join("");
+    return tokens.map((token) => mapText(token.value));
   }
   return tokens.map((token) => {
     var _a;
@@ -1075,11 +1082,11 @@ function compileMessage(message, mapText = (v) => v) {
     console.error(`${e.message} 
 
 Message: ${message}`);
-    return message;
+    return [message];
   }
 }
 
-// node_modules/.pnpm/@lingui+core@4.11.2/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@5.1.2_@lingui+babel-plugin-lingui-macro@5.1.2_babel-plugin-macros@3.1.0_typescri_g2ngrxg2kfutsfck3yn2icllca/node_modules/@lingui/core/dist/index.mjs
 var isString = (s) => typeof s === "string";
 var isFunction = (f) => typeof f === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -1130,7 +1137,7 @@ function cacheKey(type, locales, options) {
   const localeKey = locales.join("-");
   return `${type}-${localeKey}-${JSON.stringify(options)}`;
 }
-var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g;
+var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/;
 var OCTOTHORPE_PH = "%__lingui_octothorpe__%";
 var getDefaultFormats = (locale, passedLocales, formats = {}) => {
   const locales = passedLocales || locale;
@@ -1262,7 +1269,11 @@ var I18n = class extends EventEmitter {
     __publicField2(this, "_localeData", {});
     __publicField2(this, "_messages", {});
     __publicField2(this, "_missing");
+    __publicField2(this, "_messageCompiler");
     __publicField2(this, "t", this._.bind(this));
+    if (true) {
+      this.setMessagesCompiler(compileMessage);
+    }
     if (params.missing != null)
       this._missing = params.missing;
     if (params.messages != null)
@@ -1298,6 +1309,25 @@ var I18n = class extends EventEmitter {
       Object.assign(maybeLocaleData, localeData);
     }
   }
+  /**
+   * Registers a `MessageCompiler` to enable the use of uncompiled catalogs at runtime.
+   *
+   * In production builds, the `MessageCompiler` is typically excluded to reduce bundle size.
+   * By default, message catalogs should be precompiled during the build process. However,
+   * if you need to compile catalogs at runtime, you can use this method to set a message compiler.
+   *
+   * Example usage:
+   *
+   * ```ts
+   * import { compileMessage } from "@lingui/message-utils/compileMessage";
+   *
+   * i18n.setMessagesCompiler(compileMessage);
+   * ```
+   */
+  setMessagesCompiler(compiler) {
+    this._messageCompiler = compiler;
+    return this;
+  }
   /**
    * @deprecated Plurals automatically used from Intl.PluralRules you can safely remove this call. Deprecated in v4
    */
@@ -1369,8 +1399,20 @@ var I18n = class extends EventEmitter {
       this.emit("missing", { id, locale: this._locale });
     }
     let translation = messageForId || message || id;
-    if (true) {
-      translation = isString(translation) ? compileMessage(translation) : translation;
+    if (isString(translation)) {
+      if (this._messageCompiler) {
+        translation = this._messageCompiler(translation);
+      } else {
+        console.warn(`Uncompiled message detected! Message:
+
+> ${translation}
+
+That means you use raw catalog or your catalog doesn't have a translation for the message and fallback was used.
+ICU features such as interpolation and plurals will not work properly for that message. 
+
+Please compile your catalog first. 
+`);
+      }
     }
     if (isString(translation) && UNICODE_REGEX.test(translation))
       return JSON.parse(`"${translation}"`);
@@ -1394,7 +1436,7 @@ function setupI18n(params = {}) {
 }
 var i18n = setupI18n();
 
-// node_modules/.pnpm/@warp-ds+css@2.0.0_@warp-ds+uno@2.0.0_unocss@0.62.0_postcss@8.4.41_rollup@4.20.0_vite@5.3.3_@_vyiy5vwpqfzwy5hpmfkwp3zmle/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@2.0.1_@warp-ds+uno@2.0.2_unocss@0.62.0_postcss@8.5.1_rollup@4.32.1_vite@5.3.3_@t_2s4pctzvx7cgxzqlrreqkg4h34/node_modules/@warp-ds/css/component-classes/index.js
 var toaster = {
   wrapper: "fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none",
   base: "grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none",
@@ -1714,14 +1756,14 @@ var collapse = (el, done) => {
 // packages/toast/toast.js
 import { when } from "lit/directives/when.js";
 
-// node_modules/.pnpm/@warp-ds+icons@2.4.0/node_modules/@warp-ds/icons/dist/elements/warning-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.5.0-next.1/node_modules/@warp-ds/icons/dist/elements/warning-16.js
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
-var messages = JSON.parse('{"icon.title.warning":"Varseltrekant med utropstegn"}');
-var messages2 = JSON.parse('{"icon.title.warning":"Warning triangle with exclamation point"}');
-var messages3 = JSON.parse('{"icon.title.warning":"Varoituskolmio, jonka sis\xE4ll\xE4 on huutomerkki"}');
-var messages4 = JSON.parse('{"icon.title.warning":"Advarselstrekant med et udr\xE5bstegn"}');
-var messages5 = JSON.parse('{"icon.title.warning":"Varningstriangel med utropstecken"}');
+var messages = JSON.parse('{"icon.title.warning":["Varseltrekant med utropstegn"]}');
+var messages2 = JSON.parse('{"icon.title.warning":["Warning triangle with exclamation point"]}');
+var messages3 = JSON.parse('{"icon.title.warning":["Varoituskolmio, jonka sis\xE4ll\xE4 on huutomerkki"]}');
+var messages4 = JSON.parse('{"icon.title.warning":["Advarselstrekant med et udr\xE5bstegn"]}');
+var messages5 = JSON.parse('{"icon.title.warning":["Varningstriangel med utropstecken"]}');
 var supportedLocales = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale2 = "en";
 var detectByBrand = () => {
@@ -1808,14 +1850,14 @@ if (!customElements.get("w-icon-warning-16")) {
   customElements.define("w-icon-warning-16", IconWarning16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.4.0/node_modules/@warp-ds/icons/dist/elements/error-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.5.0-next.1/node_modules/@warp-ds/icons/dist/elements/error-16.js
 import { LitElement as LitElement2 } from "lit";
 import { unsafeStatic as unsafeStatic2, html as html2 } from "lit/static-html.js";
-var messages6 = JSON.parse('{"icon.title.error":"\xC5ttekant med utropstegn"}');
-var messages22 = JSON.parse('{"icon.title.error":"Octagon with exclamation point"}');
-var messages32 = JSON.parse('{"icon.title.error":"Kahdeksankulmio, jonka sis\xE4ll\xE4 on huutomerkki"}');
-var messages42 = JSON.parse('{"icon.title.error":"Ottekant med et udr\xE5bstegn"}');
-var messages52 = JSON.parse('{"icon.title.error":"Oktagon med utropstecken"}');
+var messages6 = JSON.parse('{"icon.title.error":["\xC5ttekant med utropstegn"]}');
+var messages22 = JSON.parse('{"icon.title.error":["Octagon with exclamation point"]}');
+var messages32 = JSON.parse('{"icon.title.error":["Kahdeksankulmio, jonka sis\xE4ll\xE4 on huutomerkki"]}');
+var messages42 = JSON.parse('{"icon.title.error":["Ottekant med et udr\xE5bstegn"]}');
+var messages52 = JSON.parse('{"icon.title.error":["Oktagon med utropstecken"]}');
 var supportedLocales2 = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale3 = "en";
 var detectByBrand2 = () => {
@@ -1902,14 +1944,14 @@ if (!customElements.get("w-icon-error-16")) {
   customElements.define("w-icon-error-16", IconError16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.4.0/node_modules/@warp-ds/icons/dist/elements/success-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.5.0-next.1/node_modules/@warp-ds/icons/dist/elements/success-16.js
 import { LitElement as LitElement3 } from "lit";
 import { unsafeStatic as unsafeStatic3, html as html3 } from "lit/static-html.js";
-var messages7 = JSON.parse('{"icon.title.success":"Sirkel med sjekkmerke"}');
-var messages23 = JSON.parse('{"icon.title.success":"Circle with checkmark"}');
-var messages33 = JSON.parse('{"icon.title.success":"Ympyr\xE4, jonka sis\xE4ll\xE4 on valintamerkki"}');
-var messages43 = JSON.parse('{"icon.title.success":"Cirkel med et flueben"}');
-var messages53 = JSON.parse('{"icon.title.success":"Cirkel med bock"}');
+var messages7 = JSON.parse('{"icon.title.success":["Sirkel med sjekkmerke"]}');
+var messages23 = JSON.parse('{"icon.title.success":["Circle with checkmark"]}');
+var messages33 = JSON.parse('{"icon.title.success":["Ympyr\xE4, jonka sis\xE4ll\xE4 on valintamerkki"]}');
+var messages43 = JSON.parse('{"icon.title.success":["Cirkel med et flueben"]}');
+var messages53 = JSON.parse('{"icon.title.success":["Cirkel med bock"]}');
 var supportedLocales3 = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale4 = "en";
 var detectByBrand3 = () => {
@@ -1996,14 +2038,14 @@ if (!customElements.get("w-icon-success-16")) {
   customElements.define("w-icon-success-16", IconSuccess16);
 }
 
-// node_modules/.pnpm/@warp-ds+icons@2.4.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
+// node_modules/.pnpm/@warp-ds+icons@2.5.0-next.1/node_modules/@warp-ds/icons/dist/elements/close-16.js
 import { LitElement as LitElement4 } from "lit";
 import { unsafeStatic as unsafeStatic4, html as html4 } from "lit/static-html.js";
-var messages8 = JSON.parse('{"icon.title.close":"Kryss"}');
-var messages24 = JSON.parse('{"icon.title.close":"Cross"}');
-var messages34 = JSON.parse('{"icon.title.close":"Rasti"}');
-var messages44 = JSON.parse('{"icon.title.close":"Kryds"}');
-var messages54 = JSON.parse('{"icon.title.close":"Kryss"}');
+var messages8 = JSON.parse('{"icon.title.close":["Kryss"]}');
+var messages24 = JSON.parse('{"icon.title.close":["Cross"]}');
+var messages34 = JSON.parse('{"icon.title.close":["Rasti"]}');
+var messages44 = JSON.parse('{"icon.title.close":["Kryds"]}');
+var messages54 = JSON.parse('{"icon.title.close":["Kryss"]}');
 var supportedLocales4 = ["en", "nb", "fi", "da", "sv"];
 var defaultLocale5 = "en";
 var detectByBrand4 = () => {
@@ -2126,19 +2168,19 @@ var activateI18n5 = (enMessages, nbMessages, fiMessages, daMessages, svMessages)
 };
 
 // packages/toast/locales/da/messages.mjs
-var messages9 = JSON.parse('{"toast.aria.error":"Fejl","toast.aria.successful":"Fuldf\xF8rt","toast.aria.warning":"Advarsel"}');
+var messages9 = JSON.parse('{"toast.aria.error":["Fejl"],"toast.aria.successful":["Fuldf\xF8rt"],"toast.aria.warning":["Advarsel"]}');
 
 // packages/toast/locales/en/messages.mjs
-var messages10 = JSON.parse('{"toast.aria.error":"Error","toast.aria.successful":"Successful","toast.aria.warning":"Warning"}');
+var messages10 = JSON.parse('{"toast.aria.error":["Error"],"toast.aria.successful":["Successful"],"toast.aria.warning":["Warning"]}');
 
 // packages/toast/locales/fi/messages.mjs
-var messages11 = JSON.parse('{"toast.aria.error":"Virhe","toast.aria.successful":"Onnistui","toast.aria.warning":"Varoitus"}');
+var messages11 = JSON.parse('{"toast.aria.error":["Virhe"],"toast.aria.successful":["Onnistui"],"toast.aria.warning":["Varoitus"]}');
 
 // packages/toast/locales/nb/messages.mjs
-var messages12 = JSON.parse('{"toast.aria.error":"Feil","toast.aria.successful":"Vellykket","toast.aria.warning":"Advarsel"}');
+var messages12 = JSON.parse('{"toast.aria.error":["Feil"],"toast.aria.successful":["Vellykket"],"toast.aria.warning":["Advarsel"]}');
 
 // packages/toast/locales/sv/messages.mjs
-var messages13 = JSON.parse('{"toast.aria.error":"Fel","toast.aria.successful":"Genomf\xF6rt","toast.aria.warning":"Varning"}');
+var messages13 = JSON.parse('{"toast.aria.error":["Fel"],"toast.aria.successful":["Genomf\xF6rt"],"toast.aria.warning":["Varning"]}');
 
 // packages/toast/toast.js
 var toastType = {