@warp-ds/elements 1.2.0-next.1 → 1.2.0-next.3

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

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

package/dist/packages/toast/index.js

@@ -0,0 +1,36 @@
+var z=Object.defineProperty,A=Object.defineProperties;var R=Object.getOwnPropertyDescriptors;var D=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,V=Object.prototype.propertyIsEnumerable;var k=(o,e,l)=>e in o?z(o,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):o[e]=l,p=(o,e)=>{for(var l in e||(e={}))j.call(e,l)&&k(o,l,e[l]);if(D)for(var l of D(e))V.call(e,l)&&k(o,l,e[l]);return o},S=(o,e)=>A(o,R(e));var g=(o,e,l)=>(k(o,typeof e!="symbol"?e+"":e,l),l);import{css as O,html as $}from"lit";import B from"@warp-ds/elements-core";import{classMap as N}from"lit/directives/class-map.js";import{when as G}from"lit/directives/when.js";var y={box:"group block relative break-words last-child:mb-0 p-16 rounded-8",bleed:"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",info:"i-bg-$color-box-info-background i-text-$color-box-info-text",neutral:"i-bg-$color-box-neutral-background i-text-$color-box-neutral-text",bordered:"border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text",infoClickable:"hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",neutralClickable:"hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",borderedClickable:"hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"};var v={container:"fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none",content:"w-full",toaster:"grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none"},d={wrapper:"relative overflow-hidden w-full",toast:"flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all",positive:"i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text",warning:"i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text",negative:"i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text",icon:"shrink-0 rounded-full w-[16px] h-[16px] m-[8px]",iconPositive:"i-text-$color-toast-positive-icon",iconWarning:"i-text-$color-toast-warning-icon",iconNegative:"i-text-$color-toast-negative-icon",iconLoading:"animate-bounce",content:"self-center mr-8 py-4 last-child:mb-0",close:"bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active"};var H="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",oe={expandable:"will-change-height",expandableTitle:"font-bold i-text-$color-expandable-title-text",expandableBox:"i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 "+y.box,expandableBleed:y.bleed,chevron:"inline-block align-middle i-text-$color-expandable-icon",chevronNonBox:"relative left-8",chevronBox:"absolute right-16",chevronTransform:"transform transition-transform transform-gpu ease-in-out",chevronExpand:"-rotate-180",chevronCollapse:"rotate-180",expansion:"overflow-hidden",expansionNotExpanded:"h-0 invisible",button:H+" hover:underline focus:underline",buttonBox:"w-full text-left relative inline-flex items-center "+y.box,paddingTop:"pt-0",title:"flex justify-between items-center",titleType:"h4"},b="font-bold focusable justify-center transition-colors ease-in-out",n={primary:"i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",secondary:"i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",utility:"i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",destructive:"i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active",pill:"i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active",disabled:"i-text-$color-button-disabled-text i-bg-$color-button-disabled-background",quiet:"i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active",utilityQuiet:"i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover",negativeQuiet:"i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",loading:"i-text-$color-button-loading-text i-bg-$color-button-loading-background",link:"i-text-$color-button-link-text"},a={primary:`border-0 rounded-8 ${b}`,secondary:`border-2 rounded-8 ${b}`,utility:`border rounded-4 ${b}`,negative:`border-0 rounded-8 ${b}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${b}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline ${n.link}`},r={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},i={medium:"text-m leading-[24]",xsmall:"text-xs"},t={inProgress:`border-transparent animate-inprogress pointer-events-none ${n.loading}`,quiet:`border-0 rounded-8 ${b}`,utilityQuiet:`border-0 rounded-4 ${b}`,negativeQuiet:`border-0 rounded-8 ${b}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${n.disabled}`},U={secondary:`${r.medium} ${i.medium} ${a.secondary} ${n.secondary}`,secondaryHref:`${r.medium} ${i.medium} ${a.secondary} ${n.secondary}`,secondaryDisabled:`${r.medium} ${i.medium} ${a.secondary} ${t.isDisabled}`,secondarySmall:`${i.xsmall} ${r.xsmall} ${a.secondary} ${n.secondary}`,secondarySmallDisabled:`${i.xsmall} ${r.xsmall} ${a.secondary} ${t.isDisabled}`,secondaryQuiet:`${r.medium} ${i.medium} ${t.quiet} ${n.quiet}`,secondaryQuietDisabled:`${r.medium} ${i.medium} ${t.quiet} ${t.isDisabled}`,secondarySmallQuiet:`${i.xsmall} ${r.xsmall} ${t.quiet} ${n.quiet}`,secondarySmallQuietDisabled:`${i.xsmall} ${r.xsmall} ${t.quiet} ${t.isDisabled}`,secondaryLoading:`${r.medium} ${i.medium} ${a.secondary} ${t.inProgress}`,secondarySmallLoading:`${i.xsmall} ${r.xsmall}  ${a.secondary} ${t.inProgress}`,secondarySmallQuietLoading:`${i.xsmall} ${r.xsmall} ${t.quiet} ${t.inProgress}`,secondaryQuietLoading:`${r.medium} ${i.medium} ${t.quiet} ${t.inProgress}`,primary:`${r.large} ${i.medium} ${a.primary} ${n.primary}`,primaryDisabled:`${r.large} ${i.medium} ${t.isDisabled} ${a.primary}`,primarySmall:`${r.small} ${i.xsmall} ${a.primary} ${n.primary}`,primarySmallDisabled:`${r.small} ${i.xsmall} ${t.isDisabled} ${a.primary} `,primaryQuiet:`${r.large} ${i.medium} ${t.quiet} ${n.quiet}`,primaryQuietDisabled:`${r.large} ${i.medium} ${t.quiet} ${t.isDisabled}`,primarySmallQuiet:`${r.small} ${i.xsmall} ${t.quiet} ${n.quiet}`,primarySmallQuietDisabled:`${r.small} ${i.xsmall} ${t.quiet} ${t.isDisabled}`,primaryLoading:`${r.large} ${i.medium} ${t.inProgress} ${a.primary}`,primarySmallLoading:`${r.small} ${i.xsmall}  ${t.inProgress} ${a.primary}`,primarySmallQuietLoading:`${r.small} ${i.xsmall} ${t.quiet} ${t.inProgress} ${a.primary}`,primaryQuietLoading:`${r.large} ${i.medium} ${t.quiet} ${t.inProgress}`,utility:`${r.utility} ${i.medium} ${a.utility} ${n.utility}`,utilityDisabled:`${r.utility} ${i.medium} ${a.utility} ${t.isDisabled}`,utilityQuiet:`${r.large} ${i.medium} ${t.utilityQuiet} ${n.utilityQuiet}`,utilityQuietDisabled:`${r.large} ${i.medium} ${t.utilityQuiet} ${t.isDisabled}`,utilitySmall:`${r.smallUtility} ${i.xsmall} ${a.utility} ${n.utility}`,utilitySmallDisabled:`${r.smallUtility} ${i.xsmall} ${a.utility} ${t.isDisabled}`,utilitySmallQuiet:`${r.smallUtility} ${i.xsmall} ${t.utilityQuiet} ${n.utilityQuiet}`,utilitySmallQuietDisabled:`${r.smallUtility} ${i.xsmall} ${t.utilityQuiet} ${t.isDisabled}`,utilityLoading:`${r.large} ${i.medium} ${a.utility} ${t.inProgress}`,utilitySmallLoading:`${r.smallUtility} ${i.xsmall} ${a.utility} ${t.inProgress}`,utilityQuietLoading:`${r.large} ${i.medium} ${t.inProgress} ${t.utilityQuiet}`,utilitySmallQuietLoading:`${r.smallUtility} ${i.xsmall} ${t.inProgress} ${t.utilityQuiet}`,negative:`${r.large} ${i.medium} ${a.negative} ${n.destructive}`,negativeDisabled:`${r.large} ${i.medium} ${a.negative} ${t.isDisabled}`,negativeQuiet:`${r.large} ${i.medium} ${t.negativeQuiet} ${n.negativeQuiet}`,negativeQuietDisabled:`${r.large} ${i.medium} ${t.negativeQuiet}${t.isDisabled}`,negativeSmall:`${r.small} ${i.xsmall} ${a.negative} ${n.destructive}`,negativeSmallDisabled:`${r.small} ${i.xsmall} ${a.negative} ${t.isDisabled}`,negativeSmallQuiet:`${r.small} ${i.xsmall} ${t.negativeQuiet} ${n.negativeQuiet}`,negativeSmallQuietDisabled:`${r.small} ${i.xsmall} ${t.negativeQuiet} ${t.isDisabled}`,negativeLoading:`${r.large} ${i.medium} ${a.negative} ${t.inProgress}`,negativeSmallLoading:`${r.small} ${i.xsmall} ${t.inProgress} ${a.negative}`,negativeQuietLoading:`${r.large} ${i.medium} ${t.negativeQuiet} ${a.negative} ${t.inProgress}`,negativeSmallQuietLoading:`${r.small} ${i.xsmall} ${t.negativeQuiet} ${t.inProgress}`,pill:`${r.pill} ${i.medium} ${a.pill} ${n.pill}`,pillSmall:`${r.pillSmall} ${i.xsmall} ${a.pill} ${n.pill}`,pillLoading:`${r.pill} ${i.medium} ${a.pill} ${t.inProgress}`,pillSmallLoading:`${r.pillSmall} ${i.xsmall} ${a.pill} ${t.inProgress}`,link:`${r.link} ${i.medium} ${a.link}`,linkSmall:`${r.link} ${i.xsmall} ${a.link}`,linkAsButton:"inline-block hover:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"};var te={transparentBg:'before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25',backdrop:"fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20 [--w-modal-max-height:80%] [--w-modal-width:640px]",modal:"pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",content:"block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",footer:"flex justify-end shrink-0 px-16 sm:px-32",transitionTitle:"transition-all duration-300",transitionTitleCenter:"justify-self-center",transitionTitleColSpan:"col-span-2",title:"-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",titleText:"mb-0 h4 sm:h3",titleButton:U.pill+" sm:min-h-[32px] sm:min-w-[32px]",titleButtonLeft:"-ml-8 sm:-ml-12 justify-self-start",titleButtonRight:"-mr-8 sm:-mr-12 justify-self-end",titleButtonIcon:"h-16 w-16 sm:h-24 sm:w-24",titleButtonIconRotated:"transform rotate-90"};var W={label:"antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",labelInvalid:"i-text-$color-label-text-negative",optional:"pl-8 font-normal text-s i-text-$color-label-optional-text"};var _="absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ",re={wrapper:_+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"},ie={wrapper:_+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"};var le={toggle:"absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",label:`px-12 ${W.label} py-8! cursor-pointer focusable focusable-inset`,buttonOrLink:"bg-transparent focusable",buttonOrLinkStretch:"inset-0 absolute"};var w=typeof window!="undefined",L=!0;if(w){let o=window.matchMedia("(prefers-reduced-motion: reduce)"),e=({matches:l})=>L=!l;o.addEventListener&&o.addEventListener("change",e),e(o)}var Q=o=>{o.style.transition=null,o.style.backfaceVisibility=null,o.style.overflow=null},q=o=>{let e=L?"var(--f-expansion-duration, 0.3s)":"0.01s";o.style.transition=`height ${e}`,o.style.backfaceVisibility="hidden",o.style.overflow="hidden"},M=(o,e)=>()=>{o.style.height="auto",o.style.overflow=null,e&&e()},F=o=>()=>{o&&o()},C=(o,e)=>{let l=(()=>{if(!e)return new Promise(m=>{e=m})})(),c=M(o,e);Q(o),o.style.height="auto";let s=o.scrollHeight;if(w&&requestAnimationFrame(()=>{o.addEventListener("transitionend",c,{once:!0}),o.style.height="0px",o.style.transitionTimingFunction="ease-out",q(o),requestAnimationFrame(()=>o.style.height=s+"px")}),l)return l},T=(o,e)=>{let l=(()=>{if(!e)return new Promise(m=>{e=m})})(),c=F(e);Q(o);let s=o.scrollHeight;if(w&&requestAnimationFrame(()=>{o.addEventListener("transitionend",c,{once:!0}),o.style.height=s+"px",o.style.transitionTimingFunction="ease-in",q(o),requestAnimationFrame(()=>o.style.height="0px")}),l)return l};var E=o=>{let e={};for(let[l,c]of Object.entries(o))for(let s of l.split(" "))e[s]=c;return N(e)},u={success:"success",error:"error",warning:"warning"},x=class extends B{constructor(){super(),this.id=Date.now().toString(36)+Math.random().toString(36).slice(2,5),this.type="success",this.text="",this.canclose=!1}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}updated(){!this._expanded&&this._wrapper&&C(this._wrapper,()=>this._expanded=!0)}get _primaryClasses(){return E({[d.toast]:!0,[d.positive]:this.type===u.success,[d.warning]:this.type===u.warning,[d.negative]:this.type===u.error})}get _iconClasses(){return E({[d.icon]:!0,[d.iconPositive]:this.type==u.success,[d.iconWarning]:this.type===u.warning,[d.iconNegative]:this.type===u.error})}get _wrapper(){var e,l;return(l=(e=this.renderRoot)==null?void 0:e.querySelector("section"))!=null?l:null}get _warning(){return this.type===u.warning}get _error(){return this.type===u.error}get _role(){return this._error||this._warning?"alert":"status"}get _typeLabel(){return this._warning?"Varsel":this._error?"Feil":"Vellykket"}get _iconMarkup(){return this._warning?$`<w-icon-alert-warning-16></w-icon-alert-warning-16>`:this._error?$`<w-icon-alert-error-16></w-icon-alert-error-16>`:$`<w-icon-alert-success-16></w-icon-alert-success-16>`}async collapse(){return new Promise(e=>{this._expanded&&this._wrapper?T(this._wrapper,e):e()})}close(){let e=new CustomEvent("close",{detail:{id:this.id},bubbles:!0,composed:!0});this.updateComplete.then(()=>this.dispatchEvent(e))}render(){return this.text?$` <section class="${d.wrapper}" aria-label="${this._typeLabel}">
+      <div class="${this._primaryClasses}">
+        <div class="${this._iconClasses}">${this._iconMarkup}</div>
+        <div role="${this._role}" class="${d.content}">
+          <p>${this.text}</p>
+        </div>
+        ${G(this.canclose===!0,()=>$`
+            <button class="${d.close}" @click="${this.close}">
+              <w-icon-close-16></w-icon-close-16>
+            </button>
+          `)}
+      </div>
+    </section>`:$``}};g(x,"styles",[B.styles,O`
+      :host {
+        display: block;
+      }
+    `]),g(x,"properties",{id:{type:String,attribute:!0,reflect:!0},type:{type:String,attribute:!0,reflect:!0},text:{type:String,attribute:!0,reflect:!0},canclose:{type:Boolean,attribute:!0,reflect:!0}});customElements.get("w-toast")||customElements.define("w-toast",x);import{css as J,html as P}from"lit";import I from"@warp-ds/elements-core";import{repeat as K}from"lit/directives/repeat.js";var h=class extends I{constructor(){super(),this._toasts=new Map}connectedCallback(){super.connectedCallback(),this._interval=setInterval(()=>{let e=[],l=[];for(let s of this._toasts)Date.now()<=s[1].duration?e.push(s):l.push(s);let c=[];for(let[s]of l){let m=this.renderRoot.querySelector(`#${s}`);c.push(m.collapse())}Promise.all(c).then(()=>{e.length!=this._toasts.size&&(this._toasts=new Map(e))})},500)}disconnectedCallback(){super.disconnectedCallback(),this._interval&&clearTimeout(this._interval)}static init(){let e=document.querySelector("w-toast-container");return e||(e=document.createElement("w-toast-container"),document.body.appendChild(e)),e}get _toastsArray(){return Array.from(this._toasts).map(([,e])=>e)}get(e){if(!e)throw new Error('undefined "id" given when attempting to retrieve toast');if(typeof e!="string"&&!Number.isInteger(e))throw new Error('"id" must be number or string when attempting to retrieve toast');return this._toasts.get(e)}set(e){if(!e.id)throw new Error('invalid or undefined "id" on toast object');let l=this._toasts.set(e.id,S(p({},e),{duration:Date.now()+(e.duration||5e3)}));return this._toasts=new Map(Array.from(this._toasts)),l}async del(e){if(!e)throw new Error('undefined "id" given when attempting to retrieve toast');if(typeof e!="string"&&!Number.isInteger(e))throw new Error('"id" must be number or string when attempting to retrieve toast');let l=this.renderRoot.querySelector(`#${e}`);if(!this._toasts.has(e))return!1;await l.collapse();let c=this._toasts.delete(e);return this._toasts=new Map(Array.from(this._toasts)),c}render(){return P`
+      <aside class="${v.container}">
+        <div class="${v.toaster}" id="w-toast-container-list">
+          ${K(this._toastsArray,e=>e.id,e=>P` <w-toast
+                class="${v.content}"
+                id="${e.id}"
+                type="${e.type}"
+                text="${e.text}"
+                ?canclose=${e.canclose}
+                @close=${()=>this.del(e.id)}
+              >
+              </w-toast>`)}
+        </div>
+      </aside>
+    `}};g(h,"styles",[I.styles,J`
+      :host {
+        display: block;
+      }
+    `]),g(h,"properties",{_toasts:{state:!0}});customElements.get("w-toast-container")||customElements.define("w-toast-container",h);var f=typeof window!="undefined";function X(o,e){if(!f)return;let l=customElements.get("w-toast-container").init(),c=p({id:Date.now().toString(36)+Math.random().toString(36).slice(2,5),text:o,duration:5e3,type:"success"},e);return l.set(c),c}function Y(o){return f?customElements.get("w-toast-container").init().del(o):void 0}function Z(o,e){if(!f)return;let l=customElements.get("w-toast-container").init();return l.set(p(p({},l.get(o)),e)),l.get(o)}export{x as WarpToast,h as WarpToastContainer,Y as removeToast,X as toast,Z as updateToast};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../packages/toast/toast.js", "../../../node_modules/.pnpm/@warp-ds+css@1.2.0/node_modules/@warp-ds/css/component-classes/index.js", "../../../node_modules/.pnpm/element-collapse@1.1.0/node_modules/element-collapse/index.js", "../../../packages/toast/toast-container.js", "../../../packages/utils/window-exists.js", "../../../packages/toast/api.js"],
+  "sourcesContent": ["import { css, html } from 'lit';\nimport WarpElement from '@warp-ds/elements-core';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { when } from 'lit/directives/when.js';\nimport { toast as ccToast } from '@warp-ds/css/component-classes';\nimport { expand, collapse } from 'element-collapse';\n\nconst classes = (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\nconst toastType = {\n  success: 'success',\n  error: 'error',\n  warning: 'warning',\n}\n\nexport class WarpToast extends WarpElement {\n  static styles = [WarpElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n    `,\n  ];\n\n  static properties = {\n    id: { type: String, attribute: true, reflect: true },\n    type: { type: String, attribute: true, reflect: true },\n    text: { type: String, attribute: true, reflect: true },\n    canclose: { type: Boolean, attribute: true, reflect: true },\n  };\n\n  constructor() {\n    super();\n    this.id = Date.now().toString(36) + Math.random().toString(36).slice(2, 5);\n    this.type = 'success';\n    this.text = '';\n    this.canclose = false;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n  }\n\n  updated() {\n    if (!this._expanded && this._wrapper) expand(this._wrapper, () => (this._expanded = true));\n  }\n\n  get _primaryClasses() {\n    return classes({\n      [ccToast.toast]: true,\n      [ccToast.positive]: this.type === toastType.success,\n      [ccToast.warning]: this.type === toastType.warning,\n      [ccToast.negative]: this.type === toastType.error,\n    });\n  }\n\n  get _iconClasses() {\n    return classes({\n      [ccToast.icon]: true,\n      [ccToast.iconPositive]: this.type == toastType.success,\n      [ccToast.iconWarning]: this.type === toastType.warning,\n      [ccToast.iconNegative]: this.type === toastType.error,\n    });\n  }\n\n  get _wrapper() {\n    return this.renderRoot?.querySelector(`section`) ?? null;\n  }\n\n  get _warning() {\n    return this.type === toastType.warning;\n  }\n\n  get _error() {\n    return this.type === toastType.error;\n  }\n\n  get _role() {\n    return this._error || this._warning ? 'alert' : 'status';\n  }\n\n  get _typeLabel() {\n    if (this._warning) return 'Varsel';\n    if (this._error) return 'Feil';\n    return 'Vellykket'\n  }\n\n  get _iconMarkup() {\n    if (this._warning) return html`<w-icon-alert-warning-16></w-icon-alert-warning-16>`;\n    if (this._error) return html`<w-icon-alert-error-16></w-icon-alert-error-16>`;\n    else return html`<w-icon-alert-success-16></w-icon-alert-success-16>`;\n  }\n\n  async collapse() {\n    return new Promise((resolve) => {\n      if (this._expanded && this._wrapper) collapse(this._wrapper, resolve);\n      else resolve();\n    });\n  }\n\n  close() {\n    const event = new CustomEvent('close', {\n      detail: { id: this.id },\n      bubbles: true,\n      composed: true,\n    });\n    this.updateComplete.then(() => this.dispatchEvent(event));\n  }\n\n  render() {\n    if (!this.text) return html``;\n    return html` <section class=\"${ccToast.wrapper}\" aria-label=\"${this._typeLabel}\">\n      <div class=\"${this._primaryClasses}\">\n        <div class=\"${this._iconClasses}\">${this._iconMarkup}</div>\n        <div role=\"${this._role}\" class=\"${ccToast.content}\">\n          <p>${this.text}</p>\n        </div>\n        ${when(\n          this.canclose === true,\n          () => html`\n            <button class=\"${ccToast.close}\" @click=\"${this.close}\">\n              <w-icon-close-16></w-icon-close-16>\n            </button>\n          `,\n        )}\n      </div>\n    </section>`;\n  }\n}\n\nif (!customElements.get('w-toast')) {\n  customElements.define('w-toast', WarpToast);\n}\n", "export const attention = {\n  base: 'border-2 relative',\n  tooltip:\n    'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n  callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n  highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n  popover:\n    'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n  arrowBase:\n    'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n  arrowDirectionLeft: '-left-[8px]',\n  arrowDirectionRight: '-right-[8px]',\n  arrowDirectionBottom: '-bottom-[8px]',\n  arrowDirectionTop: '-top-[8px]',\n  arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n  arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n  arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n  content: 'last-child:mb-0',\n  notCallout: 'absolute z-50',\n};\n\nexport const pageIndicator = {\n  wrapper: 'flex space-x-8 p-8',\n  dot: 'h-8 w-8 rounded-full',\n  inactive: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n  active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n  base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n  info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n  roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n  base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n  neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n  info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n  positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n  warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n  negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n  disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n  price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n  notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n  positionBase: 'absolute backdrop-blur',\n  positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n  positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n  positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n  positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n  wrapper: 'touch-pan-y relative w-full h-44 py-2',\n  track:\n    'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n  trackDisabled:\n    'pointer-events-none i-bg-$color-slider-track-background-disabled',\n  activeTrack:\n    'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n  activeTrackDisabled:\n    'i-bg-$color-slider-track-background-disabled pointer-events-none',\n  thumb:\n    'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n  thumbEnabled:\n    'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n  thumbDisabled:\n    'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n  box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n  bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n  info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n  neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n  bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n  infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n  neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n  borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n  pill: 'flex items-center',\n  button: 'inline-flex items-center focusable text-xs transition-all',\n  suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n  filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n  label: 'pl-12 py-8 rounded-l-full',\n  labelWithoutClose: 'pr-12 rounded-r-full',\n  labelWithClose: 'pr-2',\n  close: 'pr-12 pl-4 pt-4 pb-6 rounded-r-full text-m!',\n  a11y: 'sr-only',\n};\n\nexport const step = {\n  step: 'group/step',\n  stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n  stepVerticalLeft: 'grid-cols-[20px_1fr]',\n  stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n  stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n  stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n  stepDotVerticalRight: 'col-start-2',\n  stepDotHorizontal: 'row-start-2 justify-self-end',\n  stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n  stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n  stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n  stepLineVertical: 'w-2 h-full justify-self-center',\n  stepLineVerticalRight: 'col-start-2',\n  stepLineHorizontal: 'h-2 w-full row-start-2',\n  stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n  stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n  stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n  stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n  content: 'last:mb-0 group-last/step:last:pb-0',\n  contentVertical: 'row-span-2 pb-32',\n  contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n  steps: 'w-full',\n  stepsHorizontal: 'flex',\n};\n\nexport const card = {\n  card: 'cursor-pointer overflow-hidden relative transition-all',\n  cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n  cardFlat: 'border-2 rounded-4',\n  cardFlatUnselected:\n    'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n  cardFlatSelected:\n    'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n  cardSelected:\n    'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n  cardOutline:\n    'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n  cardOutlineUnselected: 'i-border-$color-card-border',\n  cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n  a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n  switch: 'tap-highlight-transparent',\n  label: 'block relative h-24 w-44 cursor-pointer group',\n  labelDisabled: 'pointer-events-none',\n  track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n  trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n  trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n  trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n  handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n  handleSelected: 'translate-x-20',\n  handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n  handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n  a11y: 'sr-only',\n};\n\nexport const toaster = {\n  container:\n    'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n  content: 'w-full',\n  toaster:\n    'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n  wrapper: 'relative overflow-hidden w-full',\n  toast:\n    'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n  positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n  warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n  negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n  icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n  iconPositive: 'i-text-$color-toast-positive-icon',\n  iconWarning: 'i-text-$color-toast-warning-icon',\n  iconNegative: 'i-text-$color-toast-negative-icon',\n  iconLoading: 'animate-bounce',\n  content: 'self-center mr-8 py-4 last-child:mb-0',\n  close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n  tabContainer: 'mx-auto max-w-screen-md w-full grid relative',\n  wunderbar:\n    'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n  wrapperUnderlined:\n    'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n  tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n  tabActive: 'i-text-$color-tabs-text-selected',\n  icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n  iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n  content: 'flex items-center justify-center gap-8',\n  contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n  contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n  cols1: 'grid-cols-1',\n  cols2: 'grid-cols-2',\n  cols3: 'grid-cols-3',\n  cols4: 'grid-cols-4',\n  cols5: 'grid-cols-5',\n  cols6: 'grid-cols-6',\n  cols7: 'grid-cols-7',\n  cols8: 'grid-cols-8',\n  cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n  'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n  expandable: 'will-change-height',\n  expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n  expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n  expandableBleed: box.bleed,\n  chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n  chevronNonBox: 'relative left-8',\n  chevronBox: 'absolute right-16',\n  chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n  chevronExpand: '-rotate-180',\n  chevronCollapse: 'rotate-180',\n  expansion: 'overflow-hidden',\n  expansionNotExpanded: 'h-0 invisible',\n  button: buttonReset + ' hover:underline focus:underline',\n  buttonBox: 'w-full text-left relative inline-flex items-center ' + box.box,\n  paddingTop: 'pt-0',\n  title: 'flex justify-between items-center',\n  titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n  primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n  secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n  utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n  destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n  pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n  disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n  quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n  utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n  negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n  loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n  link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n  utility: `border rounded-4 ${buttonDefaultStyling}`,\n  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  pill:\n  `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n  xsmall: 'py-6 px-16',\n  small: 'py-8 px-16',\n  medium: 'py-10 px-14',\n  large: 'py-12 px-16',\n  utility: 'py-[11px] px-[15px]',\n  smallUtility: 'py-[7px] px-[15px]',\n  pill: 'min-h-[44px] min-w-[44px]',\n  pillSmall: 'min-h-32 min-w-32',\n  link: 'p-0',\n};\n\nconst buttonTextSizes = {\n  medium: 'text-m leading-[24]',\n  xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n  inProgress:\n    `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n  quiet:\n    `border-0 rounded-8 ${buttonDefaultStyling}`,\n  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n  isDisabled:\n    `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n  // Buttontypes\n  secondary:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n  secondaryHref:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondaryDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n  secondaryQuiet:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondaryQuietDisabled:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  secondaryLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n  secondaryQuietLoading:\n  `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n  linkAsButton: 'inline-block hover:no-underline text-center',\n  a11y: 'sr-only',\n  fullWidth: \"w-full max-w-full\",\n  contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n  wrapper: 'inline-flex rounded-4 overflow-hidden',\n  raised: 'i-shadow-$shadow-buttongroup',\n  vertical: 'flex-col',\n  nonOutlinedVertical: 'divide-y',\n  nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n  wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n  outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n  outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n  outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n  outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n  outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n  outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n  selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n  backdrop:\n    'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n  modal:\n    'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n  content:\n    'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n  footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n  transitionTitle: 'transition-all duration-300',\n  transitionTitleCenter: 'justify-self-center',\n  transitionTitleColSpan: 'col-span-2',\n  title:\n    '-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n  titleText: 'mb-0 h4 sm:h3',\n  titleButton: button.pill + ' sm:min-h-[32px] sm:min-w-[32px]',\n  titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n  titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n  titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n  titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n  alert: \"flex p-16 border border-l-4 rounded-4\",\n  willChangeHeight: \"will-change-height\",\n  textWrapper: \"last-child:mb-0 text-s\",\n  title: \"text-s\",\n  icon: \"w-16 mr-8 min-w-16\",\n  negative:  \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n  negativeIcon: \"i-text-$color-alert-negative-icon\",\n  positive:  \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n  positiveIcon: \"i-text-$color-alert-positive-icon\",\n  warning:  \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n  warningIcon: \"i-text-$color-alert-warning-icon\",\n  info:  \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n  infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n  default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n  textArea: 'min-h-[42] sm:min-h-[45]',\n  disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n  placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n  wrapper: 'relative',\n  suffix: 'pr-40',\n  prefix: 'pl-40',\n};\n\nexport const select = {\n  default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n  disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n  invalid: 'i-border-$color-select-border-negative',\n  readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n  wrapper: 'relative',\n  selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n  chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n  chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n  label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n  labelInvalid: 'i-text-$color-label-text-negative',\n  optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n  helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n  helpTextValid: 'i-text-$color-helptext-text-positive',\n  helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n  'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n  wrapper: prefixSuffixWrapperBase + 'right-0',\n  wrapperWithLabel: 'w-max pr-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n  wrapper: prefixSuffixWrapperBase + 'left-0',\n  wrapperWithLabel: 'w-max pl-12',\n  wrapperWithIcon: 'w-40',\n  label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n  wrapper: 'flex space-x-8',\n  text: 'i-text-$color-breadcrumbs-text',\n  link: 'i-text-$color-breadcrumbs-link-text',\n  separator: 'select-none i-text-$color-breadcrumbs-icon',\n  a11y: 'sr-only',\n};\n\nexport const toggle = {\n  field: 'relative text-m',\n  wrapper: 'relative py-1',\n  deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n  input: 'peer',\n  deadToggleInput: 'hidden',\n  inputDisabled: 'pointer-events-none',\n  focusable: 'peer-focus:focusable',\n  focusableWithin: 'focus-within:focusable',\n  label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n  deadToggleLabel: '-mt-2',\n  noContent: `before:content-[\"\"]`,\n  indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n  labelDisabled: 'pointer-events-none',\n  checkbox: 'before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n  checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n  checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border-selected hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover',\n  checkboxDisabled: 'before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n  labelCheckboxBorder: 'i-border-$color-checkbox-border',\n  radio: 'before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n  radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n  radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ',\n  radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled',\n  labelRadioBorder: 'i-border-$color-radio-border',\n  radioButtons: 'inline-flex relative font-bold rounded-8',\n  radioButtonsGroup: 'group',\n  radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n  radioButtonsJustified: 'flex!',\n  radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n  radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n  icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n  a11y: 'sr-only',\n};\n\nexport const clickable = {\n  toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n  buttonOrLink: 'bg-transparent focusable',\n  buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n  wrapper: 'relative',\n  combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n  textMatch: 'font-bold',\n  listbox: 'm-0 p-0 select-none list-none',\n  option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n  optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n  a11y: 'sr-only',\n};", "const windowExists = (typeof window !== 'undefined')\n\nlet prefersMotion = true\n\nif (windowExists) {\n  const query = window.matchMedia('(prefers-reduced-motion: reduce)')\n  const callback = ({ matches }) => prefersMotion = !matches\n  // older browsers don't support the new API, and the old API is deprecated\n  if (query.addEventListener) query.addEventListener('change', callback)\n  callback(query)\n}\n\nconst removeTransition = el => {\n  el.style.transition = null\n  el.style.backfaceVisibility = null\n  el.style.overflow = null\n}\n\nconst addTransition = (el) => {\n  // we set timing to something insanely short\n  // when reducing motion so the after-* hooks still fire\n  const timing = prefersMotion ? 'var(--f-expansion-duration, 0.3s)' : '0.01s'\n  el.style.transition = `height ${timing}`\n  el.style.backfaceVisibility = 'hidden'\n  el.style.overflow = 'hidden'\n}\n\nconst getAfterExpandCallback = (el, done) => () => {\n  el.style.height = 'auto'\n  el.style.overflow = null\n  if (done) done()\n}\n\nconst getAfterCollapseCallback = (done) => () => {\n  if (done) done()\n}\n\n/**\n * Transitions an element from 0 to a detected height\n * Will return a Promise when no 'done' callback is provided\n * @type {(el: HTMLElement, done?: function) => void | Promise<void>}\n */\nexport const expand = (el, done) => {\n  const returnPromise = (() => {\n    if (!done) return new Promise(r => { done = r })\n  })()\n  const afterExpandCallback = getAfterExpandCallback(el, done)\n  removeTransition(el)\n  el.style.height = 'auto'\n  let dest = el.scrollHeight\n  windowExists && requestAnimationFrame(() => {\n    el.addEventListener('transitionend', afterExpandCallback, { once: true })\n    el.style.height = '0px'\n    el.style.transitionTimingFunction = 'ease-out'\n    addTransition(el)\n    requestAnimationFrame(() => el.style.height = dest + 'px')\n  })\n  if (returnPromise) return returnPromise\n}\n\n/**\n * Transitions an element from a detected height to 0\n * Will return a Promise when no 'done' callback is provided\n * @type {(el: HTMLElement, done?: function) => void | Promise<void>}\n */\nexport const collapse = (el, done) => {\n  const returnPromise = (() => {\n    if (!done) return new Promise(r => { done = r })\n  })()\n  const afterCollapseCallback = getAfterCollapseCallback(done)\n  removeTransition(el)\n  let original = el.scrollHeight\n  windowExists && requestAnimationFrame(() => {\n    el.addEventListener('transitionend', afterCollapseCallback, { once: true })\n    el.style.height = original + 'px'\n    el.style.transitionTimingFunction = 'ease-in'\n    addTransition(el)\n    requestAnimationFrame(() => el.style.height = '0px')\n  })\n  if (returnPromise) return returnPromise\n}\n", "import { css, html } from \"lit\";\nimport WarpElement from \"@warp-ds/elements-core\";\nimport { toaster as ccToaster } from \"@warp-ds/css/component-classes\";\nimport { repeat } from \"lit/directives/repeat.js\";\n\n/**\n * Toast helper function options\n * @typedef    {Object}                               ToastOptions\n * @property   {(number|string)}                      [id]        Custom identifier\n * @property   {('success'|'error'|'warning')}        [type]      Type of alert\n * @property   {String}                               [text]      The toast message. Only needed when updating text on existing toast\n * @property   {(number|string)}                      [duration]  Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.\n * @property   {Boolean}                              [canClose]  Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.\n */\n\nexport class WarpToastContainer extends WarpElement {\n  static styles = [\n    WarpElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n    `,\n  ];\n\n  static properties = {\n    _toasts: { state: true },\n  };\n\n  constructor() {\n    super();\n    this._toasts = new Map();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // regularly check if any toasts have expired\n    this._interval = setInterval(() => {\n      // sort toasts into keep and remove\n      const keep = [];\n      const remove = [];\n      for (const toast of this._toasts) {\n        if (Date.now() <= toast[1].duration) keep.push(toast);\n        else remove.push(toast);\n      }\n      // collapse toasts that will be removed\n      const collapseTasks = [];\n      for (const [id] of remove) {\n        const el = this.renderRoot.querySelector(`#${id}`);\n        collapseTasks.push(el.collapse());\n      }\n      // once all toasts that should be removed have been collapsed, remove them from the map\n      Promise.all(collapseTasks).then(() => {\n        if (keep.length != this._toasts.size) this._toasts = new Map(keep);\n      });\n    }, 500);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._interval) clearTimeout(this._interval);\n  }\n\n  static init() {\n    let el = document.querySelector(\"w-toast-container\");\n    if (!el) {\n      el = document.createElement(\"w-toast-container\");\n      document.body.appendChild(el);\n    }\n    return el;\n  }\n\n  get _toastsArray() {\n    return Array.from(this._toasts).map(([, toast]) => toast);\n  }\n\n  /**\n   *\n   * @param {String|Number} id\n   * @returns {ToastOptions}\n   */\n  get(id) {\n    if (!id)\n      throw new Error('undefined \"id\" given when attempting to retrieve toast');\n    if (typeof id !== \"string\" && !Number.isInteger(id))\n      throw new Error(\n        '\"id\" must be number or string when attempting to retrieve toast'\n      );\n    return this._toasts.get(id);\n  }\n\n  /**\n   *\n   * @param {Object} toast\n   * @returns {WarpToastContainer}\n   */\n  set(toast) {\n    if (!toast.id) throw new Error('invalid or undefined \"id\" on toast object');\n    const result = this._toasts.set(toast.id, {\n      ...toast,\n      duration: Date.now() + (toast.duration || 5000),\n    });\n    this._toasts = new Map(Array.from(this._toasts));\n    return result;\n  }\n\n  /**\n   *\n   * @param {String|Number} id\n   * @returns {ToastOptions | false}\n   */\n  async del(id) {\n    if (!id)\n      throw new Error('undefined \"id\" given when attempting to retrieve toast');\n    if (typeof id !== \"string\" && !Number.isInteger(id))\n      throw new Error(\n        '\"id\" must be number or string when attempting to retrieve toast'\n      );\n    const el = this.renderRoot.querySelector(`#${id}`);\n    if (!this._toasts.has(id)) return false;\n    await el.collapse();\n    const result = this._toasts.delete(id);\n    this._toasts = new Map(Array.from(this._toasts));\n    return result;\n  }\n\n  render() {\n    return html`\n      <aside class=\"${ccToaster.container}\">\n        <div class=\"${ccToaster.toaster}\" id=\"w-toast-container-list\">\n          ${repeat(\n            this._toastsArray,\n            (toast) => toast.id,\n            (toast) =>\n              html` <w-toast\n                class=\"${ccToaster.content}\"\n                id=\"${toast.id}\"\n                type=\"${toast.type}\"\n                text=\"${toast.text}\"\n                ?canclose=${toast.canclose}\n                @close=${() => this.del(toast.id)}\n              >\n              </w-toast>`\n          )}\n        </div>\n      </aside>\n    `;\n  }\n}\n\nif (!customElements.get(\"w-toast-container\")) {\n  customElements.define(\"w-toast-container\", WarpToastContainer);\n}\n", "export const windowExists = typeof window !== 'undefined';\n", "import { windowExists } from '../utils/window-exists';\n\n/**\n * Toast helper function options\n * @typedef    {Object}                               ToastOptions\n * @property   {(number|string)}                      [id]        Custom identifier\n * @property   {('success'|'error'|'warning'|'info')} [type]      Type of alert\n * @property   {String}                               [text]      The toast message. Only needed when updating text on existing toast\n * @property   {(number|string)}                      [duration]  Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.\n * @property   {Boolean}                              [canclose]  Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.\n */\n\n/**\n * Creates a new toast\n * @param {String}        message  Message\n * @param {ToastOptions?} options  Toast options\n * @returns {ToastOptions} Toast details\n */\nexport function toast(message, options) {\n  if (!windowExists) return;\n  const toast = customElements.get('w-toast-container').init();\n\n  const data = {\n    id: Date.now().toString(36) + Math.random().toString(36).slice(2, 5),\n    text: message,\n    duration: 5000,\n    type: 'success',\n    ...options,\n  };\n\n  toast.set(data);\n  return data;\n}\n\n/**\n * Remove an existing toast\n * @param {String|Number} id Toast identifier\n * @return {Promise<Boolean>} Resolves to true if deleted, false if not found\n */\nexport function removeToast(id) {\n  if (!windowExists) return;\n  const toast = customElements.get('w-toast-container').init();\n  return toast.del(id);\n}\n\n/**\n * Update an existing toast\n * @param {String|Number}           id      Toast identifier\n * @param {ToastOptions?}           options Toast options\n * @returns {WarpToastContainer}          Toast details\n */\nexport function updateToast(id, options) {\n  if (!windowExists) return;\n  const toast = customElements.get('w-toast-container').init();\n  toast.set({ ...toast.get(id), ...options });\n  return toast.get(id);\n}\n"],
+  "mappings": "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",
+  "names": ["css", "html", "WarpElement", "classMap", "when", "box", "toaster", "toast", "buttonReset", "expandable", "box", "buttonDefaultStyling", "buttonColors", "buttonTypes", "buttonSizes", "buttonTextSizes", "buttonVariants", "button", "modal", "button", "label", "prefixSuffixWrapperBase", "suffix", "prefix", "clickable", "label", "windowExists", "prefersMotion", "query", "callback", "matches", "removeTransition", "el", "addTransition", "timing", "getAfterExpandCallback", "done", "getAfterCollapseCallback", "expand", "returnPromise", "r", "afterExpandCallback", "dest", "collapse", "afterCollapseCallback", "original", "classes", "definition", "defn", "key", "value", "className", "classMap", "toastType", "WarpToast", "WarpElement", "expand", "toast", "_a", "_b", "html", "resolve", "collapse", "event", "when", "__publicField", "css", "css", "html", "WarpElement", "repeat", "WarpToastContainer", "WarpElement", "keep", "remove", "toast", "collapseTasks", "id", "el", "result", "__spreadProps", "__spreadValues", "html", "toaster", "repeat", "__publicField", "css", "windowExists", "toast", "message", "options", "windowExists", "data", "__spreadValues", "removeToast", "id", "updateToast"]
+}

package/dist/packages/toast/toast-container.d.ts

@@ -7,8 +7,8 @@
  * @property   {(number|string)}                      [duration]  Duration of toast in milliseconds. Defaults to 5000. For accessibility reasons, toasts should never be interactive and therefore need to auto remove. If you must disable auto remove, set duration to Number.POSITIVE_INFINITY.
  * @property   {Boolean}                              [canClose]  Whether the toast can be dismissed. Defaults to false. WARNING! For accessibility reasons, toasts should not be interactive and canclose should always be false. If the toast absolutely must be dismissble, set this to true.
  */
-export class WarpToastContainer extends LitElement {
-    static styles: import("lit").CSSResult[];
+export class WarpToastContainer {
+    static styles: any[];
     static properties: {
         _toasts: {
             state: boolean;
@@ -16,7 +16,9 @@ export class WarpToastContainer extends LitElement {
     };
     static init(): Element;
     _toasts: Map<any, any>;
+    connectedCallback(): void;
     _interval: NodeJS.Timeout;
+    disconnectedCallback(): void;
     get _toastsArray(): any[];
     /**
      *
@@ -63,4 +65,3 @@ export type ToastOptions = {
      */
     canClose?: boolean;
 };
-import { LitElement } from 'lit';

package/dist/packages/toast/toast.d.ts

@@ -1,5 +1,5 @@
-export class WarpToast extends LitElement {
-    static styles: import("lit").CSSResult[];
+export class WarpToast {
+    static styles: any[];
     static properties: {
         id: {
             type: StringConstructor;
@@ -22,14 +22,17 @@ export class WarpToast extends LitElement {
             reflect: boolean;
         };
     };
+    id: string;
     type: string;
     text: string;
     canclose: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     updated(): void;
     _expanded: boolean;
-    get _primaryClasses(): import(".pnpm/lit-html@2.7.5/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.7.5/node_modules/lit-html/directives/class-map").ClassMapDirective>;
-    get _iconClasses(): import(".pnpm/lit-html@2.7.5/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.7.5/node_modules/lit-html/directives/class-map").ClassMapDirective>;
-    get _wrapper(): HTMLElement;
+    get _primaryClasses(): import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directives/class-map").ClassMapDirective>;
+    get _iconClasses(): import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directives/class-map").ClassMapDirective>;
+    get _wrapper(): any;
     get _warning(): boolean;
     get _error(): boolean;
     get _role(): "alert" | "status";
@@ -39,4 +42,3 @@ export class WarpToast extends LitElement {
     close(): void;
     render(): import("lit").TemplateResult<1>;
 }
-import { LitElement } from 'lit';

package/dist/packages/utils/expand-transition.d.ts

@@ -1,4 +1,4 @@
-export class ExpandTransition extends LitElement {
+export class ExpandTransition {
     static properties: {
         show: {
             type: BooleanConstructor;
@@ -9,7 +9,7 @@ export class ExpandTransition extends LitElement {
             state: boolean;
         };
     };
-    static styles: import("lit").CSSResult[];
+    static styles: any[];
     show: boolean;
     _mounted: boolean;
     _removeElement: boolean;
@@ -18,4 +18,3 @@ export class ExpandTransition extends LitElement {
     get _wrapper(): this;
     render(): import("lit").TemplateResult<1>;
 }
-import { LitElement } from 'lit';

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

@@ -6,5 +6,5 @@ export function kebabCaseAttributes(constructor: any): {
     createProperty(name: any, options: any): void;
 };
 export function classes(defn: any): string;
-export function fclasses(definition: any): import(".pnpm/lit-html@2.7.5/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.7.5/node_modules/lit-html/directives/class-map").ClassMapDirective>;
+export function fclasses(definition: any): import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directive").DirectiveResult<typeof import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directives/class-map").ClassMapDirective>;
 export function generateRandomId(): string;

package/dist/packages/utils/unstyled-heading.d.ts

@@ -1,11 +1,10 @@
-export class UnstyledHeading extends LitElement {
+export class UnstyledHeading {
     static properties: {
         level: {
             type: NumberConstructor;
         };
     };
-    static styles: import("lit").CSSResult[];
+    static styles: any[];
     get _markup(): string;
-    render(): import(".pnpm/lit-html@2.7.5/node_modules/lit-html/directive").DirectiveResult<typeof import("lit/directives/unsafe-html").UnsafeHTMLDirective>;
+    render(): import(".pnpm/lit-html@2.8.0/node_modules/lit-html/directive").DirectiveResult<typeof import("lit/directives/unsafe-html").UnsafeHTMLDirective>;
 }
-import { LitElement } from 'lit';

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "@warp-ds/elements",
   "type": "module",
-  "version": "1.2.0-next.1",
+  "version": "1.2.0-next.3",
   "description": "Custom elements for Warp",
   "exports": {
     ".": "./dist/index.js",
-    "./toast": "./dist/api.js"
+    "./toast": "./dist/api.js",
+    "./components/affix": "./dist/packages/affix/index.js",
+    "./components/alert": "./dist/packages/alert/index.js",
+    "./components/attention": "./dist/packages/attention/index.js",
+    "./components/box": "./dist/packages/box/index.js",
+    "./components/breadcrumbs": "./dist/packages/breadcrumbs/index.js",
+    "./components/broadcast": "./dist/packages/broadcast/index.js",
+    "./components/button": "./dist/packages/button/index.js",
+    "./components/card": "./dist/packages/card/index.js",
+    "./components/expandable": "./dist/packages/expandable/index.js",
+    "./components/select": "./dist/packages/select/index.js",
+    "./components/textfield": "./dist/packages/textfield/index.js",
+    "./components/toast": "./dist/packages/toast/index.js"
   },
   "module": "dist/index.js",
   "files": [
@@ -17,7 +29,7 @@
     "build:api": "npx esbuild ./packages/toast/api.js --outdir=dist --target=es2017 --bundle --sourcemap --format=esm --minify",
     "build:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify",
     "watch:npm": "npx esbuild ./index.js --outdir=dist/ --target=es2017 --bundle --sourcemap --format=esm --minify --watch",
-    "build": "pnpm run build:elements && tsc && vite build --mode lib && pnpm run build:api",
+    "build": "pnpm run build:elements && tsc && vite build --mode lib && pnpm run build:api && node build-individual-elements.js",
     "format": "prettier --write . --ignore-path .gitignore",
     "lint": "npm run lint:format && pnpm run lint:eslint",
     "lint:format": "prettier --check . --ignore-path .gitignore",
@@ -46,9 +58,11 @@
     "@eik/cli": "^2.0.22",
     "@lingui/cli": "^4.5.0",
     "@lingui/conf": "^4.5.0",
+    "@open-wc/testing": "3.2.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/node": "^20.7.1",
+    "@warp-ds/uno": "^1.1.0",
     "autoprefixer": "10.4.14",
     "cors": "2.8.5",
     "cz-conventional-changelog": "3.3.0",
@@ -57,7 +71,10 @@
     "eslint": "8.43.0",
     "express": "4.18.2",
     "fastify": "4.18.0",
+    "glob": "8.1.0",
+    "html-format": "1.1.2",
     "lerna": "7.0.2",
+    "lit": "2.8.0",
     "npm-run-all": "4.1.5",
     "playwright": "1.35.1",
     "postcss": "8.4.24",
@@ -70,20 +87,17 @@
     "semantic-release-slack-bot": "^4.0.2",
     "tap": "16.3.6",
     "typescript": "5.1.3",
-    "unocss": "^0.56.0",
-    "vite": "4.3.9",
-    "vite-plugin-html": "3.2.0"
+    "unocss": "^0.57.1",
+    "vite": "4.5.0",
+    "vite-plugin-html": "3.2.0",
+    "vite-plugin-top-level-await": "^1.3.1"
   },
   "dependencies": {
     "@lingui/core": "^4.5.0",
-    "@open-wc/testing": "3.2.0",
     "@warp-ds/core": "1.0.0",
     "@warp-ds/css": "^1.2.0",
-    "@warp-ds/icons": "1.1.0",
-    "@warp-ds/uno": "^1.1.0",
-    "glob": "8.1.0",
-    "html-format": "1.1.2",
-    "lit": "2.7.5"
+    "@warp-ds/elements-core": "0.0.1-alpha.9",
+    "@warp-ds/icons": "1.1.1"
   },
   "publishConfig": {
     "access": "public"