@warp-ds/elements 1.2.0-next.4 → 1.2.0-next.6

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

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

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

@@ -30,6 +30,10 @@ export class WarpAttention extends WarpAttention_base {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        canClose: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
         noArrow: {
             type: BooleanConstructor;
             reflect: boolean;
@@ -41,6 +45,7 @@ export class WarpAttention extends WarpAttention_base {
     callout: boolean;
     popover: boolean;
     highlight: boolean;
+    canClose: boolean;
     noArrow: boolean;
     connectedCallback(): void;
     set _actualDirection(arg: any);
@@ -66,6 +71,7 @@ export class WarpAttention extends WarpAttention_base {
         wrapper: any;
         arrow: any;
     };
+    get _ariaClose(): string;
     firstUpdated(): void;
     get _attentionEl(): any;
     get _targetEl(): any;
@@ -73,6 +79,9 @@ export class WarpAttention extends WarpAttention_base {
     get _wrapperClasses(): string;
     get _arrowClasses(): string;
     get _arrowHtml(): import("lit").TemplateResult<1> | "";
+    close(): void;
+    keypressed(e: any): void;
+    get _closeBtnHtml(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
 export {};

package/dist/packages/attention/index.js

@@ -1,14 +1,23 @@
-var Et=Object.create;var ye=Object.defineProperty,Ct=Object.defineProperties,Rt=Object.getOwnPropertyDescriptor,Tt=Object.getOwnPropertyDescriptors,At=Object.getOwnPropertyNames,ce=Object.getOwnPropertySymbols,Ot=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty,Ie=Object.prototype.propertyIsEnumerable;var ve=(e,t,o)=>t in e?ye(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,S=(e,t)=>{for(var o in t||(t={}))we.call(t,o)&&ve(e,o,t[o]);if(ce)for(var o of ce(t))Ie.call(t,o)&&ve(e,o,t[o]);return e},O=(e,t)=>Ct(e,Tt(t));var J=(e,t)=>{var o={};for(var r in e)we.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&ce)for(var r of ce(e))t.indexOf(r)<0&&Ie.call(e,r)&&(o[r]=e[r]);return o};var qe=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var Pt=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of At(t))!we.call(e,a)&&a!==o&&ye(e,a,{get:()=>t[a],enumerable:!(r=Rt(t,a))||r.enumerable});return e};var Mt=(e,t,o)=>(o=e!=null?Et(Ot(e)):{},Pt(t||!e||!e.__esModule?ye(o,"default",{value:e,enumerable:!0}):o,e));var ke=(e,t,o)=>(ve(e,typeof t!="symbol"?t+"":t,o),o);var ut=qe(q=>{"use strict";Object.defineProperty(q,"__esModule",{value:!0});q.errorMessages=q.ErrorType=void 0;var V;(function(e){e.MalformedUnicode="MALFORMED_UNICODE",e.MalformedHexadecimal="MALFORMED_HEXADECIMAL",e.CodePointLimit="CODE_POINT_LIMIT",e.OctalDeprecation="OCTAL_DEPRECATION",e.EndOfString="END_OF_STRING"})(V=q.ErrorType||(q.ErrorType={}));q.errorMessages=new Map([[V.MalformedUnicode,"malformed Unicode character escape sequence"],[V.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[V.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[V.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[V.EndOfString,"malformed escape sequence at end of string"]])});var gt=qe(H=>{"use strict";Object.defineProperty(H,"__esModule",{value:!0});H.unraw=H.errorMessages=H.ErrorType=void 0;var D=ut();Object.defineProperty(H,"ErrorType",{enumerable:!0,get:function(){return D.ErrorType}});Object.defineProperty(H,"errorMessages",{enumerable:!0,get:function(){return D.errorMessages}});function Zt(e){return!e.match(/[^a-f0-9]/i)?parseInt(e,16):NaN}function he(e,t,o){let r=Zt(e);if(Number.isNaN(r)||o!==void 0&&o!==e.length)throw new SyntaxError(D.errorMessages.get(t));return r}function eo(e){let t=he(e,D.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(t)}function bt(e,t){let o=he(e,D.ErrorType.MalformedUnicode,4);if(t!==void 0){let r=he(t,D.ErrorType.MalformedUnicode,4);return String.fromCharCode(o,r)}return String.fromCharCode(o)}function to(e){return e.charAt(0)==="{"&&e.charAt(e.length-1)==="}"}function oo(e){if(!to(e))throw new SyntaxError(D.errorMessages.get(D.ErrorType.MalformedUnicode));let t=e.slice(1,-1),o=he(t,D.ErrorType.MalformedUnicode);try{return String.fromCodePoint(o)}catch(r){throw r instanceof RangeError?new SyntaxError(D.errorMessages.get(D.ErrorType.CodePointLimit)):r}}function ro(e,t=!1){if(t)throw new SyntaxError(D.errorMessages.get(D.ErrorType.OctalDeprecation));let o=parseInt(e,8);return String.fromCharCode(o)}var io=new Map([["b","\b"],["f","\f"],["n",`
-`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function no(e){return io.get(e)||e}var lo=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function pt(e,t=!1){return e.replace(lo,function(o,r,a,n,l,i,c,p,g){if(r!==void 0)return"\\";if(a!==void 0)return eo(a);if(n!==void 0)return oo(n);if(l!==void 0)return bt(l,i);if(c!==void 0)return bt(c);if(p==="0")return"\0";if(p!==void 0)return ro(p,!t);if(g!==void 0)return no(g);throw new SyntaxError(D.errorMessages.get(D.ErrorType.EndOfString))})}H.unraw=pt;H.default=pt});import{css as vo,html as $e}from"lit";import Lt from"@warp-ds/elements-core";import{ifDefined as yo}from"lit/directives/if-defined.js";import{classMap as _o}from"lit/directives/class-map.js";var Ht=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();function Ue(e){return class extends e{static createProperty(t,o){let r=o;(typeof(o==null?void 0:o.attribute)=="undefined"||(o==null?void 0:o.attribute)===!0)&&(r=Object.assign({},o,{attribute:Ht(t.toString())})),super.createProperty(t,r)}}}function _e(e){let t=[];for(let[o,r]of Object.entries(e))r&&t.push(o);return t.join(" ")}function je(){return`m${Math.random().toString(36).slice(2)}`}var j={base:"border-2 relative",tooltip:"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",callout:"i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",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",popover:"i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",arrowBase:"absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",arrowDirectionLeft:"-left-[8px]",arrowDirectionRight:"-right-[8px]",arrowDirectionBottom:"-bottom-[8px]",arrowDirectionTop:"-top-[8px]",arrowTooltip:"i-bg-$color-tooltip-background i-border-$color-tooltip-background",arrowCallout:"i-bg-$color-callout-background i-border-$color-callout-border",arrowPopover:"i-bg-$color-popover-background i-border-$color-popover-background",arrowHighlight:"i-bg-$color-callout-background i-border-$color-callout-border",content:"last-child:mb-0",notCallout:"absolute z-50"};var De={box:"group block relative break-words last-child:mb-0 p-16 rounded-8",bleed:"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",info:"i-bg-$color-box-info-background i-text-$color-box-info-text",neutral:"i-bg-$color-box-neutral-background i-text-$color-box-neutral-text",bordered:"border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text",infoClickable:"hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",neutralClickable:"hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",borderedClickable:"hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"};var Bt="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",So={expandable:"will-change-height",expandableTitle:"font-bold i-text-$color-expandable-title-text",expandableBox:"i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 "+De.box,expandableBleed:De.bleed,chevron:"inline-block align-middle i-text-$color-expandable-icon",chevronNonBox:"relative left-8",chevronBox:"absolute right-16",chevronTransform:"transform transition-transform transform-gpu ease-in-out",chevronExpand:"-rotate-180",chevronCollapse:"rotate-180",expansion:"overflow-hidden",expansionNotExpanded:"h-0 invisible",button:Bt+" hover:underline focus:underline",buttonBox:"w-full text-left relative inline-flex items-center "+De.box,paddingTop:"pt-0",title:"flex justify-between items-center",titleType:"h4"},N="font-bold focusable justify-center transition-colors ease-in-out",v={primary:"i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",secondary:"i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",utility:"i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",destructive:"i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active",pill:"i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active",disabled:"i-text-$color-button-disabled-text i-bg-$color-button-disabled-background",quiet:"i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active",utilityQuiet:"i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover",negativeQuiet:"i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",loading:"i-text-$color-button-loading-text i-bg-$color-button-loading-background",link:"i-text-$color-button-link-text"},h={primary:`border-0 rounded-8 ${N}`,secondary:`border-2 rounded-8 ${N}`,utility:`border rounded-4 ${N}`,negative:`border-0 rounded-8 ${N}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${N}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline ${v.link}`},d={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},u={medium:"text-m leading-[24]",xsmall:"text-xs"},s={inProgress:`border-transparent animate-inprogress pointer-events-none ${v.loading}`,quiet:`border-0 rounded-8 ${N}`,utilityQuiet:`border-0 rounded-4 ${N}`,negativeQuiet:`border-0 rounded-8 ${N}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${v.disabled}`},Nt={secondary:`${d.medium} ${u.medium} ${h.secondary} ${v.secondary}`,secondaryHref:`${d.medium} ${u.medium} ${h.secondary} ${v.secondary}`,secondaryDisabled:`${d.medium} ${u.medium} ${h.secondary} ${s.isDisabled}`,secondarySmall:`${u.xsmall} ${d.xsmall} ${h.secondary} ${v.secondary}`,secondarySmallDisabled:`${u.xsmall} ${d.xsmall} ${h.secondary} ${s.isDisabled}`,secondaryQuiet:`${d.medium} ${u.medium} ${s.quiet} ${v.quiet}`,secondaryQuietDisabled:`${d.medium} ${u.medium} ${s.quiet} ${s.isDisabled}`,secondarySmallQuiet:`${u.xsmall} ${d.xsmall} ${s.quiet} ${v.quiet}`,secondarySmallQuietDisabled:`${u.xsmall} ${d.xsmall} ${s.quiet} ${s.isDisabled}`,secondaryLoading:`${d.medium} ${u.medium} ${h.secondary} ${s.inProgress}`,secondarySmallLoading:`${u.xsmall} ${d.xsmall}  ${h.secondary} ${s.inProgress}`,secondarySmallQuietLoading:`${u.xsmall} ${d.xsmall} ${s.quiet} ${s.inProgress}`,secondaryQuietLoading:`${d.medium} ${u.medium} ${s.quiet} ${s.inProgress}`,primary:`${d.large} ${u.medium} ${h.primary} ${v.primary}`,primaryDisabled:`${d.large} ${u.medium} ${s.isDisabled} ${h.primary}`,primarySmall:`${d.small} ${u.xsmall} ${h.primary} ${v.primary}`,primarySmallDisabled:`${d.small} ${u.xsmall} ${s.isDisabled} ${h.primary} `,primaryQuiet:`${d.large} ${u.medium} ${s.quiet} ${v.quiet}`,primaryQuietDisabled:`${d.large} ${u.medium} ${s.quiet} ${s.isDisabled}`,primarySmallQuiet:`${d.small} ${u.xsmall} ${s.quiet} ${v.quiet}`,primarySmallQuietDisabled:`${d.small} ${u.xsmall} ${s.quiet} ${s.isDisabled}`,primaryLoading:`${d.large} ${u.medium} ${s.inProgress} ${h.primary}`,primarySmallLoading:`${d.small} ${u.xsmall}  ${s.inProgress} ${h.primary}`,primarySmallQuietLoading:`${d.small} ${u.xsmall} ${s.quiet} ${s.inProgress} ${h.primary}`,primaryQuietLoading:`${d.large} ${u.medium} ${s.quiet} ${s.inProgress}`,utility:`${d.utility} ${u.medium} ${h.utility} ${v.utility}`,utilityDisabled:`${d.utility} ${u.medium} ${h.utility} ${s.isDisabled}`,utilityQuiet:`${d.large} ${u.medium} ${s.utilityQuiet} ${v.utilityQuiet}`,utilityQuietDisabled:`${d.large} ${u.medium} ${s.utilityQuiet} ${s.isDisabled}`,utilitySmall:`${d.smallUtility} ${u.xsmall} ${h.utility} ${v.utility}`,utilitySmallDisabled:`${d.smallUtility} ${u.xsmall} ${h.utility} ${s.isDisabled}`,utilitySmallQuiet:`${d.smallUtility} ${u.xsmall} ${s.utilityQuiet} ${v.utilityQuiet}`,utilitySmallQuietDisabled:`${d.smallUtility} ${u.xsmall} ${s.utilityQuiet} ${s.isDisabled}`,utilityLoading:`${d.large} ${u.medium} ${h.utility} ${s.inProgress}`,utilitySmallLoading:`${d.smallUtility} ${u.xsmall} ${h.utility} ${s.inProgress}`,utilityQuietLoading:`${d.large} ${u.medium} ${s.inProgress} ${s.utilityQuiet}`,utilitySmallQuietLoading:`${d.smallUtility} ${u.xsmall} ${s.inProgress} ${s.utilityQuiet}`,negative:`${d.large} ${u.medium} ${h.negative} ${v.destructive}`,negativeDisabled:`${d.large} ${u.medium} ${h.negative} ${s.isDisabled}`,negativeQuiet:`${d.large} ${u.medium} ${s.negativeQuiet} ${v.negativeQuiet}`,negativeQuietDisabled:`${d.large} ${u.medium} ${s.negativeQuiet}${s.isDisabled}`,negativeSmall:`${d.small} ${u.xsmall} ${h.negative} ${v.destructive}`,negativeSmallDisabled:`${d.small} ${u.xsmall} ${h.negative} ${s.isDisabled}`,negativeSmallQuiet:`${d.small} ${u.xsmall} ${s.negativeQuiet} ${v.negativeQuiet}`,negativeSmallQuietDisabled:`${d.small} ${u.xsmall} ${s.negativeQuiet} ${s.isDisabled}`,negativeLoading:`${d.large} ${u.medium} ${h.negative} ${s.inProgress}`,negativeSmallLoading:`${d.small} ${u.xsmall} ${s.inProgress} ${h.negative}`,negativeQuietLoading:`${d.large} ${u.medium} ${s.negativeQuiet} ${h.negative} ${s.inProgress}`,negativeSmallQuietLoading:`${d.small} ${u.xsmall} ${s.negativeQuiet} ${s.inProgress}`,pill:`${d.pill} ${u.medium} ${h.pill} ${v.pill}`,pillSmall:`${d.pillSmall} ${u.xsmall} ${h.pill} ${v.pill}`,pillLoading:`${d.pill} ${u.medium} ${h.pill} ${s.inProgress}`,pillSmallLoading:`${d.pillSmall} ${u.xsmall} ${h.pill} ${s.inProgress}`,link:`${d.link} ${u.medium} ${h.link}`,linkSmall:`${d.link} ${u.xsmall} ${h.link}`,linkAsButton:"inline-block hover:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"};var Eo={transparentBg:'before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25',backdrop:"fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20 [--w-modal-max-height:80%] [--w-modal-width:640px]",modal:"pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",content:"block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",footer:"flex justify-end shrink-0 px-16 sm:px-32",transitionTitle:"transition-all duration-300",transitionTitleCenter:"justify-self-center",transitionTitleColSpan:"col-span-2",title:"-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",titleText:"mb-0 h4 sm:h3",titleButton:Nt.pill+" sm:min-h-[32px] sm:min-w-[32px]",titleButtonLeft:"-ml-8 sm:-ml-12 justify-self-start",titleButtonRight:"-mr-8 sm:-mr-12 justify-self-end",titleButtonIcon:"h-16 w-16 sm:h-24 sm:w-24",titleButtonIconRotated:"transform rotate-90"};var Qt={label:"antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",labelInvalid:"i-text-$color-label-text-negative",optional:"pl-8 font-normal text-s i-text-$color-label-optional-text"};var ze="absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ",Co={wrapper:ze+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"},Ro={wrapper:ze+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"};var To={toggle:"absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",label:`px-12 ${Qt.label} py-8! cursor-pointer focusable focusable-inset`,buttonOrLink:"bg-transparent focusable",buttonOrLinkStretch:"inset-0 absolute"};function K(e){return e.split("-")[0]}function de(e){return e.split("-")[1]}function Y(e){return["top","bottom"].includes(K(e))?"x":"y"}function Se(e){return e==="y"?"height":"width"}function Ve(e,t,o){let{reference:r,floating:a}=e,n=r.x+r.width/2-a.width/2,l=r.y+r.height/2-a.height/2,i=Y(t),c=Se(i),p=r[c]/2-a[c]/2,g=i==="x",b;switch(K(t)){case"top":b={x:n,y:r.y-a.height};break;case"bottom":b={x:n,y:r.y+r.height};break;case"right":b={x:r.x+r.width,y:l};break;case"left":b={x:r.x-a.width,y:l};break;default:b={x:r.x,y:r.y}}switch(de(t)){case"start":b[i]-=p*(o&&g?-1:1);break;case"end":b[i]+=p*(o&&g?-1:1)}return b}var We=async(e,t,o)=>{let{placement:r="bottom",strategy:a="absolute",middleware:n=[],platform:l}=o,i=await(l.isRTL==null?void 0:l.isRTL(t)),c=await l.getElementRects({reference:e,floating:t,strategy:a}),{x:p,y:g}=Ve(c,r,i),b=r,x={},f=0;for(let m=0;m<n.length;m++){let{name:$,fn:y}=n[m],{x:w,y:L,data:_,reset:k}=await y({x:p,y:g,initialPlacement:r,placement:b,strategy:a,middlewareData:x,rects:c,platform:l,elements:{reference:e,floating:t}});p=w!=null?w:p,g=L!=null?L:g,x=O(S({},x),{[$]:S(S({},x[$]),_)}),k&&f<=50&&(f++,typeof k=="object"&&(k.placement&&(b=k.placement),k.rects&&(c=k.rects===!0?await l.getElementRects({reference:e,floating:t,strategy:a}):k.rects),{x:p,y:g}=Ve(c,b,i)),m=-1)}return{x:p,y:g,placement:b,strategy:a,middlewareData:x}};function Ge(e){return typeof e!="number"?function(t){return S({top:0,right:0,bottom:0,left:0},t)}(e):{top:e,right:e,bottom:e,left:e}}function X(e){return O(S({},e),{top:e.y,left:e.x,right:e.x+e.width,bottom:e.y+e.height})}async function Ee(e,t){var o;t===void 0&&(t={});let{x:r,y:a,platform:n,rects:l,elements:i,strategy:c}=e,{boundary:p="clippingAncestors",rootBoundary:g="viewport",elementContext:b="floating",altBoundary:x=!1,padding:f=0}=t,m=Ge(f),$=i[x?b==="floating"?"reference":"floating":b],y=X(await n.getClippingRect({element:(o=await(n.isElement==null?void 0:n.isElement($)))==null||o?$:$.contextElement||await(n.getDocumentElement==null?void 0:n.getDocumentElement(i.floating)),boundary:p,rootBoundary:g,strategy:c})),w=X(n.convertOffsetParentRelativeRectToViewportRelativeRect?await n.convertOffsetParentRelativeRectToViewportRelativeRect({rect:b==="floating"?O(S({},l.floating),{x:r,y:a}):l.reference,offsetParent:await(n.getOffsetParent==null?void 0:n.getOffsetParent(i.floating)),strategy:c}):l[b]);return{top:y.top-w.top+m.top,bottom:w.bottom-y.bottom+m.bottom,left:y.left-w.left+m.left,right:w.right-y.right+m.right}}var It=Math.min,qt=Math.max;function Le(e,t,o){return qt(e,It(t,o))}var Ce=e=>({name:"arrow",options:e,async fn(t){let{element:o,padding:r=0}=e!=null?e:{},{x:a,y:n,placement:l,rects:i,platform:c}=t;if(o==null)return{};let p=Ge(r),g={x:a,y:n},b=Y(l),x=de(l),f=Se(b),m=await c.getDimensions(o),$=b==="y"?"top":"left",y=b==="y"?"bottom":"right",w=i.reference[f]+i.reference[b]-g[b]-i.floating[f],L=g[b]-i.reference[b],_=await(c.getOffsetParent==null?void 0:c.getOffsetParent(o)),k=_?b==="y"?_.clientHeight||0:_.clientWidth||0:0;k===0&&(k=i.floating[f]);let ne=w/2-L/2,U=p[$],W=k-m[f]-p[y],T=k/2-m[f]/2+ne,E=Le(U,T,W),A=(x==="start"?p[$]:p[y])>0&&T!==E&&i.reference[f]<=i.floating[f];return{[b]:g[b]-(A?T<U?U-T:W-T:0),data:{[b]:E,centerOffset:T-E}}}}),Ut={left:"right",right:"left",bottom:"top",top:"bottom"};function se(e){return e.replace(/left|right|bottom|top/g,t=>Ut[t])}function jt(e,t,o){o===void 0&&(o=!1);let r=de(e),a=Y(e),n=Se(a),l=a==="x"?r===(o?"end":"start")?"right":"left":r==="start"?"bottom":"top";return t.reference[n]>t.floating[n]&&(l=se(l)),{main:l,cross:se(l)}}var zt={start:"end",end:"start"};function Fe(e){return e.replace(/start|end/g,t=>zt[t])}var Vt=["top","right","bottom","left"],Oo=Vt.reduce((e,t)=>e.concat(t,t+"-start",t+"-end"),[]);var Re=function(e){return e===void 0&&(e={}),{name:"flip",options:e,async fn(t){var o;let{placement:r,middlewareData:a,rects:n,initialPlacement:l,platform:i,elements:c}=t,T=e,{mainAxis:p=!0,crossAxis:g=!0,fallbackPlacements:b,fallbackStrategy:x="bestFit",flipAlignment:f=!0}=T,m=J(T,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","flipAlignment"]),$=K(r),y=b||($===l||!f?[se(l)]:function(E){let A=se(E);return[Fe(E),A,Fe(A)]}(l)),w=[l,...y],L=await Ee(t,m),_=[],k=((o=a.flip)==null?void 0:o.overflows)||[];if(p&&_.push(L[$]),g){let{main:E,cross:A}=jt(r,n,await(i.isRTL==null?void 0:i.isRTL(c.floating)));_.push(L[E],L[A])}if(k=[...k,{placement:r,overflows:_}],!_.every(E=>E<=0)){var ne,U;let E=((ne=(U=a.flip)==null?void 0:U.index)!=null?ne:0)+1,A=w[E];if(A)return{data:{index:E,overflows:k},reset:{placement:A}};let le="bottom";switch(x){case"bestFit":{var W;let Qe=(W=k.map(ae=>[ae,ae.overflows.filter(G=>G>0).reduce((G,St)=>G+St,0)]).sort((ae,G)=>ae[1]-G[1])[0])==null?void 0:W[0].placement;Qe&&(le=Qe);break}case"initialPlacement":le=l}if(r!==le)return{reset:{placement:le}}}return{}}}};var Te=function(e){return e===void 0&&(e=0),{name:"offset",options:e,async fn(t){let{x:o,y:r}=t,a=await async function(n,l){let{placement:i,platform:c,elements:p}=n,g=await(c.isRTL==null?void 0:c.isRTL(p.floating)),b=K(i),x=de(i),f=Y(i)==="x",m=["left","top"].includes(b)?-1:1,$=g&&f?-1:1,y=typeof l=="function"?l(n):l,{mainAxis:w,crossAxis:L,alignmentAxis:_}=typeof y=="number"?{mainAxis:y,crossAxis:0,alignmentAxis:null}:S({mainAxis:0,crossAxis:0,alignmentAxis:null},y);return x&&typeof _=="number"&&(L=x==="end"?-1*_:_),f?{x:L*$,y:w*m}:{x:w*m,y:L*$}}(t,e);return{x:o+a.x,y:r+a.y,data:a}}}};function Ft(e){return e==="x"?"y":"x"}var Ae=function(e){return e===void 0&&(e={}),{name:"shift",options:e,async fn(t){let{x:o,y:r,placement:a}=t,y=e,{mainAxis:n=!0,crossAxis:l=!1,limiter:i={fn:w=>{let{x:L,y:_}=w;return{x:L,y:_}}}}=y,c=J(y,["mainAxis","crossAxis","limiter"]),p={x:o,y:r},g=await Ee(t,c),b=Y(K(a)),x=Ft(b),f=p[b],m=p[x];if(n){let w=b==="y"?"bottom":"right";f=Le(f+g[b==="y"?"top":"left"],f,f-g[w])}if(l){let w=x==="y"?"bottom":"right";m=Le(m+g[x==="y"?"top":"left"],m,m-g[w])}let $=i.fn(O(S({},t),{[b]:f,[x]:m}));return O(S({},$),{data:{x:$.x-o,y:$.y-r}})}}};function et(e){return e&&e.document&&e.location&&e.alert&&e.setInterval}function M(e){if(e==null)return window;if(!et(e)){let t=e.ownerDocument;return t&&t.defaultView||window}return e}function ee(e){return M(e).getComputedStyle(e)}function P(e){return et(e)?"":e?(e.nodeName||"").toLowerCase():""}function tt(){let e=navigator.userAgentData;return e!=null&&e.brands?e.brands.map(t=>t.brand+"/"+t.version).join(" "):navigator.userAgent}function R(e){return e instanceof M(e).HTMLElement}function z(e){return e instanceof M(e).Element}function Pe(e){return typeof ShadowRoot=="undefined"?!1:e instanceof M(e).ShadowRoot||e instanceof ShadowRoot}function be(e){let{overflow:t,overflowX:o,overflowY:r}=ee(e);return/auto|scroll|overlay|hidden/.test(t+r+o)}function Wt(e){return["table","td","th"].includes(P(e))}function Je(e){let t=/firefox/i.test(tt()),o=ee(e);return o.transform!=="none"||o.perspective!=="none"||o.contain==="paint"||["transform","perspective"].includes(o.willChange)||t&&o.willChange==="filter"||t&&!!o.filter&&o.filter!=="none"}function ot(){return!/^((?!chrome|android).)*safari/i.test(tt())}var Xe=Math.min,Z=Math.max,ue=Math.round;function I(e,t,o){var r,a,n,l;t===void 0&&(t=!1),o===void 0&&(o=!1);let i=e.getBoundingClientRect(),c=1,p=1;t&&R(e)&&(c=e.offsetWidth>0&&ue(i.width)/e.offsetWidth||1,p=e.offsetHeight>0&&ue(i.height)/e.offsetHeight||1);let g=z(e)?M(e):window,b=!ot()&&o,x=(i.left+(b&&(r=(a=g.visualViewport)==null?void 0:a.offsetLeft)!=null?r:0))/c,f=(i.top+(b&&(n=(l=g.visualViewport)==null?void 0:l.offsetTop)!=null?n:0))/p,m=i.width/c,$=i.height/p;return{width:m,height:$,top:f,right:x+m,bottom:f+$,left:x,x,y:f}}function Q(e){return(t=e,(t instanceof M(t).Node?e.ownerDocument:e.document)||window.document).documentElement;var t}function pe(e){return z(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function rt(e){return I(Q(e)).left+pe(e).scrollLeft}function Gt(e,t,o){let r=R(t),a=Q(t),n=I(e,r&&function(c){let p=I(c);return ue(p.width)!==c.offsetWidth||ue(p.height)!==c.offsetHeight}(t),o==="fixed"),l={scrollLeft:0,scrollTop:0},i={x:0,y:0};if(r||!r&&o!=="fixed")if((P(t)!=="body"||be(a))&&(l=pe(t)),R(t)){let c=I(t,!0);i.x=c.x+t.clientLeft,i.y=c.y+t.clientTop}else a&&(i.x=rt(a));return{x:n.left+l.scrollLeft-i.x,y:n.top+l.scrollTop-i.y,width:n.width,height:n.height}}function it(e){return P(e)==="html"?e:e.assignedSlot||e.parentNode||(Pe(e)?e.host:null)||Q(e)}function Ke(e){return R(e)&&getComputedStyle(e).position!=="fixed"?e.offsetParent:null}function Oe(e){let t=M(e),o=Ke(e);for(;o&&Wt(o)&&getComputedStyle(o).position==="static";)o=Ke(o);return o&&(P(o)==="html"||P(o)==="body"&&getComputedStyle(o).position==="static"&&!Je(o))?t:o||function(r){let a=it(r);for(Pe(a)&&(a=a.host);R(a)&&!["html","body"].includes(P(a));){if(Je(a))return a;a=a.parentNode}return null}(e)||t}function Ye(e){if(R(e))return{width:e.offsetWidth,height:e.offsetHeight};let t=I(e);return{width:t.width,height:t.height}}function nt(e){let t=it(e);return["html","body","#document"].includes(P(t))?e.ownerDocument.body:R(t)&&be(t)?t:nt(t)}function lt(e,t){var o;t===void 0&&(t=[]);let r=nt(e),a=r===((o=e.ownerDocument)==null?void 0:o.body),n=M(r),l=a?[n].concat(n.visualViewport||[],be(r)?r:[]):r,i=t.concat(l);return a?i:i.concat(lt(l))}function Ze(e,t,o){return t==="viewport"?X(function(r,a){let n=M(r),l=Q(r),i=n.visualViewport,c=l.clientWidth,p=l.clientHeight,g=0,b=0;if(i){c=i.width,p=i.height;let x=ot();(x||!x&&a==="fixed")&&(g=i.offsetLeft,b=i.offsetTop)}return{width:c,height:p,x:g,y:b}}(e,o)):z(t)?function(r,a){let n=I(r,!1,a==="fixed"),l=n.top+r.clientTop,i=n.left+r.clientLeft;return{top:l,left:i,x:i,y:l,right:i+r.clientWidth,bottom:l+r.clientHeight,width:r.clientWidth,height:r.clientHeight}}(t,o):X(function(r){var a;let n=Q(r),l=pe(r),i=(a=r.ownerDocument)==null?void 0:a.body,c=Z(n.scrollWidth,n.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),p=Z(n.scrollHeight,n.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0),g=-l.scrollLeft+rt(r),b=-l.scrollTop;return ee(i||n).direction==="rtl"&&(g+=Z(n.clientWidth,i?i.clientWidth:0)-c),{width:c,height:p,x:g,y:b}}(Q(e)))}function Jt(e){let t=lt(e),o=["absolute","fixed"].includes(ee(e).position)&&R(e)?Oe(e):e;return z(o)?t.filter(r=>z(r)&&function(a,n){let l=n.getRootNode==null?void 0:n.getRootNode();if(a.contains(n))return!0;if(l&&Pe(l)){let i=n;do{if(i&&a===i)return!0;i=i.parentNode||i.host}while(i)}return!1}(r,o)&&P(r)!=="body"):[]}var Xt={getClippingRect:function(e){let{element:t,boundary:o,rootBoundary:r,strategy:a}=e,n=[...o==="clippingAncestors"?Jt(t):[].concat(o),r],l=n[0],i=n.reduce((c,p)=>{let g=Ze(t,p,a);return c.top=Z(g.top,c.top),c.right=Xe(g.right,c.right),c.bottom=Xe(g.bottom,c.bottom),c.left=Z(g.left,c.left),c},Ze(t,l,a));return{width:i.right-i.left,height:i.bottom-i.top,x:i.left,y:i.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{rect:t,offsetParent:o,strategy:r}=e,a=R(o),n=Q(o);if(o===n)return t;let l={scrollLeft:0,scrollTop:0},i={x:0,y:0};if((a||!a&&r!=="fixed")&&((P(o)!=="body"||be(n))&&(l=pe(o)),R(o))){let c=I(o,!0);i.x=c.x+o.clientLeft,i.y=c.y+o.clientTop}return O(S({},t),{x:t.x-l.scrollLeft+i.x,y:t.y-l.scrollTop+i.y})},isElement:z,getDimensions:Ye,getOffsetParent:Oe,getDocumentElement:Q,getElementRects:e=>{let{reference:t,floating:o,strategy:r}=e;return{reference:Gt(t,Oe(o),r),floating:O(S({},Ye(o)),{x:0,y:0})}},getClientRects:e=>Array.from(e.getClientRects()),isRTL:e=>ee(e).direction==="rtl"};var at=(e,t,o)=>We(e,t,S({platform:Xt},o));var te="top",oe="bottom",ge="left",fe="right",re={[te]:oe,[oe]:te,[ge]:fe,[fe]:ge},Fo={[te]:"\u2191",[oe]:"\u2193",[ge]:"\u2190",[fe]:"\u2192"};var st={[ge]:-45,[te]:45,[fe]:135,[oe]:-135},ct="calc(50% - 7px)",Kt=e=>[te,oe].includes(e);function Yt({actualDirection:e,directionName:t,arrowEl:o}){if(!o)return;e=t;let r=Kt(t);o.style.left=r?ct:"",o.style.top=r?"":ct}async function dt(e){var a,n;if(!e.isShowing)return;if(await((a=e==null?void 0:e.waitForDOM)==null?void 0:a.call(e)),e.isCallout)return Yt(e);let t=await at(e.targetEl,e.attentionEl,{placement:e.directionName,middleware:[Re(),Te(8),Ae({padding:16}),Ce({element:e.noArrow?void 0:e.arrowEl})]});e.actualDirection=t.placement,Object.assign(((n=e.attentionEl)==null?void 0:n.style)||{},{left:"0",top:"0",transform:`translate3d(${Math.round(t.x)}px, ${Math.round(t.y)}px, 0)`});let{x:o,y:r}=t.middlewareData.arrow;e.arrowEl&&(e.arrowEl.style.left=o?o+"px":"",e.arrowEl.style.top=r?r+"px":"")}var mt=Mt(gt(),1);var B=e=>typeof e=="string",ao=e=>typeof e=="function",ft=new Map;function Ne(e){return[...Array.isArray(e)?e:[e],"en"]}function xt(e,t,o){let r=Ne(e);return me(()=>xe("date",r,o),()=>new Intl.DateTimeFormat(r,o)).format(B(t)?new Date(t):t)}function Me(e,t,o){let r=Ne(e);return me(()=>xe("number",r,o),()=>new Intl.NumberFormat(r,o)).format(t)}function ht(e,t,o,n){var l=n,{offset:r=0}=l,a=J(l,["offset"]);var p,g;let i=Ne(e),c=t?me(()=>xe("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):me(()=>xe("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(g=(p=a[o])!=null?p:a[c.select(o-r)])!=null?g:a.other}function me(e,t){let o=e(),r=ft.get(o);return r||(r=t(),ft.set(o,r)),r}function xe(e,t,o){let r=t.join("-");return`${e}-${r}-${JSON.stringify(o)}`}var $t=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g,co=(e,t,o={})=>{t=t||e;let r=n=>B(n)?o[n]||{style:n}:n,a=(n,l)=>{let i=Object.keys(o).length?r("number"):{},c=Me(t,n,i);return l.replace("#",c)};return{plural:(n,l)=>{let{offset:i=0}=l,c=ht(t,!1,n,l);return a(n-i,c)},selectordinal:(n,l)=>{let{offset:i=0}=l,c=ht(t,!0,n,l);return a(n-i,c)},select:(n,l)=>{var i;return(i=l[n])!=null?i:l.other},number:(n,l)=>Me(t,n,r(l)),date:(n,l)=>xt(t,n,r(l)),undefined:n=>n}};function so(e,t,o){return(r,a={})=>{let n=co(t,o,a),l=c=>Array.isArray(c)?c.reduce((p,g)=>{if(B(g))return p+g;let[b,x,f]=g,m={};f!=null&&!B(f)?Object.keys(f).forEach(y=>{m[y]=l(f[y])}):m=f;let $=n[x](r[b],m);return $==null?p:p+$},""):c,i=l(e);return B(i)&&$t.test(i)?(0,mt.default)(i.trim()):B(i)?i.trim():i}}var uo=Object.defineProperty,bo=(e,t,o)=>t in e?uo(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,po=(e,t,o)=>(bo(e,typeof t!="symbol"?t+"":t,o),o),He=class{constructor(){po(this,"_events",{})}on(t,o){return this._hasEvent(t)||(this._events[t]=[]),this._events[t].push(o),()=>this.removeListener(t,o)}removeListener(t,o){if(!this._hasEvent(t))return;let r=this._events[t].indexOf(o);~r&&this._events[t].splice(r,1)}emit(t,...o){this._hasEvent(t)&&this._events[t].map(r=>r.apply(this,o))}_hasEvent(t){return Array.isArray(this._events[t])}},go=Object.defineProperty,fo=(e,t,o)=>t in e?go(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,F=(e,t,o)=>(fo(e,typeof t!="symbol"?t+"":t,o),o),Be=class extends He{constructor(t){super(),F(this,"_locale"),F(this,"_locales"),F(this,"_localeData"),F(this,"_messages"),F(this,"_missing"),F(this,"t",this._.bind(this)),this._messages={},this._localeData={},t.missing!=null&&(this._missing=t.missing),t.messages!=null&&this.load(t.messages),t.localeData!=null&&this.loadLocaleData(t.localeData),(t.locale!=null||t.locales!=null)&&this.activate(t.locale,t.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var t;return(t=this._messages[this._locale])!=null?t:{}}get localeData(){var t;return(t=this._localeData[this._locale])!=null?t:{}}_loadLocaleData(t,o){this._localeData[t]==null?this._localeData[t]=o:Object.assign(this._localeData[t],o)}loadLocaleData(t,o){o!=null?this._loadLocaleData(t,o):Object.keys(t).forEach(r=>this._loadLocaleData(r,t[r])),this.emit("change")}_load(t,o){this._messages[t]==null?this._messages[t]=o:Object.assign(this._messages[t],o)}load(t,o){o!=null?this._load(t,o):Object.keys(t).forEach(r=>this._load(r,t[r])),this.emit("change")}loadAndActivate({locale:t,locales:o,messages:r}){this._locale=t,this._locales=o||void 0,this._messages[this._locale]=r,this.emit("change")}activate(t,o){this._locale=t,this._locales=o,this.emit("change")}_(t,o={},{message:r,formats:a}={}){B(t)||(o=t.values||o,r=t.message,t=t.id);let n=!this.messages[t],l=this._missing;if(l&&n)return ao(l)?l(this._locale,t):l;n&&this.emit("missing",{id:t,locale:this._locale});let i=this.messages[t]||r||t;return B(i)&&$t.test(i)?JSON.parse(`"${i}"`):B(i)?i:so(i,this._locale,this._locales)(o,a)}date(t,o){return xt(this._locales||this._locale,t,o)}number(t,o){return Me(this._locales||this._locale,t,o)}};function ho(e={}){return new Be(e)}var C=ho();var vt=JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');var yt=JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');var wt=JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');var mo=["en","nb","fi"],_t="en",kt=e=>mo.find(t=>e===t||e.toLowerCase().includes(t))||_t;function xo(){if(typeof window=="undefined"){let e=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return kt(e)}try{let e=document.documentElement.lang;return kt(e)}catch(e){return console.warn("could not detect locale, falling back to source locale",e),_t}}var $o=(e,t,o,r)=>e==="nb"?o:e==="fi"?r:t,Dt=(e,t,o)=>{let r=xo(),a=$o(r,e,t,o);C.load(r,a),C.activate(r)};var ie=class extends Ue(Lt){constructor(){super(),Dt(vt,yt,wt),this.show=!1,this.tooltip=!1,this.callout=!1,this.popover=!1,this.highlight=!1,this.noArrow=!1}connectedCallback(){if(super.connectedCallback(),!this.placement||!Object.keys(re).includes(this.placement))throw new Error(`Invalid "placement" attribute. Set its value to one of the following:
-${JSON.stringify(Object.keys(re))}`);setTimeout(()=>this.requestUpdate(),0)}get _actualDirection(){return this.placement}set _actualDirection(t){this.placement=t}get _arrowDirection(){return re[this.placement]}updated(){this.callout||this._attentionEl.style.setProperty("--attention-visibility",this.show?"":"hidden"),this.tooltip||this._attentionEl.style.setProperty("--attention-display",this.show?"block":"none"),this.attentionState={isShowing:this.show,isCallout:this.callout,actualDirection:this._actualDirection,directionName:this.placement,arrowEl:this.renderRoot.querySelector("#arrow"),attentionEl:this._attentionEl,targetEl:this._targetEl,noArrow:this.noArrow},dt(this.attentionState)}pointingAtDirection(){switch(re[this._actualDirection]){case"top":return C._({id:"attention.aria.pointingUp",message:"pointing up",comment:"Default screenreader message for top direction in the attention component"});case"right":return C._({id:"attention.aria.pointingRight",message:"pointing right",comment:"Default screenreader message for right direction in the attention component"});case"bottom":return C._({id:"attention.aria.pointingDown",message:"pointing down",comment:"Default screenreader message for bottom direction in the attention component"});case"left":return C._({id:"attention.aria.pointingLeft",message:"pointing left",comment:"Default screenreader message for left direction in the attention component"});default:return""}}activeAttentionType(){switch(!0){case this.tooltip:return C._({id:"attention.aria.tooltip",message:"tooltip",comment:"Default screenreader message for tooltip in the attention component"});case this.callout:return C._({id:"attention.aria.callout",message:"callout speech bubble",comment:"Default screenreader message for callout speech bubble in the attention component"});case this.popover:return C._({id:"attention.aria.popover",message:"popover speech bubble",comment:"Default screenreader message for popover speech bubble in the attention component"});case this.highlight:return C._({id:"attention.aria.highlight",message:"highlighted speech bubble",comment:"Default screenreader message for highlighted speech bubble in the attention component"});default:return""}}defaultAriaLabel(){return`${this.activeAttentionType()} ${this.noArrow?"":this.pointingAtDirection()}`}setAriaLabels(){if(this._targetEl&&!this._targetEl.getAttribute("aria-details")){let t=this._messageEl.id||(this._messageEl.id=je());this._targetEl.setAttribute("aria-details",t)}}get _activeVariantClasses(){let t={callout:this.callout,popover:this.popover,tooltip:this.tooltip,highlight:this.highlight},o=Object.keys(t).find(r=>!!t[r])||"";return{wrapper:j[o],arrow:j[`arrow${o.charAt(0).toUpperCase()+o.slice(1)}`]}}firstUpdated(){this.setAriaLabels(),this.callout&&(this._attentionEl.style.position="relative")}get _attentionEl(){return this.renderRoot.querySelector("#attention")}get _targetEl(){return this.renderRoot.querySelector("slot[name='target']").assignedNodes()[0]}get _messageEl(){return this.renderRoot.querySelector("slot[name='message']").assignedNodes()[0]}get _wrapperClasses(){return _e({[j.base]:!0,[this._activeVariantClasses.wrapper]:!0})}get _arrowClasses(){return _e({[j.arrowBase]:!0,[j[`arrowDirection${this._arrowDirection.charAt(0).toUpperCase()+this._arrowDirection.slice(1)}`]]:!0,[this._activeVariantClasses.arrow]:!0})}get _arrowHtml(){return this.noArrow?"":$e`<div
+var Et=Object.create;var ye=Object.defineProperty,Rt=Object.defineProperties,Tt=Object.getOwnPropertyDescriptor,At=Object.getOwnPropertyDescriptors,Ot=Object.getOwnPropertyNames,ce=Object.getOwnPropertySymbols,Pt=Object.getPrototypeOf,we=Object.prototype.hasOwnProperty,Ie=Object.prototype.propertyIsEnumerable;var ve=(e,t,o)=>t in e?ye(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,C=(e,t)=>{for(var o in t||(t={}))we.call(t,o)&&ve(e,o,t[o]);if(ce)for(var o of ce(t))Ie.call(t,o)&&ve(e,o,t[o]);return e},O=(e,t)=>Rt(e,At(t));var J=(e,t)=>{var o={};for(var r in e)we.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(e!=null&&ce)for(var r of ce(e))t.indexOf(r)<0&&Ie.call(e,r)&&(o[r]=e[r]);return o};var qe=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var Mt=(e,t,o,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of Ot(t))!we.call(e,a)&&a!==o&&ye(e,a,{get:()=>t[a],enumerable:!(r=Tt(t,a))||r.enumerable});return e};var Bt=(e,t,o)=>(o=e!=null?Et(Pt(e)):{},Mt(t||!e||!e.__esModule?ye(o,"default",{value:e,enumerable:!0}):o,e));var ke=(e,t,o)=>(ve(e,typeof t!="symbol"?t+"":t,o),o);var ut=qe(j=>{"use strict";Object.defineProperty(j,"__esModule",{value:!0});j.errorMessages=j.ErrorType=void 0;var V;(function(e){e.MalformedUnicode="MALFORMED_UNICODE",e.MalformedHexadecimal="MALFORMED_HEXADECIMAL",e.CodePointLimit="CODE_POINT_LIMIT",e.OctalDeprecation="OCTAL_DEPRECATION",e.EndOfString="END_OF_STRING"})(V=j.ErrorType||(j.ErrorType={}));j.errorMessages=new Map([[V.MalformedUnicode,"malformed Unicode character escape sequence"],[V.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[V.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[V.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[V.EndOfString,"malformed escape sequence at end of string"]])});var gt=qe(B=>{"use strict";Object.defineProperty(B,"__esModule",{value:!0});B.unraw=B.errorMessages=B.ErrorType=void 0;var D=ut();Object.defineProperty(B,"ErrorType",{enumerable:!0,get:function(){return D.ErrorType}});Object.defineProperty(B,"errorMessages",{enumerable:!0,get:function(){return D.errorMessages}});function Zt(e){return!e.match(/[^a-f0-9]/i)?parseInt(e,16):NaN}function me(e,t,o){let r=Zt(e);if(Number.isNaN(r)||o!==void 0&&o!==e.length)throw new SyntaxError(D.errorMessages.get(t));return r}function eo(e){let t=me(e,D.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(t)}function bt(e,t){let o=me(e,D.ErrorType.MalformedUnicode,4);if(t!==void 0){let r=me(t,D.ErrorType.MalformedUnicode,4);return String.fromCharCode(o,r)}return String.fromCharCode(o)}function to(e){return e.charAt(0)==="{"&&e.charAt(e.length-1)==="}"}function oo(e){if(!to(e))throw new SyntaxError(D.errorMessages.get(D.ErrorType.MalformedUnicode));let t=e.slice(1,-1),o=me(t,D.ErrorType.MalformedUnicode);try{return String.fromCodePoint(o)}catch(r){throw r instanceof RangeError?new SyntaxError(D.errorMessages.get(D.ErrorType.CodePointLimit)):r}}function ro(e,t=!1){if(t)throw new SyntaxError(D.errorMessages.get(D.ErrorType.OctalDeprecation));let o=parseInt(e,8);return String.fromCharCode(o)}var io=new Map([["b","\b"],["f","\f"],["n",`
+`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function no(e){return io.get(e)||e}var lo=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function pt(e,t=!1){return e.replace(lo,function(o,r,a,n,l,i,s,p,g){if(r!==void 0)return"\\";if(a!==void 0)return eo(a);if(n!==void 0)return oo(n);if(l!==void 0)return bt(l,i);if(s!==void 0)return bt(s);if(p==="0")return"\0";if(p!==void 0)return ro(p,!t);if(g!==void 0)return no(g);throw new SyntaxError(D.errorMessages.get(D.ErrorType.EndOfString))})}B.unraw=pt;B.default=pt});import{css as vo,html as ie,nothing as Lt}from"lit";import Ct from"@warp-ds/elements-core";import{ifDefined as yo}from"lit/directives/if-defined.js";import{classMap as _o}from"lit/directives/class-map.js";var Ht=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();function je(e){return class extends e{static createProperty(t,o){let r=o;(typeof(o==null?void 0:o.attribute)=="undefined"||(o==null?void 0:o.attribute)===!0)&&(r=Object.assign({},o,{attribute:Ht(t.toString())})),super.createProperty(t,r)}}}function _e(e){let t=[];for(let[o,r]of Object.entries(e))r&&t.push(o);return t.join(" ")}function Ue(){return`m${Math.random().toString(36).slice(2)}`}var De={box:"group block relative break-words last-child:mb-0 p-16 rounded-8",bleed:"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",info:"i-bg-$color-box-info-background i-text-$color-box-info-text",neutral:"i-bg-$color-box-neutral-background i-text-$color-box-neutral-text",bordered:"border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text",infoClickable:"hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",neutralClickable:"hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",borderedClickable:"hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"};var Nt="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",Co={expandable:"will-change-height",expandableTitle:"font-bold i-text-$color-expandable-title-text",expandableBox:"i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 "+De.box,expandableBleed:De.bleed,chevron:"inline-block align-middle i-text-$color-expandable-icon",chevronNonBox:"relative left-8",chevronBox:"absolute right-16",chevronTransform:"transform transition-transform transform-gpu ease-in-out",chevronExpand:"-rotate-180",chevronCollapse:"rotate-180",expansion:"overflow-hidden",expansionNotExpanded:"h-0 invisible",button:Nt+" hover:underline focus:underline",buttonBox:"w-full text-left relative inline-flex items-center "+De.box,paddingTop:"pt-0",title:"flex justify-between items-center",titleType:"h4"},N="font-bold focusable justify-center transition-colors ease-in-out",v={primary:"i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",secondary:"i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",utility:"i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",destructive:"i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active",pill:"i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active",disabled:"i-text-$color-button-disabled-text i-bg-$color-button-disabled-background",quiet:"i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active",utilityQuiet:"i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover",negativeQuiet:"i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",loading:"i-text-$color-button-loading-text i-bg-$color-button-loading-background",link:"i-text-$color-button-link-text"},f={primary:`border-0 rounded-8 ${N}`,secondary:`border-2 rounded-8 ${N}`,utility:`border rounded-4 ${N}`,negative:`border-0 rounded-8 ${N}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${N}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline ${v.link}`},u={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},d={medium:"text-m leading-[24]",xsmall:"text-xs"},c={inProgress:`border-transparent animate-inprogress pointer-events-none ${v.loading}`,quiet:`border-0 rounded-8 ${N}`,utilityQuiet:`border-0 rounded-4 ${N}`,negativeQuiet:`border-0 rounded-8 ${N}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${v.disabled}`},So={secondary:`${u.medium} ${d.medium} ${f.secondary} ${v.secondary}`,secondaryHref:`${u.medium} ${d.medium} ${f.secondary} ${v.secondary}`,secondaryDisabled:`${u.medium} ${d.medium} ${f.secondary} ${c.isDisabled}`,secondarySmall:`${d.xsmall} ${u.xsmall} ${f.secondary} ${v.secondary}`,secondarySmallDisabled:`${d.xsmall} ${u.xsmall} ${f.secondary} ${c.isDisabled}`,secondaryQuiet:`${u.medium} ${d.medium} ${c.quiet} ${v.quiet}`,secondaryQuietDisabled:`${u.medium} ${d.medium} ${c.quiet} ${c.isDisabled}`,secondarySmallQuiet:`${d.xsmall} ${u.xsmall} ${c.quiet} ${v.quiet}`,secondarySmallQuietDisabled:`${d.xsmall} ${u.xsmall} ${c.quiet} ${c.isDisabled}`,secondaryLoading:`${u.medium} ${d.medium} ${f.secondary} ${c.inProgress}`,secondarySmallLoading:`${d.xsmall} ${u.xsmall}  ${f.secondary} ${c.inProgress}`,secondarySmallQuietLoading:`${d.xsmall} ${u.xsmall} ${c.quiet} ${c.inProgress}`,secondaryQuietLoading:`${u.medium} ${d.medium} ${c.quiet} ${c.inProgress}`,primary:`${u.large} ${d.medium} ${f.primary} ${v.primary}`,primaryDisabled:`${u.large} ${d.medium} ${c.isDisabled} ${f.primary}`,primarySmall:`${u.small} ${d.xsmall} ${f.primary} ${v.primary}`,primarySmallDisabled:`${u.small} ${d.xsmall} ${c.isDisabled} ${f.primary} `,primaryQuiet:`${u.large} ${d.medium} ${c.quiet} ${v.quiet}`,primaryQuietDisabled:`${u.large} ${d.medium} ${c.quiet} ${c.isDisabled}`,primarySmallQuiet:`${u.small} ${d.xsmall} ${c.quiet} ${v.quiet}`,primarySmallQuietDisabled:`${u.small} ${d.xsmall} ${c.quiet} ${c.isDisabled}`,primaryLoading:`${u.large} ${d.medium} ${c.inProgress} ${f.primary}`,primarySmallLoading:`${u.small} ${d.xsmall}  ${c.inProgress} ${f.primary}`,primarySmallQuietLoading:`${u.small} ${d.xsmall} ${c.quiet} ${c.inProgress} ${f.primary}`,primaryQuietLoading:`${u.large} ${d.medium} ${c.quiet} ${c.inProgress}`,utility:`${u.utility} ${d.medium} ${f.utility} ${v.utility}`,utilityDisabled:`${u.utility} ${d.medium} ${f.utility} ${c.isDisabled}`,utilityQuiet:`${u.large} ${d.medium} ${c.utilityQuiet} ${v.utilityQuiet}`,utilityQuietDisabled:`${u.large} ${d.medium} ${c.utilityQuiet} ${c.isDisabled}`,utilitySmall:`${u.smallUtility} ${d.xsmall} ${f.utility} ${v.utility}`,utilitySmallDisabled:`${u.smallUtility} ${d.xsmall} ${f.utility} ${c.isDisabled}`,utilitySmallQuiet:`${u.smallUtility} ${d.xsmall} ${c.utilityQuiet} ${v.utilityQuiet}`,utilitySmallQuietDisabled:`${u.smallUtility} ${d.xsmall} ${c.utilityQuiet} ${c.isDisabled}`,utilityLoading:`${u.large} ${d.medium} ${f.utility} ${c.inProgress}`,utilitySmallLoading:`${u.smallUtility} ${d.xsmall} ${f.utility} ${c.inProgress}`,utilityQuietLoading:`${u.large} ${d.medium} ${c.inProgress} ${c.utilityQuiet}`,utilitySmallQuietLoading:`${u.smallUtility} ${d.xsmall} ${c.inProgress} ${c.utilityQuiet}`,negative:`${u.large} ${d.medium} ${f.negative} ${v.destructive}`,negativeDisabled:`${u.large} ${d.medium} ${f.negative} ${c.isDisabled}`,negativeQuiet:`${u.large} ${d.medium} ${c.negativeQuiet} ${v.negativeQuiet}`,negativeQuietDisabled:`${u.large} ${d.medium} ${c.negativeQuiet}${c.isDisabled}`,negativeSmall:`${u.small} ${d.xsmall} ${f.negative} ${v.destructive}`,negativeSmallDisabled:`${u.small} ${d.xsmall} ${f.negative} ${c.isDisabled}`,negativeSmallQuiet:`${u.small} ${d.xsmall} ${c.negativeQuiet} ${v.negativeQuiet}`,negativeSmallQuietDisabled:`${u.small} ${d.xsmall} ${c.negativeQuiet} ${c.isDisabled}`,negativeLoading:`${u.large} ${d.medium} ${f.negative} ${c.inProgress}`,negativeSmallLoading:`${u.small} ${d.xsmall} ${c.inProgress} ${f.negative}`,negativeQuietLoading:`${u.large} ${d.medium} ${c.negativeQuiet} ${f.negative} ${c.inProgress}`,negativeSmallQuietLoading:`${u.small} ${d.xsmall} ${c.negativeQuiet} ${c.inProgress}`,pill:`${u.pill} ${d.medium} ${f.pill} ${v.pill}`,pillSmall:`${u.pillSmall} ${d.xsmall} ${f.pill} ${v.pill}`,pillLoading:`${u.pill} ${d.medium} ${f.pill} ${c.inProgress}`,pillSmallLoading:`${u.pillSmall} ${d.xsmall} ${f.pill} ${c.inProgress}`,link:`${u.link} ${d.medium} ${f.link}`,linkSmall:`${u.link} ${d.xsmall} ${f.link}`,linkAsButton:"inline-block hover:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"};var Eo={transparentBg:'before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25',backdrop:"fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20 [--w-modal-max-height:80%] [--w-modal-width:640px]",modal:"pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",content:"block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",footer:"flex justify-end shrink-0 px-16 sm:px-32",transitionTitle:"transition-all duration-300",transitionTitleCenter:"justify-self-center",transitionTitleColSpan:"col-span-2",title:"-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",titleText:"mb-0 h4 sm:h3",titleButton:`${d.medium} ${f.pill} ${v.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,titleButtonLeft:"-ml-8 sm:-ml-12 justify-self-start",titleButtonRight:"-mr-8 sm:-mr-12 justify-self-end",titleButtonIcon:"h-16 w-16 sm:h-24 sm:w-24",titleButtonIconRotated:"transform rotate-90"};var Qt={label:"antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",labelInvalid:"i-text-$color-label-text-negative",optional:"pl-8 font-normal text-s i-text-$color-label-optional-text"};var ze="absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ",Ro={wrapper:ze+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"},To={wrapper:ze+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"};var Ao={toggle:"absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",label:`px-12 ${Qt.label} py-8! cursor-pointer focusable focusable-inset`,buttonOrLink:"bg-transparent focusable",buttonOrLinkStretch:"inset-0 absolute"};var I={base:"border-2 relative flex items-start",tooltip:"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",callout:"i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",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",popover:"i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",arrowBase:"absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",arrowDirectionLeft:"-left-[8px]",arrowDirectionRight:"-right-[8px]",arrowDirectionBottom:"-bottom-[8px]",arrowDirectionTop:"-top-[8px]",arrowTooltip:"i-bg-$color-tooltip-background i-border-$color-tooltip-background",arrowCallout:"i-bg-$color-callout-background i-border-$color-callout-border",arrowPopover:"i-bg-$color-popover-background i-border-$color-popover-background",arrowHighlight:"i-bg-$color-callout-background i-border-$color-callout-border",content:"last-child:mb-0",notCallout:"absolute z-50",closeBtn:`${d.medium} ${f.pill} ${v.pill} justify-self-end -mr-8 ml-8`};function K(e){return e.split("-")[0]}function ue(e){return e.split("-")[1]}function Y(e){return["top","bottom"].includes(K(e))?"x":"y"}function Ce(e){return e==="y"?"height":"width"}function Ve(e,t,o){let{reference:r,floating:a}=e,n=r.x+r.width/2-a.width/2,l=r.y+r.height/2-a.height/2,i=Y(t),s=Ce(i),p=r[s]/2-a[s]/2,g=i==="x",b;switch(K(t)){case"top":b={x:n,y:r.y-a.height};break;case"bottom":b={x:n,y:r.y+r.height};break;case"right":b={x:r.x+r.width,y:l};break;case"left":b={x:r.x-a.width,y:l};break;default:b={x:r.x,y:r.y}}switch(ue(t)){case"start":b[i]-=p*(o&&g?-1:1);break;case"end":b[i]+=p*(o&&g?-1:1)}return b}var We=async(e,t,o)=>{let{placement:r="bottom",strategy:a="absolute",middleware:n=[],platform:l}=o,i=await(l.isRTL==null?void 0:l.isRTL(t)),s=await l.getElementRects({reference:e,floating:t,strategy:a}),{x:p,y:g}=Ve(s,r,i),b=r,x={},h=0;for(let m=0;m<n.length;m++){let{name:$,fn:y}=n[m],{x:w,y:L,data:_,reset:k}=await y({x:p,y:g,initialPlacement:r,placement:b,strategy:a,middlewareData:x,rects:s,platform:l,elements:{reference:e,floating:t}});p=w!=null?w:p,g=L!=null?L:g,x=O(C({},x),{[$]:C(C({},x[$]),_)}),k&&h<=50&&(h++,typeof k=="object"&&(k.placement&&(b=k.placement),k.rects&&(s=k.rects===!0?await l.getElementRects({reference:e,floating:t,strategy:a}):k.rects),{x:p,y:g}=Ve(s,b,i)),m=-1)}return{x:p,y:g,placement:b,strategy:a,middlewareData:x}};function Ge(e){return typeof e!="number"?function(t){return C({top:0,right:0,bottom:0,left:0},t)}(e):{top:e,right:e,bottom:e,left:e}}function X(e){return O(C({},e),{top:e.y,left:e.x,right:e.x+e.width,bottom:e.y+e.height})}async function Se(e,t){var o;t===void 0&&(t={});let{x:r,y:a,platform:n,rects:l,elements:i,strategy:s}=e,{boundary:p="clippingAncestors",rootBoundary:g="viewport",elementContext:b="floating",altBoundary:x=!1,padding:h=0}=t,m=Ge(h),$=i[x?b==="floating"?"reference":"floating":b],y=X(await n.getClippingRect({element:(o=await(n.isElement==null?void 0:n.isElement($)))==null||o?$:$.contextElement||await(n.getDocumentElement==null?void 0:n.getDocumentElement(i.floating)),boundary:p,rootBoundary:g,strategy:s})),w=X(n.convertOffsetParentRelativeRectToViewportRelativeRect?await n.convertOffsetParentRelativeRectToViewportRelativeRect({rect:b==="floating"?O(C({},l.floating),{x:r,y:a}):l.reference,offsetParent:await(n.getOffsetParent==null?void 0:n.getOffsetParent(i.floating)),strategy:s}):l[b]);return{top:y.top-w.top+m.top,bottom:w.bottom-y.bottom+m.bottom,left:y.left-w.left+m.left,right:w.right-y.right+m.right}}var It=Math.min,qt=Math.max;function Le(e,t,o){return qt(e,It(t,o))}var Ee=e=>({name:"arrow",options:e,async fn(t){let{element:o,padding:r=0}=e!=null?e:{},{x:a,y:n,placement:l,rects:i,platform:s}=t;if(o==null)return{};let p=Ge(r),g={x:a,y:n},b=Y(l),x=ue(l),h=Ce(b),m=await s.getDimensions(o),$=b==="y"?"top":"left",y=b==="y"?"bottom":"right",w=i.reference[h]+i.reference[b]-g[b]-i.floating[h],L=g[b]-i.reference[b],_=await(s.getOffsetParent==null?void 0:s.getOffsetParent(o)),k=_?b==="y"?_.clientHeight||0:_.clientWidth||0:0;k===0&&(k=i.floating[h]);let le=w/2-L/2,U=p[$],W=k-m[h]-p[y],T=k/2-m[h]/2+le,S=Le(U,T,W),A=(x==="start"?p[$]:p[y])>0&&T!==S&&i.reference[h]<=i.floating[h];return{[b]:g[b]-(A?T<U?U-T:W-T:0),data:{[b]:S,centerOffset:T-S}}}}),jt={left:"right",right:"left",bottom:"top",top:"bottom"};function de(e){return e.replace(/left|right|bottom|top/g,t=>jt[t])}function Ut(e,t,o){o===void 0&&(o=!1);let r=ue(e),a=Y(e),n=Ce(a),l=a==="x"?r===(o?"end":"start")?"right":"left":r==="start"?"bottom":"top";return t.reference[n]>t.floating[n]&&(l=de(l)),{main:l,cross:de(l)}}var zt={start:"end",end:"start"};function Fe(e){return e.replace(/start|end/g,t=>zt[t])}var Vt=["top","right","bottom","left"],Po=Vt.reduce((e,t)=>e.concat(t,t+"-start",t+"-end"),[]);var Re=function(e){return e===void 0&&(e={}),{name:"flip",options:e,async fn(t){var o;let{placement:r,middlewareData:a,rects:n,initialPlacement:l,platform:i,elements:s}=t,T=e,{mainAxis:p=!0,crossAxis:g=!0,fallbackPlacements:b,fallbackStrategy:x="bestFit",flipAlignment:h=!0}=T,m=J(T,["mainAxis","crossAxis","fallbackPlacements","fallbackStrategy","flipAlignment"]),$=K(r),y=b||($===l||!h?[de(l)]:function(S){let A=de(S);return[Fe(S),A,Fe(A)]}(l)),w=[l,...y],L=await Se(t,m),_=[],k=((o=a.flip)==null?void 0:o.overflows)||[];if(p&&_.push(L[$]),g){let{main:S,cross:A}=Ut(r,n,await(i.isRTL==null?void 0:i.isRTL(s.floating)));_.push(L[S],L[A])}if(k=[...k,{placement:r,overflows:_}],!_.every(S=>S<=0)){var le,U;let S=((le=(U=a.flip)==null?void 0:U.index)!=null?le:0)+1,A=w[S];if(A)return{data:{index:S,overflows:k},reset:{placement:A}};let ae="bottom";switch(x){case"bestFit":{var W;let Qe=(W=k.map(se=>[se,se.overflows.filter(G=>G>0).reduce((G,St)=>G+St,0)]).sort((se,G)=>se[1]-G[1])[0])==null?void 0:W[0].placement;Qe&&(ae=Qe);break}case"initialPlacement":ae=l}if(r!==ae)return{reset:{placement:ae}}}return{}}}};var Te=function(e){return e===void 0&&(e=0),{name:"offset",options:e,async fn(t){let{x:o,y:r}=t,a=await async function(n,l){let{placement:i,platform:s,elements:p}=n,g=await(s.isRTL==null?void 0:s.isRTL(p.floating)),b=K(i),x=ue(i),h=Y(i)==="x",m=["left","top"].includes(b)?-1:1,$=g&&h?-1:1,y=typeof l=="function"?l(n):l,{mainAxis:w,crossAxis:L,alignmentAxis:_}=typeof y=="number"?{mainAxis:y,crossAxis:0,alignmentAxis:null}:C({mainAxis:0,crossAxis:0,alignmentAxis:null},y);return x&&typeof _=="number"&&(L=x==="end"?-1*_:_),h?{x:L*$,y:w*m}:{x:w*m,y:L*$}}(t,e);return{x:o+a.x,y:r+a.y,data:a}}}};function Ft(e){return e==="x"?"y":"x"}var Ae=function(e){return e===void 0&&(e={}),{name:"shift",options:e,async fn(t){let{x:o,y:r,placement:a}=t,y=e,{mainAxis:n=!0,crossAxis:l=!1,limiter:i={fn:w=>{let{x:L,y:_}=w;return{x:L,y:_}}}}=y,s=J(y,["mainAxis","crossAxis","limiter"]),p={x:o,y:r},g=await Se(t,s),b=Y(K(a)),x=Ft(b),h=p[b],m=p[x];if(n){let w=b==="y"?"bottom":"right";h=Le(h+g[b==="y"?"top":"left"],h,h-g[w])}if(l){let w=x==="y"?"bottom":"right";m=Le(m+g[x==="y"?"top":"left"],m,m-g[w])}let $=i.fn(O(C({},t),{[b]:h,[x]:m}));return O(C({},$),{data:{x:$.x-o,y:$.y-r}})}}};function et(e){return e&&e.document&&e.location&&e.alert&&e.setInterval}function M(e){if(e==null)return window;if(!et(e)){let t=e.ownerDocument;return t&&t.defaultView||window}return e}function ee(e){return M(e).getComputedStyle(e)}function P(e){return et(e)?"":e?(e.nodeName||"").toLowerCase():""}function tt(){let e=navigator.userAgentData;return e!=null&&e.brands?e.brands.map(t=>t.brand+"/"+t.version).join(" "):navigator.userAgent}function R(e){return e instanceof M(e).HTMLElement}function z(e){return e instanceof M(e).Element}function Pe(e){return typeof ShadowRoot=="undefined"?!1:e instanceof M(e).ShadowRoot||e instanceof ShadowRoot}function pe(e){let{overflow:t,overflowX:o,overflowY:r}=ee(e);return/auto|scroll|overlay|hidden/.test(t+r+o)}function Wt(e){return["table","td","th"].includes(P(e))}function Je(e){let t=/firefox/i.test(tt()),o=ee(e);return o.transform!=="none"||o.perspective!=="none"||o.contain==="paint"||["transform","perspective"].includes(o.willChange)||t&&o.willChange==="filter"||t&&!!o.filter&&o.filter!=="none"}function ot(){return!/^((?!chrome|android).)*safari/i.test(tt())}var Xe=Math.min,Z=Math.max,be=Math.round;function q(e,t,o){var r,a,n,l;t===void 0&&(t=!1),o===void 0&&(o=!1);let i=e.getBoundingClientRect(),s=1,p=1;t&&R(e)&&(s=e.offsetWidth>0&&be(i.width)/e.offsetWidth||1,p=e.offsetHeight>0&&be(i.height)/e.offsetHeight||1);let g=z(e)?M(e):window,b=!ot()&&o,x=(i.left+(b&&(r=(a=g.visualViewport)==null?void 0:a.offsetLeft)!=null?r:0))/s,h=(i.top+(b&&(n=(l=g.visualViewport)==null?void 0:l.offsetTop)!=null?n:0))/p,m=i.width/s,$=i.height/p;return{width:m,height:$,top:h,right:x+m,bottom:h+$,left:x,x,y:h}}function Q(e){return(t=e,(t instanceof M(t).Node?e.ownerDocument:e.document)||window.document).documentElement;var t}function ge(e){return z(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.pageXOffset,scrollTop:e.pageYOffset}}function rt(e){return q(Q(e)).left+ge(e).scrollLeft}function Gt(e,t,o){let r=R(t),a=Q(t),n=q(e,r&&function(s){let p=q(s);return be(p.width)!==s.offsetWidth||be(p.height)!==s.offsetHeight}(t),o==="fixed"),l={scrollLeft:0,scrollTop:0},i={x:0,y:0};if(r||!r&&o!=="fixed")if((P(t)!=="body"||pe(a))&&(l=ge(t)),R(t)){let s=q(t,!0);i.x=s.x+t.clientLeft,i.y=s.y+t.clientTop}else a&&(i.x=rt(a));return{x:n.left+l.scrollLeft-i.x,y:n.top+l.scrollTop-i.y,width:n.width,height:n.height}}function it(e){return P(e)==="html"?e:e.assignedSlot||e.parentNode||(Pe(e)?e.host:null)||Q(e)}function Ke(e){return R(e)&&getComputedStyle(e).position!=="fixed"?e.offsetParent:null}function Oe(e){let t=M(e),o=Ke(e);for(;o&&Wt(o)&&getComputedStyle(o).position==="static";)o=Ke(o);return o&&(P(o)==="html"||P(o)==="body"&&getComputedStyle(o).position==="static"&&!Je(o))?t:o||function(r){let a=it(r);for(Pe(a)&&(a=a.host);R(a)&&!["html","body"].includes(P(a));){if(Je(a))return a;a=a.parentNode}return null}(e)||t}function Ye(e){if(R(e))return{width:e.offsetWidth,height:e.offsetHeight};let t=q(e);return{width:t.width,height:t.height}}function nt(e){let t=it(e);return["html","body","#document"].includes(P(t))?e.ownerDocument.body:R(t)&&pe(t)?t:nt(t)}function lt(e,t){var o;t===void 0&&(t=[]);let r=nt(e),a=r===((o=e.ownerDocument)==null?void 0:o.body),n=M(r),l=a?[n].concat(n.visualViewport||[],pe(r)?r:[]):r,i=t.concat(l);return a?i:i.concat(lt(l))}function Ze(e,t,o){return t==="viewport"?X(function(r,a){let n=M(r),l=Q(r),i=n.visualViewport,s=l.clientWidth,p=l.clientHeight,g=0,b=0;if(i){s=i.width,p=i.height;let x=ot();(x||!x&&a==="fixed")&&(g=i.offsetLeft,b=i.offsetTop)}return{width:s,height:p,x:g,y:b}}(e,o)):z(t)?function(r,a){let n=q(r,!1,a==="fixed"),l=n.top+r.clientTop,i=n.left+r.clientLeft;return{top:l,left:i,x:i,y:l,right:i+r.clientWidth,bottom:l+r.clientHeight,width:r.clientWidth,height:r.clientHeight}}(t,o):X(function(r){var a;let n=Q(r),l=ge(r),i=(a=r.ownerDocument)==null?void 0:a.body,s=Z(n.scrollWidth,n.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),p=Z(n.scrollHeight,n.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0),g=-l.scrollLeft+rt(r),b=-l.scrollTop;return ee(i||n).direction==="rtl"&&(g+=Z(n.clientWidth,i?i.clientWidth:0)-s),{width:s,height:p,x:g,y:b}}(Q(e)))}function Jt(e){let t=lt(e),o=["absolute","fixed"].includes(ee(e).position)&&R(e)?Oe(e):e;return z(o)?t.filter(r=>z(r)&&function(a,n){let l=n.getRootNode==null?void 0:n.getRootNode();if(a.contains(n))return!0;if(l&&Pe(l)){let i=n;do{if(i&&a===i)return!0;i=i.parentNode||i.host}while(i)}return!1}(r,o)&&P(r)!=="body"):[]}var Xt={getClippingRect:function(e){let{element:t,boundary:o,rootBoundary:r,strategy:a}=e,n=[...o==="clippingAncestors"?Jt(t):[].concat(o),r],l=n[0],i=n.reduce((s,p)=>{let g=Ze(t,p,a);return s.top=Z(g.top,s.top),s.right=Xe(g.right,s.right),s.bottom=Xe(g.bottom,s.bottom),s.left=Z(g.left,s.left),s},Ze(t,l,a));return{width:i.right-i.left,height:i.bottom-i.top,x:i.left,y:i.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{rect:t,offsetParent:o,strategy:r}=e,a=R(o),n=Q(o);if(o===n)return t;let l={scrollLeft:0,scrollTop:0},i={x:0,y:0};if((a||!a&&r!=="fixed")&&((P(o)!=="body"||pe(n))&&(l=ge(o)),R(o))){let s=q(o,!0);i.x=s.x+o.clientLeft,i.y=s.y+o.clientTop}return O(C({},t),{x:t.x-l.scrollLeft+i.x,y:t.y-l.scrollTop+i.y})},isElement:z,getDimensions:Ye,getOffsetParent:Oe,getDocumentElement:Q,getElementRects:e=>{let{reference:t,floating:o,strategy:r}=e;return{reference:Gt(t,Oe(o),r),floating:O(C({},Ye(o)),{x:0,y:0})}},getClientRects:e=>Array.from(e.getClientRects()),isRTL:e=>ee(e).direction==="rtl"};var at=(e,t,o)=>We(e,t,C({platform:Xt},o));var te="top",oe="bottom",fe="left",he="right",re={[te]:oe,[oe]:te,[fe]:he,[he]:fe},Wo={[te]:"\u2191",[oe]:"\u2193",[fe]:"\u2190",[he]:"\u2192"};var ct={[fe]:-45,[te]:45,[he]:135,[oe]:-135},st="calc(50% - 7px)",Kt=e=>[te,oe].includes(e);function Yt({actualDirection:e,directionName:t,arrowEl:o}){if(!o)return;e=t;let r=Kt(t);o.style.left=r?st:"",o.style.top=r?"":st}async function dt(e){var a,n;if(!e.isShowing)return;if(await((a=e==null?void 0:e.waitForDOM)==null?void 0:a.call(e)),e.isCallout)return Yt(e);let t=await at(e.targetEl,e.attentionEl,{placement:e.directionName,middleware:[Re(),Te(8),Ae({padding:16}),Ee({element:e.noArrow?void 0:e.arrowEl})]});e.actualDirection=t.placement,Object.assign(((n=e.attentionEl)==null?void 0:n.style)||{},{left:"0",top:"0",transform:`translate3d(${Math.round(t.x)}px, ${Math.round(t.y)}px, 0)`});let{x:o,y:r}=t.middlewareData.arrow;e.arrowEl&&(e.arrowEl.style.left=o?o+"px":"",e.arrowEl.style.top=r?r+"px":"")}var mt=Bt(gt(),1);var H=e=>typeof e=="string",ao=e=>typeof e=="function",ft=new Map;function Ne(e){return[...Array.isArray(e)?e:[e],"en"]}function xt(e,t,o){let r=Ne(e);return xe(()=>$e("date",r,o),()=>new Intl.DateTimeFormat(r,o)).format(H(t)?new Date(t):t)}function Me(e,t,o){let r=Ne(e);return xe(()=>$e("number",r,o),()=>new Intl.NumberFormat(r,o)).format(t)}function ht(e,t,o,n){var l=n,{offset:r=0}=l,a=J(l,["offset"]);var p,g;let i=Ne(e),s=t?xe(()=>$e("plural-ordinal",i),()=>new Intl.PluralRules(i,{type:"ordinal"})):xe(()=>$e("plural-cardinal",i),()=>new Intl.PluralRules(i,{type:"cardinal"}));return(g=(p=a[o])!=null?p:a[s.select(o-r)])!=null?g:a.other}function xe(e,t){let o=e(),r=ft.get(o);return r||(r=t(),ft.set(o,r)),r}function $e(e,t,o){let r=t.join("-");return`${e}-${r}-${JSON.stringify(o)}`}var $t=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g,so=(e,t,o={})=>{t=t||e;let r=n=>H(n)?o[n]||{style:n}:n,a=(n,l)=>{let i=Object.keys(o).length?r("number"):{},s=Me(t,n,i);return l.replace("#",s)};return{plural:(n,l)=>{let{offset:i=0}=l,s=ht(t,!1,n,l);return a(n-i,s)},selectordinal:(n,l)=>{let{offset:i=0}=l,s=ht(t,!0,n,l);return a(n-i,s)},select:(n,l)=>{var i;return(i=l[n])!=null?i:l.other},number:(n,l)=>Me(t,n,r(l)),date:(n,l)=>xt(t,n,r(l)),undefined:n=>n}};function co(e,t,o){return(r,a={})=>{let n=so(t,o,a),l=s=>Array.isArray(s)?s.reduce((p,g)=>{if(H(g))return p+g;let[b,x,h]=g,m={};h!=null&&!H(h)?Object.keys(h).forEach(y=>{m[y]=l(h[y])}):m=h;let $=n[x](r[b],m);return $==null?p:p+$},""):s,i=l(e);return H(i)&&$t.test(i)?(0,mt.default)(i.trim()):H(i)?i.trim():i}}var uo=Object.defineProperty,bo=(e,t,o)=>t in e?uo(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,po=(e,t,o)=>(bo(e,typeof t!="symbol"?t+"":t,o),o),Be=class{constructor(){po(this,"_events",{})}on(t,o){return this._hasEvent(t)||(this._events[t]=[]),this._events[t].push(o),()=>this.removeListener(t,o)}removeListener(t,o){if(!this._hasEvent(t))return;let r=this._events[t].indexOf(o);~r&&this._events[t].splice(r,1)}emit(t,...o){this._hasEvent(t)&&this._events[t].map(r=>r.apply(this,o))}_hasEvent(t){return Array.isArray(this._events[t])}},go=Object.defineProperty,fo=(e,t,o)=>t in e?go(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,F=(e,t,o)=>(fo(e,typeof t!="symbol"?t+"":t,o),o),He=class extends Be{constructor(t){super(),F(this,"_locale"),F(this,"_locales"),F(this,"_localeData"),F(this,"_messages"),F(this,"_missing"),F(this,"t",this._.bind(this)),this._messages={},this._localeData={},t.missing!=null&&(this._missing=t.missing),t.messages!=null&&this.load(t.messages),t.localeData!=null&&this.loadLocaleData(t.localeData),(t.locale!=null||t.locales!=null)&&this.activate(t.locale,t.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var t;return(t=this._messages[this._locale])!=null?t:{}}get localeData(){var t;return(t=this._localeData[this._locale])!=null?t:{}}_loadLocaleData(t,o){this._localeData[t]==null?this._localeData[t]=o:Object.assign(this._localeData[t],o)}loadLocaleData(t,o){o!=null?this._loadLocaleData(t,o):Object.keys(t).forEach(r=>this._loadLocaleData(r,t[r])),this.emit("change")}_load(t,o){this._messages[t]==null?this._messages[t]=o:Object.assign(this._messages[t],o)}load(t,o){o!=null?this._load(t,o):Object.keys(t).forEach(r=>this._load(r,t[r])),this.emit("change")}loadAndActivate({locale:t,locales:o,messages:r}){this._locale=t,this._locales=o||void 0,this._messages[this._locale]=r,this.emit("change")}activate(t,o){this._locale=t,this._locales=o,this.emit("change")}_(t,o={},{message:r,formats:a}={}){H(t)||(o=t.values||o,r=t.message,t=t.id);let n=!this.messages[t],l=this._missing;if(l&&n)return ao(l)?l(this._locale,t):l;n&&this.emit("missing",{id:t,locale:this._locale});let i=this.messages[t]||r||t;return H(i)&&$t.test(i)?JSON.parse(`"${i}"`):H(i)?i:co(i,this._locale,this._locales)(o,a)}date(t,o){return xt(this._locales||this._locale,t,o)}number(t,o){return Me(this._locales||this._locale,t,o)}};function ho(e={}){return new He(e)}var E=ho();var vt=JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Close","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');var yt=JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Lukk","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');var wt=JSON.parse('{"attention.aria.callout":"callout speech bubble","attention.aria.close":"Sulje","attention.aria.highlight":"highlighted speech bubble","attention.aria.pointingDown":"pointing down","attention.aria.pointingLeft":"pointing left","attention.aria.pointingRight":"pointing right","attention.aria.pointingUp":"pointing up","attention.aria.popover":"popover speech bubble","attention.aria.tooltip":"tooltip"}');var mo=["en","nb","fi"],_t="en",kt=e=>mo.find(t=>e===t||e.toLowerCase().includes(t))||_t;function xo(){if(typeof window=="undefined"){let e=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return kt(e)}try{let e=document.documentElement.lang;return kt(e)}catch(e){return console.warn("could not detect locale, falling back to source locale",e),_t}}var $o=(e,t,o,r)=>e==="nb"?o:e==="fi"?r:t,Dt=(e,t,o)=>{let r=xo(),a=$o(r,e,t,o);E.load(r,a),E.activate(r)};var ne=class extends je(Ct){constructor(){super(),Dt(vt,yt,wt),this.show=!1,this.tooltip=!1,this.callout=!1,this.popover=!1,this.highlight=!1,this.canClose=!1,this.noArrow=!1}connectedCallback(){if(super.connectedCallback(),!this.placement||!Object.keys(re).includes(this.placement))throw new Error(`Invalid "placement" attribute. Set its value to one of the following:
+${JSON.stringify(Object.keys(re))}`);setTimeout(()=>this.requestUpdate(),0)}get _actualDirection(){return this.placement}set _actualDirection(t){this.placement=t}get _arrowDirection(){return re[this.placement]}updated(){this.callout||this._attentionEl.style.setProperty("--attention-visibility",this.show?"":"hidden"),this.tooltip||this._attentionEl.style.setProperty("--attention-display",this.show?"flex":"none"),this.attentionState={isShowing:this.show,isCallout:this.callout,actualDirection:this._actualDirection,directionName:this.placement,arrowEl:this.renderRoot.querySelector("#arrow"),attentionEl:this._attentionEl,targetEl:this._targetEl,noArrow:this.noArrow},dt(this.attentionState)}pointingAtDirection(){switch(re[this._actualDirection]){case"top":return E._({id:"attention.aria.pointingUp",message:"pointing up",comment:"Default screenreader message for top direction in the attention component"});case"right":return E._({id:"attention.aria.pointingRight",message:"pointing right",comment:"Default screenreader message for right direction in the attention component"});case"bottom":return E._({id:"attention.aria.pointingDown",message:"pointing down",comment:"Default screenreader message for bottom direction in the attention component"});case"left":return E._({id:"attention.aria.pointingLeft",message:"pointing left",comment:"Default screenreader message for left direction in the attention component"});default:return""}}activeAttentionType(){switch(!0){case this.tooltip:return E._({id:"attention.aria.tooltip",message:"tooltip",comment:"Default screenreader message for tooltip in the attention component"});case this.callout:return E._({id:"attention.aria.callout",message:"callout speech bubble",comment:"Default screenreader message for callout speech bubble in the attention component"});case this.popover:return E._({id:"attention.aria.popover",message:"popover speech bubble",comment:"Default screenreader message for popover speech bubble in the attention component"});case this.highlight:return E._({id:"attention.aria.highlight",message:"highlighted speech bubble",comment:"Default screenreader message for highlighted speech bubble in the attention component"});default:return""}}defaultAriaLabel(){return`${this.activeAttentionType()} ${this.noArrow?"":this.pointingAtDirection()}`}setAriaLabels(){if(this._targetEl&&!this._targetEl.getAttribute("aria-details")){let t=this._messageEl.id||(this._messageEl.id=Ue());this._targetEl.setAttribute("aria-details",t)}}get _activeVariantClasses(){let t={callout:this.callout,popover:this.popover,tooltip:this.tooltip,highlight:this.highlight},o=Object.keys(t).find(r=>!!t[r])||"";return{wrapper:I[o],arrow:I[`arrow${o.charAt(0).toUpperCase()+o.slice(1)}`]}}get _ariaClose(){return E._({id:"attention.aria.close",message:"Close",comment:"Aria label for the close button in attention"})}firstUpdated(){this.setAriaLabels(),this.callout&&(this._attentionEl.style.position="relative")}get _attentionEl(){return this.renderRoot.querySelector("#attention")}get _targetEl(){return this.renderRoot.querySelector("slot[name='target']").assignedNodes()[0]}get _messageEl(){return this.renderRoot.querySelector("slot[name='message']").assignedNodes()[0]}get _wrapperClasses(){return _e({[I.base]:!0,[this._activeVariantClasses.wrapper]:!0})}get _arrowClasses(){return _e({[I.arrowBase]:!0,[I[`arrowDirection${this._arrowDirection.charAt(0).toUpperCase()+this._arrowDirection.slice(1)}`]]:!0,[this._activeVariantClasses.arrow]:!0})}get _arrowHtml(){return this.noArrow?"":ie`<div
           id="arrow"
           role="img"
           class="${this._arrowClasses}"
-          style="transform:rotate(${st[this._arrowDirection]}deg);
+          style="transform:rotate(${ct[this._arrowDirection]}deg);
           margin-${this._arrowDirection.charAt(0).toLowerCase()+this._arrowDirection.slice(1)}:-0.5px;"
-        />`}render(){return $e`
+        />`}close(){let t=new CustomEvent("close",{bubbles:!0,composed:!0});this.updateComplete.then(()=>this.dispatchEvent(t))}keypressed(t){this.canClose&&t.key==="Escape"&&(t.preventDefault(),this.close())}get _closeBtnHtml(){return ie`
+      <button 
+        aria-label="${this._ariaClose}"
+        @click="${this.close}"
+        @keydown=${this.keypressed}
+        class="${I.closeBtn}"
+      >
+        <w-icon-close-16 />
+      </button>
+    `}render(){return ie`
       <div class=${yo(this.className?this.className:void 0)}>
-        ${this.placement==="right"||this.placement==="bottom"?$e`
+        ${this.placement==="right"||this.placement==="bottom"?ie`
               <slot name="target"></slot>
 
               <div
@@ -17,22 +26,20 @@ ${JSON.stringify(Object.keys(re))}`);setTimeout(()=>this.requestUpdate(),0)}get
                 aria-label="${this.defaultAriaLabel()}"
                 class="${this._wrapperClasses}"
               >
-                <div>
-                  ${this._arrowHtml}
-                  <slot name="message"></slot>
-                </div>
+                ${this._arrowHtml}
+                <slot name="message"></slot>
+                ${this.canClose?this._closeBtnHtml:Lt}
               </div>
-            `:$e`
+            `:ie`
               <div id="attention" class="${this._wrapperClasses}">
-                <div>
-                  <slot name="message"></slot>
-                  ${this._arrowHtml}
-                </div>
+                <slot name="message"></slot>
+                ${this._arrowHtml}
+                ${this.canClose?this._closeBtnHtml:Lt}
               </div>
               <slot name="target"></slot>
             `}
       </div>
-    `}};ke(ie,"properties",{show:{type:Boolean,reflect:!0},placement:{type:String},tooltip:{type:Boolean,reflect:!0},callout:{type:Boolean,reflect:!0},popover:{type:Boolean,reflect:!0},highlight:{type:Boolean,reflect:!0},noArrow:{type:Boolean,reflect:!0}}),ke(ie,"styles",[Lt.styles,vo`
+    `}};ke(ne,"properties",{show:{type:Boolean,reflect:!0},placement:{type:String},tooltip:{type:Boolean,reflect:!0},callout:{type:Boolean,reflect:!0},popover:{type:Boolean,reflect:!0},highlight:{type:Boolean,reflect:!0},canClose:{type:Boolean,reflect:!0},noArrow:{type:Boolean,reflect:!0}}),ke(ne,"styles",[Ct.styles,vo`
       #attention {
         position: absolute;
         z-index: 50;
@@ -48,5 +55,5 @@ ${JSON.stringify(Object.keys(re))}`);setTimeout(()=>this.requestUpdate(),0)}get
         border-top-left-radius: 4px;
         z-index: 1;
       }
-    `]);customElements.get("w-attention")||customElements.define("w-attention",ie);export{ie as WarpAttention};
+    `]);customElements.get("w-attention")||customElements.define("w-attention",ne);export{ne as WarpAttention};
 //# sourceMappingURL=index.js.map