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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/index.d.ts +2 -1
  2. package/dist/index.js +412 -296
  3. package/dist/index.js.map +4 -4
  4. package/dist/packages/affix/index.js +72 -58
  5. package/dist/packages/affix/index.js.map +4 -4
  6. package/dist/packages/alert/index.js +80 -66
  7. package/dist/packages/alert/index.js.map +4 -4
  8. package/dist/packages/attention/index.js +71 -57
  9. package/dist/packages/attention/index.js.map +4 -4
  10. package/dist/packages/badge/index.js +3 -3
  11. package/dist/packages/badge/index.js.map +2 -2
  12. package/dist/packages/box/index.js +3 -3
  13. package/dist/packages/box/index.js.map +2 -2
  14. package/dist/packages/breadcrumbs/index.js +67 -53
  15. package/dist/packages/breadcrumbs/index.js.map +4 -4
  16. package/dist/packages/button/index.js +66 -52
  17. package/dist/packages/button/index.js.map +4 -4
  18. package/dist/packages/card/index.js +3 -3
  19. package/dist/packages/card/index.js.map +2 -2
  20. package/dist/packages/expandable/index.js +72 -58
  21. package/dist/packages/expandable/index.js.map +4 -4
  22. package/dist/packages/pill/index.d.ts +34 -0
  23. package/dist/packages/pill/index.js +1810 -0
  24. package/dist/packages/pill/index.js.map +7 -0
  25. package/dist/packages/pill/locales/en/messages.d.mts +1 -0
  26. package/dist/packages/pill/locales/fi/messages.d.mts +1 -0
  27. package/dist/packages/pill/locales/nb/messages.d.mts +1 -0
  28. package/dist/packages/select/index.js +70 -56
  29. package/dist/packages/select/index.js.map +4 -4
  30. package/dist/packages/textfield/index.js +3 -3
  31. package/dist/packages/textfield/index.js.map +2 -2
  32. package/dist/packages/toast/index.js +83 -69
  33. package/dist/packages/toast/index.js.map +4 -4
  34. package/package.json +7 -18
package/dist/packages/card/index.js CHANGED
@@ -10,7 +10,7 @@ import { html, css } from "lit";
10
10
  import WarpElement from "@warp-ds/elements-core";
11
11
  import { ifDefined } from "lit/directives/if-defined.js";
12
12
 
13
- // node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js
13
+ // node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js
14
14
  var box = {
15
15
  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
16
16
  // Relative here enables w-clickable
@@ -183,9 +183,9 @@ var modal = {
183
183
  content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
184
184
  footer: "flex justify-end shrink-0 px-16 sm:px-32",
185
185
  transitionTitle: "transition-all duration-300",
186
- transitionTitleCenter: "justify-self-center",
186
+ transitionTitleCenter: "justify-self-center self-center",
187
187
  transitionTitleColSpan: "col-span-2",
188
- 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",
188
+ title: "py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
189
189
  titleText: "mb-0 h4 sm:h3",
190
190
  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
191
191
  titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",
package/dist/packages/card/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../packages/card/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js", "../../../packages/utils/index.js"],
4
- "sourcesContent": ["import { html, css } from \"lit\";\nimport WarpElement from \"@warp-ds/elements-core\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { card as ccCard } from \"@warp-ds/css/component-classes\";\nimport { fclasses } from \"../utils\";\n\nconst keys = {\n ENTER: \"Enter\",\n SPACE: \" \",\n};\n\nclass WarpCard extends WarpElement {\n static styles = [\n WarpElement.styles,\n css`\n a::after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n :host {\n display: block;\n }\n `,\n ];\n\n static properties = {\n selected: { type: Boolean, reflect: true },\n flat: { type: Boolean },\n clickable: { type: Boolean },\n };\n\n constructor() {\n super();\n this.selected = false;\n this.flat = false;\n this.clickable = false;\n }\n\n get _outerClasses() {\n return fclasses({\n [ccCard.card]: true,\n [ccCard.cardShadow]: !this.flat,\n [this.selected ? ccCard.cardSelected : ccCard.cardUnselected]: !this.flat,\n [ccCard.cardFlat]: this.flat,\n [this.selected ? ccCard.cardFlatSelected : ccCard.cardFlatUnselected]:\n this.flat,\n });\n }\n\n get _innerClasses() {\n return fclasses({\n [ccCard.cardOutline]: true,\n [this.selected\n ? ccCard.cardOutlineSelected\n : ccCard.cardOutlineUnselected]: true,\n });\n }\n\n get uuButton() {\n return html`<button\n class=\"${ccCard.a11y}\"\n aria-pressed=\"${this.selected}\"\n tabindex=\"-1\"\n >\n Velg\n </button>`;\n }\n\n get uuSpan() {\n return html`<span\n role=\"checkbox\"\n aria-checked=\"true\"\n aria-disabled=\"true\"\n ></span>`;\n }\n\n keypressed(e) {\n if (!this.clickable || e.altKey || e.ctrlKey) return;\n if (e.key === keys.ENTER || e.key === keys.SPACE) {\n e.preventDefault();\n this.click();\n }\n }\n\n render() {\n return html`\n <div\n tabindex=${ifDefined(this.clickable ? \"0\" : undefined)}\n class=\"${this._outerClasses}\"\n @keydown=${this.keypressed}\n >\n ${this.clickable ? this.uuButton : \"\"}\n ${!this.clickable && this.selected ? this.uuSpan : \"\"}\n <div class=\"${this._innerClasses}\"></div>\n <slot></slot>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"w-card\")) {\n customElements.define(\"w-card\", WarpCard);\n}\n\nexport { WarpCard };\n", "export const pageIndicator = {\n wrapper: 'flex space-x-8 p-8',\n dot: 'h-8 w-8 rounded-full',\n inactive: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n positionBase: 'absolute backdrop-blur',\n positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n wrapper: 'touch-pan-y relative w-full h-44 py-2',\n track:\n 'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n trackDisabled:\n 'pointer-events-none i-bg-$color-slider-track-background-disabled',\n activeTrack:\n 'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n activeTrackDisabled:\n 'i-bg-$color-slider-track-background-disabled pointer-events-none',\n thumb:\n 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n thumbEnabled:\n 'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n thumbDisabled:\n 'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n pill: 'flex items-center',\n button: 'inline-flex items-center focusable text-xs transition-all',\n suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n label: 'pl-12 py-8 rounded-l-full',\n labelWithoutClose: 'pr-12 rounded-r-full',\n labelWithClose: 'pr-2',\n close: 'pr-12 pl-4 pt-4 pb-6 rounded-r-full text-m!',\n a11y: 'sr-only',\n};\n\nexport const step = {\n step: 'group/step',\n stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n stepVerticalLeft: 'grid-cols-[20px_1fr]',\n stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n stepDotVerticalRight: 'col-start-2',\n stepDotHorizontal: 'row-start-2 justify-self-end',\n stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n stepLineVertical: 'w-2 h-full justify-self-center',\n stepLineVerticalRight: 'col-start-2',\n stepLineHorizontal: 'h-2 w-full row-start-2',\n stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n content: 'last:mb-0 group-last/step:last:pb-0',\n contentVertical: 'row-span-2 pb-32',\n contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n steps: 'w-full',\n stepsHorizontal: 'flex',\n};\n\nexport const card = {\n card: 'cursor-pointer overflow-hidden relative transition-all',\n cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n cardFlat: 'border-2 rounded-4',\n cardFlatUnselected:\n 'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n cardFlatSelected:\n 'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n cardUnselected: 's-bg',\n cardSelected:\n 'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n cardOutline:\n 'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n cardOutlineUnselected: 'i-border-$color-card-border',\n cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n switch: 'tap-highlight-transparent',\n label: 'block relative h-24 w-44 cursor-pointer group',\n labelDisabled: 'pointer-events-none',\n track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n handleSelected: 'translate-x-20',\n handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n a11y: 'sr-only',\n};\n\nexport const toaster = {\n container:\n 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n content: 'w-full',\n toaster:\n 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n wrapper: 'relative overflow-hidden w-full',\n toast:\n 'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n iconPositive: 'i-text-$color-toast-positive-icon',\n iconWarning: 'i-text-$color-toast-warning-icon',\n iconNegative: 'i-text-$color-toast-negative-icon',\n iconLoading: 'animate-bounce',\n content: 'self-center mr-8 py-4 last-child:mb-0',\n close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n tabContainer: 'inline-grid relative',\n wunderbar:\n 'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n wrapperUnderlined:\n 'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n tabActive: 'i-text-$color-tabs-text-selected',\n icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n content: 'flex items-center justify-center gap-8',\n contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n cols1: 'grid-cols-1',\n cols2: 'grid-cols-2',\n cols3: 'grid-cols-3',\n cols4: 'grid-cols-4',\n cols5: 'grid-cols-5',\n cols6: 'grid-cols-6',\n cols7: 'grid-cols-7',\n cols8: 'grid-cols-8',\n cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n expandable: 'will-change-height',\n expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n expandableBleed: box.bleed,\n chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n chevronNonBox: 'ml-8',\n chevronBox: '',\n chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n chevronExpand: '-rotate-180',\n chevronCollapse: 'rotate-180',\n elementsTransformChevronDownPart: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n elementsTransformChevronUpPart: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n expansion: 'overflow-hidden',\n expansionNotExpanded: 'h-0 invisible',\n button: buttonReset + ' hover:underline focus-visible:underline',\n buttonBox: 'w-full text-left relative inline-flex items-center justify-between ' + box.box,\n paddingTop: 'pt-0',\n title: 'flex w-full justify-between items-center',\n titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n utility: `border rounded-4 ${buttonDefaultStyling}`,\n negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n pill:\n `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n xsmall: 'py-6 px-16',\n small: 'py-8 px-16',\n medium: 'py-10 px-14',\n large: 'py-12 px-16',\n utility: 'py-[11px] px-[15px]',\n smallUtility: 'py-[7px] px-[15px]',\n pill: 'min-h-[44px] min-w-[44px]',\n pillSmall: 'min-h-32 min-w-32',\n link: 'p-0',\n};\n\nconst buttonTextSizes = {\n medium: 'text-m leading-[24]',\n xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n inProgress:\n `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n quiet:\n `border-0 rounded-8 ${buttonDefaultStyling}`,\n utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n isDisabled:\n `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n // Buttontypes\n secondary:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n secondaryHref:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondaryDisabled:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n secondaryQuiet:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondaryQuietDisabled:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n secondaryLoading:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n secondaryQuietLoading:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n linkAsButton: 'inline-block hover:no-underline text-center',\n a11y: 'sr-only',\n fullWidth: \"w-full max-w-full\",\n contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n wrapper: 'inline-flex rounded-4 overflow-hidden',\n raised: 'i-shadow-$shadow-buttongroup',\n vertical: 'flex-col',\n nonOutlinedVertical: 'divide-y',\n nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n backdrop:\n 'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n modal:\n 'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n content:\n 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n transitionTitle: 'transition-all duration-300',\n transitionTitleCenter: 'justify-self-center',\n transitionTitleColSpan: 'col-span-2',\n title:\n '-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n titleText: 'mb-0 h4 sm:h3',\n titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,\n titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n alert: \"flex p-16 border border-l-4 rounded-4\",\n willChangeHeight: \"will-change-height\",\n textWrapper: \"last-child:mb-0 text-s\",\n title: \"text-s\",\n icon: \"w-16 mr-8 min-w-16\",\n negative: \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n negativeIcon: \"i-text-$color-alert-negative-icon\",\n positive: \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n positiveIcon: \"i-text-$color-alert-positive-icon\",\n warning: \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n warningIcon: \"i-text-$color-alert-warning-icon\",\n info: \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n textArea: 'min-h-[42] sm:min-h-[45]',\n disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n wrapper: 'relative',\n suffix: 'pr-40',\n prefix: 'pl-40',\n};\n\nexport const select = {\n default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n invalid: 'i-border-$color-select-border-negative',\n readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n wrapper: 'relative',\n selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n labelInvalid: 'i-text-$color-label-text-negative',\n optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n helpTextValid: 'i-text-$color-helptext-text-positive',\n helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n 'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n wrapper: prefixSuffixWrapperBase + 'right-0',\n wrapperWithLabel: 'w-max pr-12',\n wrapperWithIcon: 'w-40',\n label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n wrapper: prefixSuffixWrapperBase + 'left-0',\n wrapperWithLabel: 'w-max pl-12',\n wrapperWithIcon: 'w-40',\n label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n wrapper: 'flex space-x-8',\n text: 'i-text-$color-breadcrumbs-text',\n link: 'i-text-$color-breadcrumbs-link-text',\n separator: 'select-none i-text-$color-breadcrumbs-icon',\n a11y: 'sr-only',\n};\n\nexport const toggle = {\n field: 'relative text-m',\n wrapper: 'relative py-1',\n deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n input: 'peer',\n deadToggleInput: 'hidden',\n inputDisabled: 'pointer-events-none',\n focusable: 'peer-focus:focusable',\n focusableWithin: 'focus-within:focusable',\n label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n deadToggleLabel: '-mt-2',\n noContent: `before:content-[\"\"]`,\n indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n labelDisabled: 'pointer-events-none',\n checkbox: 'before:s-bg before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-hover',\n checkboxDisabled: 'peer-disabled:before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n labelCheckboxBorder: 'i-border-$color-checkbox-border',\n radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover ',\n radioDisabled: 'peer-disabled:before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled',\n labelRadioBorder: 'i-border-$color-radio-border',\n radioButtons: 'inline-flex relative font-bold rounded-8',\n radioButtonsGroup: 'group',\n radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n radioButtonsJustified: 'flex!',\n radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n a11y: 'sr-only',\n};\n\nexport const clickable = {\n toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n buttonOrLink: 'bg-transparent focusable',\n buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n wrapper: 'relative',\n combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n textMatch: 'font-bold',\n listbox: 'm-0 p-0 select-none list-none',\n option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n a11y: 'sr-only',\n};\n\nexport const attention = {\n base: 'border-2 relative flex items-start',\n tooltip:\n 'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n popover:\n 'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n arrowBase:\n 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n arrowDirectionLeft: '-left-[8px]',\n arrowDirectionRight: '-right-[8px]',\n arrowDirectionBottom: '-bottom-[8px]',\n arrowDirectionTop: '-top-[8px]',\n arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n content: 'last-child:mb-0',\n notCallout: 'absolute z-50',\n closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,\n};\n\nexport const backwardsCompatibleClasses = {\n modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0\n chevronBox: 'right-16', //removed in v1.4.0\n chevronNonBox: 'left-8', //removed in v1.4.0\n checkboxInvalid: 'peer-checked:before:i-border-$color-checkbox-negative-border-selected peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover', //replaced in v1.5.0\n radioInvalid: 'peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ', //replaced in v1.5.0\n radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-bg-$color-checkbox-background-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled', //replaced in v1.5.0\n};", "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"],
3
+ "sources": ["../../../packages/card/index.js", "../../../node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js", "../../../packages/utils/index.js"],
4
+ "sourcesContent": ["import { html, css } from \"lit\";\nimport WarpElement from \"@warp-ds/elements-core\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { card as ccCard } from \"@warp-ds/css/component-classes\";\nimport { fclasses } from \"../utils\";\n\nconst keys = {\n ENTER: \"Enter\",\n SPACE: \" \",\n};\n\nclass WarpCard extends WarpElement {\n static styles = [\n WarpElement.styles,\n css`\n a::after {\n content: \"\";\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n }\n :host {\n display: block;\n }\n `,\n ];\n\n static properties = {\n selected: { type: Boolean, reflect: true },\n flat: { type: Boolean },\n clickable: { type: Boolean },\n };\n\n constructor() {\n super();\n this.selected = false;\n this.flat = false;\n this.clickable = false;\n }\n\n get _outerClasses() {\n return fclasses({\n [ccCard.card]: true,\n [ccCard.cardShadow]: !this.flat,\n [this.selected ? ccCard.cardSelected : ccCard.cardUnselected]: !this.flat,\n [ccCard.cardFlat]: this.flat,\n [this.selected ? ccCard.cardFlatSelected : ccCard.cardFlatUnselected]:\n this.flat,\n });\n }\n\n get _innerClasses() {\n return fclasses({\n [ccCard.cardOutline]: true,\n [this.selected\n ? ccCard.cardOutlineSelected\n : ccCard.cardOutlineUnselected]: true,\n });\n }\n\n get uuButton() {\n return html`<button\n class=\"${ccCard.a11y}\"\n aria-pressed=\"${this.selected}\"\n tabindex=\"-1\"\n >\n Velg\n </button>`;\n }\n\n get uuSpan() {\n return html`<span\n role=\"checkbox\"\n aria-checked=\"true\"\n aria-disabled=\"true\"\n ></span>`;\n }\n\n keypressed(e) {\n if (!this.clickable || e.altKey || e.ctrlKey) return;\n if (e.key === keys.ENTER || e.key === keys.SPACE) {\n e.preventDefault();\n this.click();\n }\n }\n\n render() {\n return html`\n <div\n tabindex=${ifDefined(this.clickable ? \"0\" : undefined)}\n class=\"${this._outerClasses}\"\n @keydown=${this.keypressed}\n >\n ${this.clickable ? this.uuButton : \"\"}\n ${!this.clickable && this.selected ? this.uuSpan : \"\"}\n <div class=\"${this._innerClasses}\"></div>\n <slot></slot>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"w-card\")) {\n customElements.define(\"w-card\", WarpCard);\n}\n\nexport { WarpCard };\n", "export const pageIndicator = {\n wrapper: 'flex space-x-8 p-8',\n dot: 'h-8 w-8 rounded-full',\n inactive: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover',\n active: 'i-bg-$color-pageindicator-background-selected',\n};\n\n// Deprecated: Use Badge component\nexport const ribbon = {\n base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',\n info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',\n roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',\n};\n\nexport const badge = {\n base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',\n neutral: 'i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',\n info: 'i-bg-$color-badge-info-background i-text-$color-badge-info-text',\n positive: 'i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',\n warning: 'i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',\n negative: 'i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',\n disabled: 'i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',\n price: 'i-bg-$color-badge-price-background i-text-$color-badge-price-text',\n notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',\n positionBase: 'absolute backdrop-blur',\n positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',\n positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',\n positionBR: 'rounded-tr-0 rounded-br-0 rounded-bl-0 bottom-0 right-0',\n positionBL: 'rounded-tl-0 rounded-br-0 rounded-bl-0 bottom-0 left-0',\n};\n\nexport const slider = {\n wrapper: 'touch-pan-y relative w-full h-44 py-2',\n track:\n 'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',\n trackDisabled:\n 'pointer-events-none i-bg-$color-slider-track-background-disabled',\n activeTrack:\n 'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',\n activeTrackDisabled:\n 'i-bg-$color-slider-track-background-disabled pointer-events-none',\n thumb:\n 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',\n thumbEnabled:\n 'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',\n thumbDisabled:\n 'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',\n};\n\nexport const box = {\n box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable\n bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8\n info: 'i-bg-$color-box-info-background i-text-$color-box-info-text',\n neutral: 'i-bg-$color-box-neutral-background i-text-$color-box-neutral-text',\n bordered: 'border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text',\n infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',\n neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',\n borderedClickable: 'hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',\n};\n\nexport const pill = {\n pill: 'flex items-center',\n button: 'inline-flex items-center focusable text-xs transition-all',\n suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold',\n filter: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text',\n label: 'pl-12 py-8 rounded-l-full',\n labelWithoutClose: 'pr-12 rounded-r-full',\n labelWithClose: 'pr-2',\n close: 'pr-12 pl-4 py-8 rounded-r-full',\n a11y: 'sr-only',\n};\n\nexport const step = {\n step: 'group/step',\n stepVertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',\n stepVerticalLeft: 'grid-cols-[20px_1fr]',\n stepVerticalRight: 'grid-cols-[1fr_20px] text-right',\n stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',\n\n stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 i-text-$color-stepindicator-handle-icon',\n stepDotVerticalRight: 'col-start-2',\n stepDotHorizontal: 'row-start-2 justify-self-end',\n stepDotActive: 'i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background-active',\n stepDotIncomplete: 'i-border-$color-stepindicator-handle-border i-bg-$color-stepindicator-handle-background',\n\n stepLine: 'group-last/stepv:hidden transition-colors duration-300',\n stepLineVertical: 'w-2 h-full justify-self-center',\n stepLineVerticalRight: 'col-start-2',\n stepLineHorizontal: 'h-2 w-full row-start-2',\n stepLineHorizontalRight: 'group-last/steph:bg-transparent',\n stepLineHorizontalLeft: 'group-first/steph:bg-transparent',\n\n stepLineIncomplete: 'i-bg-$color-stepindicator-track-background',\n stepLineComplete: 'i-bg-$color-stepindicator-track-background-active',\n\n content: 'last:mb-0 group-last/step:last:pb-0',\n contentVertical: 'row-span-2 pb-32',\n contentHorizontal: 'col-span-3 px-16 row-start-1 text-center',\n};\n\nexport const steps = {\n steps: 'w-full',\n stepsHorizontal: 'flex',\n};\n\nexport const card = {\n card: 'cursor-pointer overflow-hidden relative transition-all',\n cardShadow: 'rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent',\n cardFlat: 'border-2 rounded-4',\n cardFlatUnselected:\n 'i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active',\n cardFlatSelected:\n 'i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active',\n cardUnselected: 's-bg',\n cardSelected:\n 'i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active',\n cardOutline:\n 'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',\n cardOutlineUnselected: 'i-border-$color-card-border',\n cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',\n a11y: 'sr-only',\n};\n\nexport const switchToggle = {\n switch: 'tap-highlight-transparent',\n label: 'block relative h-24 w-44 cursor-pointer group',\n labelDisabled: 'pointer-events-none',\n track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',\n trackActive: 'i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover',\n trackInactive: 'i-bg-$color-switch-track-background group-hover:i-bg-$color-switch-track-background-hover',\n trackDisabled: 'i-bg-$color-switch-track-background-disabled',\n handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',\n handleSelected: 'translate-x-20',\n handleNotDisabled: 'i-bg-$color-switch-handle-background i-shadow-$shadow-switch-handle',\n handleDisabled: 'i-bg-$color-switch-handle-background-disabled',\n a11y: 'sr-only',\n};\n\nexport const toaster = {\n container:\n 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',\n content: 'w-full',\n toaster:\n 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',\n};\n\nexport const toast = {\n wrapper: 'relative overflow-hidden w-full',\n toast:\n 'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',\n positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',\n warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',\n negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',\n icon: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',\n iconPositive: 'i-text-$color-toast-positive-icon',\n iconWarning: 'i-text-$color-toast-warning-icon',\n iconNegative: 'i-text-$color-toast-negative-icon',\n iconLoading: 'animate-bounce',\n content: 'self-center mr-8 py-4 last-child:mb-0',\n close: 'bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',\n};\n\nexport const tabs = {\n tabContainer: 'inline-grid relative',\n wunderbar:\n 'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',\n wrapperUnderlined:\n 'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',\n};\n\nexport const tab = {\n tab: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent i-text-$color-tabs-text i-border-$color-tabs-border hover:i-text-$color-tabs-text-hover hover:i-border-$color-tabs-border-hover',\n tabActive: 'i-text-$color-tabs-text-selected',\n icon: 'mx-auto hover:i-text-$color-tabs-text-hover',\n iconUnderlinedActive: 'i-text-$color-tabs-text-selected',\n content: 'flex items-center justify-center gap-8',\n contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings\n contentUnderlinedActive: 'i-text-$color-tabs-text-selected',\n};\n\n// Todo: Handle dynamic classnames\nexport const gridLayout = {\n cols1: 'grid-cols-1',\n cols2: 'grid-cols-2',\n cols3: 'grid-cols-3',\n cols4: 'grid-cols-4',\n cols5: 'grid-cols-5',\n cols6: 'grid-cols-6',\n cols7: 'grid-cols-7',\n cols8: 'grid-cols-8',\n cols9: 'grid-cols-9',\n};\n\nexport const buttonReset =\n 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';\n\nexport const expandable = {\n expandable: 'will-change-height',\n expandableTitle: 'font-bold i-text-$color-expandable-title-text',\n expandableBox: 'i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 ' + box.box,\n expandableBleed: box.bleed,\n chevron: 'inline-block align-middle i-text-$color-expandable-icon',\n chevronNonBox: 'ml-8',\n chevronBox: '',\n chevronTransform: 'transform transition-transform transform-gpu ease-in-out',\n chevronExpand: '-rotate-180',\n chevronCollapse: 'rotate-180',\n elementsTransformChevronDownPart: 'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',\n elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',\n elementsTransformChevronUpPart: 'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',\n elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',\n expansion: 'overflow-hidden',\n expansionNotExpanded: 'h-0 invisible',\n button: buttonReset + ' hover:underline focus-visible:underline',\n buttonBox: 'w-full text-left relative inline-flex items-center justify-between ' + box.box,\n paddingTop: 'pt-0',\n title: 'flex w-full justify-between items-center',\n titleType: 'h4',\n};\n\nconst buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';\n\nconst buttonColors = {\n primary: 'i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active',\n secondary: 'i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active',\n utility: 'i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active',\n destructive: 'i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active',\n pill: 'i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active',\n disabled: 'i-text-$color-button-disabled-text i-bg-$color-button-disabled-background',\n quiet: 'i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active',\n utilityQuiet: 'i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover',\n negativeQuiet: 'i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active',\n loading: 'i-text-$color-button-loading-text i-bg-$color-button-loading-background',\n link: 'i-text-$color-button-link-text',\n};\n\nconst buttonTypes = {\n primary: `border-0 rounded-8 ${buttonDefaultStyling}`,\n secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,\n utility: `border rounded-4 ${buttonDefaultStyling}`,\n negative: `border-0 rounded-8 ${buttonDefaultStyling}`,\n pill:\n `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,\n link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,\n};\n\nconst buttonSizes = {\n xsmall: 'py-6 px-16',\n small: 'py-8 px-16',\n medium: 'py-10 px-14',\n large: 'py-12 px-16',\n utility: 'py-[11px] px-[15px]',\n smallUtility: 'py-[7px] px-[15px]',\n pill: 'min-h-[44px] min-w-[44px]',\n pillSmall: 'min-h-32 min-w-32',\n link: 'p-0',\n};\n\nconst buttonTextSizes = {\n medium: 'text-m leading-[24]',\n xsmall: 'text-xs',\n};\n\nconst buttonVariants = {\n inProgress:\n `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited\n quiet:\n `border-0 rounded-8 ${buttonDefaultStyling}`,\n utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,\n negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,\n isDisabled:\n `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled\n};\n\nexport const button = {\n // Buttontypes\n secondary:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button\n secondaryHref:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondaryDisabled:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,\n secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,\n secondaryQuiet:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondaryQuietDisabled:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n secondaryLoading:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,\n secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n secondaryQuietLoading:\n `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta\n primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,\n primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,\n primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,\n primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,\n primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,\n primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,\n primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,\n\n utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`, // .button--utility\n utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`, // .button--utility-flat\n utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,\n utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,\n utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,\n utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,\n utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,\n utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,\n\n negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`, // .button--destructive\n negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`, // .button--destructive-flat\n negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,\n negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,\n negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,\n negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,\n negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,\n negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,\n negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,\n negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,\n\n pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`, // .button--pill\n pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,\n pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,\n\n link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,\n linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,\n linkAsButton: 'inline-block hover:no-underline text-center',\n a11y: 'sr-only',\n fullWidth: \"w-full max-w-full\",\n contentWidth: \"max-w-max\",\n};\n\nexport const buttonGroup = {\n wrapper: 'inline-flex rounded-4 overflow-hidden',\n raised: 'i-shadow-$shadow-buttongroup',\n vertical: 'flex-col',\n nonOutlinedVertical: 'divide-y',\n nonOutlinedHorizontal: 'divide-x',\n};\n\nexport const buttonGroupItem = {\n wrapper: 'relative i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',\n outlined: 'border hover:z-30 i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected',\n outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',\n outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',\n outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',\n outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',\n outlinedSelected: 'i-border-$color-buttongroup-utility-border-selected',\n selected: 'z-30 i-text-$color-buttongroup-utility-text-selected! i-bg-$color-buttongroup-utility-background-selected!',\n};\n\nexport const modal = {\n //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop\n transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[\"\"] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,\n backdrop:\n 'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]',\n modal:\n 'pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',\n content:\n 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',\n footer: 'flex justify-end shrink-0 px-16 sm:px-32',\n transitionTitle: 'transition-all duration-300',\n transitionTitleCenter: 'justify-self-center self-center',\n transitionTitleColSpan: 'col-span-2',\n title:\n 'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0',\n titleText: 'mb-0 h4 sm:h3',\n titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,\n titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',\n titleButtonRight: '-mr-8 sm:-mr-12 justify-self-end',\n titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',\n titleButtonIconRotated: 'transform rotate-90',\n};\n\nexport const alert = {\n alert: \"flex p-16 border border-l-4 rounded-4\",\n willChangeHeight: \"will-change-height\",\n textWrapper: \"last-child:mb-0 text-s\",\n title: \"text-s\",\n icon: \"w-16 mr-8 min-w-16\",\n negative: \"i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border\",\n negativeIcon: \"i-text-$color-alert-negative-icon\",\n positive: \"i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border\",\n positiveIcon: \"i-text-$color-alert-positive-icon\",\n warning: \"i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border\",\n warningIcon: \"i-text-$color-alert-warning-icon\",\n info: \"i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border\",\n infoIcon: \"i-text-$color-alert-info-icon\",\n};\n\nexport const input = {\n default: 'block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',\n textArea: 'min-h-[42] sm:min-h-[45]',\n disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',\n invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',\n readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',\n placeholder: 'placeholder:i-text-$color-input-text-placeholder',\n wrapper: 'relative',\n suffix: 'pr-40',\n prefix: 'pl-40',\n};\n\nexport const select = {\n default: 'block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',\n disabled: 'i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none',\n invalid: 'i-border-$color-select-border-negative',\n readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',\n wrapper: 'relative',\n selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,\n chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer',\n chevronDisabled: 'opacity-25',\n};\n\nexport const label = {\n label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text',\n labelInvalid: 'i-text-$color-label-text-negative',\n optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',\n};\n\nexport const helpText = {\n helpText: 'text-xs mt-4 block i-text-$color-helptext-text',\n helpTextValid: 'i-text-$color-helptext-text-positive',\n helpTextInvalid: 'i-text-$color-helptext-text-negative',\n};\n\nconst prefixSuffixWrapperBase =\n 'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';\n\nexport const suffix = {\n wrapper: prefixSuffixWrapperBase + 'right-0',\n wrapperWithLabel: 'w-max pr-12',\n wrapperWithIcon: 'w-40',\n label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const prefix = {\n wrapper: prefixSuffixWrapperBase + 'left-0',\n wrapperWithLabel: 'w-max pl-12',\n wrapperWithIcon: 'w-40',\n label: 'antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text',\n};\n\nexport const breadcrumbs = {\n wrapper: 'flex space-x-8',\n text: 'i-text-$color-breadcrumbs-text',\n link: 'i-text-$color-breadcrumbs-link-text',\n separator: 'select-none i-text-$color-breadcrumbs-icon',\n a11y: 'sr-only',\n};\n\nexport const toggle = {\n field: 'relative text-m',\n wrapper: 'relative py-1',\n deadToggleWrapper: 'h-20 w-20 pointer-events-none',\n input: 'peer',\n deadToggleInput: 'hidden',\n inputDisabled: 'pointer-events-none',\n focusable: 'peer-focus:focusable',\n focusableWithin: 'focus-within:focusable',\n label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',\n deadToggleLabel: '-mt-2',\n noContent: `before:content-[\"\"]`,\n indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-[\"-\"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,\n labelDisabled: 'pointer-events-none',\n checkbox: 'before:s-bg before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',\n checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',\n checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-hover',\n checkboxDisabled: 'peer-disabled:before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',\n labelCheckboxBorder: 'i-border-$color-checkbox-border',\n radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',\n radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',\n radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover ',\n radioDisabled: 'peer-disabled:before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled',\n labelRadioBorder: 'i-border-$color-radio-border',\n radioButtons: 'inline-flex relative font-bold rounded-8',\n radioButtonsGroup: 'group',\n radioButtonsLabel: 'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2',\n radioButtonsJustified: 'flex!',\n radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',\n radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',\n icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,\n a11y: 'sr-only',\n};\n\nexport const clickable = {\n toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',\n label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,\n buttonOrLink: 'bg-transparent focusable',\n buttonOrLinkStretch: 'inset-0 absolute',\n};\n\nexport const combobox = {\n wrapper: 'relative',\n combobox: 'absolute left-0 right-0 pb-8 rounded-8 i-bg-$color-combobox-background i-shadow-$shadow-combobox',\n textMatch: 'font-bold',\n listbox: 'm-0 p-0 select-none list-none',\n option: 'block cursor-pointer p-8 hover:i-bg-$color-combobox-option-background-hover',\n optionSelected: 'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover',\n a11y: 'sr-only',\n};\n\nexport const attention = {\n base: 'border-2 relative flex items-start',\n tooltip:\n 'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',\n callout: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8',\n highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',\n popover:\n 'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',\n arrowBase:\n 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',\n arrowDirectionLeft: '-left-[8px]',\n arrowDirectionRight: '-right-[8px]',\n arrowDirectionBottom: '-bottom-[8px]',\n arrowDirectionTop: '-top-[8px]',\n arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',\n arrowCallout: 'i-bg-$color-callout-background i-border-$color-callout-border',\n arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',\n arrowHighlight: 'i-bg-$color-callout-background i-border-$color-callout-border',\n content: 'last-child:mb-0',\n notCallout: 'absolute z-50',\n closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,\n};\n\nexport const backwardsCompatibleClasses = {\n modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0\n chevronBox: 'right-16', //removed in v1.4.0\n chevronNonBox: 'left-8', //removed in v1.4.0\n checkboxInvalid: 'peer-checked:before:i-border-$color-checkbox-negative-border-selected peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover', //replaced in v1.5.0\n radioInvalid: 'peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ', //replaced in v1.5.0\n radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-bg-$color-checkbox-background-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled', //replaced in v1.5.0\n modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start\n pillClose: 'pt-4 pb-6 text-m!' //replaced by py-8\n};\n\nexport const pagination = {\n currentPage: 'block md:hidden p-8 font-bold',\n icon: 'flex w-16 h-16 s-icon',\n containerNav: 'flex items-center justify-center space-x-8 p-8',\n heading: 'sr-only',\n pages: 'hidden md:block s-text-link',\n nextPage: 'flex items-center',\n firstPageButton: 'md:hidden',\n firstPageLabel: 'font-bold',\n active: 's-bg-primary s-text-inverted',\n defaultPage: 'hover:s-bg-primary-subtle-hover'\n};", "import { classMap } from 'lit/directives/class-map.js';\n\nconst camelCaseToKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();\n\n// Source: https://medium.com/@dayton-bobbitt/generating-attributes-for-litelement-properties-f972ef658137\nexport function kebabCaseAttributes(constructor) {\n return class extends constructor {\n static createProperty(name, options) {\n let customOptions = options;\n\n // derive the attribute name if not already defined or disabled\n if (typeof options?.attribute === 'undefined' || options?.attribute === true) {\n customOptions = Object.assign({}, options, {\n attribute: camelCaseToKebabCase(name.toString()),\n });\n }\n\n super.createProperty(name, customOptions);\n }\n };\n}\n\nexport function classes(defn) {\n const classes = [];\n for (const [key, value] of Object.entries(defn)) {\n if (value) classes.push(key);\n }\n return classes.join(' ');\n}\n\nexport function fclasses(definition) {\n const defn = {};\n for (const [key, value] of Object.entries(definition)) {\n for (const className of key.split(' ')) {\n defn[className] = value;\n }\n }\n return classMap(defn);\n}\n\nexport function generateRandomId() {\n return `m${Math.random().toString(36).slice(2)}`;\n}\n"],
5
5
  "mappings": "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",
6
6
  "names": []
7
7
  }
package/dist/packages/expandable/index.js CHANGED
@@ -1054,7 +1054,7 @@ function fclasses(definition) {
1054
1054
  return classMap(defn);
1055
1055
  }
1056
1056
 
1057
- // node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js
1057
+ // node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js
1058
1058
  var box = {
1059
1059
  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
1060
1060
  // Relative here enables w-clickable
@@ -1214,9 +1214,9 @@ var modal = {
1214
1214
  content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
1215
1215
  footer: "flex justify-end shrink-0 px-16 sm:px-32",
1216
1216
  transitionTitle: "transition-all duration-300",
1217
- transitionTitleCenter: "justify-self-center",
1217
+ transitionTitleCenter: "justify-self-center self-center",
1218
1218
  transitionTitleColSpan: "col-span-2",
1219
- 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",
1219
+ title: "py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
1220
1220
  titleText: "mb-0 h4 sm:h3",
1221
1221
  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
1222
1222
  titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",
@@ -1268,14 +1268,14 @@ var attention = {
1268
1268
  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
1269
1269
  };
1270
1270
 
1271
- // node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
1271
+ // node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
1272
1272
  import { LitElement } from "lit";
1273
1273
  import { unsafeStatic, html } from "lit/static-html.js";
1274
1274
 
1275
- // node_modules/.pnpm/@lingui+core@4.5.0/node_modules/@lingui/core/dist/index.mjs
1275
+ // node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
1276
1276
  var import_unraw = __toESM(require_dist(), 1);
1277
1277
 
1278
- // node_modules/.pnpm/@lingui+message-utils@4.5.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
1278
+ // node_modules/.pnpm/@lingui+message-utils@4.7.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
1279
1279
  var import_parser = __toESM(require_parser(), 1);
1280
1280
  function processTokens(tokens, mapText) {
1281
1281
  if (!tokens.filter((token) => token.type !== "content").length) {
@@ -1325,13 +1325,14 @@ Message: ${message}`);
1325
1325
  }
1326
1326
  }
1327
1327
 
1328
- // node_modules/.pnpm/@lingui+core@4.5.0/node_modules/@lingui/core/dist/index.mjs
1328
+ // node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
1329
1329
  var isString = (s) => typeof s === "string";
1330
1330
  var isFunction = (f) => typeof f === "function";
1331
1331
  var cache = /* @__PURE__ */ new Map();
1332
+ var defaultLocale = "en";
1332
1333
  function normalizeLocales(locales) {
1333
1334
  const out = Array.isArray(locales) ? locales : [locales];
1334
- return [...out, "en"];
1335
+ return [...out, defaultLocale];
1335
1336
  }
1336
1337
  function date(locales, value, format) {
1337
1338
  const _locales = normalizeLocales(locales);
@@ -1376,11 +1377,13 @@ function cacheKey(type, locales, options) {
1376
1377
  return `${type}-${localeKey}-${JSON.stringify(options)}`;
1377
1378
  }
1378
1379
  var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g;
1379
- var getDefaultFormats = (locale, locales, formats = {}) => {
1380
- locales = locales || locale;
1381
- const style = (format) => isString(format) ? formats[format] || { style: format } : format;
1380
+ var getDefaultFormats = (locale, passedLocales, formats = {}) => {
1381
+ const locales = passedLocales || locale;
1382
+ const style = (format) => {
1383
+ return typeof format === "object" ? format : formats[format] || { style: format };
1384
+ };
1382
1385
  const replaceOctothorpe = (value, message) => {
1383
- const numberFormat = Object.keys(formats).length ? style("number") : {};
1386
+ const numberFormat = Object.keys(formats).length ? style("number") : void 0;
1384
1387
  const valueStr = number(locales, value, numberFormat);
1385
1388
  return message.replace("#", valueStr);
1386
1389
  };
@@ -1395,17 +1398,19 @@ var getDefaultFormats = (locale, locales, formats = {}) => {
1395
1398
  const message = plural(locales, true, value, cases);
1396
1399
  return replaceOctothorpe(value - offset, message);
1397
1400
  },
1398
- select: (value, rules) => {
1399
- var _a;
1400
- return (_a = rules[value]) != null ? _a : rules.other;
1401
- },
1401
+ select: selectFormatter,
1402
1402
  number: (value, format) => number(locales, value, style(format)),
1403
1403
  date: (value, format) => date(locales, value, style(format)),
1404
- undefined: (value) => value
1404
+ undefined: undefinedFormatter
1405
1405
  };
1406
1406
  };
1407
+ var selectFormatter = (value, rules) => {
1408
+ var _a;
1409
+ return (_a = rules[value]) != null ? _a : rules.other;
1410
+ };
1411
+ var undefinedFormatter = (value) => value;
1407
1412
  function interpolate(translation, locale, locales) {
1408
- return (values, formats = {}) => {
1413
+ return (values = {}, formats) => {
1409
1414
  const formatters = getDefaultFormats(locale, locales, formats);
1410
1415
  const formatMessage = (message) => {
1411
1416
  if (!Array.isArray(message))
@@ -1415,14 +1420,15 @@ function interpolate(translation, locale, locales) {
1415
1420
  return message2 + token;
1416
1421
  const [name, type, format] = token;
1417
1422
  let interpolatedFormat = {};
1418
- if (format != null && !isString(format)) {
1419
- Object.keys(format).forEach((key) => {
1420
- interpolatedFormat[key] = formatMessage(format[key]);
1423
+ if (format != null && typeof format === "object") {
1424
+ Object.entries(format).forEach(([key, value2]) => {
1425
+ interpolatedFormat[key] = formatMessage(value2);
1421
1426
  });
1422
1427
  } else {
1423
1428
  interpolatedFormat = format;
1424
1429
  }
1425
- const value = formatters[type](values[name], interpolatedFormat);
1430
+ const formatter = formatters[type];
1431
+ const value = formatter(values[name], interpolatedFormat);
1426
1432
  if (value == null)
1427
1433
  return message2;
1428
1434
  return message2 + value;
@@ -1434,7 +1440,7 @@ function interpolate(translation, locale, locales) {
1434
1440
  }
1435
1441
  if (isString(result))
1436
1442
  return result.trim();
1437
- return result;
1443
+ return result ? String(result) : "";
1438
1444
  };
1439
1445
  }
1440
1446
  var __defProp$1 = Object.defineProperty;
@@ -1448,25 +1454,29 @@ var EventEmitter = class {
1448
1454
  __publicField$1(this, "_events", {});
1449
1455
  }
1450
1456
  on(event, listener) {
1451
- if (!this._hasEvent(event))
1452
- this._events[event] = [];
1457
+ var _a2;
1458
+ var _a;
1459
+ (_a2 = (_a = this._events)[event]) != null ? _a2 : _a[event] = [];
1453
1460
  this._events[event].push(listener);
1454
1461
  return () => this.removeListener(event, listener);
1455
1462
  }
1456
1463
  removeListener(event, listener) {
1457
- if (!this._hasEvent(event))
1464
+ const maybeListeners = this._getListeners(event);
1465
+ if (!maybeListeners)
1458
1466
  return;
1459
- const index = this._events[event].indexOf(listener);
1467
+ const index = maybeListeners.indexOf(listener);
1460
1468
  if (~index)
1461
- this._events[event].splice(index, 1);
1469
+ maybeListeners.splice(index, 1);
1462
1470
  }
1463
1471
  emit(event, ...args) {
1464
- if (!this._hasEvent(event))
1472
+ const maybeListeners = this._getListeners(event);
1473
+ if (!maybeListeners)
1465
1474
  return;
1466
- this._events[event].map((listener) => listener.apply(this, args));
1475
+ maybeListeners.map((listener) => listener.apply(this, args));
1467
1476
  }
1468
- _hasEvent(event) {
1469
- return Array.isArray(this._events[event]);
1477
+ _getListeners(event) {
1478
+ const maybeListeners = this._events[event];
1479
+ return Array.isArray(maybeListeners) ? maybeListeners : false;
1470
1480
  }
1471
1481
  };
1472
1482
  var __defProp2 = Object.defineProperty;
@@ -1477,23 +1487,22 @@ var __publicField2 = (obj, key, value) => {
1477
1487
  };
1478
1488
  var I18n = class extends EventEmitter {
1479
1489
  constructor(params) {
1490
+ var _a;
1480
1491
  super();
1481
- __publicField2(this, "_locale");
1492
+ __publicField2(this, "_locale", "");
1482
1493
  __publicField2(this, "_locales");
1483
- __publicField2(this, "_localeData");
1484
- __publicField2(this, "_messages");
1494
+ __publicField2(this, "_localeData", {});
1495
+ __publicField2(this, "_messages", {});
1485
1496
  __publicField2(this, "_missing");
1486
1497
  __publicField2(this, "t", this._.bind(this));
1487
- this._messages = {};
1488
- this._localeData = {};
1489
1498
  if (params.missing != null)
1490
1499
  this._missing = params.missing;
1491
1500
  if (params.messages != null)
1492
1501
  this.load(params.messages);
1493
1502
  if (params.localeData != null)
1494
1503
  this.loadLocaleData(params.localeData);
1495
- if (params.locale != null || params.locales != null) {
1496
- this.activate(params.locale, params.locales);
1504
+ if (typeof params.locale === "string" || params.locales) {
1505
+ this.activate((_a = params.locale) != null ? _a : defaultLocale, params.locales);
1497
1506
  }
1498
1507
  }
1499
1508
  get locale() {
@@ -1514,15 +1523,17 @@ var I18n = class extends EventEmitter {
1514
1523
  return (_a = this._localeData[this._locale]) != null ? _a : {};
1515
1524
  }
1516
1525
  _loadLocaleData(locale, localeData) {
1517
- if (this._localeData[locale] == null) {
1526
+ const maybeLocaleData = this._localeData[locale];
1527
+ if (!maybeLocaleData) {
1518
1528
  this._localeData[locale] = localeData;
1519
1529
  } else {
1520
- Object.assign(this._localeData[locale], localeData);
1530
+ Object.assign(maybeLocaleData, localeData);
1521
1531
  }
1522
1532
  }
1523
1533
  /**
1524
1534
  * @deprecated Plurals automatically used from Intl.PluralRules you can safely remove this call. Deprecated in v4
1525
1535
  */
1536
+ // @ts-ignore deprecated, so ignore the reported error
1526
1537
  loadLocaleData(localeOrAllData, localeData) {
1527
1538
  if (localeData != null) {
1528
1539
  this._loadLocaleData(localeOrAllData, localeData);
@@ -1534,18 +1545,19 @@ var I18n = class extends EventEmitter {
1534
1545
  this.emit("change");
1535
1546
  }
1536
1547
  _load(locale, messages5) {
1537
- if (this._messages[locale] == null) {
1548
+ const maybeMessages = this._messages[locale];
1549
+ if (!maybeMessages) {
1538
1550
  this._messages[locale] = messages5;
1539
1551
  } else {
1540
- Object.assign(this._messages[locale], messages5);
1552
+ Object.assign(maybeMessages, messages5);
1541
1553
  }
1542
1554
  }
1543
1555
  load(localeOrMessages, messages5) {
1544
- if (messages5 != null) {
1556
+ if (typeof localeOrMessages == "string" && typeof messages5 === "object") {
1545
1557
  this._load(localeOrMessages, messages5);
1546
1558
  } else {
1547
- Object.keys(localeOrMessages).forEach(
1548
- (locale) => this._load(locale, localeOrMessages[locale])
1559
+ Object.entries(localeOrMessages).forEach(
1560
+ ([locale, messages23]) => this._load(locale, messages23)
1549
1561
  );
1550
1562
  }
1551
1563
  this.emit("change");
@@ -1569,13 +1581,15 @@ var I18n = class extends EventEmitter {
1569
1581
  this._locales = locales;
1570
1582
  this.emit("change");
1571
1583
  }
1572
- _(id, values = {}, { message, formats } = {}) {
1584
+ _(id, values, options) {
1585
+ let message = options == null ? void 0 : options.message;
1573
1586
  if (!isString(id)) {
1574
1587
  values = id.values || values;
1575
1588
  message = id.message;
1576
1589
  id = id.id;
1577
1590
  }
1578
- const messageMissing = !this.messages[id];
1591
+ const messageForId = this.messages[id];
1592
+ const messageMissing = messageForId === void 0;
1579
1593
  const missing = this._missing;
1580
1594
  if (missing && messageMissing) {
1581
1595
  return isFunction(missing) ? missing(this._locale, id) : missing;
@@ -1583,7 +1597,7 @@ var I18n = class extends EventEmitter {
1583
1597
  if (messageMissing) {
1584
1598
  this.emit("missing", { id, locale: this._locale });
1585
1599
  }
1586
- let translation = this.messages[id] || message || id;
1600
+ let translation = messageForId || message || id;
1587
1601
  if (true) {
1588
1602
  translation = isString(translation) ? compileMessage(translation) : translation;
1589
1603
  }
@@ -1595,7 +1609,7 @@ var I18n = class extends EventEmitter {
1595
1609
  translation,
1596
1610
  this._locale,
1597
1611
  this._locales
1598
- )(values, formats);
1612
+ )(values, options == null ? void 0 : options.formats);
1599
1613
  }
1600
1614
  date(value, format) {
1601
1615
  return date(this._locales || this._locale, value, format);
@@ -1609,16 +1623,16 @@ function setupI18n(params = {}) {
1609
1623
  }
1610
1624
  var i18n = setupI18n();
1611
1625
 
1612
- // node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
1626
+ // node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/chevron-down-16.js
1613
1627
  var messages = JSON.parse('{"icon.title.chevron-down":"Nedoverpil"}');
1614
1628
  var messages2 = JSON.parse('{"icon.title.chevron-down":"Downward arrow"}');
1615
1629
  var messages3 = JSON.parse('{"icon.title.chevron-down":"Nuoli alasp\xE4in"}');
1616
1630
  var supportedLocales = ["en", "nb", "fi"];
1617
- var defaultLocale = "en";
1631
+ var defaultLocale2 = "en";
1618
1632
  var getSupportedLocale = (usedLocale) => {
1619
1633
  return supportedLocales.find(
1620
1634
  (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
1621
- ) || defaultLocale;
1635
+ ) || defaultLocale2;
1622
1636
  };
1623
1637
  function detectLocale() {
1624
1638
  if (typeof window === "undefined") {
@@ -1630,7 +1644,7 @@ function detectLocale() {
1630
1644
  return getSupportedLocale(htmlLocale);
1631
1645
  } catch (e) {
1632
1646
  console.warn("could not detect locale, falling back to source locale", e);
1633
- return defaultLocale;
1647
+ return defaultLocale2;
1634
1648
  }
1635
1649
  }
1636
1650
  var getMessages = (locale, enMsg, nbMsg, fiMsg) => {
@@ -1657,18 +1671,18 @@ if (!customElements.get("w-icon-chevron-down-16")) {
1657
1671
  customElements.define("w-icon-chevron-down-16", IconChevronDown16);
1658
1672
  }
1659
1673
 
1660
- // node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
1674
+ // node_modules/.pnpm/@warp-ds+icons@1.4.0/node_modules/@warp-ds/icons/dist/elements/chevron-up-16.js
1661
1675
  import { LitElement as LitElement2 } from "lit";
1662
1676
  import { unsafeStatic as unsafeStatic2, html as html2 } from "lit/static-html.js";
1663
1677
  var messages4 = JSON.parse('{"icon.title.chevron-up":"Oppoverpil"}');
1664
1678
  var messages22 = JSON.parse('{"icon.title.chevron-up":"Upward arrow"}');
1665
1679
  var messages32 = JSON.parse('{"icon.title.chevron-up":"Nuoli yl\xF6sp\xE4in"}');
1666
1680
  var supportedLocales2 = ["en", "nb", "fi"];
1667
- var defaultLocale2 = "en";
1681
+ var defaultLocale3 = "en";
1668
1682
  var getSupportedLocale2 = (usedLocale) => {
1669
1683
  return supportedLocales2.find(
1670
1684
  (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
1671
- ) || defaultLocale2;
1685
+ ) || defaultLocale3;
1672
1686
  };
1673
1687
  function detectLocale2() {
1674
1688
  if (typeof window === "undefined") {
@@ -1680,7 +1694,7 @@ function detectLocale2() {
1680
1694
  return getSupportedLocale2(htmlLocale);
1681
1695
  } catch (e) {
1682
1696
  console.warn("could not detect locale, falling back to source locale", e);
1683
- return defaultLocale2;
1697
+ return defaultLocale3;
1684
1698
  }
1685
1699
  }
1686
1700
  var getMessages2 = (locale, enMsg, nbMsg, fiMsg) => {