@warp-ds/elements 1.3.1-next.1 → 1.3.2-next.1

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../packages/broadcast/component.js", "../../../packages/utils/window-exists.js", "../../../packages/broadcast/index.js"],
   "sourcesContent": ["import { html } from 'lit';\nimport WarpElement from '@warp-ds/elements-core';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { windowExists } from '../utils/window-exists';\n\nexport class WarpBroadcast extends WarpElement {\n  static properties = {\n    _messages: {\n      state: true,\n      hasChanged(newVal, oldVal) {\n        if (!oldVal || oldVal.length === 0) return true;\n        const newIds = newVal.map(({ id }) => id).sort();\n        const oldIds = oldVal.map(({ id }) => id).sort();\n        return JSON.stringify(newIds) !== JSON.stringify(oldIds);\n      },\n    },\n    _hiddenMessageIds: {\n      state: true,\n      type: Array,\n    },\n    interval: { type: Number, attribute: true, reflect: true },\n    url: { type: String, attribute: true, reflect: true },\n    api: { type: String, attribute: true, reflect: true },\n  };\n\n  static styles = [WarpElement.styles];\n\n  constructor() {\n    super();\n    this._messages = [];\n    this.interval = 30000;\n    this._hiddenMessageIds = [];\n    this.url = windowExists ? window.location.href : '';\n  }\n\n  async connectedCallback() {\n    super.connectedCallback();\n    if (!this.api) {\n      console.error('Broadcast \"api\" attribute invalid or undefined');\n      return;\n    }\n    if (windowExists) {\n      await this._fetchMessage();\n      setInterval(() => this._fetchMessage(), this.interval);\n    }\n  }\n\n  async _fetchMessage() {\n    const url = `${this.api}?path=${this.url}`;\n    try {\n      const res = await (await fetch(url)).json();\n      this._messages = res.length ? res : [];\n    } catch (err) {\n      console.error(`failed to fetch broadcasts from given url (${url})`, err);\n    }\n  }\n\n  async _del(id) {\n    const el = this.renderRoot.querySelector(`#broadcast-${id}`);\n    await el.collapse();\n    this._hiddenMessageIds = [...new Set([...this._hiddenMessageIds, id])];\n  }\n\n  render() {\n    const messages = this._messages.filter((item) => !this._hiddenMessageIds.includes(item.id));\n\n    return html`\n      <aside class=${`${messages.length === 0 ? 'hidden' : 'mb-16'}`}>\n        ${repeat(\n          messages,\n          ({ id }) => `broadcast-${id}`,\n          ({ id, message }) =>\n            html`<w-toast\n              id=\"broadcast-${id}\"\n              type=\"warning\"\n              text=\"${message}\"\n              canclose\n              @close=${() => this._del(id)}\n            >\n            </w-toast>`,\n        )}\n      </aside>\n    `;\n  }\n}\n", "export const windowExists = typeof window !== 'undefined';\n", "import { WarpBroadcast } from './component';\n\nif (!customElements.get('w-broadcast')) {\n  customElements.define('w-broadcast', WarpBroadcast);\n}\n\nexport { WarpBroadcast };\n"],
-  "mappings": ";;;;;;;;AAAA,SAAS,YAAY;AACrB,OAAO,iBAAiB;AACxB,SAAS,cAAc;;;ACFhB,IAAM,eAAe,OAAO,WAAW;;;ADKvC,IAAM,gBAAN,cAA4B,YAAY;AAAA,EAsB7C,cAAc;AACZ,UAAM;AACN,SAAK,YAAY,CAAC;AAClB,SAAK,WAAW;AAChB,SAAK,oBAAoB,CAAC;AAC1B,SAAK,MAAM,eAAe,OAAO,SAAS,OAAO;AAAA,EACnD;AAAA,EAEA,MAAM,oBAAoB;AACxB,UAAM,kBAAkB;AACxB,QAAI,CAAC,KAAK,KAAK;AACb,cAAQ,MAAM,gDAAgD;AAC9D;AAAA,IACF;AACA,QAAI,cAAc;AAChB,YAAM,KAAK,cAAc;AACzB,kBAAY,MAAM,KAAK,cAAc,GAAG,KAAK,QAAQ;AAAA,IACvD;AAAA,EACF;AAAA,EAEA,MAAM,gBAAgB;AACpB,UAAM,MAAM,GAAG,KAAK,YAAY,KAAK;AACrC,QAAI;AACF,YAAM,MAAM,OAAO,MAAM,MAAM,GAAG,GAAG,KAAK;AAC1C,WAAK,YAAY,IAAI,SAAS,MAAM,CAAC;AAAA,IACvC,SAAS,KAAP;AACA,cAAQ,MAAM,8CAA8C,QAAQ,GAAG;AAAA,IACzE;AAAA,EACF;AAAA,EAEA,MAAM,KAAK,IAAI;AACb,UAAM,KAAK,KAAK,WAAW,cAAc,cAAc,IAAI;AAC3D,UAAM,GAAG,SAAS;AAClB,SAAK,oBAAoB,CAAC,GAAG,oBAAI,IAAI,CAAC,GAAG,KAAK,mBAAmB,EAAE,CAAC,CAAC;AAAA,EACvE;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,UAAU,OAAO,CAAC,SAAS,CAAC,KAAK,kBAAkB,SAAS,KAAK,EAAE,CAAC;AAE1F,WAAO;AAAA,qBACU,GAAG,SAAS,WAAW,IAAI,WAAW;AAAA,UACjD;AAAA,MACA;AAAA,MACA,CAAC,EAAE,GAAG,MAAM,aAAa;AAAA,MACzB,CAAC,EAAE,IAAI,QAAQ,MACb;AAAA,8BACkB;AAAA;AAAA,sBAER;AAAA;AAAA,uBAEC,MAAM,KAAK,KAAK,EAAE;AAAA;AAAA;AAAA,IAGjC;AAAA;AAAA;AAAA,EAGN;AACF;AA9EE,cADW,eACJ,cAAa;AAAA,EAClB,WAAW;AAAA,IACT,OAAO;AAAA,IACP,WAAW,QAAQ,QAAQ;AACzB,UAAI,CAAC,UAAU,OAAO,WAAW;AAAG,eAAO;AAC3C,YAAM,SAAS,OAAO,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,KAAK;AAC/C,YAAM,SAAS,OAAO,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,KAAK;AAC/C,aAAO,KAAK,UAAU,MAAM,MAAM,KAAK,UAAU,MAAM;AAAA,IACzD;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,UAAU,EAAE,MAAM,QAAQ,WAAW,MAAM,SAAS,KAAK;AAAA,EACzD,KAAK,EAAE,MAAM,QAAQ,WAAW,MAAM,SAAS,KAAK;AAAA,EACpD,KAAK,EAAE,MAAM,QAAQ,WAAW,MAAM,SAAS,KAAK;AACtD;AAEA,cApBW,eAoBJ,UAAS,CAAC,YAAY,MAAM;;;AEvBrC,IAAI,CAAC,eAAe,IAAI,aAAa,GAAG;AACtC,iBAAe,OAAO,eAAe,aAAa;AACpD;",
+  "mappings": ";;;;;;;;AAAA,SAAS,YAAY;AACrB,OAAO,iBAAiB;AACxB,SAAS,cAAc;;;ACFhB,IAAM,eAAe,OAAO,WAAW;;;ADKvC,IAAM,gBAAN,cAA4B,YAAY;AAAA,EAsB7C,cAAc;AACZ,UAAM;AACN,SAAK,YAAY,CAAC;AAClB,SAAK,WAAW;AAChB,SAAK,oBAAoB,CAAC;AAC1B,SAAK,MAAM,eAAe,OAAO,SAAS,OAAO;AAAA,EACnD;AAAA,EAEA,MAAM,oBAAoB;AACxB,UAAM,kBAAkB;AACxB,QAAI,CAAC,KAAK,KAAK;AACb,cAAQ,MAAM,gDAAgD;AAC9D;AAAA,IACF;AACA,QAAI,cAAc;AAChB,YAAM,KAAK,cAAc;AACzB,kBAAY,MAAM,KAAK,cAAc,GAAG,KAAK,QAAQ;AAAA,IACvD;AAAA,EACF;AAAA,EAEA,MAAM,gBAAgB;AACpB,UAAM,MAAM,GAAG,KAAK,GAAG,SAAS,KAAK,GAAG;AACxC,QAAI;AACF,YAAM,MAAM,OAAO,MAAM,MAAM,GAAG,GAAG,KAAK;AAC1C,WAAK,YAAY,IAAI,SAAS,MAAM,CAAC;AAAA,IACvC,SAAS,KAAK;AACZ,cAAQ,MAAM,8CAA8C,GAAG,KAAK,GAAG;AAAA,IACzE;AAAA,EACF;AAAA,EAEA,MAAM,KAAK,IAAI;AACb,UAAM,KAAK,KAAK,WAAW,cAAc,cAAc,EAAE,EAAE;AAC3D,UAAM,GAAG,SAAS;AAClB,SAAK,oBAAoB,CAAC,GAAG,oBAAI,IAAI,CAAC,GAAG,KAAK,mBAAmB,EAAE,CAAC,CAAC;AAAA,EACvE;AAAA,EAEA,SAAS;AACP,UAAM,WAAW,KAAK,UAAU,OAAO,CAAC,SAAS,CAAC,KAAK,kBAAkB,SAAS,KAAK,EAAE,CAAC;AAE1F,WAAO;AAAA,qBACU,GAAG,SAAS,WAAW,IAAI,WAAW,OAAO,EAAE;AAAA,UAC1D;AAAA,MACA;AAAA,MACA,CAAC,EAAE,GAAG,MAAM,aAAa,EAAE;AAAA,MAC3B,CAAC,EAAE,IAAI,QAAQ,MACb;AAAA,8BACkB,EAAE;AAAA;AAAA,sBAEV,OAAO;AAAA;AAAA,uBAEN,MAAM,KAAK,KAAK,EAAE,CAAC;AAAA;AAAA;AAAA,IAGlC,CAAC;AAAA;AAAA;AAAA,EAGP;AACF;AA9EE,cADW,eACJ,cAAa;AAAA,EAClB,WAAW;AAAA,IACT,OAAO;AAAA,IACP,WAAW,QAAQ,QAAQ;AACzB,UAAI,CAAC,UAAU,OAAO,WAAW;AAAG,eAAO;AAC3C,YAAM,SAAS,OAAO,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,KAAK;AAC/C,YAAM,SAAS,OAAO,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,EAAE,KAAK;AAC/C,aAAO,KAAK,UAAU,MAAM,MAAM,KAAK,UAAU,MAAM;AAAA,IACzD;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,UAAU,EAAE,MAAM,QAAQ,WAAW,MAAM,SAAS,KAAK;AAAA,EACzD,KAAK,EAAE,MAAM,QAAQ,WAAW,MAAM,SAAS,KAAK;AAAA,EACpD,KAAK,EAAE,MAAM,QAAQ,WAAW,MAAM,SAAS,KAAK;AACtD;AAEA,cApBW,eAoBJ,UAAS,CAAC,YAAY,MAAM;;;AEvBrC,IAAI,CAAC,eAAe,IAAI,aAAa,GAAG;AACtC,iBAAe,OAAO,eAAe,aAAa;AACpD;",
   "names": []
 }

package/dist/packages/button/index.js

@@ -1031,26 +1031,27 @@ var require_parser = __commonJS({
 import { html } from "lit";
 import WarpElement from "@warp-ds/elements-core";
 
-// node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.9.1/node_modules/@warp-ds/css/component-classes/index.js
 var box = {
   box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
   // Relative here enables w-clickable
   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
-  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"
+  info: "s-bg-info-subtle",
+  neutral: "bg-[--w-s-color-surface-sunken]",
+  bordered: "border-2 s-border s-bg",
+  infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-hover",
+  neutralClickable: "hover:s-bg-subtle-hover active:s-bg-subtle-hover",
+  borderedClickable: "hover:s-bg-hover active:s-bg-hover hover:s-border-hover active:s-border-hover"
 };
 var buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
 var expandable = {
   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 " + box.box,
+  expandableTitle: "font-bold s-text",
+  expandableBox: "s-bg-subtle hover:s-bg-subtle-hover py-0 px-0 " + box.box,
+  expandableInfo: "s-bg-info-subtle! hover:s-bg-info-subtle-hover!",
   expandableBleed: box.bleed,
-  chevron: "inline-block align-middle i-text-$color-expandable-icon",
+  chevron: "inline-block align-middle s-icon",
   chevronNonBox: "ml-8",
   chevronBox: "",
   chevronTransform: "transform transition-transform transform-gpu ease-in-out",
@@ -1070,17 +1071,17 @@ var expandable = {
 };
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
-  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"
+  primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",
+  secondary: "s-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active",
+  utility: "s-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",
+  destructive: "s-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active",
+  pill: "s-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",
+  disabled: "s-text-inverted s-bg-disabled",
+  quiet: "bg-transparent s-text-link hover:s-bg-hover active:s-bg-active",
+  utilityQuiet: "s-text bg-transparent hover:s-bg-hover active:s-bg-active",
+  negativeQuiet: "bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active",
+  loading: "s-text s-bg-subtle",
+  link: "s-text-link"
 };
 var buttonTypes = {
   primary: `border-0 rounded-8 ${buttonDefaultStyling}`,
@@ -1184,10 +1185,10 @@ var button = {
   contentWidth: "max-w-max"
 };
 var modal = {
-  //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
-  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-30 [--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",
+  transparentBg: "",
+  //TODO: Remove in v2 - previously used for opacity before changing to a rgba background in backdrop
+  backdrop: "fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]",
+  modal: "pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
   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",
@@ -1202,22 +1203,79 @@ var modal = {
   titleButtonIconRotated: "transform rotate-90"
 };
 var label = {
-  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"
+  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",
+  optional: "pl-8 font-normal text-s s-text-subtle",
+  labelInvalid: "s-text-negative"
+  // TODO: Remove in v2 - kept for backwards compatibility
 };
-var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ";
+var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ";
 var suffix = {
   wrapper: prefixSuffixWrapperBase + "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"
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
 };
 var prefix = {
   wrapper: prefixSuffixWrapperBase + "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"
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
+};
+var toggle = {
+  // wrapper classes
+  field: "relative text-m",
+  // true
+  wrapper: "relative py-1",
+  // true
+  wrapperRadioButtons: "inline-flex font-bold rounded-8 focus-within:focusable",
+  // isRadioButton && !isEqualWidth
+  wrapperRadioButtonsJustified: "flex font-bold rounded-8 focus-within:focusable",
+  // isRadioButton && isEqualWidth,
+  // group classes
+  radioButtonsGroup: "group",
+  // isRadioButton
+  radioButtonsGroupJustified: "grow-1 shrink-0 basis-auto",
+  // isRadioButton && isEqualWidth
+  // input classes
+  input: "peer",
+  a11y: "sr-only",
+  // label classes
+  label: "peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2",
+  // !isRadioButton
+  labelBefore: 'before:content-[""] before:block',
+  // !isRadioButton && !isIndeterminate
+  checkbox: "before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover",
+  // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled
+  checkboxInvalid: "before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover",
+  // isCheckbox && !isIndeterminate && isInvalid && !isDisabled
+  checkboxDisabled: "before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled",
+  // isCheckbox && !isIndeterminate && !isInvalid && isDisabled
+  indeterminate: 'before:content-["\u2013"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover',
+  // isCheckbox && isIndeterminate && !isInvalid && !isDisabled
+  indeterminateInvalid: 'before:content-["\u2013"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover',
+  // isCheckbox && isIndeterminate && isInvalid && !isDisabled
+  indeterminateDisabled: 'before:content-["\u2013"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled',
+  // isCheckbox && isIndeterminate && !isInvalid && isDisabled
+  radio: "before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover",
+  // isRadio && !isDisabled && !isInvalid
+  radioInvalid: "before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover",
+  // isRadio && isInvalid && !isDisabled
+  radioDisabled: "before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]",
+  // isRadio && !isInvalid && isDisabled
+  radioButtonsLabel: "peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2",
+  // isRadioButtons
+  radioButtonsRegular: "text-s py-8 pl-12 pr-14",
+  // isRadioButtons && !isSmall
+  radioButtonsSmall: "text-xs py-[5px] px-[8px]"
+  // isRadioButtons && isSmall
+};
+var deadToggle = {
+  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
+  input: `${toggle.input} hidden`,
+  inputVue: "hidden",
+  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
+  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,
+  labelVue: "-mt-2"
 };
 var clickable = {
   toggle: "absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",
@@ -1227,19 +1285,27 @@ var clickable = {
 };
 var attention = {
   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",
+  tooltip: "s-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8",
+  callout: "bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8",
+  highlight: "bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0",
+  popover: "bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0",
   arrowBase: "absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",
+  arrowDirectionLeftStart: "-left-[8px]",
   arrowDirectionLeft: "-left-[8px]",
+  arrowDirectionLeftEnd: "-left-[8px]",
+  arrowDirectionRightStart: "-right-[8px]",
   arrowDirectionRight: "-right-[8px]",
+  arrowDirectionRightEnd: "-right-[8px]",
+  arrowDirectionBottomStart: "-bottom-[8px]",
   arrowDirectionBottom: "-bottom-[8px]",
+  arrowDirectionBottomEnd: "-bottom-[8px]",
+  arrowDirectionTopStart: "-top-[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",
+  arrowDirectionTopEnd: "-top-[8px]",
+  arrowTooltip: "s-bg-inverted border-[--w-s-color-background-inverted]",
+  arrowCallout: "bg-[--w-color-callout-background] border-[--w-color-callout-border]",
+  arrowPopover: "bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]",
+  arrowHighlight: "bg-[--w-color-callout-background] border-[--w-color-callout-border]",
   content: "last-child:mb-0",
   notCallout: "absolute z-50",
   closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
@@ -1273,10 +1339,10 @@ function kebabCaseAttributes(constructor) {
   };
 }
 
-// node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
-// node_modules/.pnpm/@lingui+message-utils@4.7.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
+// node_modules/.pnpm/@lingui+message-utils@4.7.1/node_modules/@lingui/message-utils/dist/compileMessage.mjs
 var import_parser = __toESM(require_parser(), 1);
 function processTokens(tokens, mapText) {
   if (!tokens.filter((token) => token.type !== "content").length) {
@@ -1326,7 +1392,7 @@ Message: ${message}`);
   }
 }
 
-// node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
 var isString = (s) => typeof s === "string";
 var isFunction = (f) => typeof f === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -1378,6 +1444,7 @@ function cacheKey(type, locales, options) {
   return `${type}-${localeKey}-${JSON.stringify(options)}`;
 }
 var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g;
+var OCTOTHORPE_PH = "%__lingui_octothorpe__%";
 var getDefaultFormats = (locale, passedLocales, formats = {}) => {
   const locales = passedLocales || locale;
   const style = (format) => {
@@ -1386,7 +1453,7 @@ var getDefaultFormats = (locale, passedLocales, formats = {}) => {
   const replaceOctothorpe = (value, message) => {
     const numberFormat = Object.keys(formats).length ? style("number") : void 0;
     const valueStr = number(locales, value, numberFormat);
-    return message.replace("#", valueStr);
+    return message.replace(new RegExp(OCTOTHORPE_PH, "g"), valueStr);
   };
   return {
     plural: (value, cases) => {
@@ -1401,43 +1468,53 @@ var getDefaultFormats = (locale, passedLocales, formats = {}) => {
     },
     select: selectFormatter,
     number: (value, format) => number(locales, value, style(format)),
-    date: (value, format) => date(locales, value, style(format)),
-    undefined: undefinedFormatter
+    date: (value, format) => date(locales, value, style(format))
   };
 };
 var selectFormatter = (value, rules) => {
   var _a;
   return (_a = rules[value]) != null ? _a : rules.other;
 };
-var undefinedFormatter = (value) => value;
 function interpolate(translation, locale, locales) {
   return (values = {}, formats) => {
     const formatters = getDefaultFormats(locale, locales, formats);
-    const formatMessage = (message) => {
-      if (!Array.isArray(message))
-        return message;
-      return message.reduce((message2, token) => {
-        if (isString(token))
-          return message2 + token;
+    const formatMessage = (tokens) => {
+      if (!Array.isArray(tokens))
+        return tokens;
+      return tokens.reduce((message, token) => {
+        if (token === "#") {
+          return message + OCTOTHORPE_PH;
+        }
+        if (isString(token)) {
+          return message + token;
+        }
         const [name, type, format] = token;
         let interpolatedFormat = {};
-        if (format != null && typeof format === "object") {
-          Object.entries(format).forEach(([key, value2]) => {
-            interpolatedFormat[key] = formatMessage(value2);
-          });
+        if (type === "plural" || type === "selectordinal" || type === "select") {
+          Object.entries(format).forEach(
+            ([key, value2]) => {
+              interpolatedFormat[key] = formatMessage(value2);
+            }
+          );
         } else {
           interpolatedFormat = format;
         }
-        const formatter = formatters[type];
-        const value = formatter(values[name], interpolatedFormat);
-        if (value == null)
-          return message2;
-        return message2 + value;
+        let value;
+        if (type) {
+          const formatter = formatters[type];
+          value = formatter(values[name], interpolatedFormat);
+        } else {
+          value = values[name];
+        }
+        if (value == null) {
+          return message;
+        }
+        return message + value;
       }, "");
     };
     const result = formatMessage(translation);
     if (isString(result) && UNICODE_REGEX.test(result)) {
-      return (0, import_unraw.default)(result.trim());
+      return (0, import_unraw.unraw)(result.trim());
     }
     if (isString(result))
       return result.trim();